/* ============================================================
   Med Prax Pharma - stylesheet
   The new design, merged from the page builds.

   Layout: the base rules first, then every responsive block,
   widest breakpoint to narrowest. A rule written for a phone has
   to be able to beat the rule it is correcting, which means it has
   to come after it.

   legacy.css holds the rules of the previous design, scoped to
   body.lg. A page that has been rebuilt drops that class and is
   styled only by this file.
============================================================ */

/* ===========================================================
   MED PRAX PHARMA - HOME PAGE REDESIGN v4
   Design and development: Sabbir Ahmed

   v4 rule: every message lives in exactly ONE place.
   Phone number: header + footer contact only.
   Category list: mega menu + the category rows only.
   Delivery promise: hero only.
   =========================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --navy-900:#15123A;
  --navy-800:#1D1A4D;
  --navy-700:#272361;
  --navy-600:#363080;
  --navy-100:#E4E2F2;
  --navy-50:#F1F0F9;

  --blue-700:#1A6AA6;
  --blue-600:#207EC1;
  --blue-500:#4098D4;
  --blue-50:#EDF5FB;

  --green-700:#167A52;
  --green-600:#1A9465;
  --green-100:#DEF3EA;

  --sale:#D64545;
  --sale-soft:#FCECEC;
  --amber:#C2831F;
  --amber-100:#FBF0DB;
  --pink-100:#FBE8EF;
  --pink-700:#B23F67;

  --ink:#15162B;
  --ink-2:#3B3F58;
  --muted:#6B7089;
  --line:#E5E8F1;
  --line-soft:#EFF1F7;
  --surface:#FFFFFF;
  --canvas:#F6F7FC;
  --canvas-2:#EDEFF7;

  --fs-display:42px;
  --fs-h2:34px;
  --fs-h3:21px;
  --fs-lg:18px;
  --fs-base:16px;
  --fs-sm:14px;
  --fs-xs:13px;
  --fs-2xs:12px;
  --fs-3xs:11px;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px;
  --sp-10:40px;--sp-12:48px;--sp-14:56px;--sp-16:64px;
  --sp-20:80px;--sp-24:96px;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(20,22,43,.05), 0 1px 3px rgba(20,22,43,.04);
  --sh-2:0 4px 14px rgba(20,22,43,.07), 0 2px 5px rgba(20,22,43,.04);
  --sh-3:0 18px 42px rgba(20,22,43,.11), 0 6px 14px rgba(20,22,43,.05);
  --sh-4:0 34px 72px rgba(20,22,43,.20);

  --container:1260px;
  --gutter:24px;
}
/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:'Inter','Hind Siliguri',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Hind Siliguri',system-ui,sans-serif;margin:0;letter-spacing:-0.022em;line-height:1.18;color:var(--ink);}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,select,input,textarea{font-family:inherit;}
/* one dropdown look everywhere, and the arrow never touches the edge */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7089' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;background-size:16px 16px;
  padding-right:44px;cursor:pointer;
}
select::-ms-expand{display:none;}
button{cursor:pointer;border:0;background:none;}
ul{margin:0;padding:0;list-style:none;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
/* one value for every section, so the gap between any two is always the same */
.section{padding-top:52px;padding-bottom:52px;}
.section--canvas{background:var(--canvas);}
/* anchors in the nav must not slide under the sticky header */
#deals,#new,#categories,#why{scroll-margin-top:92px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8);margin-bottom:var(--sp-10);}
.section-head__text{max-width:640px;}
/* the only head with nothing on its right, so it can sit over the middle of its grid */
.section-head--mid{justify-content:center;text-align:center;}
.section-head--mid .section-head__text{max-width:620px;}
.section-head--mid .head-row{justify-content:center;}
.section-head--mid p{margin-left:auto;margin-right:auto;}
.head-row{display:flex;align-items:center;gap:var(--sp-3);}
.head-ico{width:42px;height:42px;border-radius:13px;flex:none;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;}
.head-ico svg{width:21px;height:21px;}
.section-head h2{font-size:var(--fs-h2);}
.section-head p{color:var(--muted);margin-top:var(--sp-3);font-size:var(--fs-lg);}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue-600);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:50px;padding:0 var(--sp-6);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;white-space:nowrap;}
.btn svg{width:16px;height:16px;flex:none;}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--navy-700);color:#fff;box-shadow:var(--sh-2);}
.btn--primary:hover{background:var(--navy-600);box-shadow:var(--sh-3);}
.btn--blue{background:var(--blue-600);color:#fff;box-shadow:var(--sh-2);}
.btn--blue:hover{background:var(--blue-700);}
.btn--ghost{background:#fff;color:var(--navy-700);border:1px solid var(--line);}
.btn--ghost:hover{border-color:var(--navy-700);}
.btn--onDark{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);}
.btn--onDark:hover{background:rgba(255,255,255,.2);}
.btn--sm{min-height:42px;font-size:var(--fs-xs);padding:0 var(--sp-5);}
.btn--block{width:100%;}
.link-more{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;font-size:var(--fs-sm);color:var(--navy-700);padding-bottom:var(--sp-1);border-bottom:2px solid transparent;transition:border-color .18s ease, gap .18s ease;}
.link-more svg{width:15px;height:15px;}
.link-more:hover{border-color:var(--navy-700);gap:var(--sp-3);}
/* ---------- 3. LOGO ---------- */
.brand{height:34px;width:auto;display:block;--lg-ink:#231F20;--lg-blue:#207EC1;--lg-ring:#272361;}
.brand--dark{--lg-ink:#FFFFFF;--lg-ring:#FFFFFF;}
.logo{display:flex;align-items:center;flex:none;}
.logo-svg-defs{position:absolute;width:0;height:0;overflow:hidden;}
/* ---------- 4. TOP BAR ---------- */
/* The only place the phone number and email appear in the top area. */
.topbar{background:var(--navy-900);color:rgba(255,255,255,.72);font-size:var(--fs-2xs);}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);min-height:42px;}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:var(--sp-5);}
.topbar a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .16s ease;}
.topbar a svg{width:13px;height:13px;color:var(--blue-500);flex:none;}
.topbar a:hover{color:#fff;}
.topbar a.is-strong{font-weight:600;color:#fff;}
.topbar__sep{width:1px;height:15px;background:rgba(255,255,255,.16);flex:none;}
.lang{display:flex;gap:3px;background:rgba(255,255,255,.1);border-radius:var(--r-pill);padding:3px;}
.lang button{font-size:var(--fs-3xs);font-weight:600;color:rgba(255,255,255,.65);padding:4px 11px;border-radius:var(--r-pill);transition:background .16s ease,color .16s ease;}
/* Worth knowing: on a phone these are 45 by 30 pixels, and a thumb wants
   about 44 tall. Extra touch area was tried and could only grow upward,
   because the top bar is 42px tall and the next band of the header starts
   immediately under it, so a target that works one way and not the other
   was dropped rather than left half done. Making it properly big means
   making the mobile top bar taller, which is a design decision. */
.lang button.is-on{background:#fff;color:var(--navy-900);}
.drawer .lang{background:var(--canvas);border:1px solid var(--line);}
.drawer .lang button{color:var(--muted);}
.drawer .lang button.is-on{background:var(--navy-700);color:#fff;}
/* ---------- 5. HEADER ---------- */
.header{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line-soft);transition:box-shadow .2s ease;}
.header.is-stuck{box-shadow:var(--sh-2);}
.header__main{display:flex;align-items:center;gap:var(--sp-8);min-height:64px;}
.header__actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:none;}
/* search opens as a full width panel under the header */
.searchpanel{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
  padding:var(--sp-8) 0;z-index:95;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.searchpanel.is-open{opacity:1;visibility:visible;transform:translateY(0);}
.searchpanel__row{display:flex;align-items:center;gap:var(--sp-4);}
.searchfield{
  flex:1;display:flex;align-items:center;gap:var(--sp-4);height:64px;
  background:var(--canvas);border:2px solid var(--line);border-radius:var(--r-pill);
  padding-left:var(--sp-6);padding-right:6px;
  transition:border-color .18s ease, background .18s ease;
}
.searchfield:focus-within{border-color:var(--navy-700);background:#fff;}
.searchfield > svg{width:22px;height:22px;color:var(--muted);flex:none;}
.searchfield input{flex:1;border:0;background:none;outline:none;font-size:var(--fs-lg);color:var(--ink);min-width:40px;}
.searchfield input::placeholder{color:var(--muted);}
.searchfield__go{height:50px;padding:0 var(--sp-7);border-radius:var(--r-pill);background:var(--navy-700);color:#fff;font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:8px;flex:none;transition:background .18s ease;}
.searchfield__go:hover{background:var(--navy-600);}
.searchfield__go svg{width:16px;height:16px;}
.searchpanel__close{width:52px;height:52px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-2);display:grid;place-items:center;flex:none;transition:border-color .18s ease,color .18s ease;}
.searchpanel__close:hover{border-color:var(--navy-700);color:var(--navy-700);}
.searchpanel__close svg{width:20px;height:20px;}
/* ---------- WHAT COMES UP WHILE YOU TYPE ----------
   A short list under the search field: the picture, the name and the
   price, and the whole row is the link to that product. Eight rows at
   most, and the list scrolls rather than pushing the page about. */
.sugg{margin-top:var(--sp-4);max-height:min(60vh,420px);overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  box-shadow:var(--sh-2);overflow-x:hidden;}
.sugg[hidden]{display:none;}
.sugg__row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line-soft);color:var(--ink);}
.sugg__row:last-of-type{border-bottom:0;}
.sugg__row:hover,.sugg__row.is-on{background:var(--canvas-2);}
.sugg__pic{width:52px;height:52px;border:1px solid var(--line-soft);border-radius:var(--r-md);
  background:#fff;display:grid;place-items:center;overflow:hidden;padding:3px;}
.sugg__pic img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;}
.sugg__pic svg{width:80%;height:80%;color:#5B6699;--ill-2:#E8EFF8;}
.sugg__txt{min-width:0;}
.sugg__txt b{display:block;font-size:var(--fs-xs);font-weight:600;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sugg__meta{display:block;margin-top:2px;font-size:var(--fs-3xs);color:var(--muted);}
.sugg__price{text-align:right;white-space:nowrap;}
.sugg__price b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-sm);font-weight:700;}
.sugg__price del{font-size:var(--fs-3xs);color:var(--muted);}
.sugg__price i{display:block;font-style:normal;font-size:var(--fs-3xs);font-weight:700;color:var(--sale);}
.sugg__none{padding:var(--sp-6) var(--sp-5);text-align:center;font-size:var(--fs-xs);color:var(--muted);}
.sugg__all{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-4);border-top:1px solid var(--line);background:var(--canvas-2);
  font-size:var(--fs-xs);font-weight:700;color:var(--navy-700);}
.sugg__all:hover,.sugg__all.is-on{background:var(--navy-100);}
.sugg__all svg{width:15px;height:15px;}
@media (max-width:760px){
  .sugg__row{grid-template-columns:44px 1fr auto;gap:var(--sp-3);padding:var(--sp-3);}
  .sugg__pic{width:44px;height:44px;}
}
.searchpanel__hint{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap;}
.searchpanel__hint > span{font-size:var(--fs-2xs);color:var(--muted);font-weight:600;}
.schip{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;transition:border-color .16s ease,color .16s ease;}
.schip:hover{border-color:var(--navy-700);color:var(--navy-700);}
.icon-btn{position:relative;width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--ink-2);transition:background .18s ease,color .18s ease;}
.icon-btn:hover{background:var(--canvas);color:var(--navy-700);}
.icon-btn svg{width:21px;height:21px;}
.icon-btn__dot{position:absolute;top:5px;right:5px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--blue-600);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;}
.header__signin{margin-left:var(--sp-3);min-height:40px;}
.burger{display:none;}
/* main navigation, inline in the header row */
.navgroup{display:flex;align-items:center;gap:var(--sp-6);}
.megawrap{position:relative;flex:none;}
.allcat{display:flex;align-items:center;gap:var(--sp-3);height:42px;padding:0 var(--sp-5);border-radius:var(--r-pill);background:var(--navy-700);color:#fff;font-size:var(--fs-sm);font-weight:600;transition:background .18s ease;}
.allcat:hover{background:var(--navy-600);}
.allcat svg{width:16px;height:16px;}
.allcat .chev{transition:transform .2s ease;}
.megawrap.is-open .allcat .chev{transform:rotate(180deg);}
.mega{
  position:absolute;top:calc(100% + 12px);left:0;width:480px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);padding:var(--sp-5);overflow:hidden;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.megawrap:hover .mega,.megawrap.is-open .mega{opacity:1;visibility:visible;transform:translateY(0);}
/* ---------- ALL CATEGORIES, WITH SUBCATEGORIES ----------
   The menu is two panes: the main categories down the left, and the
   subcategories of whichever one is being pointed at on the right. The
   first main category is shown when the menu opens, so the right side is
   never blank. */
.mega--tree{width:min(760px,calc(100vw - 48px));padding:var(--sp-3);
  display:grid;grid-template-columns:300px 1fr;gap:var(--sp-3);}
/* min-width:0 on both, or the line of example subcategories, which must
   not wrap, makes each row as wide as its text and the left column pushes
   out over the right one. */
.mega__cats{display:grid;align-content:start;gap:2px;min-width:0;
  border-right:1px solid var(--line-soft);padding-right:var(--sp-3);}
.mega__cat{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);min-width:0;
  border-radius:var(--r-md);transition:background .16s ease;}
.mega__cat:hover,.mega__cat.is-on{background:var(--canvas-2);}
.mega__cat i{width:36px;height:36px;border-radius:11px;background:var(--canvas-2);
  color:var(--navy-700);display:grid;place-items:center;flex:none;
  transition:background .16s ease,color .16s ease;}
.mega__cat:hover i,.mega__cat.is-on i{background:var(--navy-700);color:#fff;}
.mega__cat i svg{width:18px;height:18px;}
.mega__cat > span{min-width:0;flex:1;}
.mega__cat strong{display:block;font-size:var(--fs-xs);font-weight:600;line-height:1.3;}
.mega__cat > span > span{display:block;font-size:var(--fs-3xs);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.mega__go{width:15px;height:15px;flex:none;color:var(--muted);}
.mega__cat--all{border-top:1px solid var(--line-soft);margin-top:var(--sp-2);
  padding-top:var(--sp-4);border-radius:0;}
.mega__subs{position:relative;min-width:0;padding:var(--sp-2) var(--sp-2) var(--sp-2) 0;}
.mega__sub{display:none;}
.mega__sub.is-on{display:grid;grid-template-columns:1fr 1fr;gap:1px var(--sp-3);align-content:start;}
.mega__subhead{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2);
  border-radius:var(--r-md);background:var(--navy-100);
  font-size:var(--fs-2xs);font-weight:700;color:var(--navy-700);}
.mega__subhead b{font-size:var(--fs-3xs);background:#fff;border-radius:var(--r-pill);padding:1px 9px;}
.mega__link{display:block;padding:7px var(--sp-3);border-radius:var(--r-md);
  font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.35;}
.mega__link:hover{background:var(--canvas-2);color:var(--navy-700);}
.mega__empty{grid-column:1 / -1;padding:var(--sp-4);font-size:var(--fs-2xs);color:var(--muted);}
@media (max-width:1100px){
  .mega--tree{grid-template-columns:1fr;}
  .mega__cats{border-right:0;padding-right:0;}
  .mega__subs{display:none;}
}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);}
.mega__item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);transition:background .16s ease;}
.mega__item:hover{background:var(--canvas);}
.mega__item i{width:36px;height:36px;border-radius:11px;background:var(--canvas-2);color:var(--navy-700);display:grid;place-items:center;flex:none;transition:background .16s ease,color .16s ease;}
.mega__item:hover i{background:var(--navy-700);color:#fff;}
.mega__item svg{width:18px;height:18px;}
.mega__item strong{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.3;}
.mega__item span{font-size:var(--fs-3xs);color:var(--muted);}
.mega__item--all{grid-column:1 / -1;border-top:1px solid var(--line-soft);margin-top:var(--sp-2);padding-top:var(--sp-4);border-radius:0;}
.mega__item--all:hover{background:none;}
.mega__item--all i{background:var(--navy-700);color:#fff;}
.nav{display:flex;align-items:center;gap:var(--sp-6);}
.nav a{font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);padding:var(--sp-2) 0;position:relative;white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy-700);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
.nav a:hover{color:var(--navy-700);}
.nav a:hover::after{transform:scaleX(1);}
/* the page you are on is named in the nav, so the underline stays put */
.nav a.is-on{color:var(--navy-700);font-weight:600;}
.nav a.is-on::after{transform:scaleX(1);}
/* ---------- 6. DRAWER ---------- */
.scrim{position:fixed;inset:0;background:rgba(18,20,44,.5);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:90;}
.scrim.is-open{opacity:1;visibility:visible;}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:#fff;z-index:95;transform:translateX(-102%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow-y:auto;}
.drawer.is-open{transform:translateX(0);}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);border-bottom:1px solid var(--line-soft);}
.drawer__head .brand{height:28px;}
.drawer__head svg.close{width:22px;height:22px;color:var(--ink-2);}
.drawer__body{padding:var(--sp-5);}
.drawer h5{font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin:var(--sp-6) 0 var(--sp-3);}
.drawer h5:first-child{margin-top:0;}
.drawer__links li a{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;font-size:var(--fs-sm);font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-soft);}
.drawer__links li a > svg:first-child{width:18px;height:18px;color:var(--blue-600);flex:none;}
.drawer__links li a .go{margin-left:auto;width:15px;height:15px;color:var(--muted);}
.drawer__cta{padding:var(--sp-5);margin-top:auto;display:grid;gap:var(--sp-3);}
.drawer .lang{margin:var(--sp-5) 0 0;width:fit-content;}
/* ---------- 6. HERO ---------- */
.hero-wrap{padding:var(--sp-6) 0 52px;}
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-2xl);color:#fff;
  padding:var(--sp-10) var(--sp-10) var(--sp-10);
  background:
    radial-gradient(900px 500px at 88% 10%, rgba(32,126,193,.42), transparent 62%),
    radial-gradient(640px 440px at 2% 96%, rgba(64,152,212,.22), transparent 62%),
    linear-gradient(135deg,#272361 0%,#1D1A4D 56%,#15123A 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.06;
  background-image:linear-gradient(#fff 2px, transparent 2px),linear-gradient(90deg,#fff 2px, transparent 2px);
  background-size:68px 68px;background-position:center;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 76%);
}
.hero__top{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:var(--sp-10);align-items:end;}
/* 40px over two lines is 91px tall, which is exactly what the lead plus the
   button add up to on the right, so both columns start and finish together */
.hero h1{color:#fff;font-size:40px;letter-spacing:-0.032em;line-height:1.14;}
/* The design wrote the first line as bare text and only the second line in
   a span, so this rule faded the second line alone. Both lines are in a
   span here, because each one carries its own Bangla, and the rule was
   then fading the whole title. Naming the last span puts it back exactly
   where the design had it: first line white, second line faded. */
.hero h1 span{display:block;}
.hero h1 span:last-child{color:rgba(255,255,255,.42);}
/* bottom-aligned, so the button finishes level with the headline */
.hero__aside{padding-bottom:0;}
.hero__lead{font-size:var(--fs-xs);color:rgba(255,255,255,.7);line-height:1.6;max-width:380px;}
.hero__shop{
  display:inline-flex;align-items:center;gap:10px;margin-top:12px;
  background:#fff;color:var(--navy-900);font-size:var(--fs-xs);font-weight:700;
  padding:6px 6px 6px 18px;border-radius:var(--r-pill);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero__shop:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.28);}
.hero__shop i{width:26px;height:26px;border-radius:var(--r-pill);background:var(--navy-700);color:#fff;display:grid;place-items:center;}
.hero__shop svg{width:12px;height:12px;}
/* expanding category panels inside the hero */
.accordion{position:relative;z-index:2;display:flex;gap:var(--sp-3);height:250px;margin-top:var(--sp-6);}
.apanel{
  /* The closed strip is 126px wide at the owner's request, so the
     pictures he exports at 126 x 250 drop straight in with nothing
     cropped. The row is 1132 wide with three 12px gaps, so the open
     panel takes what is left: 1132 - (126 x 3) - 36 = 718. */
  position:relative;display:block;flex:0 0 126px;
  border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  transition:flex .52s cubic-bezier(.4,0,.2,1);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(150deg,#1E2559,#141A3F);
}
.apanel.is-open{flex:1 1 auto;}
/* the gradient is what shows while an image loads, or if one is missing */
.apanel__bg{position:absolute;inset:0;}
.apanel--equip .apanel__bg{background:radial-gradient(440px 320px at 74% 40%, rgba(32,126,193,.60), transparent 70%), linear-gradient(150deg,#15306B,#0C1A3C);}
.apanel--acc   .apanel__bg{background:radial-gradient(440px 320px at 74% 40%, rgba(22,160,150,.52), transparent 70%), linear-gradient(150deg,#0C3A42,#07202A);}
.apanel--org   .apanel__bg{background:radial-gradient(440px 320px at 74% 40%, rgba(72,150,70,.48), transparent 70%), linear-gradient(150deg,#163A22,#0A1F14);}
.apanel--skin  .apanel__bg{background:radial-gradient(440px 320px at 74% 40%, rgba(150,78,150,.48), transparent 70%), linear-gradient(150deg,#341A4A,#1A0C26);}
/* two uploaded images per category: the tall one while the panel is a strip,
   the wide one once it opens. Both cover the panel, so any crop still fills it. */
.apanel__shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .45s ease;
}
.apanel__shot--tall{opacity:1;}
.apanel.is-open .apanel__shot--tall{opacity:0;}
.apanel.is-open .apanel__shot--wide{opacity:1;}
/* closed panels sit back a little so the open one reads as the subject */
.apanel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(9,12,38,.34);opacity:1;transition:opacity .45s ease;
}
.apanel.is-open::after{opacity:0;}
/* these sit over a photo, so they carry their own backdrop to stay readable */
.apanel__count{
  position:absolute;left:var(--sp-6);top:var(--sp-6);z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(10,14,40,.5);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:var(--r-pill);padding:5px 11px;
  font-size:10px;font-weight:600;color:#fff;white-space:nowrap;
  opacity:0;transition:opacity .4s ease .2s;
}
.apanel__count svg{width:12px;height:12px;flex:none;}
.apanel.is-open .apanel__count{opacity:1;}
/* the card itself is the link, so this arrow is only the affordance */
.apanel__go{
  position:absolute;right:var(--sp-6);bottom:var(--sp-6);z-index:3;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;color:var(--navy-900);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  opacity:0;transform:scale(.8);
  transition:opacity .35s ease .2s, transform .35s ease .2s, background .18s ease;
}
.apanel.is-open .apanel__go{opacity:1;transform:scale(1);}
/* one piece of art that travels: centred and small on a closed strip,
   large on the right once the panel opens */
.apanel__art{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;display:none;
  color:#fff;--ill-2:rgba(255,255,255,.3);opacity:.8;
  transition:width .5s cubic-bezier(.4,0,.2,1), height .5s cubic-bezier(.4,0,.2,1),
             left .5s cubic-bezier(.4,0,.2,1), right .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.apanel.is-fallback .apanel__art{display:block;}
.apanel.is-fallback.is-open .apanel__art{
  left:auto;right:8%;transform:translateY(-50%);
  width:168px;height:168px;opacity:.95;
}
.apanel:hover .apanel__go{background:#EAF2FB;}
.apanel__go svg{width:15px;height:15px;}
/* ---------- 9. DEALS ---------- */
.deals{border-radius:var(--r-2xl);color:var(--ink);padding:var(--sp-8);border:1px solid #CFE2F2;background:radial-gradient(560px 300px at 92% 0%, rgba(255,255,255,.9), transparent 62%),linear-gradient(135deg,#EDF5FB 0%,#DCEAF7 100%);}
.deals__head{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6);}
.deals__title{display:flex;align-items:center;gap:var(--sp-3);}
.deals__title i{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid #CFE2F2;display:grid;place-items:center;flex:none;}
.deals__title svg{width:20px;height:20px;color:var(--blue-600);}
.deals__title h2{color:var(--ink);font-size:22px;}
.deals__title span{font-size:var(--fs-2xs);color:var(--muted);}
.countdown{display:flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-2);}
.countdown > svg{width:16px;height:16px;color:var(--muted);}
.countdown b{background:var(--navy-700);color:#fff;border-radius:9px;padding:6px 9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-xs);min-width:36px;text-align:center;}
.deals__all{margin-left:auto;}
.deals .btn--onDark{background:#fff;color:var(--navy-700);border:1px solid #CFE2F2;}
.deals .btn--onDark:hover{background:#fff;border-color:var(--navy-700);}
.deals .mini{border:1px solid #CFE2F2;}
.deals__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3);}
/* compact card, used in deals and category rows */
.mini{background:#fff;border-radius:var(--r-md);padding:var(--sp-3);color:var(--ink);display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;}
.mini:hover{transform:translateY(-3px);box-shadow:var(--sh-2);}
.mini__media{position:relative;aspect-ratio:1/1;background:#fff;border:1px solid var(--line-soft);border-radius:11px;display:grid;place-items:center;padding:var(--sp-3);overflow:hidden;}
/* Every frame that holds a product photo is square, and the photo is told
   to fill it and keep its own shape. The old wording asked for a largest
   height of 100%, which the browser could not work out inside a frame whose
   height comes from its width, so a photo taller than it is wide was drawn
   at full width and overflowed; the frame hides what sticks out, so the top
   and bottom of the photo were quietly cut away.

   The photo is given the square shape itself instead of borrowing it from
   the frame, and fits inside that square. A 1080x1080 photo fills it edge
   to edge; a photo of any other shape is made smaller until all of it is
   visible, rather than having a slice taken off. */
.mini__media img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;}
.mini__media .ph{display:none;align-items:center;justify-content:center;width:100%;height:100%;}
.mini__media.is-fallback .ph{display:flex;}
.mini__media .ph__art{max-width:92px;max-height:92px;}
.mini__off{position:absolute;top:6px;left:6px;background:var(--sale-soft);color:var(--sale);font-size:10px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);}
.mini__new{position:absolute;top:6px;right:6px;background:var(--navy-700);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:var(--r-pill);}
.mini__title{font-size:var(--fs-2xs);font-weight:600;line-height:1.4;margin-top:var(--sp-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;}
.mini__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-3);}
.mini__price b{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-sm);font-weight:700;display:block;}
.mini__price del{font-size:10px;color:var(--muted);}
.add{width:32px;height:32px;border-radius:var(--r-pill);background:var(--navy-700);color:#fff;display:grid;place-items:center;flex:none;transition:background .18s ease,transform .18s ease;}
.add:hover{background:var(--blue-600);transform:scale(1.08);}
.add svg{width:15px;height:15px;}
.add--out{background:var(--canvas-2);color:var(--muted);}
/* ---------- 8. CATEGORY ROWS ---------- */
.catrow{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:208px 1fr;background:var(--line-soft);margin-bottom:var(--sp-6);}
.catrow:last-child{margin-bottom:0;}
.catrow__side{background:#fff;padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);}
.catrow__side i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;}
.catrow__side svg{width:22px;height:22px;}
.catrow--equip .catrow__side i{background:var(--blue-50);color:var(--blue-600);}
.catrow--acc .catrow__side i{background:var(--green-100);color:var(--green-700);}
.catrow--org .catrow__side i{background:var(--amber-100);color:var(--amber);}
.catrow--skin .catrow__side i{background:var(--pink-100);color:var(--pink-700);}
/* A category the four tests above do not recognise still gets a tile
   rather than a bare icon on white. */
.catrow--all .catrow__side i{background:var(--navy-50);color:var(--navy-700);}
.catrow__side h3{font-size:var(--fs-h3);margin-top:var(--sp-2);}
.catrow__side p{font-size:var(--fs-2xs);color:var(--muted);line-height:1.5;}
.catrow__side .btn{margin-top:auto;}
.catrow__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;}
.catrow__grid .mini{border-radius:0;padding:var(--sp-4);}
.catrow__grid .mini:hover{transform:none;box-shadow:none;background:var(--canvas);}
.viewall-tile{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);text-align:center;padding:var(--sp-5);color:var(--navy-700);transition:background .18s ease;}
.viewall-tile:hover{background:var(--navy-50);}
.viewall-tile i{width:44px;height:44px;border-radius:var(--r-pill);border:1px dashed var(--navy-100);display:grid;place-items:center;}
.viewall-tile svg{width:18px;height:18px;}
.viewall-tile strong{font-size:var(--fs-xs);font-weight:600;}
.viewall-tile span{font-size:var(--fs-3xs);color:var(--muted);}
/* ---------- 9. NEW ARRIVALS ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 0 20px;margin-top:-12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start;}
.rail-nav{display:flex;gap:var(--sp-2);flex:none;}
.rail-nav button{width:46px;height:46px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--ink-2);display:grid;place-items:center;transition:border-color .18s ease,color .18s ease;}
.rail-nav button:hover{border-color:var(--navy-700);color:var(--navy-700);}
.rail-nav svg{width:18px;height:18px;}
.prod{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.prod:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent;}
.media{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:var(--sp-7);overflow:hidden;border-bottom:1px solid var(--line-soft);}
.media img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;transition:transform .35s ease;}
.prod:hover .media img{transform:scale(1.06);}
.media .ph{display:none;align-items:center;justify-content:center;width:100%;height:100%;}
/* stand-in art: swap the real photo back in and this never shows */
.ph__art{width:100%;height:100%;max-width:168px;max-height:168px;color:#32407E;--ill-2:#DEEAF7;}
.media .ph span{font-size:var(--fs-2xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;}
.media.is-fallback .ph{display:flex;}
.prod__badges{position:absolute;top:var(--sp-4);left:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:2;}
.badge{font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.04em;padding:5px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;}
.badge svg{width:12px;height:12px;}
.badge--sale{background:var(--sale-soft);color:var(--sale);}
.badge--new{background:var(--navy-700);color:#fff;}
.prod__wish{position:absolute;top:var(--sp-4);right:var(--sp-4);z-index:2;width:36px;height:36px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);color:var(--ink-2);display:grid;place-items:center;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,color .2s ease;}
.prod:hover .prod__wish{opacity:1;transform:translateY(0);}
.prod__wish:hover{color:var(--sale);}
.prod__wish svg{width:17px;height:17px;}
.prod__body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1;}
.prod__cat{font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue-600);}
.prod__title{font-size:var(--fs-base);font-weight:600;line-height:1.4;margin-top:var(--sp-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:45px;}
.prod:hover .prod__title{color:var(--navy-700);}
/* the whole card opens the product. It sits under the save and add
   buttons so those are still reachable, and it carries no look of its own,
   because the card already shows it reacts to the mouse. */
.prod__link{position:absolute;inset:0;z-index:1;border-radius:inherit;}
/* the small card works the same way */
.mini{position:relative;}
.mini__link{position:absolute;inset:0;z-index:1;border-radius:inherit;}
.mini .add{position:relative;z-index:2;}
.prod__wish{z-index:2;}
.prod__btn{position:relative;z-index:2;}
.prod__meta{font-size:var(--fs-2xs);color:var(--muted);margin-top:var(--sp-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.prod__foot{margin-top:auto;padding-top:var(--sp-5);}
.prod__price{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;}
.prod__price b{font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:700;}
.prod__price del{font-size:var(--fs-xs);color:var(--muted);}
.prod__stock{display:flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--green-700);font-weight:500;margin-top:var(--sp-2);}
.prod__stock svg{width:13px;height:13px;}
.prod__stock.is-out{color:var(--muted);}
.prod__btn{width:100%;min-height:44px;margin-top:var(--sp-4);border-radius:var(--r-pill);background:var(--navy-50);color:var(--navy-700);font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);transition:background .2s ease,color .2s ease;}
.prod__btn svg{width:16px;height:16px;}
.prod:hover .prod__btn{background:var(--navy-700);color:#fff;}
.prod__btn--muted{background:var(--canvas-2);color:var(--ink-2);}
.prod:hover .prod__btn--muted{background:var(--ink-2);color:#fff;}
/* ---------- 10. B2B ---------- */
.b2b{position:relative;overflow:hidden;background:linear-gradient(140deg,#1D1A4D 0%,#15123A 62%,#100E2C 100%);color:#fff;}
.b2b::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(32,126,193,.3),transparent 62%);}
.b2b__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--sp-16);align-items:center;}
.b2b h2{color:#fff;font-size:var(--fs-h2);margin-top:var(--sp-4);max-width:520px;}
.b2b .eyebrow{color:#7FC2EC;}
.b2b__lead{color:rgba(255,255,255,.72);font-size:var(--fs-lg);margin-top:var(--sp-5);max-width:500px;line-height:1.7;}
.b2b__cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap;}
.b2b__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);}
.b2b__tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-lg);padding:var(--sp-6);}
.b2b__tile i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(32,126,193,.24);color:#7FC2EC;margin-bottom:var(--sp-5);}
.b2b__tile svg{width:20px;height:20px;}
.b2b__tile strong{display:block;font-size:var(--fs-base);font-weight:700;}
.b2b__tile span{font-size:var(--fs-xs);color:rgba(255,255,255,.6);}
/* one tidy full width row under both columns */
.b2b__partners{
  position:relative;z-index:2;
  margin-top:var(--sp-14);padding-top:var(--sp-8);
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
}
.b2b__partners h4{flex:none;color:rgba(255,255,255,.5);font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;}
.b2b__partners-list{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.b2b__partner{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-pill);padding:8px 15px;font-size:var(--fs-2xs);font-weight:600;color:rgba(255,255,255,.85);}
.b2b__partner svg{width:13px;height:13px;color:#7FC2EC;flex:none;}
/* ---------- 11. WHY ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);}
.why{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-8);transition:box-shadow .22s ease,transform .22s ease;}
.why:hover{box-shadow:var(--sh-2);transform:translateY(-3px);}
.why i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-600);margin-bottom:var(--sp-6);}
.why svg{width:23px;height:23px;}
.why h3{font-size:var(--fs-base);margin-bottom:var(--sp-3);}
.why p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;}
/* ---------- 12. REVIEWS ---------- */
.review-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--sp-5)*2)/3);
  gap:var(--sp-5);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:10px 0 18px;margin-top:-10px;
}
.review-rail::-webkit-scrollbar{display:none;}
.review-rail > *{scroll-snap-align:start;}
/* the dots under any rail */
.dots{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5);}
.dots button{
  position:relative;width:8px;height:8px;border-radius:var(--r-pill);
  background:var(--line);transition:width .25s ease, background .25s ease;
}
/* invisible 44px hit area so the dots are easy to tap */
.dots button::after{content:"";position:absolute;top:-18px;bottom:-18px;left:-9px;right:-9px;}
.dots button:hover{background:var(--navy-100);}
.dots button.is-on{width:26px;background:var(--navy-700);}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-7);position:relative;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease, transform .22s ease;}
.review-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px);}
.review-card__quote{position:absolute;top:var(--sp-4);right:var(--sp-5);color:var(--navy-50);}
.review-card__quote svg{width:54px;height:54px;}
.stars{display:flex;gap:3px;color:var(--amber);margin-bottom:var(--sp-4);}
.stars svg{width:16px;height:16px;}
.stars svg.off{color:var(--canvas-2);}
.review-card h4{font-size:var(--fs-base);margin-bottom:var(--sp-3);position:relative;z-index:2;}
/* The bottom margin is what keeps the divider off the last line of the
   review. The author block below is pushed down with margin-top:auto,
   and auto is whatever space is left over, which on a card whose text
   fills it is none at all: the rule sat straight on the descenders.
   A real margin here is a floor that auto cannot take away. */
.review-card blockquote{margin:0 0 var(--sp-5);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);position:relative;z-index:2;}
/* No top margin any more: the quote above now carries the gap, and two
   margins meeting here made the space between the words and the product
   pill twice what it should be. */
.review-card__item{display:inline-flex;align-items:center;gap:6px;margin-top:0;margin-bottom:var(--sp-5);font-size:var(--fs-2xs);color:var(--muted);background:var(--canvas);border-radius:var(--r-pill);padding:6px 12px;align-self:flex-start;}
.review-card__item svg{width:13px;height:13px;color:var(--blue-600);}
.review-card__by{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--line-soft);}
.avatar{width:42px;height:42px;border-radius:var(--r-pill);flex:none;background:var(--navy-700);color:#fff;display:grid;place-items:center;font-weight:700;font-size:var(--fs-xs);}
.review-card__by strong{display:block;font-size:var(--fs-sm);}
.review-card__by > div > span{font-size:var(--fs-2xs);color:var(--muted);}
.verified{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-3xs);font-weight:600;color:var(--green-700);background:var(--green-100);padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;}
.verified svg{width:13px;height:13px;}
.rating-summary{display:flex;align-items:center;gap:var(--sp-4);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);}
.rating-summary b{font-family:'Plus Jakarta Sans',sans-serif;font-size:34px;font-weight:800;color:var(--navy-700);line-height:1;}
.rating-summary span{font-size:var(--fs-2xs);color:var(--muted);display:block;margin-top:4px;}
/* ---------- 12b. PROMO BANNERS ---------- */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
.promo{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:var(--sp-10);min-height:230px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.promo--a{background:radial-gradient(420px 260px at 88% 20%, rgba(32,126,193,.6), transparent 66%), linear-gradient(135deg,#272361,#15123A);}
.promo--b{background:radial-gradient(420px 260px at 88% 20%, rgba(178,63,103,.55), transparent 66%), linear-gradient(135deg,#4A1C33,#1C0A14);}
.promo__tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);padding:6px 13px;font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.promo__tag svg{width:13px;height:13px;}
/* two lines are reserved whether the headline needs them or not, so the
   paragraph and the button below start at the same height in both cards */
.promo h3{color:#fff;font-size:30px;line-height:1.16;min-height:2.32em;margin-top:var(--sp-4);max-width:290px;letter-spacing:-0.03em;}
.promo p{font-size:var(--fs-sm);color:rgba(255,255,255,.7);margin-top:var(--sp-3);max-width:290px;}
.promo .btn{margin-top:var(--sp-6);align-self:flex-start;}
.promo__img{position:absolute;right:var(--sp-8);top:50%;transform:translateY(-50%);max-height:72%;width:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));}
.promo__art{position:absolute;right:var(--sp-10);top:50%;transform:translateY(-50%);width:160px;height:160px;display:none;color:#fff;--ill-2:rgba(255,255,255,.26);opacity:.9;}
.promo.is-fallback .promo__art{display:block;}
/* ---------- 12c. BRANDS ---------- */
/* one continuous grid: the 1px gaps let the background through as hairlines,
   so neighbouring cells share a line instead of stacking two borders */
.brand-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.brandtile{
  position:relative;display:grid;place-items:center;
  min-height:128px;background:#fff;
  padding:var(--sp-5) var(--sp-6);
  transition:background .22s ease;
}
.brandtile:hover{background:#F4F7FC;}
/* one height cap and one width cap, so ten very differently shaped logos read as one set */
.brandtile img{
  display:block;max-width:100%;max-height:54px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:filter .25s ease, opacity .25s ease;
}
.brandtile:hover img{filter:none;opacity:1;}
/* the arrow belongs to the cell you are pointing at, so it is drawn, not marked up */
.brandtile::after{
  content:"";position:absolute;top:13px;right:13px;width:12px;height:12px;
  background:var(--blue-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:translate(-3px,3px);
  transition:opacity .2s ease, transform .2s ease;
}
.brandtile:hover::after{opacity:1;transform:none;}
/* without a mouse there is no hover state to reveal the colour, so show it outright */
@media (hover: none){
  .brandtile img{filter:none;opacity:1;}
  .brandtile::after{display:none;}
}
/* ---------- 12d. FAQ ---------- */
/* stretch, so the help card can run down to the bottom of the question list */
.faq{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-12);align-items:stretch;}
.faq__intro{display:flex;flex-direction:column;min-height:0;}
.faq__list{display:flex;flex-direction:column;gap:var(--sp-3);}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .2s ease, box-shadow .2s ease;}
.faq__item.is-open{border-color:var(--navy-100);box-shadow:var(--sh-2);}
.faq__q{
  width:100%;display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);text-align:left;
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);
}
.faq__q i{
  width:30px;height:30px;flex:none;border-radius:var(--r-pill);
  background:var(--canvas-2);color:var(--navy-700);display:grid;place-items:center;
  margin-left:auto;transition:background .2s ease, color .2s ease, transform .3s ease;
}
.faq__q svg{width:15px;height:15px;}
.faq__item.is-open .faq__q i{background:var(--navy-700);color:#fff;transform:rotate(45deg);}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq__a p{padding:0 var(--sp-6) var(--sp-6);font-size:var(--fs-sm);color:var(--muted);line-height:1.7;}
.faq__item.is-open .faq__a{max-height:260px;}
.faq__help{
  background:var(--navy-700);color:#fff;border-radius:var(--r-xl);padding:var(--sp-8);
  margin-top:var(--sp-8);flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
/* icon and title share a row, which buys the illustration back about 60px */
.faq__helphead{display:flex;align-items:center;gap:var(--sp-4);}
.faq__help i{width:46px;height:46px;flex:none;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;}
.faq__help svg{width:22px;height:22px;}
.faq__help h3{color:#fff;font-size:var(--fs-h3);}
.faq__help p{color:rgba(255,255,255,.72);font-size:var(--fs-sm);margin-top:var(--sp-5);}
.faq__help .btn{margin-top:var(--sp-6);align-self:flex-start;}
/* the card is taller than its copy, so the spare room holds a small scene:
   a reply being typed, with two notes floating beside it */
/* flex-basis 0 keeps the scene out of the card's own height, so the card is only
   ever as tall as the question list beside it; the scene then takes what is left */
.faq__art{flex:1 1 0;min-height:0;margin-top:var(--sp-8);display:flex;align-items:flex-end;justify-content:center;}
.faq__art svg{display:block;width:100%;height:100%;max-height:180px;}
.fabart-ring{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:2;
  transform-box:fill-box;transform-origin:center;animation:fabart-pulse 3.4s ease-out infinite;}
.fabart-ring--b{animation-delay:1.7s;}
.fabart-main{transform-box:fill-box;transform-origin:center;animation:fabart-float 5s ease-in-out infinite;}
.fabart-chip{transform-box:fill-box;transform-origin:center;animation:fabart-float 4.2s ease-in-out infinite;}
.fabart-chip--b{animation-duration:5.6s;animation-delay:-1.9s;}
.fabart-dot{transform-box:fill-box;transform-origin:center;animation:fabart-type 1.5s ease-in-out infinite;}
.fabart-dot--2{animation-delay:.18s;}
.fabart-dot--3{animation-delay:.36s;}
@keyframes fabart-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes fabart-pulse{0%{transform:scale(.74);opacity:.55;}70%{opacity:0;}100%{transform:scale(1.3);opacity:0;}}
@keyframes fabart-type{0%,78%,100%{opacity:.3;transform:translateY(0);}38%{opacity:1;transform:translateY(-4px);}}
/* ---------- 13. SELLER ---------- */
.seller{background:linear-gradient(135deg,#EDF5FB,#DCEAF7);border:1px solid #CFE2F2;border-radius:var(--r-2xl);color:var(--ink);padding:var(--sp-14);text-align:center;position:relative;overflow:hidden;}
.seller::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 8%, rgba(255,255,255,.9), transparent 52%);}
.seller__inner{position:relative;z-index:2;max-width:660px;margin:0 auto;}
.seller h2{color:var(--ink);font-size:var(--fs-h2);margin-top:var(--sp-4);}
.seller p{color:var(--muted);font-size:var(--fs-lg);margin-top:var(--sp-5);}
.seller .eyebrow{color:var(--blue-700);}
.seller .btn--onDark{background:#fff;color:var(--navy-700);border:1px solid #CFE2F2;}
.seller .btn--onDark:hover{background:#fff;border-color:var(--navy-700);}
.seller__cta{display:flex;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8);flex-wrap:wrap;}
/* ---------- 14. FOOTER ---------- */
.footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding-top:var(--sp-20);}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:var(--sp-12);}
.footer .brand{height:42px;}
.footer__about{font-size:var(--fs-sm);line-height:1.75;margin-top:var(--sp-6);max-width:390px;}
.social{display:flex;gap:var(--sp-2);margin-top:var(--sp-7);flex-wrap:wrap;}
.social a{width:40px;height:40px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);display:grid;place-items:center;transition:background .18s ease,color .18s ease;}
.social a:hover{background:var(--blue-600);color:#fff;}
.social svg{width:17px;height:17px;}
.footer h4{display:flex;align-items:center;gap:var(--sp-2);color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:var(--sp-6);}
.footer h4 svg{width:15px;height:15px;color:#7FC2EC;}
.footer__links li{margin-bottom:var(--sp-3);}
.footer__links a{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);transition:color .18s ease,gap .18s ease;}
.footer__links a svg{width:13px;height:13px;opacity:.5;}
.footer__links a:hover{color:#7FC2EC;gap:var(--sp-3);}
.contact-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-5);font-size:var(--fs-sm);}
.contact-row > svg{width:17px;height:17px;color:#7FC2EC;flex:none;margin-top:3px;}
.contact-row b{display:block;color:#fff;font-weight:600;}
.contact-row span{font-size:var(--fs-xs);}
.footer__pay{
  margin-top:var(--sp-14);padding-top:var(--sp-8);
  border-top:1px solid rgba(255,255,255,.1);
}
.footer__pay > span{display:block;margin-bottom:var(--sp-4);font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,.5);}
/* a fixed column count keeps every row full, so no single icon is left stranded */
.payrow{display:grid;grid-template-columns:repeat(22,1fr);gap:8px;justify-items:center;}
/* the column keeps the alignment, the cap keeps a tile from stretching into a slab */
.payicon{width:100%;max-width:58px;height:46px;border-radius:9px;background:#fff;overflow:hidden;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s ease, box-shadow .18s ease;}
.payicon svg{display:block;height:112%;width:auto;max-width:100%;}
.payicon:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.34);}
.footer__bottom{margin-top:var(--sp-8);padding:var(--sp-5) 0;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--fs-xs);}
/* ---------- 15. FLOATING + TABBAR ---------- */
/* floating help stack: one button opens the three ways to reach the shop */
.fab{position:fixed;right:20px;bottom:24px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.fab__menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.fab__item{
  display:flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 7px;
  border-radius:var(--r-pill);color:#fff;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;
  box-shadow:0 10px 26px rgba(10,14,40,.34);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.92);transform-origin:100% 50%;
  transition:opacity .26s ease, transform .26s ease, visibility .26s ease;
}
.fab__item i{width:32px;height:32px;flex:none;border-radius:var(--r-pill);background:rgba(255,255,255,.22);display:grid;place-items:center;}
.fab__item svg{width:17px;height:17px;}
.fab__item--wa{background:linear-gradient(100deg,#0F9C56,#2FD36F);}
.fab__item--call{background:linear-gradient(100deg,#2B3878,#2E90D4);}
.fab__item--mail{background:linear-gradient(100deg,#3C3A7E,#272361);}
.fab.is-open .fab__item{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.fab.is-open .fab__item:nth-child(1){transition-delay:.12s;}
.fab.is-open .fab__item:nth-child(2){transition-delay:.07s;}
.fab.is-open .fab__item:nth-child(3){transition-delay:.02s;}
.fab.is-open .fab__item:hover{transform:translateY(-2px) scale(1);}
.fab__btn{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px rgba(10,14,40,.34);
  transition:transform .18s ease, opacity .25s ease, visibility .25s ease, background .25s ease;
}
.fab__btn svg{width:21px;height:21px;}
.fab__btn:hover{transform:translateY(-3px);}
/* back to top only shows once there is something to scroll back up to */
.fab__btn--top{background:linear-gradient(140deg,#2E95D8,#1766A8);opacity:0;visibility:hidden;transform:translateY(10px);}
.fab.is-scrolled .fab__btn--top{opacity:1;visibility:visible;transform:none;}
.fab.is-scrolled .fab__btn--top:hover{transform:translateY(-3px);}
.fab__btn--toggle{background:linear-gradient(140deg,#2E9BDE,#1B5FA0);box-shadow:0 0 0 8px rgba(46,155,222,.16), 0 10px 26px rgba(10,14,40,.34);}
.fab.is-open .fab__btn--toggle{background:linear-gradient(140deg,#39406F,#1E2347);box-shadow:0 10px 26px rgba(10,14,40,.34);}
.fab__ico--close{display:none;}
.fab.is-open .fab__ico--help{display:none;}
.fab.is-open .fab__ico--close{display:block;}
.tabbar{display:none;}
/* people who switch off animations in their OS get a still page */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
/* ---------- 16. RESPONSIVE ---------- */
@media (max-width:1180px){
  .payrow{grid-template-columns:repeat(11,1fr);gap:10px;}
  :root{--fs-display:36px;--fs-h2:30px;}
  .hero{padding:var(--sp-8) var(--sp-7) var(--sp-8);}
  .hero__top{grid-template-columns:1fr;gap:var(--sp-6);}
  .hero__aside{padding-bottom:0;}
  .hero__lead{max-width:640px;}
  .accordion{height:224px;}
  .apanel{flex-basis:76px;}
  .promo-grid{grid-template-columns:1fr;}
  .faq{grid-template-columns:1fr;gap:var(--sp-8);}
  .faq__help{flex:none;}
  .faq__art{flex:none;height:160px;margin-top:var(--sp-7);}
  .deals__grid{grid-template-columns:repeat(4,1fr);}
  .catrow{grid-template-columns:180px 1fr;}
  .catrow__grid{grid-template-columns:repeat(3,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .b2b__inner{grid-template-columns:1fr;gap:var(--sp-10);}
  .b2b__partners{flex-direction:column;align-items:flex-start;gap:var(--sp-4);margin-top:var(--sp-10);}
  .section{padding-top:44px;padding-bottom:44px;}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-10);}
  .header__main{gap:var(--sp-5);}
  .navgroup,.nav{gap:var(--sp-4);}
  .nav a{font-size:var(--fs-xs);}
}
@media (max-width:1080px){
  .review-rail{grid-auto-columns:calc((100% - var(--sp-5))/2);}
}
@media (max-width:980px){
  .navgroup,.header__signin{display:none;}
  .topbar__left .topbar__sep,.topbar__left a:last-child{display:none;}
  .burger{display:grid;}
  .header__main{min-height:58px;gap:var(--sp-4);}
  .brand{height:30px;}
  .searchpanel{padding:var(--sp-6) 0;}
  .searchfield{height:56px;}
  .searchfield input{font-size:var(--fs-base);}
}
@media (max-width:760px){
  :root{--fs-display:29px;--fs-h2:26px;--fs-h3:19px;--fs-lg:16px;--gutter:18px;}
  body{padding-bottom:70px;}
  .section{padding-top:36px;padding-bottom:36px;}
  #deals,#new,#categories,#why{scroll-margin-top:70px;}

  .hero-wrap{padding-top:var(--sp-5);}
  .hero{border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-5) var(--sp-7);}
  .hero h1{font-size:28px;}
  .hero__lead{font-size:var(--fs-xs);}
  .hero__shop{margin-top:var(--sp-4);}

  /* panels stop sliding and become four stacked rows */
  .accordion{display:grid;grid-template-columns:1fr;gap:var(--sp-3);height:auto;margin-top:var(--sp-6);}
  /* stacked full-width rows, so every panel shows its wide image */
  .apanel{flex:none;height:124px;}
  .apanel__shot--tall{opacity:0;}
  .apanel__shot--wide{opacity:1;}
  .apanel::after{opacity:0;}
  .apanel__count{left:var(--sp-5);top:auto;bottom:var(--sp-5);opacity:1;}
  .apanel__go{right:var(--sp-5);bottom:var(--sp-5);width:34px;height:34px;opacity:1;transform:none;}
  /* matches the is-open specificity, otherwise the desktop size wins here */
  .apanel.is-fallback .apanel__art,
  .apanel.is-fallback.is-open .apanel__art{left:auto;right:78px;transform:translateY(-50%);width:72px;height:72px;opacity:.9;}
  .apanel__go svg{width:13px;height:13px;}

  .promo{padding:var(--sp-7);min-height:200px;}
  .promo h3{font-size:24px;max-width:62%;}
  .promo p{max-width:62%;}
  .promo__img{right:var(--sp-5);max-height:56%;}
  .brandtile{min-height:104px;padding:var(--sp-4);}
  .brandtile img{max-height:42px;}
  .faq__q{padding:var(--sp-4) var(--sp-5);}
  .faq__a p{padding:0 var(--sp-5) var(--sp-5);}
  .faq__help{padding:var(--sp-6);}

  .topbar{font-size:var(--fs-3xs);}
  .topbar__inner{justify-content:space-between;gap:var(--sp-3);}
  .topbar__left a span.hide-sm{display:none;}
  .topbar__right a{display:none;}
  .topbar__right .lang{display:flex;}

  .searchpanel__row{flex-wrap:wrap;}
  .searchfield{order:1;width:100%;flex:1 1 100%;height:52px;padding-left:var(--sp-5);}
  .searchfield__go{height:42px;padding:0 var(--sp-5);}
  .searchpanel__close{order:0;margin-left:auto;width:44px;height:44px;}

  .section-head{flex-direction:column;align-items:flex-start;gap:var(--sp-5);margin-bottom:var(--sp-8);}
  .section-head .btn,.section-head .rail-nav{align-self:flex-start;}

  .deals{padding:var(--sp-5);border-radius:var(--r-xl);}
  .deals__head{gap:var(--sp-3);}
  .deals__all{margin-left:0;width:100%;}
  .deals__all .btn{width:100%;}
  .deals__grid{grid-template-columns:repeat(2,1fr);}

  .catrow{grid-template-columns:1fr;}
  .catrow__side{flex-direction:row;align-items:center;gap:var(--sp-4);padding:var(--sp-4);flex-wrap:wrap;}
  .catrow__side i{width:38px;height:38px;}
  .catrow__side h3{margin-top:0;font-size:var(--fs-base);}
  .catrow__side p{display:none;}
  .catrow__side .btn{margin-top:0;margin-left:auto;}
  .catrow__grid{grid-template-columns:repeat(2,1fr);}

  .rail{grid-auto-columns:minmax(200px,1fr);gap:var(--sp-3);}
  .add{width:38px;height:38px;}
  .add svg{width:17px;height:17px;}
  .prod__wish{width:40px;height:40px;}
  .faq__q{min-height:52px;}
  .catrow{margin-bottom:var(--sp-4);}
  .section-head{margin-bottom:var(--sp-7);}
  .hero-wrap{padding-top:var(--sp-4);}
  .media{padding:var(--sp-5);}
  .prod__body{padding:var(--sp-4);}
  .prod__title{font-size:var(--fs-sm);min-height:40px;}
  .prod__wish{opacity:1;transform:none;}

  .why-grid{grid-template-columns:1fr;}
  .b2b__grid{grid-template-columns:1fr 1fr;gap:var(--sp-3);}
  .b2b__tile{padding:var(--sp-5);}
  .b2b__tile i{margin-bottom:var(--sp-4);width:36px;height:36px;}
  .review-rail{grid-auto-columns:88%;gap:var(--sp-3);}
  .review-card{padding:var(--sp-6);}
  .review-card__quote svg{width:44px;height:44px;}
  .rating-summary{width:100%;}
  .seller{padding:var(--sp-10) var(--sp-5);border-radius:var(--r-xl);}

  .footer{padding-top:var(--sp-12);}
  .footer__top{grid-template-columns:1fr;gap:var(--sp-8);}
  .footer__pay{margin-top:var(--sp-10);padding-top:var(--sp-6);}
  .payrow{gap:7px;}
  .payicon{height:42px;border-radius:8px;}
  .footer__bottom{margin-top:var(--sp-6);}

  .fab{right:14px;bottom:78px;gap:10px;}
  .fab__btn{width:46px;height:46px;}
  .fab__btn svg{width:19px;height:19px;}
  .fab__item{height:42px;font-size:var(--fs-xs);padding:0 16px 0 6px;gap:9px;}
  .fab__item i{width:30px;height:30px;}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:85;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 18px rgba(20,22,43,.07);}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px;font-size:10px;font-weight:600;color:var(--muted);position:relative;}
  .tabbar a svg{width:21px;height:21px;}
  .tabbar a.is-on{color:var(--navy-700);}
  .tabbar .cnt{position:absolute;top:4px;right:50%;transform:translateX(18px);min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);background:var(--blue-600);color:#fff;font-size:9px;display:grid;place-items:center;}
}
@media (max-width:560px){
  .brand-grid{grid-template-columns:repeat(2,1fr);}
  .brandtile{min-height:96px;padding:var(--sp-4);}
}
@media (max-width:420px){
  .payrow{grid-template-columns:repeat(6,1fr);gap:7px;}
  .payicon{max-width:52px;}
  :root{--fs-display:25px;--fs-h2:23px;--gutter:14px;}
  /* the logo plus four icon buttons no longer fit a 360px phone at full size */
  .brand{height:25px;}
  .header__main{gap:var(--sp-2);}
  .header__actions{gap:4px;}
  .icon-btn{width:36px;height:36px;}
  .icon-btn svg{width:19px;height:19px;}
  .icon-btn__dot{top:2px;right:2px;min-width:15px;height:15px;padding:0 4px;font-size:9px;border-width:1.5px;}
  .apanel{height:112px;}
  .promo h3{font-size:21px;max-width:100%;}
  .promo p{max-width:100%;}
  .promo__img{opacity:.22;}
}
/* ---------- MOBILE TOUCH SIZING ----------
   A finger is not a cursor. Anything meant to be tapped gets a taller
   hit area on a phone, even when the text inside it stays small. */
@media (max-width:760px){
  .footer__links a{min-height:40px;padding:5px 0;}
  .topbar a{min-height:34px;}
  .lang button{padding:8px 14px;}
  .drawer__head button{width:40px;height:40px;display:grid;place-items:center;margin-right:-6px;}
  .crumb__inner a{min-height:36px;display:inline-flex;align-items:center;}
  .fgroup__body .fcheck{padding:11px 0;}
  .link-more{min-height:38px;}
  .sum__mini .sum__step button{width:32px;height:32px;}
  .sortsel{padding-right:var(--sp-4);}
  .sortsel select{align-self:stretch;height:100%;min-height:42px;}
  .cback{min-height:40px;}
  .citem__kill{flex:none;}
  .range input::-webkit-slider-thumb{width:26px;height:26px;}
  .range input::-moz-range-thumb{width:26px;height:26px;}
}
/* ---------- VERY SMALL PHONES ----------
   320px screens are still out there. The logo and the header icons give up
   a little more room so the row never spills off the side. */
@media (max-width:359px){
  :root{--gutter:12px;}
  .brand{height:24px;}
  .header__main{gap:8px;}
  .header__actions{gap:4px;}
  .icon-btn{width:36px;height:36px;}
  .icon-btn svg{width:18px;height:18px;}
  .icon-btn__dot{min-width:15px;height:15px;padding:0 3px;font-size:8px;}
  .drawer{width:min(300px,92vw);}
}
/* ---------- ONE CART, NOT TWO ----------
   As soon as the bottom tab bar appears it already carries Cart with its
   own count, so the header copy of it goes away. The same thing in two
   places on one screen just makes the person wonder which one is real. */
@media (max-width:760px){
  .icon-btn--cart{display:none;}
}
/* ---------- 24. FOOTER: WHO CARRIES IT, AND HOW IT IS PAID ----------
   The payment row above says which brands we work with. This row says
   the two things a buyer actually acts on: who brings the parcel, and
   that the money changes hands at the door. */
.footer__ship{
  margin-top:var(--sp-7);padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-6);flex-wrap:wrap;
}
.shipgroup{display:flex;align-items:center;gap:var(--sp-5);min-width:0;flex-wrap:wrap;}
.shipgroup > span{font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;}
.shiprow{display:flex;gap:var(--sp-3);flex-wrap:wrap;min-width:0;}
.shiptile{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-pill);background:#fff;color:var(--navy-700);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s ease, box-shadow .18s ease;}
.shiptile svg{width:17px;height:17px;flex:none;color:var(--blue-600);}
/* ---------- QUICK VIEW ----------
   The panel behind the plus button on a product card. It borrows the
   page's own parts, the picture frame, the price block, the stock line,
   the quantity box and the buttons, so it looks like the rest of the
   shop rather than like something bolted on. */
.qv[hidden]{display:none;}
.qv{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:var(--sp-6);}
.qv__backdrop{position:absolute;inset:0;background:rgba(16,18,38,.55);backdrop-filter:blur(2px);}
.qv__sheet{position:relative;width:min(960px,100%);max-height:calc(100vh - 48px);overflow:auto;
  background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(16,18,38,.34);
  animation:qvIn .2s ease;}
@keyframes qvIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.qv__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2;}
.qv__eyebrow{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.qv__close{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-pill);color:var(--ink-2);}
.qv__close:hover{background:var(--canvas-2);}
.qv__close svg{width:16px;height:16px;}
.qv__panel{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);padding:var(--sp-6);align-items:start;}
/* A column of a grid is as wide as the widest thing in it, and a row of
   thumbnails that scrolls sideways counts as very wide indeed. Without
   this the column grew past the screen and took the panel with it. These
   two lines are what let a scrolling strip live inside a grid at all. */
.qv__media,.qv__info{min-width:0;}
.qv__wait,.qv__miss{grid-column:1 / -1;padding:var(--sp-8);text-align:center;color:var(--muted);font-size:var(--fs-sm);}

/* Every product photo is 1080x1080, so the frame is square here as it is
   everywhere else: a square photo in a square frame fills it, and the same
   picture in a short wide frame only shrinks and leaves white at the sides.

   Keeping it square still has to answer the problem the earlier capped
   version was solving, a panel taller than the window. It is answered by
   the width rather than the height: the square is as wide as the column
   allows, but never wider than a share of the window itself, so on a short
   screen the picture gets smaller while staying square. One measurement
   does both, and the thumbnails below borrow it so they line up with the
   frame instead of sticking out past it. */
.qv__media{--qv-pic:min(100%,52vh);}
.qv__frame{border:1px solid var(--line);border-radius:var(--r-md);cursor:zoom-in;
  aspect-ratio:1/1;width:var(--qv-pic);margin-inline:auto;padding:var(--sp-5);}
.qv__frame.is-zoom{cursor:zoom-out;}
.qv__frame.is-zoom img{transform:scale(2.2);}
.qv__count{position:absolute;right:10px;bottom:10px;z-index:2;
  background:rgba(16,18,38,.62);color:#fff;border-radius:var(--r-pill);
  padding:3px 9px;font-size:var(--fs-3xs);font-weight:600;}
/* The product page lays its thumbnails out as a grid of five, which in a
   panel put a product with seven photos onto two rows and made the whole
   thing taller again. Written with the panel named as well, so it wins
   wherever the two rules happen to sit in this file: relying on which rule
   comes later is how the first version of this lost. */
.qv__panel .qv__thumbs{margin-top:var(--sp-3);display:flex;flex-wrap:nowrap;
  gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;
  width:var(--qv-pic);margin-inline:auto;}
.qv__panel .qv__thumbs::-webkit-scrollbar{display:none;}
.qv__panel .qv__thumbs .gal__thumb{flex:0 0 auto;width:56px;height:56px;}

.qv__cat{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-600);}
.qv__info h2{font-size:var(--fs-h4);line-height:1.3;margin-top:var(--sp-2);}
.qv__info .price{margin-top:var(--sp-4);}
.qv__info .stock{margin-top:var(--sp-3);}
.qv__short{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;}
.qv__spec{margin-top:var(--sp-4);}
.qv__buy{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);}
.qv__add{flex:1 1 auto;justify-content:center;}
.qv__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px dashed var(--line);}
.qv__full{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--navy-700);}
.qv__full svg{width:15px;height:15px;}
.qv__cod{font-size:var(--fs-3xs);color:var(--muted);}
body.qv-open{overflow:hidden;}
@media (max-width:760px){
  .qv{padding:0;align-items:flex-end;}
  .qv__sheet{width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;}
  .qv__panel{grid-template-columns:1fr;gap:var(--sp-4);padding:var(--sp-5);}
  /* on a phone the panel is one column, so the square may have the whole
     width: the picture is the reason the customer opened the panel. What
     keeps the buy button reachable is the sticky bar further down, not a
     smaller photo. */
  .qv__media{--qv-pic:100%;}
  .qv__frame{padding:var(--sp-4);}
  .qv__panel .qv__thumbs .gal__thumb{width:48px;height:48px;}
  /* the quantity and the buy button stay on screen while everything above
     them scrolls, because on a phone that is the one thing a customer came
     to the panel to reach */
  .qv__buy{position:sticky;bottom:0;z-index:3;margin:0 calc(var(--sp-5) * -1);
    padding:var(--sp-4) var(--sp-5);background:#fff;border-top:1px solid var(--line);}
  .qv__foot{margin-top:var(--sp-4);}
}

/* ---------- the product page, where real data needed a little more ----------
   Four small things the design had no sample of: a star that is not earned,
   a product that has run out, a thumbnail that is a photo rather than a
   drawing, and a list of real reviews. */

/* an unearned star is drawn in the same place, just faint, so four out of
   five reads as four out of five rather than as four stars */
.stars svg.is-off{color:var(--line);}

.stock--out{color:var(--danger,#C2410C);}
.stock--out svg{color:currentColor;}

/* a thumbnail holds a photo now, so it has to behave like the main frame */
/* The same square box the big pictures were given. Without it the photo
   kept its own tall shape, the little square grew to hold it, and a row
   of five grew wider than the gallery and pushed the last one out over
   the text beside it. */
.gal__thumb img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;padding:6px;}

/* ---------- the reviews tab ----------
   The summary on the left and the form on the right, with the reviews
   themselves underneath. The layout follows the one the owner asked for;
   the colours, the type and the corners are this site's own, because a
   block borrowed from another shop's theme would be the only thing on
   the page that does not look like the rest of it. */
.revtop{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--sp-7);align-items:start;}

.revsum__head{display:flex;align-items:flex-start;gap:var(--sp-4);}
.revsum__big{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--blue-600);}
.revsum__of{display:grid;gap:5px;padding-top:3px;}
.revsum__of b{font-size:var(--fs-sm);}
/* the star row here sits inside a stack, so it does not carry the margin
   the standalone one does */
.revsum__of .stars{margin-bottom:0;}
.revsum__n{font-size:var(--fs-2xs);color:var(--muted);}
.revsum__rec{margin-top:var(--sp-5);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.revsum__rec b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.revsum__rec span{font-size:var(--fs-sm);font-weight:700;}
.revsum__rec i{font-style:normal;font-size:var(--fs-2xs);color:var(--muted);}

.revbars{margin-top:var(--sp-5);display:grid;gap:7px;}
.revbar{display:flex;align-items:center;gap:var(--sp-3);}
.revbar .stars{margin-bottom:0;flex:none;}
.stars--sm svg{width:12px;height:12px;}
.revbar__track{flex:1 1 auto;min-width:0;height:8px;border-radius:999px;background:var(--canvas-2);overflow:hidden;}
.revbar__fill{display:block;height:100%;border-radius:999px;background:var(--amber-500,#F59E0B);}
.revbar__pct{flex:none;width:38px;text-align:right;font-size:var(--fs-2xs);color:var(--muted);font-variant-numeric:tabular-nums;}

.revlist{display:grid;gap:var(--sp-5);margin-top:var(--sp-7);}
/* The same breathing room when there is nothing to list yet. Only
   .revlist had it, so on a product nobody has reviewed the empty state
   touched the Submit review button above it. */
#rev > .empty{margin-top:var(--sp-7);}
.revitem{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);}
.revitem__rec{display:inline-flex;align-items:center;margin-top:var(--sp-3);
  font-size:var(--fs-2xs);font-weight:700;color:var(--green-700,#08653C);}

/* Most of this shop's customers are on a phone, so the two columns become
   one well before the screen gets tight. The summary stays on top,
   because the number and the stars are what someone came to this tab to
   see, and the form follows it with a line between them. */
@media (max-width:860px){
  .revtop{grid-template-columns:1fr;gap:var(--sp-6);}
  .revwrite{padding-top:var(--sp-6);border-top:1px dashed var(--line);}
}
@media (max-width:560px){
  .revsum__big{font-size:38px;}
  .revsum__rec b{font-size:19px;}
  .revbar__pct{width:34px;}
  /* a tapped star has to be a comfortable target, not a 24px icon */
  .revstar span{width:34px;height:34px;}
  .revstar span svg{width:26px;height:26px;}
  .revform__rate{gap:var(--sp-2);}
  .revform__label{flex:1 0 100%;}
}
.revitem__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.revitem__who{display:flex;align-items:baseline;gap:var(--sp-3);}
.revitem__who b{font-size:var(--fs-sm);}
.revitem__who span{font-size:var(--fs-2xs);color:var(--muted);}
.revitem p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;}

/* writing one.
   This used to sit under the review list with a dashed line above it.
   It is a column of its own now, so the rule that separated it from the
   list above would be separating it from nothing. */
.revwrite h3{font-size:var(--fs-lg,19px);}
.revwrite__note{margin-top:var(--sp-2);font-size:var(--fs-2xs);color:var(--muted);}
.revform{margin-top:var(--sp-4);display:grid;gap:var(--sp-4);}
.revform textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4);font:inherit;font-size:var(--fs-sm);color:var(--ink);background:#fff;resize:vertical;}
.revform textarea:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(32,126,193,.14);}
.revform__stars{display:flex;align-items:center;gap:var(--sp-2);}
/* the real radio stays where it is for the keyboard, just out of sight */
.revstar input{position:absolute;opacity:0;width:1px;height:1px;}
.revstar span{display:grid;place-items:center;width:30px;height:30px;cursor:pointer;color:var(--line);transition:color .15s ease,transform .15s ease;}
.revstar span svg{width:24px;height:24px;}
.revstar input:focus-visible + span{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:6px;}
/* every star up to the one under the mouse lights up, which is what a row
   of stars has always promised and what people try first */
.revform__stars:hover .revstar span{color:var(--amber-500,#F59E0B);}
.revform__stars .revstar:hover ~ .revstar span{color:var(--line);}
.revstar.is-on span{color:var(--amber-500,#F59E0B);}
.revform__hint{margin-left:var(--sp-3);font-size:var(--fs-2xs);color:var(--muted);}
/* the label and the stars on one line, as in the design the owner sent */
.revform__rate{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.revform__label{font-size:var(--fs-sm);color:var(--ink-2);}
.revform__rec{display:flex;align-items:flex-start;gap:9px;cursor:pointer;}
.revform__rec input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--blue-600);cursor:pointer;}
.revform__rec span{font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.6;}
.revform__foot{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;}
.revform__msg{font-size:var(--fs-2xs);color:var(--muted);}
.revform__msg.is-bad{color:var(--danger,#C2410C);}
.revform__msg.is-good{color:var(--green-700,#08653C);}
.revsignin{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);}
.revsignin svg{width:26px;height:26px;color:var(--blue-600);flex:none;}
.revsignin > div{flex:1 1 220px;display:grid;gap:3px;}
.revsignin b{font-size:var(--fs-sm);}
.revsignin span{font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}

/* the courier tiles carry the real logos now, so the tile holds a picture
   instead of a drawing and a word. One height for both keeps them level
   however wide each logo happens to be. */
.shiptile--logo{padding:0 14px;}
.shiptile--logo img{height:18px;width:auto;display:block;}
.shiptile:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.34);}
.codnote{display:inline-flex;align-items:center;gap:10px;min-width:0;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);
  padding:9px 18px;font-size:var(--fs-2xs);color:rgba(255,255,255,.72);}
.codnote svg{width:18px;height:18px;flex:none;color:#7FC2EC;}
.codnote b{color:#fff;font-weight:700;}
@media (max-width:760px){
  .footer__ship{flex-direction:column;align-items:flex-start;gap:var(--sp-5);}
  .shipgroup{width:100%;}
  .codnote{width:100%;justify-content:center;}
}
@media (max-width:420px){
  .shiprow{width:100%;}
  .shiptile{flex:1 1 0;min-width:0;justify-content:center;padding:0 12px;}
}
/* ---------- THE HEADER ROW WITH TRACK ORDER IN IT ----------
   One more nav link means the row runs out of space earlier than it used
   to. Between the full desktop header and the point where the nav moves
   into the drawer, everything gives up a little padding instead. */
@media (max-width:1120px){
  .header__main{gap:var(--sp-4);}
  .navgroup,.nav{gap:var(--sp-3);}
  .allcat{padding-left:var(--sp-4);padding-right:var(--sp-4);gap:var(--sp-2);}
  .header__signin{margin-left:var(--sp-2);padding-left:var(--sp-4);padding-right:var(--sp-4);}
  .header__actions{gap:4px;}
}
/* Below this the nav is still on the row but the space has run out. The
   sign in button drops its word and keeps its icon, which is the smallest
   thing to lose and the one people already recognise. */
@media (max-width:1040px){
  .header__signin span{display:none;}
  .header__signin{width:40px;padding:0;justify-content:center;}
}
/* ---------- 34. BANGLA ----------
   The switch in the top bar is real. Anything carrying a Bangla string is
   swapped in place, and the page gets a Bengali face that actually has the
   letterforms, because the Latin fonts do not. */
html[lang="bn"] body,
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] select,
html[lang="bn"] textarea{
  font-family:'Hind Siliguri','Noto Sans Bengali','Plus Jakarta Sans',system-ui,sans-serif;
}
/* Bengali sits lower and needs more room between lines than Latin does */
html[lang="bn"] body{line-height:1.75;}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,
html[lang="bn"] h4,html[lang="bn"] .brand-font{
  font-family:'Hind Siliguri','Noto Sans Bengali','Plus Jakarta Sans',sans-serif;
  letter-spacing:0;line-height:1.4;
}
/* prices and order numbers stay in the Latin face, where the digits line up */
html[lang="bn"] .price,html[lang="bn"] .sum__total b,html[lang="bn"] .ocard__no,
html[lang="bn"] .orow__no,html[lang="bn"] .fact b,html[lang="bn"] .num b,
html[lang="bn"] .t3 b,html[lang="bn"] .tile b{
  font-family:'Plus Jakarta Sans',sans-serif;
}
.lang button{cursor:pointer;}
/* ---------- 36. SIGNED IN HEADER ----------
   A signed-in person should not be invited to sign in. The button is
   replaced by who they are, with their account menu behind it. */
.header__user{position:relative;display:none;margin-left:var(--sp-3);}
body.is-signed-in .header__user{display:block;}
body.is-signed-in .header__signin{display:none;}
.userbtn{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding:0 var(--sp-3) 0 4px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  transition:border-color .18s ease,background .18s ease;}
.userbtn:hover{border-color:#C3D0E8;background:var(--canvas-2);}
.userbtn i{width:32px;height:32px;flex:none;border-radius:50%;background:var(--navy-700);
  color:#fff;display:grid;place-items:center;font-style:normal;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-3xs);font-weight:700;}
.userbtn b{font-size:var(--fs-xs);font-weight:600;color:var(--ink);white-space:nowrap;}
.userbtn > svg{width:14px;height:14px;color:var(--muted);transition:transform .2s ease;}
.userbtn[aria-expanded="true"] > svg{transform:rotate(180deg);}
.usermenu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;z-index:95;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2);
  box-shadow:0 16px 36px rgba(20,22,43,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.usermenu.is-open{opacity:1;visibility:visible;transform:none;}
.usermenu__who{padding:var(--sp-4) var(--sp-4) var(--sp-3);border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-2);}
.usermenu__who b{display:block;font-size:var(--fs-sm);}
.usermenu__who span{display:block;margin-top:2px;font-size:var(--fs-3xs);color:var(--muted);}
.usermenu a,.usermenu button{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-md);
  font-size:var(--fs-xs);color:var(--ink-2);text-align:left;
  transition:background .15s ease,color .15s ease;}
.usermenu a:hover,.usermenu button:hover{background:var(--canvas-2);color:var(--navy-700);}
.usermenu svg{width:16px;height:16px;flex:none;color:var(--muted);}
.usermenu a:hover svg,.usermenu button:hover svg{color:var(--navy-700);}
.usermenu__sep{height:1px;background:var(--line);margin:var(--sp-2) var(--sp-3);}
.usermenu .out{color:var(--sale);}
.usermenu .out svg{color:var(--sale);}
/* below this the header has no room for a name, so the avatar stands alone.
   The same width at which the Sign In button drops its word. */
@media (max-width:1040px){
  .userbtn{padding:0;width:40px;justify-content:center;}
  .userbtn b,.userbtn > svg{display:none;}
}
@media (max-width:980px){ .header__user{display:none !important;} }
/* ---------- 37. TOOLTIPS ----------
   An icon with no label is a guess. On a mouse, hovering says what it does.
   Touch screens get nothing extra, which is correct: there is no hover. */
/* Deliberately no position here. This block is appended at the end of the
   stylesheet, so a position set here would beat every component that set its
   own earlier, and buttons that should be absolute or fixed would fall back
   into the flow. Every tooltip host is positioned by its own rule instead. */
.tip-host{position:relative;}
@media (hover:hover){
  [data-tip]::after{
    content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 9px);
    transform:translateX(-50%) translateY(-4px);
    background:var(--ink);color:#fff;border-radius:7px;padding:6px 10px;
    font-size:var(--fs-3xs);font-weight:600;line-height:1.3;white-space:nowrap;
    opacity:0;pointer-events:none;z-index:120;
    transition:opacity .16s ease,transform .16s ease;
  }
  [data-tip]::before{
    content:"";position:absolute;left:50%;top:calc(100% + 4px);
    transform:translateX(-50%) translateY(-4px);
    border:5px solid transparent;border-bottom-color:var(--ink);
    opacity:0;pointer-events:none;z-index:120;
    transition:opacity .16s ease,transform .16s ease;
  }
  [data-tip]:hover::after,[data-tip]:focus-visible::after,
  [data-tip]:hover::before,[data-tip]:focus-visible::before{
    opacity:1;transform:translateX(-50%) translateY(0);
  }
  [data-tip-side="left"]::after{left:auto;right:calc(100% + 11px);top:50%;
    transform:translateY(-50%) translateX(4px);}
  [data-tip-side="left"]::before{left:auto;right:calc(100% + 1px);top:50%;
    transform:translateY(-50%) translateX(4px);border-bottom-color:transparent;border-left-color:var(--ink);}
  [data-tip-side="left"]:hover::after,[data-tip-side="left"]:hover::before{
    transform:translateY(-50%) translateX(0);}
}
/* ---------- 38. TOASTS ----------
   Something changed, so say so. Short, out of the way, gone on its own. */
.toaster{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:140;
  display:grid;gap:var(--sp-3);width:min(420px,calc(100vw - 32px));pointer-events:none;}
.toast{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--ink);color:#fff;
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-2xs);line-height:1.5;box-shadow:0 14px 34px rgba(10,14,40,.3);
  opacity:0;transform:translateY(14px);pointer-events:auto;
  transition:opacity .22s ease,transform .22s ease;}
.toast.is-in{opacity:1;transform:none;}
.toast svg{width:17px;height:17px;flex:none;margin-top:1px;}
.toast--ok svg{color:#6FD39F;}
.toast--undo{color:#FFD08A;}
.toast b{display:block;color:#fff;}
.toast button{margin-left:auto;flex:none;color:#8FC9F0;font-weight:700;font-size:var(--fs-2xs);
  text-decoration:underline;text-underline-offset:2px;}
@media (max-width:760px){ .toaster{bottom:calc(var(--tabbar-h,64px) + 16px);} }
/* ---------- 39. CONFIRM BEFORE REMOVING ----------
   Anything that cannot be undone asks first, and the ask names the thing. */
.ask{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:var(--sp-5);}
.ask.is-open{display:grid;}
.ask__veil{position:absolute;inset:0;background:rgba(14,16,34,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease;}
.ask.is-open .ask__veil{opacity:1;}
.ask__box{position:relative;width:min(420px,100%);background:#fff;border-radius:var(--r-xl);
  padding:var(--sp-7);box-shadow:0 26px 60px rgba(10,14,40,.3);
  opacity:0;transform:scale(.95) translateY(8px);
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.9,.3,1.1);}
.ask.is-open .ask__box{opacity:1;transform:none;}
.ask__box i{width:52px;height:52px;border-radius:50%;background:#FBEBE9;color:var(--sale);
  display:grid;place-items:center;margin-bottom:var(--sp-5);}
.ask__box i svg{width:24px;height:24px;}
.ask__box h3{font-size:var(--fs-lg);}
.ask__box p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);line-height:1.65;}
.ask__acts{display:flex;gap:var(--sp-3);margin-top:var(--sp-7);}
.ask__acts .btn{flex:1;justify-content:center;}
.btn--danger{background:var(--sale);color:#fff;}
.btn--danger:hover{background:#B5392E;}
/* ---------- 40. EMPTY STATES ----------
   A blank area reads as broken. A drawn one says the page is fine and
   there is simply nothing here yet. The loop is slow on purpose. */
.estate{text-align:center;padding:var(--sp-12) var(--sp-6);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);}
.estate__art{width:168px;height:132px;margin:0 auto var(--sp-6);display:block;}
.estate h3{font-size:var(--fs-lg);}
.estate p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);line-height:1.7;
  max-width:400px;margin-left:auto;margin-right:auto;}
.estate .btn{margin-top:var(--sp-6);}
.estate--inline{border:0;background:none;padding:var(--sp-10) var(--sp-5);}
.efloat{animation:eFloat 4.5s ease-in-out infinite;transform-origin:center;}
.epulse{animation:ePulse 3s ease-in-out infinite;transform-origin:center;}
.espark{animation:eSpark 3.4s ease-in-out infinite;}
.espark--b{animation-delay:.7s;}
.espark--c{animation-delay:1.5s;}
@keyframes eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes ePulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes eSpark{0%,100%{opacity:0;transform:translateY(2px) scale(.8)}
                  40%{opacity:1;transform:translateY(-4px) scale(1)}
                  70%{opacity:0;transform:translateY(-9px) scale(.9)}}
@media (prefers-reduced-motion: reduce){
  .efloat,.epulse,.espark{animation:none;}
  .epulse{opacity:.6;}
}
/* ---------- 35. FLOATING CART ----------
   On every page, not just the product page, and only once something is in
   it. Pinned to the edge rather than floating near it, so it reads as a
   tab pulled out from the side of the page. */
/* hidden while the cart is empty, and while a panel is open over the page,
   where it would sit on top of the picture */
.minicart[hidden]{display:none;}
body.qv-open .minicart{display:none;}

.minicart{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:82;
  display:none;flex-direction:column;align-items:center;gap:5px;
  padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background:var(--navy-700);color:#fff;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  box-shadow:-6px 10px 28px rgba(10,14,40,.3);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body.has-cart .minicart{display:flex;}
.minicart:hover{background:#1D1A4E;box-shadow:-10px 14px 34px rgba(10,14,40,.4);}
.minicart__ico{position:relative;}
.minicart__ico svg{width:23px;height:23px;}
.minicart__pip{
  position:absolute;top:-7px;right:-10px;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--blue-600);color:#fff;
  font-size:var(--fs-3xs);font-weight:700;display:grid;place-items:center;
  border:2px solid var(--navy-700);
}
.minicart__n{font-size:var(--fs-3xs);color:rgba(255,255,255,.72);}
.minicart__sum{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-xs);font-weight:700;}
/* the floating help stack has to move out from under it */
body.has-cart .fab{bottom:24px;}
@media (max-width:980px){
  /* the tab bar already carries the cart with its count, so one is enough */
  .minicart{display:none !important;}
}
/* ---------- 16. BREADCRUMB ---------- */
.crumb{background:var(--canvas);border-bottom:1px solid var(--line);}
.crumb__inner{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:14px 0;font-size:var(--fs-2xs);color:var(--muted);}
.crumb a{color:var(--muted);transition:color .18s ease;}
.crumb a:hover{color:var(--blue-600);}
.crumb svg{width:13px;height:13px;flex:none;opacity:.5;}
.crumb b{color:var(--ink);font-weight:600;}
/* ---------- 19. SHOP LAYOUT ---------- */
.shop{display:grid;grid-template-columns:262px 1fr;gap:var(--sp-8);align-items:start;}
/* filters */
.filters{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.filters__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5);border-bottom:1px solid var(--line);font-weight:700;font-size:var(--fs-sm);}
.filters__head svg{width:17px;height:17px;color:var(--blue-600);}
.filters__close{display:none;margin-left:auto;width:34px;height:34px;border-radius:50%;place-items:center;color:var(--muted);}
.filters__close svg{width:16px;height:16px;}
.fgroup{border-bottom:1px solid var(--line);}
.fgroup:last-of-type{border-bottom:0;}
.fgroup__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}
.fgroup__head svg{width:15px;height:15px;transition:transform .22s ease;}
.fgroup.is-shut .fgroup__head svg{transform:rotate(-90deg);}
.fgroup__body{padding:0 var(--sp-5) var(--sp-5);display:grid;gap:var(--sp-1);}
.fgroup.is-shut .fgroup__body{display:none;}
.fcat{
  display:flex;align-items:center;gap:var(--sp-3);padding:9px 11px;margin:0 -11px;
  border-radius:var(--r-sm);font-size:var(--fs-xs);color:var(--ink-2);
  transition:background .16s ease, color .16s ease;
}
.fcat:hover{background:var(--canvas);color:var(--ink);}
.fcat.is-on{background:var(--navy-50);color:var(--navy-700);font-weight:600;}
.fcat svg{width:15px;height:15px;flex:none;opacity:.55;}
/* the count beside a category, not the name: the design had one span
   here, so naming the last one changes nothing and stops the rule
   reaching a name span added later */
.fcat > span:last-child{margin-left:auto;font-size:var(--fs-3xs);color:var(--muted);}
.fcat.is-on > span:last-child{color:var(--navy-700);}
/* a long category name must wrap instead of pushing the count out of the
   sidebar: a flex child is as wide as its text until it is told otherwise */
.fcat{min-width:0;}
.fcat__name{min-width:0;}
/* the arrow that says a category has subcategories inside it. It follows
   the count, so the count rule above still finds the last span. */
.fcat__in{width:13px;height:13px;flex:none;margin-left:2px;opacity:.5;}
/* the way back out of a main category */
.fcat--back{color:var(--muted);font-weight:600;font-size:var(--fs-3xs);
  letter-spacing:.02em;text-transform:uppercase;}
.fcat--back svg{opacity:.8;}
/* the arrow sits at the left and the words at the right, the way the
   heading of a drilled in list reads. Written here rather than left to
   the count rule above, which would only do this by accident */
.fcat--back .fcat__name{margin-left:auto;}
/* the main category sits above its children as the heading of the list */
.fcat--main{font-weight:700;color:var(--ink);}
/* and the children are stepped in, with a rule down the left so the list
   reads as one group rather than six loose links */
.fcat--sub{padding-left:22px;position:relative;}
.fcat--sub::before{content:"";position:absolute;left:11px;top:4px;bottom:4px;
  width:1.5px;background:var(--line);border-radius:2px;}
.fcat--sub.is-on::before{background:var(--navy-700);}
/* a two handle range built from two sliders stacked on one track */
.range{padding-top:var(--sp-2);}
.range__track{position:relative;height:4px;background:var(--line);border-radius:var(--r-pill);margin:18px 8px 0;}
.range__fill{position:absolute;top:0;bottom:0;background:var(--navy-700);border-radius:var(--r-pill);}
.range input{
  position:absolute;left:-8px;right:-8px;top:-9px;width:calc(100% + 16px);height:22px;
  margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;
}
.range input::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--navy-700);box-shadow:var(--sh-1);cursor:pointer;
}
.range input::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--navy-700);box-shadow:var(--sh-1);cursor:pointer;
}
.range__out{display:flex;justify-content:space-between;margin-top:18px;font-size:var(--fs-2xs);color:var(--muted);}
.range__out b{color:var(--ink);font-weight:600;}
.fcheck{display:flex;align-items:center;gap:var(--sp-3);padding:7px 0;font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer;}
.fcheck input{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;
  border:1.5px solid var(--line);border-radius:5px;background:#fff;
  display:grid;place-items:center;transition:background .16s ease, border-color .16s ease;
}
.fcheck input:checked{background:var(--navy-700);border-color:var(--navy-700);}
.fcheck input::after{
  content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0;
}
.fcheck input:checked::after{opacity:1;}
/* the count on the right of a tick row, not its label. The design only
   ever had the one span here, so excluding a named label changes
   nothing about the design and stops the rule reaching a label span
   added so the language switch can translate it. */
.fcheck span:not(.fcheck__name){margin-left:auto;font-size:var(--fs-3xs);color:var(--muted);}
/* main column */
.shop__main{min-width:0;}
.shop__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-6);}
.shop__bar h1{font-size:28px;}
.shop__count{font-size:var(--fs-2xs);color:var(--muted);margin-left:var(--sp-3);}
.shop__tools{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.fopen{display:none;align-items:center;gap:var(--sp-2);height:44px;padding:0 var(--sp-5);border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:var(--fs-xs);font-weight:600;}
.fopen svg{width:15px;height:15px;color:var(--blue-600);}
.sortsel{display:flex;align-items:center;gap:var(--sp-2);height:44px;padding:0 var(--sp-4) 0 var(--sp-5);border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:var(--fs-xs);color:var(--muted);}
.sortsel svg{width:15px;height:15px;}
.sortsel select{border:0;background-color:transparent;font-size:var(--fs-xs);font-weight:600;color:var(--ink);background-position:right 0 center;background-size:14px 14px;padding-right:20px;cursor:pointer;}
/* one continuous grid: 1px gaps show the background through as hairlines */
.pgrid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.pcard{position:relative;background:#fff;display:flex;flex-direction:column;transition:background .18s ease;}
.pcard:hover{background:#FCFDFF;}
.pcard__media{position:relative;aspect-ratio:1/1;display:grid;place-items:center;padding:var(--sp-6);background:#fff;}
.pcard__media .ph__art{max-width:120px;max-height:120px;}
.pcard__media img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;transition:transform .3s ease;}
.pcard:hover .pcard__media img{transform:scale(1.05);}
.pcard__off{
  position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:2;
  background:var(--green-100);color:var(--green-700);
  font-size:var(--fs-3xs);font-weight:700;padding:4px 9px;border-radius:var(--r-pill);
}
.pcard__wish{
  position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:2;
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);
  opacity:0;transform:translateY(-4px);transition:opacity .2s ease, transform .2s ease, color .18s ease;
}
.pcard__wish svg{width:16px;height:16px;}
.pcard:hover .pcard__wish{opacity:1;transform:none;}
.pcard__wish:hover{color:var(--sale);}
.pcard__body{padding:0 var(--sp-5) var(--sp-5);display:flex;flex-direction:column;flex:1;}
.pcard__title{
  font-size:var(--fs-xs);font-weight:600;line-height:1.45;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;
}
.pcard__title a:hover{color:var(--blue-700);}
/* The whole card opens the product, with the save and add buttons and the
   name itself kept above it so they still do their own jobs.

   Only the ones that are not positioned already are made relative. The save
   button is placed in the corner with position:absolute, and setting it to
   relative here would have dropped it out of that corner. A rule meant to
   fix the stacking order has no business moving anything. */
.pcard__link{position:absolute;inset:0;z-index:1;}
.pcard__wish{z-index:2;}
.pcard__add,.pcard__title a{position:relative;z-index:2;}
/* stock is the thing a buyer checks before anything else, so it sits under the name */
.pcard__stock{display:flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-size:var(--fs-3xs);font-weight:600;color:var(--green-700);}
.pcard__stock svg{width:13px;height:13px;flex:none;}
.pcard__stock--low{color:#B4681C;}
.pcard__stock--out{color:var(--muted);}
.pcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4);}
.pcard__price b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;letter-spacing:-0.02em;}
.pcard__price del{font-size:var(--fs-3xs);color:var(--muted);}
.pcard__add{
  width:36px;height:36px;flex:none;border-radius:50%;background:var(--navy-700);color:#fff;
  display:grid;place-items:center;transition:transform .18s ease, background .18s ease;
}
.pcard__add svg{width:16px;height:16px;}
.pcard__add:hover{background:var(--navy-600);transform:scale(1.08);}
.pcard__add:disabled{background:var(--line);color:var(--muted);cursor:not-allowed;transform:none;}
/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-8);}
.pager__count{font-size:var(--fs-2xs);color:var(--muted);}
.pager__nums{display:flex;align-items:center;gap:var(--sp-2);}
.pager__nums a,.pager__nums span{
  min-width:38px;height:38px;padding:0 10px;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);
  border:1px solid transparent;transition:background .16s ease, border-color .16s ease;
}
.pager__nums a:hover{background:var(--canvas);}
.pager__nums a.is-on{background:var(--navy-700);color:#fff;}
.pager__nums .gap{color:var(--muted);font-weight:400;}
.pager__nums .arrow{border-color:var(--line);background:#fff;}
.pager__nums .arrow svg{width:15px;height:15px;}
.pager__nums .arrow.is-off{opacity:.4;pointer-events:none;}
.fscrim{position:fixed;inset:0;background:rgba(14,16,38,.45);opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;z-index:96;}
.fscrim.is-on{opacity:1;visibility:visible;}
@media (max-width:1180px){ .pgrid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:980px){
  .shop{grid-template-columns:1fr;}
  .pgrid{grid-template-columns:repeat(3,1fr);}
  .fopen{display:inline-flex;}
  .filters{
    position:fixed;top:0;left:0;bottom:0;width:300px;max-width:88vw;z-index:97;
    border-radius:0;border:0;border-right:1px solid var(--line);
    overflow-y:auto;transform:translateX(-102%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .filters.is-open{transform:none;}
  .filters__close{display:grid;}
}
@media (max-width:760px){
  .pgrid{grid-template-columns:repeat(2,1fr);}
  .shop__bar h1{font-size:22px;}
  .pcard__media{padding:var(--sp-4);}
  .pcard__body{padding:0 var(--sp-4) var(--sp-4);}
  .pager{justify-content:center;}
  .shop__tools{width:100%;}
  .fopen,.sortsel{flex:1 1 0;min-width:0;justify-content:center;}
  .sortsel select{min-width:0;}
}
/* ---------- 17. PRODUCT DETAIL ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:start;}
/* gallery: the main frame stays white, as product shots are cut out on white */
.gal{position:sticky;top:96px;}
.gal__main{
  position:relative;aspect-ratio:1/1;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-xl);
  display:grid;place-items:center;padding:var(--sp-10);overflow:hidden;
}
.gal__main img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;}
.gal__art{width:100%;height:100%;max-width:380px;max-height:380px;color:#32407E;--ill-2:#DEEAF7;}
.gal__tag{position:absolute;top:var(--sp-5);left:var(--sp-5);z-index:2;display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;}
.gal__zoom{
  position:absolute;right:var(--sp-5);bottom:var(--sp-5);z-index:2;
  width:42px;height:42px;border-radius:50%;background:#fff;color:var(--navy-700);
  border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--sh-2);
  transition:transform .18s ease;
}
.gal__zoom:hover{transform:translateY(-2px);}
.gal__zoom svg{width:17px;height:17px;}
.gal__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3);margin-top:var(--sp-4);}
/* A grid column refuses to become narrower than the widest thing inside
   it unless it is told it may. This is the line that keeps five
   thumbnails inside the gallery whatever the photos are. */
.gal__thumbs > *{min-width:0;}
/* Five fixed columns is fine on a wide screen. On a 360px phone, a product
   with seven photos pushed the row past the edge and the whole page scrolled
   sideways, which on a phone feels like the site is broken. Below that size
   the thumbnails become one row that scrolls by itself, the same as in the
   quick view, so the page underneath never moves. */
@media (max-width:760px){
  .gal__thumbs{display:flex;flex-wrap:nowrap;gap:var(--sp-2);overflow-x:auto;
    scrollbar-width:none;}
  .gal__thumbs::-webkit-scrollbar{display:none;}
  .gal__thumbs .gal__thumb{flex:0 0 auto;width:64px;height:64px;}
  .pdp__media{min-width:0;}
}
.gal__thumb{
  position:relative;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);display:grid;place-items:center;padding:var(--sp-3);
  cursor:pointer;transition:border-color .18s ease, box-shadow .18s ease;
}
.gal__thumb:hover{border-color:var(--navy-100);}
.gal__thumb.is-on{border-color:var(--navy-700);box-shadow:0 0 0 1px var(--navy-700);}
.gal__thumb svg{width:100%;height:100%;color:#5B6699;--ill-2:#E8EFF8;}
/* buy box */
.buy__brand{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-3xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue-700);}
.buy__brand i{width:6px;height:6px;border-radius:50%;background:var(--blue-600);}
.buy h1{font-size:30px;margin-top:var(--sp-3);line-height:1.22;}
.buy__meta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-4);font-size:var(--fs-2xs);color:var(--muted);}
.buy__stars{display:flex;align-items:center;gap:6px;}
.buy__stars .stars{margin-bottom:0;}
.buy__stars .stars svg{width:14px;height:14px;}
.buy__dot{width:4px;height:4px;border-radius:50%;background:var(--line);}
.buy__sku b{color:var(--ink-2);font-weight:600;}
.price{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-6);}
.price__now{font-family:'Plus Jakarta Sans',sans-serif;font-size:36px;font-weight:700;letter-spacing:-0.03em;line-height:1;}
.price__was{font-size:var(--fs-lg);color:var(--muted);text-decoration:line-through;}
.price__off{background:var(--sale-soft);color:var(--sale);font-size:var(--fs-2xs);font-weight:700;padding:5px 11px;border-radius:var(--r-pill);}
.price__vat{margin-top:7px;font-size:var(--fs-2xs);color:var(--muted);}
.stock{display:inline-flex;align-items:center;gap:7px;margin-top:var(--sp-5);font-size:var(--fs-sm);font-weight:600;color:var(--green-700);}
.stock svg{width:16px;height:16px;}
.stock--low{color:#B4681C;}
/* the only way to pay, so it is stated plainly rather than hidden in checkout */
.codbox{
  margin-top:var(--sp-6);display:flex;gap:var(--sp-4);align-items:flex-start;
  background:var(--green-100);border:1px solid #BFE6D4;border-radius:var(--r-lg);padding:var(--sp-5);
}
.codbox i{width:40px;height:40px;flex:none;border-radius:12px;background:#fff;color:var(--green-700);display:grid;place-items:center;}
.codbox svg{width:20px;height:20px;}
.codbox b{display:block;font-size:var(--fs-sm);color:#0E5437;}
.codbox span{font-size:var(--fs-2xs);color:#2C6A50;}
.qtyrow{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-7);flex-wrap:wrap;}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:#fff;}
.qty button{width:44px;height:48px;display:grid;place-items:center;color:var(--ink-2);transition:background .18s ease;}
.qty button:hover{background:var(--canvas);}
.qty button svg{width:15px;height:15px;}
.qty input{width:52px;height:48px;border:0;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;color:var(--ink);background:none;-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qtyrow__left{font-size:var(--fs-2xs);color:var(--muted);}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5);}
.cta .btn{height:54px;justify-content:center;font-size:var(--fs-sm);}
.cta__call{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-4);padding:var(--sp-4);border:1px dashed var(--line);border-radius:var(--r-lg);font-size:var(--fs-2xs);color:var(--muted);}
.cta__call a{color:var(--navy-700);font-weight:700;}
.cta__call svg{width:15px;height:15px;color:var(--blue-600);}
.perks{display:grid;gap:var(--sp-3);margin-top:var(--sp-7);padding-top:var(--sp-7);border-top:1px solid var(--line);}
.perk{display:flex;gap:var(--sp-4);align-items:flex-start;}
.perk i{width:36px;height:36px;flex:none;border-radius:11px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;}
.perk svg{width:17px;height:17px;}
.perk b{display:block;font-size:var(--fs-sm);}
.perk span{font-size:var(--fs-2xs);color:var(--muted);}
/* ---------- 18. PRODUCT INFO TABS ---------- */
.tabs{scroll-margin-top:104px;display:flex;gap:var(--sp-2);border-bottom:1px solid var(--line);margin-bottom:var(--sp-8);overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{
  position:relative;padding:14px 20px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  white-space:nowrap;transition:color .18s ease;
}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--navy-700);opacity:0;transition:opacity .2s ease;}
.tabs button:hover{color:var(--ink-2);}
.tabs button.is-on{color:var(--navy-700);}
.tabs button.is-on::after{opacity:1;}
.panel{display:none;}
.panel.is-on{display:block;}
.prose{max-width:760px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.8;}
.prose p+p{margin-top:var(--sp-4);}
.prose h3{font-size:var(--fs-h3);margin:var(--sp-7) 0 var(--sp-3);}
.prose ul{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);}
.prose li{display:flex;gap:var(--sp-3);align-items:flex-start;}
.prose li svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--green-600);}
.spec{width:100%;border-collapse:collapse;max-width:760px;font-size:var(--fs-sm);}
.spec tr{border-bottom:1px solid var(--line);}
.spec tr:last-child{border-bottom:0;}
.spec td{padding:14px 0;vertical-align:top;}
.spec td:first-child{color:var(--muted);width:40%;}
.spec td:last-child{font-weight:600;}
@media (max-width:1180px){
  .pdp{grid-template-columns:1fr;gap:var(--sp-10);}
  .gal{position:static;}
  /* the frame was wider than tall here while the gallery sat above the buy
     box instead of beside it. With every photo 1080x1080 that shape only
     shrank the picture and left white down both sides, so the frame stays
     square at every width and the photo keeps the size it was given.

     Square and full width on a tablet would be a 900 pixel picture that
     pushes the price off the screen, so it is given a sensible largest
     size and centred, and the thumbnails are held to the same width so
     the two line up. */
  .gal{--pdp-pic:min(100%,520px);}
  .gal__main{aspect-ratio:1/1;padding:var(--sp-8);width:var(--pdp-pic);margin-inline:auto;}
  .gal__thumbs{width:var(--pdp-pic);margin-inline:auto;}
}
@media (max-width:760px){
  .buy h1{font-size:23px;}
  .price__now{font-size:30px;}
  .gal__thumbs{gap:var(--sp-2);}
  .cta{grid-template-columns:1fr;}
  .tabs button{padding:12px 15px;font-size:var(--fs-xs);}
  .spec td:first-child{width:46%;}
}
/* ---------- 20. IMAGE ZOOM ---------- */
.gal__main{cursor:zoom-in;}
.lightbox{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(10,12,32,.92);padding:var(--sp-8);
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;
}
.lightbox.is-on{opacity:1;visibility:visible;}
.lightbox__stage{
  position:relative;width:min(760px,100%);aspect-ratio:1/1;background:#fff;
  border-radius:var(--r-xl);display:grid;place-items:center;padding:var(--sp-10);
  overflow:hidden;transform:scale(.96);transition:transform .25s ease;
}
.lightbox.is-on .lightbox__stage{transform:none;}
.lightbox__stage svg{width:100%;height:100%;max-width:480px;max-height:480px;color:#32407E;--ill-2:#DEEAF7;}
.lightbox__stage img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;}
.lightbox__close{
  position:absolute;top:var(--sp-5);right:var(--sp-5);z-index:2;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;
  transition:background .18s ease;
}
.lightbox__close:hover{background:rgba(255,255,255,.26);}
.lightbox__close svg{width:20px;height:20px;}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;
  transition:background .18s ease;
}
.lightbox__nav:hover{background:rgba(255,255,255,.26);}
.lightbox__nav svg{width:20px;height:20px;}
.lightbox__nav--prev{left:var(--sp-6);}
.lightbox__nav--next{right:var(--sp-6);}
.lightbox__dots{position:absolute;left:0;right:0;bottom:var(--sp-6);display:flex;justify-content:center;gap:var(--sp-2);z-index:2;}
.lightbox__dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s ease, width .2s ease;}
.lightbox__dots button.is-on{width:24px;border-radius:var(--r-pill);background:#fff;}
@media (max-width:760px){
  .lightbox{padding:var(--sp-4);}
  .lightbox__stage{padding:var(--sp-6);}
  .lightbox__nav{width:42px;height:42px;}
  .lightbox__nav--prev{left:var(--sp-3);}
  .lightbox__nav--next{right:var(--sp-3);}
}
/* ---------- 22. STICKY BUY BAR ---------- */
/* appears once the real buy box has scrolled past, so the price and the
   two buttons are never more than a thumb away */
.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:84;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 28px rgba(20,22,43,.09);
  transform:translateY(102%);transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.stickybuy.is-up{transform:none;}
.stickybuy__inner{display:flex;align-items:center;gap:var(--sp-5);padding:12px 0;}
.stickybuy__thumb{
  width:52px;height:52px;flex:none;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);display:grid;place-items:center;padding:6px;
}
.stickybuy__thumb svg{width:100%;height:100%;color:#5B6699;--ill-2:#E8EFF8;}
.stickybuy__text{min-width:0;flex:1;}
.stickybuy__name{
  font-size:var(--fs-sm);font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.stickybuy__price{display:flex;align-items:baseline;gap:var(--sp-3);margin-top:2px;}
.stickybuy__price b{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.02em;}
.stickybuy__price del{font-size:var(--fs-2xs);color:var(--muted);}
.stickybuy__price span{font-size:var(--fs-3xs);font-weight:600;color:var(--green-700);}
.stickybuy__cta{display:flex;gap:var(--sp-3);flex:none;}
.stickybuy__cta .btn{min-height:46px;}
/* the help stack steps up so the bar never lands on top of it */
body.p-product .fab{transition:transform .18s ease, bottom .32s cubic-bezier(.4,0,.2,1);}
body.has-buybar .fab{bottom:100px;}
@media (max-width:980px){
  /* the mobile tab bar already carries a cart with a count, so this would repeat it */
  .minicart{display:none;}
}
@media (max-width:760px){
  .stickybuy{bottom:var(--tabbar-h,64px);}
  .stickybuy__inner{gap:var(--sp-3);padding:10px 0;}
  .stickybuy__thumb{display:none;}
  .stickybuy__price b{font-size:var(--fs-base);}
  .stickybuy__price del{display:none;}
  .stickybuy__cta .btn{min-height:44px;padding:0 var(--sp-4);font-size:var(--fs-xs);}
  .stickybuy__cta .btn--ghost span{display:none;}
  body.has-buybar .fab{bottom:154px;}
}
@media (max-width:420px){
  .stickybuy__name{font-size:var(--fs-xs);}
  .stickybuy__cta{gap:var(--sp-2);}
}
/* ---------- 21. CART AND CHECKOUT ---------- */
.flow{display:grid;grid-template-columns:1fr 380px;gap:var(--sp-8);align-items:start;}
.flowhead{margin-bottom:var(--sp-7);}
.flowhead h1{font-size:28px;}
.flowhead p{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);}
/* steps */
.steps{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-8);flex-wrap:wrap;}
.step{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--muted);}
.step i{width:28px;height:28px;border-radius:50%;background:var(--canvas-2);color:var(--muted);display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700;font-style:normal;flex:none;}
.step.is-done i{background:var(--green-100);color:var(--green-700);}
.step.is-done svg{width:14px;height:14px;}
.step.is-on{color:var(--ink);font-weight:600;}
.step.is-on i{background:var(--navy-700);color:#fff;}
.steps__line{width:34px;height:1px;background:var(--line);}
/* cart lines */
.citems{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;}
.citem{display:grid;grid-template-columns:100px 1fr auto;gap:var(--sp-5);padding:var(--sp-5);border-bottom:1px solid var(--line);align-items:center;}
.citem:last-child{border-bottom:0;}
.citem .citem__media{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);display:grid;place-items:center;padding:var(--sp-3);}
.citem__media .ph__art{max-width:74px;max-height:74px;}
/* grid items default to min-width:auto, so a long product name widened the row */
.flow>*,.citem>div{min-width:0;}
.citem__name{font-size:var(--fs-sm);font-weight:600;line-height:1.45;overflow-wrap:anywhere;}
.citem__name a:hover{color:var(--blue-700);}
.citem__brand{display:block;margin-bottom:5px;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-700);}
.citem__note{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:var(--fs-3xs);font-weight:600;color:var(--green-700);}
.citem__note svg{width:13px;height:13px;}
.citem__note--low{color:#B4681C;}
.citem__ctrl{display:flex;align-items:center;gap:var(--sp-5);}
.citem__price{text-align:right;min-width:92px;}
.citem__price b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;}
.citem__price del{font-size:var(--fs-3xs);color:var(--muted);}
.citem__kill{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .18s ease,color .18s ease;}
.citem__kill:hover{background:var(--sale-soft);color:var(--sale);}
.citem__kill svg{width:16px;height:16px;}
.qty--sm button{width:36px;height:40px;}
.qty--sm input{width:42px;height:40px;font-size:var(--fs-sm);}
.cback{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6);font-size:var(--fs-sm);font-weight:600;color:var(--navy-700);}
.cback svg{width:16px;height:16px;}
.cback:hover{gap:var(--sp-3);}
/* summary */
.sum{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.sum__head{padding:var(--sp-5);border-bottom:1px solid var(--line);font-weight:700;font-size:var(--fs-sm);}
.sum__body{padding:var(--sp-5);display:grid;gap:var(--sp-3);}
.sum__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2);}
.sum__row b{font-weight:600;color:var(--ink);}
.sum__row--save b{color:var(--green-700);}
.sum__rule{height:1px;background:var(--line);margin:var(--sp-2) 0;}
.sum__total{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);}
.sum__total span{font-size:var(--fs-sm);font-weight:700;}
.sum__total b{font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:700;letter-spacing:-0.025em;line-height:1;}
body.p-cart .sum__foot{padding:0 var(--sp-5) var(--sp-5);display:grid;gap:var(--sp-3);}
.sum__cod{display:flex;gap:var(--sp-3);align-items:flex-start;background:var(--green-100);border-radius:var(--r-md);padding:var(--sp-4);font-size:var(--fs-2xs);color:#2C6A50;}
.sum__cod svg{width:17px;height:17px;flex:none;color:var(--green-700);}
.sum__cod b{display:block;color:#0E5437;font-size:var(--fs-xs);}
.sum__mini{display:grid;gap:var(--sp-3);padding:var(--sp-5);border-bottom:1px solid var(--line);}
.sum__line{display:flex;gap:var(--sp-3);align-items:center;font-size:var(--fs-2xs);}
.sum__line i{width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;}
.sum__line i svg{width:28px;height:28px;color:#5B6699;--ill-2:#E8EFF8;}
.sum__line span{flex:1;color:var(--ink-2);line-height:1.4;}
.sum__line b{font-weight:600;white-space:nowrap;}
/* forms */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
.field{display:grid;gap:7px;}
.field--wide{grid-column:1 / -1;}

/* The address form has three short fields and then the address itself.
   Three things in two columns always leaves one of them sitting alone
   with an empty half beside it, which is the hole that made this form
   look unfinished. Fitting as many as the width allows puts all three
   on one line on a laptop, two on a tablet and one on a phone, and
   leaves no gap at any of them. Only this form: .fields is shared with
   checkout and the contact page, which are built in pairs on purpose. */
#addrForm .fields{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}

/* Each box keeps its own height instead of stretching to match the
   tallest cell in the row. One field carries a line of explanation
   under it and the others do not, and without this those others grew
   to the same height, so the three boxes no longer lined up. */
#addrForm .field{align-content:start;}
#addrForm .field input,
#addrForm .field .field__phone{height:50px;min-height:50px;}
.field label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);}
.field label em{font-style:normal;color:var(--sale);}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
  background-color:#fff;font-size:var(--fs-sm);color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{min-height:92px;padding:14px var(--sp-4);resize:vertical;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(32,126,193,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#A6ABC2;}
.field__hint{font-size:var(--fs-3xs);color:var(--muted);}
.field__phone{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden;transition:border-color .18s ease, box-shadow .18s ease;}
.field__phone:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(32,126,193,.14);}
.field__phone b{padding:0 var(--sp-4);font-size:var(--fs-sm);color:var(--muted);border-right:1px solid var(--line);line-height:48px;}
/* The box around this one draws its own border, so the input inside has
   to be two pixels shorter or the whole field stands taller than the
   plain ones beside it. It did, by exactly that much. */
.field__phone input{border:0;border-radius:0;min-height:48px;}
.field__phone input:focus{box-shadow:none;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);}
.card+.card{margin-top:var(--sp-5);}
.card__head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5);}
.card__head i{width:34px;height:34px;flex:none;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;}
.card__head svg{width:17px;height:17px;}
.card__head h2{font-size:var(--fs-h3);}
.card__head span{margin-left:auto;font-size:var(--fs-3xs);color:var(--muted);}
/* the only payment method, so it reads as a statement, not a choice to make */
.paymethod{display:flex;gap:var(--sp-4);align-items:flex-start;border:2px solid var(--green-600);background:var(--green-100);border-radius:var(--r-md);padding:var(--sp-5);}
.paymethod i{width:42px;height:42px;flex:none;border-radius:12px;background:#fff;color:var(--green-700);display:grid;place-items:center;}
.paymethod svg{width:21px;height:21px;}
.paymethod b{display:block;font-size:var(--fs-sm);color:#0E5437;}
.paymethod p{font-size:var(--fs-2xs);color:#2C6A50;margin-top:3px;}
.paymethod__tick{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--green-600);color:#fff;display:grid;place-items:center;flex:none;}
.paymethod__tick svg{width:14px;height:14px;}
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-12);text-align:left;}
.next__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);}
.next__item i{width:40px;height:40px;border-radius:12px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;margin-bottom:var(--sp-4);}
.next__item svg{width:19px;height:19px;}
.next__item b{display:block;font-size:var(--fs-sm);}
.next__item p{margin-top:6px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
.next__num{float:right;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-2xs);font-weight:700;color:var(--line);}
/* empty state */
.empty{text-align:center;padding:var(--sp-20) var(--sp-6);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);}
.empty svg{width:76px;height:76px;color:var(--line);margin-bottom:var(--sp-5);}
/* The drawing above an empty state is 76px, and that rule was catching
   the little arrow inside the button underneath it as well, which made
   a 50px button 96px tall. An icon inside a button is an icon, whatever
   it sits inside. */
.empty .btn svg,.estate .btn svg{width:18px;height:18px;margin-bottom:0;flex:none;color:inherit;}
.empty h2{font-size:var(--fs-h3);}
.empty p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);}
@media (max-width:1080px){
  .flow{grid-template-columns:1fr;}
  .sum{position:static;}
  .next{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .flowhead h1{font-size:22px;}
  .fields{grid-template-columns:1fr;gap:var(--sp-4);}
  .citem{grid-template-columns:76px 1fr;gap:var(--sp-4);padding:var(--sp-4);}
  .citem__price{grid-column:2;text-align:left;min-width:0;}
  .citem__ctrl{grid-column:2;justify-content:space-between;width:100%;}
  .steps{gap:var(--sp-2);}
  .steps__line{width:16px;}
  .step span{display:none;}
  .step.is-on span{display:inline;}
}
/* ---------- THE HELP STACK YIELDS TO THE REAL BUTTON ----------
   On a phone the floating help buttons sit exactly where the main
   action button ends up. While that button is on screen, the stack
   steps out of the way so nothing covers the amount being confirmed. */
@media (max-width:760px){
  body.cta-near .fab{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);}
  .fab{transition:opacity .22s ease, transform .22s ease, visibility .22s;}
}
body.p-checkout .sum__foot{padding:var(--sp-2) var(--sp-5) var(--sp-5);display:grid;gap:var(--sp-4);}
.field select{padding-right:44px;}
/* ---------- 22. CHECKOUT, SIMPLIFIED ---------- */
/* one divider inside the card, so the form reads as two short parts */
.card__split{height:1px;background:var(--line);margin:var(--sp-7) 0 var(--sp-6);}
.card__sub{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-bottom:var(--sp-2);}
.card__subnote{font-size:var(--fs-2xs);color:var(--muted);margin-bottom:var(--sp-4);}
/* delivery area, priced in the open so nothing is a surprise */
.zones{display:grid;gap:var(--sp-3);}
.zone{position:relative;display:flex;align-items:center;gap:var(--sp-4);min-width:0;
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);
  cursor:pointer;transition:border-color .18s ease, background .18s ease;}
.zone:hover{border-color:#C3D0E8;}
.zone input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.zone__dot{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid #C3D0E8;
  display:grid;place-items:center;transition:border-color .18s ease, box-shadow .18s ease;}
.zone__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--navy-700);
  transform:scale(0);transition:transform .18s ease;}
.zone input:checked ~ .zone__dot{border-color:var(--navy-700);}
.zone input:checked ~ .zone__dot::after{transform:scale(1);}
.zone input:focus-visible ~ .zone__dot{box-shadow:0 0 0 3px rgba(32,126,193,.25);}
.zone.is-on{border-color:var(--navy-700);background:var(--canvas-2);}
.zone__txt{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:600;color:var(--ink);}
.zone__txt span{display:block;margin-top:2px;font-size:var(--fs-3xs);font-weight:400;color:var(--muted);}
.zone__fee{flex:none;font-size:var(--fs-sm);font-weight:700;color:var(--ink);}
/* cash on delivery, stated once and plainly */
.codstrip{display:flex;align-items:flex-start;gap:var(--sp-4);margin-top:var(--sp-6);
  background:var(--green-100);border:1px solid #BFE6D4;border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);}
.codstrip svg{width:19px;height:19px;flex:none;color:var(--green-700);margin-top:1px;}
.codstrip b{display:block;font-size:var(--fs-xs);color:#0E5437;}
.codstrip p{margin-top:2px;font-size:var(--fs-2xs);color:#2C6A50;line-height:1.55;}
/* agreement line, kept to one row */
.agree{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer;
  font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.55;}
.agree input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.agree__box{width:20px;height:20px;flex:none;margin-top:1px;border:1.5px solid #C3D0E8;border-radius:6px;
  background:#fff;display:grid;place-items:center;transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;}
.agree__box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);
  transition:opacity .15s ease, transform .15s ease;}
.agree input:checked ~ .agree__box{background:var(--navy-700);border-color:var(--navy-700);}
.agree input:checked ~ .agree__box svg{opacity:1;transform:none;}
.agree input:focus-visible ~ .agree__box{box-shadow:0 0 0 3px rgba(32,126,193,.25);}
.agree.is-bad .agree__box{border-color:#D64545;}
.agree a{color:var(--blue-600);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* ---------- THE ONE EXTRA PRODUCT ----------
   Offered on the checkout page just above the button, in a dashed frame so
   it reads as an offer rather than as something already in the order. It
   borrows the tick box from the terms line below it, so there is one kind
   of checkbox on the page rather than two. */
.addon{position:relative;display:flex;align-items:center;gap:var(--sp-3);cursor:pointer;
  border:1.5px dashed #C9A227;border-radius:var(--r-md);padding:var(--sp-3);
  background:#FFFCF2;margin-bottom:var(--sp-4);}
.addon:hover{border-color:#A9861B;}
.addon input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.addon__box{width:20px;height:20px;flex:none;border:1.5px solid #C3D0E8;border-radius:6px;
  background:#fff;display:grid;place-items:center;
  transition:background .18s ease, border-color .18s ease;}
.addon__box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);
  transition:opacity .15s ease, transform .15s ease;}
.addon input:checked ~ .addon__box{background:var(--green-700);border-color:var(--green-700);}
.addon input:checked ~ .addon__box svg{opacity:1;transform:none;}
.addon input:focus-visible ~ .addon__box{box-shadow:0 0 0 3px rgba(32,126,193,.25);}
.addon__pic{width:46px;height:46px;flex:none;border-radius:8px;background:#fff;
  border:1px solid var(--line-soft);display:grid;place-items:center;overflow:hidden;padding:3px;}
.addon__pic img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;}
.addon__pic svg{width:80%;height:80%;color:#5B6699;--ill-2:#E8EFF8;}
.addon__text{min-width:0;}
.addon__text > b{display:block;font-size:var(--fs-2xs);font-weight:600;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.addon__price{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:var(--fs-2xs);}
.addon__price del{color:var(--muted);}
.addon__price b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;}
.addon__price i{font-style:normal;font-size:var(--fs-3xs);font-weight:700;color:var(--green-700);
  background:var(--green-100);border-radius:var(--r-pill);padding:2px 8px;}
.addon__hint{display:block;margin-top:3px;font-size:var(--fs-3xs);color:var(--muted);line-height:1.5;}

/* order summary lines that can be corrected without going back */
.sum__line{align-items:flex-start;}
.sum__line > div{flex:1;min-width:0;}
.sum__name{font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.45;}
.sum__step{display:inline-flex;align-items:center;margin-top:7px;border:1px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden;background:#fff;}
.sum__step button{width:28px;height:28px;display:grid;place-items:center;background:#fff;color:var(--ink-2);
  transition:background .15s ease;}
.sum__step button:hover{background:var(--canvas-2);}
.sum__step button:disabled{color:#C3D0E8;cursor:not-allowed;background:#fff;}
.sum__step button svg{width:12px;height:12px;}
.sum__step b{min-width:26px;text-align:center;font-size:var(--fs-3xs);font-weight:700;color:var(--ink);}
/* the button carries the number, so there is nothing left to work out */
.btn--pay{justify-content:space-between;gap:var(--sp-4);padding-left:var(--sp-6);padding-right:var(--sp-6);}
.btn--pay span{display:flex;align-items:center;gap:var(--sp-3);}
.btn--pay span svg{width:17px;height:17px;}
.btn--pay b{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;}
.sum__call{font-size:var(--fs-3xs);color:var(--muted);text-align:center;line-height:1.55;}
@media (max-width:980px){
  .zone{padding:var(--sp-4);}
}
@media (max-width:420px){
  .zone{gap:var(--sp-3);padding:var(--sp-4) var(--sp-3);}
  .zone__txt{font-size:var(--fs-xs);}
  .zone__fee{font-size:var(--fs-xs);}
  .btn--pay{padding-left:var(--sp-4);padding-right:var(--sp-4);}
}
@media (max-width:1080px){
  .flow{grid-template-columns:1fr;}
  .sum{position:static;}
  .next{grid-template-columns:1fr;}
  .recap{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .flowhead h1{font-size:22px;}
  .fields{grid-template-columns:1fr;gap:var(--sp-4);}
  .citem{grid-template-columns:76px 1fr;gap:var(--sp-4);padding:var(--sp-4);}
  .citem__price{grid-column:2;text-align:left;min-width:0;}
  .citem__ctrl{grid-column:2;justify-content:space-between;width:100%;}
  .done h1{font-size:25px;}
  .done__mark{width:70px;height:70px;}
  .done__mark svg{width:34px;height:34px;}
  .steps{gap:var(--sp-2);}
  .steps__line{width:16px;}
  .step span{display:none;}
  .step.is-on span{display:inline;}
}
/* ---------- 25. ORDER PLACED ----------
   This page is a receipt, not a lecture. What the customer ordered,
   where it goes and what they owe come first; the explaining comes last
   and small. */
.done{max-width:960px;margin:0 auto;text-align:left;}
/* the confirmation itself: one line, not a landing page */
.dhead{display:flex;align-items:center;gap:var(--sp-5);padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);}
.dhead__mark{position:relative;width:56px;height:56px;flex:none;border-radius:50%;
  background:var(--green-100);display:grid;place-items:center;
  animation:markPop .45s cubic-bezier(.2,.9,.3,1.25) both;}
.dhead__mark svg{width:28px;height:28px;color:var(--green-700);
  stroke-dasharray:30;stroke-dashoffset:30;animation:markDraw .35s ease-out .28s forwards;}
.dhead__mark::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--green-600);animation:ringOut .9s ease-out .18s both;}
@keyframes markPop{from{transform:scale(.55);opacity:0}60%{transform:scale(1.07)}to{transform:scale(1);opacity:1}}
@keyframes markDraw{to{stroke-dashoffset:0}}
@keyframes ringOut{from{transform:scale(.85);opacity:.45}to{transform:scale(1.4);opacity:0}}
.dhead h1{font-size:28px;letter-spacing:-0.025em;}
.dhead p{margin-top:4px;font-size:var(--fs-sm);color:var(--muted);}
/* the four facts a customer checks before closing the tab */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;}
.fact{background:#fff;padding:var(--sp-5);min-width:0;}
.fact span{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.fact b{display:block;margin-top:7px;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:var(--fs-sm);font-weight:700;color:var(--ink);letter-spacing:.01em;
  overflow-wrap:anywhere;}
.fact--no{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);}
.fact__copy{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);background:var(--canvas-2);transition:background .16s ease,color .16s ease;}
.fact__copy:hover{background:var(--navy-100);color:var(--navy-700);}
.fact__copy svg{width:15px;height:15px;}
.fact__copy.is-done{background:var(--green-100);color:var(--green-700);}
.facts__wrap{margin-top:var(--sp-7);}
.facts__wrap .facts{border-top:1px solid var(--line);border-radius:var(--r-lg);}
/* what was ordered: the part that was missing before */
.obox{margin-top:var(--sp-7);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.obox__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--line);}
.obox__head h2{font-size:var(--fs-base);}
.obox__head span{margin-left:auto;font-size:var(--fs-2xs);color:var(--muted);}
.obox__head > svg{width:18px;height:18px;color:var(--blue-600);flex:none;}
.oitem{display:grid;grid-template-columns:62px 1fr auto;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line-soft);}
.oitem:last-of-type{border-bottom:0;}
.oitem__pic{width:62px;height:62px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;display:grid;place-items:center;overflow:hidden;}
.oitem__pic svg{width:44px;height:44px;color:#5B6699;--ill-2:#E8EFF8;}
.oitem__txt{min-width:0;}
.oitem__txt b{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.45;overflow-wrap:anywhere;}
.oitem__txt span{display:block;margin-top:4px;font-size:var(--fs-2xs);color:var(--muted);}
.oitem__sum{text-align:right;white-space:nowrap;}
.oitem__sum b{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-sm);font-weight:700;}
.oitem__sum del{display:block;margin-top:3px;font-size:var(--fs-3xs);color:var(--muted);}
.obox__foot{background:var(--canvas-2);padding:var(--sp-5) var(--sp-6);display:grid;gap:var(--sp-3);}
.obox__foot .sum__row span{color:var(--ink-2);}
.obox__foot .sum__total b{font-size:24px;}
/* who it goes to and how it gets paid, side by side and top aligned */
.recap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-5);align-items:start;}
/* the stacking margin is written for a column; these sit in a row */
.recap .card{margin-top:0;height:100%;}
.rhead{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-5);border-bottom:1px solid var(--line);}
.rhead i{width:34px;height:34px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);
  display:grid;place-items:center;flex:none;}
.rhead i svg{width:17px;height:17px;}
.rhead h2{font-size:var(--fs-base);}
.dl{display:grid;gap:var(--sp-4);}
.dl__row{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-4);font-size:var(--fs-sm);align-items:start;}
.dl__row > span{font-size:var(--fs-2xs);color:var(--muted);padding-top:2px;}
.dl__row > b{font-weight:600;color:var(--ink);line-height:1.6;overflow-wrap:anywhere;}
.dl__row a{color:var(--navy-700);font-weight:600;}
.tagline{display:inline-flex;align-items:center;gap:7px;background:var(--green-100);color:#0E5437;
  border-radius:var(--r-pill);padding:5px 12px;font-size:var(--fs-2xs);font-weight:700;}
.tagline svg{width:14px;height:14px;}
.keepcash{margin-top:var(--sp-5);display:flex;align-items:flex-start;gap:var(--sp-3);
  background:var(--green-100);border-radius:var(--r-md);padding:var(--sp-4);
  font-size:var(--fs-2xs);color:#2C6A50;line-height:1.55;}
.keepcash svg{width:17px;height:17px;flex:none;color:var(--green-700);margin-top:1px;}
.keepcash b{color:#0E5437;}
/* what happens next, compressed into one quiet strip at the bottom */
.whatnext{margin-top:var(--sp-7);border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;padding:var(--sp-5) var(--sp-6);}
.whatnext > span{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-4);}
.wsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.wstep{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-width:0;font-size:var(--fs-2xs);color:var(--ink-2);}
.wstep i{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;color:var(--muted);display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:700;font-style:normal;}
.wstep.is-now i{background:var(--navy-700);border-color:var(--navy-700);color:#fff;}
.wstep.is-now{color:var(--ink);font-weight:600;}
.done__cta{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-8);}
@media (max-width:980px){
  .facts{grid-template-columns:1fr 1fr;}
  .recap{grid-template-columns:1fr;}
  .wsteps{grid-template-columns:1fr;gap:var(--sp-4);}
}
@media (max-width:760px){
  .dhead{gap:var(--sp-4);padding-bottom:var(--sp-5);}
  .dhead h1{font-size:22px;}
  .dhead__mark{width:46px;height:46px;}
  .dhead__mark svg{width:23px;height:23px;}
  .oitem{grid-template-columns:52px 1fr;row-gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);}
  .oitem__pic{width:52px;height:52px;}
  .oitem__pic svg{width:36px;height:36px;}
  .oitem__sum{grid-column:2;text-align:left;}
  .oitem__sum del{display:inline;margin-left:8px;}
  .obox__head,.obox__foot{padding-left:var(--sp-5);padding-right:var(--sp-5);}
  .dl__row{grid-template-columns:1fr;gap:3px;}
  .done__cta .btn{flex:1 1 100%;justify-content:center;}
}
@media (max-width:420px){
  .facts{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .dhead__mark,.dhead__mark svg,.dhead__mark::before{animation:none;}
  .dhead__mark svg{stroke-dashoffset:0;}
  .dhead__mark::before{opacity:0;}
}
/* ---------- 26. ORDER TRACKING ----------
   Two states live on this page: the lookup, and the result. Only one is
   ever on screen, so the page never looks like a form with an answer
   stapled underneath it. */
.trk{max-width:760px;margin:0 auto;text-align:center;}
.trk__art{width:84px;height:84px;margin:0 auto var(--sp-6);border-radius:50%;
  background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;}
.trk__art svg{width:40px;height:40px;}
.trk h1{font-size:34px;letter-spacing:-0.03em;}
.trk__lead{margin-top:var(--sp-4);font-size:var(--fs-base);color:var(--muted);
  max-width:460px;margin-left:auto;margin-right:auto;line-height:1.65;}
/* one field, because one field is all we need to find the order */
.trkform{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);}
.trkfield{flex:1;min-width:0;display:flex;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;}
.trkfield:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(32,126,193,.14);}
.trkfield.is-bad{border-color:#D64545;}
.trkfield > b{padding:0 var(--sp-4);font-size:var(--fs-sm);color:var(--muted);
  border-right:1px solid var(--line);line-height:54px;flex:none;}
.trkfield input{flex:1;min-width:0;height:56px;border:0;background:none;padding:0 var(--sp-4);
  font-size:var(--fs-base);color:var(--ink);}
.trkfield input:focus{outline:none;}
.trkfield input::placeholder{color:#A6ABC2;}
.trkform .btn{height:56px;padding-left:var(--sp-8);padding-right:var(--sp-8);flex:none;}
.trkerr{margin-top:var(--sp-3);font-size:var(--fs-2xs);color:#C0392B;text-align:left;display:none;}
.trkerr.is-on{display:block;}
.trkhint{margin-top:var(--sp-5);font-size:var(--fs-2xs);color:var(--muted);}
.trkhint b{color:var(--ink-2);}
/* result ------------------------------------------------------------ */
.result{display:none;}
.result.is-on{display:block;}
.lookup.is-off{display:none;}
.rbar{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6);}
.rbar h2{font-size:var(--fs-h3);}
.rbar p{font-size:var(--fs-2xs);color:var(--muted);margin-top:3px;}
.rbar .btn{margin-left:auto;}
.ocard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:var(--sp-5);}
.ocard__top{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line);}
.ocard__no{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;letter-spacing:.01em;}
.ocard__when{font-size:var(--fs-2xs);color:var(--muted);}
.tstat{display:inline-flex;align-items:center;gap:7px;margin-left:auto;border-radius:var(--r-pill);
  padding:6px 14px;font-size:var(--fs-2xs);font-weight:700;white-space:nowrap;}
.tstat svg{width:14px;height:14px;}
.tstat--go{background:var(--navy-100);color:var(--navy-700);}
.tstat--done{background:var(--green-100);color:var(--green-700);}
.tstat--wait{background:#FFF3E2;color:#9A5B12;}
/* the journey, one rail with the finished part filled in */
.rail5{position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  padding:var(--sp-7) var(--sp-6) var(--sp-6);}
/* the grey track is one element and the green fill lives inside it, so the
   fill is a percentage of the track and not of the whole card */
.rail5__line{position:absolute;top:var(--sp-7);margin-top:15px;height:3px;border-radius:2px;
  left:calc(var(--sp-6) + 10%);right:calc(var(--sp-6) + 10%);background:var(--line);overflow:hidden;}
.rail5__fill{display:block;height:100%;width:var(--fill,0%);background:var(--green-600);
  border-radius:2px;transition:width .5s ease;}
.rstep{position:relative;z-index:1;text-align:center;min-width:0;padding:0 4px;}
.rstep i{position:relative;width:32px;height:32px;margin:0 auto;border-radius:50%;background:#fff;
  border:3px solid var(--line);display:grid;place-items:center;color:transparent;}
.rstep i svg{width:15px;height:15px;}
.rstep.is-done i{background:var(--green-600);border-color:var(--green-600);color:#fff;}
.rstep.is-now i{background:#fff;border-color:var(--navy-700);color:var(--navy-700);}
.rstep.is-now i::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--navy-700);position:absolute;}
.rstep.is-now i svg{display:none;}
.rstep b{display:block;margin-top:var(--sp-3);font-size:var(--fs-3xs);font-weight:600;color:var(--muted);line-height:1.4;}
.rstep.is-done b,.rstep.is-now b{color:var(--ink);}
.rstep span{display:block;margin-top:3px;font-size:10px;color:var(--muted);}
.ocard__body{border-top:1px solid var(--line);padding:var(--sp-5) var(--sp-6);
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;}
.thumbs{display:flex;}
.thumbs span{width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;display:grid;place-items:center;margin-right:-10px;box-shadow:0 1px 3px rgba(20,22,43,.06);}
.thumbs span:last-child{margin-right:0;}
.thumbs svg{width:32px;height:32px;color:#5B6699;--ill-2:#E8EFF8;}
.thumbs .more{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);background:var(--canvas-2);}
.ocard__meta{min-width:0;font-size:var(--fs-2xs);color:var(--muted);}
.ocard__meta b{display:block;font-size:var(--fs-sm);color:var(--ink);}
.ocard__pay{margin-left:auto;text-align:right;}
.ocard__pay span{display:block;font-size:var(--fs-3xs);color:var(--muted);}
.ocard__pay b{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-lg);font-weight:700;}
.ocard__foot{background:var(--canvas-2);padding:var(--sp-4) var(--sp-6);
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--ink-2);}
.ocard__foot svg{width:15px;height:15px;color:var(--blue-600);flex:none;}
.ocard__foot a{margin-left:auto;color:var(--navy-700);font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.ocard__foot a svg{color:currentColor;width:14px;height:14px;}
/* nothing found ------------------------------------------------------ */
.nofind{display:none;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-12) var(--sp-6);}
.nofind.is-on{display:block;}
.nofind i{width:64px;height:64px;margin:0 auto var(--sp-5);border-radius:50%;
  background:var(--canvas-2);color:var(--muted);display:grid;place-items:center;}
.nofind i svg{width:30px;height:30px;}
.nofind h3{font-size:var(--fs-h3);}
.nofind p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);
  max-width:400px;margin-left:auto;margin-right:auto;line-height:1.65;}
.nofind .btn{margin-top:var(--sp-6);}
/* a quiet line for people whose question the tracker cannot answer */
.trkhelp{margin-top:var(--sp-8);display:flex;align-items:center;justify-content:center;
  gap:var(--sp-4);flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);font-size:var(--fs-sm);color:var(--ink-2);}
.trkhelp svg{width:18px;height:18px;color:var(--blue-600);flex:none;}
@media (max-width:760px){
  .trk h1{font-size:25px;}
  .trk__lead{font-size:var(--fs-sm);}
  .trk__art{width:68px;height:68px;}
  .trk__art svg{width:33px;height:33px;}
  .trkform{flex-direction:column;}
  .trkform .btn{width:100%;justify-content:center;}
  /* the rail turns to run down the page so the labels keep their words */
  .rail5{grid-template-columns:1fr;gap:var(--sp-5);padding:var(--sp-6) var(--sp-5);}
  .rail5__line{left:calc(var(--sp-5) + 14px);right:auto;top:var(--sp-6);margin-top:16px;
    width:3px;height:calc(100% - var(--sp-6) * 2 - 32px);}
  .rail5__fill{width:100%;height:var(--fill,0%);transition:height .5s ease;}
  .rstep{display:flex;align-items:center;gap:var(--sp-4);text-align:left;padding:0;}
  .rstep i{margin:0;flex:none;}
  .rstep b{margin-top:0;font-size:var(--fs-xs);}
  .rstep span{margin-top:1px;}
  .ocard__top,.ocard__body,.ocard__foot{padding-left:var(--sp-5);padding-right:var(--sp-5);}
  .ocard__pay{margin-left:0;text-align:left;}
  .tstat{margin-left:0;}
  .ocard__foot a{margin-left:0;width:100%;}
  .rbar .btn{margin-left:0;width:100%;justify-content:center;}
}
/* a demo page should not make the reviewer guess what to type */
.trydemo{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;
  border:1px solid #C3D0E8;border-radius:var(--r-pill);background:var(--navy-100);
  font-size:var(--fs-2xs);font-weight:700;color:var(--navy-700);cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;}
.trydemo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-600);flex:none;}
.trydemo:hover{background:var(--navy-700);border-color:var(--navy-700);color:#fff;transform:translateY(-1px);}
.trydemo:hover::before{background:#fff;}
.trkhint{margin-top:var(--sp-5);display:flex;align-items:center;justify-content:center;
  gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-2xs);color:var(--muted);}
/* ---------- 27. ABOUT ---------- */
.ahero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center;}
.ahero__tag{display:inline-flex;align-items:center;gap:8px;background:var(--navy-100);
  color:var(--navy-700);border-radius:var(--r-pill);padding:7px 15px;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.ahero__tag svg{width:14px;height:14px;flex:none;color:var(--green-700);}
.ahero h1{margin-top:var(--sp-5);font-size:40px;letter-spacing:-0.032em;line-height:1.14;}
.ahero p{margin-top:var(--sp-5);font-size:var(--fs-lg);color:var(--muted);line-height:1.7;}
.ahero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-7);}
.ahero__art{background:linear-gradient(140deg,var(--navy-700),#15123A);border-radius:var(--r-2xl);
  padding:var(--sp-10);color:#fff;position:relative;overflow:hidden;}
.ahero__art::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:40px 40px;}
.ahero__art > *{position:relative;z-index:1;}
.ahero__art h2{font-size:var(--fs-h3);color:#fff;}
.ahero__art p{margin-top:var(--sp-4);font-size:var(--fs-sm);color:rgba(255,255,255,.72);line-height:1.7;}
.ahero__list{margin-top:var(--sp-7);display:grid;gap:var(--sp-4);}
.ahero__list div{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-sm);color:rgba(255,255,255,.88);}
.ahero__list svg{width:18px;height:18px;flex:none;color:#7FC2EC;margin-top:2px;}
/* one hairline grid, so no number sits in a box of its own */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.num{background:#fff;padding:var(--sp-7) var(--sp-6);text-align:center;}
.num b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:34px;font-weight:700;
  letter-spacing:-0.03em;color:var(--navy-700);line-height:1;}
.num span{display:block;margin-top:var(--sp-3);font-size:var(--fs-2xs);color:var(--muted);line-height:1.5;}
.whatwe{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
.wcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);}
.wcard i{width:44px;height:44px;border-radius:13px;background:var(--blue-50);color:var(--blue-600);
  display:grid;place-items:center;margin-bottom:var(--sp-5);}
.wcard i svg{width:21px;height:21px;}
.wcard b{display:block;font-size:var(--fs-base);}
.wcard p{margin-top:var(--sp-3);font-size:var(--fs-2xs);color:var(--muted);line-height:1.65;}
/* how we keep what we sell genuine */
.genuine{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
.gitem{display:flex;gap:var(--sp-5);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);}
.gitem i{width:40px;height:40px;flex:none;border-radius:50%;background:var(--green-100);
  color:var(--green-700);display:grid;place-items:center;}
.gitem i svg{width:19px;height:19px;}
.gitem b{display:block;font-size:var(--fs-sm);}
.gitem p{margin-top:5px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.65;}
/* the story, told as dated entries rather than a wall of text */
.story{display:grid;grid-template-columns:200px 1fr;gap:var(--sp-10);align-items:start;}
.story__rail{position:sticky;top:96px;}
.story__rail span{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.story__rail h2{margin-top:var(--sp-3);font-size:var(--fs-h3);}
.entries{display:grid;gap:var(--sp-6);}
.entry{position:relative;padding-left:var(--sp-10);}
.entry::before{content:"";position:absolute;left:11px;top:26px;bottom:calc(-1 * var(--sp-6));
  width:2px;background:var(--line);}
.entry:last-child::before{display:none;}
.entry i{position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid var(--navy-700);display:grid;place-items:center;}
.entry i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy-700);}
.entry b{display:block;font-size:var(--fs-base);}
.entry span{display:block;margin-top:2px;font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);}
.entry p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);line-height:1.7;}
.band{background:linear-gradient(135deg,var(--navy-700),#15123A);border-radius:var(--r-2xl);
  padding:var(--sp-12);color:#fff;text-align:center;position:relative;overflow:hidden;}
.band::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;}
.band > *{position:relative;z-index:1;}
.band h2{font-size:var(--fs-h2);color:#fff;}
.band p{margin-top:var(--sp-4);font-size:var(--fs-base);color:rgba(255,255,255,.72);
  max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7;}
.band__cta{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-8);}
.band .btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;}
.band .btn--ghost:hover{background:rgba(255,255,255,.16);}
@media (max-width:1080px){
  .ahero{grid-template-columns:1fr;gap:var(--sp-8);}
  .whatwe{grid-template-columns:repeat(2,1fr);}
  .nums{grid-template-columns:repeat(2,1fr);}
  .story{grid-template-columns:1fr;gap:var(--sp-6);}
  .story__rail{position:static;}
}
@media (max-width:760px){
  .ahero h1{font-size:28px;}
  .ahero p{font-size:var(--fs-sm);}
  .ahero__art{padding:var(--sp-7);}
  .ahero__cta .btn{flex:1 1 100%;justify-content:center;}
  .genuine{grid-template-columns:1fr;}
  .band{padding:var(--sp-8) var(--sp-6);}
  .band__cta .btn{flex:1 1 100%;justify-content:center;}
  .nums .num b{font-size:27px;}
}
@media (max-width:480px){
  .whatwe{grid-template-columns:1fr;}
  .nums{grid-template-columns:1fr;}
  .gitem{flex-direction:column;gap:var(--sp-4);}
}
/* ---------- 31. SIGN IN AND SIGN UP ----------
   Two columns, so the page is only as tall as the form instead of a stack
   you scroll through. Signing in is one task and it should finish on the
   screen it started on. */
.authpage{min-height:calc(100vh - 128px);display:grid;place-items:center;padding:var(--sp-5) 0;}
.authbox{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  width:100%;max-width:980px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-2xl);overflow:hidden;box-shadow:0 18px 44px rgba(20,22,43,.07);}
/* left: who you are dealing with */
.aside2{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(155deg,#2A2568 0%,#232a6d 48%,#1D6FB0 100%);
  color:#fff;padding:var(--sp-7);}
.aside2::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px;}
.aside2::after{content:"";position:absolute;right:-80px;bottom:-96px;width:240px;height:240px;
  border-radius:50%;background:rgba(255,255,255,.07);}
.aside2 > *{position:relative;z-index:1;}
.aside2__logo .brand{height:27px;}
.aside2__main{margin-top:auto;margin-bottom:auto;padding:var(--sp-8) 0;}
.aside2 h2{font-size:25px;letter-spacing:-0.025em;line-height:1.22;color:#fff;}
.aside2 > .aside2__main > p{margin-top:var(--sp-4);font-size:var(--fs-xs);
  color:rgba(255,255,255,.76);line-height:1.65;}
.aside2__list{margin-top:var(--sp-7);display:grid;gap:var(--sp-4);}
.aside2__list div{display:flex;align-items:center;gap:var(--sp-4);min-width:0;}
.aside2__list i{width:32px;height:32px;flex:none;border-radius:9px;
  background:rgba(255,255,255,.13);display:grid;place-items:center;}
.aside2__list i svg{width:16px;height:16px;color:#fff;}
.aside2__list span{font-size:var(--fs-3xs);color:rgba(255,255,255,.88);line-height:1.5;}
.aside2__foot{font-size:var(--fs-3xs);color:rgba(255,255,255,.6);line-height:1.6;}
.aside2__foot a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px;}
/* right: the form */
.aform{padding:var(--sp-7);min-width:0;display:flex;flex-direction:column;justify-content:center;}
.atabs{display:flex;gap:4px;background:var(--canvas-2);border-radius:var(--r-pill);padding:4px;}
.atabs a{flex:1;display:grid;place-items:center;min-height:38px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  transition:background .18s ease,color .18s ease;}
.atabs a:hover{color:var(--ink-2);}
.atabs a.is-on{background:#fff;color:var(--navy-700);box-shadow:0 1px 3px rgba(20,22,43,.12);}
/* Two equal columns were drawn for two buttons. Only the providers that
   are really set up get a button, so the row fits itself to however many
   there are: one on its own fills the width instead of sitting in half. */
.oauth{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-3);margin-top:var(--sp-5);}
.sbtn{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:44px;
  min-width:0;padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;font-size:var(--fs-xs);font-weight:600;color:var(--ink);white-space:nowrap;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;}
.sbtn:hover{border-color:#C3D0E8;background:var(--canvas-2);transform:translateY(-1px);}
.sbtn svg{width:17px;height:17px;flex:none;}
/* The Apple sign in button was taken off the sign in and sign up pages at
   the owner's decision, so the rules that dressed it are gone too. Dead
   rules are not harmless: the next person to read this file would think
   the button is still somewhere. */
.orline{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-5) 0;
  font-size:var(--fs-3xs);color:var(--muted);white-space:nowrap;}
.orline::before,.orline::after{content:"";height:1px;background:var(--line);flex:1;}
.aform .fields{grid-template-columns:1fr;gap:var(--sp-4);}
.aform .fields--two{grid-template-columns:1fr 1fr;}
/* fields sharing a row start on the same line whatever sits under them */
.aform .field{align-content:start;}
.aform .field input,.aform .field select{min-height:44px;}
.aform .field__phone b{line-height:42px;}
.pwrap{position:relative;}
.pwrap input{padding-right:46px;}
.peye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;color:var(--muted);
  transition:background .15s ease,color .15s ease;}
.peye:hover{background:var(--canvas-2);color:var(--ink-2);}
.peye svg{width:17px;height:17px;}
.arow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-top:var(--sp-4);}
.flink{font-size:var(--fs-2xs);font-weight:700;color:var(--navy-700);}
.chk{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer;
  font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.5;}
.chk input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.chk__box{width:19px;height:19px;flex:none;margin-top:1px;border:1.5px solid #C3D0E8;
  border-radius:6px;background:#fff;display:grid;place-items:center;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;}
.chk__box svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.5);
  transition:opacity .15s ease,transform .15s ease;}
.chk input:checked ~ .chk__box{background:var(--navy-700);border-color:var(--navy-700);}
.chk input:checked ~ .chk__box svg{opacity:1;transform:none;}
.chk input:focus-visible ~ .chk__box{box-shadow:0 0 0 3px rgba(32,126,193,.25);}
.chk.is-bad .chk__box{border-color:#D64545;}
.chk a{color:var(--blue-600);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.aerr{display:none;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-4);
  background:#FBEBE9;border:1px solid #F3CFCB;border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-2xs);color:#A4342A;line-height:1.5;}
.aerr.is-on{display:flex;}
.aerr svg{width:15px;height:15px;flex:none;margin-top:1px;}
.asub{margin-top:var(--sp-5);}
.aswap{margin-top:var(--sp-5);text-align:center;font-size:var(--fs-2xs);color:var(--muted);}
.aswap a{color:var(--navy-700);font-weight:700;}
/* the rules read as you type, so nothing is a surprise at the end */
.rules{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);}
.rule{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);}
.rule i{width:14px;height:14px;flex:none;border-radius:50%;background:var(--canvas-2);
  color:transparent;display:grid;place-items:center;
  transition:background .18s ease,color .18s ease;}
.rule i svg{width:8px;height:8px;}
.rule.is-ok{color:var(--green-700);}
.rule.is-ok i{background:var(--green-600);color:#fff;}
.apane{display:none;}
.apane.is-on{display:block;}
.backlink{display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--sp-4);
  font-size:var(--fs-2xs);font-weight:700;color:var(--navy-700);}
.backlink svg{width:14px;height:14px;transform:rotate(180deg);}
.done2{display:none;text-align:center;padding:var(--sp-4) 0;}
.done2.is-on{display:block;}
.done2 i{width:58px;height:58px;margin:0 auto var(--sp-5);border-radius:50%;
  background:var(--green-100);color:var(--green-700);display:grid;place-items:center;}
.done2 i svg{width:28px;height:28px;}
.done2 h2{font-size:var(--fs-h3);}
.done2 p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);line-height:1.65;}
.done2 .btn{margin-top:var(--sp-5);}
.aform.is-done .aform__body{display:none;}
@media (max-width:900px){
  /* the brand half becomes a band across the top and the form keeps the width */
  .authpage{min-height:0;padding:0;}
  .authbox{grid-template-columns:1fr;max-width:560px;}
  .aside2{padding:var(--sp-6) var(--sp-7);}
  .aside2__main{margin:0;padding:var(--sp-5) 0 0;}
  .aside2 h2{font-size:21px;}
  .aside2__list,.aside2__foot{display:none;}
  .aform{padding:var(--sp-7);}
}
@media (max-width:560px){
  .authbox{border-radius:var(--r-xl);}
  .aside2{padding:var(--sp-5) var(--sp-6);}
  .aform{padding:var(--sp-6) var(--sp-5);}
  .oauth{grid-template-columns:1fr;}
  .aform .fields--two{grid-template-columns:1fr;}
}
/* ---------- 28. CONTACT ---------- */
.chead{max-width:620px;}
.chead h1{font-size:36px;letter-spacing:-0.03em;}
.chead p{margin-top:var(--sp-4);font-size:var(--fs-lg);color:var(--muted);line-height:1.7;}
/* the fast ways first, the form after: most questions are answered by a call */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-8);}
.way{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;}
a.way:hover{border-color:#C3D0E8;transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,22,43,.07);}
.way i{width:44px;height:44px;border-radius:13px;background:var(--blue-50);color:var(--blue-600);
  display:grid;place-items:center;margin-bottom:var(--sp-5);}
.way i svg{width:21px;height:21px;}
.way span{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.way b{display:block;margin-top:7px;font-size:var(--fs-base);overflow-wrap:anywhere;}
.way p{margin-top:var(--sp-3);font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
.way--wa i{background:var(--green-100);color:var(--green-700);}
/* a note that saves people writing in about something they can look up */
.cnote{display:flex;align-items:flex-start;gap:var(--sp-4);margin-top:var(--sp-5);
  background:var(--navy-100);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);}
.cnote svg{width:19px;height:19px;flex:none;color:var(--navy-700);margin-top:2px;}
.cnote b{color:var(--navy-700);}
.cnote p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.65;}
.cnote a{color:var(--navy-700);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
/* The two columns finish level. The side column used to stop wherever its
   own content ran out, which left the form hanging below it. Now the side
   column is as tall as the form and the map takes up whatever height is
   left over, so the page reads as one block instead of two ragged ones. */
.cwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-8);align-items:stretch;}
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-7);}
.cform h2{font-size:var(--fs-h3);}
.cform > p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);}
.cform .fields{margin-top:var(--sp-6);}
/* the side column: where we are and when we answer. The first card is the
   one that stretches, because it holds the map; the opening hours card is
   a fixed list and has nothing to gain from extra height. */
.cside{display:grid;grid-template-rows:1fr auto;gap:var(--sp-5);align-content:stretch;}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.cside > .cbox:first-child{display:flex;flex-direction:column;min-height:0;}
.cbox__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--line);}
.cbox__head svg{width:18px;height:18px;color:var(--blue-600);flex:none;}
.cbox__head h3{font-size:var(--fs-base);}
.cbox__body{padding:var(--sp-6);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.75;}
.hours{display:grid;gap:var(--sp-3);}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-sm);}
.hrow span{color:var(--muted);}
.hrow b{font-weight:600;}
.hrow--off b{color:var(--muted);font-weight:500;}
.maplink{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);
  padding-top:var(--sp-5);border-top:1px dashed var(--line);
  font-size:var(--fs-xs);font-weight:700;color:var(--navy-700);}
.maplink svg{width:16px;height:16px;}
/* The real map. It grows into whatever height the card has spare so the two
   columns end level, and 200px is the floor below which a map stops being
   readable. The border is removed because an iframe draws one by default. */
.mapart{display:block;width:100%;border:0;background:var(--canvas-2);
  flex:1 1 auto;min-height:200px;}
@media (max-width:1080px){
  .cwrap{grid-template-columns:1fr;}
  .ways{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .chead h1{font-size:27px;}
  .chead p{font-size:var(--fs-sm);}
  .cform{padding:var(--sp-5);}
  .cform .btn{width:100%;justify-content:center;}
}
/* ---------- 32. ACCOUNT ----------
   One page, five panels. The anav is a column on a desktop and a scrolling
   strip on a phone, because five items will not fit across 360px. */
.acct{display:grid;grid-template-columns:252px 1fr;gap:var(--sp-8);align-items:start;}
/* a grid item is as wide as its contents unless told otherwise, and the nav
   strip below is full of nowrap buttons, so without this it pushes the page wide */
.acct > *{min-width:0;}
/* sticky can only hold while its container is still on screen, so the panel
   side is given a floor. Without it a short panel makes the grid shorter
   than the menu, and the menu has nowhere to stick. */
.acct__main{min-width:0;min-height:calc(100vh - 150px);}
.who{position:relative;display:flex;align-items:center;gap:var(--sp-4);overflow:hidden;
  background:linear-gradient(140deg,#2A2568,#1D6FB0);border-radius:var(--r-lg);
  padding:var(--sp-5);margin-bottom:var(--sp-4);color:#fff;}
.who::after{content:"";position:absolute;right:-40px;bottom:-54px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.08);}
.who > *{position:relative;z-index:1;}
.who i{width:46px;height:46px;flex:none;border-radius:50%;background:rgba(255,255,255,.17);color:#fff;
  display:grid;place-items:center;font-style:normal;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:var(--fs-sm);font-weight:700;}
.who b{display:block;font-size:var(--fs-sm);color:#fff;}
.who span{display:block;margin-top:2px;font-size:var(--fs-2xs);color:rgba(255,255,255,.72);
  overflow-wrap:anywhere;}
.who > div{min-width:0;}
/* sticky only works while the element's own container is still on screen,
   and a grid column with align-items:start is only as tall as its content.
   So the whole column sticks, not just the menu inside it. */
.acct__side{position:sticky;top:96px;}
.anav{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-2);display:grid;gap:2px;}
/* Sign out leaves the page, so it is a link rather than a button and still
   works with no JavaScript at all. The menu styling has to name both. */
.anav button,.anav .out{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:44px;
  padding:0 var(--sp-4);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:500;
  color:var(--ink-2);text-align:left;transition:background .15s ease,color .15s ease;}
.anav button svg,.anav .out svg{width:18px;height:18px;flex:none;color:var(--muted);transition:color .15s ease;}
.anav button:hover,.anav .out:hover{background:var(--canvas-2);}
.anav button.is-on{background:var(--navy-700);color:#fff;font-weight:600;}
.anav button.is-on svg{color:#fff;}
.anav .cnt{margin-left:auto;font-size:var(--fs-3xs);font-weight:700;color:var(--muted);
  background:var(--canvas-2);border-radius:var(--r-pill);padding:2px 8px;}
.anav button.is-on .cnt{background:rgba(255,255,255,.18);color:#fff;}
.rail__sep{height:1px;background:var(--line);margin:var(--sp-2) var(--sp-3);}
.anav .out{color:var(--sale);}
.anav .out svg{color:var(--sale);}
.pane{display:none;}
.pane.is-on{display:block;}
.pane__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5);}
.pane__head h1{font-size:var(--fs-h3);letter-spacing:-0.02em;}
.pane__head p{margin-top:4px;font-size:var(--fs-2xs);color:var(--muted);}
/* overview */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-5);}
.tile{background:#fff;padding:var(--sp-5);}
.tile span{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.tile b{display:block;margin-top:7px;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--navy-700);line-height:1;}
.tile small{display:block;margin-top:6px;font-size:var(--fs-3xs);color:var(--muted);}
.card2{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  margin-bottom:var(--sp-5);}
.card2__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--line);}
.card2__head h2{font-size:var(--fs-base);}
.card2__head > svg{width:18px;height:18px;color:var(--blue-600);flex:none;}
.card2__head a{margin-left:auto;font-size:var(--fs-2xs);font-weight:700;color:var(--navy-700);}
.card2__body{padding:var(--sp-6);}
/* orders */
.orow{display:grid;grid-template-columns:1fr auto;gap:var(--sp-4) var(--sp-5);
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line-soft);align-items:center;}
.orow:last-child{border-bottom:0;}
.orow__top{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;min-width:0;}
.orow__no{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-sm);font-weight:700;}
.orow__when{font-size:var(--fs-3xs);color:var(--muted);}
.orow__items{margin-top:6px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.5;}
.orow__right{text-align:right;white-space:nowrap;}
.orow__right b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;}
.orow__right a{display:inline-flex;align-items:center;gap:5px;margin-top:6px;
  font-size:var(--fs-3xs);font-weight:700;color:var(--navy-700);}
.orow__right a svg{width:13px;height:13px;}
.ostat{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:4px 11px;font-size:var(--fs-3xs);font-weight:700;white-space:nowrap;}
.ostat svg{width:12px;height:12px;}
.ostat--go{background:var(--navy-100);color:var(--navy-700);}
.ostat--done{background:var(--green-100);color:var(--green-700);}
.ostat--off{background:#FBEBE9;color:#A4342A;}
/* addresses */
.addrs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
.addr2{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-6);}
.addr2.is-default{border-color:var(--navy-700);}
.addr2__tag{display:inline-flex;align-items:center;gap:6px;background:var(--navy-100);
  color:var(--navy-700);border-radius:var(--r-pill);padding:4px 11px;
  font-size:var(--fs-3xs);font-weight:700;margin-bottom:var(--sp-4);}
.addr2__tag svg{width:12px;height:12px;}
.addr2 b{display:block;font-size:var(--fs-sm);}
.addr2 p{margin-top:6px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.7;}
.addr2__acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:1px dashed var(--line);flex-wrap:wrap;}
.minibtn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
  font-size:var(--fs-3xs);font-weight:700;color:var(--ink-2);
  transition:border-color .16s ease,color .16s ease,background .16s ease;}
.minibtn:hover{border-color:#C3D0E8;background:var(--canvas-2);}
.minibtn svg{width:13px;height:13px;}
.minibtn--kill:hover{border-color:#F3CFCB;color:var(--sale);background:#FBEBE9;}
.addnew{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);
  min-height:200px;border:2px dashed var(--line);border-radius:var(--r-lg);background:#fff;
  color:var(--muted);font-size:var(--fs-sm);font-weight:600;
  transition:border-color .18s ease,color .18s ease,background .18s ease;}
.addnew:hover{border-color:var(--navy-700);color:var(--navy-700);background:var(--navy-100);}
.addnew i{width:40px;height:40px;border-radius:50%;background:var(--canvas-2);
  display:grid;place-items:center;}
.addnew i svg{width:19px;height:19px;}
/* wishlist */
/* Three fixed columns suited the two sample cards. With a real wishlist the
   last row is rarely full, and an empty cell in this grid shows the grey
   behind it, which reads as a card that failed to load. The columns are as
   many as fit instead, so the row is always complete. */
.wish{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.wcard2{background:#fff;padding:var(--sp-5);display:flex;flex-direction:column;}
.wcard2__pic{aspect-ratio:1/1;border-radius:var(--r-md);background:var(--canvas-2);
  display:grid;place-items:center;margin-bottom:var(--sp-4);}
.wcard2__pic svg{width:66%;height:66%;color:#5B6699;--ill-2:#E8EFF8;}
.wcard2 b{font-size:var(--fs-xs);font-weight:600;line-height:1.45;}
.wcard2__price{margin-top:auto;padding-top:var(--sp-4);display:flex;align-items:baseline;gap:8px;}
.wcard2__price b{font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);font-weight:700;}
.wcard2__price del{font-size:var(--fs-3xs);color:var(--muted);}
.wcard2__acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);}
.wcard2__acts .btn{flex:1;min-height:38px;padding:0 var(--sp-4);font-size:var(--fs-3xs);justify-content:center;}
/* profile */
.pform{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-7);}
/* fields sitting in a row start at the same line, whatever is under them */
.pform .field{align-content:start;}
.pnote{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--canvas-2);
  border-radius:var(--r-md);padding:var(--sp-4);font-size:var(--fs-2xs);
  color:var(--ink-2);line-height:1.6;}
.pnote svg{width:16px;height:16px;flex:none;color:var(--blue-600);margin-top:1px;}
.psplit{height:1px;background:var(--line);margin:var(--sp-7) 0 var(--sp-6);}
.pwrap2{position:relative;}
.pwrap2 input{padding-right:48px;}
.peye2{position:absolute;right:6px;top:25px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:background .15s ease,color .15s ease;}
.peye2{top:50%;transform:translateY(-50%);}
.peye2:hover{background:var(--canvas-2);color:var(--ink-2);}
.peye2 svg{width:18px;height:18px;}
.psub{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin-bottom:var(--sp-5);}
.aerr2{display:none;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-6);
  background:#FBEBE9;border:1px solid #F3CFCB;border-radius:var(--r-md);
  padding:var(--sp-4);font-size:var(--fs-2xs);color:#A4342A;line-height:1.55;}
.aerr2.is-on{display:flex;}
.aerr2 svg{width:16px;height:16px;flex:none;margin-top:1px;}
.pacts{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7);}
.saved{display:none;align-items:center;gap:var(--sp-3);
  background:var(--green-100);border-radius:var(--r-pill);padding:9px var(--sp-5);
  font-size:var(--fs-2xs);color:#2C6A50;font-weight:600;}
.saved.is-on{display:flex;}
.saved svg{width:16px;height:16px;color:var(--green-700);flex:none;}
.nothing{text-align:center;padding:var(--sp-12) var(--sp-6);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);}
.nothing i{width:62px;height:62px;margin:0 auto var(--sp-5);border-radius:50%;
  background:var(--canvas-2);color:var(--muted);display:grid;place-items:center;}
.nothing i svg{width:28px;height:28px;}
.nothing h3{font-size:var(--fs-base);}
.nothing p{margin-top:var(--sp-3);font-size:var(--fs-2xs);color:var(--muted);line-height:1.65;}
@media (max-width:1080px){
  .acct{grid-template-columns:1fr;gap:var(--sp-6);}
  /* the anav turns into a strip you can swipe, since five will not fit */
  .acct__side{position:static;}
  .acct__main{min-height:0;}
  .anav{position:static;display:flex;gap:var(--sp-2);min-width:0;max-width:100%;
    overflow-x:auto;padding:var(--sp-3);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .anav::-webkit-scrollbar{display:none;}
  .anav button,.anav .out{width:auto;flex:none;white-space:nowrap;}
  .rail__sep{display:none;}
  .wish{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .tiles{grid-template-columns:1fr;}
  .addrs{grid-template-columns:1fr;}
  .orow{grid-template-columns:1fr;}
  .orow__right{text-align:left;}
  .card2__head,.card2__body,.orow{padding-left:var(--sp-5);padding-right:var(--sp-5);}
}
@media (max-width:480px){
  .wish{grid-template-columns:1fr;}
}
.num i{width:42px;height:42px;margin:0 auto var(--sp-5);border-radius:13px;
  background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;
  transition:background .3s ease,color .3s ease,transform .3s ease;}
.num i svg{width:20px;height:20px;}
.nums.is-counted .num i{background:var(--navy-100);color:var(--navy-700);}
.num b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:34px;font-weight:700;
  letter-spacing:-0.03em;color:var(--navy-700);line-height:1;
  /* the digits change width as they count, so the tile would jiggle without this */
  font-variant-numeric:tabular-nums;}
/* the tiles arrive one after another, left to right */
.nums .num{opacity:0;transform:translateY(10px);}
.nums.is-counted .num{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.1);}
.nums.is-counted .num:nth-child(2){transition-delay:.08s;}
.nums.is-counted .num:nth-child(3){transition-delay:.16s;}
.nums.is-counted .num:nth-child(4){transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){
  .nums .num{opacity:1;transform:none;}
  .nums.is-counted .num{transition:none;}
}
/* ---------- 33. B2B BULK QUOTE ---------- */
.bhero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center;}
.btag{display:inline-flex;align-items:center;gap:8px;background:var(--navy-100);color:var(--navy-700);
  border-radius:var(--r-pill);padding:7px 15px;font-size:var(--fs-3xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;}
.btag svg{width:14px;height:14px;flex:none;}
.bhero h1{margin-top:var(--sp-5);font-size:38px;letter-spacing:-0.032em;line-height:1.15;}
.bhero > div > p{margin-top:var(--sp-5);font-size:var(--fs-lg);color:var(--muted);line-height:1.7;}
.bhero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-7);}
/* who this is for, as a plain list rather than three identical boxes */
.forwho{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;}
.forwho__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--line);}
.forwho__head svg{width:18px;height:18px;color:var(--blue-600);flex:none;}
.forwho__head b{font-size:var(--fs-base);}
.wrow{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid var(--line-soft);}
.wrow:last-child{border-bottom:0;}
.wrow i{width:34px;height:34px;flex:none;border-radius:10px;background:var(--blue-50);
  color:var(--blue-600);display:grid;place-items:center;}
.wrow i svg{width:16px;height:16px;}
.wrow b{display:block;font-size:var(--fs-sm);}
.wrow p{margin-top:4px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
.terms3{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.t3{background:#fff;padding:var(--sp-6);}
.t3 span{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.t3 b{display:block;margin-top:9px;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:21px;font-weight:700;letter-spacing:-0.02em;color:var(--navy-700);line-height:1.2;}
.t3 small{display:block;margin-top:7px;font-size:var(--fs-3xs);color:var(--muted);line-height:1.55;}
.bsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);}
.bstep{position:relative;min-width:0;}
.bstep::after{content:"";position:absolute;top:17px;left:42px;right:calc(-1 * var(--sp-5));
  height:2px;background:var(--line);}
.bstep:last-child::after{display:none;}
.bstep i{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;
  background:var(--navy-700);color:#fff;display:grid;place-items:center;font-style:normal;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-2xs);font-weight:700;}
.bstep b{display:block;margin-top:var(--sp-5);font-size:var(--fs-sm);}
.bstep p{margin-top:5px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
.qbox{max-width:780px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--sp-8);}
.qbox h2{font-size:var(--fs-h3);}
.qbox > p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);}
.qbox .fields{margin-top:var(--sp-6);}
.qbox .field{align-content:start;}
.qdone{display:none;text-align:center;padding:var(--sp-7) var(--sp-4);}
.qdone.is-on{display:block;}
.qdone i{width:62px;height:62px;margin:0 auto var(--sp-5);border-radius:50%;
  background:var(--green-100);color:var(--green-700);display:grid;place-items:center;}
.qdone i svg{width:30px;height:30px;}
.qdone h3{font-size:var(--fs-h3);}
.qdone p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);line-height:1.7;
  max-width:440px;margin-left:auto;margin-right:auto;}
.qbox.is-sent .qform{display:none;}
.qbox.is-sent > h2,.qbox.is-sent > p{display:none;}
.qerr{display:none;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-5);
  background:#FBEBE9;border:1px solid #F3CFCB;border-radius:var(--r-md);
  padding:var(--sp-4);font-size:var(--fs-2xs);color:#A4342A;line-height:1.55;}
.qerr.is-on{display:flex;}
.qerr svg{width:16px;height:16px;flex:none;margin-top:1px;}
/* the contact form shows the same error line above its fields, where it
   needs the margin below it rather than above */
.cform .qerr{margin:0 0 var(--sp-5);}
/* The field no person can see. A robot filling in a form fills in every
   box it finds, so a box nobody can reach is a question only a robot
   answers. Moved off the screen rather than display:none, because the
   simpler robots know to skip a hidden field. */
.mpp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* a button that has been pressed and is waiting for the server. It is not
   disabled, because a disabled submit button stops the browser sending
   the form at all; it only stops looking pressable. */
.btn.is-busy{pointer-events:none;opacity:.65;}
@media (max-width:1080px){
  .bhero{grid-template-columns:1fr;gap:var(--sp-8);}
  .terms3{grid-template-columns:1fr 1fr;}
  .bsteps{grid-template-columns:1fr;}
  .bstep{display:flex;align-items:flex-start;gap:var(--sp-4);}
  .bstep::after{top:40px;bottom:calc(-1 * var(--sp-5));left:17px;right:auto;width:2px;height:auto;}
  .bstep i{flex:none;}
  .bstep b{margin-top:7px;}
  .bstep > div{min-width:0;}
}
@media (max-width:760px){
  .bhero h1{font-size:27px;}
  .bhero > div > p{font-size:var(--fs-sm);}
  .bhero__cta .btn{flex:1 1 100%;justify-content:center;}
  .qbox{padding:var(--sp-5);}
  .qbox .btn{width:100%;justify-content:center;}
}
@media (max-width:480px){ .terms3{grid-template-columns:1fr;} }
/* ---------- 29. BECOME A SELLER ---------- */
.shero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center;}
.shero__tag{display:inline-flex;align-items:center;gap:8px;background:var(--green-100);
  color:var(--green-700);border-radius:var(--r-pill);padding:7px 15px;
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.shero__tag svg{width:14px;height:14px;flex:none;}
.shero h1{margin-top:var(--sp-5);font-size:40px;letter-spacing:-0.032em;line-height:1.14;}
.shero p{margin-top:var(--sp-5);font-size:var(--fs-lg);color:var(--muted);line-height:1.7;}
.shero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-7);}
/* the terms up front, because this is the first thing a seller asks */
.terms{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;}
.terms__head{padding:var(--sp-6);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp-3);}
.terms__head svg{width:19px;height:19px;color:var(--blue-600);flex:none;}
.terms__head b{font-size:var(--fs-base);}
.trow{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line-soft);}
.trow:last-child{border-bottom:0;}
.trow > div{min-width:0;}
.trow b{display:block;font-size:var(--fs-sm);}
.trow p{margin-top:4px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
.trow > span{flex:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-base);
  font-weight:700;color:var(--navy-700);white-space:nowrap;padding-top:1px;}
.sellwhy{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);}
.wi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-6);}
.wi i{width:44px;height:44px;border-radius:13px;background:var(--blue-50);color:var(--blue-600);
  display:grid;place-items:center;margin-bottom:var(--sp-5);}
.wi i svg{width:21px;height:21px;}
.wi b{display:block;font-size:var(--fs-base);}
.wi p{margin-top:var(--sp-3);font-size:var(--fs-2xs);color:var(--muted);line-height:1.65;}
/* the five steps, one rail, so it reads as a sequence and not a menu */
.steps5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-5);}
.s5{position:relative;min-width:0;}
.s5::after{content:"";position:absolute;top:17px;left:42px;right:calc(-1 * var(--sp-5));
  height:2px;background:var(--line);}
.s5:last-child::after{display:none;}
.s5 i{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;
  background:var(--navy-700);color:#fff;display:grid;place-items:center;font-style:normal;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-2xs);font-weight:700;}
.s5 b{display:block;margin-top:var(--sp-5);font-size:var(--fs-sm);}
.s5 p{margin-top:5px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
/* what to have ready before starting the form */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.doc{background:#fff;padding:var(--sp-5) var(--sp-6);display:flex;align-items:flex-start;gap:var(--sp-4);}
.doc svg{width:18px;height:18px;flex:none;color:var(--green-700);margin-top:2px;}
.doc b{display:block;font-size:var(--fs-sm);}
.doc p{margin-top:3px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}
.doc--opt svg{color:var(--muted);}
.applybox{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--sp-8);}
.applybox h2{font-size:var(--fs-h3);}
.applybox > p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);}
.applybox .fields{margin-top:var(--sp-6);}
.applied{display:none;text-align:center;padding:var(--sp-7) var(--sp-4);}
.applied.is-on{display:block;}
.applied i{width:62px;height:62px;margin:0 auto var(--sp-5);border-radius:50%;
  background:var(--green-100);color:var(--green-700);display:grid;place-items:center;}
.applied i svg{width:30px;height:30px;}
.applied h3{font-size:var(--fs-h3);}
.applied p{margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);line-height:1.7;
  max-width:420px;margin-left:auto;margin-right:auto;}
.applybox.is-sent .applyform,.applybox.is-sent > h2,.applybox.is-sent > p{display:none;}
@media (max-width:1080px){
  .shero{grid-template-columns:1fr;gap:var(--sp-8);}
  .sellwhy{grid-template-columns:1fr;}
  .steps5{grid-template-columns:1fr;}
  .s5{display:flex;align-items:flex-start;gap:var(--sp-4);}
  .s5::after{top:40px;bottom:calc(-1 * var(--sp-5));left:17px;right:auto;width:2px;height:auto;}
  .s5 i{flex:none;}
  .s5 b{margin-top:7px;}
  .s5 > div{min-width:0;}
}
@media (max-width:760px){
  .shero h1{font-size:28px;}
  .shero p{font-size:var(--fs-sm);}
  .shero__cta .btn{flex:1 1 100%;justify-content:center;}
  .docs{grid-template-columns:1fr;}
  .applybox{padding:var(--sp-5);}
  .applybox .btn{width:100%;justify-content:center;}
  .trow{flex-direction:column;gap:var(--sp-2);}
  .trow > span{padding-top:0;}
}
/* ---------- 30. POLICY PAGES ----------
   Long text nobody reads end to end. A contents rail on the side and short
   numbered sections so a person can land on the one line they came for. */
.legal{display:grid;grid-template-columns:258px 1fr;gap:var(--sp-10);align-items:start;}
.legal__main{min-width:0;max-width:760px;}
/* A legal page is written twice, once in each language, and the one that
   is not wanted is hidden. The language switch sets lang on <html>, so
   that attribute is what decides, and nothing has to be moved or redrawn
   when the switch is pressed. English shows when there is no JavaScript. */
.legal__body--bn{display:none;}
html[lang="bn"] .legal__body--en{display:none;}
html[lang="bn"] .legal__body--bn{display:block;}
/* the contents list on the left is a grid of links, so its wrapper has to
   get out of the way and let the links be the grid's own children */
.toc__list > .legal__body--en{display:contents;}
html[lang="bn"] .toc__list > .legal__body--bn{display:contents;}
.toc{position:sticky;top:96px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;}
.toc__head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);
  font-size:var(--fs-3xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.toc__list{display:grid;padding:var(--sp-2);}
.toc__list a{display:block;padding:9px var(--sp-4);border-radius:var(--r-sm);
  font-size:var(--fs-2xs);color:var(--ink-2);line-height:1.5;
  transition:background .15s ease,color .15s ease;}
.toc__list a:hover{background:var(--canvas-2);}
.toc__list a.is-on{background:var(--navy-100);color:var(--navy-700);font-weight:700;}
.lhead{max-width:760px;margin-bottom:var(--sp-8);padding-bottom:var(--sp-7);
  border-bottom:1px solid var(--line);}
.lhead h1{font-size:34px;letter-spacing:-0.03em;}
.lhead p{margin-top:var(--sp-4);font-size:var(--fs-base);color:var(--muted);line-height:1.7;}
.lmeta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5);}
.lmeta span{display:inline-flex;align-items:center;gap:8px;background:var(--canvas-2);
  border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-3xs);color:var(--muted);}
.lmeta span svg{width:14px;height:14px;color:var(--blue-600);flex:none;}
.lmeta b{color:var(--ink);font-weight:700;}
.lsec{scroll-margin-top:110px;padding-bottom:var(--sp-8);}
.lsec h2{display:flex;align-items:baseline;gap:var(--sp-4);font-size:var(--fs-h3);letter-spacing:-0.02em;}
.lsec h2 i{font-style:normal;font-family:'Plus Jakarta Sans',sans-serif;font-size:var(--fs-sm);
  font-weight:700;color:var(--blue-600);flex:none;}
.lsec p{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.8;}
.lsec ul{margin-top:var(--sp-4);display:grid;gap:var(--sp-3);list-style:none;}
.lsec li{display:flex;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;}
.lsec li::before{content:"";width:6px;height:6px;border-radius:50%;background:#C3D0E8;
  flex:none;margin-top:10px;}
.lsec a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* the one rule on the page people argue about gets its own block */
.keyrule{display:flex;gap:var(--sp-4);margin-top:var(--sp-5);background:var(--green-100);
  border:1px solid #BFE6D4;border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);}
.keyrule svg{width:19px;height:19px;flex:none;color:var(--green-700);margin-top:2px;}
.keyrule b{display:block;font-size:var(--fs-sm);color:#0E5437;}
.keyrule p{margin-top:5px;font-size:var(--fs-2xs);color:#2C6A50;line-height:1.65;}
.warnrule{display:flex;gap:var(--sp-4);margin-top:var(--sp-5);background:#FFF8E6;
  border:1px solid #F0DCBB;border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);}
.warnrule svg{width:19px;height:19px;flex:none;color:#9A5B12;margin-top:2px;}
.warnrule b{display:block;font-size:var(--fs-sm);color:#6B4E17;}
.warnrule p{margin-top:5px;font-size:var(--fs-2xs);color:#8A6520;line-height:1.65;}
.lfoot{margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--ink-2);}
.lfoot svg{width:18px;height:18px;color:var(--blue-600);flex:none;}
.lfoot a{color:var(--navy-700);font-weight:700;}
@media (max-width:980px){
  .legal{grid-template-columns:1fr;gap:var(--sp-6);}
  /* the rail becomes a short list at the top rather than a long sticky column */
  .toc{position:static;}
  .toc__list{grid-template-columns:1fr 1fr;}
  .legal__main{max-width:none;}
}
@media (max-width:620px){
  .toc__list{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .lhead h1{font-size:25px;}
  .lhead p{font-size:var(--fs-sm);}
  .lsec h2{font-size:var(--fs-lg);gap:var(--sp-3);}
}

/* ---------- hidden means hidden ----------
   A component that sets its own display beats the browser's rule for the
   hidden attribute, which is how the cart badge ended up showing a 0 on
   an empty cart. This settles it for every element that carries it. */
[hidden]{display:none !important;}

/* ==========================================================
   ADDRESS DIALOG

   The address form used to unfold inside the page, pushing the
   saved cards down and leaving the eye to work out what had
   moved. It is a dialog now: the page stays where it was and
   the form arrives above it.

   Built in the same shapes as the quick view, so the site has
   one idea of what a dialog looks like rather than two.
   ========================================================== */
.amodal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);}
.amodal[hidden]{display:none;}
.amodal__veil{position:absolute;inset:0;background:rgba(16,18,38,.55);backdrop-filter:blur(3px);}

.amodal__sheet{position:relative;display:flex;flex-direction:column;
  width:min(860px,100%);max-height:calc(100dvh - 40px);
  background:#fff;border-radius:var(--r-lg);box-shadow:0 26px 70px rgba(16,18,38,.36);
  animation:amodalIn .22s cubic-bezier(.22,.68,.36,1);overflow:hidden;}
@keyframes amodalIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}

/* The head and the foot hold still while only the fields scroll,
   so Save is always where you left it on a short screen. */
.amodal__bar{display:flex;align-items:center;gap:var(--sp-4);flex:none;
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line);}
.amodal__title{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;margin:0;}
.amodal__x{margin-left:auto;width:36px;height:36px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--ink-2);background:transparent;border:0;cursor:pointer;
  transition:background .18s ease,color .18s ease;}
.amodal__x:hover{background:var(--canvas-2);color:var(--ink);}
.amodal__x svg{width:17px;height:17px;}

.amodal__body{flex:1 1 auto;overflow:auto;padding:var(--sp-6);}

.amodal__foot{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--line);background:var(--canvas);}
/* Both are the same component at the same height. Cancel used to be a
   34px chip beside a 50px pill, which is what made the pair look
   unconsidered. */
.amodal__foot .btn{min-height:46px;}
.amodal__foot .btn--primary{min-width:168px;}

/* The three short boxes sit in one row while there is room for them,
   then two, then one, and the address spans whatever that row is. */
#addrForm .fields{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}

/* Each box keeps its own height instead of stretching to match the
   tallest cell in the row. One field carries a line of explanation
   under it and the others do not, and without this those others grew
   to the same height, so the three boxes no longer lined up. */
#addrForm .field{align-content:start;}
#addrForm .field input,
#addrForm .field .field__phone{height:50px;min-height:50px;}

/* The error line only takes up space when it has something to say. */
#addrModal .aerr2{margin:0 0 var(--sp-5);}
#addrModal .aerr2:not(.is-on){display:none;}

/* The page behind must not scroll while the dialog is up. */
body.amodal-open{overflow:hidden;}

@media (max-width:640px){
  .amodal{padding:0;align-items:flex-end;}
  /* On a phone it rises from the bottom like a sheet, which is where
     the thumb already is. */
  .amodal__sheet{width:100%;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;}
  @keyframes amodalIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
  .amodal__bar,.amodal__foot{padding-left:var(--sp-5);padding-right:var(--sp-5);}
  .amodal__body{padding:var(--sp-5);}
  .amodal__foot{gap:var(--sp-2);}
  .amodal__foot .btn{flex:1 1 0;min-width:0;}
}

@media (prefers-reduced-motion:reduce){
  .amodal__sheet{animation:none;}
}

/* ============================================================
   Saving a product for later, from anywhere it is shown
   ============================================================ */

/* The heart on the small card used by Top Health Deals, New Arrivals and
   the category rows. It is the same button as the one on the shop page,
   sized for the smaller card. Before this, anything on the home page had
   to be opened first before it could be saved. */
.mini__wish{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease, background .2s ease;
}
.mini:hover .mini__wish{ opacity: 1; transform: translateY(0); }
.mini__wish:hover{ color: var(--sale); }
.mini__wish svg{ width: 16px; height: 16px; }

/* A saved product looked exactly like an unsaved one: the class went on
   but nothing was drawn for it, so the heart filled in nobody's eyes but
   the browser's. A saved heart is filled in and coloured now, on every
   card that has one. */
.prod__wish.is-on,
.mini__wish.is-on,
.pcard__wish.is-on{
  color: var(--sale);
  border-color: var(--sale-soft);
  background: var(--sale-soft);
  opacity: 1;
  transform: none;
}
.prod__wish.is-on svg,
.mini__wish.is-on svg,
.pcard__wish.is-on svg{ fill: currentColor; }

/* A finger cannot hover, so on a phone the heart has to be there without
   being pointed at. That matters more on this shop than most, because
   most of its customers order from a phone.

   Two rules, because one of them is not enough on its own. The width
   rule is what the rest of this stylesheet already uses and it catches
   every phone. The hover rule catches a touch screen that happens to be
   wide, such as a tablet held sideways, where the width rule would miss. */
@media (max-width: 760px){
  .mini__wish, .prod__wish, .pcard__wish{ opacity: 1; transform: none; }
  .mini__wish{ width: 36px; height: 36px; }
}
@media (hover: none){
  .mini__wish, .prod__wish, .pcard__wish{ opacity: 1; transform: none; }
}

/* The picture on a wishlist card sat in a soft square frame, but only the
   stand-in drawing was ever given a size. A real photograph had no rule
   at all, so it pushed the frame out of shape and filled the card. Same
   treatment as every other product photo on the site. */
.wcard2__pic{ overflow: hidden; }
.wcard2__pic img{
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  padding: 8%;
}

/* ============================================================
   Certifications page
   ============================================================ */

.certhead{max-width:720px;margin:0 auto var(--sp-8);text-align:center;}
.certhead h1{font-size:var(--fs-h2);font-weight:700;letter-spacing:-0.02em;
  color:var(--navy-700);margin:var(--sp-3) 0 var(--sp-4);}
.certhead p{color:var(--ink-2);line-height:1.7;}
.certhead .eyebrow{justify-content:center;}
.certhead .eyebrow svg{width:15px;height:15px;}

/* A certificate is a document, not a product photo: tall, wide and
   square ones all turn up, so the frame is a fixed shape and the
   document is fitted inside it whole. Cropping a certificate would cut
   off the very seal that makes it worth showing. */
.certgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-5);}
.certcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.certcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--navy-100);}

/* The frame holds its shape whatever shape the scan is. The picture is
   taken out of the flow for that: left in it, a tall certificate made
   its own card taller than the one beside it and the row of cards came
   out ragged. */
.certcard__pic{position:relative;display:block;width:100%;aspect-ratio:4/3;
  background:var(--canvas-2);cursor:zoom-in;border:0;padding:0;}
.certcard__pic img{position:absolute;inset:var(--sp-4);
  width:calc(100% - var(--sp-4) * 2);height:calc(100% - var(--sp-4) * 2);
  object-fit:contain;background:#fff;border-radius:var(--r-sm);
  box-shadow:0 1px 3px rgba(21,18,58,.10);}
.certcard__zoom{position:absolute;right:12px;bottom:12px;width:34px;height:34px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.94);color:var(--navy-700);
  display:grid;place-items:center;opacity:0;transform:translateY(5px);
  transition:opacity .2s ease, transform .2s ease;box-shadow:var(--sh-1);}
.certcard__zoom svg{width:17px;height:17px;}
.certcard:hover .certcard__zoom{opacity:1;transform:translateY(0);}

.certcard__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);}
.certcard__body h2{font-size:var(--fs-base);font-weight:700;line-height:1.4;color:var(--ink);}
.certcard__by{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-2xs);
  font-weight:600;color:var(--blue-600);line-height:1.5;}
.certcard__by svg{width:14px;height:14px;flex:none;margin-top:2px;}
.certcard__note{font-size:var(--fs-2xs);color:var(--muted);line-height:1.6;}

.certfoot{margin-top:var(--sp-7);text-align:center;color:var(--muted);font-size:var(--fs-2xs);}

.certempty{max-width:430px;margin:0 auto;text-align:center;padding:var(--sp-8) 0;}
.certempty svg{width:170px;height:128px;margin-bottom:var(--sp-4);}
.certempty h3{font-size:var(--fs-lg);font-weight:700;color:var(--navy-700);margin-bottom:var(--sp-2);}
.certempty p{color:var(--ink-2);line-height:1.7;margin-bottom:var(--sp-5);}

/* ---- the close up ---- */
.certlb{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:var(--sp-5);}
.certlb[hidden]{display:none;}
.certlb__veil{position:absolute;inset:0;background:rgba(21,18,58,.72);border:0;
  cursor:zoom-out;backdrop-filter:blur(2px);}
.certlb__box{position:relative;z-index:1;width:min(860px,100%);max-height:90vh;
  background:#fff;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(21,18,58,.42);}
.certlb__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);}
.certlb__bar b{font-size:var(--fs-sm);font-weight:700;color:var(--navy-700);}
.certlb__x{width:36px;height:36px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;color:var(--ink-2);background:var(--canvas-2);border:0;cursor:pointer;}
.certlb__x:hover{background:var(--navy-100);color:var(--navy-700);}
.certlb__x svg{width:17px;height:17px;}
.certlb__pic{padding:var(--sp-5);overflow:auto;background:var(--canvas-2);}
.certlb__pic img{display:block;max-width:100%;margin:0 auto;background:#fff;
  border-radius:var(--r-sm);box-shadow:0 2px 10px rgba(21,18,58,.12);}
body.certlb-open{overflow:hidden;}

@media (max-width:760px){
  .certgrid{grid-template-columns:1fr;gap:var(--sp-4);}
  .certcard__pic{aspect-ratio:3/2;}
  .certcard__pic img{inset:var(--sp-3);
    width:calc(100% - var(--sp-3) * 2);height:calc(100% - var(--sp-3) * 2);}
  /* no hover on a phone, so the magnifier is simply there */
  .certcard__zoom{opacity:1;transform:none;}
  .certlb{padding:var(--sp-3);}
  .certlb__box{max-height:94vh;}
  .certlb__pic{padding:var(--sp-3);}
}
@media (hover: none){
  .certcard__zoom{opacity:1;transform:none;}
}

/* ============================================================
   Page not found
   ============================================================ */

.lost__top{max-width:660px;margin:0 auto;text-align:center;}
.lost__art{width:230px;height:160px;margin:0 auto var(--sp-5);display:block;}
.lost__code{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:0.16em;
  color:var(--blue-600);background:var(--blue-50);
  padding:5px 13px;border-radius:var(--r-pill);margin-bottom:var(--sp-4);}
.lost h1{font-size:var(--fs-h2);font-weight:700;letter-spacing:-0.02em;color:var(--navy-700);}
.lost__top p{margin-top:var(--sp-3);color:var(--ink-2);line-height:1.7;}
.lost__acts{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-6);}

/* The search box. Somebody who mistyped a product name is one search
   away from what they wanted, which is worth more than any link. */
.lost__find{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-6) auto 0;
  max-width:460px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 6px 6px var(--sp-4);
  transition:border-color .2s ease, box-shadow .2s ease;}
.lost__find:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(32,126,193,.12);}
.lost__find > svg{width:18px;height:18px;flex:none;color:var(--muted);}
.lost__find input{flex:1;min-width:0;border:0;background:none;font-size:var(--fs-sm);
  color:var(--ink);padding:10px 0;}
.lost__find input:focus{outline:none;}
.lost__find .btn{flex:none;}

.lost__cats{max-width:860px;margin:var(--sp-10) auto 0;}
.lost__cats h2{text-align:center;font-size:var(--fs-lg);font-weight:700;
  color:var(--navy-700);margin-bottom:var(--sp-5);}
.lost__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-3);}
.lost__cat{display:flex;align-items:center;gap:var(--sp-3);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.lost__cat:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--navy-100);}
.lost__cat i{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-50);color:var(--blue-600);}
.lost__cat i svg{width:20px;height:20px;}
.lost__cat b{flex:1;min-width:0;font-size:var(--fs-2xs);font-weight:700;line-height:1.4;color:var(--ink);}
.lost__go{width:16px;height:16px;flex:none;color:var(--muted);}

/* the same colour each category wears everywhere else on the site */
.lost__cat.tint-green i{background:var(--green-100);color:var(--green-700);}
.lost__cat.tint-amber i{background:var(--amber-100);color:var(--amber);}
.lost__cat.tint-pink i{background:var(--pink-100);color:var(--pink-700);}
.lost__cat.tint-navy i{background:var(--navy-100);color:var(--navy-700);}

.lost__help{text-align:center;margin-top:var(--sp-8);font-size:var(--fs-2xs);color:var(--muted);}
.lost__help a{color:var(--blue-600);font-weight:700;}

@media (max-width:760px){
  .lost__art{width:180px;height:126px;}
  .lost__acts .btn{width:100%;justify-content:center;}
  .lost__find{flex-wrap:wrap;border-radius:var(--r-md);padding:var(--sp-3);}
  .lost__find input{width:100%;flex:1 1 100%;}
  .lost__find .btn{width:100%;justify-content:center;}
  .lost__grid{grid-template-columns:1fr;}
}

/* ============================================================
   Set a new password
   The sign in page's shell, with the few pieces that page has no
   need of: a title above the form, a full width button, and the
   panel shown once the password has been changed.
   ============================================================ */

.aform__title{font-size:var(--fs-lg);font-weight:700;color:var(--navy-700);
  margin-bottom:var(--sp-5);}
.aform__note{color:var(--ink-2);line-height:1.7;margin-bottom:var(--sp-5);font-size:var(--fs-sm);}
.aform__alt{margin-top:var(--sp-4);text-align:center;font-size:var(--fs-2xs);}
.aform__alt a{color:var(--blue-600);font-weight:700;}
.btn--full{width:100%;justify-content:center;}

.aok{text-align:center;padding:var(--sp-5) 0;}
.aok__ic{width:62px;height:62px;margin:0 auto var(--sp-5);border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--green-100);color:var(--green-700);}
.aok__ic svg{width:28px;height:28px;}
.aok h1{font-size:var(--fs-lg);font-weight:700;color:var(--navy-700);}
.aok p{margin-top:var(--sp-3);margin-bottom:var(--sp-6);color:var(--ink-2);line-height:1.7;}

/* The six digit code box. Wide, spaced and in a fixed width face, so
   the digits can be counted at a glance and a mistyped one is easy to
   spot before pressing anything. */
.codebox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
  font-size:26px !important;letter-spacing:10px;text-align:center;font-weight:700;}
.codebox::placeholder{letter-spacing:10px;opacity:.35;}

/* ------------------------------------------------------------
   The six digit code
   One box per digit rather than one box for all six. A single box
   with a faint 000000 behind it made people read the placeholder
   as a code that was already there, and there was no way to see
   how many digits had gone in without counting them. Six boxes
   show that at a glance, and a wrong digit can be corrected on its
   own instead of retyping the lot.
   ------------------------------------------------------------ */
.otp{margin:var(--sp-6) 0 var(--sp-5);}
.otp__lab{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-2);
  margin-bottom:var(--sp-3);}

/* Equal columns rather than fixed widths, so the row fits a 320px
   phone without a sideways scroll and still looks generous on a
   desktop. */
.otp__row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}

.otp__box{width:100%;height:60px;padding:0;text-align:center;
  font-size:24px;font-weight:700;color:var(--navy-700);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  -moz-appearance:textfield;}
.otp__box::-webkit-outer-spin-button,
.otp__box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.otp__box:hover{border-color:#CBD3E4;}
.otp__box:focus{outline:none;border-color:var(--navy-700);
  box-shadow:0 0 0 4px rgba(39,35,97,.11);}
/* a digit that has landed, so the eye can see how far along it is */
.otp__box.is-set{background:var(--navy-50);border-color:#C9C6E2;}
.otp__box.is-bad{border-color:#D9534F;box-shadow:0 0 0 4px rgba(217,83,79,.10);}

.otp__hint{display:block;margin-top:var(--sp-3);font-size:var(--fs-3xs);
  color:var(--muted);line-height:1.6;}

@media (max-width:420px){
  .otp__row{gap:6px;}
  .otp__box{height:54px;font-size:21px;border-radius:12px;}
}

/* The address the code went to, shown as a settled fact rather than a
   box to fill in again. */
.sentto{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);margin-bottom:var(--sp-5);
  background:var(--blue-50);border:1px solid #D9E8F5;border-radius:var(--r-md);}
.sentto i{flex:none;width:38px;height:38px;border-radius:11px;display:grid;
  place-items:center;background:#fff;color:var(--blue-600);box-shadow:var(--sh-1);}
.sentto i svg{width:19px;height:19px;}
.sentto > div{min-width:0;flex:1;}
.sentto b{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--navy-700);}
/* an address is one long unbroken word, so it is allowed to break */
.sentto span{display:block;font-size:var(--fs-xs);color:var(--ink-2);
  overflow-wrap:anywhere;line-height:1.5;}
.sentto__edit{flex:none;}
.sentto__edit button{font-size:var(--fs-2xs);font-weight:700;color:var(--blue-600);
  background:none;border:0;padding:4px 2px;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;}
.sentto.is-fresh{background:var(--green-100);border-color:#BFE5D4;}
.sentto.is-fresh i{color:var(--green-700);}

/* The resend line is a form now, not a link, because it really does
   send another email rather than going back a page to ask for one. */
.aform__alt button{font-size:var(--fs-2xs);font-weight:700;color:var(--blue-600);
  background:none;border:0;padding:0;cursor:pointer;}
.aform__alt button[disabled]{color:var(--muted);cursor:default;text-decoration:none;}

/* The "Forgotten it?" beside the Current password label, and its twin
   inside the code box. A label is not a place for a loud button, so
   these read as the quiet second option they are. */
/* only the one label that carries a second option, never every label
   in the form */
.lab-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);}
.lab-alt{font-size:var(--fs-3xs);font-weight:700;color:var(--blue-600);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;}
.lab-alt:hover{color:var(--navy-700);}
.otp__again{margin-left:6px;font-size:var(--fs-3xs);font-weight:700;color:var(--blue-600);
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;}
.otp__again:hover{color:var(--navy-700);}

/* Inside the account the form runs the full width of the panel, which
   stretched six boxes into six wide gates. Capped here only, so the
   reset page, where the panel is already narrow, is left as it is. */
.pform .otp__row{max-width:430px;}
.pform .otp{margin-top:var(--sp-5);}
.pform .sentto{margin-bottom:0;}

/* On a phone the address, the heading and the button were fighting for
   one line, and the address was breaking in the middle of a word to
   make room. The button drops to its own line instead, lined up under
   the text it belongs to. */
@media (max-width:560px){
  .sentto{flex-wrap:wrap;row-gap:10px;}
  .sentto__edit{flex:1 0 100%;padding-left:50px;}
  .sentto b{line-height:1.4;}
}

.aform .fields + .btn--full{margin-top:var(--sp-5);}