/* Highland 0.9.4 - typographic scale and polished branded interactions */
:root {
  --hp-violet: #5e17eb; /* Sampled from the original Highland logomark */
  --hp-violet-dark: #4714b7;
  --hp-violet-soft: #f0e9ff;
  --hp-font-body: 15px;
  --hp-font-nav: 12px;
  --hp-font-h1: 52px;
  --hp-font-h2: 36px;
  --hp-font-h3: 19px;
  --hp-font-product: 38px;
  --hp-font-card: 15px;
  --hp-font-button: 13px;
}

/* All of these custom properties are supplied by the WP Customizer. */
body { font-size: var(--hp-font-body); }
h1 { font-size: var(--hp-font-h1); }
h2 { font-size: var(--hp-font-h2); }
h3 { font-size: var(--hp-font-h3); }
.hp-hero-copy h1 { font-size: var(--hp-font-h1); }
.hp-about-head h1 { font-size: calc(var(--hp-font-h1) * .923); }
.hp-manifest-grid h2 { font-size: calc(var(--hp-font-h2) * 1.194); }
.hp-single-detail .product_title { font-size: var(--hp-font-product); }
.hp-single-bottom .woocommerce-tabs .panel h2 { font-size: calc(var(--hp-font-h2) * .611); }
.woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: calc(var(--hp-font-h2) * .833); }
.woocommerce .cart-collaterals .cart_totals h2 { font-size: calc(var(--hp-font-h2) * .694); }
.woocommerce form.checkout #customer_details h3,
.woocommerce form.checkout #order_review_heading { font-size: calc(var(--hp-font-h3) * 1.263); }
.hp-contact-grid h2 { font-size: calc(var(--hp-font-h2) * .75); }
.hp-legal h2 { font-size: calc(var(--hp-font-h2) * .639); }
.hp-legal h3 { font-size: calc(var(--hp-font-h3) * .947); }
.hp-footer-grid h3 { font-size: calc(var(--hp-font-h3) * .684); }
.hp-safety h3 { font-size: calc(var(--hp-font-h3) * .895); }
.hp-card-info h3 { font-size: var(--hp-font-card); }
.hp-card-price, .hp-card-price .amount { font-size: var(--hp-font-card) !important; }
.hp-hero-copy p, .hp-review-card p, .hp-legal { font-size: var(--hp-font-body); }
.hp-about-head p, .hp-about-intro p, .hp-manifest p { font-size: calc(var(--hp-font-body) * 1.067); }
.hp-single-detail .woocommerce-product-details__short-description,
.hp-contact-details { font-size: calc(var(--hp-font-body) * .933); }
.hp-catalog-head p { font-size: calc(var(--hp-font-body) * 1.133); }
.hp-footer-grid p { font-size: calc(var(--hp-font-body) * .8); }
.hp-footer-grid a { font-size: calc(var(--hp-font-body) * .867); }
.hp-contact-form label, .woocommerce form .form-row label { font-size: calc(var(--hp-font-body) * .8); }
.hp-contact-form label > input:not([type=checkbox]), .hp-contact-form textarea { font-size: calc(var(--hp-font-body) * .933); }
.hp-button { font-size: var(--hp-font-button); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button.alt, .woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.wc-block-components-button:not(.is-link), .wp-block-button__link { font-size: var(--hp-font-button) !important; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { font-size: var(--hp-font-button) !important; }

/* Animated 3-colour underline. Active state stays visible. */
.hp-nav > a {
  position: relative;
  border-image: none !important;
  border-bottom-color: transparent !important;
  font-size: var(--hp-font-nav);
  transition: color .22s ease;
}
.hp-nav > a:hover, .hp-nav > a.is-active, .hp-nav > a:focus-visible { border-image: none !important; color: var(--hp-ink); }
.hp-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, #5e17eb 0%, #31edae 49%, #e11717 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.hp-nav > a:hover::after, .hp-nav > a.is-active::after, .hp-nav > a:focus-visible::after { transform: scaleX(1); }

/* Flat, square, premium purple CTA buttons - cart and checkout included. */
.hp-button.hp-button-primary,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce div.product form.cart .button,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.wc-block-components-button:not(.is-link),
.wp-block-button__link,
.hp-contact-form button[type="submit"] {
  background-color: var(--hp-violet) !important;
  background-image: linear-gradient(105deg, #5e17eb 0%, #8148f5 49%, #5e17eb 100%) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50%;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(94, 23, 235, .11);
  transition: background-position .38s cubic-bezier(.22,1,.36,1),
              transform .24s cubic-bezier(.22,1,.36,1),
              box-shadow .24s ease, filter .24s ease;
}
.hp-button.hp-button-primary:hover,
.woocommerce a.button:not(.disabled):hover,
.woocommerce button.button:not(:disabled):hover,
.woocommerce input.button:not(:disabled):hover,
.woocommerce .button.alt:not(:disabled):hover,
.woocommerce div.product form.cart .button:not(:disabled):hover,
.woocommerce #payment #place_order:not(:disabled):hover,
.woocommerce-page #payment #place_order:not(:disabled):hover,
.wc-block-components-button:not(.is-link):not(:disabled):hover,
.wp-block-button__link:hover,
.hp-contact-form button[type="submit"]:not(:disabled):hover {
  background-color: var(--hp-violet-dark) !important;
  background-image: linear-gradient(105deg, #5e17eb 0%, #8148f5 49%, #5e17eb 100%) !important;
  background-size: 220% 100% !important;
  background-position: 100% 50%;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 11px 25px rgba(94, 23, 235, .25);
}
.hp-button.hp-button-primary:active,
.woocommerce button.button:active,
.woocommerce a.button:active,
.wc-block-components-button:not(.is-link):active {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(94, 23, 235, .15);
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.wc-block-components-button:disabled { opacity: .56; box-shadow: none; transform: none; }

/* Listing action: discreet violet by default, full brand-purple on hover. */
.hp-card-action > a.button,
.hp-card-action a.add_to_cart_button,
.woocommerce ul.products li.product .hp-card-action > a.button {
  width: 41px !important;
  height: 41px !important;
  border-radius: 0 !important; /* The brand uses square-cornered CTA buttons, including listing icons. */
  border: 1px solid #e3d7ff !important;
  color: var(--hp-violet) !important;
  background: var(--hp-violet-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(0);
  transition: background-color .24s ease, color .24s ease, transform .24s ease,
              box-shadow .24s ease, border-color .24s ease;
}
.hp-card-action > a.button:hover,
.hp-card-action a.add_to_cart_button:hover,
.woocommerce ul.products li.product .hp-card-action > a.button:hover,
.woocommerce ul.products li.product .hp-card-action a.add_to_cart_button:hover {
  color: #fff !important;
  background: var(--hp-violet) !important;
  background-image: none !important;
  border-color: var(--hp-violet) !important;
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(94, 23, 235, .23) !important;
}
.hp-card-action > a.button svg,
.hp-card-action a.add_to_cart_button svg { transition: transform .24s ease; }
.hp-card-action > a.button:hover svg,
.hp-card-action a.add_to_cart_button:hover svg { transform: scale(1.09); }

/* Keep navigation and icon-only review controls consistent and accessible. */
.hp-slider-nav button {
  transition: border-color .22s ease, color .22s ease, background-color .22s ease;
}
.hp-slider-nav button:hover { color: var(--hp-violet); border-color: var(--hp-violet); background: #f9f6ff; }
.hp-demo-pill { border-radius: 0; }
.hp-cart-link:hover { color: var(--hp-violet) !important; }

@media (max-width: 1020px) {
  .hp-nav > a::after { right: auto; width: 65px; transform-origin: left; }
}
@media (max-width: 760px) {
  .hp-hero-copy h1 { font-size: clamp(28px, calc(var(--hp-font-h1) * .692), var(--hp-font-h1)); }
  .hp-hero-copy p { font-size: calc(var(--hp-font-body) * .933); }
}
@media (max-width: 435px) {
  .hp-card-info h3 { font-size: calc(var(--hp-font-card) * .867); }
  .hp-card-price, .hp-card-price .amount { font-size: calc(var(--hp-font-card) * .867) !important; }
  .hp-card-action > a.button,
  .hp-card-action a.add_to_cart_button { width: 34px !important; height: 34px !important; }
  .hp-section-head h2 { font-size: clamp(23px, calc(var(--hp-font-h2) * .694), var(--hp-font-h2)); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-nav > a, .hp-nav > a::after,
  .hp-button, .woocommerce a.button, .woocommerce button.button,
  .woocommerce input.button, .wc-block-components-button,
  .wp-block-button__link, .hp-card-action > a.button,
  .hp-card-action svg, .hp-slider-nav button { transition-duration: .01ms !important; }
  .hp-button:hover, .woocommerce a.button:hover,
  .woocommerce button.button:hover, .hp-card-action > a.button:hover { transform: none; }
}

/* Standard actions are square; iconography-only slider arrows remain circular. */
.hp-button,
.woocommerce #respond input#submit,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
.wp-block-button__link,
.hp-contact-form button[type="submit"],
.woocommerce ul.products li.product .hp-card-action a.button { border-radius: 0 !important; }

/* Keep controls readable in mobile layouts while respecting Customizer scale. */
@media (max-width: 760px) {
  h1 { font-size: clamp(23px, calc(var(--hp-font-h1) * .7), var(--hp-font-h1)); }
  h2 { font-size: clamp(19px, calc(var(--hp-font-h2) * .75), var(--hp-font-h2)); }
  .hp-about-head h1 { font-size: clamp(23px, calc(var(--hp-font-h1) * .65), var(--hp-font-h1)); }
  .hp-manifest-grid h2 { font-size: clamp(23px, calc(var(--hp-font-h2) * .85), var(--hp-font-h2)); }
  .hp-single-detail .product_title { font-size: clamp(22px, calc(var(--hp-font-product) * .74), var(--hp-font-product)); }
  .hp-hero-copy h1 { font-size: clamp(23px, calc(var(--hp-font-h1) * .7), var(--hp-font-h1)); }
}
/* Honor keyboard interactions. */
.hp-card-action a.button:focus-visible,
.hp-nav a:focus-visible { outline-color: var(--hp-violet); outline-offset: 3px; }
