/* ==========================================================================
   NOVAURA — Single product page
   WooCommerce supplies the markup; these rules shape it into the approved
   two-column layout. No WooCommerce template is overridden.
   ========================================================================== */

.nva-woo .product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nva-s-10);
}

/* --- Notices -------------------------------------------------------------
   WooCommerce prints its "added to cart" confirmation into its own
   .woocommerce-notices-wrapper, which sits outside div.product. These rules
   target that real wrapper rather than a container of ours, so the
   confirmation is visible wherever WooCommerce chooses to put it.
   ------------------------------------------------------------------------ */
.nva-woo .woocommerce-notices-wrapper:empty { display: none; }

.nva-woo .woocommerce-message,
.nva-woo .woocommerce-info,
.nva-woo .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nva-s-4);
  margin: 0 0 var(--nva-s-8);
  padding: var(--nva-s-4) var(--nva-s-5);
  border: 1px solid var(--nva-line);
  border-left-width: 2px;
  border-radius: var(--nva-r-sm);
  background-color: var(--nva-surface);
  font-size: var(--nva-t-small);
  list-style: none;
}
.nva-woo .woocommerce-message { border-left-color: var(--nva-approved-fg); }
.nva-woo .woocommerce-info    { border-left-color: var(--nva-blue); }
.nva-woo .woocommerce-error   { border-left-color: var(--nva-red); }

.nva-woo .woocommerce-message .button,
.nva-woo .woocommerce-info .button {
  margin-left: auto;
  padding: var(--nva-s-2) var(--nva-s-5);
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  border-radius: var(--nva-r-xs);
  font-size: var(--nva-t-nano);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-button);
}

/* --- Breadcrumb ---------------------------------------------------------- */
.nva-pdp__breadcrumb {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nva-s-2);
  font-size: var(--nva-t-micro);
  letter-spacing: 0.06em;
  color: var(--nva-ink-40);
}
.nva-pdp__breadcrumb a {
  color: var(--nva-ink-55);
  transition: color var(--nva-d-base) var(--nva-ease);
}
.nva-pdp__breadcrumb a:hover { color: var(--nva-ink); }
.nva-pdp__breadcrumb-current { color: var(--nva-ink); }

/* ==========================================================================
   Gallery — large image, thumbnails beneath

   IMPORTANT: the theme dequeues woocommerce-general.css, which is where
   WooCommerce ships its FlexSlider rules. Those rules have to be replaced
   here — FlexSlider writes inline widths onto the slide strip, so without
   an overflow constraint the strip can spill outside the gallery column.
   Keep the overflow and stacking rules below.
   ========================================================================== */
.woocommerce-product-gallery {
  position: relative;
  z-index: 1;                 /* explicitly BELOW the summary column */
  float: none;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;           /* hard stop: the gallery can never spill out */
  opacity: 1 !important;
}

/* FlexSlider injects this wrapper. It is the element that actually needs
   the overflow constraint — replaces WooCommerce's own .flex-viewport rule. */
.woocommerce-product-gallery .flex-viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.woocommerce-product-gallery__wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  max-width: 100%;
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-xl);
  background-color: var(--nva-surface);
  overflow: hidden;
}
/* FlexSlider floats the slides; contain them. */
.woocommerce-product-gallery__wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce-product-gallery__image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: var(--nva-s-8);
}

.woocommerce-product-gallery__image img {
  width: auto;
  max-width: 100%;
  height: 320px;
  object-fit: contain;
  margin-inline: auto;
}

/* Zoom overlay stays inside its slide. */
.woocommerce-product-gallery .zoomImg {
  background-color: var(--nva-surface);
  max-width: none;
}

/* Fullscreen trigger */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--nva-s-4);
  right: var(--nva-s-4);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--nva-r-full);
  background-color: var(--nva-surface);
  border: 1px solid var(--nva-line);
  font-size: 0;
  color: var(--nva-ink);
  transition: border-color var(--nva-d-base) var(--nva-ease);
}
.woocommerce-product-gallery__trigger:hover { border-color: var(--nva-ink); }
.woocommerce-product-gallery__trigger::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.woocommerce-product-gallery__trigger::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 1.5px;
  background-color: currentColor;
  transform: rotate(45deg) translate(7px, 3px);
}
.woocommerce-product-gallery__trigger img { display: none; }

/* Thumbnails, below the main image */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nva-s-3);
  margin: var(--nva-s-4) 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 84px;
  margin: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--nva-s-2);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  background-color: var(--nva-surface);
  cursor: pointer;
  opacity: 1;
  transition: border-color var(--nva-d-base) var(--nva-ease);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  border-color: rgba(0,0,0,0.7);
}

/* FlexSlider directional arrows are not used in this design. */
.woocommerce-product-gallery .flex-direction-nav { display: none; }

/* ==========================================================================
   Summary column
   ========================================================================== */
/* Grid children must not blow out their track — a wide child would
   otherwise push into its neighbour's column. */
.nva-woo .product > * { min-width: 0; max-width: 100%; }

/* The gallery is a positioned element, so the summary is stacked
   explicitly above it rather than relying on paint order. */
.nva-woo .product .summary {
  position: relative;
  z-index: 2;
  float: none;
  width: 100% !important;
  min-width: 0;
  margin: 0;
}

.nva-woo .product form.cart { position: relative; z-index: 3; }



.nva-pdp__eyebrow { display: block; }

.nva-woo .product .summary .product_title {
  margin-top: var(--nva-s-3);
  font-family: var(--nva-font-heading);
  font-size: var(--nva-t-product);
  font-weight: var(--nva-w-semi);
  line-height: 1.04;
  letter-spacing: var(--nva-ls-tight);
}

/* --- Rating -------------------------------------------------------------- */
.nva-pdp__rating {
  display: flex;
  align-items: center;
  gap: var(--nva-s-3);
  margin-top: var(--nva-s-4);
}
.nva-pdp__rating .nva-rating { margin-top: 0; }
.nva-pdp__rating-count {
  font-size: var(--nva-t-micro);
  color: var(--nva-ink-55);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--nva-d-base) var(--nva-ease);
}
.nva-pdp__rating-count:hover { color: var(--nva-ink); }

/* --- Price --------------------------------------------------------------- */
.nva-woo .product .summary .price {
  display: block;
  margin-top: var(--nva-s-5);
  font-family: var(--nva-font-heading);
  font-size: 2.25rem;
  font-weight: var(--nva-w-medium);
  line-height: 1.1;
  color: var(--nva-ink);
}
.nva-woo .product .summary .price del {
  margin-right: var(--nva-s-3);
  font-size: 0.62em;
  color: var(--nva-ink-40);
}
.nva-woo .product .summary .price ins {
  text-decoration: none;
  color: var(--nva-ink);
}

.nva-pdp__rule { margin-top: var(--nva-s-8); }

/* Stock status */
.nva-woo .product .summary .stock {
  margin: var(--nva-s-4) 0 0;
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
}
.nva-woo .product .summary .stock.in-stock { color: var(--nva-approved-fg); }
.nva-woo .product .summary .stock.out-of-stock { color: var(--nva-red); }

/* ==========================================================================
   Quantity option cards
   ========================================================================== */
.nva-qty-cards { margin-top: var(--nva-s-8); }

.nva-qty-cards__label {
  display: block;
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink-60);
}

.nva-qty-cards__grid {
  display: grid;
  /*
   * Scales to however many tiers are configured.
   *
   * Previously repeat(3, …) — a fourth tier squeezed a fourth column into
   * the same width and a fifth made every card unreadable. auto-fit with a
   * minimum track means cards keep a usable width and wrap onto a second
   * row instead, so 2 tiers or 8 both look deliberate.
   *
   * 8.5rem is the narrowest a card can be and still fit "10 Vials" above a
   * price and a savings badge without wrapping mid-word.
   */
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--nva-s-3);
  margin-top: var(--nva-s-4);
}

/*
 * Two per row on a phone. auto-fit alone would drop to one column at 375px,
 * which makes a long schedule an unreasonable amount of scrolling.
 */
@media (max-width: 479px) {
  .nva-qty-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nva-s-2);
  }
}

.nva-qty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nva-s-2);
  min-height: 128px;
  padding: var(--nva-s-4) var(--nva-s-2);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-lg);
  background-color: var(--nva-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--nva-d-base) var(--nva-ease),
              box-shadow var(--nva-d-base) var(--nva-ease);
}
.nva-qty-card:hover { border-color: var(--nva-ink-30); }
.nva-qty-card.is-selected {
  border-color: var(--nva-ink);
  box-shadow: inset 0 0 0 1px var(--nva-ink);
}

.nva-qty-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.nva-qty-card__count {
  font-family: var(--nva-font-heading);
  font-size: 1.5rem;
  font-weight: var(--nva-w-semi);
  line-height: 1;
  color: var(--nva-ink);
}

.nva-qty-card__unit {
  font-size: var(--nva-t-nano);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink-55);
}

/* Total for the tier. Display only — see novaura_quantity_cards(). */
.nva-qty-card__total {
  margin-top: var(--nva-s-1);
  font-family: var(--nva-font-heading);
  font-size: 1.0625rem;
  font-weight: var(--nva-w-medium);
  line-height: 1.2;
  color: var(--nva-ink);
}
.nva-qty-card__total .woocommerce-Price-amount { font-family: var(--nva-font-heading); }

.nva-qty-card__unit-price {
  font-size: 0.625rem;
  line-height: 1.4;
  color: var(--nva-ink-50);
}
.nva-qty-card__unit-price .woocommerce-Price-amount { font-family: var(--nva-font-heading); }

/* Savings badge. Rendered from the tier discount, so it stays correct when
   real pricing replaces the example values. */
.nva-qty-card__saving {
  margin-top: auto;
  padding: 2px var(--nva-s-2);
  border-radius: var(--nva-r-full);
  background-color: var(--nva-approved-bg);
  font-size: 0.5625rem;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-approved-fg);
}
.nva-qty-card__saving[hidden] { display: none; }

/* Admin-only warning that displayed totals are examples. */
.nva-qty-cards__admin-note {
  margin-top: var(--nva-s-3);
  padding: var(--nva-s-3) var(--nva-s-4);
  border: 1px dashed var(--nva-transit-line);
  border-radius: var(--nva-r-sm);
  background-color: var(--nva-transit-bg);
  font-size: var(--nva-t-nano);
  line-height: 1.6;
  color: var(--nva-transit-fg);
}

/* ==========================================================================
   Add to cart form
   ========================================================================== */
.nva-woo .product form.cart {
  display: block;
  margin-top: var(--nva-s-6);
}

.nva-woo .product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  margin: var(--nva-s-5) 0 0;
}

.nva-woo .product form.cart input.qty {
  width: 60px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  background: transparent;
  text-align: center;
  font-size: var(--nva-t-body);
  font-weight: var(--nva-w-semi);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.nva-woo .product form.cart input.qty::-webkit-outer-spin-button,
.nva-woo .product form.cart input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.nva-woo .product form.cart input.qty:focus { outline: none; border-color: rgba(0,0,0,0.25); }

/* Once the stepper is built, the input joins the button group. */
.nva-stepper-ready input.qty {
  border-radius: 0;
  border-inline: 0;
}
.nva-stepper-ready .nva-stepper__btn { height: 48px; width: 48px; }

/* Hide WooCommerce's quantity label; the cards above carry the meaning. */
.nva-woo .product form.cart .quantity label.screen-reader-text { position: absolute; left: -9999px; }

/* --- Buttons: full-width, stacked ---------------------------------------- */
.nva-woo .product form.cart .single_add_to_cart_button,
.nva-woo .product form.cart .nva-pdp__buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: var(--nva-s-4);
  padding-inline: var(--nva-s-8);
  border-radius: 0;
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-small);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-button);
  cursor: pointer;
  transition: background-color var(--nva-d-base) var(--nva-ease),
              color var(--nva-d-base) var(--nva-ease),
              border-color var(--nva-d-base) var(--nva-ease);
}

.nva-woo .product form.cart .single_add_to_cart_button {
  border: 1px solid var(--nva-ink);
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
}
.nva-woo .product form.cart .single_add_to_cart_button:hover { background-color: rgba(0,0,0,0.85); }

.nva-woo .product form.cart .nva-pdp__buy-now {
  border: 1px solid var(--nva-ink);
  background-color: transparent;
  color: var(--nva-ink);
}
.nva-woo .product form.cart .nva-pdp__buy-now:hover { background-color: var(--nva-ink-05); }

/* WooCommerce adds .disabled to this button on a variable product until a
   variation is chosen, and removes it once one is. This only reflects that
   state. */
.nva-woo .product form.cart .single_add_to_cart_button.disabled,
.nva-woo .product form.cart .single_add_to_cart_button:disabled {
  border-color: transparent;
  background-color: var(--nva-ink-10);
  color: var(--nva-ink-30);
  cursor: not-allowed;
}


/* ==========================================================================
   Variable products

   WooCommerce ships the styling for this UI in woocommerce-general.css,
   which the theme dequeues. These rules replace what is needed so a
   variable product is actually usable — without them the option selectors
   can be hard to see, and the Add to Cart button stays disabled because no
   variation can be chosen.
   ========================================================================== */
.nva-woo .product .variations_form { display: block; }

.nva-woo .product table.variations {
  width: 100%;
  margin: 0 0 var(--nva-s-5);
  border: 0;
}
.nva-woo .product table.variations tr { display: block; margin-bottom: var(--nva-s-4); }
.nva-woo .product table.variations th,
.nva-woo .product table.variations td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

.nva-woo .product table.variations label {
  display: block;
  margin-bottom: var(--nva-s-2);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink-60);
}

.nva-woo .product table.variations select {
  width: 100%;
  height: 48px;
  padding: 0 var(--nva-s-10) 0 var(--nva-s-4);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  background-color: var(--nva-surface);
  background-image: linear-gradient(45deg, transparent 50%, var(--nva-ink-55) 50%),
                    linear-gradient(135deg, var(--nva-ink-55) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  font-size: var(--nva-t-body);
  color: var(--nva-ink);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.nva-woo .product table.variations select:focus {
  outline: none;
  border-color: rgba(0,0,0,0.4);
}

.nva-woo .product .reset_variations {
  display: inline-block;
  margin-top: var(--nva-s-2);
  font-size: var(--nva-t-micro);
  color: var(--nva-ink-55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nva-woo .product .reset_variations:hover { color: var(--nva-ink); }

.nva-woo .product .single_variation_wrap { display: block; }

.nva-woo .product .woocommerce-variation-price {
  display: block;
  margin-bottom: var(--nva-s-4);
}
.nva-woo .product .woocommerce-variation-price .price {
  margin-top: 0;
  font-size: 1.75rem;
}

.nva-woo .product .woocommerce-variation-availability .stock {
  margin-top: 0;
  margin-bottom: var(--nva-s-3);
}

.nva-woo .product .woocommerce-variation-description {
  margin-bottom: var(--nva-s-4);
  font-size: var(--nva-t-small);
  line-height: var(--nva-lh-body);
  color: var(--nva-ink-muted);
}

/* WooCommerce's "please choose an option" message */
.nva-woo .product .wc-no-matching-variations {
  margin-bottom: var(--nva-s-4);
  padding: var(--nva-s-3) var(--nva-s-4);
  border: 1px solid var(--nva-line);
  border-left: 2px solid var(--nva-blue);
  border-radius: var(--nva-r-sm);
  font-size: var(--nva-t-small);
}

/* ==========================================================================
   Trust row
   ========================================================================== */
.nva-pdp__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nva-s-4);
  margin-top: var(--nva-s-8);
  padding-top: var(--nva-s-8);
  border-top: 1px solid var(--nva-line);
  list-style: none;
}

.nva-pdp__trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nva-s-2);
  text-align: center;
  color: var(--nva-ink-60);
}
.nva-pdp__trust-item span {
  font-size: 0.625rem;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  line-height: 1.4;
}

/* --- Lab link ------------------------------------------------------------ */
.nva-pdp__lab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nva-s-4);
  margin-top: var(--nva-s-6);
  padding: var(--nva-s-4) var(--nva-s-5);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink);
  transition: border-color var(--nva-d-base) var(--nva-ease);
}
.nva-pdp__lab:hover { border-color: var(--nva-ink); }
.nva-pdp__lab .nva-icon { transition: transform var(--nva-d-slow) var(--nva-ease); }
.nva-pdp__lab:hover .nva-icon { transform: translateX(4px); }

/* ==========================================================================
   Overview and accordion
   ========================================================================== */
.nva-pdp__detail {
  grid-column: 1 / -1;
  margin-top: var(--nva-s-16);
}

.nva-pdp__overview-title {
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-wide);
  color: var(--nva-ink-60);
}

.nva-pdp__overview-body {
  max-width: 46rem;
  margin-top: var(--nva-s-6);
  font-size: var(--nva-t-lead);
  line-height: var(--nva-lh-relaxed);
  color: var(--nva-ink-muted);
}
.nva-pdp__overview-body p + p { margin-top: var(--nva-s-5); }

.nva-accordion {
  margin-top: var(--nva-s-16);
  border-top: 1px solid var(--nva-line);
}

.nva-accordion__item { border-bottom: 1px solid var(--nva-line); }
.nva-accordion__heading { margin: 0; }

.nva-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nva-s-6);
  width: 100%;
  padding-block: var(--nva-s-8);
  text-align: left;
  font-family: var(--nva-font-heading);
  font-size: var(--nva-t-accordion);
  font-weight: var(--nva-w-medium);
  letter-spacing: var(--nva-ls-tight);
  color: var(--nva-ink);
  transition: opacity var(--nva-d-base) var(--nva-ease);
}
.nva-accordion__trigger:hover { opacity: 0.7; }

/* Plus that morphs to minus */
.nva-accordion__marker {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.nva-accordion__marker::before,
.nva-accordion__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}
.nva-accordion__marker::before { width: 14px; height: 1.5px; }
.nva-accordion__marker::after {
  width: 1.5px;
  height: 14px;
  transition: transform var(--nva-d-base) var(--nva-ease);
}
.nva-accordion__trigger[aria-expanded="true"] .nva-accordion__marker::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.nva-accordion__panel { padding-bottom: var(--nva-s-8); }
.nva-accordion__body { max-width: 46rem; margin-top: 0; }

.nva-lab__note {
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink-55);
}

.nva-lab__link {
  display: inline-flex;
  align-items: center;
  gap: var(--nva-s-2);
  font-weight: var(--nva-w-semi);
}

/* Reviews inside a panel */
.nva-accordion__body .comment-form { margin-top: var(--nva-s-8); }
.nva-accordion__body .commentlist { list-style: none; padding: 0; }
.nva-accordion__body .comment_container { display: flex; gap: var(--nva-s-4); }
.nva-accordion__body .avatar { width: 48px; height: 48px; border-radius: var(--nva-r-full); }

/* ==========================================================================
   Related products
   ========================================================================== */
.related.products {
  grid-column: 1 / -1;
  margin-top: var(--nva-s-20);
  padding-top: var(--nva-s-16);
  border-top: 1px solid var(--nva-line);
}

.related.products > h2 {
  font-family: var(--nva-font-heading);
  font-size: var(--nva-t-section-sm);
  font-weight: var(--nva-w-semi);
  letter-spacing: var(--nva-ls-tight);
}

.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nva-s-4);
  margin: var(--nva-s-10) 0 0;
  padding: 0;
  list-style: none;
}

.related.products ul.products li.product {
  display: flex;
  float: none;
  width: auto;
  margin: 0;
}
.related.products ul.products li.product > .nva-product-card { width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px) {
  .woocommerce-product-gallery__image img { height: 400px; }
  .woocommerce-product-gallery .flex-control-thumbs li { width: 96px; }
  .related.products ul.products { gap: var(--nva-s-6); }
}

@media (min-width: 1024px) {
  .nva-woo .product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nva-s-16);
    align-items: start;
  }

  .woocommerce-product-gallery__image img { height: 460px; }
  .woocommerce-product-gallery .flex-control-thumbs li { width: 104px; }

  .related.products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nva-s-10);
  }
}

@media (min-width: 1280px) {
  .nva-woo .product { gap: var(--nva-s-24); }
  .woocommerce-product-gallery__image img { height: 500px; }
}

/* ==========================================================================
   Product FAQ — nested inside the Frequently Asked Questions panel
   ========================================================================== */
.nva-faq {
  margin-top: calc( var(--nva-s-2) * -1 );
  border-top: 1px solid var(--nva-line);
}

.nva-faq__item { border-bottom: 1px solid var(--nva-line); }

.nva-faq__heading { margin: 0; }

.nva-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nva-s-5);
  width: 100%;
  padding-block: var(--nva-s-5);
  text-align: left;
  transition: opacity var(--nva-d-base) var(--nva-ease);
}
.nva-faq__trigger:hover { opacity: 0.7; }

.nva-faq__question {
  font-family: var(--nva-font-body);
  font-size: 0.9375rem;
  font-weight: var(--nva-w-medium);
  line-height: 1.5;
  color: var(--nva-ink);
}

.nva-faq__marker {
  position: relative;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}
.nva-faq__marker::before,
.nva-faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--nva-ink-55);
  transform: translate(-50%, -50%);
}
.nva-faq__marker::before { width: 11px; height: 1.5px; }
.nva-faq__marker::after {
  width: 1.5px;
  height: 11px;
  transition: transform var(--nva-d-base) var(--nva-ease);
}
.nva-faq__trigger[aria-expanded="true"] .nva-faq__marker::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.nva-faq__answer {
  padding-bottom: var(--nva-s-5);
  font-size: 0.875rem;
  line-height: var(--nva-lh-relaxed);
  color: var(--nva-ink-muted);
}
.nva-faq__answer p + p { margin-top: var(--nva-s-4); }

/* --- Sale badge ------------------------------------------------------------
   WooCommerce prints <span class="onsale"> as a DIRECT CHILD of div.product
   whenever a product has a sale price. div.product is a CSS grid, so that
   span became an unintended grid item: it took the first cell, pushed the
   gallery across and dropped .summary onto the next row. The two-column
   layout collapsed the moment a sale price was set, and only then.

   Taking it out of flow is the whole fix. The badge, WooCommerce's markup and
   its <del>/<ins> pricing are all untouched — nothing is hidden and no
   template or hook is overridden.

   Placed in the gallery's grid cell so it sits over the image rather than the
   title. Because it is absolutely positioned it is out of flow regardless, so
   if that cell ever moved the badge would simply sit elsewhere — the columns
   could not break again.
   --------------------------------------------------------------------------- */
.nva-woo .product { position: relative; }

.nva-woo .product > .onsale {
  position: absolute;
  grid-column: 1;
  grid-row: 2;            /* the gallery row; the breadcrumb spans row 1 */
  justify-self: start;
  align-self: start;
  z-index: 4;
  margin: var(--nva-s-3);
  padding: 0.35em 0.75em;
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  letter-spacing: var(--nva-ls-label);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;   /* never blocks the gallery zoom or lightbox */
}

@media (max-width: 1023px) {
  /* Single column: the gallery is still the second row, below the breadcrumb. */
  .nva-woo .product > .onsale { margin: var(--nva-s-2); }
}