/* 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-product-hero) {
  background-color: var(--color-base);
}

#whd-product-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  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);
}

#whd-product-hero .whd-buy,
#whd-product-hero .whd-product-hero__col {
  display: contents;
}

/* One column until 48rem, but two tracks so the price and badge share a row and
   the badge can toggle without moving anything vertically. display:contents
   flattens the wrappers, so their children place against this grid directly. */
#whd-product-hero > *,
#whd-product-hero .whd-buy > *,
#whd-product-hero .whd-product-hero__col > *,
#whd-product-hero .whd-buy form.cart > * {
  grid-column: 1 / -1;
}

#whd-product-hero .whd-buy > .whd-buy__price-initial,
#whd-product-hero .whd-buy form.cart > .single_variation_wrap {
  grid-column: 1;
  align-self: center;
}

#whd-product-hero .whd-buy > .whd-buy__save {
  grid-column: 2;
  align-self: center;
}

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

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

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

/* Negative, not 0: anything in the rail without an explicit order sits at 0, so
   an empty-today plugin shortcode could otherwise land above the gallery. */
#whd-product-hero .whd-product-hero__media {
  order: -1;
  min-width: 0;
}

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

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

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

#whd-product-hero .whd-product-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-product-hero .whd-product-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-product-hero .whd-buy form.cart {
  display: contents;
}

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

@media (min-width: 48rem) {
  /* must outweigh `.whd-buy form.cart > *` (0,2,1) above. The rating keeps the
     base 1 0 100%, so it takes the line below rather than splitting the pair. */
  #whd-product-hero .whd-buy form.cart > .single_variation_wrap,
  #whd-product-hero .whd-buy > .whd-buy__price-initial,
  #whd-product-hero .whd-buy > .whd-buy__save {
    flex: 0 1 auto;
  }
}

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

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

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

#whd-product-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-product-hero .whd-buy .single_variation_wrap,
#whd-product-hero .whd-buy__price-initial {
  order: 2;
}

/* Placeholder until Woo's client-side render lands. The pair must swap 1:1 - an
   empty wrap still occupies a slot and its gap, which shifts the badge left. */
#whd-product-hero
  .whd-buy:has(.single_variation_wrap .woocommerce-variation-price)
  .whd-buy__price-initial {
  display: none !important;
}

/* !important beats the inline display Woo's slideDown writes: without it the
   empty wrap can show alongside the placeholder, and since both sit in column 1
   the collision pushes the badge onto the next row until one of them hides. */
#whd-product-hero
  .whd-buy
  form.cart
  > .single_variation_wrap:not(:has(.woocommerce-variation-price)) {
  display: none !important;
}

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

/* .product-buy__save — sits beside the price, never on its own line: a saving is
   an attribute of the price, and toggling it must not move the rail vertically. */
#whd-product-hero .whd-buy__save {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.3em;
  max-inline-size: fit-content;
  margin: 0;
  padding: var(--space-xs) 1em var(--space-xs) 0.95em;
  border-radius: var(--radius-sm);
  background: var(--color-success-surface);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

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

#whd-product-hero .whd-buy__save strong {
  font-weight: var(--font-weight-bold);
}

#whd-product-hero .whd-buy__div {
  order: 5;
  inline-size: 100%;
  block-size: 0;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--color-base-2);
}
#whd-product-hero .whd-buy table.variations {
  order: 6;
}
#whd-product-hero .whd-buy .continue-to-assessment-notice,
#whd-product-hero .whd-buy #ark_prescription_notice,
#whd-product-hero .whd-buy .add-to-cart-quantity {
  order: 7;
}
#whd-product-hero .whd-buy__footnotes {
  order: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
}

/* .product-rating - stars clipped to the stored rating, not a flat five. */
#whd-product-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-product-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-product-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-product-hero .whd-buy .product-rating__count {
  line-height: 1;
}

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

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

/* The tier plugin injects a global style hiding .woocommerce-variation-price and
   functions.php:17975 waits 500ms before deciding whether to disable it, so the
   price row collapses and returns mid-load. That hiding suits the old design; ours
   leads on price, so opt out inside the hero. The placeholder rule below is
   !important too - it is more specific, so it still wins where it applies. */
#whd-product-hero .whd-buy .woocommerce-variation-price {
  display: block !important;
  margin: 0;
  text-align: start;
  justify-self: start;
  line-height: 1;
  min-block-size: var(--font-size-2xl);
}

/* style.css:4002 forces `display: block !important` on the rendered variation
   price, so this must be !important too - our ID wins the tie on specificity. */
#whd-product-hero .whd-buy .woocommerce-variation-price .price {
  display: flex !important;
  align-items: baseline;
  gap: var(--space-sm);
}

/* Source order is <del> then <ins>; the price actually charged leads. */
#whd-product-hero .whd-buy .woocommerce-variation-price ins {
  order: 1;
  text-decoration: none;
}

#whd-product-hero .whd-buy .woocommerce-variation-price del {
  order: 2;
}

/* .price__now */
#whd-product-hero .whd-buy .woocommerce-variation-price .price,
#whd-product-hero .whd-buy .woocommerce-variation-price .amount,
#whd-product-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-product-hero
  .whd-buy
  .woocommerce-variation-price
  .woocommerce-Price-currencySymbol {
  font-size: 71%;
  font-weight: 650;
  margin-inline-end: 0.1em;
}

/* .price__was — size alone carries the subordination. opacity resets Woo's
   `span.price del { opacity: .7 }`, which drops this to 2.9:1 on the page background. */
#whd-product-hero .whd-buy .woocommerce-variation-price del,
#whd-product-hero .whd-buy .woocommerce-variation-price del .amount {
  align-self: center;
  color: var(--color-contrast-2);
  text-decoration: line-through;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

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

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

#whd-product-hero .whd-buy table.variations,
#whd-product-hero .whd-buy table.variations tbody,
#whd-product-hero .whd-buy table.variations tr,
#whd-product-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-product-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-product-hero
  .whd-buy
  table.variations
  td.label.select-treatment-variation::before {
  margin-inline-end: 0.3em;
}

#whd-product-hero .whd-buy table.variations td.label,
#whd-product-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-product-hero .whd-buy .rudr-variation-radios {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

/* .strength-pill */
#whd-product-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-product-hero .whd-buy .variation-button label {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  /* `.variation-button label` sets font-weight: 500 !important */
  font-weight: var(--font-weight-medium) !important;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
}

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

#whd-product-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-product-hero .whd-buy .variation-button:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

#whd-product-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-product-hero .whd-buy a.single_add_to_cart_button,
#whd-product-hero .whd-buy button.single_add_to_cart_button,
#whd-product-hero .whd-buy a.cont-assessment,
#whd-product-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-product-hero .whd-buy a.single_add_to_cart_button:hover,
#whd-product-hero .whd-buy button.single_add_to_cart_button:hover,
#whd-product-hero .whd-buy a.cont-assessment:hover,
#whd-product-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-product-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;
}

/* The shortcode prints this div with an inline style attribute, so every property
   it sets there needs !important to be reachable at all. */
#whd-product-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-product-hero .whd-buy .woocommerce-variation-delivery-availability {
  display: none;
}

#whd-product-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-product-hero .whd-buy__reassure {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

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

#whd-product-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-product-hero
  .whd-buy:has(.woocommerce-variation-availability .out-of-stock)
  .whd-buy__reassure-inner,
#whd-product-hero
  .whd-buy:has(.woocommerce-variation-availability .available-on-backorder)
  .whd-buy__reassure-inner {
  display: none;
}

/* --- Quantity + CTA row (post-assessment) ----------------------------------
   The gated branches render no button here, and each injects its own
   `.quantity { display: none !important }`, so this state only ever paints once
   the assessment is done. */

#whd-product-hero .whd-buy .add-to-cart-quantity {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
  margin: 0;
}

#whd-product-hero .whd-buy .add-to-cart-quantity > .clear {
  display: none;
}

/* variable.php prints the quantity itself, then Woo's button function prints a
   second one. Conditional so the nested field still works if the outer is gone. */
#whd-product-hero
  .whd-buy
  .add-to-cart-quantity:has(> .quantity)
  .woocommerce-variation-add-to-cart
  .quantity {
  display: none;
}

/* .qty */
#whd-product-hero .whd-buy .quantity {
  display: inline-flex;
  flex: none;
  align-items: center;
  overflow: hidden;
  background: var(--color-base-0);
  border: 1.5px solid var(--color-base-2);
  border-radius: var(--radius-btn);
}

/* .qty__btn — tabindex -1 in PHP: the input is the control, these are shortcuts. */
#whd-product-hero .whd-buy .whd-qty-btn {
  flex: none;
  inline-size: 2.75rem;
  align-self: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-contrast-1);
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

#whd-product-hero .whd-buy .whd-qty-btn:hover:not(:disabled) {
  background: var(--color-base-1);
}

/* Opacity is right here where it was wrong on the was-price: a disabled control
   is meant to read as unavailable, and WCAG exempts it from contrast minimums. */
#whd-product-hero .whd-buy .whd-qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* .qty__input — spinners removed; the buttons replace them. */
#whd-product-hero .whd-buy .quantity input.qty {
  inline-size: 2.5rem;
  min-block-size: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-contrast);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

#whd-product-hero .whd-buy .quantity input.qty::-webkit-outer-spin-button,
#whd-product-hero .whd-buy .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Wraps the CTA plus Woo's hidden inputs; the button itself is already 100%.
   Woo ships `padding-bottom: 1em` here, which offsets it against the pill. */
#whd-product-hero .whd-buy .woocommerce-variation-add-to-cart {
  flex: 1;
  min-inline-size: 0;
  padding-block-end: 0;
}

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

/* --- WooCommerce notices ---------------------------------------------------
   Rendered outside the hero, so scoped by body the way the page background is.
   Drops to components.css and loses the body scope once the rollout is sitewide. */

body:has(.whd-product-hero)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block: var(--space-md);
  padding: var(--space-fluid-sm);
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-base-2);
  color: var(--color-contrast);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  list-style: none;
}

/* ::before is Woo's icon glyph, positioned against padding we have replaced.
   ::after is its float clearfix - an empty block, which in a flex row becomes a
   real item and drags a gap after it. */
body:has(.whd-product-hero)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
body:has(.whd-product-hero)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
  content: none;
}

body:has(.whd-product-hero) .woocommerce-message {
  background: var(--color-success-surface);
  color: var(--color-success);
}

body:has(.whd-product-hero) .woocommerce-error {
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

/* .woocommerce-error is a <ul>. */
body:has(.whd-product-hero) .woocommerce-error li {
  margin: 0;
  padding: 0;
}

/* padding is !important in style.css:3621; width is too, and the theme flips it
   to 100% under 767px, which is the wanted mobile behaviour - leave it alone. */
body:has(.whd-product-hero)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a.button {
  flex: none;
  margin: 0 0 0 auto;
  padding: var(--space-sm) var(--space-md) !important;
  /* Secondary: filled belongs to the page's one primary action, and a filled
     navy pill already means "selected strength" a few hundred pixels away.
     currentColor so the outline follows each notice type. */
  border: 2px solid currentColor;
  border-radius: var(--radius-btn);
  background: transparent;
  color: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}

body:has(.whd-product-hero)
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)
  a.button:hover {
  background: var(--color-accent-blue-on-contrast);
  border-color: var(--color-accent-blue-on-contrast);
  /* style.css:1131 sets a hover colour for every .button; without restating it
     the label keeps that dark blue against the fill. */
  color: var(--color-contrast);
}

/* --- Mini cart (Elementor Menu Cart) ---------------------------------------
   Lives in the header, so it renders sitewide; the body scope keeps it to this
   template until the header rebuild. .widget_shopping_cart_content is in the
   chain purely for weight - Elementor's per-widget CSS is (0,4,1) and declares
   all the typography, so a shorter selector loses every font rule to it. */

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
  border-block-end: 1px solid var(--color-base-2);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-image {
  grid-column: 1;
  grid-row: 1 / span 2;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-sm);
  background: var(--color-base-0);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-contrast);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-name a {
  /* Elementor declares the font on the anchor, so inheritance alone loses. */
  font: inherit;
  color: var(--color-contrast-1);
  text-decoration: none;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-name a:hover {
  text-decoration: underline;
}

/* OTC assessment answers - symptoms, pregnancy, conditions, allergies. Patient
   data, never rendered in a header panel. */
body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content dl.variation {
  display: none;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-price {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--font-size-sm);
  color: var(--color-neutral);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-price .product-quantity {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-neutral);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-price .amount {
  color: var(--color-contrast);
  font-weight: var(--font-weight-medium);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-remove {
  grid-column: 3;
  grid-row: 1;
}

/* The GTM plugin duplicates the remove link; both are empty anchors. */
body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-remove a + a {
  display: none;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-remove a {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  color: var(--color-neutral);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-remove a::before {
  content: "×";
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  line-height: 1;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__product-remove a:hover {
  background: var(--color-danger-surface);
  color: var(--color-danger);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-block-end: 0;
  color: var(--color-contrast-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-heading);
  text-align: start;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__footer-buttons {
  display: grid;
  gap: var(--space-sm);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__footer-buttons .elementor-button {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-contrast-1);
  border-radius: var(--radius-btn);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

/* Secondary: the basket is a detour, checkout is the action. */
body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
  background: transparent;
  color: var(--color-contrast-1);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover,
body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
  background: var(--color-accent-blue-on-contrast);
  border-color: var(--color-accent-blue-on-contrast);
  color: var(--color-contrast);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__footer-buttons a.elementor-button--checkout {
  background: var(--color-contrast-1);
  color: var(--color-base-0);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__products {
  scrollbar-width: thin;
  scrollbar-color: var(--color-base-2) transparent;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__products::-webkit-scrollbar {
  inline-size: 0.375rem;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__products::-webkit-scrollbar-track {
  background: transparent;
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__products::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-base-2);
}

body:has(.whd-product-hero) .elementor-menu-cart__main .widget_shopping_cart_content .elementor-menu-cart__products::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-blue);
}

/* --- Upsells ("Add to your order") -----------------------------------------
   Rendered only in the post-assessment state (whd_is_gated). The card body
   toggles the checkbox; the corner link opens the product in a new tab, kept
   outside the <label> so the two do not fight. */

/* After the overview on mobile: those bullets are decision content, upsells are
   post-decision. Desktop is unaffected - the two sit in different grid columns. */
#whd-product-hero .whd-buy .whd-upsells {
  order: 11;
  margin: 0;
}

#whd-product-hero .whd-upsells .whd-buy__div {
  margin-block-end: var(--space-fluid-sm);
}

#whd-product-hero .whd-buy .whd-upsells__title {
  margin: 0 0 var(--space-sm);
  color: var(--color-contrast-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
}

#whd-product-hero .whd-buy .whd-upsells__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

#whd-product-hero .whd-buy .whd-upsell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--color-base-2);
  /* Prototype tint; the line above is the pre-color-mix fallback. */
  border-color: color-mix(in oklch, var(--color-contrast-2) 28%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-base-0);
  transition:
    background var(--transition),
    border-color var(--transition);
}

#whd-product-hero .whd-buy .whd-upsell:has(.whd-upsell__check:checked) {
  border-color: var(--color-contrast-1);
  background: var(--color-base-1);
}

/* Already in the basket: stated, then dimmed - a dimmed card with no reason
   reads as out of stock. The checkbox is disabled, not just styled. */
#whd-product-hero .whd-buy .whd-upsell.is-incart {
  opacity: 0.55;
}

#whd-product-hero .whd-buy .whd-upsell.is-incart .whd-upsell__body {
  cursor: default;
}

#whd-product-hero .whd-buy .whd-upsell__note {
  display: block;
  margin-block-start: 0.15em;
  color: var(--color-neutral);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

#whd-product-hero .whd-buy .whd-upsell:has(.whd-upsell__check:focus-visible) {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* The label is the hit area, so the box only needs to be seen. */
#whd-product-hero .whd-buy .whd-upsell__check {
  position: absolute;
  /* Centred against the card, as the prototype's align-items: center grid does,
     rather than pinned to the top. */
  inset-block-start: 50%;
  inset-inline-start: var(--space-sm);
  translate: 0 -50%;
  margin: 0;
  /* appearance:none because the UA greys a native checkbox when disabled and
     accent-color cannot reach it - grey reads as dirty on the tinted card, and
     the semantics are worth more than the colour. */
  appearance: none;
  -webkit-appearance: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1.5px solid var(--color-base-2);
  border-radius: 0.375rem;
  background: var(--color-base-0);
  cursor: pointer;
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

#whd-product-hero .whd-buy .whd-upsell__check:checked {
  border-color: var(--color-contrast-1);
  background-color: var(--color-contrast-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem;
}

#whd-product-hero .whd-buy .whd-upsell__check:disabled {
  cursor: default;
}

#whd-product-hero .whd-buy .whd-upsell__body {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-xl) var(--space-sm)
    calc(var(--space-sm) + 1.25rem + var(--space-sm));
  cursor: pointer;
}

#whd-product-hero .whd-buy .whd-upsell.is-linkonly .whd-upsell__body {
  padding-inline-start: var(--space-sm);
  cursor: default;
}

#whd-product-hero .whd-buy .whd-upsell__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-sm);
}

#whd-product-hero .whd-buy .whd-upsell__name {
  color: var(--color-contrast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

#whd-product-hero .whd-buy .whd-upsell__price {
  color: var(--color-contrast-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

#whd-product-hero .whd-buy .whd-upsell__price del {
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* Masked so the arrow takes a token colour. */
#whd-product-hero .whd-buy .whd-upsell__link {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background-color: var(--color-contrast-2);
  -webkit-mask: url("../img/arrow-forward-sm.svg") center / 0.6rem no-repeat;
  mask: url("../img/arrow-forward-sm.svg") center / 0.6rem no-repeat;
  rotate: -45deg;
}

#whd-product-hero .whd-buy .whd-upsell__link:hover {
  background-color: var(--color-contrast-1);
}

/* It has no text, so without this the only interactive thing in the card that
   is not the label has no focus indicator at all. */
#whd-product-hero .whd-buy .whd-upsell__link:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* --- Simple products -------------------------------------------------------
   simple.php emits a different set of form.cart children to variable.php, and
   none of them carry an order - without these they all sit at 0, above the H1.
   Direct-child selectors throughout, so the variable path is untouched. */

#whd-product-hero .whd-buy form.cart > .clear,
#whd-product-hero
  .whd-buy
  form.cart
  > .single_variation:not(:has(.woocommerce-variation-price)) {
  display: none;
}

/* Holds simple.php's own stock line and a second price; the rail already leads
   with the price, and the prototype rail carries no stock indicator. */
#whd-product-hero .whd-buy .price-and-stock-info {
  display: none;
}

#whd-product-hero .whd-buy .quantity,
#whd-product-hero .whd-buy .atc-assessment,
#whd-product-hero .whd-buy form.cart > a.single_add_to_cart_button {
  order: 7;
}

/* --- Tier pricing ----------------------------------------------------------
   The plugin's option rows are the pack selector, so they take the slot and the
   selected-card language of the strength pills. Kept to one line each: five
   two-line rows cost three times the height of six strength pills.

   Three things have to be beaten here. style.css:498-508 fills :hover and
   --active with `#00468c !important`, so the background needs !important back.
   style.css:517 sets `display: none` on the radio. And the plugin's own CSS has
   the totals hidden except on the active row. */

#whd-product-hero .whd-buy .tpt__tiered-pricing {
  order: 6;
  margin: 0;
}

#whd-product-hero .whd-buy .tiered-pricing-wrapper {
  margin: 0;
}

/* simple.php prints an ACF heading inside form.cart; at order 0 it lands above
   the H1, and it restates the product name anyway. */
#whd-product-hero .whd-buy h2.multibuy-heading {
  display: none;
}

#whd-product-hero .whd-buy .tiered-pricing-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
}

#whd-product-hero .whd-buy .tiered-pricing-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  border: 1.5px solid var(--color-base-2);
  border-color: color-mix(in oklch, var(--color-contrast-2) 28%, transparent);
  border-radius: var(--radius-sm);
  background: var(--color-base-0) !important;
  cursor: pointer;
  transition:
    background var(--transition),
    border-color var(--transition);
}

#whd-product-hero .whd-buy .tiered-pricing-option:hover {
  border-color: var(--color-accent-blue);
  background: var(--color-base-0) !important;
}

#whd-product-hero .whd-buy .tiered-pricing-option.tiered-pricing--active,
#whd-product-hero .whd-buy .tiered-pricing-option.tiered-pricing--active:hover {
  border-color: var(--color-contrast-1);
  background: var(--color-base-1) !important;
}

#whd-product-hero .whd-buy .tiered-pricing-option__checkbox {
  flex: none;
}

/* display, because the theme hides it outright. Inset ring rather than the
   plugin's ::after dot, which the theme also hides. */
#whd-product-hero .whd-buy .tiered-pricing-option-checkbox {
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 1.5px solid var(--color-base-2);
  border-radius: 50%;
  background: var(--color-base-0);
}

#whd-product-hero .whd-buy .tiered-pricing--active .tiered-pricing-option-checkbox {
  border-color: var(--color-contrast-1);
  background: var(--color-contrast-1);
  box-shadow: inset 0 0 0 3px var(--color-base-0);
}

/* style.css:4169 puts min-height: 55px on this, which is the whole reason the
   rows are tall and the text sits above its flex-centred siblings. */
#whd-product-hero .whd-buy .tiered-pricing-option__quantity {
  flex: none;
  min-block-size: 0;
  /* The label of the thing being chosen, so it leads the row. Kept a notch under
     the price, and in body ink rather than the price's navy, so the two read as
     different roles instead of competing at the same weight. */
  color: var(--color-contrast);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
}

/* Theme-added, and only rendered once the rounded discount reaches 1%. */
/* style.css:4158 has this position: absolute, so it sits out of flow and can
   overlap the row rather than taking its own space. */
#whd-product-hero .whd-buy .saveperoffark {
  position: static;
  display: inline-block;
  margin-inline-start: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-btn);
  background: var(--color-success-surface);
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Unit price and total share the line; they wrap together if the rail is tight. */
#whd-product-hero .whd-buy .tiered-pricing-option__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2xs) var(--space-sm);
  margin-inline-start: auto;
  text-align: end;
}

#whd-product-hero .whd-buy .tiered-pricing-option-price {
  color: var(--color-contrast-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

#whd-product-hero .whd-buy .tiered-pricing-option-price__original {
  color: var(--color-neutral);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  text-decoration: line-through;
}

#whd-product-hero .whd-buy .tiered-pricing-option-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  /* A floor, not a fixed width: totals vary in length, and without it the price
     ahead of them lands in a different place on every row. */
  min-inline-size: 5.5rem;
  gap: 0.35em;
  color: var(--color-neutral);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  white-space: nowrap;
}

/* The qty-1 row's total is recalculated against whatever is selected, so it is
   only true while that row is the selected one - which is why the original hides
   it the moment another tier is picked. Every other row's total stands.

   visibility, not display: the original stacked price over total, so removing one
   cost it nothing. Ours share a line, so display:none would slide that row's
   price out to the edge and break the price column. */
#whd-product-hero
  .whd-buy
  .tiered-pricing-option--default:not(.tiered-pricing--active)
  .tiered-pricing-option-total {
  visibility: hidden;
}

/* Several are left empty per row, and an empty block still takes a line.
   __discounted_total2 is the plugin's own second spelling, not a typo. */
#whd-product-hero .whd-buy .tiered-pricing-option-price__original:empty,
#whd-product-hero .whd-buy .tiered-pricing-option-total__original_total:empty,
#whd-product-hero .whd-buy .tiered-pricing-option-total__discounted_total:empty,
#whd-product-hero .whd-buy .tiered-pricing-option-total__discounted_total2:empty {
  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-product-hero .whd-product-hero__media .woocommerce-product-gallery.images {
  position: relative;
  margin: 0;
  width: 100% !important;
  min-width: 0;
  float: none !important;
}

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

/* Phones cap against the viewport rather than a fixed box, so a short screen
   still reaches the price. dvh counts browser chrome; the rem line is the
   fallback for anything that does not know the unit. */
#whd-product-hero .woocommerce-product-gallery {
  --whd-gallery-h: 18rem;
  --whd-gallery-h: min(18rem, 36dvh);
}

@media (min-width: 48rem) {
  #whd-product-hero .woocommerce-product-gallery {
    --whd-gallery-h: 26rem;
  }
}

/* Pre-init the slides are stacked, so the gallery would paint at N x its final
   height and collapse once flexslider lays them out - very visible now the
   gallery leads on phones. Capped unconditionally, not behind :has(.flex-viewport):
   that wrapper is created before the slides are floated, so releasing the clip on
   it reopens the gap for a frame. Post-init the strip is exactly one slide tall,
   so this is inert. A cap rather than hiding the extras - flexslider still has to
   measure their width. */
#whd-product-hero .woocommerce-product-gallery__wrapper {
  max-block-size: var(--whd-gallery-h);
  overflow: hidden;
}

#whd-product-hero .woocommerce-product-gallery__image {
  box-sizing: border-box;
  block-size: var(--whd-gallery-h);
  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-product-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-product-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-product-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-product-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-product-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-product-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-product-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-product-hero .woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
  --whd-arrow: url("../img/arrow-back.svg");
}

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

/* flexslider marks the arrows disabled when there is nowhere to go, which is
   every arrow on a single-image product. */
#whd-product-hero .woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
  display: none;
}

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

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

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

@media (min-width: 64rem) {
  /* Only reserve the thumb column when there is more than one slide to put in
     it - the thumbs are positioned into this gap, but a single-image product
     would otherwise keep an empty 5.5rem strip. Tested on the slides, which are
     server-rendered, rather than on the rail flexslider builds later. */
  #whd-product-hero
    .woocommerce-product-gallery:has(
      .woocommerce-product-gallery__image + .woocommerce-product-gallery__image
    ) {
    padding-inline-end: calc(5.5rem + var(--space-sm));
  }

  #whd-product-hero
    .whd-product-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-product-hero
    .whd-product-hero__media
    .woocommerce-product-gallery.images
    ol.flex-control-thumbs
    li {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
  }

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

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

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

#whd-product-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;
} */