/* pdp.css — product-detail-page layout, shared by /shop.html and /es/shop.html.
 *
 * WHY THIS FILE EXISTS
 * These rules used to live in an inline <style> block in shop.html. Only there.
 * es/shop.html loaded css/styles.css, which defines none of them, so the Spanish
 * product page shipped with no product-page styling at all — .pdp-grid was not a
 * grid, the 540px product photo overflowed its 358px box, #thumbStrip had no
 * size, the colour swatches were invisible zero-size buttons, and .pdp-buy-btn
 * rendered as a default blue underlined text link. #206 fixed that by copying
 * the block into es/shop.html, which left 21KB of CSS duplicated in two files
 * and one comment asking the next person to keep them in sync by hand.
 *
 * This is that fix done properly: one file, both pages link it, and the two
 * cannot drift apart. Edit here, not in either page.
 *
 * WHAT DOES *NOT* BELONG HERE
 * Anything true of only one of the two pages. As of the UPC pass the two DOMs
 * match element for element — same headline, shipping-ETA banner, inline colour
 * swatches on the 1-belt row, .pdp-cta-block with the Amazon button, payment
 * icons — so es/shop.html no longer carries an ES-only mobile `order` block and
 * the rules below are the single source for both. Keep it that way: a rule that
 * is true of only one page is a sign the two pages have drifted again.
 *
 * CACHING
 * /css/* is served with max-age=604800 (staticwebapp.config.json), so both pages
 * load this with a ?v= query. Bump BOTH links when you change this file or the
 * edge will keep serving the old copy to returning visitors for a week.
 */

.pdp-section {
  padding: 48px 24px;
  background: var(--white);
  overflow-x: hidden;
  box-sizing: border-box;
  width: 100%;
}

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
  box-sizing: border-box;
}

.pdp-grid > * {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pdp-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

#pdpMainMedia {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f4f2;
  aspect-ratio: 1 / 1;
  width: 100%;
}

/* <picture> is display:inline by default. Without this the img's 100%/100%
   sizing loses its block containing box and the slide stops filling the frame. */
#pdpMainMedia picture {
  display: block;
  width: 100%;
  height: 100%;
}

#pdpMainMedia img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity .2s;
  padding: 16px;
  box-sizing: border-box;
}

#pdpVideoWrap {
  display: none;
  position: absolute;
  inset: 0;
}
#pdpVideoWrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

#thumbStrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  min-width: 0;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
#thumbStrip::-webkit-scrollbar { height: 4px; }
#thumbStrip::-webkit-scrollbar-track { background: transparent; }
#thumbStrip::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

.st-thumb {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2.5px solid transparent;
  background: #f4f4f2;
  transition: border-color .15s, transform .12s;
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.st-thumb:hover { transform: scale(1.03); }
.st-thumb.active { border-color: var(--accent); }
.st-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 6px;
  box-sizing: border-box;
}
.st-thumb-video { background: #0d1b2e; }
.st-thumb-video img { opacity: .75; padding: 0; object-fit: cover; }
.st-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.st-thumb-play-dot {
  width: 28px; height: 28px;
  background: rgba(255,0,0,.88);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.pdp-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 100%;
}

.pdp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f0f7ef; color: #2a7a2a; font-size: 12px;
  font-weight: 700; padding: 5px 12px; border-radius: 50px;
  letter-spacing: .4px; width: fit-content;
}
.pdp-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 900; line-height: 1;
  color: var(--navy); margin: 0; text-transform: uppercase;
  word-break: break-word;
}
/* Brand mark shown with the goods and the ordering information */
.pdp-brand { display: block; line-height: 0; margin: 0 0 12px; }
.pdp-brand img { width: 132px; max-width: 60%; height: auto; display: block; }
/* Sits under the bundle options as plain copy, not a pill -- inside the buy
   box it is a spec for the thing being chosen, and a tinted chip there reads
   as another selectable option. */
.pdp-fits{
  display:flex; align-items:center; gap:8px; margin:14px 0 0;
  color:var(--navy);
  font-size:13px; line-height:1.35; font-weight:500;
  width:fit-content; max-width:100%;
}
.pdp-fits svg{flex-shrink:0; color:#1a73e8}
.pdp-fits b{font-weight:800}
@media(max-width:600px){ .pdp-fits{font-size:12.5px; gap:7px} }
/* Stock state belongs beside the thing it qualifies, so it rides the Quantity
   label rather than floating at the top of the column. */
.pdp-qty-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.pdp-qty-head .pdp-label{margin-bottom:0}
/* Right-hand cluster of the Quantity row. Grouping the UPC with the stock pill
   keeps the two together when a narrow phone forces a wrap -- as separate flex
   children of a space-between row the pill would drop to its own line and
   left-align under "Quantity". */
.pdp-qty-meta{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; min-width:0}
/* The barcode for the colour currently chosen, so a shopper can check this is
   the same belt they found on a marketplace. Deliberately quiet: it is a fact
   about the selection, not a claim competing with the pill beside it. */
.pdp-upc{
  display:inline-flex; align-items:baseline; gap:5px;
  font-size:11.5px; font-weight:600; color:#6b7280;
  letter-spacing:.3px; white-space:nowrap;
}
.pdp-upc span{font-weight:700; color:#4b5563; font-variant-numeric:tabular-nums; letter-spacing:.2px}
@media(max-width:400px){ .pdp-upc{font-size:11px; gap:4px} }
.pdp-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pdp-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1;
}
.pdp-shipping { font-size: 13px; color: #2a7a2a; font-weight: 600; }
.pdp-rating { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; flex-wrap: wrap; }
.pdp-stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.pdp-label { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }

.color-options { display: flex; gap: 10px; flex-wrap: wrap; }
.color-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
  transition: border-color .15s, transform .15s; outline: none; position: relative; flex-shrink: 0;
}
.color-btn:hover { transform: scale(1.08); }
.color-btn.active { border-color: var(--navy); }
/* FIX 1: Use Unicode escape \2713 instead of HTML entity &#10003; */
.color-btn.active::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; }
.color-btn[data-color="Black"] { background: #1a1a1a; }
.color-btn[data-color="Black"].active::after { color: #fff; }
.color-btn[data-color="White"] { background: #f0f0f0; border-color: #ccc; }
.color-btn[data-color="White"].active { border-color: var(--navy); }
.color-btn[data-color="White"].active::after { color: var(--navy); }
.color-btn[data-color="Grey"] { background: #888; }
.color-btn[data-color="Grey"].active::after { color: #fff; }

/* Inline colour picker: the swatches ride on the "1 Belt" row itself rather
   than in their own labelled block, so the buy box costs ~110px less height
   and the Amazon button sits higher up the page. Dots are drawn small but
   keep a 44px touch target via the ::before hit-area below. */
.bundle-opt .color-options { gap: 7px; flex-wrap: nowrap; flex-shrink: 0; }
.bundle-opt .color-btn { width: 26px; height: 26px; border-width: 2px; }
.bundle-opt .color-btn::before { content: ''; position: absolute; inset: -9px -4px; }  /* 44px tall touch target, no horizontal overlap with the neighbouring dot */
.bundle-opt .color-btn.active::after { font-size: 13px; }
.bundle-opt[data-qty="1"] { align-items: center; }

.bundle-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 2px solid var(--border);
  border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fafafa; width: 100%; box-sizing: border-box;
}
.bundle-opt.active { border-color: var(--accent); background: rgba(26,115,232,.04); }
.bundle-opt:hover { border-color: var(--accent); }
.bundle-highlight { border-color: rgba(26,115,232,.35); background: rgba(26,115,232,.03); position: relative; }
.bundle-highlight::before { content: ''; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid rgba(26,115,232,.15); animation: bundle-pulse 2.5s ease-in-out 3; pointer-events: none; }
@keyframes bundle-pulse { 0%,100% { border-color: rgba(26,115,232,.15); } 50% { border-color: rgba(26,115,232,.5); } }
.bundle-radio {
  width: 18px; min-width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); transition: border-color .15s;
  position: relative; margin-top: 2px;
}
.bundle-opt.active .bundle-radio { border-color: var(--accent); background: var(--accent); }
.bundle-opt.active .bundle-radio::after { content: ''; position: absolute; inset: 3px; background: #fff; border-radius: 50%; }
.bundle-qty { font-weight: 700; font-size: 13px; color: var(--navy); flex: 1; line-height: 1.4; min-width: 0; word-break: break-word; }
.bundle-price { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
.bundle-price em { font-style: normal; color: #2a7a2a; font-size: 11px; margin-left: 4px; }

.pdp-buy-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--navy); color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 18px 24px; border-radius: 12px; text-decoration: none;
  transition: background .2s, transform .15s; border: none; cursor: pointer;
  width: 100%; box-sizing: border-box;
}
.pdp-buy-btn:hover { background: #0a2540; transform: translateY(-1px); }

/* Secondary Amazon checkout — outlined against the solid navy primary so it
   never competes with it. */
/* Primary and Amazon side by side: the "or" divider and the stacked second
   button cost ~80px, which pushed Amazon well below the fold. Primary keeps
   the larger column so it still reads as the default action. */
.pdp-cta-row { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 10px; align-items: stretch; }
.pdp-amazon-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: #131921; color: #fff; border: 2px solid #FF9900;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 14px 20px; border-radius: 12px; text-decoration: none;
  transition: background .2s, transform .15s; width: 100%; box-sizing: border-box;
}
.pdp-amazon-btn:hover { background: #1f2a38; transform: translateY(-1px); }
/* Height only, width auto — the wordmark is a trademark and must never stretch.
   The orange border is load-bearing here: squid ink #131921 and our navy
   #0d1b2e are near-twins, so without it this reads as a clone of the buy
   button stacked right above it. */
.pdp-amazon-lede { display: flex; align-items: center; justify-content: center; gap: 9px; }
.pdp-amazon-lede img { flex-shrink: 0; height: 21px; width: auto; display: block; }
/* Prime eligibility badge. Opts out of the button's Barlow Condensed uppercase
   — the Prime lockup is lowercase set close, and shouting it breaks the read.
   White text (not Amazon's squid ink) because it sits on the dark button. */
.pdp-amazon-prime {
  display: flex; align-items: center; gap: 4px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1; color: #fff; white-space: nowrap;
}
/* Height only, width auto — the prime lockup is a trademark, never stretch it. */
.pdp-amazon-prime img { flex-shrink: 0; height: 14px; width: auto; display: block; }
.pdp-cta-block { display: flex; flex-direction: column; gap: 0; }
.pdp-cta-fine { display: flex; flex-direction: column; gap: 2px; margin: 7px 0 0; }
.pdp-guarantee { font-size: 12px; color: #888; text-align: center; margin: 0; }
.pdp-alt-note { font-size: 11px; color: #aaa; text-align: center; margin: 0; }

.pdp-trust-badges { display: flex; flex-direction: column; gap: 8px; }
.trust-badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trust-badge { font-size: 12px; font-weight: 600; color: #444; background: #f4f4f2; border: 1px solid #e0e0dc; padding: 5px 10px; border-radius: 6px; white-space: nowrap; }

/* FIX 3: payment icons as SVG containers */
.payment-icons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pay-icon { display: inline-block; border-radius: 4px; overflow: hidden; vertical-align: middle; }

/* FIX 2: Use Unicode escape \2713 instead of HTML entity &#10003; */
.trust-strip { justify-content: center; }
.mobile-share-cta { display: none; }
/* Mobile-only additions — off everywhere else so desktop is byte-for-byte the
   layout it was. See the max-width:767px block below for the live versions. */
#pdpGalCap { display: none; }
.pdp-inline-cta { display: none; }
#pdpStickyBar { display: none; }
.pdp-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.pdp-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #444; line-height: 1.5; }
.pdp-features li::before { content: '\2713'; color: #2a7a2a; font-weight: 900; font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.pdp-review-snippet { background: var(--navy-pale); border-radius: 12px; padding: 16px 18px; border-left: 4px solid var(--accent); }
.pdp-review-stars { color: #f5c518; font-size: 14px; margin-bottom: 6px; }
.pdp-review-quote { font-size: 14px; color: #333; line-height: 1.55; margin-bottom: 6px; font-style: italic; word-break: break-word; }
.pdp-review-author { font-size: 12px; color: #777; font-weight: 600; }

#st-shipping-bar {
  display: flex; align-items: center; gap: 8px;
  background: #FFF8E7; border: 1px solid #EFC86A;
  border-radius: 8px; padding: 10px 14px; font-size: 13px;
  color: #7A4F0A; font-family: inherit; line-height: 1.4;
  transition: background .3s, border-color .3s;
  width: 100%; box-sizing: border-box; word-break: break-word;
}
#st-shipping-bar.st-holiday { background: #F0F7FF; border-color: #7BB8F0; color: #1A4A7A; }
#st-shipping-bar.st-urgent  { background: #FFF0F0; border-color: #F09090; color: #8B1A1A; }
#st-s-icon { font-size: 15px; flex-shrink: 0; }

@media (min-width: 769px) and (max-width: 1024px) {
  .pdp-grid { gap: 32px; }
  .pdp-section { padding: 40px 20px; }
  .pdp-title { font-size: 30px; }
  .st-thumb { flex: 0 0 88px; width: 88px; height: 88px; }
  .pdp-rev-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
  .pdp-section { padding: 20px 16px 48px; }
  .pdp-grid { grid-template-columns: 1fr; gap: 20px; }
  .pdp-features { padding-left: 1rem; }
  .trust-strip { justify-content: flex-start; gap: 18px; }
  .mobile-share-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; padding: 14px 20px; background: var(--gold); color: var(--navy); font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 17px; letter-spacing: .4px; text-transform: uppercase; text-decoration: none; }
  .mobile-share-cta svg { flex-shrink: 0; }

  #pdpMainMedia {
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    max-height: 72vw;
  }
  .st-thumb { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 8px; }

  .pdp-title { font-size: 28px; }
  .pdp-price { font-size: 30px; }
  .pdp-cta-row { gap: 8px; }
  /* 17px/10px left "Buy Bundle — $49.99" needing 146px in 142px, so the primary
     CTA silently went two lines tall the moment a bundle was picked -- and the
     Spanish labels are longer still. 16px with tighter padding gives 148px,
     which clears the longest label on either page. */
  .pdp-buy-btn { font-size: 16px; padding: 15px 8px; gap: 6px; }
  .pdp-buy-btn svg { width: 16px; height: 16px; }
  .pdp-amazon-btn { font-size: 14px; padding: 11px 6px; gap: 5px; }
  /* "Buy on"/"Compra en" + the wordmark, always on ONE line. Spanish is 22px
     wider than English and the button has ~129px inside it at 375px, so an
     18px wordmark tipped the Spanish lede into two lines and made the Amazon
     button taller than the Stripe one beside it. 16px clears it down to the
     340px stacking breakpoint, with nowrap as the backstop. */
  .pdp-amazon-lede { gap: 6px; white-space: nowrap; }
  .pdp-amazon-lede img { height: 16px; }
  .pdp-amazon-prime { font-size: 10px; gap: 4px; }
  .pdp-amazon-prime img { height: 12px; }
  #st-shipping-bar { font-size: 12px; padding: 9px 12px; }

  .bundle-opt { padding: 10px 12px; gap: 8px; }
  .bundle-qty { font-size: 12px; }
  .bundle-price { font-size: 12px; }

  .color-btn { width: 48px; height: 48px; }
  .trust-badge { font-size: 11px; padding: 4px 8px; }

  .pdp-rev-grid { grid-template-columns: 1fr !important; }
  .use-case-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ══ MOBILE PDP ORDER ═══════════════════════════════════════════════════════
   30 days of Clarity: 95.2% of phone visitors reached 5% of this page and only
   52.0% reached 10%. Desktop, same markup, had no cliff at all — 100% reached
   10%. The difference was what the first screen said. On a phone it was
   header + a full-bleed photo of a black rubber coil + a thumbnail strip; the
   title, the price, the bundles and the buy button were all below it, and 404
   of 563 mobile taps went into the thumbnails, which led nowhere.

   display:contents flattens .pdp-gallery-col and .pdp-info on mobile so the
   gallery and the buy column become one flow and `order` can interleave them.
   Nothing here applies above 767px.

   The block that answers those thumbnail taps is .pdp-cta-block -- Stripe and
   Amazon side by side. It used to sit below the bundle options and the shipping
   line, so the Amazon button was a scroll away; the single-button .pdp-inline-cta
   held the slot instead. They are swapped now: the pair goes first. */
@media (max-width: 767px) {
  /* align-items:start is right for the two-column desktop layout -- it stops the
     buy column stretching to the gallery's height. Once the grid becomes a
     COLUMN flexbox that same value applies to the horizontal axis instead, so
     every block sized to its own text and the page came out ragged: the buy box
     was 340px on /shop.html and 378px on /es/shop.html purely because Spanish
     copy is longer, and #pdpGalCap grew past the column instead of ellipsing.
     Stretch is what the single-column layout wants. */
  .pdp-grid { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .pdp-gallery-col, .pdp-info { display: contents; }

  #pdpMainMedia       { order: 1; }
  #pdpGalCap          { order: 2; }
  #pdpHeadline        { order: 3; }
  .pdp-price-row      { order: 4; }
  #thumbStrip         { order: 5; }
  /* The real CTA pair takes the slot straight under the thumbnails, so Amazon is
     reachable without scrolling past the bundle options; the single-button
     inline CTA drops to where the pair used to sit. */
  .pdp-cta-block      { order: 6; }
  #buyBox             { order: 7; }
  #pdpShipEta         { order: 8; }   /* was between price and quantity, pushing the whole offer down a screen */
  #bundle-color-note  { order: 9; }
  .pdp-inline-cta     { order: 10; }
  .pdp-trust-badges   { order: 11; }
  .pdp-features       { order: 12; }
  .pdp-review-snippet { order: 13; }
  .ptabs              { order: 14; }

  /* ~45vh cap on the hero. A fixed height rather than max-height+aspect-ratio:
     the box is then exactly the same size before and after the image decodes,
     so this costs zero CLS. svh where it exists — vh is the *large* viewport on
     iOS, so 45vh is well over 45% of what the visitor can actually see while
     the browser chrome is up. */
  #pdpMainMedia { height: 45vh; max-height: 45vh; aspect-ratio: auto; }

  /* The nav already carries the Cadenza wordmark ~20px above this one. On a
     phone the duplicate costs 44px of the first screen and says nothing. */
  .pdp-brand { display: none; }

  /* Pairs that read as one unit, tightened against the 14px flow gap. */
  #pdpGalCap     { margin: -4px 0 0; }
  .pdp-price-row { margin-top: -6px; }

  /* One line, always. This works against the compression above, so it is
     clipped rather than allowed to wrap, and its height is reserved. */
  #pdpGalCap {
    display: block; font-size: 13px; line-height: 1.35; color: #555;
    min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Second bite at the same checkout, under the offer rather than above it.
     One row, 44px tall. */
  .pdp-inline-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent); color: #fff; text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
    padding: 12px 18px; border-radius: 10px; box-sizing: border-box; min-height: 44px;
  }
  .pdp-inline-cta svg { flex-shrink: 0; }

  /* ── Sticky buy bar ──────────────────────────────────────────────────────
     visibility:hidden rather than display:none for the hidden state: it keeps
     the bar out of the tab order and the accessibility tree while still
     allowing the slide, so "focusable only while on screen" needs no JS. */
  #pdpStickyBar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: #0d1b2e; border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -4px 24px rgba(0,0,0,.3);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    visibility: hidden; transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s .28s;
  }
  #pdpStickyBar.on {
    visibility: visible; transform: translateY(0);
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }
  #pdpStickyInner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #pdpStickyMeta  { display: flex; flex-direction: column; min-width: 0; }
  #pdpStickyPrice { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
  #pdpStickyLabel { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.62); line-height: 1.2; margin-top: 3px;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #stickyBuyBtn {
    flex: 0 0 auto; background: var(--accent); color: #fff; text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 900;
    letter-spacing: .5px; padding: 12px 26px; border-radius: 50px; white-space: nowrap;
  }
  #pdpStickyBar a:focus-visible, .pdp-inline-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

  /* Clear the bar so it never covers the last row of the footer. */
  footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* One sticky CTA per screen. The site-wide bar (js/sticky-bar.js) only
     scrolls to the buy box; this page's own bar checks out. Desktop keeps the
     site-wide one — it is untouched above 767px. */
  #st-sticky { display: none !important; }
}

@supports (height: 45svh) {
  @media (max-width: 767px) { #pdpMainMedia { height: 45svh; max-height: 45svh; } }
}

/* Below ~340px the two CTAs can no longer hold their labels on one line, so
   stack them again rather than let "Buy Now — $19.99" wrap. */
@media (max-width: 340px) {
  .pdp-cta-row { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .pdp-section { padding: 16px 12px 40px; }
  .pdp-title { font-size: 24px; }
  .pdp-price { font-size: 26px; }
  .bundle-qty { font-size: 11px; }
  .st-thumb { flex: 0 0 66px; width: 66px; height: 66px; }
  .use-case-grid { grid-template-columns: 1fr !important; }
}