/* ============================================================
   Nordhauser — Product page v2 styles
   Flowing editorial layout, no tabs
   ============================================================ */

/* Reviews section (Customer Reviews for WC + WC native fallback) ----------
   Hide the plugin's own H2 — we render the design eyebrow + h2 in the
   wrapping section. The plugin's #reviews wrapper stays so anchor links
   from the meta-row "Kirjuta arvustus" still work. */
.nh-reviews-section .woocommerce-Reviews-title { display: none; }
.nh-reviews-section #reviews { margin-top: 28px; }
.nh-reviews-section .woocommerce-noreviews {
  font-size: 16px;
  color: var(--ink-500);
  padding: 28px 0;
  margin: 0;
}
.nh-reviews-section #review_form_wrapper { margin-top: 28px; }
.nh-reviews-section #review_form_wrapper .comment-reply-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 16px;
}

/* WC's core CSS puts the `.woocommerce-product-gallery.images` container in
   a narrow floated column (legacy classic-theme layout). With our editorial
   layout the gallery owns the whole left column; force it block-level
   full-width and clear so .short2 / .variants2 / .sample2 siblings stack
   below instead of wrapping around. !important is needed to beat WC's
   higher-specificity rule (`.woocommerce div.product div.images...`). */
.gal2 {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}
.gal2-shell { display: block; width: 100%; }
.info2 { display: block; clear: both; }

/* Gallery wrapper — top.php uses .gal2-shell around WC's whole gallery
   (main image + thumbnail strip). Flexslider builds:
     .woocommerce-product-gallery
       .flex-viewport     ← main image carousel
         .woocommerce-product-gallery__wrapper
           .woocommerce-product-gallery__image[s]
       .flex-control-thumbs   ← clickable thumbnail strip below

   The aspect-ratio + overflow:hidden + rounded corners belong on .flex-viewport
   only; if they're on .gal2-shell the thumbnail strip below gets clipped. */
.gal2 .gal2-shell {
  position: relative;
  margin-bottom: 14px;
}
.gal2 .gal2-shell .flag-row {
  position: absolute;
  top: 20px; left: 20px;
  display: flex; gap: 8px;
  z-index: 3;
}
.gal2 .gal2-shell .flag-row .flag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  background: white;
  border-radius: 4px;
  font-weight: 500;
}
.gal2 .gal2-shell .flag-row .flag.terra { background: var(--terra-500); color: white; }
.gal2 .gal2-shell .flag-row .flag.green { background: var(--green-800); color: white; }

/* WC sets `style="opacity: 0"` inline and lets flexslider fade in on init.
   Force visibility so the gallery is never blank (and so it works without JS). */
.gal2 .gal2-shell .woocommerce-product-gallery {
  opacity: 1 !important;
  width: 100%;
  position: relative;
}

/* Gallery container itself: only positioning + width — NO overflow:hidden, NO
   aspect-ratio. If it had overflow:hidden the .flex-control-thumbs sibling
   strip below would be clipped (it lives inside .woocommerce-product-gallery
   at the same level as the slides wrapper). */
.gal2 .gal2-shell .woocommerce-product-gallery {
  position: relative;
  width: 100%;
}
/* The slides container — this is what becomes the visible square card. With
   `animation: fade` flexslider keeps slides as direct children of
   __wrapper (no .flex-viewport in fade mode); aspect-ratio + overflow:hidden
   here clip the slides to a square without touching the thumb strip. */
.gal2 .gal2-shell .flex-viewport,
.gal2 .gal2-shell .woocommerce-product-gallery__wrapper {
  aspect-ratio: 1 / 1;
  height: auto !important;
  width: 100%;
  border-radius: var(--radius-lg);
  background: var(--bone-200);
  overflow: hidden;
  position: relative;
}
.gal2 .gal2-shell .woocommerce-product-gallery__image {
  height: 100% !important;
  display: block;
}
.gal2 .gal2-shell .woocommerce-product-gallery__image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.gal2 .gal2-shell .woocommerce-product-gallery__image > a > img {
  width: 100% !important;
  height: 100% !important;
  /* cover so the photo actually fills the square box (the WP-resized 600x600
     thumbnail otherwise leaves blank bone-200 padding around it). */
  object-fit: cover !important;
  object-position: center;
}

/* No-op: WC's woocommerce.css used to apply `float: left; width: 25%` to each
   `.__image` for the legacy thumb-grid layout, so we needed `float: none`
   counter-rules. We dequeued woocommerce.css in inc/woocommerce.php, so the
   floats no longer come in — and crucially, flexslider's `animation: fade`
   mode SETS `float: left` on every slide via inline style and depends on it
   (combined with `margin-right: -100%`) for slides to overlap so the opacity
   crossfade works. Touching `float` here would break the slide transition. */

/* Zoom trigger button (top-right of main slide). */
.gal2 .woocommerce-product-gallery__trigger {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  color: var(--ink-900);
  text-indent: -9999px;
  z-index: 2;
}
.gal2 .woocommerce-product-gallery__trigger::after {
  content: "+";
  text-indent: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

/* Thumbnail strip — flexslider renders an <ol class="flex-control-nav flex-control-thumbs">
   with one <li><img/></li> per slide. WC's woocommerce.css (which is enqueued)
   floats each <li> at 25% width and styles the img with opacity:.5 — both have
   higher specificity than ours, so we need !important to override. */
.gal2 .flex-control-thumbs,
.gal2 ol.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  list-style: none;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  overflow: visible !important;
}
.gal2 .flex-control-thumbs li {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  list-style: none;
}
.gal2 .flex-control-thumbs img {
  /* !important needed to beat both WC's `.flex-control-thumbs li img` rules and
     the HTML `width="100" height="100"` attributes flexslider sets via onload. */
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  cursor: pointer !important;
  border-radius: var(--radius-md) !important;
  border: 2px solid transparent !important;
  background: var(--bone-200) !important;
  opacity: 0.7 !important;
  display: block !important;
  margin: 0 !important;
  transition: border-color 0.15s, opacity 0.15s;
}
.gal2 .flex-control-thumbs img:hover { opacity: 1 !important; border-color: var(--ink-300) !important; }
.gal2 .flex-control-thumbs img.flex-active { opacity: 1 !important; border-color: var(--green-800) !important; }

/* "+N more" tile — 5th slot in the thumb row when there are 6+ gallery images.
   Renders the 5th thumbnail underneath, with a blurred frosted-glass overlay
   and the remaining count centered in dark ink. JS adds .thumb-more + sets
   data-extra="+N". Click delegates to flexslider's normal thumb click. */
.gal2 .flex-control-thumbs li.thumb-more {
  position: relative;
  cursor: pointer;
}
.gal2 .flex-control-thumbs li.thumb-more::after {
  content: attr(data-extra);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink-900);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  z-index: 2;
  pointer-events: none;
  letter-spacing: -0.02em;
}
.gal2 .flex-control-thumbs li.thumb-more:hover::after {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--green-800);
}

/* Prev/next direction-nav arrows over the main slide. flexslider builds
   `<ul class="flex-direction-nav"><li class="flex-nav-prev"><a class="flex-prev"></a></li>
   <li class="flex-nav-next"><a class="flex-next"></a></li></ul>` as a sibling of
   .woocommerce-product-gallery__wrapper. Restyle as circular chevron buttons
   revealed on hover; chevron drawn with rotated border tricks (no SVG/font deps). */
.gal2 .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.gal2 .flex-direction-nav li {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
.gal2 .flex-direction-nav .flex-nav-prev { left: 14px; }
.gal2 .flex-direction-nav .flex-nav-next { right: 14px; }
.gal2 .flex-direction-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-900);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  text-indent: -9999em;
  white-space: nowrap;
  position: relative;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s;
}
.gal2 .gal2-shell:hover .flex-direction-nav a,
.gal2 .gal2-shell:focus-within .flex-direction-nav a { opacity: 1; }
.gal2 .flex-direction-nav a:hover { background: white; }
.gal2 .flex-direction-nav a.flex-disabled { opacity: 0 !important; pointer-events: none; cursor: default; }
/* Chevrons via rotated border-trick on a small ::before square */
.gal2 .flex-direction-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  text-indent: 0;
}
.gal2 .flex-direction-nav .flex-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.gal2 .flex-direction-nav .flex-next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* "+N" tile is clickable — opens the photoswipe lightbox starting at slide 5.
   Cursor matches; pointer-events stay on the OL li so the click hits. */
.gal2 .flex-control-thumbs li.thumb-more { cursor: zoom-in; }

/* ---------- Top hero / buy section v2 ---------- */
.pdp2 {
  background: var(--bone-100);
  padding: 28px 0 72px;
}
.pdp2-grid {
  display: grid;
  /* Match the design v2 reference: 420px right-side buybox / 48px gap. */
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: stretch;
}
.pdp2-grid > div { min-width: 0; }

/* Gallery v2 — main + 2x2 grid below */
.gal2 {
  position: relative;
}
.gal2 .main2 {
  aspect-ratio: 1.15;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--bone-200);
  margin-bottom: 10px;
}
.gal2 .main2 .zoom {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  color: var(--ink-900);
}
.gal2 .main2 .flag-row {
  position: absolute;
  top: 20px; left: 20px;
  display: flex; gap: 8px;
  z-index: 2;
}
.gal2 .main2 .flag-row .flag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  background: white;
  border-radius: 4px;
  font-weight: 500;
}
.gal2 .main2 .flag-row .flag.terra { background: var(--terra-500); color: white; }
.gal2 .main2 .flag-row .flag.green { background: var(--green-800); color: white; }
.gal2 .main2 .pager {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(28, 30, 29, 0.75);
  backdrop-filter: blur(8px);
  color: white;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  align-items: center;
}
.gal2 .thumbs-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.gal2 .tb {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  border: 2px solid transparent;
  background: var(--bone-200);
  cursor: pointer;
  transition: border-color 0.15s;
}
.gal2 .tb.active { border-color: var(--green-800); }
.gal2 .tb:hover:not(.active) { border-color: var(--ink-300); }
.gal2 .tb.more {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-50);
  color: var(--green-800);
  font-weight: 600;
  font-size: 13px;
}
.gal2 .tb .ph { border-radius: 0; }
.gal2 .tb .ph-label { font-size: 7.5px; }

/* ---------- Product info v2 ---------- */
.info2 .eyebrow-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  color: var(--ink-500);
}
.info2 .eyebrow-row .cat {
  color: var(--terra-600);
  background: var(--terra-50);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.info2 .eyebrow-row .brand-t {
  color: var(--ink-900);
  font-weight: 600;
}
/* Brand link — wraps the logo (or text fallback) and points at the brand
   archive. Visually invisible by default so the eyebrow row reads identically
   to the pre-link version; hover signals interactivity. */
.info2 .eyebrow-row .brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.info2 .eyebrow-row .brand-link:hover { opacity: 0.7; }
.info2 .eyebrow-row .brand-link:hover .brand-t { color: var(--green-800); }
.info2 .eyebrow-row .brand-logo {
  /* Align visually with the cat-pill text (font-size: 11.5px). 16px keeps the
     logo readable while sitting on the same baseline as the eyebrow text. */
  height: 16px;
  width: auto;
  max-width: 110px;
  display: inline-block;
  vertical-align: middle;
}
.info2 .eyebrow-row .dot { color: var(--ink-300); }

/* Rating stars — overlapping bg/fg lets us render any partial fill (0–5) */
.info2 .meta-row .rating .stars {
  position: relative;
  display: inline-block;
  letter-spacing: 0.05em;
  font-size: 14px;
  line-height: 1;
}
.info2 .meta-row .rating .stars-bg { color: var(--bone-300); }
.info2 .meta-row .rating .stars-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--terra-500);
}

.info2 h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.024em;
  margin: 0 0 18px;
  color: var(--ink-900);
  text-wrap: balance;
}
.info2 .meta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--bone-300);
  flex-wrap: wrap;
}
/* No underline on hover — the link stays a quiet color shift. The divider line
   above is on the .meta-row container itself, so hovering the link doesn't
   change the line. */
.info2 .meta-row a { text-decoration: none; }
.info2 .meta-row a:hover { color: var(--green-900); }
.info2 .meta-row > * { white-space: nowrap; }
.info2 .meta-row .rating {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-900);
  font-weight: 600;
  white-space: nowrap;
}
.info2 .meta-row .rating .stars { color: var(--terra-500); letter-spacing: 0.05em; }
.info2 .meta-row .sku-t {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 3px 8px;
  background: var(--bone-200);
  border-radius: 4px;
  color: var(--ink-700);
}

.info2 .short2 {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0 0 22px;
  text-wrap: pretty;
}

/* Key facts grid — replaces bullet list, more visual */
.keyfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.keyfact {
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
}
.keyfact .label-kf {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.keyfact .val-kf {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  line-height: 1.2;
}
.keyfact .val-kf .sub-kf { display: block; font-size: 11px; font-weight: 500; color: var(--ink-500); margin-top: 2px; letter-spacing: 0; text-transform: none; }

/* ---------- Variants v2 (compact swatches) ---------- */
.variants2 {
  margin-bottom: 26px;
}
.variants2 .label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.variants2 .label {
  font-size: 12px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}
.variants2 .label strong { color: var(--ink-900); }
.variants2 .current-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.variants2 .grid {
  display: grid;
  /* Auto-fill so any number of variants flows nicely. Bumped min to 56px
     because swatches now show the variant product's main image — needs more
     pixels than a flat color tile. */
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 10px;
}
.variants2 .sw {
  aspect-ratio: 1;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  border: 2px solid transparent;
  outline: 1px solid rgba(0,0,0,0.08);
  outline-offset: -1px;
  transition: transform 0.12s ease;
}
.variants2 .sw:hover { transform: translateY(-2px); }
.variants2 .sw.active {
  border-color: var(--green-800);
  outline-color: var(--green-800);
  outline-offset: 2px;
}
.variants2 .sw .tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: var(--bone-100);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 5;
  font-weight: 500;
}
.variants2 .sw .tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink-900);
}
.variants2 .sw:hover .tip { opacity: 1; }

/* ---------- Sample banner v2 ---------- */
.sample2 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: linear-gradient(105deg, var(--terra-50) 0%, var(--bone-100) 100%);
  border: 1px dashed var(--terra-500);
  border-radius: var(--radius-md);
  margin-bottom: 26px;
}
.sample2 .ic {
  width: 44px; height: 44px;
  background: var(--terra-500);
  color: white;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.sample2 strong {
  display: block;
  font-size: 14px;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.sample2 span {
  font-size: 12px;
  color: var(--ink-500);
}
.sample2 button {
  background: white;
  border: 1px solid var(--terra-500);
  color: var(--terra-600);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sample2 button:hover { background: var(--terra-100); }

/* ---------- Buy box v2 (tighter) ----------
   The buy column is sticky from the top of .pdp2 down to wherever the left
   column ends (just before the next section). For position:sticky to actually
   stick, the grid cell that holds .bb2-wrap must be TALLER than .bb2-wrap —
   we get that for free from CSS Grid's default `align-items: stretch`, but
   only when the cell has nothing forcing it to its content height. We make
   the cell its own flex column so .bb2-wrap stays at the top while the cell
   stretches to the row's full height. */
.bb2-col {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.bb2-wrap {
  position: sticky;
  /* .header is sticky at top:0, 76 px row + 1 px border = 77 px tall. Offset
     past it with 15 px breathing room so the buy box doesn't slide underneath
     when the page scrolls. */
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bb2 {
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.bb2 .price-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bone-200);
  margin-bottom: 18px;
}
.bb2 .price-top .pcol { display: flex; flex-direction: column; }
.bb2 .price-top .was-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 2px;
}
.bb2 .price-top .was {
  font-size: 14px;
  color: var(--ink-400);
  text-decoration: line-through;
}
.bb2 .price-top .pct {
  background: var(--terra-500);
  color: white;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}
.bb2 .price-top .price,
.bb2 .price-top .price .woocommerce-Price-amount,
.bb2 .price-top .price .woocommerce-Price-currencySymbol,
.bb2 .price-top .price bdi {
  font-family: var(--font-sans) !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--ink-900) !important;
  white-space: nowrap;
  text-decoration: none;
}
.bb2 .price-top .price .woocommerce-Price-currencySymbol {
  font-size: 32px !important;
  margin-left: 4px;
}
.bb2 .price-top .price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.bb2 .price-top .unit {
  font-size: 15px;
  color: var(--ink-500);
  font-weight: 500;
  white-space: nowrap;
}
.bb2 .price-top .sub-price {
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 10px;
  white-space: nowrap;
}
.bb2 .price-top .vat {
  font-size: 11.5px;
  color: var(--ink-400);
  margin-top: 3px;
  white-space: nowrap;
}

.bb2 .stock-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--green-50) 0%, var(--bone-100) 100%);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  border: 1px solid rgba(42, 97, 79, 0.18);
}
.bb2 .stock-card .stock-num {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.bb2 .stock-card .pulse-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green-700);
  box-shadow: 0 0 0 4px rgba(42, 97, 79, 0.18);
  animation: stockpulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes stockpulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(42, 97, 79, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(42, 97, 79, 0.06); }
}
.bb2 .stock-card .big {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--green-900);
  line-height: 1;
  white-space: nowrap;
}
.bb2 .stock-card .big .u {
  font-size: 13px;
  font-weight: 600;
  color: var(--green-800);
  margin-left: 4px;
  letter-spacing: 0;
}
.bb2 .stock-card .lab {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin-top: 4px;
  line-height: 1.3;
}
.bb2 .stock-card .stock-eta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 1px solid rgba(42, 97, 79, 0.18);
}
.bb2 .stock-card .eta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-700);
  white-space: nowrap;
}
.bb2 .stock-card .eta-row svg { color: var(--green-700); flex-shrink: 0; }
.bb2 .stock-card .eta-row span { color: var(--ink-500); }
.bb2 .stock-card .eta-row strong { color: var(--ink-900); font-weight: 700; margin-left: auto; }

.bb2 .qty-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.bb2 .qty {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  height: 56px;
  border: 1px solid var(--bone-400);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bb2 .qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bone-100);
  color: var(--ink-700);
}
.bb2 .qty button:hover { background: var(--bone-200); }
.bb2 .qty input {
  width: 100%;
  text-align: center;
  border: 0;
  background: white;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  outline: none;
}
.bb2 .add-primary,
.bb2 form.cart button.single_add_to_cart_button,
.bb2 .sample-form button.single_add_to_cart_button {
  background: var(--terra-500);
  color: white;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.bb2 .add-primary:hover,
.bb2 form.cart button.single_add_to_cart_button:hover,
.bb2 .sample-form button.single_add_to_cart_button:hover {
  background: var(--terra-600);
  transform: translateY(-1px);
}

/* WC's add-to-cart form layout — pin qty + button into a single horizontal row.
   Flex (not grid) avoids stray hidden inputs (variation_id etc.) creating extra
   tracks; explicit !important beats wc-blocks.css form-styling specificity. */
/* Cart row — matches design v2's .qty-row exactly: CSS Grid with 120px qty +
   1fr button; the form spans the full inner width of .bb2 so it aligns with
   the .stock-card row above. Switched away from flex because hidden inputs
   inside the form (gtmkit_product_data, variation_id) become extra flex items
   and push the button narrower; with grid + display:none on hidden inputs,
   only .quantity and the .single_add_to_cart_button button occupy cells. */
.bb2 form.cart {
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  grid-auto-rows: minmax(56px, auto);
  gap: 10px !important;
  margin: 0 0 10px !important;
  width: 100% !important;
  box-sizing: border-box;
  align-items: stretch;
}
.bb2 form.cart > input[type="hidden"],
.bb2 form.cart > input[name="add-to-cart"] {
  display: none !important;
}
.bb2 form.cart > .quantity,
.bb2 form.cart > .nh-qty {
  width: 100% !important;
  min-width: 0;
  /* WC's `.woocommerce div.product form.cart div.quantity { float: left }` (specificity 0,3,3)
     would otherwise pull qty out of the grid track and stack the button below it. */
  float: none !important;
  margin: 0 !important;
}
.bb2 form.cart > button.single_add_to_cart_button {
  width: 100% !important;
  min-width: 0;
  height: 56px;
  /* Same reason — WC's `.woocommerce div.product form.cart .button { float: left }`
     pulls the button out of the grid + makes it shrink to content width. */
  float: none !important;
  vertical-align: top !important;
}
/* Internal stepper: 36px buttons + 1fr input — matches design exactly */
.bb2 form.cart .quantity,
.bb2 form.cart .nh-qty { grid-template-columns: 36px 1fr 36px !important; }
/* Hide any "Saadaval järeltellimisel" / backorder / WC stock notice that
   leaks into the buy box — we render our own stock-card. */
.bb2 .stock,
.bb2 p.stock,
.bb2 .available-on-backorder,
.bb2 .backorder_notification,
.nh-single-main p.stock.available-on-backorder,
.nh-single-main .stock.available-on-backorder { display: none !important; }
.bb2 form.cart .quantity,
.bb2 form.cart .nh-qty {
  display: grid !important;
  grid-template-columns: 40px 1fr 40px;
  height: 56px;
  border: 1px solid var(--bone-400);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0;
  background: white;
}
.bb2 form.cart .nh-qty__btn {
  background: var(--bone-100);
  color: var(--ink-700);
  border: 0;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.12s;
}
.bb2 form.cart .nh-qty__btn:hover { background: var(--bone-200); color: var(--ink-900); }
.bb2 form.cart .nh-qty__btn:active { background: var(--bone-300); }
.bb2 form.cart .quantity input.qty,
.bb2 form.cart .quantity input[type="number"],
.bb2 form.cart .nh-qty__input {
  width: 100%;
  height: 100%;
  text-align: center;
  border: 0;
  background: white;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  outline: none;
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bb2 form.cart .quantity input::-webkit-outer-spin-button,
.bb2 form.cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bb2 form.cart button.single_add_to_cart_button {
  width: 100%;
  padding: 0 18px;
  white-space: nowrap;
  /* Brand-green CTA matching the heading green buttons (.mega-panel__cta,
     .item.all, search submit, newsletter .sub-btn): green-800 base → green-900
     hover. Overrides the terra default set on the combined .bb2 button rule
     above. */
  background: var(--green-800);
}
.bb2 form.cart button.single_add_to_cart_button:hover {
  background: var(--green-900);
}

/* Sample CTA — its inline form sits inside a 3-col grid (.sample2),
   so the button can stay short and pill-shaped. */
/* Sample CTA — terra-tinted card with WHITE pill button (matches design v2).
   The form is a regular grid cell (3rd column); display:contents would let
   the hidden <input> bleed into the parent grid and break alignment. */
.sample2 form.sample-form {
  margin: 0;
  display: block;
}
.sample2 form.sample-form button.single_add_to_cart_button {
  background: white !important;
  border: 1px solid var(--terra-500) !important;
  color: var(--terra-600) !important;
  padding: 10px 16px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  height: auto !important;
  line-height: 1.2;
  white-space: nowrap;
  /* Horizontally + vertically center the icon + text inside the button */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sample2 form.sample-form button.single_add_to_cart_button:hover {
  background: var(--terra-100) !important;
  color: var(--terra-600) !important;
}

.bb2 .offer-btn {
  margin-top: 12px;
  width: 100%;
  height: 46px;
  border: 1px solid var(--bone-400);
  border-radius: var(--radius-md);
  background: white;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bb2 .offer-btn:hover { background: var(--bone-100); border-color: var(--ink-400); }

.bb2 .delivery2 {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bone-200);
  display: grid;
  gap: 12px;
}
.bb2 .delivery2 .drow {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--ink-700);
  line-height: 1.4;
}
.bb2 .delivery2 .drow .ic {
  color: var(--green-700);
  margin-top: 1px;
}
.bb2 .delivery2 .drow strong { color: var(--ink-900); display: block; font-size: 13px; }
.bb2 .delivery2 .drow .sub { color: var(--ink-500); font-size: 11.5px; }
.bb2 .delivery2 .drow .sub a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bone-400);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.bb2 .delivery2 .drow .sub a:hover {
  color: var(--green-800);
  text-decoration-color: var(--green-700);
}

/* ---------- Calculator banner v2 — more dramatic ---------- */
.calc2 {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--green-900);
  color: var(--bone-100);
  padding: 24px;
  cursor: pointer;
  display: block;
  transition: transform 0.2s ease;
}
.calc2:hover { transform: translateY(-2px); }
.calc2::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 95% 15%, rgba(207, 106, 61, 0.55), transparent 45%),
    radial-gradient(circle at 5% 95%, rgba(42, 97, 79, 0.55), transparent 45%);
  pointer-events: none;
}
.calc2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  mask-image: linear-gradient(135deg, rgba(0,0,0,1), rgba(0,0,0,0));
}
.calc2 .content { position: relative; z-index: 1; }
.calc2 .eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-400);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.calc2 .eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra-400);
  box-shadow: 0 0 0 3px rgba(230, 138, 94, 0.3);
  animation: pulsefx 2s ease-in-out infinite;
}
@keyframes pulsefx {
  0%, 100% { box-shadow: 0 0 0 3px rgba(230, 138, 94, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(230, 138, 94, 0.12); }
}
.calc2 h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.12;
}
.calc2 p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(250, 247, 242, 0.78);
}
.calc2 .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--terra-500);
  color: white;
  padding: 11px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.calc2 .cta:hover { background: var(--terra-600); }

/* ---------- Section: Bundle (v2 styling + reuse) ---------- */
.pdp-section {
  padding: 72px 0;
  border-top: 1px solid var(--bone-300);
}
.pdp-section.bone {
  background: var(--bone-100);
}
.pdp-section.bone-2 {
  background: var(--bone-200);
}
.pdp-section.dark {
  background: var(--green-900);
  color: var(--bone-100);
  border-top: 0;
}
.pdp-section.dark .pdp-eyebrow { color: var(--terra-400); }
.pdp-section.dark h2 { color: white; }
.pdp-section.dark .lede-h { color: rgba(250, 247, 242, 0.72); }

.pdp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 36px;
}
.pdp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra-600);
  margin-bottom: 10px;
  display: block;
}
.pdp-head h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.pdp-head .lede-h {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 50ch;
  text-wrap: pretty;
  margin: 0;
  /* Flush to the right edge of the section. Text stays left-readable
     so the eye doesn't have to cross the full width every line. */
  justify-self: end;
}

/* ---------- Description section — magazine layout ---------- */
.desc2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.desc2-body {
  max-width: 62ch;
}
.desc2-body p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-700);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.desc2-body p:first-of-type::first-letter {
  font-size: 58px;
  font-weight: 800;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--green-800);
  font-family: var(--font-sans);
}
.desc2-quote {
  margin: 32px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--terra-500);
  background: var(--bone-200);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.desc2-quote p {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 8px;
  letter-spacing: -0.012em;
}
.desc2-quote cite {
  font-style: normal;
  font-size: 12.5px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.desc2-image {
  position: sticky;
  top: 24px;
  aspect-ratio: 0.82;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone-200);
}
.desc2-image .cap-over {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--ink-700);
  line-height: 1.4;
}
.desc2-image .cap-over strong { color: var(--ink-900); display: block; margin-bottom: 2px; }

/* ---------- Specs section v2 — horizontal data table ---------- */
.spec2-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: white;
}
.spec2-col {
  padding: 24px;
  border-right: 1px solid var(--bone-300);
}
.spec2-col:last-child { border-right: 0; }
.spec2-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terra-600);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--terra-500);
  font-weight: 600;
}
.spec2-col dl { margin: 0; display: grid; gap: 10px; }
.spec2-col .srow {
  display: grid;
  gap: 2px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--bone-300);
}
.spec2-col .srow:last-child { border-bottom: 0; }
.spec2-col dt {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.spec2-col dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink-900);
  font-size: 14px;
  letter-spacing: -0.008em;
}

/* ---------- FAQ v2 (on dark) ---------- */
.faq2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.faq2-item {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.faq2-item[open] { background: rgba(255,255,255,0.08); border-color: rgba(230, 138, 94, 0.35); }
.faq2-item summary {
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  font-weight: 600;
  list-style: none;
  color: white;
  letter-spacing: -0.005em;
}
.faq2-item summary::-webkit-details-marker { display: none; }
.faq2-item summary .ic {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--terra-400);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, background 0.2s;
}
.faq2-item[open] summary .ic {
  transform: rotate(45deg);
  background: var(--terra-500);
  color: white;
}
.faq2-item .body {
  padding: 0 24px 22px 24px;
  font-size: 14.5px;
  color: rgba(250, 247, 242, 0.72);
  line-height: 1.65;
  max-width: 72ch;
  text-wrap: pretty;
}

.faq-contact {
  margin-top: 32px;
  padding: 26px 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.faq-contact .txt-c h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: white;
}
.faq-contact .txt-c p { margin: 0; color: rgba(250, 247, 242, 0.72); font-size: 13.5px; }
.faq-contact .cta-row {
  display: flex;
  gap: 12px;
}
.faq-contact .btn-c {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--terra-500);
  color: white;
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.faq-contact .btn-c.outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: white;
}
.faq-contact .btn-c:hover { opacity: 0.9; }

/* ---------- Bundle v2 uses existing bundle styles, but tweak ---------- */
.pdp-section .bundle { padding: 0; border: 0; background: transparent; }

/* ---------- Bundle Checklist v2 (scalable, with variants + sale) ---------- */
.bndl {
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bndl-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--bone-100) 0%, white 100%);
  border-bottom: 1px solid var(--bone-300);
}
.bndl-head h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.bndl-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-500);
}
.bndl-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-800);
  background: var(--green-50);
  padding: 4px 8px;
  border-radius: 4px;
}
.bndl-head-r {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  min-width: 280px;
}
.bndl-total { text-align: right; }
.bndl-was {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: flex-end;
  font-size: 12px;
  margin-bottom: 2px;
}
.bndl-was s { color: var(--ink-500); }
.bndl-save {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  background: var(--terra-600);
  padding: 3px 6px;
  border-radius: 3px;
}
.bndl-now {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.bndl-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.bndl-now strong {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--green-900);
  line-height: 1;
  white-space: nowrap;
}
.bndl-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--green-800);
  color: white;
  border: 0;
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.bndl-add:hover:not(:disabled) { background: var(--green-900); }
.bndl-add:disabled { opacity: 0.4; cursor: not-allowed; }

/* Filter chips */
.bndl-filters {
  display: flex;
  gap: 8px;
  padding: 14px 24px;
  background: var(--bone-100);
  border-bottom: 1px solid var(--bone-300);
  flex-wrap: wrap;
}
.bndl-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.bndl-chip:hover { border-color: var(--green-700); }
.bndl-chip.on {
  background: var(--green-800);
  border-color: var(--green-800);
  color: white;
}
.bndl-chip.hot:not(.on) { color: var(--terra-600); border-color: var(--terra-300, #d9b9a4); }
.bndl-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terra-600);
  animation: bndlpulse 1.6s ease-in-out infinite;
}
@keyframes bndlpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Groups */
.bndl-groups { padding: 6px 0; }
.bndl-group + .bndl-group { border-top: 1px solid var(--bone-200); }
.bndl-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 24px;
}
.bndl-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 14px 0;
  flex: 1;
  text-align: left;
}
.bndl-group-toggle .chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-700);
  border-bottom: 2px solid var(--ink-700);
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.bndl-group-toggle .chev.open { transform: rotate(45deg); }
.bndl-group-toggle .gname {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.bndl-group-toggle .gmeta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
}
.bndl-group-all {
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-800);
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.bndl-group-all:hover { color: var(--green-900); }

.bndl-rows {
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px;
}
.bndl-row {
  display: grid;
  grid-template-columns: 28px 80px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all 0.15s;
  margin: 2px 0;
}
.bndl-row.on {
  background: var(--green-50);
  border-color: rgba(42, 97, 79, 0.25);
}
.bndl-row:not(.on):hover { background: var(--bone-100); }

/* Custom checkbox */
.bndl-check {
  position: relative;
  width: 22px; height: 22px;
  cursor: pointer;
}
.bndl-check input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bndl-check .box {
  position: absolute; inset: 0;
  background: white;
  border: 1.5px solid var(--bone-400);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.15s;
}
.bndl-check .box svg { opacity: 0; transform: scale(0.6); transition: all 0.15s; }
.bndl-check input:checked ~ .box {
  background: var(--green-800);
  border-color: var(--green-800);
}
.bndl-check input:checked ~ .box svg { opacity: 1; transform: scale(1); }

/* Thumb */
.bndl-thumb {
  width: 80px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bone-200);
  position: relative;
  overflow: hidden;
}
.bndl-rec, .bndl-sale {
  position: absolute;
  top: 5px; left: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  padding: 3px 5px;
  border-radius: 3px;
  z-index: 2;
}
.bndl-rec { background: var(--green-800); }
.bndl-sale { background: var(--terra-600); top: auto; bottom: 5px; left: 5px; }

/* Info */
.bndl-info { min-width: 0; }
.bndl-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
  text-wrap: pretty;
}
.bndl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-500);
}
.bndl-meta .sku-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.bndl-meta .dot-sep { opacity: 0.5; }
.bndl-meta .vlabel strong { color: var(--ink-700); font-weight: 600; }
.bndl-instock,
.bndl-eta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.bndl-instock { color: var(--green-800); }
.bndl-eta { color: var(--terra-600); }
.bndl-stock-dot,
.bndl-eta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.bndl-stock-dot { background: var(--green-700); }
.bndl-eta-dot { background: var(--terra-600); }
.bndl-swatches {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.bndl-swatches .sw {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--bone-300);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  position: relative;
}
.bndl-swatches .sw:hover { transform: scale(1.1); }
.bndl-swatches .sw.on {
  border-color: var(--green-800);
  box-shadow: 0 0 0 2px var(--green-50);
}

/* Qty */
.bndl-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--bone-400);
  border-radius: 6px;
  background: white;
  overflow: hidden;
}
.bndl-qty button {
  width: 28px; height: 30px;
  background: transparent;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-700);
  transition: background 0.1s;
}
.bndl-qty button:hover { background: var(--bone-100); }
.bndl-qty input {
  width: 36px; height: 30px;
  border: 0;
  border-left: 1px solid var(--bone-300);
  border-right: 1px solid var(--bone-300);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
  background: white;
}

/* Price */
.bndl-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 90px;
  white-space: nowrap;
}
.bndl-price s {
  font-size: 11px;
  color: var(--ink-500);
  margin-bottom: 1px;
}
.bndl-price strong {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  line-height: 1;
}
.bndl-price .u {
  font-size: 10.5px;
  color: var(--ink-500);
  margin-top: 3px;
  font-family: var(--font-mono);
}

/* ---------- Related products v2 ---------- */
/* Horizontal scroller showing 6 cards at a time. JS arrows step by 3 cards. */
.related2 {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* hide scrollbar — primary nav is via arrow buttons */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px; /* leave a hair so card hover :translateY(-3px) doesn't get clipped */
}
.related2::-webkit-scrollbar { display: none; }
.related2-card {
  flex: 0 0 calc((100% - 14px * 5) / 6); /* 6 visible, 5 gaps × 14px */
  scroll-snap-align: start;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--bone-300);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.related2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related2-card .thumb {
  aspect-ratio: 1;
  background: var(--bone-200);
  position: relative;
  overflow: hidden;
}
.related2-card .thumb .badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--terra-500);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 3px;
  font-weight: 600;
}
.related2-card .body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.related2-card .sku-s {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.related2-card h5 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  min-height: 34px;
  text-wrap: pretty;
}
.related2-card .p-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
}
.related2-card .p { font-size: 16px; font-weight: 800; letter-spacing: -0.012em; }
.related2-card .p .u { font-size: 11px; font-weight: 500; color: var(--ink-500); }
.related2-card .was {
  font-size: 11px;
  color: var(--ink-400);
  text-decoration: line-through;
  display: block;
}
.related2-card .add-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-800);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Guides v2 — editorial row ---------- */
.guides2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.guide2-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s;
}
.guide2-card:hover { transform: translateY(-3px); }
.guide2-card .thumb {
  aspect-ratio: 1.5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bone-200);
  position: relative;
}
.guide2-card .meta-r {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  align-items: center;
}
.guide2-card .meta-r .cat-t { color: var(--terra-600); font-weight: 600; }
.guide2-card h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
  text-wrap: pretty;
}

/* ---------- Breadcrumbs (reuse) ---------- */

/* ---------- Combined specs + description (compact) ---------- */
.sd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.sd-grid h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 8px 0 20px;
  color: var(--ink-900);
}
.sd-specs .pdp-eyebrow,
.sd-desc .pdp-eyebrow { margin-bottom: 4px; }

/* WooCommerce-style flat table */
.sd-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--bone-300);
  font-size: 13.5px;
}
.sd-table tr.sd-group th {
  background: var(--bone-200);
  color: var(--terra-600);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-align: left;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--bone-300);
  border-top: 1px solid var(--bone-300);
}
.sd-table tr.sd-group:first-child th { border-top: 0; }
.sd-table tr:not(.sd-group) th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-500);
  padding: 10px 18px;
  width: 42%;
  vertical-align: top;
  border-bottom: 1px solid var(--bone-200);
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.sd-table tr:not(.sd-group) td {
  padding: 10px 18px;
  color: var(--ink-900);
  font-weight: 600;
  vertical-align: top;
  border-bottom: 1px solid var(--bone-200);
}
.sd-table tr:not(.sd-group):last-child th,
.sd-table tr:not(.sd-group):last-child td { border-bottom: 0; }
.sd-table tr:not(.sd-group):hover th,
.sd-table tr:not(.sd-group):hover td { background: var(--bone-100); }

/* Description body (compact, no images, no drop-cap) */
.sd-desc { position: sticky; top: 24px; }
.sd-desc p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.sd-desc p:last-child { margin-bottom: 0; }

/* ---------- Reviews v2 ---------- */
.rv-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Stars (shared) */
.rv-stars {
  position: relative;
  display: inline-block;
  font-size: var(--s, 14px);
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}
/* New bg/fg overlay variant — used by the Reviews2 template (any partial fill) */
.rv-stars-bg { color: var(--bone-300); }
.rv-stars-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--terra-500);
}
.rv-star { color: var(--bone-300); }
.rv-star.full { color: var(--terra-600); }
.rv-star.half {
  background: linear-gradient(90deg, var(--terra-600) 50%, var(--bone-300) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Summary */
.rv-summary {
  position: sticky;
  top: 24px;
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.rv-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px 8px;
  border-bottom: 1px solid var(--bone-200);
  padding-bottom: 18px;
  margin-bottom: 18px;
}
.rv-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  line-height: 1;
  grid-row: 1 / 3;
}
.rv-of {
  font-size: 14px;
  color: var(--ink-500);
  font-weight: 500;
}
.rv-count {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.rv-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 22px;
}
.rv-bar {
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  gap: 10px;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 5px 0;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
  transition: background 0.15s;
}
.rv-bar:hover { background: var(--bone-100); }
.rv-bar.on { background: var(--green-50); }
.rv-bar-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
  padding-left: 4px;
}
.rv-bar-track {
  height: 6px;
  background: var(--bone-200);
  border-radius: 3px;
  overflow: hidden;
}
.rv-bar-fill {
  display: block;
  height: 100%;
  background: var(--green-700);
  transition: width 0.4s ease;
}
.rv-bar.on .rv-bar-fill { background: var(--green-900); }
.rv-bar-c {
  font-size: 11px;
  color: var(--ink-500);
  text-align: right;
  font-family: var(--font-mono);
  padding-right: 4px;
}

.rv-breakdown {
  border-top: 1px solid var(--bone-200);
  padding-top: 18px;
  margin-bottom: 22px;
}
.rv-breakdown-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500);
  margin-bottom: 12px;
}
.rv-attr {
  display: grid;
  grid-template-columns: 1fr 80px 28px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
}
.rv-attr-label {
  font-size: 12.5px;
  color: var(--ink-700);
  font-weight: 500;
}
.rv-attr-track {
  height: 4px;
  background: var(--bone-200);
  border-radius: 2px;
  overflow: hidden;
}
.rv-attr-fill {
  display: block;
  height: 100%;
  background: var(--terra-600);
}
.rv-attr-score {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-900);
  text-align: right;
}

.rv-write {
  display: block;
  width: 100%;
  background: var(--ink-900);
  color: white;
  border: 0;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 12px;
}
.rv-write:hover { background: black; }

.rv-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-500);
  text-wrap: pretty;
}
.rv-verified-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-700);
  flex-shrink: 0;
}

/* Toolbar */
.rv-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bone-300);
  flex-wrap: wrap;
}
.rv-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rv-sort label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 600;
}
.rv-sort select {
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23494E4D' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.rv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-700);
  font-weight: 500;
  cursor: pointer;
}
.rv-toggle input {
  width: 14px; height: 14px;
  accent-color: var(--green-800);
}
.rv-clear {
  background: transparent;
  border: 0;
  font-size: 12.5px;
  color: var(--terra-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  margin-left: auto;
}

/* Items */
.rv-item {
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
  padding: 22px;
  margin-bottom: 14px;
}
.rv-item-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.rv-author {
  display: flex;
  gap: 12px;
  align-items: center;
}
.rv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-900);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.rv-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
}
.rv-author-info { min-width: 0; }
.rv-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-800);
  background: var(--green-50);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}
.rv-verified svg { color: var(--green-800); }
.rv-role {
  font-size: 11.5px;
  color: var(--ink-500);
  margin-top: 3px;
  line-height: 1.4;
}
/* Pooled-from-sibling badge — only renders when the review's source product
   isn't the current page (i.e. came in via cross-sell family sharing). */
.rv-origin {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-decoration: none;
  margin-top: 4px;
}
.rv-origin:hover { color: var(--green-700); }
.rv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.rv-meta time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-500);
  letter-spacing: 0.05em;
}

.rv-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 6px 0 8px;
}
.rv-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.rv-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.rv-attr-pill {
  font-size: 11.5px;
  color: var(--ink-500);
  background: var(--bone-100);
  padding: 4px 10px;
  border-radius: 999px;
}
.rv-attr-pill strong { color: var(--ink-900); font-weight: 600; }

.rv-actions {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bone-200);
}
.rv-helpful, .rv-report {
  background: transparent;
  border: 0;
  font-size: 12px;
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: color 0.15s;
}
.rv-helpful:hover { color: var(--green-800); }
.rv-report:hover { color: var(--terra-600); }

.rv-empty {
  background: var(--bone-100);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  color: var(--ink-500);
  font-size: 14px;
}
.rv-empty--none {
  margin: 0 0 28px;
}

/* Summary score line — big numeric + "/ 5" sit on one row */
.rv-score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

/* Helpful button: "voted" state after click */
.rv-helpful.voted { color: var(--green-800); cursor: default; }
.rv-helpful.voted svg { color: var(--green-800); }

/* CR-for-WC plugin's review form — editorial card matching .rv-summary.
   The form is rendered by comment_form() (inside cr-single-product-reviews.php)
   and the plugin injects .cr-upload-local-images for image+video uploads.
   Star picker interactivity (.stars a → .active toggle) is handled by WC core's
   single-product.js — we only style. */

.rv-root #review_form_wrapper {
  margin-top: 32px;
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.rv-root #review_form_wrapper .comment-reply-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 22px;
  display: block;
}
.rv-root #review_form_wrapper .comment-reply-title::before {
  content: "ARVUSTUS";
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 10px;
}

/* Generic vertical rhythm for the rating + comment + author/email rows. */
.rv-root #review_form_wrapper .comment-form > p,
.rv-root #review_form_wrapper .comment-form-rating,
.rv-root #review_form_wrapper .cr-upload-local-images {
  margin: 0 0 22px;
}

/* Field labels — mono uppercase eyebrow. */
.rv-root #review_form_wrapper .comment-form-rating > label,
.rv-root #review_form_wrapper .comment-form-comment > label,
.rv-root #review_form_wrapper .comment-form-author > label,
.rv-root #review_form_wrapper .comment-form-email > label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.rv-root #review_form_wrapper .required { color: var(--terra-600); }

/* Interactive star picker — kill anchor text, render glyph via ::before. */
.rv-root #review_form_wrapper .comment-form-rating .stars {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  line-height: 1;
}
.rv-root #review_form_wrapper .comment-form-rating .stars a {
  display: inline-block;
  width: 28px;
  height: 28px;
  font-size: 0;
  text-decoration: none;
  color: var(--bone-400);
  transition: color 0.12s;
}
.rv-root #review_form_wrapper .comment-form-rating .stars a::before {
  content: "★";
  font-size: 26px;
  line-height: 28px;
}
/* Cumulative fill 1..N. WC core's single-product.js only toggles `.active` on
   the clicked anchor (not on every preceding sibling), so we do the "fill up to
   and including" effect with sibling combinators: fill all when any star in the
   row is active/hovered, then unfill the ones AFTER the active/hovered one. */
.rv-root #review_form_wrapper .comment-form-rating .stars:hover a,
.rv-root #review_form_wrapper .comment-form-rating .stars:has(a.active) a {
  color: var(--terra-500);
}
.rv-root #review_form_wrapper .comment-form-rating .stars a:hover ~ a,
.rv-root #review_form_wrapper .comment-form-rating .stars a.active ~ a {
  color: var(--bone-400);
}

/* Inputs + textarea. */
.rv-root #review_form_wrapper .comment-form input[type="text"],
.rv-root #review_form_wrapper .comment-form input[type="email"],
.rv-root #review_form_wrapper .comment-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-900);
  background: white;
}
.rv-root #review_form_wrapper .comment-form textarea {
  min-height: 140px;
  resize: vertical;
}
.rv-root #review_form_wrapper .comment-form input[type="text"]:focus,
.rv-root #review_form_wrapper .comment-form input[type="email"]:focus,
.rv-root #review_form_wrapper .comment-form textarea:focus {
  outline: 2px solid var(--green-700);
  outline-offset: 0;
  border-color: transparent;
}

/* Upload widget — dashed drop-zone. The native input is hidden but the wrapping
   <label for="cr_review_image"> keeps click-to-pick working. */
.rv-root #review_form_wrapper #review_form .cr-upload-local-images {
  position: relative;
  border: 2px dashed var(--bone-400);
  border-radius: var(--radius-md);
  padding: 22px;
  background: var(--bone-100);
  text-align: center;
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-preview:empty {
  display: none;
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-preview img,
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-preview video {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-sm);
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-status {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-status::before {
  content: "↑ ";
  font-weight: 700;
  color: var(--green-700);
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images .cr-upload-images-status.cr-upload-images-status-error {
  color: var(--terra-600);
}
.rv-root #review_form_wrapper #review_form .cr-upload-local-images #cr_review_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Submit row. */
.rv-root #review_form_wrapper .form-submit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 22px 0 0;
}
.rv-root #review_form_wrapper .form-submit input[type="hidden"] { display: none; }
.rv-root #review_form_wrapper .form-submit input[type="submit"] {
  background: var(--terra-500);
  color: white;
  height: 56px;
  min-width: 220px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.rv-root #review_form_wrapper .form-submit input[type="submit"]:hover {
  background: var(--terra-600);
  transform: translateY(-1px);
}

.rv-more {
  display: block;
  width: 100%;
  background: white;
  border: 1px solid var(--bone-300);
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 8px;
}
.rv-more:hover {
  background: var(--bone-100);
  border-color: var(--green-700);
}

/* ---------- Responsive (Stage 1 — top section reflow) ----------
 * Three-tier breakpoints — see CLAUDE.md gotcha 33:
 *   desktop  ≥ 1024 px  (base, no media query)
 *   tablet   640 – 1023 px
 *   mobile   < 640 px
 *
 * Layered desktop-first overrides. Replaces the legacy `(max-width: 1100px)`
 * and `(max-width: 1200px)` queries that pre-dated the responsive convention
 * (the latter targeted .spec2-table — a v1 selector no longer rendered by
 * specs-desc.php). All grid templates use `repeat(N, minmax(0, 1fr))` per
 * gotcha 27 — bare `1fr` overflows with Estonian text.
 *
 * Sticky buybox (.bb2-wrap) is desktop-only here. .nh-single's
 * `overflow: visible !important` (shop.css:115, gotcha 12) stays in place
 * — it's load-bearing for the desktop sticky and benign at compact widths.
 */

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  /* Top section — single column. Buybox falls below info2-col which
     wraps eyebrow + h1 + meta-row + gallery + short desc + swatches +
     sample. Sample CTA sits above buybox in the natural reading order. */
  .pdp2 { padding: 20px 0 56px; }
  .pdp2-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  /* Sticky buybox releases. There's no parallel content for it to scroll
     past, and a 600+ px column eats too much of a 1024 px viewport. The
     `.nh-single { overflow: visible !important }` rule in shop.css stays
     in place but no longer matters at this breakpoint. */
  .bb2-col { display: block; }
  .bb2-wrap { position: static; gap: 16px; }

  /* Gallery aspect-ratio: square-ish at tablet width so the main image
     doesn't squat, but still leaves room for the thumb strip below. */
  .gal2 .gal2-shell .woocommerce-product-gallery { aspect-ratio: 1.05; }

  /* PDP-head row stacks (lede was beside title at desktop). */
  .pdp-head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
  .pdp-head h2 { font-size: 32px; }
  .pdp-head .lede-h { justify-self: start; max-width: 60ch; font-size: 14.5px; }

  /* Specs ↔ description: stack. Drop the sticky on .sd-desc — there's no
     side-by-side scroll context anymore. */
  .sd-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sd-desc { position: static; }

  /* Section vertical rhythm. */
  .pdp-section { padding: 56px 0; }

  /* Legacy v1 desc grid (only renders if anyone re-enables the v1 desc2
     section) — same reflow. */
  .desc2-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .desc2-image { position: static; aspect-ratio: 1.4; }

  /* H1 typography. */
  .info2 h1 { font-size: 32px; letter-spacing: -0.02em; margin-bottom: 14px; }

  /* Buybox — full width, slightly more breathing internally. */
  .bb2 { padding: 22px; }
  .bb2 .price-top .price,
  .bb2 .price-top .price .woocommerce-Price-amount,
  .bb2 .price-top .price bdi { font-size: 38px !important; }

  /* Reviews aside stacks (was a 1100 px legacy query — replaced here at
     the convention breakpoint). */
  .rv-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rv-summary { position: static; padding: 22px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
  /* Pdp2 — tighter top space (breadcrumb above also tightens via
     .nh-pdp-crumbs below). */
  .pdp2 { padding: 12px 0 40px; }
  .pdp2-grid { gap: 24px; }

  /* H1 — drop to 26 px floor. Estonian product names ("Cedral kiudtsement-
     voodrilaud Click C50 Extreme White") are wide; line-height 1.06 keeps
     2-line H1s tight. */
  .info2 h1 { font-size: 26px; line-height: 1.06; margin-bottom: 12px; }

  /* Eyebrow row may collapse logo + brand-pill + cat-pill onto two lines. */
  .info2 .eyebrow-row { flex-wrap: wrap; gap: 8px; row-gap: 6px; margin-bottom: 14px; }
  .info2 .eyebrow-row .brand-logo { height: 14px; max-width: 96px; }

  /* Meta row already wraps; tighten gap. */
  .info2 .meta-row { gap: 10px; margin-bottom: 18px; padding-bottom: 18px; }
  .info2 .meta-row a { padding: 4px 2px; }  /* "Kirjuta arvustus" link tap zone */

  /* Short description. */
  .info2 .short2 { font-size: 14.5px; margin-bottom: 18px; }

  /* Gallery — squarer aspect-ratio to avoid pushing buybox below the fold. */
  .gal2 .gal2-shell .woocommerce-product-gallery { aspect-ratio: 1; }

  /* Variants/swatches — keep the auto-fill grid (handles Cedral 26 / Hardie 9 /
     Eternit 6 gracefully). Tighten gap and stack the label-row above tiles. */
  .variants2 { margin-bottom: 18px; }
  .variants2 .grid { gap: 8px; }
  .variants2 .label-row { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Sample CTA — 3-col grid (icon | text | button) breaks at narrow widths.
     Reflow to 2 rows with grid-template-areas. */
  .sample2 {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "ic txt"
      "btn btn";
    gap: 12px;
    padding: 14px;
  }
  .sample2 .ic { grid-area: ic; }
  .sample2 > div:not(.ic):not(form) { grid-area: txt; }
  .sample2 form.sample-form { grid-area: btn; }
  .sample2 form.sample-form button.single_add_to_cart_button { width: 100%; min-height: 44px; }

  /* Buybox — tighter padding, smaller price. */
  .bb2 { padding: 18px; }
  .bb2 .price-top { padding-bottom: 14px; margin-bottom: 14px; gap: 10px; }
  .bb2 .price-top .price,
  .bb2 .price-top .price .woocommerce-Price-amount,
  .bb2 .price-top .price bdi { font-size: 32px !important; }
  .bb2 .price-top .price .woocommerce-Price-currencySymbol { font-size: 24px !important; }

  /* Stock card — drop the right-column eta block onto its own row.
     Wide ETA strings ("1–3 tööpäeva", "Kojutarne 19. mai") squeeze the
     2-col grid and wrap awkwardly otherwise. */
  .bb2 .stock-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
  }
  .bb2 .stock-card .stock-eta {
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid rgba(42, 97, 79, 0.18);
  }

  /* Add-to-cart row — 108 px qty + 1fr CTA, both 52 px tall (≥ 48 touch). */
  .bb2 form.cart {
    grid-template-columns: 108px 1fr !important;
    gap: 8px !important;
  }
  .bb2 form.cart > button.single_add_to_cart_button { height: 52px; font-size: 14.5px; }
  .bb2 form.cart .quantity,
  .bb2 form.cart .nh-qty { height: 52px; }

  /* Calc banner. */
  .calc2 { padding: 20px; }
  .calc2 h3 { font-size: 19px; margin-bottom: 6px; }
  .calc2 p { font-size: 12.5px; margin-bottom: 14px; }

  /* PDP section paddings + heading typography. */
  .pdp-section { padding: 40px 0; }
  .pdp-head h2 { font-size: 26px; letter-spacing: -0.02em; }
  .pdp-head .lede-h { font-size: 13.5px; }

  /* Specs/description body. */
  .sd-grid h2 { font-size: 22px; margin-bottom: 14px; }
  .sd-table { font-size: 13px; }
  .sd-table tr:not(.sd-group) th,
  .sd-table tr:not(.sd-group) td { padding: 9px 12px; }
  .sd-desc p { font-size: 14.5px; }

  /* Breadcrumb wrapper — keep `padding-top` / `padding-bottom` (NOT shorthand)
     so .container's horizontal padding survives. Same gotcha pattern as
     category.css:19-22. */
  .nh-pdp-crumbs { padding-top: 16px; padding-bottom: 14px; }
}

/* ---------- Responsive (Stage 2 — bottom sections reflow) ----------
 * Bundle (.bndl), color cross-sells scroller (.related2), Reviews2
 * (.rv-grid / .rv-summary / .rv-list), Guides (.guides2). Same
 * desktop-first override pattern as Stage 1.
 */

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  /* Bundle 4-up grid stays — but tighten internal grid-row template so
     thumb / info / qty / price still fit at narrower content widths. */
  .bndl-row {
    grid-template-columns: 24px 64px minmax(0, 1fr) auto auto;
    gap: 12px;
    padding: 10px;
  }
  .bndl-thumb { width: 64px; }
  .bndl-head { padding: 18px; gap: 16px; }
  .bndl-head h3 { font-size: 19px; }
  .bndl-head-r { min-width: 220px; }
  .bndl-now strong { font-size: 24px; }

  /* Related2 horizontal scroller — narrow card to fit ~3 visible at 768 px
     (was 6 at desktop). Keeps the calc()-based flex-basis pattern. */
  .related2-card { flex: 0 0 calc((100% - 14px * 2) / 3); }

  /* Guides 3 → 2. */
  .guides2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
  /* Bundle row at <640: 5-cell pattern can't fit. Reflow to 2-row grid
     using grid-template-areas:
       row 1: check + thumb + info  (info wraps 1fr)
       row 2: qty (left) + price (right)
     This keeps the row visually as one unit while making each cell
     readable on a 360 px viewport. */
  .bndl-row {
    grid-template-columns: 22px 56px minmax(0, 1fr);
    grid-template-areas:
      "check thumb info"
      "qty   qty   price";
    gap: 10px 12px;
    padding: 12px 10px;
  }
  .bndl-check { grid-area: check; }
  .bndl-thumb { grid-area: thumb; width: 56px; }
  .bndl-info  { grid-area: info; }
  .bndl-qty   { grid-area: qty; justify-self: start; }
  .bndl-price { grid-area: price; justify-self: end; min-width: 0; }

  /* Bundle head — stack title block above totals + CTA so the green
     "Lisa valitud korvi" button gets full width. */
  .bndl-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }
  .bndl-head-r { min-width: 0; align-items: stretch; }
  .bndl-add { width: 100%; padding: 14px 18px; }
  .bndl-was, .bndl-total { text-align: left; }
  .bndl-was { justify-content: flex-start; }
  .bndl-now { align-items: flex-start; }

  /* Filter chips become a horizontal scroll strip (same pattern as the
     category-page toolbar chips at category.css:1055-1066). */
  .bndl-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
    scrollbar-width: thin;
  }
  .bndl-chip { flex-shrink: 0; }

  /* Group section paddings. */
  .bndl-group-head { padding: 4px 16px; }
  .bndl-rows { padding: 0 8px 10px; }

  /* Related2 scroller — 1.6 cards visible at 360 px so the user sees a
     half-card on the right edge as a swipe affordance. Hide the prev/next
     arrows on touch — swipe is the primary navigation. */
  .related2-card { flex: 0 0 60%; }
  .pdp-head .arr,
  .js-related-prev,
  .js-related-next { display: none; }

  /* Reviews summary aside — already stacks at tablet. Tweak typography
     and bar tap-target at this width. */
  .rv-bar { padding: 9px 0; gap: 8px; }
  .rv-bar-track { height: 8px; }
  .rv-summary { padding: 20px; }
  .rv-num { font-size: 44px; }

  /* Reviews list cards. */
  .rv-item { padding: 16px; margin-bottom: 12px; }
  .rv-item-head { flex-wrap: wrap; gap: 10px; }
  .rv-meta {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    justify-content: flex-end;
  }
  .rv-toolbar { gap: 12px; padding-bottom: 12px; margin-bottom: 14px; }
  .rv-clear { margin-left: 0; flex: 0 0 100%; padding-top: 4px; }
  .rv-title { font-size: 15px; }
  .rv-body { font-size: 13.5px; }

  /* Review submission form. */
  .rv-root #review_form_wrapper { padding: 20px; }
  .rv-root #review_form_wrapper .comment-reply-title { font-size: 18px; margin-bottom: 18px; }
  .rv-root #review_form_wrapper .form-submit input[type="submit"] {
    min-width: 0;
    width: 100%;
    height: 52px;
  }
  /* Star picker — bump tap targets to 40 px. */
  .rv-root #review_form_wrapper .comment-form-rating .stars a { width: 40px; height: 40px; }
  .rv-root #review_form_wrapper .comment-form-rating .stars a::before { font-size: 32px; line-height: 40px; }

  /* Guides 2 → 1. */
  .guides2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .guide2-card .thumb { aspect-ratio: 1.6; }
  .guide2-card h4 { font-size: 17px; }
}

/* ---------- Responsive (Stage 4 — touch-target sweep) ----------
 * 40-px floor on every interactive at <640. Visually-small interactives
 * (bundle qty +/-, bundle checkbox) keep their look but get an invisible
 * `::before { position: absolute; inset: -X px }` to expand the tap zone.
 * Same pattern as category.css:1376-1410.
 */
@media (max-width: 639px) {
  /* Color-related quick-add. */
  .related2-card .add-btn { width: 40px; height: 40px; }

  /* Bundle qty stepper — visual stays small (the row is dense), expand
     hit zone via ::before. */
  .bndl-qty button { position: relative; width: 32px; height: 36px; }
  .bndl-qty button::before {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }
  .bndl-qty input { height: 36px; width: 40px; font-size: 14px; }

  /* Bundle filter chip — bump to 40-px floor. */
  .bndl-chip { padding: 11px 14px; font-size: 13px; }

  /* Bundle "Vali kõik" group-all link. */
  .bndl-group-all { padding: 10px 0; }

  /* Bundle "Lisa valitud korvi" CTA. */
  .bndl-add { padding: 14px 18px; }

  /* Bundle row checkbox — visual stays 22 × 22, expand hit zone. */
  .bndl-check { width: 22px; height: 22px; position: relative; }
  .bndl-check::before {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }

  /* Reviews sort select. */
  .rv-sort select { padding: 11px 32px 11px 14px; font-size: 13.5px; }

  /* Reviews helpful + report buttons. */
  .rv-helpful, .rv-report { padding: 10px 4px; }

  /* Reviews clear-filter chip. */
  .rv-clear { padding: 10px 0; }

  /* Gallery prev/next arrows hidden on touch — swipe is primary nav.
     The photoswipe lightbox controls (plugin-owned) are unaffected. */
  .gal2 .flex-direction-nav { display: none; }

  /* Calc banner CTA — pad to 40-px floor. */
  .calc2 .cta { padding: 13px 18px; }
}

/* ---------- Responsive (Stage 3 — mobile add-to-cart action bar) ----------
 * Fixed-bottom bar at <640 with price + add-to-cart CTA. Revealed via
 * IntersectionObserver when the buybox scrolls offscreen (see product.js).
 * Hidden above 640 px — desktop and tablet still use the in-flow buybox.
 *
 * z-index 90 sits below cart-drawer (200), nav-drawer (220), search overlay
 * (250) — so all three slide-out drawers cover the bar correctly when open.
 */
.pdp-bar { display: none; }

@media (max-width: 639px) {
  .pdp-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--bone-300);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(110%);
    transition: transform 0.22s ease;
  }
  .pdp-bar.is-shown { transform: translateY(0); }
  .pdp-bar-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    flex: 0 0 auto;
  }
  .pdp-bar-amt {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    white-space: nowrap;
  }
  .pdp-bar-amt .woocommerce-Price-currencySymbol {
    font-weight: 800;
    margin-left: 1px;
  }

  /* Qty stepper. Compact (90 px wide) so the price + qty + CTA all fit
     on a 360-px viewport with breathing room. Uses native input[type=
     number] + −/+ buttons that call .stepUp() / .stepDown() so HTML
     min/max/step are respected (same pattern as the buybox `.nh-qty`
     stepper override at woocommerce/global/quantity-input.php). */
  .pdp-bar-qty {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 40px;
    background: white;
    border: 1px solid var(--bone-300);
    border-radius: var(--radius-md);
  }
  .pdp-bar-qty-btn {
    width: 30px;
    height: 40px;
    background: transparent;
    border: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .pdp-bar-qty-btn:hover { color: var(--green-800); }
  .pdp-bar-qty-input {
    width: 32px;
    height: 40px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    -moz-appearance: textfield;
    appearance: textfield;
    outline: 0;
    padding: 0;
  }
  /* Hide native spinner arrows — we provide our own +/- buttons. */
  .pdp-bar-qty-input::-webkit-outer-spin-button,
  .pdp-bar-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .pdp-bar-cta {
    height: 48px;
    /* `flex: 1` lets the CTA absorb remaining space after price + qty
       take their content widths. Ensures "Lisa korvi" stays full-width
       on wider mobile viewports without crowding price/qty on narrow. */
    flex: 1;
    min-width: 0;
    padding: 0 14px;
    background: var(--green-800);
    color: white;
    border: 0;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .pdp-bar-cta:hover { background: var(--green-900); }
  .pdp-bar-cta:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Reserve bottom space when bar is active so the newsletter section's
     last row isn't covered. JS adds .has-pdp-bar to body when the bar
     becomes shown for the first time. */
  body.has-pdp-bar { padding-bottom: 70px; }
}