/* ==========================================================================
   OVALY — SHARED STYLESHEET
   index.html, category.html, product.html, app.js, size-guide.png and this
   file must all sit in the SAME folder.
   ========================================================================== */

/* ==========================================================================
   1. THEME — EDIT COLOURS, FONT, SIZES HERE
   ========================================================================== */
:root{
  --brand:        #92C1E9;
  --brand-tint:   #DCEBF8;
  --on-brand:     #123A5C;   /* text ON the blue. Set to #fff for the reference look */
  --accent:       #F2704E;
  --accent-dark:  #DD5B39;
  --sale:         #E8542F;
  --save:         #1CAE4C;
  --ink:          #333F48;
  --ink-strong:   #1B252C;
  --muted:        #6B7A83;
  --card:         #F1F2F3;
  --line:         #E6E9EB;
  --star:         #FFD429;
  --star-dim:     #C9CFD3;

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --cat-ratio:  1 / 1;
  --prod-ratio: 1 / 1;

  --nav-h:      72px;
  --nav-h-sm:   68px;
  --logo-h:     34px;
  --logo-h-sm:  32px;

  --gutter:     24px;        /* page side margin, desktop */
  --gutter-sm:  20px;        /* page side margin, mobile */

  --lb-zoom:    450%;        /* how hard the magnifier zooms. 300% = softer, 500% = harder */

  --max: 1400px;
  --hero-max-h: 480px;   /* desktop hero cap — matches a 2400x800 image on a 1440px screen */
  --radius: 10px;
}

/* ==========================================================================
   2. BASE
   --------------------------------------------------------------------------
   .wrap sets the left/right page margin. Any class used ALONGSIDE .wrap
   (.crumb, .pdp, .cpage-head) must set padding-top / padding-bottom
   SEPARATELY — a `padding: 20px 0` shorthand there wipes out the side
   margin, because both selectors have the same specificity.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit;padding:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.section{padding:56px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.section-head h2{margin:0;font-size:clamp(22px,3vw,32px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.section-title-c{margin:0 0 26px;text-align:center;font-size:clamp(23px,3vw,32px);font-weight:700;letter-spacing:-.01em;color:var(--ink)}

/* ==========================================================================
   3. ANNOUNCEMENT BAR + NAV  (sticky — hides on scroll down, shows on scroll up)
   ========================================================================== */
.announce{background:var(--brand);color:#fff;text-align:center;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:0 16px;height:44px;display:flex;align-items:center;justify-content:center}
.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:transform .25s ease}
.nav.nav--hidden{transform:translateY(-100%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--nav-h)}

.nav-burger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto}
.nav-burger svg{width:24px;height:24px}
.nav-burger .ico-close{display:none}
.nav-burger.is-open .ico-open{display:none}
.nav-burger.is-open .ico-close{display:block}

.logo{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.logo img{height:var(--logo-h);width:auto;max-width:170px;object-fit:contain;object-position:center}

.nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:#fff;padding:2px var(--gutter) 12px;border-bottom:1px solid var(--line);box-shadow:0 14px 22px rgba(0,0,0,.07)}
.nav-links.is-open{display:flex}
.nav-links a{width:100%;font-size:16px;font-weight:600;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--line);transition:color .15s ease}
.nav-links a:last-child{border-bottom:0}
.nav-links a[aria-current="page"]{color:var(--ink-strong);font-weight:700}

.nav-cart{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--ink)}
.nav-cart svg{width:23px;height:23px}
.nav-cart:hover{color:var(--brand)}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
.footer{margin-top:40px}
.footer-clouds{display:block;width:100%;height:clamp(34px,5vw,72px);margin-bottom:-1px}
.footer-body{background:var(--brand);color:var(--on-brand);padding:14px 0 46px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.footer h3{margin:0 0 14px;font-size:clamp(21px,2.4vw,26px);font-weight:700;letter-spacing:-.01em}
.footer p{margin:0 0 12px;font-size:15px;max-width:44ch;opacity:.92}
.footer-tagline{font-weight:600;opacity:1}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-logo{display:block;height:62px;width:auto;max-width:230px;object-fit:contain;object-position:left;margin:0 0 16px}
.footer-links a,.footer-links button{font-family:inherit;font-size:15px;color:inherit;opacity:.92;text-align:left;cursor:pointer;transition:opacity .15s ease}
.footer-links a:hover,.footer-links button:hover{opacity:1;text-decoration:underline}
.footer-wave{display:none}
.footer-legal{margin-top:36px;padding-top:20px;border-top:1px solid rgba(18,58,92,.18);font-size:13px;opacity:.8}

/* ==========================================================================
   5. HOME — HERO
   ========================================================================== */
.hero{display:block}
/* Full banner always visible — never cropped. The height comes from the image's
   own aspect ratio, so a WIDE image = a short banner. See README for sizes. */
/* Never cropped. max-width keeps it inside the page; --hero-max-h caps the
   height on desktop so a tall/square image can't become a giant banner. The
   image shrinks to fit and centres — nothing is cut off. Tune the one var. */
/* Full-bleed and NEVER cropped: the image spans the full width and its height
   follows its own aspect ratio. A wide image = a short banner. To pin the hero
   to one fixed shape instead, set an aspect-ratio on .hero and use
   object-fit:contain — but the ratio must match the image or you get bars. */
.hero img{display:block;width:100%;height:auto;margin:0 auto}

/* ==========================================================================
   6. HOME — REVIEWS CAROUSEL
   ========================================================================== */
.rev{position:relative}
.rev-track{position:relative;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.rev-track::-webkit-scrollbar{display:none}
.rev-track.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.rev-card{flex:0 0 calc((100% - 44px) / 3);scroll-snap-align:start;background:var(--card);border-radius:var(--radius);padding:26px 24px;display:flex;gap:18px;align-items:flex-start}
.rev-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:19px}
.rev-body{min-width:0}
.rev-stars{font-size:15px}
.rev-quote{margin:9px 0 12px;font-size:15px;font-style:italic;color:var(--ink);line-height:1.5}
.rev-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
.rev-name{font-weight:600;color:var(--muted)}
.rev-verified{color:#2E7D32;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.rev-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.rev-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s ease,opacity .15s ease}
.rev-arrow:hover{background:var(--card)}
.rev-arrow[disabled]{opacity:.3;cursor:default}
.rev-arrow svg{width:15px;height:15px}
.rev-dots{display:flex;gap:9px}
.rev-dot{width:34px;height:4px;border-radius:2px;background:#C9CFD3;transition:background .15s ease}
.rev-dot.is-active{background:var(--accent)}

/* ==========================================================================
   7. HOME — SHOP BY CATEGORY
   ========================================================================== */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.cat-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden}
.cat-card img{width:100%;aspect-ratio:var(--cat-ratio);object-fit:cover;transition:transform .4s ease}
.cat-card:hover img{transform:scale(1.03)}
.cat-btn{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:13px 30px;border-radius:999px;white-space:nowrap;transition:background .15s ease}
.cat-card:hover .cat-btn{background:var(--accent-dark)}

/* ==========================================================================
   8. PRODUCT CARDS
   ========================================================================== */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod-grid--3{grid-template-columns:repeat(3,1fr);gap:30px 24px}
.prod-card{display:block}
.prod-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card)}
.prod-media img{width:100%;aspect-ratio:var(--prod-ratio);object-fit:cover;transition:transform .4s ease}
.prod-card:hover .prod-media img{transform:scale(1.03)}
/* tag shape/size follows the reference: rounded rectangle, bottom-left */
/* Corner product tags removed site-wide — see cardHTML() in store.js. */
.prod-name{margin:14px 0 0;font-size:16px;font-weight:700;color:var(--ink-strong)}
.prod-desc{margin:5px 0 0;font-size:14px;color:var(--muted)}
.prod-price{margin:10px 0 0;font-size:16px;font-weight:700;color:var(--ink)}
.prod-rating{display:flex;align-items:center;gap:7px;margin:7px 0 0;font-size:13px;color:var(--muted)}
.prod-rating .stars{font-size:14px}
.prod-pricing{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:10px 0 0;font-size:14px}
.price-was{color:var(--muted);text-decoration:line-through;font-weight:500}
.price-now{color:var(--sale);font-weight:700}
.price-sale{color:var(--sale);font-weight:600}
.price-save{background:var(--save);color:#fff;font-weight:700;font-size:13.5px;padding:5px 12px;border-radius:999px;white-space:nowrap}

/* ==========================================================================
   9. CATEGORY PAGE HEADER + BREADCRUMB
   ========================================================================== */
.cpage-head{padding-top:38px;padding-bottom:6px}
.cpage-head h1{margin:0;font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}
.cpage-head p{margin:10px 0 0;font-size:15px;color:var(--muted);max-width:60ch}

.crumb{padding-top:18px;padding-bottom:6px;font-size:13.5px;color:var(--muted)}
.crumb a{color:var(--accent)}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 5px}

/* ==========================================================================
   10. PRODUCT PAGE — GALLERY
   ========================================================================== */
.pdp{display:grid;grid-template-columns:1.8fr 1fr;gap:48px;padding-top:14px;padding-bottom:44px;align-items:start}
/* Grid items default to min-width:auto, so any wide content inside the info
   column can steal width from the gallery column (tiny product image) or push
   the page sideways on mobile. Pinning the tracks to 0 minimum stops that.
   No visual effect when nothing is overflowing. */
.pdp>*{min-width:0}
.gal-track,.pair-track{min-width:0}

.gallery{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;position:sticky;top:calc(var(--nav-h) + 16px);align-self:start}
.gal-thumbs{display:flex;flex-direction:column;gap:12px}
.gal-thumb{border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--card);line-height:0;transition:border-color .15s ease}
.gal-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gal-thumb.is-active{border-color:var(--ink-strong)}
.gal-track{position:relative;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;background:var(--card);border-radius:var(--radius);overflow:hidden}
.gal-slide img{width:100%;aspect-ratio:1/1;object-fit:cover;cursor:zoom-in}
.gal-zoom{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-strong);box-shadow:0 1px 5px rgba(0,0,0,.13);transition:background .15s ease}
.gal-zoom:hover{background:#fff}
.gal-zoom svg{width:18px;height:18px}

/* ==========================================================================
   11. PRODUCT PAGE — INFO COLUMN
   ========================================================================== */
.pdp-title{margin:0;font-size:clamp(21px,2vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.18;color:var(--ink-strong)}
.pdp-sub{margin:6px 0 0;font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pdp-rating{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:15px;color:var(--ink)}
.pdp-rating .stars{font-size:19px}
.pdp-rating a:hover{text-decoration:underline}
.pdp-price{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:18px 0 0}
.pdp-price .price-was{font-size:15px}
.pdp-price .price-now{font-size:22px;line-height:1.1}
.pdp-price .price-save{text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;padding:5px 10px}

.size-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:30px 0 13px}
.size-head strong{font-size:15px;font-weight:600}
.size-head a,.size-head button{font-size:14px;color:var(--muted);text-decoration:underline}
.size-head button:hover{color:var(--ink-strong)}
.size-opts{display:flex;flex-wrap:wrap;gap:10px}
.size-opts input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.size-opts label{display:inline-flex;align-items:center;justify-content:center;min-width:82px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .15s ease}
.size-opts label:hover{border-color:var(--ink)}
.size-opts input:checked + label{background:var(--ink-strong);border-color:var(--ink-strong);color:#fff}
.size-opts input:focus-visible + label{outline:2px solid var(--ink);outline-offset:3px}

.btn-cart{display:flex;align-items:center;justify-content:center;width:100%;min-height:55px;margin:24px 0 0;background:#f87c56;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.22px;line-height:1.2;text-transform:uppercase;border-radius:29.7px;transition:.1s linear}
.btn-cart:hover{background:#e2683f}
.btn-cart:active{transform:scale(.985)}

.trust{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:15px}
.trust li{display:flex;align-items:center;gap:13px;font-size:15px;color:var(--ink)}
.trust svg{width:23px;height:23px;flex:0 0 auto;color:var(--ink-strong)}

.acc{border-top:1px solid var(--line);margin-top:30px}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 2px;font-size:16.5px;font-weight:600;color:var(--ink-strong);cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{width:16px;height:16px;flex:0 0 auto;transition:transform .2s ease;color:var(--ink)}
.acc details[open] summary svg{transform:rotate(180deg)}
.acc-body{padding:4px 2px 24px;font-size:15px;color:var(--ink);line-height:1.7}
.acc-body p{margin:0 0 10px}
.acc-body p:last-child{margin:0}

.acc-comp{margin:14px 0 0;font-size:14.5px;font-weight:600;color:var(--ink-strong)}
.acc-body ul{margin:0;padding-left:18px}
.acc-body li{margin-bottom:8px}
.acc-body li:last-child{margin-bottom:0}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 12px;margin:8px 0 26px}
.feat{text-align:center}
.feat svg,.feat img{display:block;width:54px;height:54px;margin:0 auto 10px;object-fit:contain;color:var(--ink-strong)}
.feat span{display:block;font-size:15px;font-weight:600;line-height:1.35}
/* pajamas run 6 icons with two-line labels, so the icons sit a size down */
.feat-grid--sm .feat svg,.feat-grid--sm .feat img{width:46px;height:46px}

/* ==========================================================================
   12. IMAGE LIGHTBOX
   Dark scrim over the dimmed page. Dark top bar: "1 / 4" on the left,
   light panel with magnifier + close on the right. Round arrows at the
   image edges. Zoom strength = --lb-zoom in section 1.
   ========================================================================== */
.lb{position:fixed;inset:0;z-index:100;background:rgba(18,20,23,.8);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.lb.is-open{opacity:1;visibility:visible}
.lb[hidden]{display:none}

.lb-bar{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;background:rgba(16,18,21,.5);z-index:3;padding-left:18px}
.lb-count{color:#fff;font-size:13px;font-weight:500;letter-spacing:.03em}
.lb-actions{display:flex;align-items:center;gap:2px;height:100%;padding:0 8px;background:rgba(244,245,246,.93)}
.lb-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#2A2F34;transition:background .15s ease}
.lb-btn:hover{background:rgba(0,0,0,.08)}
.lb-btn svg{width:21px;height:21px}

.lb-track{position:relative;width:100%;max-width:900px;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.lb-track::-webkit-scrollbar{display:none}
.lb-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-slide img{width:auto;height:auto;max-width:100%;max-height:78vh;cursor:zoom-in;-webkit-user-drag:none;user-select:none}

.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(56,61,66,.86);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease}
.lb-arrow:hover{background:rgba(56,61,66,1)}
.lb-arrow svg{width:19px;height:19px}
.lb-prev{left:calc(var(--lb-edge, 14px) + 10px)}
.lb-next{right:calc(var(--lb-edge, 14px) + 10px)}

.lb.is-zoomed .lb-track{scroll-snap-type:none;height:78vh}
/* The slide needs a DEFINITE height to become a scroll container on the Y axis.
   Without it the slide just grows to fit the zoomed image, so there is nothing
   to scroll and panning only works horizontally. */
.lb.is-zoomed .lb-slide{overflow:auto;overscroll-behavior:contain;padding:0;cursor:grab;justify-content:flex-start;align-items:flex-start;height:78vh;touch-action:pan-x pan-y}
.lb.is-zoomed .lb-slide img{width:var(--lb-zoom);max-width:none;max-height:none;cursor:grab}
.lb.is-zoomed .lb-arrow{display:none}
.lb.is-panning .lb-slide,.lb.is-panning .lb-slide img{cursor:grabbing}

/* ==========================================================================
   13. SIZE GUIDE MODAL
   ========================================================================== */
.sg{position:fixed;inset:0;z-index:110;background:rgba(18,20,23,.5);display:flex;align-items:center;justify-content:center;padding:28px 18px;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.sg.is-open{opacity:1;visibility:visible}
.sg .sg-panel{transition:transform .22s ease}
.sg:not(.is-open) .sg-panel{transform:translateY(10px)}
.sg[hidden]{display:none}
.sg-panel{position:relative;background:#fff;border-radius:5px;width:100%;max-width:560px;max-height:100%;overflow-y:auto;padding:30px 30px 36px;-webkit-overflow-scrolling:touch}
.sg-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-strong);transition:background .15s ease}
.sg-close:hover{background:var(--card)}
.sg-close svg{width:22px;height:22px}
.sg-panel h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}

.sg-table{width:100%;border-collapse:collapse;margin:20px 0 0;text-align:center}
.sg-table th,.sg-table td{border:1px solid #D8DCDF}
.sg-cat{padding:15px 8px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-strong)}
.sg-col{padding:11px 5px;font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-strong);line-height:1.25}
.sg-table tbody th{padding:20px 6px 20px 16px;text-align:left;font-size:13.5px;font-weight:700;color:var(--ink-strong);white-space:nowrap}
.sg-table tbody td{padding:20px 6px;font-size:16px;color:#4A5A6A}

.sg-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:16px 0 0}
.sg-unit{display:inline-flex;align-items:center;height:38px;padding:0 20px;border:1px solid #D8DCDF;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink-strong);background:var(--ink-strong);color:#fff}
.sg-how{font-size:14.5px;color:var(--ink);text-decoration:underline}
.sg-how:hover{color:var(--ink-strong)}

.sg-panel h3{margin:34px 0 14px;font-size:16px;font-weight:700;color:var(--ink-strong)}
.sg-panel h4{margin:26px 0 12px;font-size:15px;font-weight:700;font-style:italic;color:var(--ink-strong)}
.sg-panel p{margin:0 0 14px;font-size:15px;line-height:1.65;color:var(--ink)}
.sg-panel p:last-of-type{margin-bottom:0}
.sg-panel p b{color:var(--ink-strong);font-weight:700}
.sg-fig{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.sg-fig img{width:100%;max-width:420px;margin:0 auto;height:auto}

/* ==========================================================================
   14. PRODUCT PAGE — BAMBOO BLOCK
   ========================================================================== */
.bamboo{background:linear-gradient(180deg,var(--brand) 0%,var(--brand) 55%,#C9E0F4 78%,#fff 100%);border-radius:28px 28px 0 0;padding:90px 0 66px;margin-top:44px}
.bamboo h2{margin:0 0 36px;text-align:center;color:#fff;font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.22;letter-spacing:-.015em}
.bamboo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1180px;margin:0 auto}
.bamboo-card{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.bamboo-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bamboo-card-body{padding:18px 20px 24px}
.bamboo-card h3{margin:0 0 9px;font-size:18px;font-weight:700;color:var(--ink-strong);letter-spacing:-.01em;line-height:1.25}
.bamboo-card p{margin:0;font-size:14.5px;color:var(--ink);line-height:1.55}

/* ==========================================================================
   15. PRODUCT PAGE — COMPARISON TABLE
   ========================================================================== */
.cmp-wrap{max-width:1180px;margin:0 auto;border-radius:12px;overflow:hidden}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;text-align:center;font-size:16px}
.cmp th,.cmp td{padding:18px 14px;vertical-align:middle}
.cmp thead th{background:#A6A6A6;color:#fff;font-size:16.5px;font-weight:700;line-height:1.3}
.cmp thead th.cmp-us{background:var(--brand)}
.cmp tbody th{background:#FAFAFA;font-size:17.5px;font-weight:700;color:#1B2A5E;text-align:center}
.cmp tbody td{background:#FAFAFA;color:var(--ink)}
.cmp tbody tr:nth-child(even) th,.cmp tbody tr:nth-child(even) td{background:#EAEAEA}
.cmp tbody tr:nth-child(even) td.cmp-us{background:var(--brand-tint)}
.cmp tbody td p{margin:7px 0 0;line-height:1.4}
.cmp-stars{font-size:19px}
.cmp-stars .star{fill:#1B2A5E}
.cmp-stars.is-dim .star{fill:var(--star-dim)}
.cmp-note{max-width:1180px;margin:14px auto 0;font-size:12px;color:var(--muted);text-align:center}
.faq-note{max-width:640px;margin:26px auto 0;font-size:12px;line-height:1.6;color:var(--muted);text-align:center;font-style:italic}

/* ==========================================================================
   16. PRODUCT PAGE — SPLIT
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.split h2{margin:0 0 22px;font-size:clamp(20px,4.2vw,46px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink-strong)}
.split p{margin:0;font-size:16px;color:var(--ink);line-height:1.6;max-width:46ch}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}

/* ==========================================================================
   17. PRODUCT PAGE — FAQS
   ========================================================================== */
.faq{max-width:1180px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;font-size:16px;font-weight:600;color:var(--ink-strong);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:17px;height:17px;flex:0 0 auto;transition:transform .2s ease;color:var(--ink)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq-body{padding:0 4px 24px;font-size:15px;color:var(--ink);line-height:1.65;max-width:80ch}
.faq-body p{margin:0 0 10px}
.faq-body p:last-child{margin:0}

/* ==========================================================================
   18. PRODUCT PAGE — REVIEWS
   ========================================================================== */
#reviews{padding-top:26px;padding-bottom:26px}
.rvw{max-width:1180px;margin:0 auto}
.rvw-top{display:grid;grid-template-columns:minmax(0,430px) 1fr;align-items:start;justify-items:start;text-align:left;gap:22px 56px;margin:0}
.rvw-score{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.rvw-score b{font-size:26px;font-weight:600;color:var(--ink-strong);line-height:1}
.rvw-score .stars{font-size:23px}
.rvw-score span{font-size:14px;color:var(--muted)}
.rvw-bars{margin:14px 0 0;display:grid;gap:10px;width:100%;max-width:420px}
.rb-row{display:grid;grid-template-columns:32px 1fr 24px;align-items:center;gap:11px;font-size:13px;color:var(--ink)}
.rb-label i{font-style:normal;display:inline-flex}
.rb-bar{display:block;height:7px;border-radius:4px;background:#E3EBF2;overflow:hidden}
.rb-bar i{display:block;height:100%;background:#7BA4CC;border-radius:4px}
.rb-num{text-align:right;color:var(--ink)}
.rvw-rec{margin:0;font-size:17px;color:var(--ink)}
.rvw-rec b{display:block;margin-bottom:2px;font-size:22px;font-weight:700;color:var(--ink-strong)}

.rvw-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:36px 0 4px;border-bottom:1px solid var(--line)}
.rvw-tab{padding:0 4px 12px;font-size:15px;font-weight:500;color:var(--ink);border-bottom:2px solid var(--ink-strong);margin-bottom:-1px}
.btn-write{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 30px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;margin-bottom:14px;transition:background .15s ease}
.btn-write:hover{background:var(--accent-dark)}
.btn-write svg{width:15px;height:15px}

.rvw-item{padding:26px 0;border-bottom:1px solid var(--line)}
.rvw-item[hidden]{display:none}
/* NOTE: .rvw-head / .rvw-who / .rvw-av are defined once, further down, next to
   the other rules for markup rendered from products.json. Duplicating them here
   made the two rule sets MERGE (align-items:center from this copy + the live
   flex-direction:column), which centred the name and "Verified Buyer". */
.rvw-vb{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink)}
.rvw-vb svg{width:15px;height:15px}
.rvw-date{font-size:13px;color:var(--muted);white-space:nowrap}
.rvw-item .stars{display:flex;margin:16px 0 10px;font-size:21px}
.rvw-title{margin:0 0 9px;font-size:16px;font-weight:700;color:var(--ink-strong)}
.rvw-text{margin:0;font-size:15px;color:var(--ink);line-height:1.7}
.rvw-text p{margin:0 0 6px}
.rvw-text p:last-child{margin:0}

.btn-more{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin:26px 0 0;background:var(--accent);color:#fff;font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;transition:background .15s ease}
.btn-more:hover{background:var(--accent-dark)}
.btn-more[hidden]{display:none}

/* ==========================================================================
   PRODUCT PAGE — PAIR IT WITH SLIDER
   Reuses .prod-card / .prod-media / pricing classes. Cards scroll (swipe or
   arrows) when they overflow. Arrow vertical position (top:38%) roughly
   centres on the image — nudge it if your image ratio changes.
   ========================================================================== */
/* "Pair it with" lives inside the product info column, so it is a compact
   2-up slider on desktop rather than a full-width one. */
.pair{margin:26px 0 0}
.pair-title{margin:0 0 14px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink-strong)}
.pair-wrap{position:relative}
.pair-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.pair-track::-webkit-scrollbar{display:none}
.pair-card{flex:0 0 calc((100% - 14px) / 2);scroll-snap-align:start}
/* smaller type inside the narrow column */
.pair-card .prod-name{font-size:14px;margin-top:9px}
.pair-card .prod-desc{font-size:12px}
.pair-card .prod-rating{font-size:11.5px}
.pair-card .price-now,.pair-card .price-was{font-size:13px}
.pair-card .price-sale{display:none}          /* "Sale" chip is dropped here */
.pair-card .price-save{font-size:11.5px;padding:3px 9px}
/* slightly larger Save chip on the category / shop listing cards */
.prod-grid .price-save,.prod-grid--3 .price-save{font-size:14.5px;padding:6px 13px}
.pair-card .card-add{right:8px;bottom:8px;width:30px;height:30px}
.pair-card .card-add svg{width:16px;height:16px}

.pair-arrow{position:absolute;top:38%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.1);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:opacity .15s ease,background .15s ease}
.pair-arrow:hover{background:var(--card)}
.pair-arrow[disabled]{opacity:0;pointer-events:none}
.pair-arrow svg{width:16px;height:16px}
.pair-prev{left:-6px}
.pair-next{right:-6px}
.pair-arrow{width:32px;height:32px}
@media (max-width:768px){
  .pair{margin-top:14px}          /* less space above "Pair it with" on mobile */
  .pair-title{font-size:18px;margin-bottom:12px}
  .pair-track{gap:18px}
  .pair-card{flex-basis:60%}
  .pair-arrow{display:none}
  /* full width on mobile, so restore normal card type */
  .pair-card .prod-name{font-size:15px}
  .pair-card .prod-desc{font-size:13px}
  .pair-card .price-now,.pair-card .price-was{font-size:14.5px}
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .prod-grid--3{grid-template-columns:repeat(2,1fr)}
  .rev-card{flex-basis:calc((100% - 22px) / 2)}
  .pdp{grid-template-columns:1fr;gap:30px}
  .gallery{position:static}
  .bamboo-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:26px}
  .split .split-copy{order:2}
  .split .split-img{order:1}
  .rvw-top{grid-template-columns:1fr;gap:24px;justify-items:start;text-align:left}
}

@media (max-width:768px){
  .wrap{padding-left:var(--gutter-sm);padding-right:var(--gutter-sm)}
  .section{padding:36px 0}
  .section-head{margin-bottom:16px}
  .section-title-c{margin-bottom:18px}

  .announce{font-size:13px;height:38px}
  .nav-inner{height:var(--nav-h-sm);gap:6px}
  .nav-burger{display:inline-flex;width:46px;height:46px}
  .nav-burger svg{width:27px;height:27px}
  .logo{flex:1 1 auto;justify-content:center}
  .logo img{height:var(--logo-h-sm);max-width:150px;object-position:center}
  .nav-cart{width:46px;height:46px}
  .nav-cart svg{width:27px;height:27px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:#fff;padding:2px var(--gutter-sm) 12px;border-bottom:1px solid var(--line);box-shadow:0 14px 22px rgba(0,0,0,.07)}
  .nav-links.is-open{display:flex}
  .nav-links a{width:100%;font-size:16px;padding:15px 0;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:var(--line)}
  .nav-links a[aria-current="page"]{color:var(--ink-strong);font-weight:700}

  .rev-track{gap:14px}
  .rev-card{flex-basis:100%;padding:22px 20px;gap:14px}
  .rev-avatar{width:42px;height:42px;font-size:17px}
  .rev-quote{font-size:14.5px}
  .rev-controls{margin-top:20px}
  .rev-arrow{display:none}

  .cat-grid{grid-template-columns:1fr;gap:16px}
  .cat-btn{bottom:20px;padding:12px 26px;font-size:13px}

  .prod-grid,.prod-grid--3{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .prod-name{font-size:15px}
  .prod-desc{font-size:13px}
  .prod-pricing{gap:7px;font-size:13px}

  /* Category + Shop listing on mobile: portrait media (203 x 327.41) and a
     compact ~94px text block, so the whole card lands at 203 x 421.31 on a
     ~440px-wide viewport. Width is fluid, not fixed at 203px, or two columns
     would overflow a 375px phone. Home page keeps the square 1:1 media. */
  .prod-grid--3{--prod-ratio:203 / 327.41}
  .prod-grid--3 .prod-name{margin-top:11px;font-size:14.5px;line-height:1.3}
  .prod-grid--3 .prod-desc{margin-top:3px;font-size:12.5px;line-height:1.3}
  .prod-grid--3 .prod-rating{margin-top:4px}
  .prod-grid--3 .prod-pricing{margin-top:5px}
  .price-save{font-size:12.5px;padding:4px 9px}
  .cpage-head{padding-top:26px;padding-bottom:4px}

  .crumb{padding-top:14px;padding-bottom:4px;font-size:12.5px}
  .pdp{padding-top:6px;padding-bottom:34px;gap:26px}
  .gallery{grid-template-columns:minmax(0,1fr);gap:0}
  .gal-thumbs{display:none}
  .gal-track{gap:16px}
  .gal-slide{flex-basis:90%}
  .gal-zoom{top:12px;left:12px;width:34px;height:34px}
  .gal-zoom svg{width:16px;height:16px}

  .pdp-title{font-size:24px}
  .pdp-sub{font-size:15px;margin-top:5px}
  .pdp-rating{margin-top:14px;font-size:15px}
  .pdp-price{margin-top:16px;gap:11px}
  .pdp-price .price-now{font-size:21px}
  .size-head{margin:26px 0 12px}
  .size-opts label{min-width:76px;height:40px;padding:0 10px;font-size:14px}
  .btn-cart{min-height:55px;margin-top:22px}

  .trust{gap:15px;margin-top:24px}
  .trust li{font-size:14.5px}
  .acc summary{font-size:16px;padding:18px 2px}
  .acc-body{font-size:14.5px}
  .feat-grid{gap:18px 6px;margin-bottom:22px}
  .feat svg,.feat img{width:54px;height:54px;margin-bottom:8px}
  .feat-grid--sm .feat svg,.feat-grid--sm .feat img{width:44px;height:44px}
  .feat span{font-size:15px}

  .lb-slide img{max-height:66vh}
  .lb.is-zoomed .lb-track,.lb.is-zoomed .lb-slide{height:66vh}
  .lb-arrow{width:40px;height:40px}
  .lb-prev{left:4px}
  .lb-next{right:4px}
  .lb-bar{padding-left:14px}

  .sg{padding:16px 12px}
  .sg-panel{padding:26px 20px 30px;border-radius:4px}
  .sg-panel h2{font-size:21px}
  .sg-table tbody th{padding:16px 4px 16px 12px;font-size:12.5px}
  .sg-table tbody td{padding:16px 4px;font-size:15px}
  .sg-col{font-size:8.5px;padding:9px 3px}
  .sg-cat{font-size:12px;padding:13px 6px}
  .sg-panel p{font-size:14.5px}

  .bamboo{border-radius:20px 20px 0 0;padding:64px 0 50px;margin-top:34px}
  .bamboo h2{margin-bottom:26px;font-size:clamp(24px,6.4vw,32px)}
  .bamboo-grid{gap:16px 14px}
  .bamboo-card-body{padding:16px 16px 20px}
  .bamboo-card h3{font-size:17px;margin-bottom:8px}
  .bamboo-card p{font-size:13.5px;line-height:1.5}

  .cmp{font-size:12.5px}
  .cmp th,.cmp td{padding:13px 7px}
  .cmp thead th{font-size:13px}
  .cmp tbody th{font-size:14px}
  .cmp tbody td p{margin-top:5px;line-height:1.35}
  .cmp-stars{font-size:15px;letter-spacing:1px}

  .split img{aspect-ratio:1/1}
  .split h2{margin-bottom:16px}
  .split p{font-size:15px;line-height:1.55}

  .faq summary{font-size:15px;padding:19px 2px;gap:14px}
  .faq-body{font-size:14.5px;padding-bottom:20px}

  .rvw-top{justify-items:center;text-align:center;gap:34px}
  .rvw-score{justify-content:center;gap:10px}
  .rvw-score b{font-size:21px}
  .rvw-score .stars{font-size:20px}
  .rvw-score span{font-size:13px}
  .rvw-bars{width:100%;max-width:360px;margin-top:20px}
  .rvw-rec{font-size:16px}
  .rvw-rec b{display:block;margin-bottom:2px;font-size:21px}
  .rvw-bar{flex-direction:column;align-items:stretch;gap:0;margin:28px 0 0;border-bottom:0}
  .rvw-tab{align-self:flex-start;border-bottom:2px solid var(--ink-strong);padding-bottom:11px}
  .btn-write{margin:18px 0 0;width:100%;height:50px;font-size:16px}
  .rvw-item{padding:24px 0}
  .rvw-item .stars{margin:14px 0 9px;font-size:19px}
  .rvw-text{line-height:1.75}

  /* Desktop hero (section 5) is full-width and uncropped, and mobile keeps the
     same behaviour: the full image width always shows, height follows the
     image's own aspect ratio. Nothing is cropped. */
  .hero img{width:100%;height:auto}

  .footer-body{padding:14px 0 40px;text-align:center}
  .footer-grid{grid-template-columns:1fr;gap:0}
  .footer-logo{height:34px;margin:0 auto 14px;object-position:center}
  .footer p{max-width:none;margin-left:auto;margin-right:auto}
  .footer h3{font-size:22px}
  .footer-wave{display:block;width:100%;height:14px;margin:26px auto 30px;color:rgba(255,255,255,.75);overflow:visible}
  .footer-links{justify-items:center}
  .footer-legal{margin-top:30px}
}

@media (max-width:400px){
  .bamboo-grid{grid-template-columns:1fr}
  .pdp-title{font-size:22px}
  .logo img{max-width:124px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* ==========================================================================
   STARS — real SVG, identical on every device.
   Size is driven by font-size on the parent, because the star is 1em.
   Icon: Font Awesome Free v7 (CC BY 4.0) — https://fontawesome.com
   ========================================================================== */
.star{width:1em;height:1em;flex:0 0 auto;fill:var(--star);display:inline-block;vertical-align:-.12em}
.star--off{fill:#dcdcdc}
.stars,.rev-stars,.cmp-stars{display:inline-flex;align-items:center;gap:2px;line-height:1;letter-spacing:normal}

/* ==========================================================================
   20. QUICK ADD ON PRODUCT CARDS
   The round "+" in the corner of every card. One size = adds straight to the
   bag. More than one size = the "+" reveals the size chips over the image.
   ========================================================================== */
.card-add{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-strong);box-shadow:0 1px 6px rgba(0,0,0,.16);cursor:pointer;transition:background .15s ease,color .15s ease}
.card-add:hover{background:var(--accent);color:#fff}
.card-add svg{width:20px;height:20px}

.card-sizes{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px;border-radius:8px;background:rgba(255,255,255,.97);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.card-sizes[hidden]{display:none}
.card-size{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-strong);cursor:pointer;transition:all .15s ease}
.card-size:hover{background:var(--ink-strong);border-color:var(--ink-strong);color:#fff}

.cat-empty{margin:0;padding:30px 0;font-size:15px;color:var(--muted)}
.cat-empty a{color:var(--accent);text-decoration:underline}

/* the count bubble on the nav cart icon */
.cart-badge{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.cart-badge[hidden]{display:none}

/* ==========================================================================
   21. CART DRAWER
   Slides in from the right over a dark scrim. Full screen on mobile.
   The markup is injected by store.js, so it is not in the HTML files.
   ========================================================================== */
.cart{position:fixed;inset:0;z-index:120;visibility:hidden;transition:visibility 0s linear .26s}
.cart[hidden]{display:none}
.cart.is-open{visibility:visible;transition-delay:0s}

.cart-scrim{position:absolute;inset:0;background:rgba(18,20,23,.55);opacity:0;transition:opacity .26s ease}
.cart.is-open .cart-scrim{opacity:1}

.cart-panel{position:absolute;top:0;right:0;height:100%;width:500px;max-width:100%;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .26s ease;box-shadow:-8px 0 26px rgba(0,0,0,.16)}
.cart.is-open .cart-panel{transform:none}

.cart-head{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:62px;padding:0 56px;border-bottom:1px solid var(--line)}
.cart-title{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink-strong)}
.cart-x{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-strong);transition:background .15s ease}
.cart-x:hover{background:var(--card)}
.cart-x svg{width:22px;height:22px}

.cart-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 20px 26px}
.cart-sec{display:flex;align-items:center;gap:9px;margin:0 0 34px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink-strong)}
/* more breathing room before the upsell section and its first row */
.cart-items + .cart-sec,.cart-empty + .cart-sec{margin-top:54px}
.cart-heart{display:inline-flex;color:#F261AE;transform:translateY(-1px)}
.cart-heart svg{width:25px;height:25px}

/* ---- lines already in the bag ---- */
.cart-items{display:grid;gap:22px}
.cart-item{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:start}
.cart-thumb{border-radius:0;overflow:hidden;background:var(--card)}
.cart-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cart-info{min-width:0}
.cart-name{display:block;font-size:17px;font-weight:700;line-height:1.25;color:var(--ink-strong)}
.cart-name:hover{text-decoration:underline}
.cart-sub,.cart-size{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.cart-controls{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.qty{display:inline-flex;align-items:center;height:34px;border:1px solid var(--line);border-radius:6px}
.qty button{width:32px;height:100%;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--ink)}
.qty button:hover{color:var(--ink-strong)}
.qty-n{min-width:26px;text-align:center;font-size:14px;font-weight:600;color:var(--ink-strong)}
.cart-del{width:32px;height:32px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:color .15s ease,background .15s ease}
.cart-del:hover{color:var(--sale);background:var(--card)}
.cart-del svg{width:19px;height:19px}
.cart-money{display:grid;gap:2px;text-align:right}
.cart-now{font-size:15px;font-weight:700;color:var(--ink-strong);white-space:nowrap}
.cart-was{font-size:13.5px;color:var(--muted);text-decoration:line-through;white-space:nowrap}

.cart-empty{padding:8px 0 4px}
.cart-empty p{margin:0 0 34px;font-size:15px;color:var(--muted)}
.cart-shop{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:999px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:background .15s ease}
.cart-shop:hover{background:var(--accent-dark)}

/* ---- "Complete Your Comfort Setup" upsell ---- */
.up-list{display:grid;gap:24px}
.up-item{display:grid;grid-template-columns:123px 1fr;gap:16px;align-items:center}
.up-main{display:flex;align-items:center;justify-content:space-between;gap:14px}
.up-thumb{position:relative;width:123px;height:123px;border-radius:0;overflow:hidden;background:var(--card)}
.up-thumb img{width:123px;height:123px;object-fit:cover}
.up-zoom{position:absolute;top:7px;left:7px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-strong);box-shadow:0 1px 5px rgba(0,0,0,.18);transition:background .15s ease}
.up-zoom:hover{background:#fff}
.up-zoom svg{width:16px;height:16px}
.up-info{min-width:0}
.up-name{display:block;font-size:16px;font-weight:500;letter-spacing:normal;line-height:normal;color:#111}
.up-name:hover{text-decoration:underline}
.up-sub{margin:2px 0 0;font-size:13.5px;font-weight:500;line-height:normal;color:var(--muted)}
.up-rating{display:flex;align-items:center;gap:5px;margin:3px 0 0;font-size:11px;color:var(--muted)}
.up-rating .stars{font-size:13px}
.up-price{display:flex;align-items:baseline;gap:8px;margin:3px 0 0}
/* ADD button — exact spec supplied */
.up-add{padding:10px 20px 6px;border:none;font-size:12px;margin:10px 0 5px;color:#000;background:#f87c56;width:auto;border-radius:33.6px;display:flex;min-height:33.6px;max-height:33.6px;align-items:center;justify-content:center;font-weight:700;letter-spacing:.04em;white-space:nowrap;transition:filter .15s ease}
.up-add:hover{filter:brightness(.94)}
.up-add:active{transform:scale(.97)}

/* ---- centered size modal (from the upsell ADD button) ---- */
.smodal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;transition:visibility 0s linear .22s}
.smodal[hidden]{display:none}
.smodal.is-open{visibility:visible;transition-delay:0s}
.smodal-scrim{position:absolute;inset:0;background:rgba(18,20,23,.55);opacity:0;transition:opacity .22s ease}
.smodal.is-open .smodal-scrim{opacity:1}
.smodal-panel{position:relative;width:400px;max-width:100%;background:#fff;border-radius:10px;padding:26px 24px 24px;box-shadow:0 18px 50px rgba(0,0,0,.28);transform:translateY(12px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease}
.smodal.is-open .smodal-panel{transform:none;opacity:1}
.smodal-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-strong);transition:background .15s ease}
.smodal-x:hover{background:var(--card)}
.smodal-x svg{width:22px;height:22px}
.smodal-head{display:flex;align-items:flex-start;gap:16px;padding-right:34px}
.smodal-thumb{flex:0 0 auto;width:88px;border-radius:0;overflow:hidden;background:var(--card)}
.smodal-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.smodal-meta{min-width:0}
.smodal-name{margin:2px 0 0;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink-strong)}
.smodal-size-label{margin:8px 0 0;font-size:14.5px;color:var(--ink)}
.smodal-price{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--sale)}
.smodal-label{margin:22px 0 12px;font-size:14.5px;color:var(--muted)}
.smodal-sizes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.smodal-size{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:44px;padding:0 20px;border:1px solid var(--line);border-radius:8px;font-size:14.5px;font-weight:600;color:var(--ink-strong);cursor:pointer;transition:all .15s ease}
.smodal-size:hover{border-color:var(--ink)}
.smodal-size.is-on{background:var(--ink-strong);border-color:var(--ink-strong);color:#fff}
.smodal-add{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;background:var(--ink-strong);color:#fff;font-size:17px;font-weight:700;letter-spacing:.01em;border-radius:999px;transition:background .15s ease,transform .1s ease}
.smodal-add:hover{background:#000}
.smodal-add:active{transform:scale(.99)}

/* ---- sticky footer: trust, totals, checkout ---- */
.cart-foot{flex:0 0 auto;background:#fff;border-top:1px solid var(--line);padding:14px 20px 18px;box-shadow:0 -6px 16px rgba(0,0,0,.06)}
.cart-trust{list-style:none;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.cart-trust li{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.25;color:var(--muted)}
.cart-trust svg{width:19px;height:19px;flex:0 0 auto;color:var(--ink-strong)}
.cart-trust b{display:block;font-size:12.5px;font-weight:700;color:var(--ink-strong)}
.cart-totals{display:grid;gap:7px;margin:0 0 13px}
.cart-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:17px;font-weight:700;color:var(--ink-strong)}
.cart-checkout{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;background:var(--accent);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em;border-radius:999px;transition:background .15s ease}
.cart-checkout:hover{background:var(--accent-dark)}
.cart-checkout:active{transform:scale(.99)}
.cart-checkout svg{width:19px;height:19px}
.cart-guarantee{margin:12px 0 0;text-align:center;font-size:12px;font-weight:700;color:var(--ink-strong)}

/* the drawer's own lightbox sits above the drawer — images, arrows, X. */
.lb--cart{z-index:130}
.lb-arrow[hidden]{display:none}
.lb--cart .lb-x{position:absolute;top:16px;right:16px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease}
.lb--cart .lb-x:hover{background:rgba(255,255,255,.26)}
.lb--cart .lb-x svg{width:24px;height:24px}

@media (max-width:768px){
  .cart-panel{width:100%;box-shadow:none}
  .cart-head{height:56px;padding:0 52px}
  .cart-title{font-size:18px}
  .cart-body{padding:18px 16px 24px}
  .cart-sec{font-size:17.5px}
  .cart-item{grid-template-columns:96px 1fr auto;gap:12px}
  /* upsell: image left, info right, ADD underneath the price */
  /* mobile: ADD drops under the price, inside the info column */
  .up-item{grid-template-columns:123px 1fr;gap:12px;align-items:start}
  .up-main{display:block}
  .up-add{margin:10px 0 0}
  .up-name{font-weight:600}
  .cart-name{font-size:15.5px}
  .cart-now{font-size:14px}
  .cart-was{font-size:12.5px}
  .cart-foot{padding:12px 16px 16px}
  .cart-checkout{min-height:54px;font-size:17px}
  .card-add{right:10px;bottom:10px;width:34px;height:34px}
  .card-add svg{width:18px;height:18px}
  .smodal-panel{padding:22px 18px 20px}
  .smodal-thumb{width:76px}
  .smodal-size{min-width:58px;height:42px;padding:0 16px}
}

/* ==========================================================================
   22. CHECKOUT  (checkout.html)
   Two columns on desktop: form left on white, order summary right on grey.
   One column on mobile with a collapsible summary at the top.
   The blue is a single variable — change it here and the whole page follows.
   ========================================================================== */
:root{
  --co-blue:#1668cf;
  --co-blue-dark:#1257b0;
  --co-blue-tint:#f2f6ff;
  --co-grey:#f5f5f5;
  --co-line:#d9d9d9;
  --co-line-soft:#e3e3e3;
  --co-ink:#1a1a1a;
  --co-muted:#6b7177;
  --co-head-h:78px;
}
.co-body{background:#fff}

/* ---- header ---- */
.co-head{border-bottom:1px solid var(--co-line-soft);background:#fff}
.co-head-inner{position:relative;display:flex;align-items:center;justify-content:center;height:var(--co-head-h);max-width:1240px;margin:0 auto;padding:0 28px}
.co-logo{display:inline-flex;align-items:center}
.co-logo img{height:30px;width:auto;max-width:170px;object-fit:contain}
.co-bag{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;color:var(--co-blue)}
.co-bag svg{width:23px;height:23px}

/* ---- layout ---- */
.co-main{display:grid;grid-template-columns:1fr 1fr;align-items:start;min-height:calc(100vh - var(--co-head-h))}
.co-left{background:#fff;display:flex;justify-content:flex-end}
.co-left-inner{width:100%;max-width:560px;padding:34px 40px 70px}
.co-right{background:var(--co-grey);border-left:1px solid var(--co-line-soft);align-self:stretch}
.co-right-inner{max-width:460px;padding:38px 40px 60px;position:sticky;top:0}

/* ---- typography ---- */
.co-h2{margin:0 0 12px;font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--co-ink)}
.co-h2--sm{font-size:15px;font-weight:600}
.co-block{margin:0 0 26px}
.co-block + .co-block{margin-top:26px}
.co-note{margin:-6px 0 12px;font-size:13px;color:var(--co-muted)}

/* ---- fields (floating label, like the reference) ---- */
.co-row{display:grid;gap:11px;margin:0 0 11px}
.co-row--2{grid-template-columns:1fr 1fr}
.co-row--3{grid-template-columns:1fr 1fr 1fr}
.co-field{position:relative;margin:0 0 11px}
.co-row .co-field{margin:0}
.co-field input,.co-field select{width:100%;height:52px;padding:16px 13px 0;border:1px solid var(--co-line);border-radius:6px;background:#fff;font-family:inherit;font-size:14.5px;color:var(--co-ink);transition:border-color .12s ease,box-shadow .12s ease}
.co-field select{padding-right:38px;appearance:none;-webkit-appearance:none;cursor:pointer}
.co-field input::placeholder{color:transparent}
.co-field label{position:absolute;left:13px;top:16px;font-size:14.5px;color:var(--co-muted);pointer-events:none;transition:transform .12s ease,font-size .12s ease;transform-origin:0 0;max-width:calc(100% - 46px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-field input:focus + label,
.co-field input:not(:placeholder-shown) + label,
.co-field--select label{transform:translateY(-9px) scale(.78);color:var(--co-muted)}
.co-field input:focus,.co-field select:focus{outline:none;border-color:var(--co-blue);box-shadow:0 0 0 1px var(--co-blue)}
.co-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--co-ink)}
.co-caret svg{width:18px;height:18px;display:block}
.co-hint{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--co-muted)}
.co-hint svg{width:19px;height:19px;display:block}
.co-field input[disabled],.co-field select[disabled]{background:#fafafa;color:var(--co-ink);opacity:1}
.co-field.has-err input,.co-field.has-err select{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b}
.co-err{margin:5px 0 0;font-size:12.5px;color:#c0392b}
.co-err:empty{display:none}

/* ---- checkboxes ---- */
.co-check{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-size:14px;color:var(--co-ink);cursor:pointer}
.co-check input{position:absolute;opacity:0;width:0;height:0}
.co-box{flex:0 0 auto;width:19px;height:19px;border:1px solid var(--co-line);border-radius:4px;background:#fff;position:relative;transition:all .12s ease}
.co-check input:checked + .co-box{background:var(--co-blue);border-color:var(--co-blue)}
.co-check input:checked + .co-box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.co-check input:focus-visible + .co-box{box-shadow:0 0 0 3px rgba(22,104,207,.3)}

/* ---- shipping method + payment/billing boxes ---- */
.co-ship{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:14px 16px;border:1px solid var(--co-line);border-radius:8px;background:#fff;font-size:14px;color:var(--co-ink)}
.co-ship.is-on{border-color:var(--co-blue);background:var(--co-blue-tint);box-shadow:0 0 0 1px var(--co-blue)}
.co-ship-cost{text-align:right;line-height:1.35}
.co-ship-cost s{display:block;font-size:12.5px;color:var(--co-muted)}
.co-ship-cost b{font-size:14px;font-weight:600}

.co-pay{border:1px solid var(--co-line);border-radius:8px;overflow:hidden;background:#fff}
.co-pay-opt{display:flex;align-items:center;gap:11px;padding:15px 16px;font-size:14px;color:var(--co-ink);cursor:pointer;border-bottom:1px solid var(--co-line-soft)}
.co-pay-opt:last-child{border-bottom:0}
.co-pay-opt.is-on{background:var(--co-blue-tint);box-shadow:inset 0 0 0 1px var(--co-blue)}
.co-pay-opt input{position:absolute;opacity:0;width:0;height:0}
.co-radio{flex:0 0 auto;width:19px;height:19px;border:1px solid var(--co-line);border-radius:50%;background:#fff;position:relative;transition:all .12s ease}
.co-pay-opt input:checked + .co-radio{border:6px solid var(--co-blue)}
.co-pay-opt input:focus-visible + .co-radio{box-shadow:0 0 0 3px rgba(22,104,207,.3)}
.co-pay-name{font-weight:500}
.co-pay-body{padding:20px 22px;background:#ededed;font-size:13.5px;line-height:1.5;color:var(--co-ink);text-align:center}
.co-bill-body{padding:16px}

/* ---- submit + errors ---- */
.co-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin:26px 0 0;background:var(--co-blue);color:#fff;font-family:inherit;font-size:16px;font-weight:600;border-radius:8px;transition:background .14s ease}
.co-submit:hover{background:var(--co-blue-dark)}
.co-submit:active{transform:scale(.995)}
.co-formerr{margin:18px 0 0;padding:12px 14px;border:1px solid #c0392b;border-radius:6px;background:#fdf3f2;font-size:13.5px;color:#8e2a1f}
.co-formerr--info{border-color:var(--co-blue);background:var(--co-blue-tint);color:#123a5c}
.co-empty{padding:40px 0}
.co-empty p{margin:0 0 18px;font-size:16px;color:var(--co-muted)}

/* ---- policy links ---- */
.co-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--co-line-soft)}
.co-legal button{font-family:inherit;font-size:12.5px;color:var(--co-blue);text-decoration:underline;cursor:pointer}
.co-legal button:hover{color:var(--co-blue-dark)}

/* ---- order summary ---- */
.co-items{display:grid;gap:17px}
.co-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center}
.co-item-media{position:relative;width:64px;height:64px}
.co-item-media img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--co-line-soft);background:#fff}
.co-item-qty{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#4a4a4a;color:#fff;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.co-item-name{margin:0;font-size:13.5px;font-weight:500;color:var(--co-ink);line-height:1.35}
.co-item-var{margin:2px 0 0;font-size:12px;color:var(--co-muted)}
.co-item-price{font-size:13.5px;font-weight:500;color:var(--co-ink);white-space:nowrap}

.co-disc{display:grid;grid-template-columns:1fr auto;gap:9px;margin:22px 0 0}
.co-disc input{height:46px;padding:0 13px;border:1px solid var(--co-line);border-radius:6px;background:#fff;font-family:inherit;font-size:14px;color:var(--co-ink)}
.co-disc input:focus{outline:none;border-color:var(--co-blue);box-shadow:0 0 0 1px var(--co-blue)}
.co-apply{height:46px;padding:0 22px;border-radius:6px;background:#e3e3e3;color:#7a7a7a;font-family:inherit;font-size:14px;font-weight:600;transition:all .14s ease}
.co-apply:hover{background:#d6d6d6;color:#555}
.co-disc-msg{margin:8px 0 0;font-size:12.5px}
.co-disc-msg:empty{display:none}
.co-disc-msg.is-bad{color:#c0392b}
.co-disc-msg.is-good{color:#1e7a44}

.co-lines{margin:22px 0 0;padding:20px 0 0;border-top:1px solid var(--co-line-soft)}
.co-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 9px;font-size:13.5px;color:var(--co-ink)}
.co-line b{font-weight:500}
.co-line s{color:var(--co-muted);margin-right:6px}
.co-code{font-style:normal;display:inline-block;margin-left:4px;padding:1px 7px;border-radius:4px;background:#e3e3e3;font-size:12px}
.co-freeship{margin:-2px 0 9px;font-size:12px;font-weight:600;color:var(--co-ink)}
.co-total{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 0;font-size:16px;font-weight:600;color:var(--co-ink)}
.co-total-money{display:flex;align-items:baseline;gap:7px}
.co-cur{font-style:normal;font-size:12px;color:var(--co-muted)}
.co-total-money b{font-size:21px;font-weight:600}
.co-savings{display:flex;align-items:center;gap:7px;margin:9px 0 0;font-size:12.5px;font-weight:600;color:var(--co-ink)}
.co-savings svg{width:15px;height:15px;flex:0 0 auto}

/* ---- mobile-only pieces: hidden on desktop ---- */
.co-msum,.co-mfoot{display:none}

/* ==========================================================================
   CHECKOUT — MOBILE
   ========================================================================== */
@media (max-width:860px){
  :root{--co-head-h:64px}
  .co-head-inner{padding:0 16px}
  .co-logo img{height:26px}
  .co-bag{right:10px;width:40px;height:40px}

  .co-main{display:block;min-height:0}
  .co-left{display:block}
  .co-left-inner{max-width:none;padding:20px 16px 44px}
  /* the desktop summary column is replaced by the bar at the top */
  .co-right{display:none}

  .co-msum{display:block;background:var(--co-grey);border-bottom:1px solid var(--co-line-soft)}
  .co-msum-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:14px 16px;font-family:inherit;text-align:left;cursor:pointer}
  .co-msum-label{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--co-blue)}
  .co-msum-label svg{width:16px;height:16px;transition:transform .18s ease}
  .co-msum-bar.is-open .co-msum-label svg{transform:rotate(180deg)}
  .co-msum-money{text-align:right;line-height:1.3}
  .co-msum-was{display:block;font-size:12px;color:var(--co-muted);text-decoration:line-through}
  .co-msum-was[hidden]{display:none}
  .co-msum-now{display:block;font-size:16px;font-weight:600;color:var(--co-ink)}
  .co-msum-panel{padding:4px 16px 20px;border-top:1px solid var(--co-line-soft)}
  .co-msum-panel .co-items{margin-top:16px}

  .co-h2{font-size:19px}
  .co-row--2,.co-row--3{grid-template-columns:1fr}
  .co-field{margin-bottom:11px}
  .co-row{gap:11px}
  .co-row .co-field{margin:0}

  .co-mfoot{display:block;margin:24px 0 0}
  .co-adddisc{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border:1px solid var(--co-line);border-radius:6px;background:#fff;font-family:inherit;font-size:13.5px;color:var(--co-ink);cursor:pointer}
  .co-adddisc:hover{background:#fafafa}
  .co-adddisc svg{width:16px;height:16px}
  .co-mdisc{margin:12px 0 0}
  .co-mdisc .co-disc{margin:0}

  .co-mtotal{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin:20px 0 0;font-family:inherit;text-align:left;cursor:pointer}
  .co-mtotal-left{display:flex;align-items:center;gap:12px}
  .co-mtotal-left img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--co-line-soft)}
  .co-mtotal-left b{display:block;font-size:17px;font-weight:600;color:var(--co-ink)}
  .co-mtotal-left i{display:block;font-style:normal;font-size:12.5px;color:var(--co-muted)}
  .co-mtotal-right{display:flex;align-items:baseline;gap:6px}
  .co-mtotal-right b{font-size:19px;font-weight:600;color:var(--co-ink)}
  .co-mtotal-right svg{width:16px;height:16px;align-self:center;color:var(--co-ink);transition:transform .18s ease}
  .co-mtotal.is-open .co-mtotal-right svg{transform:rotate(180deg)}
  .co-mtotal-panel .co-lines{margin-top:14px;padding-top:14px}
  .co-msave{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12.5px;color:var(--co-muted)}
  .co-msave[hidden]{display:none}

  .co-submit{min-height:54px;margin-top:20px}
  .co-legal{gap:8px 16px;margin-top:22px}
}

/* ==========================================================================
   23. POLICY SHEETS — slide up from the bottom
   ========================================================================== */
.sheet{position:fixed;inset:0;z-index:150;visibility:hidden;transition:visibility 0s linear .26s}
.sheet[hidden]{display:none}
.sheet.is-open{visibility:visible;transition-delay:0s}
.sheet-scrim{position:absolute;inset:0;background:rgba(18,20,23,.55);opacity:0;transition:opacity .26s ease}
.sheet.is-open .sheet-scrim{opacity:1}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;display:flex;flex-direction:column;background:#fff;border-radius:16px 16px 0 0;transform:translateY(100%);transition:transform .26s ease;box-shadow:0 -8px 34px rgba(0,0,0,.24)}
.sheet.is-open .sheet-panel{transform:none}
.sheet-head{position:relative;flex:0 0 auto;display:flex;align-items:center;min-height:62px;padding:0 62px 0 22px;border-bottom:1px solid var(--co-line-soft)}
.sheet-title{margin:0;font-size:18px;font-weight:600;color:var(--co-ink)}
.sheet-x{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--co-line);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--co-ink);transition:background .15s ease}
.sheet-x:hover{background:var(--co-grey)}
.sheet-x svg{width:22px;height:22px}
.sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 34px;font-size:14.5px;line-height:1.6;color:var(--co-ink)}
.sheet-body p{margin:0 0 14px}
.sheet-body h3{margin:20px 0 8px;font-size:15px;font-weight:700;color:var(--co-ink)}
.sheet-body h3:first-child{margin-top:0}
.sheet-body a{color:var(--accent);text-decoration:underline}
.sheet-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff!important;font-size:14px;font-weight:700;text-decoration:none!important}
.sheet-cta:hover{background:var(--accent-dark)}
.sheet-body p:last-child{margin-bottom:0}
.sheet-todo{margin-top:18px;padding:10px 12px;border-radius:6px;background:#fff6e5;font-size:12.5px;color:#8a5a00}
.sheet-todo-inline{padding:1px 6px;border-radius:4px;background:#fff6e5;color:#8a5a00;font-size:13px}
@media (min-width:861px){
  .sheet-panel{left:50%;right:auto;bottom:0;width:560px;transform:translate(-50%,100%)}
  .sheet.is-open .sheet-panel{transform:translate(-50%,0)}
}

/* ==========================================================================
   24. CONTACT PAGE
   ========================================================================== */
.ct-card{max-width:640px;margin:0 auto;border:1px solid var(--line);border-radius:12px;padding:30px 32px 34px;background:#fff}
.ct-field{margin:0 0 20px}
.ct-field label{display:block;margin:0 0 7px;font-size:14.5px;font-weight:600;color:var(--ink-strong)}
.ct-field label i{font-style:normal;color:#c0392b}
.ct-opt{font-weight:400;color:var(--muted)}
.ct-field input,.ct-field textarea,.ct-field select{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink-strong);background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 13px;height:48px;transition:border-color .12s ease,box-shadow .12s ease}
.ct-field textarea{height:auto;padding:12px 13px;line-height:1.55;resize:vertical;min-height:130px}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--muted)}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{outline:none;border-color:var(--ink-strong);box-shadow:0 0 0 1px var(--ink-strong)}
.ct-field.has-err input,.ct-field.has-err textarea,.ct-field.has-err select{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b}
.ct-err{margin:6px 0 0;font-size:12.5px;color:#c0392b}
.ct-err:empty{display:none}
.ct-select{position:relative}
.ct-select select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
.ct-caret{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-strong)}
.ct-caret svg{width:18px;height:18px;display:block}
.ct-send{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;background:var(--ink-strong);color:#fff;font-family:inherit;font-size:16px;font-weight:600;border-radius:8px;transition:background .15s ease}
.ct-send:hover{background:#000}
.ct-send[disabled]{opacity:.6;cursor:default}
.ct-status{margin:0 0 16px;padding:12px 14px;border-radius:8px;font-size:13.5px}
.ct-status.is-bad{border:1px solid #c0392b;background:#fdf3f2;color:#8e2a1f}
.ct-status.is-good{border:1px solid #1e7a44;background:#f1faf4;color:#146034}
.ct-status a{color:inherit;text-decoration:underline}
.ct-alt{margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.ct-alt a{color:var(--accent);text-decoration:underline}
@media (max-width:768px){
  .ct-card{padding:22px 18px 26px;border-radius:10px}
  .ct-field{margin-bottom:17px}
}

/* ---- checkout confirmation ---- */
.co-thanks-wrap{display:flex;justify-content:center;padding:60px 20px 90px}
.co-thanks{max-width:520px;text-align:center}
.co-thanks-tick{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:#eaf7ef;color:#1e7a44;display:flex;align-items:center;justify-content:center}
.co-thanks-tick svg{width:32px;height:32px}
.co-thanks h1{margin:0 0 10px;font-size:clamp(22px,3vw,29px);font-weight:600;letter-spacing:-.015em;color:var(--co-ink)}
.co-thanks-no{margin:0 0 16px;font-size:15px;color:var(--muted)}
.co-thanks p{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--ink)}

/* ==========================================================================
   25. SIZE RECOMMENDATION MODAL
   ========================================================================== */
/* Sits directly above the Size Guide link and matches it exactly (.size-head
   button): same 14px, same muted colour, same underline. */
.size-rec-row{display:flex;justify-content:flex-end;margin:28px 0 0}
.size-rec-row + .size-head{margin-top:7px}
.size-rec-link{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14px;color:var(--muted);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.size-rec-link:hover{color:var(--ink-strong)}
.size-rec-link svg{width:14px;height:14px;flex:0 0 auto}

.rec-panel{width:430px;padding:30px 26px 26px}
.rec-title{margin:0 0 22px;text-align:center;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-strong)}
.rec-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rec-field label{display:block;margin:0 0 7px;font-size:13.5px;color:var(--muted)}
.rec-input{position:relative}
.rec-input input{width:100%;height:56px;padding:0 44px 0 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-size:19px;font-weight:600;color:var(--ink-strong)}
.rec-input input:focus{outline:none;border-color:var(--ink-strong);box-shadow:0 0 0 1px var(--ink-strong)}
.rec-input span{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--muted);pointer-events:none}
.rec-q{margin:20px 0 10px;font-size:13.5px;color:var(--muted)}
.rec-fits{display:flex;flex-wrap:wrap;gap:10px}
.rec-fit{flex:1 1 auto;min-width:110px;height:50px;padding:0 18px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-strong);cursor:pointer;transition:all .15s ease}
.rec-fit:hover{border-color:var(--ink)}
.rec-fit.is-on{background:var(--ink-strong);border-color:var(--ink-strong);color:#fff}
.rec-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin:22px 0 0;background:var(--ink-strong);color:#fff;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:10px;transition:background .15s ease}
.rec-go:hover{background:#000}
.rec-err{margin:16px 0 0;padding:11px 13px;border:1px solid #c0392b;border-radius:8px;background:#fdf3f2;font-size:13px;color:#8e2a1f}
.rec-out{margin:22px 0 0;padding:20px;border:1.5px solid var(--accent);border-radius:12px;background:#FFF6F2;text-align:center}
.rec-out-lead{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec-out-size{margin:4px 0 8px;font-size:36px;font-weight:700;line-height:1;color:var(--ink-strong)}
.rec-out-note{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.rec-use{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 26px;border-radius:999px;background:var(--accent);color:#fff;font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transition:background .15s ease}
.rec-use:hover{background:var(--accent-dark)}
.rec-fine{margin:16px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}

/* ==========================================================================
   26. WRITE A REVIEW MODAL
   ========================================================================== */
.wr-panel{width:660px;max-height:88vh;overflow-y:auto;padding:28px 26px 26px}
.wr-head{display:flex;align-items:center;gap:16px;margin:0 0 22px;padding-right:40px}
.wr-thumb{width:78px;height:78px;object-fit:cover;border-radius:6px;background:var(--card);flex:0 0 auto}
.wr-name{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--ink-strong);line-height:1.25}
.wr-stars{display:flex;gap:6px}
.wr-star{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:none;border:0}
.wr-star svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:38px}
.wr-star.is-on svg{fill:var(--accent);stroke:var(--accent)}
.wr-field{margin:0 0 14px}
.wr-field input,.wr-field textarea{width:100%;font-family:inherit;font-size:14.5px;color:var(--ink-strong);background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 14px;height:52px}
.wr-field textarea{height:auto;padding:14px;line-height:1.55;resize:vertical;min-height:150px}
.wr-field input::placeholder,.wr-field textarea::placeholder{color:var(--ink)}
.wr-field input:focus,.wr-field textarea:focus{outline:none;border-color:var(--ink-strong);box-shadow:0 0 0 1px var(--ink-strong)}
.wr-sec{margin:26px 0 12px;font-size:16px;font-weight:700;color:var(--ink-strong)}
.wr-err{margin:0 0 14px;padding:11px 13px;border:1px solid #c0392b;border-radius:8px;background:#fdf3f2;font-size:13px;color:#8e2a1f}
.wr-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin:8px 0 0;background:var(--accent);color:#fff;font-family:inherit;font-size:18px;font-weight:700;border-radius:6px;transition:background .15s ease}
.wr-submit:hover{background:var(--accent-dark)}
.wr-done{text-align:center;padding:26px 10px 14px}
.wr-tick{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;background:#eaf7ef;color:#1e7a44;display:flex;align-items:center;justify-content:center}
.wr-tick svg{width:32px;height:32px}
.wr-done h2{margin:0 0 8px;font-size:21px;font-weight:700;color:var(--ink-strong)}
.wr-done p{margin:0 0 22px;font-size:14.5px;color:var(--muted)}

/* review list bits rendered from products.json */
.rvw-head{display:flex;align-items:center;gap:11px;margin:0 0 4px}
.rvw-av{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.rvw-who{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;flex:1 1 auto;min-width:0}
.rvw-who b{font-size:14.5px;font-weight:700;color:var(--ink-strong)}
.rvw-ver{font-size:12.5px;font-weight:600;color:var(--ink)}
.rvw-date{font-size:12.5px;color:var(--muted);white-space:nowrap}
.rvw-h{margin:0 0 6px;font-size:15.5px;font-weight:700;color:var(--ink-strong)}
.rvw-p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.rvw-empty{padding:24px 0;text-align:center}
.rvw-empty p{margin:0 0 16px;font-size:15px;color:var(--muted)}

@media (max-width:768px){
  .rec-panel,.wr-panel{width:100%;padding:24px 18px 22px}
  .rec-row{gap:11px}
  .rec-input input{height:52px;font-size:17px}
  .wr-thumb{width:64px;height:64px}
  .wr-star{width:30px;height:30px}
  .wr-star svg{width:27px;height:27px}
}

/* ==========================================================================
   20. HOME SLIDERS ("Shop Best Sellers" / "Shop Recommended") + USP STRIP
   Card width follows the reference: 354px slides, 1:1 image. Track scrolls
   with swipe or the arrows; dots follow the page. Two-up on mobile.
   ========================================================================== */
.hsec{--hslide-gap:22px}
.hsec-head{margin:0 0 38px;text-align:left}
.hsec-head h2{margin:0;font-size:clamp(26px,3.2vw,36px);line-height:normal;font-weight:700;font-style:normal;color:#3d4246}
.hslider{position:relative}
.hslider-track{display:flex;gap:var(--hslide-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.hslider-track::-webkit-scrollbar{display:none}
.hslider-track.is-dragging{scroll-snap-type:none;cursor:grabbing}
.hslide{flex:0 0 354px;max-width:82vw;scroll-snap-align:start}
.hslide .prod-media img{aspect-ratio:1/1}
.hslide .prod-name{margin-top:13px;font-size:16px}
.hslide .prod-desc{font-size:14px}

.hslider-arrow{position:absolute;top:34%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:opacity .15s ease,background .15s ease}
.hslider-arrow:hover{background:var(--card)}
.hslider-arrow[disabled]{opacity:0;pointer-events:none}
.hslider-arrow svg{width:17px;height:17px}
.hslider-prev{left:-8px}
.hslider-next{right:-8px}

.hslider-dots{display:flex;justify-content:center;gap:9px;margin:20px 0 0}
.hslider-dot{width:34px;height:4px;padding:0;border:0;border-radius:2px;background:#C9CFD3;cursor:pointer;transition:background .15s ease}
.hslider-dot.is-active{background:var(--accent)}
/* Killing the hover zoom mid-drag stops a full-size image repaint on every
   pointermove, which is what makes the desktop drag feel heavy. */
.hslider-track.is-dragging .prod-media img{transform:none;transition:none}
.hslider-track.is-dragging .prod-card{cursor:grabbing}

/* ---------- USP strip ---------- */
.usp{background:var(--card);padding-bottom:88px}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.usp-item{text-align:center}
.usp-ico{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center}
.usp-ico svg{width:27px;height:27px}
.usp-item h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ink-strong)}
.usp-item p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

@media (max-width:768px){
  .hsec{--hslide-gap:12px}
  .hsec-head{margin-bottom:26px;text-align:center}
  .hsec-head h2{font-size:30px}
  /* One product per slide with the next peeking. Reference: a 369px slide on
     a 440px-wide iPhone 16 Pro Max = 83.9% of the viewport, holding a 345px
     (1:1) image inside 12px of card padding. Percentage, not px, so the peek
     is the same proportion on every phone. */
  .hslide{flex:0 0 83.9%;max-width:none;background:var(--card);border-radius:14px;padding:12px}
  .hslide .prod-media{border-radius:10px}
  .hslide .prod-name{margin-top:12px;font-size:15px}
  .hslide .prod-desc{font-size:13px}
  .hslide .prod-price{font-size:15px}
  .hslider-arrow{display:none}
  .hslider-dots{margin-top:16px}
  .usp-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .usp-ico{width:50px;height:50px;margin-bottom:11px}
  .usp-ico svg{width:24px;height:24px}
  .usp-item h3{font-size:15px}
  .usp-item p{font-size:13px}
}


/* ==========================================================================
   CATEGORY VARIANTS (product.html)
   A block tagged data-for="<category-slug>" belongs to that category only.
   Hidden by default so nothing flashes before store.js runs; store.js strips
   the attribute from the matching blocks and deletes the rest.
   ========================================================================== */
[data-for]{display:none!important}