:root {
  /* Theme colour (black). The names stay "teal" so nothing else has to change. */
  --teal: #111111;
  --teal-dark: #333333;
  --teal-light: #f1f1f1;
  --ink: #1c1c1c;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
  --soft: #f7f8fa;
  --red: #e23d3d;
  --green: #16a34a;
  --star: #f5a623;
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Safety net: never let a stray element make the page scroll sideways on phones. */
html, body { overflow-x: clip; }
body { font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img, svg { max-width: 100%; display: block; }
input, select, textarea { font: inherit; color: inherit; }
/* Wide layout: content spans the screen with a proportional side margin (about 110px on large monitors). */
.container { max-width: 2040px; margin: 0 auto; padding-inline: clamp(16px, 5.8vw, 112px); }
.muted { color: var(--muted); }
.center { text-align: center; }
[hidden] { display: none !important; }
/* Grid columns default to min-width:auto, which lets long content push them wider than the screen. */
.product > *, .shop-layout > *, .cart-layout > *, .checkout-layout > *, .acct-layout > *, .policy-layout > *,
.details-grid > *, .highlight > *, .split > *, .contact-grid > *, .hero .container > *, .promo > * { min-width: 0; }

/* ---------- Announcement & header ---------- */
.announce { background: #0a0a0a; color: #fff; text-align: center; font-size: 15px; padding: 9px 16px; font-weight: 400; letter-spacing: .1px; }
.announce b { font-weight: 600; }
header.site { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { font-size: 26px; font-weight: 700; color: var(--teal); letter-spacing: -0.5px; }
.logo span { color: var(--ink); }
.logo img { display: block; height: 34px; width: auto; }
.foot-logo img { display: block; height: 40px; width: auto; }
.search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 30px; padding: 9px 16px; }
.search input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; }
.header-icons { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.icon-btn:hover { background: var(--soft); }
.count-badge { position: absolute; top: 0; right: 0; background: var(--teal); color: #fff; font-size: 10px; font-weight: 600; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.menu-toggle, .search-toggle { display: none; }
nav.cats { border-top: 1px solid var(--line); }
nav.cats ul { list-style: none; display: flex; gap: 28px; overflow-x: auto; padding: 11px 0; font-size: 14px; font-weight: 500; scrollbar-width: none; }
nav.cats ul::-webkit-scrollbar { display: none; }
nav.cats li { white-space: nowrap; }
nav.cats a:hover, nav.cats a.active { color: var(--teal); }
.tag-new { background: var(--red); color: #fff; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: super; }
.mobile-search { display: none; padding: 4px 0 16px; }
.mobile-search.open { display: block; }
.mobile-search .search { display: flex; max-width: 680px; margin: 0 auto; }

/* Single-row header: logo | mega-menu nav | icons */
.header-row { height: 76px; gap: 20px; }
.header-icons .search-toggle { display: grid; }
.mainnav { margin: 0 auto; align-self: stretch; }
.mainnav > ul { list-style: none; display: flex; height: 100%; }
.mainnav > ul > li { display: flex; }
.nav-link { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 15px; font-weight: 500; color: #222; white-space: nowrap; }
.nav-link .chev { opacity: .7; transition: transform .2s; }
.nav-link .tag-new { position: absolute; top: 12px; right: 18px; margin: 0; vertical-align: baseline; }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 20px; height: 2px; background: #111; transform: scaleX(0); transition: transform .2s; }
.has-mega:hover .chev, .has-mega:focus-within .chev { transform: rotate(180deg); }
.mainnav li:hover > .nav-link::after, .has-mega:focus-within > .nav-link::after { transform: scaleX(1); }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0,0,0,.08); padding: 32px 0 26px;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.has-mega:hover > .mega, .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 32px; }
.mega-tile { display: flex; align-items: center; gap: 18px; border-radius: 14px; }
.mega-tile:hover .mt-txt { color: var(--teal-dark); }
.mega-tile:hover .mt-img { box-shadow: 0 0 0 2px var(--teal-light); }
.mt-img { width: 76px; height: 76px; flex: none; border-radius: 12px; background: #f3f4f6; display: grid; place-items: center; overflow: hidden; transition: box-shadow .15s; }
.mt-img svg { width: 82%; height: 82%; }
.mt-img img { width: 100%; height: 100%; object-fit: cover; }
.mt-emoji { font-size: 30px; }
.mt-txt { font-size: 16px; color: #444; line-height: 1.3; }
.mt-txt small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.mega-all { display: table; margin: 20px 0 0 auto; color: #1d6fe0; font-weight: 500; }
.mega-all:hover { text-decoration: underline; }
.store-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin-left: 8px; border-radius: 8px; background: #ffd000; color: #111; font-weight: 500; font-size: 14px; white-space: nowrap; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #f0c400; }
.store-btn:hover { background: #ffdc3d; }
@media (max-width: 1180px) {
  .mainnav { display: none; }
  .menu-toggle { display: grid; }
  .header-row .logo { margin-right: auto; }
}
@media (max-width: 640px) {
  .store-btn { display: none; }
}

/* ---------- Mobile menu ---------- */
.menu-drawer { position: fixed; top: 0; left: 0; height: 100%; width: min(320px, 88%); background: #fff; z-index: 100; transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.menu-drawer.show { transform: none; }
.menu-drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.menu-drawer ul { list-style: none; overflow-y: auto; padding: 8px 0; }
.menu-drawer li a { display: block; padding: 12px 20px; font-weight: 500; }
.menu-drawer li a:hover { background: var(--soft); color: var(--teal); }
.menu-drawer .sep { height: 1px; background: var(--line); margin: 8px 20px; }

/* ---------- Common blocks ---------- */
.crumbs { font-size: 13px; color: var(--muted); padding: 16px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line; long product names end with "…" */
.crumbs a:hover { color: var(--teal); }
section.block { padding: 56px 0; }
section.block.alt { background: var(--soft); }
.sec-title { font-size: 26px; font-weight: 600; text-align: center; margin-bottom: 8px; }
.sec-sub { text-align: center; color: var(--muted); margin-bottom: 36px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.sec-head .sec-title, .sec-head .sec-sub { text-align: left; margin-bottom: 0; }
.link { color: var(--teal); font-weight: 600; }
.link:hover { text-decoration: underline; }
.page-hero { background: linear-gradient(135deg, var(--teal-light), #fff); padding: 48px 0; text-align: center; }
.page-hero h1 { font-size: 34px; font-weight: 700; line-height: 1.2; }
.page-hero p { color: var(--muted); max-width: 620px; margin: 10px auto 0; }
.stars { color: var(--star); letter-spacing: 2px; font-size: 16px; }

/* ---------- Buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 10px; font-weight: 600; font-size: 15px; transition: background .15s, transform .05s; }
.btn:active { transform: scale(.99); }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); }
.btn-outline { border: 1.5px solid var(--teal); color: var(--teal); }
.btn-outline:hover { background: var(--teal-light); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; outline: none; background: #fff; font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }
.field textarea { min-height: 120px; resize: vertical; }
.field .err { color: var(--red); font-size: 12px; margin-top: 4px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red); }
.field.invalid .err { display: block; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.notice { background: var(--teal-light); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.notice.warn { background: #fff4e5; color: #92400e; }

/* ---------- Product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.pcard:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.pcard .p-img { background: var(--soft); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.pcard .p-img svg { width: 78%; height: 78%; }
.pcard .p-badge { position: absolute; top: 12px; left: 12px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 5px; }
.pcard .p-badge.sale { background: var(--red); }
.pcard .p-badge.new { background: var(--teal); }
.wish-btn { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); z-index: 2; }
.wish-btn svg { width: 18px; height: 18px; }
.wish-btn.on svg { fill: var(--red); stroke: var(--red); }
.pcard .p-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pcard .p-cat { font-size: 12px; color: var(--muted); }
.pcard .p-name { font-weight: 600; font-size: 15px; line-height: 1.35; margin: 2px 0 6px; }
.pcard .p-rating { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.pcard .p-rating b { color: var(--star); }
.pcard .p-price { margin: 8px 0 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pcard .p-price .now { font-weight: 700; font-size: 17px; }
.pcard .p-price .was { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.pcard .p-price .pct { color: var(--teal-dark); font-weight: 600; font-size: 12px; }
.pcard .dots { display: flex; gap: 5px; margin-bottom: 12px; }
.pcard .dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
.pcard .btn { margin-top: auto; }
.pcard { border-radius: 16px; border-color: #ececec; }
.pcard .p-img { position: relative; }
.p-rate { position: absolute; left: 10px; bottom: 10px; background: #fff; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.p-rate b { color: var(--star); }
.p-rate i { font-style: normal; color: #d4d4d4; margin: 0 5px; }
.p-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.p-tags span { font-size: 11px; background: var(--soft); color: #555; padding: 2px 8px; border-radius: 20px; }
.pcard .p-price .was { order: 0; }
.pcard .p-price .pct { background: #e8f7ee; color: #15803d; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.btn-cart { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: auto; border: 1.5px solid #111; border-radius: 10px; background: #fff; font-weight: 600; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; transition: background .15s, color .15s; }
.btn-cart:hover { background: #111; color: #fff; }

/* Real product photos (added via `images` in data.js) fill their box; illustrations keep their own sizing. */
.p-img > img, .main-img .svg-wrap > img, .thumb > img, .d-img > img, .ci-img > img, .mi-img > img, .h-img > img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.main-img .svg-wrap:has(> img) { width: 100%; height: 100%; }
/* Product photos are not always square (e.g. 4:5): show the whole photo, never crop it */
.main-img .svg-wrap > img { object-fit: contain; }
/* Product cards: always the same square size in the grid, photo fills it */
.pcard .p-img:has(> img) { position: relative; overflow: hidden; }
.pcard .p-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.main-img .svg-wrap:has(> img) { position: absolute; inset: 0; display: block; }
.main-img:has(.svg-wrap > img) { background: #fff; }
.thumb:has(> img), .d-img:has(> img), .ci-img:has(> img), .h-img:has(> img) { overflow: hidden; }
.thumb > img { border-radius: 8px; }
.mi-img > img { border-radius: 10px; }

/* ---------- Home ---------- */
.hero { background: linear-gradient(120deg, #dff5f5 0%, #f4fbfb 55%, #fff 100%); overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding-block: 56px; }
.hero .kicker { display: inline-block; background: #fff; color: var(--teal-dark); font-weight: 600; font-size: 13px; padding: 5px 14px; border-radius: 20px; margin-bottom: 16px; }
.hero h1 { font-size: 46px; line-height: 1.15; font-weight: 700; }
.hero h1 em { color: var(--teal); font-style: normal; }
.hero p { color: #4b5563; font-size: 17px; margin: 16px 0 28px; max-width: 520px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 480px; justify-self: center; width: 100%; }
.hero-art .blob { position: absolute; inset: 6%; border-radius: 50%; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.12); }
.hero-art .main { position: absolute; inset: 14%; }
.hero-art .mini { position: absolute; width: 30%; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.hero-art .mini.a { top: 2%; right: 0; } .hero-art .mini.b { bottom: 4%; left: 0; }
.hero-dots { display: flex; gap: 8px; margin-top: 28px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 5px; background: #cfe9e9; transition: width .2s; }
.hero-dots button.active { width: 28px; background: var(--teal); }
/* Hero banner carousel: full-bleed dark slides, text bottom-left, controls bottom-right */
/* Fills the screen below the header (announcement bar + header is about 114px). */
.banner { position: relative; overflow: hidden; background: #111; color: #fff; height: calc(100vh - 114px); min-height: 560px; max-height: 1100px; }
.banner-track { display: flex; height: 100%; transition: transform .7s cubic-bezier(.22,.61,.36,1); touch-action: pan-y; }
.slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; background: var(--slide-bg, #1f2a1f); }
.slide::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 75% at 72% 42%, rgba(255,255,255,.16), transparent 62%), radial-gradient(35% 55% at 100% 0%, rgba(255,255,255,.09), transparent 70%), linear-gradient(90deg, rgba(0,0,0,.45), transparent 55%); }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Optional real photo per slide (set `img` in the SLIDES list in index.html). */
.slide-photo { position: absolute; inset: 0; background-image: var(--img); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; }
.slide-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, transparent), linear-gradient(0deg, rgba(0,0,0,.35), transparent 45%); }
/* Banner with its own text: no darkening overlay, and crop from the right so the text on the left is never cut. */
.slide-photo.plain { background-position: left center; }
.slide-photo.plain::after { display: none; }
/* Photo banners: smaller site heading, so it fits in the empty lower-left area under the banner's own text. */
.slide.compact .slide-inner { padding-bottom: 90px; }
.slide.compact .slide-label { font-size: 20px; }
.slide.compact .slide-title { font-size: clamp(30px, 2.8vw, 50px); margin-bottom: 18px; }
.slide.compact .btn-yellow { height: 54px; padding: 0 30px; font-size: 19px; }
/* Whole-slide tap target (used on phones, where banner slides show no button). */
.slide-link { display: none; position: absolute; inset: 0; z-index: 3; }
@media (max-width: 640px) {
  /* Phones: the wide banner fills the short 2:1 hero edge to edge; its own text is the message, tap opens the product. */
  .slide-photo { background-image: var(--img); background-size: cover; background-position: center; }
  .slide.compact .slide-link { display: block; }
  /* Only a small Shop Now button in the banner's empty lower-left corner (the banner's own text is the message). */
  .slide.compact .slide-label, .slide.compact .slide-title { display: none; }
  .slide.compact .slide-inner { align-items: flex-end; padding-bottom: 12px; }
  .slide.compact .btn-yellow { height: 26px; padding: 0 11px; font-size: 11px; font-weight: 600; border-radius: 6px; }
}
.slide-art { position: absolute; z-index: 1; right: 7%; top: 50%; transform: translateY(-50%); width: min(46vw, 68vh, 680px); aspect-ratio: 1; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.slide-art svg { width: 100%; height: 100%; }
.slide-art > img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; }
.slide-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: 118px; }
.slide-text > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.slide.active .slide-text > * { opacity: 1; transform: none; }
.slide.active .slide-text > :nth-child(2) { transition-delay: .1s; }
.slide.active .slide-text > :nth-child(3) { transition-delay: .2s; }
.slide-label { font-size: 26px; font-weight: 400; line-height: 1.3; }
.slide-title { font-size: 64px; font-weight: 500; line-height: 1.1; letter-spacing: -.5px; margin: 2px 0 30px; }
.btn-yellow { display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 38px; border-radius: 14px; background: #ffd000; color: #111; font-size: 22px; font-weight: 600; transition: background .15s, transform .05s; }
.btn-yellow:hover { background: #ffdc3d; }
.btn-yellow:active { transform: scale(.98); }
.banner-controls { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; pointer-events: none; }
.banner-controls .container { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.banner-dots { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.banner-dots button { width: 7px; height: 7px; padding: 0; border-radius: 10px; background: rgba(255,255,255,.5); transition: width .3s, height .3s, background .3s; }
.banner-dots button.near { width: 10px; height: 10px; background: rgba(255,255,255,.7); }
.banner-dots button.active { width: 32px; height: 12px; background: #fff; }
.banner-arrows { display: flex; gap: 6px; pointer-events: auto; }
.banner-arrow { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; transition: box-shadow .15s; }
.banner-arrow svg { width: 20px; height: 20px; }
.banner-arrow:hover, .banner-arrow:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #111; }
@media (prefers-reduced-motion: reduce) {
  .banner-track, .slide-text > * { transition: none; }
}

/* ---------- Home sections (reference-style) ---------- */
.h-big { font-size: 30px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; margin-bottom: 22px; }
section.block.tight { padding: 28px 0; }
.rail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.rail-head .h-big { margin-bottom: 0; }
.rail-head .tag-new { font-size: 11px; vertical-align: middle; }
.seg { display: inline-flex; background: #f1f1f1; border-radius: 40px; padding: 4px; margin-bottom: 28px; }
.seg button { padding: 10px 28px; border-radius: 40px; font-weight: 500; font-size: 15px; color: #555; transition: background .2s, color .2s; }
.seg button.active { background: #111; color: #fff; }
.need-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; text-align: left; }
/* isolation: isolate makes iPhone Safari clip the photo to the rounded corners */
.need-card { border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--c); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.need-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
/* Photo box keeps a fixed square shape; the photo is pinned inside it so every browser (incl. iPhone Safari) sizes it the same. */
.need-card .nc-img { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; flex: none; }
.need-card .nc-img svg { width: 72%; height: 72%; }
.need-card .nc-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.range-card .rc-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Text centred; "Shop now" sits at the bottom so it lines up across a row even when a subtitle wraps. */
.need-card .nc-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 16px 18px; }
.need-card h3 { font-size: 19px; font-weight: 600; line-height: 1.25; }
.need-card p { font-size: 13px; color: #555; margin-top: 4px; line-height: 1.4; }
.need-card .nc-link { margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 14px; }
.hscroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.offer-card { width: 290px; border-radius: 14px; padding: 16px 18px; background: var(--c); display: flex; gap: 14px; align-items: center; }
.offer-card .oc-logo { width: 46px; height: 46px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.offer-card b { display: block; font-size: 17px; font-weight: 600; }
.offer-card small { color: #555; font-size: 13px; }
/* As many columns as fit (at least 240px each), so 3 or 8 categories both fill the row. */
.range-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.range-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #ececec; transition: transform .2s, box-shadow .2s; }
.range-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.range-card .rc-img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--soft); }
.range-card .rc-img:has(> img) { position: relative; aspect-ratio: 1 / 1; display: block; overflow: hidden; background: #fff; }
.range-card .rc-img:has(> img) > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.range-card .rc-img svg { width: 62%; height: 80%; }
.range-card .rc-body { padding: 14px 16px 18px; }
.range-card h3 { font-size: 17px; font-weight: 600; }
.range-card small { color: var(--muted); font-size: 13px; }
.range-card small b { color: var(--ink); }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid #d4d4d4; background: #fff; display: grid; place-items: center; transition: background .15s, color .15s; }
.rail-nav button:hover { background: #111; color: #fff; border-color: #111; }
.rail > .pcard { width: calc((100% - 48px) / 4); }
.promo .btn-yellow { height: 54px; font-size: 18px; padding: 0 30px; }
.hscroll > .offer-card { flex: 1 0 270px; }
.main-img { max-height: min(78vh, 760px); }
@media (min-width: 1280px) {
  .shop-layout .grid.cols-3 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1440px) {
  .rail > .pcard { width: calc((100% - 64px) / 5); }
}
@media (max-width: 980px) {
  .need-grid { grid-template-columns: repeat(3, 1fr); }
  .rail > .pcard { width: calc((100% - 32px) / 3); }
}
@media (max-width: 640px) {
  .h-big { font-size: 24px; margin-bottom: 16px; }
  .need-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .need-card .nc-body { padding: 10px 10px 14px; }
  .need-card h3 { font-size: 16px; }
  .need-card p { font-size: 12.5px; }
  .need-card .nc-link { padding-top: 10px; font-size: 13.5px; }
  /* Odd card out: full width, photo on the left and text on the right */
  .need-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 10px; gap: 6px; }
  .need-grid > :last-child:nth-child(odd) .nc-img { width: 46%; border-radius: 12px; background: #fff; isolation: isolate; }
  .need-grid > :last-child:nth-child(odd) .nc-body { justify-content: center; padding: 10px 8px; }
  .need-grid > :last-child:nth-child(odd) .nc-link { margin-top: 0; }
  .range-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .range-card h3 { font-size: 15px; }
  .rail > .pcard { width: 62%; }
  .rail-nav { display: none; }
  .offer-card { width: 250px; }
  .seg button { padding: 9px 20px; font-size: 14px; }
}

/* ---------- "See It in Action" video cards ---------- */
.kicker-sm { color: var(--muted); font-size: 17px; margin-bottom: 4px; }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111; isolation: isolate; }
.reel-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.reel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 42%); }
.reel-info { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.reel-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; font-size: 15px; font-weight: 500; }
.reel-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; background: var(--soft); display: grid; place-items: center; }
.reel-avatar > img, .rp-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-avatar > svg, .rp-img > svg { width: 90%; height: 90%; }
.reel-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.reel-tick { width: 16px; height: 16px; flex: none; }
.reel-head .chev { flex: none; transition: transform .2s; }
.reel.open .reel-head .chev { transform: rotate(180deg); }
.reel-more { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.reel-more p { padding: 0 14px 12px; font-size: 13px; color: #555; line-height: 1.5; }
.reel.open .reel-more { max-height: 180px; }
.reel-product { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-top: 1px solid var(--line); font-size: 14px; }
.reel-product:hover .rp-name { color: var(--teal-dark); }
.rp-img { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; background: var(--soft); display: grid; place-items: center; }
.rp-name { min-width: 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rp-name small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Product page: a swipeable row of the product's demo videos inside the buy box. */
.reels.reels-inline { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 18px; padding-bottom: 4px; }
.reels-inline::-webkit-scrollbar { display: none; }
.reels-inline .reel { scroll-snap-align: start; }
.reels-inline .reel-head { font-size: 14px; }
.reels-title { font-size: 26px; font-weight: 700; margin-top: 28px; }
.reels-title + .reels-inline { margin-top: 14px; }
@media (max-width: 980px) {
  .reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .reels::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .reels, .reels.reels-inline { grid-auto-columns: 80%; gap: 12px; }
  .reels-title { font-size: 24px; }
  .kicker-sm { font-size: 14px; }
  .reel-head { font-size: 14px; padding: 10px 12px; }
}

.usp-strip { border-bottom: 1px solid var(--line); }
.usp-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 20px; }
.usp { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.usp .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--teal-light); display: grid; place-items: center; font-size: 20px; flex: none; }
.usp b { display: block; font-size: 14px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.cat-tile { text-align: center; }
.cat-tile .ci { aspect-ratio: 1 / 1; border-radius: 50%; background: var(--teal-light); display: grid; place-items: center; transition: transform .2s; }
.cat-tile .ci svg { width: 62%; height: 62%; }
.cat-tile:hover .ci { transform: scale(1.05); }
.cat-tile span { display: block; font-weight: 600; font-size: 14px; margin-top: 10px; }
.promo { border-radius: 20px; background: var(--ink); color: #fff; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; overflow: hidden; }
.promo .txt { padding: 48px; }
.promo .txt .kicker { color: #d1d5db; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.promo h2 { font-size: 32px; line-height: 1.2; margin: 8px 0 12px; }
.promo p { color: #d1d5db; margin-bottom: 24px; }
.promo .art { background: linear-gradient(135deg, #3a3a3a, #0a0a0a); height: 100%; min-height: 280px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.promo .art svg { width: 44%; }
/* Business banner: our product photos as white tiles */
.biz-tile { flex: 1 1 0; min-width: 0; max-width: 190px; aspect-ratio: 1; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .25s; }
.biz-tile:nth-child(2) { transform: translateY(-14px); }
.biz-tile:hover { transform: translateY(-6px) scale(1.04); }
.biz-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; text-align: center; }
.feature .f-ic { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: var(--teal-light); display: grid; place-items: center; font-size: 26px; }
.feature h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.feature p { font-size: 13px; color: var(--muted); }
.newsletter { background: var(--teal-light); border-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter h2 { font-size: 24px; }
.newsletter form { display: flex; gap: 10px; flex: 1; max-width: 460px; min-width: 260px; }
.newsletter input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 16px; height: 50px; outline: none; }

/* ---------- Collection ---------- */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; padding-bottom: 56px; }
.filters { position: sticky; top: 130px; }
.filters h3 { font-size: 15px; font-weight: 600; margin: 20px 0 10px; }
.filters h3:first-child { margin-top: 0; }
.filters label { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 5px 0; cursor: pointer; }
.filters input { accent-color: var(--teal); width: 16px; height: 16px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar select { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none; background: #fff; }
.filter-toggle { display: none; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .big { font-size: 48px; margin-bottom: 8px; }
.empty-state h3 { color: var(--ink); font-size: 20px; margin-bottom: 6px; }

/* ---------- Product page ---------- */
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; padding-bottom: 56px; }
.gallery { position: sticky; top: 130px; }
.main-img { position: relative; background: var(--soft); border-radius: var(--radius); aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; }
.main-img .svg-wrap { width: 82%; height: 82%; display: grid; place-items: center; }
.main-img .svg-wrap svg { width: 100%; height: 100%; }
.badge-sale { position: absolute; top: 16px; left: 16px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.main-img .tools { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; }
.round-btn { background: #fff; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.round-btn.on svg { fill: var(--red); stroke: var(--red); }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.1); font-size: 20px; }
.gal-nav.prev { left: 12px; } .gal-nav.next { right: 12px; }
.gal-nav { z-index: 2; }
/* Swipe / drag the big photo; vertical page scroll still works on phones */
.main-img { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.main-img.dragging { cursor: grabbing; }
.main-img .svg-wrap { transition: transform .25s ease; }
.main-img.dragging .svg-wrap { transition: none; }
.main-img img { -webkit-user-drag: none; pointer-events: none; }
.main-img .svg-wrap.slide-next { animation: galNext .32s ease; }
.main-img .svg-wrap.slide-prev { animation: galPrev .32s ease; }
@keyframes galNext { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes galPrev { from { transform: translateX(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
.thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } /* still swipes, no grey scrollbar line */
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 76px; height: 76px; border-radius: 10px; background: var(--soft); border: 2px solid transparent; display: grid; place-items: center; }
.thumb svg { width: 80%; height: 80%; }
.thumb.active { border-color: var(--teal); }
.buy h1 { font-size: 26px; font-weight: 600; line-height: 1.3; }
.rating-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; font-size: 14px; color: var(--muted); }
.rating-row a { color: var(--teal); text-decoration: underline; }
.urgency { display: inline-flex; align-items: center; gap: 6px; background: #fff4e5; color: #b45309; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 20px; margin-bottom: 16px; }
.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price { font-size: 30px; font-weight: 700; }
.mrp { color: var(--muted); text-decoration: line-through; font-size: 17px; }
.off { color: #fff; font-weight: 600; font-size: 15px; background: var(--red); padding: 2px 10px; border-radius: 6px; }
.tax { font-size: 12px; color: var(--muted); margin-top: 2px; }
.offers { margin: 20px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.offer { border: 1px dashed var(--teal); background: var(--teal-light); border-radius: 10px; padding: 10px 12px; font-size: 12px; }
.offer b { display: block; font-size: 13px; color: var(--teal-dark); }
.opt-label { font-size: 14px; font-weight: 600; margin: 20px 0 10px; }
.opt-label span { font-weight: 400; color: var(--muted); }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); transition: box-shadow .15s; }
.swatch.active { box-shadow: 0 0 0 2px var(--teal); }
.sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.size { min-width: 52px; height: 42px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 500; font-size: 14px; }
.size.active { border-color: var(--teal); background: var(--teal-light); color: var(--teal-dark); }
.qty-cart { display: flex; gap: 12px; margin-top: 24px; }
.qty-cart .btn { flex: 1; height: 52px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.qty button { width: 40px; height: 48px; font-size: 20px; }
.qty input { width: 38px; text-align: center; border: none; font-weight: 600; outline: none; background: transparent; }
.qty.sm button { width: 32px; height: 36px; font-size: 16px; }
.qty.sm input { width: 30px; font-size: 14px; }
.buy .btn-outline { width: 100%; margin-top: 12px; height: 52px; }
.assist { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.assist .dot { width: 10px; height: 10px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 4px #dcfce7; flex: none; }
.assist a { color: var(--teal); font-weight: 600; margin-left: auto; white-space: nowrap; }
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; text-align: center; font-size: 12px; color: var(--muted); }
.trust div { padding: 10px 4px; background: var(--soft); border-radius: 10px; }
.trust .ic { font-size: 20px; display: block; margin-bottom: 4px; }
.pincode { margin-top: 20px; }
.pincode form { display: flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.pincode input { flex: 1; border: none; padding: 12px 14px; outline: none; min-width: 0; }
.pincode button { color: var(--teal); font-weight: 600; padding: 0 18px; }
.pin-msg { font-size: 13px; margin-top: 6px; color: var(--teal-dark); min-height: 20px; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Moving highlights strip (infinite marquee with faded edges) */
.marquee { position: relative; overflow: hidden; padding: 16px 0; margin-top: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.marquee-track { display: flex; width: max-content; transition: transform .7s cubic-bezier(.65,0,.35,1); }
.marquee-track.no-anim, .marquee-track.no-anim * { transition: none !important; }
.marquee-item { display: flex; align-items: center; gap: 14px; padding: 0 26px; white-space: nowrap; font-size: 21px; font-weight: 400; color: #4b4b4b; opacity: .4; transition: opacity .5s ease; }
.marquee-item.on { opacity: 1; }
.marquee-item .mi-ic { width: 46px; height: 46px; border-radius: 50%; background: #eef2f7; display: grid; place-items: center; font-size: 20px; flex: none; color: var(--teal-dark); }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { transition: none; }
}
@media (max-width: 640px) {
  .marquee { padding: 14px 0; }
  .marquee-item { font-size: 16px; padding: 0 18px; gap: 10px; }
  .marquee-item .mi-ic { width: 34px; height: 34px; font-size: 16px; }
}
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.spec { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.spec th, .spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; overflow-wrap: anywhere; }
.spec th { width: 40%; background: var(--soft); font-weight: 500; color: var(--muted); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
.info-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.info-card ul { padding-left: 18px; font-size: 14px; color: #444; }
.info-card li { margin-bottom: 4px; }
.highlight { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.highlight:last-child { margin-bottom: 0; }
.highlight.rev .h-img { order: 2; }
.h-img { background: linear-gradient(135deg, var(--teal-light), #fff); border-radius: 20px; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.h-img svg { width: 62%; height: 62%; }
.h-text .kicker { color: var(--teal); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.h-text h3 { font-size: 26px; font-weight: 600; margin: 6px 0 12px; line-height: 1.3; }
.h-text p { color: #4b5563; margin-bottom: 14px; }
.checks { list-style: none; }
.checks li { padding-left: 28px; position: relative; margin-bottom: 8px; font-size: 14px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 11px; display: grid; place-items: center; }
.reviews-head { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.avg { text-align: center; }
.avg .num { font-size: 44px; font-weight: 700; line-height: 1; }
.avg small { color: var(--muted); font-size: 13px; }
.bars { flex: 1; min-width: 220px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.bar { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--star); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.review .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 600; display: grid; place-items: center; flex: none; }
.review .name { font-weight: 600; font-size: 14px; }
.verified { font-size: 11px; color: var(--green); }
/* Write a review */
.write-cta { margin-left: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.write-cta p { font-size: 14px; color: var(--muted); }
.review-form { max-width: 720px; margin: 0 auto 24px; padding: 24px; }
.review-form h3 { font-size: 20px; margin-bottom: 14px; }
.review-form textarea { width: 100%; }
.star-pick { display: flex; align-items: center; gap: 4px; }
.star-pick button { font-size: 32px; line-height: 1; color: #d1d5db; background: none; border: 0; padding: 2px; cursor: pointer; transition: transform .1s; }
.star-pick button.on { color: #f59e0b; }
.star-pick button:hover { transform: scale(1.12); }
.star-pick span { margin-left: 8px; font-size: 14px; }
.rv-verify { margin: 4px 0 12px; font-size: 14px; }
.rv-verify summary { cursor: pointer; color: var(--teal-dark); margin-bottom: 10px; }
.rv-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.rv-done { text-align: center; padding: 16px 0; }
.rv-done .big { font-size: 40px; }
@media (max-width: 640px) { .write-cta { margin-left: 0; width: 100%; } .write-cta .btn { width: 100%; } }
.review p { font-size: 14px; color: #444; margin-top: 8px; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-group-title { font-size: 18px; font-weight: 600; margin: 32px 0 4px; color: var(--teal-dark); }
.faq-group-title:first-child { margin-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; text-align: left; font-weight: 500; font-size: 15px; }
.faq-q .plus { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-light); color: var(--teal); display: grid; place-items: center; font-size: 18px; transition: transform .2s; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: #4b5563; font-size: 14px; }
.faq-a p { padding: 0 4px 18px; }

/* ---------- Cart & checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; padding-bottom: 56px; }
.cart-table { width: 100%; }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-row .ci-img { width: 96px; height: 96px; background: var(--soft); border-radius: 12px; display: grid; place-items: center; }
.cart-row .ci-img svg { width: 80%; height: 80%; }
.cart-row .ci-name { font-weight: 600; }
.cart-row .ci-meta { font-size: 13px; color: var(--muted); margin: 2px 0 10px; }
.cart-row .ci-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cart-row .ci-price { text-align: right; font-weight: 700; }
.cart-row .ci-price small { display: block; font-weight: 400; color: var(--muted); text-decoration: line-through; }
.text-btn { font-size: 13px; color: var(--muted); text-decoration: underline; }
.text-btn:hover { color: var(--red); }
.summary { position: sticky; top: 130px; }
.summary h3 { font-size: 18px; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 18px; font-weight: 700; }
.sum-row .save { color: var(--green); }
.coupon { display: flex; gap: 8px; margin: 16px 0; }
.coupon input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; height: 44px; outline: none; text-transform: uppercase; }
.coupon-msg { font-size: 13px; margin-top: -8px; margin-bottom: 12px; min-height: 18px; }
.mini-items .mi { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mini-items .mi-img { position: relative; width: 60px; height: 60px; background: var(--soft); border-radius: 10px; display: grid; place-items: center; flex: none; }
.mini-items .mi-img svg { width: 80%; }
.mini-items .mi-img b { position: absolute; top: -6px; right: -6px; background: var(--muted); color: #fff; font-size: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.mini-items .mi-name { flex: 1; }
.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; padding-bottom: 56px; }
.step-title { font-size: 18px; font-weight: 600; margin: 28px 0 14px; display: flex; align-items: center; gap: 10px; }
.step-title:first-child { margin-top: 0; }
.step-title .n { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; display: grid; place-items: center; }
.radio-card { display: flex; align-items: flex-start; gap: 12px; border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.radio-card input { accent-color: var(--teal); margin-top: 4px; width: 16px; height: 16px; }
.radio-card:has(input:checked) { border-color: var(--teal); background: var(--teal-light); }
.radio-card .rc-main { flex: 1; }
.radio-card .rc-main b { display: block; font-size: 14px; }
.radio-card .rc-main small { color: var(--muted); font-size: 12px; }
.radio-card .rc-price { font-weight: 600; font-size: 14px; }
/* Online payment instructions + account details */
.pay-info { border: 1.5px dashed var(--teal); background: var(--teal-light); border-radius: 12px; padding: 16px; margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
.pay-info p { margin-bottom: 12px; }
.pay-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pay-acc { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.pay-acc b { display: block; margin-bottom: 6px; }
.pa-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.pa-row span:first-child { color: var(--muted); flex: none; }
.pa-row span:last-child { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.save-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.save-tag:empty { display: none; }
.pay-info .pay-save { background: #dcfce7; color: #166534; border-radius: 8px; padding: 8px 12px; }
.btn-wa { background: #25d366; color: #fff; }
.btn-wa:hover { background: #1ebe5b; }
.success { max-width: 640px; margin: 0 auto; text-align: center; padding: 56px 0; }
.success .tick { width: 84px; height: 84px; border-radius: 50%; background: #dcfce7; color: var(--green); font-size: 42px; display: grid; place-items: center; margin: 0 auto 20px; }
.success h1 { font-size: 30px; }
.order-box { text-align: left; margin-top: 28px; }
.order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; margin-bottom: 16px; }
.order-meta small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- Tracking ---------- */
.timeline { list-style: none; margin-top: 24px; position: relative; }
.timeline li { position: relative; padding: 0 0 26px 40px; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: grid; place-items: center; color: #fff; font-size: 12px; }
.timeline li.done .dot { background: var(--teal); }
.timeline li.done::before { background: var(--teal); }
.timeline li.current .dot { background: var(--teal); box-shadow: 0 0 0 5px var(--teal-light); }
.timeline b { display: block; font-size: 15px; }
.timeline small { color: var(--muted); }

/* ---------- Account ---------- */
.auth { max-width: 460px; margin: 0 auto; padding: 48px 0; }
.tabs { display: flex; background: var(--soft); border-radius: 12px; padding: 4px; margin-bottom: 24px; }
.tabs button { flex: 1; padding: 10px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); }
.tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.acct-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; padding: 32px 0 56px; }
.acct-nav { display: flex; flex-direction: column; gap: 4px; }
.acct-nav button { text-align: left; padding: 12px 16px; border-radius: 10px; font-weight: 500; }
.acct-nav button.active, .acct-nav button:hover { background: var(--teal-light); color: var(--teal-dark); }
.order-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.order-card .oc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--teal-light); color: var(--teal-dark); }

/* ---------- Content pages ---------- */
.prose { max-width: 780px; margin: 0 auto; font-size: 15px; color: #374151; }
.prose h2 { font-size: 22px; color: var(--ink); margin: 32px 0 10px; }
.prose h3 { font-size: 17px; color: var(--ink); margin: 24px 0 8px; }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 14px; }
.prose li { margin-bottom: 6px; }
.policy-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; padding: 40px 0 56px; }
.policy-nav { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 4px; }
.policy-nav a { padding: 10px 14px; border-radius: 10px; font-weight: 500; font-size: 14px; }
.policy-nav a.active, .policy-nav a:hover { background: var(--teal-light); color: var(--teal-dark); }
.policy-layout .prose { margin: 0; }
.updated { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.contact-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: none; }
.contact-item .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--teal-light); display: grid; place-items: center; font-size: 20px; flex: none; }
.contact-item b { display: block; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats .num { font-size: 34px; font-weight: 700; color: var(--teal); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split .art { background: linear-gradient(135deg, var(--teal-light), #fff); border-radius: 20px; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.split .art svg { width: 55%; }
.split h2 { font-size: 28px; margin-bottom: 12px; line-height: 1.25; }
.split p { color: #4b5563; margin-bottom: 12px; }
.blog-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: box-shadow .2s; }
.blog-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.blog-card .bc-img { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.blog-card .bc-img svg { height: 70%; width: auto; }
.blog-card .bc-body { padding: 18px 20px 22px; }
.blog-card .bc-meta { font-size: 12px; color: var(--muted); }
.blog-card h3 { font-size: 18px; margin: 6px 0 8px; line-height: 1.35; }
.blog-card p { font-size: 14px; color: #4b5563; }
/* Cards side by side, each taking half the width */
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.blog-grid .bc-img { aspect-ratio: auto; height: clamp(200px, 20vw, 340px); }
.blog-grid .bc-img svg { height: 72%; width: auto; }
.blog-grid .bc-body { padding: 20px 24px 24px; }
.blog-grid h3 { font-size: 20px; }
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-grid .bc-img { height: 200px; }
}
.post-hero { aspect-ratio: 21 / 8; border-radius: 20px; display: grid; place-items: center; margin-bottom: 32px; }
.post-hero svg { height: 70%; width: auto; }
/* Picture = product photo shown as a white card on the post colour */
.bc-img, .post-hero { position: relative; overflow: hidden; }
.post-img { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); height: 84%; width: auto; max-width: 90%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.job { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 12px; flex-wrap: wrap; }
.job h3 { font-size: 17px; }
.job .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.job .tags span { font-size: 12px; background: var(--soft); padding: 3px 10px; border-radius: 20px; color: var(--muted); }

/* ---------- Footer ---------- */
.biz { background: var(--teal); color: #fff; }
.biz .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 28px; flex-wrap: wrap; }
.biz h3 { font-size: 20px; font-weight: 600; }
.biz a { background: #fff; color: var(--teal-dark); font-weight: 600; padding: 10px 22px; border-radius: 30px; }
footer.site { background: #111827; color: #d1d5db; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; padding-block: 52px 32px; }
.foot-brand .app-btns { margin-top: 18px; flex-direction: row; flex-wrap: wrap; }
.foot-link { color: #fff; font-weight: 600; }
footer.site { background: #0f0f0f; }
footer.site h4 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: 9px; }
footer.site a:hover { color: #fff; }
.foot-logo { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a { width: 36px; height: 36px; border-radius: 50%; background: #1f2937; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.socials a:hover { background: var(--teal); }
.app-btns { display: flex; flex-direction: column; gap: 10px; }
.app-btns a { border: 1px solid #374151; border-radius: 8px; padding: 8px 14px; display: flex; gap: 10px; align-items: center; }
.app-btns small { display: block; font-size: 10px; color: #9ca3af; }
.pay { border-top: 1px solid #1f2937; padding-block: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9ca3af; }
.pay-logos { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-logos span { background: #fff; color: #111; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 5px; }

/* ---------- Drawer, overlay, toast ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90; }
.overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(400px, 100%); background: #fff; z-index: 100; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.drawer.show { transform: none; }
.drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 17px; }
.close-x { font-size: 26px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; }
.close-x:hover { background: var(--soft); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.free-ship { background: var(--teal-light); border-radius: 10px; padding: 12px; font-size: 13px; margin-bottom: 8px; }
.progress { height: 6px; background: #fff; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.d-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.d-item .d-img { width: 72px; height: 72px; background: var(--soft); border-radius: 10px; display: grid; place-items: center; flex: none; }
.d-item .d-img svg { width: 80%; }
.d-info { flex: 1; font-size: 14px; }
.d-info .muted { font-size: 12px; }
.d-info .d-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
.drawer-foot .tot { display: flex; justify-content: space-between; font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.drawer-foot .note { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.drawer-foot .btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.toast { position: fixed; bottom: 90px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 14px; opacity: 0; transition: .25s; z-index: 120; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobile-bar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .product, .hero .container, .split, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .gallery, .summary, .filters, .policy-nav { position: static; }
  .features, .why, .usp-strip .container, .stats { grid-template-columns: repeat(2, 1fr); }
  .details-grid, .highlight { grid-template-columns: 1fr; gap: 24px; }
  .highlight.rev .h-img { order: 0; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
  .cart-layout, .checkout-layout, .acct-layout, .policy-layout { grid-template-columns: 1fr; }
  .checkout-layout .summary { order: -1; }
  .shop-layout { grid-template-columns: 1fr; }
  .filters { display: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
  .filters.open { display: block; }
  .filter-toggle { display: inline-flex; }
  .promo { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
  .banner { height: 560px; }
  .slide-art { width: min(56vw, 460px); right: 2%; }
  .slide-title { font-size: 48px; }
  .slide-label { font-size: 22px; }
  .policy-nav, .acct-nav { flex-direction: row; overflow-x: auto; }
  .policy-nav a, .acct-nav button { white-space: nowrap; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  body.has-mobile-bar { padding-bottom: 76px; }
  .container { padding-inline: 16px; }
  .announce { font-size: 12px; padding: 6px 12px; }
  .header-row { gap: 8px; height: 60px; }
  .header-row > .search { display: none; }
  .logo { font-size: 23px; }
  .header-icons { gap: 2px; }
  .icon-btn { width: 38px; height: 38px; }
  .thumb { flex-basis: 64px; height: 64px; }
  .spec th, .spec td { padding: 11px 12px; }
  .gal-nav.prev { left: 8px; } .gal-nav.next { right: 8px; }
  .menu-toggle, .search-toggle { display: grid; }
  .grid, .grid.cols-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pcard .p-body { padding: 10px 12px 12px; }
  .pcard .p-name { font-size: 13px; }
  .pcard .p-price .now { font-size: 15px; }
  .pcard .btn { height: 38px; font-size: 13px; padding: 0 10px; }
  .buy h1 { font-size: 21px; }
  .price { font-size: 26px; }
  .offers { grid-template-columns: 1fr; }
  .trust { grid-template-columns: repeat(2, 1fr); }
  .features, .reviews, .why, .usp-strip .container { grid-template-columns: 1fr; }
  .sec-title, .h-text h3 { font-size: 22px; }
  section.block { padding: 40px 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .btn-cart { height: 38px; font-size: 12px; letter-spacing: .3px; }
  .p-tags span:nth-child(2) { display: none; }
  .hero h1 { font-size: 30px; }
  /* Short, wide phone hero (2:1), like a strip banner. Swipe to change slides; small dots only. */
  .banner { height: 50vw; min-height: 180px; }
  .slide-art { top: 50%; right: 4%; transform: translateY(-50%); width: 40vw; filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)); }
  .slide-art > img { border-radius: 12px; }
  .slide-inner { align-items: center; padding-bottom: 6px; }
  .slide-text { max-width: 54%; }
  .slide-label { font-size: 11px; }
  .slide-title { font-size: 17px; line-height: 1.15; letter-spacing: 0; margin: 2px 0 8px; }
  .btn-yellow { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
  .banner-controls { bottom: 6px; }
  .banner-controls .container { justify-content: center; }
  .banner-arrows { display: none; }
  .banner-dots { gap: 5px; }
  .banner-dots button { width: 5px; height: 5px; }
  .banner-dots button.near { width: 6px; height: 6px; }
  .banner-dots button.active { width: 16px; height: 6px; }
  .announce { font-size: 13px; padding: 8px 12px; }
  .hero .container { padding-block: 36px; }
  .promo .txt { padding: 28px; }
  .promo h2 { font-size: 24px; }
  .promo .art { min-height: 0; padding: 30px 16px 22px; gap: 10px; }
  .biz-tile { border-radius: 12px; }
  .biz-tile:nth-child(2) { transform: translateY(-8px); }
  .newsletter { padding: 24px; }
  .newsletter form { flex-direction: column; }
  .newsletter .btn { width: 100%; }
  .row-2, .row-3, .order-meta { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: 26px; }
  .cart-row { grid-template-columns: 72px 1fr; }
  .cart-row .ci-img { width: 72px; height: 72px; }
  .cart-row .ci-price { grid-column: 2; text-align: left; }
  .mobile-bar { display: flex; gap: 10px; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 60; }
  .mobile-bar .btn { flex: 1; }
  .mobile-bar .mp { font-weight: 700; font-size: 18px; }
  .mobile-bar .mp small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); text-decoration: line-through; }
  .toast { bottom: 96px; }
}

/* Product gallery takes the shape of the product's photos (set as --ar by product.html, e.g. 0.8 for 4:5),
   so a tall photo fills the full width on mobile with no white side bars. On wide screens the gallery is
   narrowed instead of letterboxed, so the whole photo still fits on screen. */
.main-img { aspect-ratio: var(--ar, 1); }
.main-img:has(.svg-wrap > img) { max-width: calc(min(78vh, 760px) * var(--ar, 1)); margin-inline: auto; width: 100%; }
#thumbs { max-width: calc(min(78vh, 760px) * var(--ar, 1)); margin-inline: auto; }

/* Desktop: show three demo videos side by side (mobile keeps the swipeable 46% cards) */
@media (min-width: 981px) {
  .reels.reels-inline { grid-auto-columns: calc((100% - 28px) / 3); }
  .reels-inline .reel-head { font-size: 12.5px; line-height: 1.3; gap: 6px; padding: 8px 10px; }
  .reels-inline .reel-avatar { display: none; }
}

/* "Why you'll love it" photos: keep each photo's own shape (no cropping, no side bars); tall photos are capped and centred */
.highlight .h-img:has(> img) { aspect-ratio: auto; background: none; display: flex; justify-content: center; }
.highlight .h-img > img { width: auto; height: auto; max-width: 100%; max-height: min(80vh, 640px); object-fit: contain; border-radius: 20px; }

/* Hero banner keeps the artwork's own 2:1 shape on tablet/desktop, so nothing is cropped (phones already use 50vw = 2:1) */
@media (min-width: 641px) {
  /* full 2:1 artwork, but never taller than the screen below the header: on very wide screens the artwork is centred
     and the sides take the slide's own dark colour (--slide-bg), so nothing is cropped */
  .banner { aspect-ratio: auto; height: min(50vw, calc(100vh - 190px)); min-height: 0; max-height: none; }
  .slide-photo.plain { background-image: none; background-color: var(--slide-bg, #111); overflow: hidden; }
  /* soft blurred copy fills the sides, the sharp artwork sits on top uncropped */
  .slide-photo.plain::before { content: ""; position: absolute; inset: -40px; background: var(--img) center / cover no-repeat; filter: blur(28px) brightness(.75); }
  .slide-photo.plain::after { display: block; content: ""; position: absolute; inset: 0; background: var(--img) center / contain no-repeat; }
}

/* Phones: smaller demo videos (one full card + the edge of the next, so it is clear they swipe) */
@media (max-width: 640px) {
  .reels, .reels.reels-inline { grid-auto-columns: 58%; gap: 10px; }
  .reels .reel-head { font-size: 13px; gap: 8px; padding: 9px 11px; }
}

/* Floating WhatsApp button (number + message rotation in assets/js/wa.js) */
.wa-float { position: fixed; right: 18px; bottom: 22px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); transition: transform .2s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float img { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
  .wa-float { width: 52px; height: 52px; right: 14px; bottom: 18px; }
  body:has(.mobile-bar) .wa-float { bottom: 92px; }   /* product page: sit above the Add to Cart bar */
}

/* Phones: sticky Add to Cart bar only after scrolling past the page's own buttons (.show set by product.html) */
@media (max-width: 640px) {
  .mobile-bar { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .mobile-bar.show { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  body:has(.mobile-bar) .wa-float { bottom: 18px; transition: transform .2s, bottom .25s ease; }
  body:has(.mobile-bar.show) .wa-float { bottom: 92px; }
}


/* Product page: Cash on Delivery + Free Delivery boxes side by side on phones too (compact) */
@media (max-width: 640px) {
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
  .offer { padding: 6px 8px; font-size: 10px; line-height: 1.3; border-radius: 8px; }
  .offer b { font-size: 11.5px; margin-bottom: 0; }
}

/* Product page offer boxes: heading only, centred (sub-line hidden on all screens) */
.offer { font-size: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.offer > *:not(b) { display: none; }
.offer b { font-size: 14px; margin: 0; }
@media (max-width: 640px) { .offer { padding: 9px 6px; } .offer b { font-size: 12.5px; } }

/* Product page: "Order Now - Cash On Delivery" is the main (filled) button, Add to Cart is the outline one */
.buy #buyNow { width: 100%; margin-top: 12px; height: 60px; font-size: 21px; font-weight: 800; letter-spacing: .2px;
  animation: gfShake 3.2s ease-in-out 1s infinite; transform-origin: center; }
.buy #addBtn { background: #fff; }
/* short attention shake every ~3 s, still the rest of the time */
@keyframes gfShake {
  0%, 82%, 100% { transform: translateX(0) rotate(0); }
  84% { transform: translateX(-5px) rotate(-1deg); }
  87% { transform: translateX(5px) rotate(1deg); }
  90% { transform: translateX(-4px) rotate(-.7deg); }
  93% { transform: translateX(4px) rotate(.7deg); }
  96% { transform: translateX(-2px) rotate(0); }
}
.buy #buyNow:hover, .buy #buyNow:focus-visible, .buy #buyNow:disabled { animation: none; }
@media (max-width: 640px) { .buy #buyNow { height: 58px; font-size: 18.5px; } }
@media (max-width: 340px) { .buy #buyNow { font-size: 16.5px; } }
@media (prefers-reduced-motion: reduce) { .buy #buyNow { animation: none; } }

/* Product title: highlighted words */
.name-hl { color: #E11D48; }

.btn.is-busy { opacity: .75; cursor: progress; animation: none !important; }

/* Checkout: quantity stepper in the order summary (min 1, order max 3) + green free delivery */
.co-qty { display: inline-flex; align-items: center; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.co-qty button { width: 30px; height: 28px; font-size: 16px; line-height: 1; background: #fff; color: var(--ink); }
.co-qty button:disabled { color: #c4c4c4; cursor: not-allowed; }
.co-qty span { min-width: 26px; text-align: center; font-size: 13px; font-weight: 600; }
.sum-row.free-del, .sum-row.free-del span, .free-del { color: #16a34a; font-weight: 700; }

/* Checkout: delivery time line under Confirm Order */
.del-time { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 14px; }
.del-time b { font-weight: 700; }

/* GudFinds brand: black + yellow */
.announce { background: #111; color: #FFC21A; }
.gf-hero { background: linear-gradient(120deg, #fff7d6 0%, #fffbea 55%, #fff 100%); }
.gf-hero .kicker { background: #111; color: #FFC21A; }
.gf-hero h1 em { color: #E0A800; }
.grid.gf-one { grid-template-columns: minmax(0, 340px); justify-content: center; }

/* GudFinds logo size (wide 3:1 logo) */
.logo img { height: 46px; }
.foot-logo img { height: 46px; }
@media (max-width: 640px) { .logo img { height: 34px; } .foot-logo img { height: 40px; } }
@media (max-width: 360px) { .logo img { height: 29px; } }