/**
 * MHM2-716 — Universal PDP buy-box redesign.
 * Restyles the EXISTING native buy box (no rebuild) to the approved mockup so it
 * works for every product type (configurable / custom-options / grouped / Itoris
 * customise / quote). The native form, price-box, options select, qty-counter and
 * add-to-cart button are untouched structurally — only styled + reordered.
 * Size buttons are progressively enhanced by pdp-buybox.js (this file styles them).
 * Tokens: orange #EF7622 / #C85A17, ink #16202B, body #4C565F, hairline #EFE9DF,
 * warm #F4F0E9, success #1F9D63, stars #EF9A22. Manrope UI + Newsreader title.
 */

/* ---------- the box ---------- */
.catalog-product-view .product-info-main{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e7e2d9; border-radius:20px;
  padding:30px 30px 26px; color:#4c565f;
  box-shadow:0 1px 2px rgba(20,32,43,.04), 0 18px 40px -22px rgba(20,32,43,.22);
  font-family:Manrope, sans-serif;
}
/* mockup order regardless of DOM order */
.product-info-main > *{ order:5; }
.product-info-main > .page-title-wrapper{ order:1; margin:0; }
.product-info-main > .trow{ order:2; }
.product-info-main > .product-info-price{ order:3; }
/* volume-discount card sits directly under the price line, ABOVE qty/add-to-cart
   (user 2026-07-11). Same order as price — equal orders keep DOM order, and the
   tiers div follows .product-info-price in the DOM. */
.product-info-main > .prices-tier-content{ order:3; }
/* configurable tier list (JS-rendered after size pick; relocated between the
   option selectors and the buy row by pdp-buybox-tiers.js) */
.product-info-main .product-add-form .price-box.price-tier_price{ margin:14px 0 4px; }
.product-info-main .product-add-form .price-box.price-tier_price .prices-tier{ margin:0; }
.product-info-main > .product-add-form{ order:4; }
.product-info-main > #btn-custom-product-options,
.product-info-main > .custom-product-options{ order:4; }
.product-info-main > .payments-accept{ order:7; }
.product-info-main > .product-alert,
.product-info-main > .alert.urls{ order:8; }
/* blurb belongs in the Description tab (ticket) */
.product-info-main > .product.attribute.overview{ display:none; }

/* ---------- title ---------- */
.product-info-main .page-title-wrapper .page-title{ margin:0; }
.product-info-main .page-title-wrapper .page-title .base{
  font:500 27px/1.18 Newsreader, Georgia, serif; color:#16202b; letter-spacing:-.01em;
}
/* duplicate Stamped badge in the title area — we use the server-rendered .trow instead */
.product-info-main .page-title-wrapper .stamped-product-reviews-badge{ display:none !important; }

/* ---------- trust row (server-rendered; classes match template) ---------- */
.product-info-main .trow{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; min-height:24px; }
.product-info-main .trow .stars{ color:#ef9a22; font-size:15px; letter-spacing:1px; line-height:1; }
.product-info-main .trow .rc{ font:700 12.5px Manrope, sans-serif; color:#16202b; }
.product-info-main .trow .rc b{ color:#a7aeb5; font-weight:600; }
.product-info-main .badge2004{
  display:inline-flex; align-items:center; gap:5px; font:800 10px Manrope, sans-serif;
  letter-spacing:.05em; text-transform:uppercase; color:#1f7a4d; background:#e7f5ed;
  border-radius:20px; padding:4px 9px;
}
.product-info-main .badge2004 svg{ width:11px; height:11px; }

/* ---------- price line + sku + stock ---------- */
.product-info-main .product-info-price{
  position:relative; margin:20px 0 0; padding-bottom:20px; border-bottom:1px solid #efe9df;
  /* keep the price line within the card so the absolute SKU (right:0) never
     overflows the right edge on narrow/mobile widths */
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
}
/* padding:0 — the theme puts padding-left:11px on .price-box which indented the
   price ~11px past the title's left edge ("price not aligned left" on mobile). */
.product-info-main .product-info-price .price-box{ margin:0; padding:0; display:block; }
.product-info-main .product-info-price .price-box .price{
  font:800 32px/1 Manrope, sans-serif; color:#16202b; letter-spacing:-.02em;
}
.product-info-main .product-info-price .price-label{ display:none; }
.product-info-main .product-info-price .special-price .price{ color:#c85a17; }
.product-info-main .product-info-price .old-price{ margin-left:8px; }
.product-info-main .product-info-price .old-price .price{ font-size:15px; color:#a7aeb5; font-weight:600; }
/* "In stock, made to order" (bb-instock.phtml) — stacked under the price */
.product-info-main .bb-instock{
  display:inline-flex; align-items:center; gap:5px; font:700 11px Manrope, sans-serif;
  color:#1f9d63; margin-top:6px;
}
.product-info-main .bb-instock::before{ content:""; width:7px; height:7px; border-radius:50%; background:#1f9d63; display:inline-block; }
/* sku block pinned top-right so price+instock stack cleanly on the left */
.product-info-main .product-info-stock-sku{ position:absolute; top:2px; right:0; text-align:right; margin:0; }
.product-info-main .product-info-stock-sku .stock{ display:none; }
.product-info-main .product.attribute.sku{ font:600 11.5px/1.5 Manrope, sans-serif; color:#a7aeb5; white-space:nowrap; }
.product-info-main .product.attribute.sku .type{ font-weight:600; color:#a7aeb5; display:inline; margin-right:5px; }
.product-info-main .product.attribute.sku .type::after{ content:none !important; }
.product-info-main .product.attribute.sku .value{ color:#67707a; font-weight:700; }

/* ---------- options ---------- */
.product-info-main .product-options-wrapper{ margin-top:20px; }
/* The theme lays .field.configurable out as display:table (label + control as
   table-cells side by side). Force block so the label sits ABOVE the options,
   matching the mockup's .oglabel row. */
.product-info-main .product-options-wrapper .fieldset > .field,
.product-info-main .product-options-wrapper .field.configurable{ display:block !important; margin:0 0 6px; }
/* max-width:none + float:none beat the theme's `.field .control{max-width:225px;
   float:left}` — that clamp squeezed the size chips into a 225px column and
   forced them to wrap one-per-line instead of filling the row. */
.product-info-main .product-options-wrapper .field > .control{ display:block !important; width:auto !important; max-width:none !important; float:none !important; }
.product-info-main .product-options-wrapper .field > .label{
  display:block !important; float:none !important; width:auto !important; font:700 12.5px Manrope, sans-serif; color:#16202b; margin:0 0 10px; padding:0;
}
.product-info-main .product-options-wrapper .field > .label span{ font-weight:700; }
/* Magento already renders the required "*" on .field.required .label:after — recolour it, don't add a second */
.product-info-main .product-options-wrapper .field.required > .label:after{ color:#c85a17; }
/* Reserve the option area so swapping the native <select> for buttons on load
   doesn't shift the buy box (no shake). */
.product-info-main .product-options-wrapper .field.configurable > .control{ min-height:58px; }
/* size buttons injected by pdp-buybox.js — content-width chips (hug their label,
   never stretch to fill the row), left-aligned, wrapping. */
/* margin-top must stay 0: the control reserves min-height:58px and the injected
   .bb-sizes is 58px — any extra margin makes the field grow on injection and
   nudges everything below (2px CLS). */
.product-info-main .bb-sizes{ display:flex; gap:8px; flex-wrap:wrap; margin-top:0; min-height:58px; }
.product-info-main .bb-sz{
  flex:0 1 auto; min-width:62px; max-width:100%; border:1.5px solid #e2ddd3; background:#fff; border-radius:11px;
  padding:11px 14px; cursor:pointer; text-align:center; font-family:Manrope, sans-serif;
  transition:border-color .14s, background .14s, box-shadow .14s;
}
.product-info-main .bb-sz:hover{ border-color:#16202b; }
.product-info-main .bb-sz .n{ display:block; font:700 13.5px Manrope, sans-serif; color:#16202b; }
.product-info-main .bb-sz .d{ display:block; font:600 10.5px Manrope, sans-serif; color:#a7aeb5; margin-top:2px; }
.product-info-main .bb-sz.on{ border-color:#ef7622; background:#fef6f0; box-shadow:0 0 0 3px rgba(239,118,34,.12); }
.product-info-main .bb-sz.on .d{ color:#c85a17; }
.product-info-main .bb-sz:focus-visible{ outline:2px solid #16202b; outline-offset:2px; }
/* hide the native select once buttons are active (JS adds .bb-enhanced) */
.product-info-main .bb-enhanced select.super-attribute-select,
.product-info-main .bb-enhanced select[name^="options["]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* No-flash: hide the native size <select> from FIRST PAINT. This rule ships in
   the render-blocking head CSS, so the raw "Choose an Option…" dropdown never
   flashes before pdp-buybox.js (which loads late, after the options) swaps in the
   buttons. The reserved .control min-height above keeps the box from shifting.
   pdp-buybox.js re-shows the select (adds .bb-plain) ONLY when it neither
   buttonizes NOR finds swatches — so multi-attribute selects stay usable while
   swatch/buttonized products keep the raw select hidden. */
.product-info-main .product-options-wrapper .super-attribute-select{
  position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;
}
.product-info-main .product-options-wrapper.bb-plain .super-attribute-select{
  position:static; width:auto; height:auto; opacity:1; overflow:visible; pointer-events:auto;
}

/* ---------- buy row: qty pill + add-to-cart ---------- */
.product-info-main .box-tocart .fieldset{ display:flex; gap:12px; align-items:flex-start; margin:22px 0 0; }
/* Reserve the qty box's WIDTH + HEIGHT up front. The stepper is injected by the
   KnockoutJS qty-counter after first paint (empty #custom-qty on load) — without a
   reserved box the Add-to-Cart button jumps sideways when it hydrates (reported CLS). */
.product-info-main .box-tocart .field.qty{ margin:0; flex:0 0 136px; width:136px; max-width:136px; min-width:0; }
.product-info-main .box-tocart .field.qty > .label,
.product-info-main .box-tocart label[for="qty"]{ display:none !important; }
.product-info-main .box-tocart .field.qty .control{ display:block; width:136px; max-width:136px; height:52px; }
.product-info-main .box-tocart .input-group{
  position:static; display:flex; width:136px; max-width:136px; align-items:center; justify-content:space-between; gap:2px;
  height:52px; box-sizing:border-box; background:#f4f0e9; border:1.5px solid #e6e0d5; border-radius:14px; padding:4px;
}
/* theme positions the addon (button) wrappers absolutely — make them flow inline */
.product-info-main .box-tocart .input-group__addon{ position:static; display:flex; flex:none; width:auto; height:100%; background:transparent; border:none; padding:0; }
/* NB: theme _main-info.less sets `.input-group__addon-decrease/-increase .input-group__button{border-radius:unset}`
   (equal-or-higher specificity) → the hover white box rendered as a SQUARE. Match that selector + !important
   so the −/+ hover fill keeps the mockup's 10px rounding. */
.product-info-main .box-tocart .input-group__button,
.product-info-main .box-tocart .input-group__addon-decrease .input-group__button,
.product-info-main .box-tocart .input-group__addon-increase .input-group__button{
  flex:none; width:40px; height:100%; border:none; background:transparent; color:#67707a; font-size:19px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:10px !important;
  transition:background .13s, color .13s;
}
.product-info-main .box-tocart .input-group__button:hover{ background:#fff; color:#ef7622; box-shadow:0 1px 3px rgba(20,32,43,.1); }
.product-info-main .box-tocart .input-group__button:active{ transform:scale(.94); }
.product-info-main .box-tocart .input-group__icon--decrease::before{ content:"−"; }
.product-info-main .box-tocart .input-group__icon--increase::before{ content:"+"; }
.product-info-main .box-tocart .input-group__input{
  flex:1 1 auto; width:auto; min-width:0; height:100%; border:none; text-align:center; font:800 16px Manrope, sans-serif;
  color:#16202b; background:transparent; padding:0; -moz-appearance:textfield;
}
.product-info-main .box-tocart .input-group__input::-webkit-outer-spin-button,
.product-info-main .box-tocart .input-group__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.product-info-main .box-tocart .input-group__input:focus{ outline:none; }
.product-info-main .box-tocart .actions{ flex:1 1 0; display:flex; align-items:flex-start; padding:0; }
.product-info-main .box-tocart .actions .action.tocart,
.product-info-main #product-addtocart-button{
  flex:1 1 0; align-self:flex-start; background:#ef7622; color:#fff; border:none; border-radius:12px;
  font:800 15px Manrope, sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:9px; height:52px; min-height:52px; box-sizing:border-box; box-shadow:0 8px 18px -7px rgba(239,118,34,.65);
  transition:filter .14s, transform .1s;
}
.product-info-main #product-addtocart-button::before{
  content:""; width:18px; height:18px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.product-info-main #product-addtocart-button:hover{ filter:brightness(.95); }
.product-info-main #product-addtocart-button:active{ transform:translateY(1px); }

/* Itoris CUSTOMISE NOW / quote CTA → same orange treatment, full width */
.product-info-main #btn-custom-product-options,
.product-info-main .custom-product-options .action,
.product-info-main .product-quote-cta{
  display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin-top:22px;
  background:#ef7622; color:#fff; border:none; border-radius:12px; font:800 15px Manrope, sans-serif;
  cursor:pointer; box-shadow:0 8px 18px -7px rgba(239,118,34,.65); transition:filter .14s;
}
.product-info-main #btn-custom-product-options:hover{ filter:brightness(.95); }

/* grouped: keep the qty grid, just tidy spacing */
.product-info-main .table-wrapper.grouped{ margin-top:18px; }

/* ---------- payments: Secure checkout row (MHM2-716 comment 37037) ----------
   Design pills lifted from the approved mockup (Mediband Product Buy Box (3).html):
   "Secure checkout" label + 4 inline pills + "+N more" chip with a hover/focus
   popover ("Also accepted"). Text pills per design — no logo images. */
.product-info-main .payments-accept{
  margin-top:18px; padding-top:16px; border-top:1px solid #efe9df;
}
.product-info-main .payments-accept .pt{
  font:600 10.5px Manrope, sans-serif; color:#a7aeb5; margin-bottom:8px; letter-spacing:.02em;
}
.product-info-main .payments-accept .pmarks{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.product-info-main .payments-accept .pm{
  height:26px; padding:0 8px; border:1px solid #ece6dc; border-radius:6px; background:#fff;
  display:flex; align-items:center; font:800 9.5px Manrope, sans-serif; letter-spacing:.02em; color:#3a444e;
}
.product-info-main .payments-accept .pm.v{ color:#1a1f71; }
.product-info-main .payments-accept .pm.m{ color:#eb001b; }
.product-info-main .payments-accept .pm.a{ color:#016fd0; }
.product-info-main .payments-accept .pm.ap{ color:#111; }
.product-info-main .payments-accept .pm.gp{ color:#4285f4; }
.product-info-main .payments-accept .pm.ap2{ color:#b0208c; }
.product-info-main .payments-accept .pm.zip{ color:#2a2a2a; }
.product-info-main .payments-accept .pm.kl{ color:#111; background:#ffb3c7; border-color:#ffb3c7; }
.product-info-main .payments-accept .pmmore{
  position:relative; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px;
  border:1px solid #ece6dc; border-radius:6px; background:#faf7f2; font:800 9.5px Manrope, sans-serif; color:#67707a; cursor:pointer;
}
.product-info-main .payments-accept .pmmore svg{ width:13px; height:13px; color:#a7aeb5; }
.product-info-main .payments-accept .pmpop{
  position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#fff; border:1px solid #e7e2d9; border-radius:12px; box-shadow:0 14px 34px -12px rgba(20,32,43,.3);
  padding:12px; display:flex; flex-wrap:wrap; gap:6px; width:230px; opacity:0; visibility:hidden;
  transition:opacity .16s, transform .16s; z-index:6;
}
.product-info-main .payments-accept .pmpop::before{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff;
}
.product-info-main .payments-accept .pmmore:hover .pmpop,
.product-info-main .payments-accept .pmmore:focus-within .pmpop,
.product-info-main .payments-accept .pmmore:focus .pmpop{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.product-info-main .payments-accept .pmpop .pt2{
  width:100%; font:700 10px Manrope, sans-serif; letter-spacing:.03em; text-transform:uppercase; color:#a7aeb5; margin-bottom:2px;
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  /* flat card on mobile — no rounded top/bottom corners (user 2026-07-11) */
  .catalog-product-view .product-info-main{ padding:22px 18px 20px; border-radius:0; }
  .product-info-main .page-title-wrapper .page-title .base{ font-size:23px; }
  .product-info-main .product-info-price .price-box .price{ font-size:28px; }
}

/* ============================================================
   MHM2-717 — GROUPED product buy-box variant
   Rows + per-row steppers + live subtotal + "From $X".
   Scoped to .product-info-main; ported from the approved mockup.
   ============================================================ */
/* "From $X" in the price line (grouped has no single price) */
.product-info-main .bb-fromp{ font:600 12px Manrope,sans-serif; color:#a7aeb5; }
.product-info-main .bb-fromp b{ display:block; font:800 30px/1.1 Manrope,sans-serif; color:#16202b; letter-spacing:-.02em; margin-top:2px; }
.product-info-main .bb-fromp b .cur{ font-size:17px; vertical-align:top; margin-right:1px; }

/* grouped rows */
.product-info-main .grpitems{ margin-top:18px; }
.product-info-main .grphd{ display:flex; align-items:center; gap:7px; font:800 11px Manrope,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#16202b; margin-bottom:12px; }
.product-info-main .grphd svg{ width:14px; height:14px; color:#ef7622; }
/* hide the native table chrome; we render .grow rows instead */
.product-info-main .table-wrapper.grouped, .product-info-main table.grouped{ margin:0; border:0; }
.product-info-main table.grouped, .product-info-main table.grouped tbody, .product-info-main table.grouped tr, .product-info-main table.grouped td, .product-info-main table.grouped thead, .product-info-main table.grouped caption{ display:block; padding:0; border:0; }
.product-info-main table.grouped thead, .product-info-main table.grouped caption, .product-info-main table.grouped .row-tier-price{ display:none; }

.product-info-main .grow{ display:flex; align-items:center; gap:13px; padding:11px 12px; border:1.5px solid #efe9df; border-radius:14px; transition:border-color .14s, background .14s; }
.product-info-main .grow + .grow{ margin-top:9px; }
.product-info-main .grow.picked{ border-color:#f2c9a6; background:#fff9f4; }
.product-info-main .gthumb{ flex:0 0 auto; width:46px; height:46px; border-radius:11px; background:#f7f2ea; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-info-main .gthumb img{ max-width:80%; max-height:80%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.product-info-main .gthumb .disc{ width:34px; height:34px; border-radius:50%; border:6px solid var(--bc,#c85a17); box-shadow:inset 0 1px 3px rgba(0,0,0,.18); }
.product-info-main .ginfo{ flex:1 1 0; min-width:0; }
.product-info-main .gname{ font:700 13.5px/1.25 Manrope,sans-serif; color:#16202b; text-decoration:none; }
.product-info-main a.gname:hover{ color:#c85a17; }
.product-info-main .gprice{ font:700 12px Manrope,sans-serif; color:#828b93; margin-top:2px; }
.product-info-main .gqty{ flex:0 0 auto; display:flex; align-items:center; height:38px; background:#f4f0e9; border:1.5px solid #e6e0d5; border-radius:11px; padding:3px; }
.product-info-main .gqty button{ width:30px; height:100%; border:none; background:transparent; color:#67707a; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:background .13s, color .13s; }
.product-info-main .gqty button:hover:not(:disabled){ background:#fff; color:#ef7622; }
.product-info-main .gqty button:disabled{ opacity:.35; cursor:default; }
.product-info-main .gqty input{ width:32px; height:100%; border:none; text-align:center; font:800 14px Manrope,sans-serif; color:#16202b; background:transparent; padding:0; -moz-appearance:textfield; }
.product-info-main .gqty input::-webkit-outer-spin-button, .product-info-main .gqty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.product-info-main .gqty input:focus{ outline:none; }
.product-info-main .grow .qty-min-hint{ flex-basis:100%; }
/* "Customise" action for children with required options */
.product-info-main .gcustomise{ flex:0 0 auto; display:inline-flex; align-items:center; height:38px; padding:0 14px; border:1.5px solid #e2ddd3; border-radius:11px; font:800 12px Manrope,sans-serif; color:#c85a17; text-decoration:none; }
.product-info-main .gcustomise:hover{ border-color:#ef7622; background:#fef6f0; }

/* subtotal */
.product-info-main .bb-subtotal{ display:flex; align-items:baseline; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid #efe9df; }
.product-info-main .bb-subtotal .sl{ font:700 13px Manrope,sans-serif; color:#16202b; }
.product-info-main .bb-subtotal .sl span{ display:block; font:600 11px Manrope,sans-serif; color:#a7aeb5; margin-top:2px; }
.product-info-main .bb-subtotal .sv{ font:800 24px Manrope,sans-serif; color:#16202b; letter-spacing:-.02em; }
.product-info-main .bb-subtotal .sv .cur{ font-size:15px; vertical-align:top; }

/* grouped Add button: full width (no qty pill beside it), disabled state */
.catalog-product-view.page-product-grouped .product-info-main .box-tocart .fieldset{ display:block; }
.catalog-product-view.page-product-grouped .product-info-main #product-addtocart-button{ width:100%; margin-top:16px; }
.product-info-main #product-addtocart-button:disabled{ background:#e3ddd3; color:#a7aeb5; box-shadow:none; cursor:default; }
.product-info-main #product-addtocart-button:disabled::before{ opacity:.4; }
.product-info-main .bb-grouped-hint{ text-align:center; font:600 11.5px Manrope,sans-serif; color:#a7aeb5; margin-top:11px; }

/* ============================================================
   MHM2-716 addendum — volume-discount card (comment 36938 + "make it the same
   as design"). Always-open "Buy more, save more" header + tier table, lifted
   EXACTLY from Mediband Product Buy Box (2).html. Fully server-rendered (no CLS).
   (The earlier "Click for Volume Discounts" collapsible toggle was superseded.)
   ============================================================ */
.product-info-main .tiers{ margin-top:18px; }
.product-info-main .tiershd{ display:flex; align-items:center; gap:7px; font:800 11px Manrope, sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#16202b; margin-bottom:10px; }
.product-info-main .tiershd svg{ width:14px; height:14px; color:#ef7622; flex:none; }

/* tier table (mockup) */
.product-info-main .tiertable{ border:1px solid #efe9df; border-radius:12px; overflow:hidden; }
.product-info-main .tt-h, .product-info-main .tt-r{ display:grid; grid-template-columns:1.3fr 1fr auto; gap:10px; align-items:center; padding:9px 14px; }
.product-info-main .tt-h{ background:#faf7f2; font:700 9.5px Manrope, sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#a7aeb5; }
.product-info-main .tt-r{ border-top:1px solid #efe9df; font:700 13px Manrope, sans-serif; color:#16202b; cursor:pointer; transition:background .12s; }
.product-info-main .tt-r .qh{ white-space:nowrap; }
.product-info-main .tt-r:hover{ background:#faf7f2; }
.product-info-main .tt-r .sv{ justify-self:end; font:800 10px Manrope, sans-serif; color:#a7aeb5; text-transform:uppercase; letter-spacing:.03em; }
.product-info-main .tt-r.on{ background:#fef6f0; }
.product-info-main .tt-r.on .qh, .product-info-main .tt-r.on .pe, .product-info-main .tt-r.on .sv{ color:#c85a17; }
.product-info-main .tt-extra{ display:none; }
.product-info-main .tt-r.on{ display:grid !important; } /* active row always visible even when collapsed */
.product-info-main .tt-more{ width:100%; border:none; border-top:1px solid #efe9df; background:#faf7f2; color:#c85a17; font:800 11.5px Manrope, sans-serif; padding:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .12s; }
.product-info-main .tt-more:hover{ background:#f4eee4; }
.product-info-main .tt-more svg{ width:13px; height:13px; transition:transform .2s; }
.product-info-main .tt-more.open svg{ transform:rotate(180deg); }

/* live "Save X%" pill next to the price (JS-inserted into .price, hidden until a discount qty) */
.product-info-main .price .bb-svpill,
.product-info-main .bb-svpill{
  display:inline-flex; align-items:center; gap:4px; font:800 10px Manrope, sans-serif;
  letter-spacing:.03em; text-transform:uppercase; color:#c85a17; background:#fbe7d6;
  border-radius:20px; padding:4px 9px; margin-left:9px; vertical-align:middle;
}