/* ============================================================
   WANIA ENTERPRISE — landing page (Bangla)

   Deliberately single-theme. The audience is mothers shopping for
   baby gear, so the page commits to a bright nursery palette rather
   than shipping a dark variant; every colour is stated explicitly and
   the body paints its own ground, so it holds on either host theme.

   Typefaces: Baloo Da 2 (rounded display) + Hind Siliguri (text).
   Both SIL OFL 1.1, embedded because font CDNs are blocked.
   ============================================================ */

@font-face{
  font-family:'Baloo Da 2';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/BalooDa2-latin-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Baloo Da 2';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/BalooDa2-bengali-700.woff2) format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC,U+A8F1;
}
/* Baloo is only ever set at 700 here, so the 500 weight is not embedded. */
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/HindSiliguri-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/HindSiliguri-bengali-400.woff2) format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC,U+A8F1;
}
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/HindSiliguri-latin-600.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hind Siliguri';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/HindSiliguri-bengali-600.woff2) format('woff2');
  unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+200C-200D,U+20B9,U+25CC,U+A8F1;
}

:root{
  --ground:#FFFDFA;
  --surface:#FFFFFF;
  --ink:#1F4468;        /* headings */
  --body:#4A5C6B;       /* running text */
  --muted:#8595A2;
  --blue:#BFE0F2;
  --blue-deep:#26608F;  /* buttons, links */
  --blush:#FBD9DC;
  --butter:#FCE9B8;
  --mint:#CDEBDC;
  --coral:#E4573D;      /* prices, discounts */
  --line:#E6EEF4;
  --shadow:0 22px 45px -28px rgba(31,68,104,.5);
  --shadow-sm:0 12px 26px -18px rgba(31,68,104,.45);
  --maxw:1180px;
  --display:'Baloo Da 2','Nirmala UI','Noto Sans Bengali',system-ui,sans-serif;
  --text:'Hind Siliguri','Nirmala UI','Noto Sans Bengali',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:var(--text);font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);line-height:1.32;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--blue-deep);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.section{padding-block:clamp(48px,7vw,88px)}
.eyebrow{
  font-family:var(--text);font-size:.82rem;font-weight:600;letter-spacing:.06em;
  color:var(--blue-deep);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;flex:none}
.h2{font-size:clamp(1.65rem,3.6vw,2.5rem)}
.lede{color:var(--body);max-width:56ch}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--text);font-size:.97rem;font-weight:600;line-height:1.2;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.btn-primary:hover{background:#1C4E76;border-color:#1C4E76}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.btn-wa{background:#1EA34D;color:#fff;border-color:#1EA34D}
.btn-wa:hover{background:#178A41;border-color:#178A41}
.btn svg{width:18px;height:18px;flex:none}

/* ============ top bar ============ */
.topbar{background:var(--blue-deep);color:#EAF4FB;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:center;align-items:center;gap:6px 24px;flex-wrap:wrap;padding-block:8px;text-align:center}
.topbar .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}

/* ============ header ============ */
.header{position:sticky;top:0;z-index:60;background:rgba(255,253,250,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header > .wrap{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);padding-block:12px}
.brand{flex:none}
/* The lockup is ~3.6:1, not the ~7.6:1 of the logo it replaced, so the same
   40px height would render the wordmark about 6px tall. Even at the top of
   this clamp it is still narrower than the old logo was at 40px, so the
   header loses no horizontal room — only the wordmark gets readable again. */
.brand img{height:clamp(48px,5.4vw,60px);width:auto}
.nav{display:flex;gap:clamp(10px,1.7vw,24px);margin-inline-start:auto;align-items:center}
.nav a{font-size:.96rem;font-weight:600;color:var(--body);white-space:nowrap;padding-block:6px;position:relative;transition:color .18s ease}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2.5px;border-radius:2px;background:var(--blue-deep);transition:right .25s ease}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.header-cta{display:flex;align-items:center;gap:9px;flex:none}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .18s ease,color .18s ease;
}
.icon-btn:hover{border-color:var(--blue-deep);color:var(--blue-deep)}
.icon-btn svg{width:19px;height:19px}

.menu-btn{display:none}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--ground)}
.mobile-nav ul{list-style:none;margin:0;padding:8px 0 14px;display:flex;flex-direction:column}
.mobile-nav ul a{display:block;padding:13px 2px;font-size:1.02rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-nav ul li:last-child a{border-bottom:0}
.mobile-nav > .wrap > .btn{margin-bottom:16px;width:100%}
@media(max-width:960px){
  .nav{display:none}
  .menu-btn{display:grid}
  .header.is-open .mobile-nav{display:block}
}
@media(max-width:600px){.header-cta .btn{display:none}}

/* ============ hero slider ============ */
.hero{padding:clamp(14px,2.4vw,26px) 0 0}
.slider{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.track{display:flex;transition:transform .6s cubic-bezier(.65,.05,.36,1)}
@media (prefers-reduced-motion:reduce){.track{transition:none}}
.slide{
  flex:0 0 100%;min-width:100%;position:relative;
  display:flex;align-items:center;
  min-height:clamp(430px,45vw,545px);
}
/* Panel colours are sampled from each photograph's own studio sweep, not from
   the site tokens — so the picture dissolves into the slide rather than sitting
   on it as a rectangle, and the headline gets unlimited clean space beside it. */
.slide-1{background:#B2D1E1}
.slide-2{background:#F6D79D}
.slide-3{background:#C1E2D2}

.slide-copy{
  position:relative;z-index:2;width:min(52%,560px);
  padding:clamp(26px,4vw,52px) clamp(14px,2vw,26px) clamp(26px,4vw,52px) clamp(24px,4vw,56px);
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
}
.slide h2{font-size:clamp(1.7rem,3.7vw,2.8rem);line-height:1.26}
/* darkened against the deeper photo backdrops so the copy keeps its contrast */
.slide-copy .eyebrow{color:#1F4468}
.slide-copy .lede{font-size:1.02rem;max-width:34ch;color:#33485C}
.slide-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}

/* Pinned to the full height of the slide so the photograph never letterboxes —
   a gap above it would expose the join between sweep and panel. */
.slide-media{position:absolute;top:0;bottom:0;right:0;z-index:1;display:flex;align-items:flex-end}
.slide-media img{
  height:100%;width:auto;max-width:none;
  /* feather the inner edge so the sweep's vignette never reads as a seam */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);
  mask-image:linear-gradient(to right,transparent 0,#000 16%);
}

.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:background .18s ease,transform .18s ease;
}
.slider-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.slider-btn svg{width:20px;height:20px}
.slider-prev{left:14px}
.slider-next{right:14px}
.dots{position:absolute;left:0;right:0;bottom:16px;z-index:5;display:flex;justify-content:center;gap:9px}
.dots button{
  width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(31,68,104,.28);transition:background .2s ease,width .2s ease;
}
.dots button[aria-current="true"]{background:var(--blue-deep);width:28px;border-radius:999px}

@media(max-width:820px){
  /* Picture above, words below — the two never sit on top of each other. */
  .slide{flex-direction:column;align-items:stretch;min-height:0}
  .slide-media{position:static;order:1;justify-content:center;padding-top:14px}
  /* fixed height keeps all three slides the same depth; the side feather hides
     the sweep's vignette where it meets the panel */
  .slide-media img{
    height:min(38vh,290px);width:auto;max-width:100%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  }
  .slide-copy{order:2;width:100%;padding:clamp(16px,4vw,24px) clamp(20px,5vw,28px) 46px;gap:13px}
  .slide h2{font-size:clamp(1.5rem,6vw,2rem)}
  .slider-btn{width:38px;height:38px}
  .slider-prev{left:8px}
  .slider-next{right:8px}
  .dots{bottom:10px}
}

/* ============ section head ============ */
.sec-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:clamp(26px,3.6vw,44px)}

/* ============ categories ============ */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.9vw,22px)}
.cat{display:block;border-radius:24px;padding:20px 18px 22px;text-align:center;transition:transform .28s ease,box-shadow .28s ease}
.cat:nth-child(1){background:var(--blue)}
.cat:nth-child(2){background:var(--blush)}
.cat:nth-child(3){background:var(--butter)}
.cat:nth-child(4){background:var(--mint)}
.cat:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
/* flex, not grid: a percentage max-height on a grid item resolves against the
   auto-sized row, which lets the image blow past the fixed container height */
.cat-media{height:clamp(140px,15vw,180px);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cat-media img{max-height:100%;width:auto;object-fit:contain;transition:transform .35s ease;filter:drop-shadow(0 14px 16px rgba(31,68,104,.18))}
.cat:hover .cat-media img{transform:scale(1.06)}
.cat b{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.1rem;line-height:1.4}
.cat span{font-size:.87rem;color:#5E7183}
@media(max-width:820px){.cat-grid{grid-template-columns:repeat(2,1fr)}}

/* ============ products ============ */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,28px)}
.prod{
  background:var(--surface);border:2px solid var(--line);border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s ease,box-shadow .28s ease;
}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.prod-media{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.prod-media img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .4s ease}
.prod:hover .prod-media img{transform:scale(1.04)}
.save{
  position:absolute;top:14px;inset-inline-start:14px;z-index:2;background:var(--coral);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.86rem;padding:5px 14px;border-radius:999px;
}
.prod-body{padding:20px clamp(16px,2vw,24px) 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.prod-cat{font-size:.84rem;font-weight:600;color:var(--blue-deep)}
.prod h3{font-size:1.16rem;line-height:1.42}
.spec-list{display:flex;flex-wrap:wrap;gap:7px}
.spec{font-size:.83rem;font-weight:600;color:#54677A;background:#F1F7FB;border-radius:9px;padding:4px 11px}
.price{display:flex;align-items:baseline;gap:11px;margin-top:auto;padding-top:6px}
.price .now{font-family:var(--display);font-weight:700;font-size:1.7rem;color:var(--coral);line-height:1.3}
.price .was{font-size:.98rem;color:var(--muted);text-decoration:line-through}
.prod-actions{display:flex;gap:9px;flex-wrap:wrap}
.prod-actions .btn{flex:1;min-width:145px;padding:12px 18px;font-size:.92rem}
@media(max-width:700px){.prod-grid{grid-template-columns:1fr}}

/* ============ cta ============ */
.cta-inner{
  background:linear-gradient(135deg,#D7ECF8 0%,#CDEBDC 100%);
  border-radius:28px;padding:clamp(30px,4.6vw,58px) clamp(24px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-inner::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.4);top:-80px;right:12%;pointer-events:none}
.cta-copy{position:relative;z-index:2;max-width:44ch;display:flex;flex-direction:column;gap:12px}
.cta-copy h2{font-size:clamp(1.5rem,3.1vw,2.2rem)}
.cta-actions{position:relative;z-index:2;display:flex;gap:11px;flex-wrap:wrap}

/* ============ footer ============ */
.footer{background:#F3F8FB;border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) 0;margin-top:clamp(40px,5vw,70px)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:clamp(22px,3.6vw,44px)}
.foot-brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.foot-brand img{height:56px;width:auto}
.foot-brand p{font-size:.92rem;color:var(--muted);max-width:32ch}
.socials{display:flex;gap:9px}
.socials a{width:38px;height:38px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;color:var(--body);transition:all .18s ease}
.socials a:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.socials svg{width:17px;height:17px}
.foot-col h4{font-family:var(--display);font-weight:700;font-size:1.04rem;color:var(--ink);margin:0 0 12px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-col a{font-size:.93rem;color:var(--body);transition:color .18s ease}
.foot-col a:hover{color:var(--blue-deep)}
.foot-contact{display:flex;flex-direction:column;gap:11px}
.foot-contact div{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--body)}
.foot-contact svg{width:17px;height:17px;color:var(--blue-deep);flex:none;margin-top:5px}
.foot-bottom{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line);padding-block:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.86rem;color:var(--muted)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.foot-grid{grid-template-columns:1fr}}

/* floating whatsapp */
.wa{
  position:fixed;inset-inline-end:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#1EA34D;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(30,163,77,.8);transition:transform .2s ease;
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px;height:28px}

/* entrance, gated on .js so the page reads fine without scripting */
.js .rise{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none}}

/* ---------- cart badge in the header ---------- */
.cart-btn{position:relative}
.cart-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--coral);color:#fff;
  font-family:var(--text);font-size:11px;font-weight:600;line-height:18px;
  text-align:center;box-sizing:border-box}

/* ================= product landing page =================
   Additive only. .btn, .wrap and .section are already defined above and are
   reused, not redefined -- redefining .btn would restyle the header's
   WhatsApp button. New button variants below only add modifiers. */
.btn-block{width:100%;padding:16px;font-size:1.05rem}
.btn-sm{padding:10px 18px;font-size:.9rem}

.product-page{padding-bottom:8px}

/* ---------- 1. hero ----------
   A centred stack, not a two-column split. The traffic here arrives from an ad
   on a phone, where the only thing that matters is that the headline, the
   photograph and the button all land on the first screen. Capped so the same
   arrangement does not sprawl across a desktop. */
.lp-hero{background:var(--ground);padding:24px 0 8px;text-align:center}
.lp-hero>.wrap{max-width:680px}
@media(min-width:900px){.lp-hero{padding:40px 0 16px}}
.lp-hero .lp-intro{margin-bottom:28px}
.lp-hero .lp-gallery{margin-bottom:28px}
.lp-hero .lp-price{justify-content:center}
.lp-hero .trust-strip{justify-items:center}
/* Fixed 4:5 frame, matching the width/height attributes on the tag: the main
   image is swapped by the thumbnails, and letting each photo set its own
   height made the whole page jump on every click. Portrait rather than square
   because a stroller is a tall object and the square crop was spending half
   the frame on floor.

   contain, not cover: product shots arrive as cutouts on white, and cover was
   slicing the wheels or the canopy off whichever way the photo was framed. */
.lp-gallery{position:relative}
.lp-gallery-frame{position:relative;max-width:430px;margin:0 auto}
.lp-gallery #gallery-main{display:block;width:100%;aspect-ratio:4/5;border-radius:14px;
  background:var(--surface);object-fit:contain}

/* Chevrons, centred on the frame. Tinted rather than solid so they read as
   controls over the photograph without hiding part of the product. */
.lp-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.82);color:var(--ink);font-size:24px;line-height:1;
  box-shadow:0 2px 10px rgba(31,68,104,.16);transition:background .18s ease}
.lp-gallery-nav:hover{background:#fff}
.lp-gallery-nav.is-prev{left:6px}
.lp-gallery-nav.is-next{right:6px}
.gallery-thumbs{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.thumb{border:2px solid transparent;border-radius:12px;padding:0;background:none;cursor:pointer;line-height:0}
.thumb.is-active{border-color:var(--blue-deep)}
.thumb img{width:74px;height:74px;border-radius:10px;object-fit:cover;background:var(--mint)}

/* Dot pagination. The same buttons as the thumbnail rail — the markup and the
   script are unchanged, the photograph inside each one is simply not drawn.
   A large invisible hit area keeps the dots tappable at 10px wide. */
.gallery-thumbs.is-dots{justify-content:center;gap:10px;margin-top:22px}
.gallery-thumbs.is-dots .thumb{border:0;width:10px;height:10px;border-radius:50%;
  background:var(--blue);position:relative;transition:background .18s ease,transform .18s ease}
.gallery-thumbs.is-dots .thumb::after{content:"";position:absolute;inset:-9px}
.gallery-thumbs.is-dots .thumb img{display:none}
.gallery-thumbs.is-dots .thumb.is-active{background:var(--blue-deep);transform:scale(1.25)}

.lp-flag{display:inline-block;background:var(--coral);color:#fff;border-radius:999px;
         padding:5px 14px;font-weight:600;font-size:.88rem;margin-bottom:14px}
/* The headline is the whole first screen on the phone this traffic arrives
   from, so it is sized to dominate rather than to label. Line-height is pulled
   in to 1.25 because Bangla conjuncts at this size leave the default spacing
   looking like three separate sentences. */
.lp-intro h1{font-family:var(--display);color:var(--ink);font-weight:800;
             font-size:clamp(30px,7vw,52px);line-height:1.25;letter-spacing:-.01em;margin:0 0 14px}
.lp-tagline{color:var(--body);font-size:1.02rem;line-height:1.65;
            max-width:560px;margin:0 auto 4px}

/* Offer beside regular, each with its own label -- the ad promises a discount
   and the page has to show the arithmetic, not just a struck-through number. */
.lp-price{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
          background:var(--butter);border-radius:18px;padding:16px 20px;margin:0 0 18px}
.lp-price-now strong{display:block;font-family:var(--display);color:var(--coral);
                     font-size:clamp(28px,6.4vw,38px);line-height:1.1}
.lp-price-was s{display:block;font-family:var(--display);color:var(--muted);font-size:1.35rem;line-height:1.2}
.lp-price span{display:block;color:var(--body);font-size:.85rem}
.lp-hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:10px}
.lp-hero-cta .btn{flex:1 1 200px}
/* .btn is already inline-flex and centred; this only stops a bare anchor from
   inheriting the surrounding text alignment when it sits in a centred band. */
.lp-cta{text-align:center}
/* Every in-page CTA is the same pill, so a visitor scrolling the funnel keeps
   meeting one recognisable button rather than a different shape per section. */
.lp-cta,.lp-hero-cta .btn{border-radius:999px;padding-inline:30px}
/* Halo ring, as on the reference: a second pill drawn just outside the first
   in the same colour at low opacity, so the button reads as the thing to press
   without needing to be any larger. */
.lp-section>.wrap>.lp-cta,.lp-trust-band .lp-cta,.lp-offer .lp-cta{
  box-shadow:0 0 0 6px rgba(38,96,143,.12)}
/* Centred without centring the section: the cards inside these blocks keep
   their own left-aligned text. */
.lp-section>.wrap>.lp-cta,.lp-trust-band .lp-cta{
  display:flex;width:fit-content;margin:22px auto 0}

/* The product's own name, picked out inside a section heading. Coral rather
   than a new colour: it is the same accent the eyebrow and the price already
   use, so the heading ties to them instead of introducing a fourth voice. */
.lp-h2-accent{color:var(--coral)}

/* The small caps label above a section heading. */
.lp-eyebrow{text-align:center;color:var(--coral);font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}

.trust-strip{list-style:none;display:grid;gap:8px;padding:0;margin:16px 0 0;
             grid-template-columns:repeat(auto-fit,minmax(150px,1fr));color:var(--body);font-size:.95rem}
.stock-out{background:var(--blush);color:var(--ink);padding:14px 18px;border-radius:14px}

/* ---------- 2. promise strip ---------- */
.lp-marquee{background:var(--blue-deep);color:#fff;overflow:hidden;padding:11px 0;margin:18px 0 0}
.lp-marquee-track{display:flex;width:max-content;animation:lp-scroll 28s linear infinite}
.lp-marquee-list{display:flex;gap:34px;list-style:none;margin:0;padding:0 17px;white-space:nowrap;font-size:.95rem}
@keyframes lp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Reduced motion gets a static strip that scrolls by hand instead. */
@media (prefers-reduced-motion:reduce){
  .lp-marquee{overflow-x:auto}
  .lp-marquee-track{animation:none;width:auto}
  .lp-marquee-list[aria-hidden="true"]{display:none}
}

/* ---------- shared section rhythm ---------- */
.lp-section{padding:44px 0}
/* Sized to sit a clear step below the hero h1 but well above body copy — at
   the old 30px cap the section headings were competing with the card text
   underneath them rather than introducing it. */
.lp-h2{font-family:var(--display);color:var(--ink);font-weight:800;
       font-size:clamp(23px,4.8vw,40px);line-height:1.3;
       text-align:center;margin:0 0 26px}

/* ---------- 3. headline band ---------- */
.lp-band{background:var(--mint);padding:38px 0;margin-top:18px;text-align:center}
.lp-band h2{font-family:var(--display);color:var(--ink);font-size:clamp(21px,4.6vw,31px);margin:0 auto;max-width:760px}
.lp-band .lp-cta{margin-top:20px}

/* Product video. Capped at 520px so a portrait phone clip does not become a
   full-height wall on desktop; aspect-ratio holds the space before the poster
   loads, which is what stops the sections below jumping down. */
.lp-video{display:flex;justify-content:center}
.lp-video video{width:100%;max-width:520px;aspect-ratio:16/9;object-fit:contain;
  background:#000;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.12)}

/* ---------- 4. benefits ----------
   Two columns of ticked rows. Each card leads with its tick so the column
   scans as a checklist of things the product does, which is the job this
   block does in the funnel. */
.lp-benefits{background:var(--ground)}
.lp-benefit-grid{list-style:none;display:grid;gap:12px;padding:0;margin:0;
                 grid-template-columns:1fr}
@media(min-width:760px){.lp-benefit-grid{grid-template-columns:1fr 1fr;gap:14px}}
/* A tinted panel per card rather than white-on-white: the block sits between
   two photographic sections and needed a field of its own to read as a list.
   One tint for all of them, because they are a checklist of equals — cycling
   four pastels turned six facts into six unrelated cards. */
.lp-benefit{display:flex;align-items:flex-start;gap:12px;border-radius:14px;
            padding:15px 17px;text-align:start;background:var(--butter);
            border:1px solid rgba(31,68,104,.06)}
/* Filled square, not a pastel circle: at 22px a tinted circle with a dark tick
   disappeared into the panel behind it. */
.lp-tick{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
         background:var(--coral);color:#fff;font-size:.72rem;font-weight:700;line-height:1;margin-top:3px}
/* One sentence: the claim in the display face, the explanation running on
   after it in body text. */
.lp-benefit-copy{min-width:0;margin:0;color:var(--body);font-size:.94rem;line-height:1.6}
.lp-benefit strong{font-family:var(--display);color:var(--ink);font-weight:700}
.lp-benefit span{color:var(--body)}

/* ---------- 4b. feature cards ----------
   Three photographs, each with a heading and a sentence. Fixed 4:3 frames for
   the same reason as the detail shots below: supplier photography arrives at
   every aspect ratio there is. */
.lp-features{background:var(--blush)}
.lp-feature-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.lp-feature-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
/* The photograph is inset inside the card rather than bleeding to its edge,
   so the white frame reads as a mount around the shot. */
.lp-feature{background:var(--surface);border:1px solid var(--line);border-radius:18px;
            padding:10px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
/* Portrait 4:5, matching the hero frame: these are the same tall product shots
   and a 4:3 crop was cutting the canopy off the top of every one. */
.lp-feature-shot{position:relative}
.lp-feature img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--mint);
                display:block;border-radius:12px}
/* Numbered so the three cards read as a sequence to work through rather than
   three interchangeable panels. */
.lp-feature-num{position:absolute;top:10px;left:10px;min-width:30px;height:30px;
  padding:0 8px;border-radius:9px;display:grid;place-items:center;
  background:var(--blue-deep);color:#fff;font-family:var(--display);font-size:.95rem;line-height:1}
.lp-feature-copy{padding:16px 10px 8px;text-align:center}
.lp-feature h3{font-family:var(--display);color:var(--ink);font-size:1.08rem;font-weight:700;margin:0 0 8px}
/* The body copy goes back to left-aligned: a centred paragraph of three lines
   leaves a ragged edge on both sides and is measurably slower to read. */
.lp-feature p{color:var(--body);font-size:.92rem;line-height:1.6;margin:0;text-align:start}

/* ---------- 7. reviews ---------- */
.lp-review-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.lp-review{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;
           padding:20px;box-shadow:var(--shadow-sm)}
.lp-stars{color:var(--coral);letter-spacing:2px;margin-bottom:8px}
.lp-stars span{color:var(--line)}
.lp-review blockquote{margin:0 0 14px;color:var(--body)}
.lp-review figcaption{display:flex;align-items:center;gap:10px}
.lp-review figcaption img{border-radius:50%;object-fit:cover;flex:none}
.lp-review figcaption strong{display:block;color:var(--ink);font-family:var(--display)}
.lp-review figcaption em{color:var(--muted);font-size:.88rem;font-style:normal}

/* ---------- 8. trust band ---------- */
.lp-trust-band{background:var(--ground);padding:34px 0;text-align:center}
.lp-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
          gap:10px;padding:0;margin:0;color:var(--ink);font-weight:600}
.lp-chips li{display:flex;align-items:center;gap:8px;background:var(--surface);
             border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:.94rem}

/* ---------- 8b. stats band ----------
   Hardcoded figures; see landing_stats(). The one full-bleed colour field on
   the page, so it reads as a pause between the content above and the offer
   below rather than as another card. */
.lp-stats{background:var(--mint);padding:30px 0}
.lp-stats>.wrap{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);text-align:center}
.lp-stat strong{display:block;font-family:var(--display);color:var(--ink);
                font-size:clamp(26px,6vw,42px);line-height:1.1}
.lp-stat span{display:block;color:var(--body);font-size:.86rem;margin-top:4px}

/* ---------- 8c. the offer ---------- */
.lp-offer{background:var(--butter);text-align:center}
.lp-countdown{display:flex;justify-content:center;gap:10px;margin:0 0 22px;flex-wrap:wrap}
.lp-countdown>div{background:var(--surface);border-radius:14px;padding:10px 6px;min-width:64px}
.lp-countdown b{display:block;font-family:var(--display);color:var(--coral);font-size:1.5rem;line-height:1.1}
.lp-countdown span{display:block;color:var(--body);font-size:.78rem}
.lp-offer-was{color:var(--body);margin:0 0 6px}
.lp-offer-was s{color:var(--muted)}
.lp-offer-now{color:var(--ink);font-size:1.1rem;margin:0}
.lp-offer-now strong{font-family:var(--display);color:var(--coral);font-size:clamp(24px,5.4vw,34px)}

/* ---------- 10. order section ---------- */
.lp-order{background:var(--blush);padding:38px 0;margin-top:8px}

/* order form */
.order-section{padding:22px 0}
.order-form{background:var(--surface);border:1px solid var(--line);border-radius:22px;
            padding:24px;box-shadow:var(--shadow-sm);max-width:560px;margin:0 auto}
.order-form-title{font-family:var(--display);color:var(--ink);margin:0 0 4px}
.order-form-sub{color:var(--body);margin:0 0 18px;font-size:.95rem}

/* Billing details beside the order summary, so the figure stays on screen
   while the address is being typed. Stacks below 860px, where side-by-side
   would leave both columns too narrow to fill comfortably. */
.lp-order .order-form{max-width:960px}
.lp-order .order-form-title,.lp-order .order-form-sub{text-align:center}
.lp-order .order-form-title{font-size:clamp(18px,3.6vw,25px)}
.lp-checkout{display:grid;gap:22px;grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.lp-checkout{grid-template-columns:1.15fr .85fr;gap:30px}}
.lp-checkout-h{font-family:var(--display);color:var(--ink);font-size:1.05rem;margin:0 0 14px}
/* The summary tracks the fields on a desktop, where the billing column is the
   taller of the two. */
@media(min-width:860px){.lp-summary{position:sticky;top:16px}}
.field{display:block;margin-bottom:14px}
.field>span{display:block;margin-bottom:6px;color:var(--ink);font-weight:600;font-size:.95rem}
.field b{color:var(--coral)}
.field input,.field textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;font-family:var(--text);font-size:16px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue-deep);outline-offset:1px}
.qty-field input{max-width:120px}
.field-error{display:block;color:var(--coral);font-size:.88rem;margin-top:5px;font-style:normal}
.form-error-banner{background:var(--blush);color:var(--ink);padding:12px 14px;border-radius:12px;margin:0 0 14px}
.order-total{display:flex;justify-content:space-between;align-items:center;
             border-top:1px dashed var(--line);margin:18px 0 14px;padding-top:14px;color:var(--ink)}
.order-total strong{font-family:var(--display);color:var(--coral);font-size:1.5rem}
.cod-note{text-align:center;color:var(--body);font-size:.88rem;margin:10px 0 0}
/* Off-screen rather than display:none -- some bots skip hidden fields. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Order summary inside the form: the line item, then what is being added to
   it, then the figure the customer actually pays at the door. */
.lp-summary{border:1px solid var(--line);border-radius:16px;padding:16px;margin:18px 0 16px;background:#FBFDFF}
.lp-summary h3{font-family:var(--display);color:var(--ink);font-size:1.05rem;margin:0 0 12px}
.lp-summary-item{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.lp-summary-item img{border-radius:10px;background:var(--mint);object-fit:cover;flex:none}
.lp-summary-item span{flex:1;min-width:0;line-height:1.4}
.lp-summary-item strong{display:block;color:var(--ink);font-size:.95rem}
.lp-summary-item em{color:var(--muted);font-size:.85rem;font-style:normal}
.lp-summary-item b{color:var(--ink);white-space:nowrap}
.lp-summary-lines{margin:12px 0 0;display:grid;gap:7px}
.lp-summary-lines div{display:flex;justify-content:space-between;gap:12px}
.lp-summary-lines dt{color:var(--body);font-size:.95rem}
.lp-summary-lines dd{margin:0;color:var(--ink);white-space:nowrap}
.lp-summary .order-total{margin:12px 0 0}
.lp-cod-line{display:flex;align-items:flex-start;gap:8px;background:var(--mint);
  border-radius:12px;padding:11px 14px;margin:0 0 14px;color:var(--ink);font-size:.9rem}

/* ---------- 12. help band ---------- */
.lp-help{background:var(--mint);padding:30px 0;text-align:center}
.lp-help h2{font-family:var(--display);color:var(--ink);font-size:clamp(18px,3.8vw,25px);margin:0 0 18px}
.lp-help-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.lp-help-actions .btn{border-radius:999px;padding-inline:26px}
/* Matches the header's floating WhatsApp button rather than inventing a
   second green. */
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1FB855}

.related-section h2{font-family:var(--display);color:var(--ink)}
/* Capped and centred rather than stretched to the row. A shop with one other
   product was rendering that product as a full-width photograph taller than
   the order form above it. */
.related-grid{display:grid;gap:16px;justify-content:center;
              grid-template-columns:repeat(auto-fit,minmax(190px,240px))}
.related-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:center}
.related-card img{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover;background:var(--mint)}
.related-card a{text-decoration:none;color:var(--ink)}
.related-card h3{font-family:var(--display);font-size:1rem;margin:10px 0 4px}
.related-price{color:var(--coral);font-weight:700;margin:0 0 10px}

.sticky-buy{position:fixed;left:0;right:0;bottom:0;display:flex;gap:12px;align-items:center;
  justify-content:space-between;background:var(--surface);border-top:1px solid var(--line);
  padding:10px 16px;box-shadow:0 -8px 24px -18px rgba(31,68,104,.6);z-index:40}
.sticky-buy .btn{flex:1;padding:13px;border-radius:999px}
.sticky-price{font-family:var(--display);color:var(--coral);font-size:1.25rem}
/* Calling is the other way this shop takes an order, so it sits next to the
   button rather than only at the bottom of the page. */
.sticky-call{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--mint);text-decoration:none;font-size:1.1rem}
body{padding-bottom:76px}
@media(min-width:900px){.sticky-buy{display:none}body{padding-bottom:0}}

.not-found{padding:44px 0;text-align:center}
.not-found h1{font-family:var(--display);color:var(--ink)}
.not-found p{color:var(--body)}
.not-found-help{margin-top:24px}

/* ---------- order confirmation ---------- */
.order-success{padding:40px 0}
.success-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:32px 24px;max-width:560px;margin:0 auto;text-align:center;box-shadow:var(--shadow-sm)}
.success-tick{font-size:44px;margin:0 0 8px}
.success-card h1{font-family:var(--display);color:var(--ink);font-size:1.6rem;margin:0 0 10px}
.order-no{color:var(--body);margin:0 0 14px}
.success-lead{color:var(--body);margin:0 0 20px}
.success-summary{list-style:none;padding:0;margin:0 0 20px;text-align:left}
.success-summary li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.summary-total{border-bottom:0;font-family:var(--display);color:var(--coral);font-size:1.15rem}
.success-help{color:var(--body);margin-bottom:18px}

/* ---------- cart and checkout ---------- */
.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}
.cart-page,.checkout-page{padding:32px 0;max-width:720px;margin:0 auto}
.cart-page h1,.checkout-page h1{font-family:var(--display);color:var(--ink)}
.cart-list{list-style:none;padding:0;margin:0 0 20px}
.cart-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-row img{border-radius:12px;background:var(--mint);object-fit:cover;flex:none}
.cart-row-main{flex:1;min-width:0}
.cart-row-main a{color:var(--ink);text-decoration:none;font-weight:600}
.cart-row-main p{color:var(--body);margin:4px 0 0;font-size:.88rem}
.cart-qty-form input{width:66px;border:1px solid var(--line);border-radius:10px;padding:8px;
  font-size:16px;font-family:var(--text);text-align:center}
.cart-line-total{color:var(--coral);white-space:nowrap;font-weight:700}
.cart-remove{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px;line-height:1}
.cart-remove:hover{color:var(--coral)}
.cart-foot{text-align:right;padding-top:6px}
.cart-subtotal{margin:0 0 4px;color:var(--ink)}
.cart-subtotal strong{font-family:var(--display);color:var(--coral);font-size:1.4rem}
.cart-empty{color:var(--body);margin-bottom:16px}
.checkout-summary{list-style:none;padding:0;margin:0 0 22px}
.checkout-summary li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.checkout-summary .summary-total{border-bottom:0;font-family:var(--display);color:var(--coral);font-size:1.15rem}

/* ---------- add-to-cart toast ---------- */
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,16px);opacity:0;
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;z-index:60;
  display:flex;gap:12px;align-items:center;transition:opacity .2s ease,transform .2s ease;
  box-shadow:var(--shadow-sm);font-family:var(--text);font-size:.95rem;max-width:90vw}
.toast.is-in{opacity:1;transform:translate(-50%,0)}
.toast a{color:var(--butter);font-weight:600;white-space:nowrap}
@media(min-width:900px){.toast{bottom:24px}}