/* Product page hero. Unlayered: WP/Woo/Elementor ship unlayered CSS that beats
   any @layer. A comment naming a .product-* class gives the prototype
   counterpart for the Woo selector below it. */

body:has(.whd-hero) {
  background-color: var(--color-base);
}

#whd-hero {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  padding-block: var(--space-lg) var(--space-fluid-md);
  font-family: var(--font-family-body);
  color: var(--color-contrast);
}

/* The rail is first in the DOM so the h1 precedes the overview for screen
   readers. Flattened here so the gallery can slot between the buy controls. */
#whd-hero .whd-buy,
#whd-hero .whd-hero__col {
  display: contents;
}

@media (min-width: 48rem) {
  #whd-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-fluid-lg);
    align-items: start;
  }

  #whd-hero .whd-hero__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 7.5rem;
  }

  #whd-hero .whd-buy {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-md);
    grid-column: 2;
    grid-row: 1;
  }
}

#whd-hero .whd-hero__media {
  order: 4;
  /* grid items default to min-width:auto and can exceed the track */
  min-width: 0;
}

#whd-hero .whd-hero__support {
  order: 10;
}

/* --- Overview list ---------------------------------------------------------
   Author HTML, so the tick is a background image rather than a per-item <img>. */

#whd-hero .whd-hero__support ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

#whd-hero .whd-hero__support ul li {
  margin: 0;
  padding: 0 0 0 2rem;
  background: url("../img/product-check.svg") 0 0.15em / 1.5rem 1.5rem no-repeat;
  color: var(--color-contrast);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

#whd-hero .whd-hero__support p {
  margin: 0.5rem 0 0;
  color: var(--color-contrast);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* --- Rail ------------------------------------------------------------------
   display:contents on form.cart only. Woo slideDown()s the wrappers inside it,
   writing inline display that would break contents. */

#whd-hero .whd-buy form.cart {
  display: contents;
}

#whd-hero .whd-buy > *,
#whd-hero .whd-buy form.cart > * {
  flex: 1 0 100%;
}

@media (min-width: 48rem) {
  /* must outweigh `.whd-buy form.cart > *` (0,2,1) above */
  #whd-hero .whd-buy form.cart > .single_variation_wrap,
  #whd-hero .whd-buy > .whd-buy__price-initial,
  #whd-hero .whd-buy > .whd-buy__pricerow {
    flex: 0 1 auto;
    align-self: flex-end;
  }

  #whd-hero .whd-buy > .whd-buy__pricerow {
    margin-inline-start: auto;
    margin-block-end: calc(var(--font-size-2xl) * 0.2);
  }
}

#whd-hero .whd-buy > *,
#whd-hero .whd-buy form.cart > *,
#whd-hero .whd-buy .continue-to-assessment-notice > *,
#whd-hero .whd-buy .add-to-cart-quantity > *,
#whd-hero .whd-buy .single_variation_wrap > * {
  margin-block: 0;
}

/* Empty but still block-sized, which pushes the price box taller than its text. */
#whd-hero .whd-buy .single_variation_wrap > .clear,
#whd-hero .whd-buy .tpt__tiered-pricing:not(:has(.tiered-pricing-options)),
#whd-hero .whd-buy .tpt__tiered-pricing-preloaded-variations {
  display: none;
}

#whd-hero .whd-buy .woocommerce-variation-textfdsf:empty,
#whd-hero .whd-buy .woocommerce-variation-description:empty {
  display: none;
}

#whd-hero .whd-buy .product-intro__title {
  order: 1;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-contrast-1);
}

#whd-hero .whd-buy .single_variation_wrap,
#whd-hero .whd-buy__price-initial {
  order: 2;
}

/* Placeholder until Woo's client-side render lands. */
#whd-hero
  .whd-buy:has(.single_variation_wrap .woocommerce-variation-price)
  .whd-buy__price-initial {
  display: none;
}

/* The prototype pairs price and rating in one container with a --space-sm row
   gap. They are separate hero grid items here, so close the difference. */
#whd-hero .whd-buy__pricerow {
  order: 3;
  margin-block-start: calc(var(--space-sm) - var(--space-md));
}

@media (min-width: 48rem) {
  #whd-hero .whd-buy__pricerow {
    margin-block-start: 0;
  }
}

#whd-hero .whd-buy__div {
  order: 5;
}
#whd-hero .whd-buy table.variations {
  order: 6;
}
#whd-hero .whd-buy .continue-to-assessment-notice,
#whd-hero .whd-buy #ark_prescription_notice,
#whd-hero .whd-buy .add-to-cart-quantity {
  order: 7;
}
#whd-hero .whd-buy__footnotes {
  order: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
}

#whd-hero .whd-buy__div {
  inline-size: 100%;
  block-size: 0;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--color-base-2);
}

/* .product-rating - stars clipped to the stored rating, not a flat five. */
#whd-hero .whd-buy .product-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-contrast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

#whd-hero .whd-buy .product-rating__stars {
  position: relative;
  display: block;
  width: 6rem;
  height: 1.125rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-base-2);
}

#whd-hero .whd-buy .product-rating__stars img {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 6rem;
  max-width: none;
  height: 1.125rem;
  clip-path: inset(0 calc(100% - var(--rating, 0%)) 0 0);
}

#whd-hero .whd-buy .product-rating__count {
  line-height: 1;
}

/* PHP emits this without whitespace so :empty matches when there is no rating. */
#whd-hero .whd-buy__pricerow:empty {
  display: none;
}

#whd-hero .whd-buy__pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  flex-wrap: wrap;
}

/* --- Price -----------------------------------------------------------------
   Never set `display` on .single_variation; Woo animates it. */

#whd-hero .whd-buy .woocommerce-variation-price {
  display: block;
  margin: 0;
  text-align: start;
  justify-self: start;
  line-height: 1;
  min-block-size: var(--font-size-2xl);
}

/* .price__now */
#whd-hero .whd-buy .woocommerce-variation-price .price,
#whd-hero .whd-buy .woocommerce-variation-price .amount,
#whd-hero .whd-buy .woocommerce-variation-price .woocommerce-Price-amount {
  color: var(--color-contrast-2);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1;
}

#whd-hero
  .whd-buy
  .woocommerce-variation-price
  .woocommerce-Price-currencySymbol {
  font-size: 71%;
  font-weight: 650;
  margin-inline-end: 0.1em;
}

/* .price__was */
#whd-hero .whd-buy .woocommerce-variation-price del,
#whd-hero .whd-buy .woocommerce-variation-price del .amount {
  color: var(--color-contrast-2);
  text-decoration: line-through;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
}

/* The prototype rail shows no stock indicator. */
#whd-hero .whd-buy .woocommerce-variation-availability {
  display: none;
}

/* --- Strength pills --------------------------------------------------------
   Skinned, not replaced: other scripts bind to these inputs. */

#whd-hero .whd-buy table.variations,
#whd-hero .whd-buy table.variations tbody,
#whd-hero .whd-buy table.variations tr,
#whd-hero .whd-buy table.variations td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  /* the theme forces #fff on these rows under 1024px, with !important */
  background-color: transparent !important;
}

/* .product-buy__label */
#whd-hero .whd-buy table.variations td.label {
  /* the theme's ":" is an ::after; flex is what seats it beside the text */
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}

/* the theme's `content: "Select "` leans on a trailing space, which collapses
   once the cell is a flex container */
#whd-hero
  .whd-buy
  table.variations
  td.label.select-treatment-variation::before {
  margin-inline-end: 0.3em;
}

#whd-hero .whd-buy table.variations td.label,
#whd-hero .whd-buy table.variations td.label label {
  margin: 0;
  color: var(--color-contrast-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-heading);
}

/* .strength-select */
#whd-hero .whd-buy .rudr-variation-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

/* .strength-pill */
#whd-hero .whd-buy .variation-button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin: 0;
  background: var(--color-base-0);
  border: 1.5px solid var(--color-base-2);
  border-radius: var(--radius-btn);
  color: var(--color-contrast-1);
  /* the theme pads the button under 1024px; the label owns padding here */
  padding: 0;
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

#whd-hero .whd-buy .variation-button label {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
}

#whd-hero .whd-buy .variation-button:hover {
  background: var(--color-base-0);
  border-color: var(--color-accent-blue);
  color: var(--color-contrast-1);
}

#whd-hero .whd-buy .variation-button:has(input[type="radio"]:checked) {
  background: var(--color-contrast-1);
  border-color: var(--color-contrast-1);
  color: var(--color-base-0);
}

/* The radio is positioned off-screen, so focus must show on the pill. */
#whd-hero .whd-buy .variation-button:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

#whd-hero .whd-buy .reset_variations {
  font-size: var(--font-size-sm);
  color: var(--color-neutral);
}

/* --- CTA (.btn.btn--orange) ------------------------------------------------
   Element selector needed to beat `.woocommerce :where(...) a.button` (0,2,1). */

#whd-hero .whd-buy a.single_add_to_cart_button,
#whd-hero .whd-buy button.single_add_to_cart_button,
#whd-hero .whd-buy a.cont-assessment,
#whd-hero .whd-buy a.assessment-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-fluid-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--color-accent-orange);
  color: var(--color-contrast);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
  /* beats `.assessment-button, a...cont-assessment { margin: 0 0 1em 0 !important }` */
  margin: 0 !important;
}

#whd-hero .whd-buy a.single_add_to_cart_button:hover,
#whd-hero .whd-buy button.single_add_to_cart_button:hover,
#whd-hero .whd-buy a.cont-assessment:hover,
#whd-hero .whd-buy a.assessment-button:hover {
  background: var(--color-accent-blue-on-contrast);
  border-color: var(--color-accent-blue-on-contrast);
  color: var(--color-contrast);
}

/* .product-buy__assess-copy */
#whd-hero .whd-buy .atc-assessment {
  margin: 0;
  margin-block-end: var(--space-md);
  padding: 0;
  text-align: center;
  color: var(--color-contrast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

#whd-hero .whd-buy .prescription-note {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-regular) !important;
  text-align: center !important;
  color: var(--color-neutral) !important;
  line-height: 1.5;
}

/* --- Reassurance ----------------------------------------------------------- */

#whd-hero .whd-buy .woocommerce-variation-delivery-availability {
  display: none;
}

#whd-hero .whd-buy__reassure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--color-neutral);
  font-size: var(--font-size-sm);
}

@media (min-width: 48rem) {
  #whd-hero .whd-buy__reassure {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

#whd-hero .whd-buy__reassure-inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

#whd-hero .whd-buy__reassure strong {
  color: var(--color-contrast-1);
}

/* The copy is a server-rendered constant - never promise 24 hr on a variation
   that cannot ship in 24 hr. */
#whd-hero
  .whd-buy:has(.woocommerce-variation-availability .out-of-stock)
  .whd-buy__reassure-inner,
#whd-hero
  .whd-buy:has(.woocommerce-variation-availability .available-on-backorder)
  .whd-buy__reassure-inner {
  display: none;
}

#whd-hero .whd-buy .add-to-cart-quantity {
  margin: 0;
}

#whd-hero
  .whd-buy
  .add-to-cart-quantity:not(
    :has(button, input:not([type="hidden"]):not(.qty))
  ) {
  display: none;
}

/* --- Gallery ---------------------------------------------------------------
   Slides are measured by flexslider's JS, so nothing may change their box.
   Thumb selectors are long to outweigh Woo's 25% float (0,4,3). */

#whd-hero .whd-hero__media .woocommerce-product-gallery.images {
  position: relative;
  margin: 0;
  width: 100% !important;
  min-width: 0;
  float: none !important;
}

#whd-hero .woocommerce-product-gallery .flex-viewport,
#whd-hero .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  min-width: 0;
}

#whd-hero .woocommerce-product-gallery__image {
  box-sizing: border-box;
  block-size: 26rem;
  padding: 0;
  border: 0;
  margin: 0;
  background: var(--color-base-0);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-base-2);
}

#whd-hero .woocommerce-product-gallery__image > img {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--space-md);
}

/* Mostly low-resolution photography - cap it rather than scale up. */
#whd-hero .woocommerce-product-gallery__wrapper img {
  inline-size: 100%;
  max-inline-size: 24rem;
  block-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  margin-inline: auto;
}

#whd-hero .woocommerce-product-gallery .flex-viewport {
  block-size: auto !important;
}

/* --- Gallery arrows (below 64rem, where the thumbs are hidden) ------------- */

/* directionNav is on for all product pages; only our gallery shows the arrows. */
.woocommerce-product-gallery .flex-direction-nav {
  display: none;
}

#whd-hero .woocommerce-product-gallery .flex-direction-nav {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: var(--space-xs);
  translate: 0 -50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

#whd-hero .woocommerce-product-gallery .flex-direction-nav a {
  position: relative;
  display: block;
  pointer-events: auto;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--color-base-0);
  border: 0;
  box-shadow: var(--shadow-elevation-low);
  /* hides flexslider's icon-font glyph and its text label, which stays in the
     accessibility tree */
  font-size: 0;
  text-indent: 0;
  opacity: 1;
  overflow: hidden;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #whd-hero .woocommerce-product-gallery .flex-direction-nav a {
    background: color-mix(in srgb, var(--color-base-0) 65%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Masked so the chevrons take a token colour rather than their baked-in hex.
   Out of flow so the link's text label cannot share the centring. */
#whd-hero .woocommerce-product-gallery .flex-direction-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  background-color: var(--color-contrast-1);
  -webkit-mask: var(--whd-arrow) center / contain no-repeat;
  mask: var(--whd-arrow) center / contain no-repeat;
}

#whd-hero .woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  --whd-arrow: url("../img/arrow-back.svg");
}

#whd-hero .woocommerce-product-gallery .flex-direction-nav .flex-next::before {
  --whd-arrow: url("../img/arrow-forward.svg");
}

#whd-hero .woocommerce-product-gallery .flex-direction-nav a:hover {
  box-shadow: var(--shadow-elevation-medium);
}

@media (min-width: 64rem) {
  #whd-hero .woocommerce-product-gallery .flex-direction-nav {
    display: none;
  }
}

@media (max-width: 63.999rem) {
  #whd-hero .woocommerce-product-gallery .flex-control-thumbs {
    display: none;
  }
}

@media (min-width: 64rem) {
  #whd-hero .woocommerce-product-gallery {
    padding-inline-end: calc(5.5rem + var(--space-sm));
  }

  #whd-hero
    .whd-hero__media
    .woocommerce-product-gallery.images
    ol.flex-control-thumbs {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
  }

  #whd-hero
    .whd-hero__media
    .woocommerce-product-gallery.images
    ol.flex-control-thumbs
    li {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
  }

  #whd-hero
    .whd-hero__media
    .woocommerce-product-gallery.images
    ol.flex-control-thumbs
    li
    img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    padding: var(--space-2xs);
    background: var(--color-base-1);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    opacity: 1;
    cursor: pointer;
  }

  #whd-hero
    .whd-hero__media
    .woocommerce-product-gallery.images
    ol.flex-control-thumbs
    li
    img.flex-active {
    border-color: var(--color-base-2);
  }
}

/* --- Breadcrumbs -----------------------------------------------------------
   [ark_breadcrumbs] renders a flat div: links separated by literal " > " text
   nodes, with the current page as a bare text node. No list, so the prototype's
   li::after chevron and its separate current-page colour cannot be reproduced.
   The inline margins and the theme's !important link colour need overriding. */

.ark-breadcrumbs {
  padding-block: var(--space-md);
  margin: 0 !important;
  color: var(--color-contrast);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

body .ark-breadcrumbs a {
  color: var(--color-contrast-2) !important;
  font-weight: var(--font-weight-regular);
  text-decoration: none !important;
}

body .ark-breadcrumbs a:hover {
  text-decoration: underline !important;
}

/* --- ?whd_preview=atc ------------------------------------------------------
   Companion to whd_preview_atc_markup(): the button form of the assessment
   prompt sits outside .continue-to-assessment-notice, so PHP cannot strip it
   with the same match. */

#whd-hero.is-preview-atc .assessment-button,
#whd-hero.is-preview-atc .category-assessment-buttons {
  display: none;
}

/* --- Debug ----------------------------------------------------------------- */

/* .whd-hero.is-debug .whd-buy > * {
  outline: 1px dashed var(--color-accent-orange);
  position: relative;
}

#whd-hero.is-debug .whd-buy > *::after {
  content: attr(class);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font:
    400 0.65rem/1.4 ui-monospace,
    monospace;
  background: var(--color-accent-orange);
  color: var(--color-contrast);
  padding: 0 0.25rem;
  pointer-events: none;
} */