@charset "UTF-8";
/* ============================================================
   Al-Ahram Cookware — storefront design system
   RTL-first. Tokens map 1:1 to the Tailwind theme you will
   generate in the Laravel build (see DEVELOPER-NOTES.md).
   ============================================================ */

:root{
  /* brand */
  --red:#D81F26; --red-deep:#A8151C; --red-soft:#FBE9EA;
  --burgundy:#5E1119; --burgundy-2:#7C1823; --burgundy-ink:#3A0A10;
  --gold:#C9A227; --gold-soft:#E3CB8A; --gold-pale:#F5EBD2;
  /* --gold is the BRAND gold: decorative use, or text on dark grounds only
     (--gold-soft on --burgundy = 8.3:1). On cream it is 2.16:1, so light-ground
     text uses --gold-ink (4.7:1). Do not swap these two. */
  --gold-ink:#856910;
  --cream:#F8F1E7; --cream-2:#EFE3D3; --cream-3:#FBF6EF;
  --ink:#1A1315; --ink-70:#4A3D3F; --ink-45:#746669; --ink-25:#B3A8A9;
  /* --ink-25 is DECORATIVE only (inactive dots, separators). Small text that used
     it moves to --ink-mute, which clears AA on white. */
  --ink-mute:#7A7375;
  --line:#E2D5C4; --line-2:#F0E7DA; --steel:#C3C8CD;
  --ok:#1F7A46; --ok-bg:#E6F4EC; --warn:#96570B; --warn-bg:#FDF1E0;
  --err:#C0261C; --err-bg:#FBEAE8; --info:#1B5E8C; --info-bg:#E7F1F8;

  /* type scale */
  --t-cap:.75rem; --t-lab:.875rem; --t-body:1rem; --t-lead:1.125rem;
  --t-h5:1.125rem; --t-h4:1.25rem; --t-h3:1.5rem;
  --t-h2:clamp(1.75rem,3.4vw,2.25rem); --t-h1:clamp(2.125rem,6vw,4rem);

  /* 8pt grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s14:112px;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(26,19,21,.05),0 4px 12px rgba(26,19,21,.06);
  --shadow-md:0 2px 4px rgba(26,19,21,.06),0 14px 34px rgba(26,19,21,.10);
  --shadow-lg:0 4px 8px rgba(26,19,21,.08),0 24px 60px rgba(26,19,21,.16);
  --ease:cubic-bezier(0.2,0.8,0.2,1);
  --hdr-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:"Alexandria",system-ui,sans-serif;line-height:1.25;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0} img{max-width:100%;display:block} a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-sm)}
[hidden]{display:none !important}

.wrap{width:min(1220px,100% - var(--s5));margin-inline:auto}
.wrap-narrow{width:min(820px,100% - var(--s5));margin-inline:auto}
@media(max-width:640px){.wrap,.wrap-narrow{width:calc(100% - var(--s4))}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-size:var(--t-lab)}
.skip:focus{inset-inline-start:0}
.ic{width:20px;height:20px;flex:none}
.rot90{transform:rotate(90deg)}
.pyr{display:block} .pyr path{fill:currentColor}

/* ---------- shared bits ------------------------------------ */
.eyebrow{font-family:"Alexandria";font-size:var(--t-cap);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);display:flex;align-items:center;gap:var(--s1)}
/* on dark grounds the brand gold is legible and preferred */
.hero .eyebrow,.heritage .eyebrow,.page-head .eyebrow,.cta-band .eyebrow,
.marks .eyebrow,.warranty-band .eyebrow{color:var(--gold-soft)}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.eyebrow.red{color:var(--red)}
.eyebrow.ink{color:var(--ink-45)}
.sec-head{margin-bottom:var(--s6)}
.sec-head h2{font-size:var(--t-h2);margin-top:var(--s2)}
.sec-head p{color:var(--ink-45);margin-top:var(--s1);max-width:60ch;font-size:var(--t-lead);line-height:1.7}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.sec{padding-block:var(--s12)}
.sec-sm{padding-block:var(--s8)}
@media(max-width:640px){.sec{padding-block:var(--s10)}}
.lead{font-size:var(--t-lead);line-height:1.8;color:var(--ink-70)}
.muted{color:var(--ink-45)}
.center{text-align:center}
.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}
.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}

.seal{--sz:104px;width:var(--sz);height:var(--sz);flex:none;position:relative;display:grid;place-items:center;
  text-align:center;border:1px solid var(--gold);border-radius:50%;color:var(--gold-soft)}
.seal::after{content:"";position:absolute;inset:5px;border:1px solid rgba(201,162,39,.35);border-radius:50%}
.seal-num{font-family:"Alexandria";font-size:1.75rem;font-weight:800;line-height:1}
.seal-lab{font-size:9px;letter-spacing:.18em;font-weight:600;margin-top:3px;opacity:.75}

/* ---------- buttons ---------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:52px;padding:0 var(--s4);
  border-radius:var(--r-sm);font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;letter-spacing:.02em;
  transition:transform .18s ease,background .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease;
  text-align:center;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-sm{height:42px;padding:0 var(--s3);font-size:var(--t-cap)}
.btn-lg{height:58px;padding:0 var(--s5);font-size:var(--t-body)}
.btn-block{width:100%}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 20px rgba(216,31,38,.32)}
.btn-primary:hover{background:#EC2A31;box-shadow:0 10px 28px rgba(216,31,38,.42)}
.btn-ghost{border:1px solid rgba(227,203,138,.42);color:var(--gold-soft)}
.btn-ghost:hover{background:rgba(227,203,138,.10);border-color:var(--gold-soft)}
.btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-soft{border:1px solid var(--line);background:#fff;color:var(--ink-70)}
.btn-soft:hover{border-color:var(--ink-45);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#2C2224}
.btn-gold{background:var(--gold);color:var(--burgundy-ink)}
.btn-gold:hover{background:#D9B33A}

.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--ink-70);
  transition:background .2s,color .2s;position:relative;flex:none}
.icon-btn:hover{background:var(--cream-2);color:var(--ink)}
.icon-btn.sq{border:1px solid var(--line);background:#fff;width:42px;height:42px}
.icon-btn.sq:hover{border-color:var(--red);color:var(--red);background:#fff}
.icon-btn.is-on{color:var(--red);border-color:var(--red)}
.pill{position:absolute;top:2px;inset-inline-start:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:"Alexandria"}
.pill.red{background:var(--red)}
.pill:empty,.pill[data-zero]{display:none}

/* ---------- badges / chips ---------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:"Alexandria";font-size:var(--t-cap);font-weight:600;
  padding:5px 11px;border-radius:var(--r-full);background:var(--cream-2);color:var(--ink-70)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.err{background:var(--err-bg);color:var(--err)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.gold{background:var(--gold-pale);color:#7A5F0B}

/* ---------- topbar / header --------------------------------- */
.topbar{background:var(--burgundy-ink);color:rgba(248,241,231,.82);font-size:var(--t-cap)}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:38px;text-align:center;flex-wrap:wrap;padding-block:6px}
.topbar b{color:var(--gold-soft);font-weight:600}
.topbar span{display:inline-flex;align-items:center;gap:6px}
.topbar .ic{width:15px;height:15px;opacity:.7}
.topbar .sep{opacity:.35}
.topbar .tb-link:hover{color:var(--gold-soft)}
@media(max-width:820px){.topbar .sep,.topbar span:nth-child(3),.topbar .tb-link{display:none}}

.header{position:sticky;top:0;z-index:60;background:rgba(248,241,231,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.header>.wrap{display:flex;align-items:center;gap:var(--s3);height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .pyr{width:44px;color:var(--red)}
.brand-txt{line-height:1.05;display:flex;flex-direction:column}
.brand-txt .n1{font-family:"Alexandria";font-weight:700;font-size:1rem;letter-spacing:.13em}
.brand-txt .n2{font-size:9px;letter-spacing:.3em;color:var(--ink-45);font-weight:500}
.nav-toggle{display:grid}
@media(min-width:1100px){.nav-toggle{display:none}}
.nav{display:none;gap:var(--s3);margin-inline-start:var(--s2)}
@media(min-width:1100px){.nav{display:flex}}
.nav a{font-size:var(--t-lab);font-weight:500;color:var(--ink-70);padding:6px 0;position:relative;transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.is-hot{color:var(--red);font-weight:600}
.htools{margin-inline-start:auto;display:flex;align-items:center;gap:2px}
@media(max-width:640px){.hide-sm{display:none}}

/* mega menu */
.mega{position:absolute;inset-inline:0;top:100%;background:var(--cream-3);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s var(--ease),visibility .22s;z-index:59}
.mega.on{opacity:1;visibility:visible;transform:none}
@media(max-width:1099px){.mega{display:none}}
.mega-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--s5);padding-block:var(--s5)}
.mega-col .mega-h{font-family:"Alexandria";font-size:var(--t-cap);font-weight:600;letter-spacing:.1em;color:var(--ink-45);
  text-transform:uppercase;margin-bottom:var(--s2)}
.mega-col ul{list-style:none;display:grid;gap:10px}
.mega-col li a{font-size:var(--t-lab);color:var(--ink-70);transition:color .2s,padding .2s;display:block}
.mega-col li a:hover{color:var(--red);padding-inline-start:5px}
.mega-intro .mega-name{font-family:"Alexandria";font-weight:700;line-height:1.25;font-size:var(--t-h4);margin-top:var(--s2)}
.mega-desc{font-size:var(--t-lab);color:var(--ink-45);line-height:1.75;margin-top:10px;margin-bottom:var(--s3)}

/* two worlds bar */
.worlds{background:var(--cream-2);border-bottom:1px solid var(--line)}
.worlds .wrap{display:grid;grid-template-columns:1fr 1fr}
.world{padding:var(--s2) var(--s3);text-align:center;position:relative;transition:background .25s ease;display:block}
.world+.world{border-inline-start:1px solid var(--line)}
.world:hover{background:rgba(255,255,255,.6)}
.world b{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;display:block}
.world span{font-size:11px;color:var(--ink-45)}
.world::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--w,var(--red));
  transform:scaleX(0);transition:transform .3s var(--ease)}
.world:hover::after{transform:scaleX(1)}
.world.w-cook{--w:var(--burgundy)} .world.w-cook b{color:var(--burgundy)}
.world.w-home{--w:var(--red)} .world.w-home b{color:var(--red)}

/* search panel */
.search-panel{position:fixed;inset-inline:0;top:0;z-index:95;background:var(--cream);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);transform:translateY(-102%);transition:transform .35s var(--ease);padding-block:var(--s4)}
body.search-on .search-panel{transform:none}
.search-form{display:flex;align-items:center;gap:var(--s2);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:6px 6px 6px var(--s2);height:58px}
.search-form .ic{color:var(--ink-45)}
/* [type="search"] is here for SPECIFICITY, not matching: the base input rule in the
   forms section is (0,1,1) and declared later, so a plain `.search-form input` would
   lose to it and the field would get its own border/background inside this bar. */
.search-form input[type="search"]{flex:1;border:0;background:none;height:auto;
  font-family:inherit;font-size:var(--t-body);color:var(--ink);min-width:0;padding:0}
.search-form input:focus{outline:none}
.search-sugg{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;margin-top:var(--s3);font-size:var(--t-cap);color:var(--ink-45)}
.search-sugg a{border:1px solid var(--line);border-radius:var(--r-full);padding:5px 12px;background:#fff;transition:all .2s}
.search-sugg a:hover{border-color:var(--red);color:var(--red)}
.search-live{margin-top:var(--s3);max-height:46vh;overflow-y:auto;display:grid;gap:6px}
.sl-item{display:flex;align-items:center;gap:var(--s2);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px;transition:border-color .2s}
.sl-item:hover{border-color:var(--red)}
.sl-item img{width:48px;height:48px;object-fit:contain;background:var(--cream-3);border-radius:4px;flex:none}
.sl-item b{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;display:block}
.sl-item small{color:var(--ink-45);font-size:var(--t-cap)}
.sl-item .pr{margin-inline-start:auto;font-family:"Alexandria";font-weight:700;color:var(--red);white-space:nowrap}

/* mobile nav
   Both off-canvas panels are pinned with inset-inline-end:0 — physical LEFT in RTL,
   physical RIGHT in LTR. transform is always physical (+X = right) and ignores dir,
   so the hidden offset must flip with direction: --off. Do not hard-code it. */
.off-canvas,.mobile-nav,.drawer{--off:-100%}
[dir="ltr"] .off-canvas,[dir="ltr"] .mobile-nav,[dir="ltr"] .drawer{--off:100%}

.mobile-nav{position:fixed;inset-block:0;inset-inline-end:0;width:min(340px,88vw);background:var(--cream);z-index:96;
  transform:translateX(var(--off));visibility:hidden;
  transition:transform .35s var(--ease),visibility .35s;overflow-y:auto;padding:var(--s3);
  border-inline-start:1px solid var(--line)}
body.nav-on .mobile-nav{transform:translateX(0);visibility:visible}
@media(min-width:1100px){.mobile-nav{display:none}}
.mn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3)}
.mn-title{font-family:"Alexandria";font-weight:700;font-size:var(--t-h4)}
.mn-lines{display:grid;gap:var(--s1);margin-bottom:var(--s3)}
.mn-lines a{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2)}
.mn-lines b{font-family:"Alexandria";font-size:var(--t-lab);display:block}
.mn-lines small{color:var(--ink-45);font-size:11px}
.mn-list{list-style:none;display:grid}
.mn-list li a{display:block;padding:12px 4px;font-size:var(--t-lab);color:var(--ink-70);border-bottom:1px solid var(--line-2)}
.mn-list li a:hover{color:var(--red)}
.mn-sec{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.mn-sec li a{color:var(--ink-45);font-size:var(--t-cap)}

.scrim{position:fixed;inset:0;background:rgba(26,19,21,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
/* every overlay that can be open must appear here, or its scrim stays
   pointer-events:none and tapping outside cannot dismiss it (anav-on = admin sidebar) */
body.nav-on .scrim,body.drawer-on .scrim,body.search-on .scrim,
body.modal-on .scrim,body.anav-on .scrim{opacity:1;pointer-events:auto}
/* lock the page behind any open overlay; padding-right replaces the scrollbar
   width so the layout does not jump when it disappears */
body.is-locked{overflow:hidden;padding-inline-end:var(--sbw,0px)}

/* ---------- hero -------------------------------------------- */
.hero{position:relative;background:var(--burgundy);color:var(--cream);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 15%,rgba(216,31,38,.42) 0%,transparent 58%),
             radial-gradient(80% 70% at 78% 92%,rgba(201,162,39,.20) 0%,transparent 60%)}
.hero .wrap{position:relative;display:grid;gap:var(--s6);padding-block:var(--s10) var(--s12);align-items:center}
@media(min-width:1000px){.hero .wrap{grid-template-columns:1.05fr .95fr;padding-block:var(--s12) var(--s14);gap:var(--s8)}}
.hero h1{font-size:var(--t-h1);margin-top:var(--s3);font-weight:800;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--gold-soft)}
.hero-sub{margin-top:var(--s3);font-size:var(--t-lead);color:rgba(248,241,231,.76);max-width:46ch;line-height:1.65}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.hero-seal-row{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(227,203,138,.2)}
.hero-seal-row p{font-size:var(--t-lab);color:rgba(248,241,231,.62);line-height:1.6;max-width:34ch}
.hero-fig{position:relative}
.hero-fig .plate{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(70% 60% at 50% 38%,rgba(255,255,255,.16) 0%,transparent 62%),
             linear-gradient(155deg,#7C1823 0%,#4A0C13 100%);
  border:1px solid rgba(227,203,138,.18)}
.hero-fig img{width:88%;object-fit:contain;filter:drop-shadow(0 30px 46px rgba(0,0,0,.5))}
.price-tag{position:absolute;inset-inline-start:-8px;bottom:26px;background:var(--cream);color:var(--ink);
  border-radius:var(--r-sm);padding:var(--s2) var(--s3);box-shadow:var(--shadow-md);min-width:190px}
.price-tag .pt-lab{font-size:11px;color:var(--ink-45)}
.price-tag .pt-name{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;margin-top:2px;line-height:1.4}
.price-tag .pt-price{font-family:"Alexandria";font-size:var(--t-h4);font-weight:800;color:var(--red);margin-top:6px}
.price-tag .pt-old{font-size:var(--t-cap);color:var(--ink-45);text-decoration:line-through;margin-inline-start:6px;font-weight:400}

/* ---------- marks / stats ----------------------------------- */
.marks{background:var(--ink);color:var(--cream)}
.marks .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(248,241,231,.10)}
@media(min-width:860px){.marks .wrap{grid-template-columns:repeat(4,1fr)}}
.mark{background:var(--ink);padding:var(--s4) var(--s3);text-align:center}
.mark .m-big{font-family:"Alexandria";font-size:var(--t-h3);font-weight:800;color:var(--gold-soft);line-height:1}
.mark .m-lab{font-size:var(--t-cap);color:rgba(248,241,231,.58);margin-top:8px}

/* ---------- material cards ---------------------------------- */
.mat-grid{display:grid;gap:var(--s3)}
@media(min-width:820px){.mat-grid{grid-template-columns:repeat(3,1fr)}}
.mat{position:relative;border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--line);
  padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;text-align:start;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.mat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.mat::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--accent)}
.mat .pyr{width:30px;color:var(--accent)}
.mat h3{font-size:var(--t-h4);margin-top:var(--s3)}
.mat .m-en{font-family:"Alexandria";font-size:11px;letter-spacing:.18em;color:var(--ink-45);margin-top:6px;font-weight:500}
.mat p{color:var(--ink-45);font-size:var(--t-lab);margin-top:var(--s2);line-height:1.7;flex:1}
.mat .m-war{margin-top:var(--s3);padding-top:var(--s3);border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.mat .m-war b{font-family:"Alexandria";font-size:var(--t-lab);font-weight:700;color:var(--accent)}
.mat .m-war span{font-size:var(--t-cap);color:var(--ink-45)}

/* ---------- product cards ----------------------------------- */
.p-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.p-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.p-grid{grid-template-columns:repeat(4,1fr)}}
.p-grid.cols-3{grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.p-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-align:start;
  display:flex;flex-direction:column;width:100%;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
  position:relative}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.card-media{position:relative;aspect-ratio:1/1;overflow:hidden;display:block;
  background:linear-gradient(160deg,#EEF1F3,#DDE3E7)}
.card--home .card-media{background:linear-gradient(160deg,#FBF6EF,#F0E2D2)}
.card-media img{width:100%;height:100%;object-fit:contain;padding:var(--s3);transition:transform .5s var(--ease)}
.card:hover .card-media img{transform:scale(1.06)}
.card-flag{position:absolute;top:var(--s2);inset-inline-start:var(--s2);background:var(--burgundy);color:var(--gold-soft);
  font-family:"Alexandria";font-size:10px;font-weight:600;letter-spacing:.08em;padding:5px 9px;border-radius:3px}
.card--home .card-flag{background:var(--red);color:#fff}
.card-flag.sale{background:var(--red);color:#fff}
.card-out{position:absolute;inset:0;background:rgba(248,241,231,.72);display:grid;place-items:center;
  font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;color:var(--ink-45)}
.card-low{position:absolute;bottom:var(--s2);inset-inline-start:var(--s2);background:var(--warn-bg);color:var(--warn);
  font-size:10px;font-weight:600;padding:4px 8px;border-radius:3px;font-family:"Alexandria"}
.card-body{padding:var(--s3);display:flex;flex-direction:column;flex:1}
.card-cat{font-size:11px;color:var(--ink-45)}
.card-name{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;line-height:1.55;margin-top:6px}
.card-name a::after{content:"";position:absolute;inset:0;z-index:1}
.card-rate{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:11px;color:var(--ink-45)}
.card-rate .st{width:13px;height:13px;color:var(--gold);fill:var(--gold)}
.card-rate b{font-family:"Alexandria";color:var(--ink-70)}
.card-price{display:flex;align-items:baseline;gap:var(--s1);margin-top:var(--s2);flex-wrap:wrap}
.card-price .now{font-family:"Alexandria";font-size:var(--t-h4);font-weight:800}
.card-price .cur{font-size:var(--t-cap);color:var(--ink-45)}
.card-price .was{font-size:var(--t-cap);color:var(--ink-45);text-decoration:line-through}
.card-meta{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--ink-45);flex:1}
.card-meta .pyr{width:12px;color:var(--gold);flex:none}
.card-act{display:flex;gap:6px;margin-top:var(--s3);position:relative;z-index:2}
.card-act .btn{flex:1}
.card.is-out .card-media img{opacity:.5}

/* ---------- heritage ---------------------------------------- */
.heritage{background:var(--burgundy-ink);color:var(--cream);position:relative;overflow:hidden}
.heritage::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 88% 10%,rgba(216,31,38,.30) 0%,transparent 60%)}
.heritage .wrap{position:relative;display:grid;gap:var(--s6);padding-block:var(--s12);align-items:center}
@media(min-width:900px){.heritage .wrap{grid-template-columns:.95fr 1.05fr;gap:var(--s10)}}
.her-year{font-family:"Alexandria";font-size:clamp(4.5rem,13vw,9rem);font-weight:800;line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px rgba(227,203,138,.55);letter-spacing:-.03em}
.her-year span{-webkit-text-stroke:0;color:var(--gold-soft)}
.heritage h2{font-size:var(--t-h2);margin-top:var(--s5)}
.heritage p{color:rgba(248,241,231,.72);margin-top:var(--s3);line-height:1.85;max-width:56ch}
.heritage p b{color:var(--gold-soft);font-weight:600}
.her-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s5)}
.her-facts div{border-inline-start:2px solid rgba(227,203,138,.3);padding-inline-start:var(--s2)}
.her-facts b{display:block;font-family:"Alexandria";font-size:var(--t-h4);font-weight:700;color:var(--gold-soft)}
.her-facts span{font-size:var(--t-cap);color:rgba(248,241,231,.55)}
.storefront{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(227,203,138,.22);position:relative;margin:0;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  display:grid;place-items:center;aspect-ratio:3/2;padding:var(--s4)}
.storefront img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.storefront figcaption{position:absolute;inset-inline:0;bottom:0;padding:var(--s5) var(--s3) var(--s2);
  background:linear-gradient(to top,rgba(20,4,7,.92),transparent);font-size:var(--t-cap);color:rgba(248,241,231,.8)}

/* ---------- switch band / home world ------------------------ */
.switchband{position:relative;overflow:hidden;background:var(--cream-2)}
.switchband .wrap{position:relative;display:grid;gap:var(--s6);padding-block:var(--s12);align-items:center}
@media(min-width:900px){.switchband .wrap{grid-template-columns:1fr 1fr;gap:var(--s8)}}
.switchband h2{font-size:var(--t-h2);margin-top:var(--s2)}
.switchband p{color:var(--ink-70);margin-top:var(--s3);line-height:1.85;max-width:50ch}
.switch-fig{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);margin:0;
  background:linear-gradient(160deg,var(--cream-3),var(--cream-2));display:grid;place-items:center;
  aspect-ratio:16/10;padding:var(--s4)}
.switch-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.switch-note{margin-top:var(--s4);padding:var(--s3);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);font-size:var(--t-lab);color:var(--ink-70);line-height:1.75}
.switch-note b{font-family:"Alexandria";color:var(--ink)}
.home-world{background:var(--cream-3)}
.hc-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.hc-grid{grid-template-columns:repeat(4,1fr)}}
/* 4/5 portrait crushed landscape sources; 1/1 keeps the subject visible */
.hc{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;display:flex;align-items:flex-end;
  padding:var(--s3);color:#fff;transition:transform .3s var(--ease)}
.hc:hover{transform:translateY(-4px)}
.hc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.hc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,19,21,.82) 0%,rgba(26,19,21,.12) 55%,transparent 100%)}
.hc:hover img{transform:scale(1.07)}
.hc-t{position:relative;z-index:1;font-family:"Alexandria";font-weight:600;font-size:var(--t-lab)}
.hc-t small{display:block;font-weight:400;font-size:11px;opacity:.78;margin-top:3px;font-family:"IBM Plex Sans Arabic"}

/* ---------- page head banner -------------------------------- */
.page-head{background:var(--ink);color:var(--cream);padding-block:var(--s8)}
.page-head h1{font-size:var(--t-h2)}
.page-head p{color:rgba(248,241,231,.6);margin-top:10px;font-size:var(--t-lab);max-width:70ch;line-height:1.75}
.page-head .eyebrow{color:var(--gold-soft)}
.page-head.burgundy{background:var(--burgundy)}
.page-head.burgundy::before{content:"";position:absolute;inset:0}
.page-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}

/* ---------- shop / filters ---------------------------------- */
.shop-grid{display:grid;gap:var(--s5);padding-block:var(--s6) var(--s12)}
@media(min-width:960px){.shop-grid{grid-template-columns:260px 1fr;gap:var(--s6)}}
.filters{align-self:start}
@media(min-width:960px){.filters{position:sticky;top:calc(var(--hdr-h) + 20px);max-height:calc(100vh - 110px);overflow-y:auto;padding-inline-end:4px}}
.fgroup{border-bottom:1px solid var(--line);padding-block:var(--s3)}
.fgroup:first-child{padding-top:0}
.fgroup .fgroup-h{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;margin-bottom:var(--s2)}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:var(--t-lab);color:var(--ink-70);transition:color .2s}
.fopt:hover{color:var(--ink)}
.fopt input{appearance:none;width:17px;height:17px;border:1.5px solid var(--line);border-radius:4px;flex:none;
  display:grid;place-items:center;transition:all .18s ease;background:#fff}
.fopt input:checked{background:var(--red);border-color:var(--red)}
/* A tick is a glyph, not text — it must NOT mirror in RTL. Drawn as a bottom+left
   corner rotated -45deg, so these borders stay PHYSICAL. Using border-inline-end
   here leaves bottom+right instead, which renders as a ">" chevron in RTL. */
.fopt input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px)}
.fopt .n{margin-inline-start:auto;font-size:11px;color:var(--ink-45)}
.fopt.line-cook input:checked{background:var(--burgundy);border-color:var(--burgundy)}
.price-chips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;font-size:var(--t-cap);
  color:var(--ink-70);transition:all .2s}
.pchip:hover{border-color:var(--ink-45)}
.pchip[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.toolbar .count{font-size:var(--t-lab);color:var(--ink-45)}
.toolbar select{margin-inline-start:auto;height:42px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  padding:0 var(--s2);font-family:inherit;font-size:var(--t-lab);color:var(--ink-70);cursor:pointer}
.filter-open{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 var(--s3);border:1px solid var(--ink);
  border-radius:var(--r-sm);font-size:var(--t-lab);font-weight:500}
@media(min-width:960px){.filter-open{display:none}}
.active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s3)}
.achip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:6px 12px;font-size:var(--t-cap);transition:border-color .2s}
.achip:hover{border-color:var(--red);color:var(--red)}
.clear-all{font-size:var(--t-cap);color:var(--red);text-decoration:underline;text-underline-offset:3px}
.empty{text-align:center;padding:var(--s12) var(--s3);border:1px dashed var(--line);border-radius:var(--r-md);background:#fff}
.empty .pyr{width:40px;color:var(--line);margin:0 auto var(--s3)}
.empty h2{font-size:var(--t-h4)} .empty p{color:var(--ink-45);margin-top:10px;font-size:var(--t-lab)}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(340px,86vw);background:var(--cream);z-index:96;
  transform:translateX(var(--off));visibility:hidden;
  transition:transform .35s var(--ease),visibility .35s;overflow-y:auto;padding:var(--s3)}
body.drawer-on .drawer{transform:translateX(0);visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.drawer-head .drawer-title{font-family:"Alexandria";font-weight:700;font-size:var(--t-h4)}
@media(min-width:960px){.drawer{display:none}}

/* pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:var(--s8);flex-wrap:wrap}
/* pages are <button> now (real client-side paging), not href="#" stubs */
.pager a,.pager span,.pager button{min-width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);font-family:"Alexandria";
  font-size:var(--t-lab);font-weight:600;color:var(--ink-70);transition:all .2s;padding:0 12px}
.pager a:hover,.pager button:not(:disabled):hover{border-color:var(--red);color:var(--red)}
.pager .is-cur{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pager .is-off,.pager button:disabled{opacity:.4;pointer-events:none}

/* category tiles */
.cat-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.cat-grid{grid-template-columns:repeat(5,1fr)}}
.cat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);
  display:flex;flex-direction:column;gap:8px;transition:all .3s var(--ease)}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.cat-tile .pyr{width:22px;color:var(--gold)}
.cat-tile b{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600}
.cat-tile small{color:var(--ink-45);font-size:11px;line-height:1.6;flex:1}
.cat-tile .n{font-size:11px;color:var(--red);font-weight:600;font-family:"Alexandria"}

/* ---------- breadcrumb -------------------------------------- */
.crumb{padding-block:var(--s3);font-size:var(--t-cap);color:var(--ink-45);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--red)} .crumb .sep{opacity:.45}

/* ---------- PDP --------------------------------------------- */
.pdp-grid{display:grid;gap:var(--s6);padding-bottom:var(--s10)}
@media(min-width:980px){.pdp-grid{grid-template-columns:1.1fr .9fr;gap:var(--s8);align-items:start}}
.gal-main{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  display:grid;place-items:center;background:linear-gradient(160deg,#EEF1F3,#DDE3E7)}
body[data-line="home"] .gal-main{background:linear-gradient(160deg,#FBF6EF,#F0E2D2)}
.gal-main img{width:100%;height:100%;object-fit:contain;padding:var(--s5)}
.gal-thumbs{display:flex;gap:var(--s1);margin-top:var(--s2);overflow-x:auto;padding-bottom:4px}
.thumb{width:78px;height:78px;flex:none;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:#FBF6EF;transition:border-color .2s,transform .2s}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.thumb:hover{transform:translateY(-2px)}
.thumb[aria-current="true"]{border-color:var(--red);border-width:2px}
@media(min-width:980px){.pdp-info{position:sticky;top:calc(var(--hdr-h) + 24px)}}
.pdp-flag{display:inline-block;background:var(--burgundy);color:var(--gold-soft);font-family:"Alexandria";font-size:10px;
  font-weight:600;letter-spacing:.1em;padding:6px 11px;border-radius:3px}
body[data-line="home"] .pdp-flag{background:var(--red);color:#fff}
.pdp-info h1{font-size:clamp(1.5rem,3.6vw,2rem);margin-top:var(--s3);line-height:1.4}
.pdp-sku{font-size:var(--t-cap);color:var(--ink-45);margin-top:10px;display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.pdp-rate{display:flex;align-items:center;gap:5px;font-size:var(--t-cap);color:var(--ink-45)}
.pdp-rate .st{width:15px;height:15px;color:var(--gold);fill:var(--gold)}
.pdp-price{display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.pdp-price .now{font-family:"Alexandria";font-size:2rem;font-weight:800;line-height:1}
.pdp-price .cur,.pdp-price .was{font-size:var(--t-lab);color:var(--ink-45)}
.pdp-price .was{text-decoration:line-through}
.pdp-save{font-size:var(--t-cap);color:var(--ok);font-weight:600;background:var(--ok-bg);padding:4px 9px;border-radius:99px}
.pdp-stock{margin-top:var(--s2);font-size:var(--t-cap);display:flex;align-items:center;gap:6px}
.pdp-stock .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.pdp-stock.low .dot{background:var(--warn)} .pdp-stock.low{color:var(--warn)}
.pdp-stock.out .dot{background:var(--err)} .pdp-stock.out{color:var(--err)}
.pdp-desc{margin-top:var(--s4);color:var(--ink-70);line-height:1.85;font-size:var(--t-lab)}
.pdp-list{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:10px;font-size:var(--t-lab);color:var(--ink-70)}
.pdp-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.7}
.pdp-list .pyr{width:11px;color:var(--red);margin-top:7px;flex:none}
.pdp-list b{color:var(--ink);font-weight:600}
.sizes-lab{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;margin-top:var(--s5);display:flex;
  justify-content:space-between;align-items:center;gap:var(--s2)}
.sizes-lab a{font-size:var(--t-cap);color:var(--red);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.sizes-note{font-size:var(--t-cap);color:var(--ink-45);margin-top:4px}
.sizes{display:flex;gap:8px;margin-top:var(--s2);flex-wrap:wrap}
.size{min-width:52px;height:52px;padding:0 var(--s2);border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  font-family:"Alexandria";font-weight:600;font-size:var(--t-lab);display:grid;place-items:center;transition:all .2s}
.size small{display:block;font-size:9px;font-weight:400;color:var(--ink-45);margin-top:1px}
.size:hover{border-color:var(--ink-45)}
.size[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.size[aria-pressed="true"] small{color:rgba(248,241,231,.6)}
.buy{display:flex;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.buy .btn{flex:1;min-width:180px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;flex:none}
.qty button{width:46px;height:52px;font-size:var(--t-h4);color:var(--ink-45);transition:color .2s}
.qty button:hover{color:var(--ink)}
/* [type="number"] is here for SPECIFICITY (see the note on the base input rule):
   type="number" IS in that rule's list, so a plain `.qty input` would lose to it and
   the field would stretch to width:100% with its own border inside the stepper. */
.qty span,.qty input[type="number"]{width:44px;text-align:center;font-family:"Alexandria";font-weight:700;
  border:0;background:none;height:auto;padding:0;font-size:var(--t-lab);color:inherit;
  -moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:none}
.buy-sec{display:flex;gap:var(--s2);margin-top:var(--s2)}
.buy-sec .btn{flex:1}
.assure{margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.assure-row{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3);border-bottom:1px solid var(--line)}
.assure-row:last-child{border-bottom:0}
.assure-row .ic{color:var(--red);margin-top:2px}
.assure-row b{display:block;font-family:"Alexandria";font-size:var(--t-lab);font-weight:600}
.assure-row p{font-size:var(--t-cap);color:var(--ink-45);margin-top:3px;line-height:1.6}
.warranty-band{margin-top:var(--s5);background:var(--burgundy);color:var(--cream);border-radius:var(--r-md);
  padding:var(--s4);display:flex;gap:var(--s3);align-items:center}
.warranty-band .seal{--sz:82px}
.warranty-band b{font-family:"Alexandria";font-size:var(--t-lab);display:block}
.warranty-band p{font-size:var(--t-cap);color:rgba(248,241,231,.7);margin-top:6px;line-height:1.7}
.warranty-band a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px}

/* PDP tabs */
.tabs{margin-top:var(--s10);border-top:1px solid var(--line)}
.tabnav{display:flex;gap:var(--s4);overflow-x:auto;border-bottom:1px solid var(--line)}
.tabnav button{padding:var(--s3) 2px;font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;color:var(--ink-45);
  border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s}
.tabnav button[aria-selected="true"]{color:var(--ink);border-color:var(--red)}
.tabpanel{padding-block:var(--s5)}
.spec{width:100%;font-size:var(--t-lab);max-width:760px}
.spec caption{text-align:start;font-family:"Alexandria";font-weight:600;font-size:var(--t-h4);padding-bottom:var(--s3)}
.spec th,.spec td{padding:14px var(--s2);border-bottom:1px solid var(--line);text-align:start}
.spec th{color:var(--ink-45);font-weight:500;width:44%}
.spec td{font-weight:500}

/* FBT */
.fbt{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin-top:var(--s8)}
.fbt h2{font-size:var(--t-h4);margin-bottom:var(--s3)}
.fbt-row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.fbt-item{display:flex;flex-direction:column;gap:6px;width:132px}
.fbt-item img{width:132px;height:132px;object-fit:contain;background:var(--cream-3);border-radius:var(--r-sm);border:1px solid var(--line)}
.fbt-item small{font-size:11px;line-height:1.5;color:var(--ink-70)}
.fbt-item b{font-family:"Alexandria";font-size:var(--t-cap);color:var(--red)}
.fbt-plus{font-size:var(--t-h3);color:var(--ink-25);font-weight:300}
.fbt-sum{margin-inline-start:auto;text-align:start;min-width:200px}
.fbt-sum .tot{font-family:"Alexandria";font-size:var(--t-h3);font-weight:800}
.fbt-sum small{display:block;color:var(--ink-45);font-size:var(--t-cap);margin-bottom:var(--s2)}
@media(max-width:760px){.fbt-sum{margin-inline-start:0;width:100%}}

/* reviews */
.rev-sum{display:grid;gap:var(--s4);align-items:center;margin-bottom:var(--s5)}
@media(min-width:760px){.rev-sum{grid-template-columns:200px 1fr}}
.rev-big{text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}
.rev-big .n{font-family:"Alexandria";font-size:3rem;font-weight:800;line-height:1}
.rev-stars{display:flex;gap:2px;justify-content:center;margin-top:8px}
.rev-stars .ic{width:16px;height:16px;color:var(--gold);fill:var(--gold)}
.rev-bars{display:grid;gap:8px}
.rev-bar{display:flex;align-items:center;gap:10px;font-size:var(--t-cap);color:var(--ink-45)}
.rev-bar .track{flex:1;height:7px;background:var(--cream-2);border-radius:99px;overflow:hidden}
.rev-bar .fill{height:100%;background:var(--gold)}
.rev{border-top:1px solid var(--line);padding-block:var(--s3)}
.rev-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.rev-head b{font-family:"Alexandria";font-size:var(--t-lab)}
.rev-head time{font-size:var(--t-cap);color:var(--ink-45);margin-inline-start:auto}
.rev p{margin-top:8px;font-size:var(--t-lab);color:var(--ink-70);line-height:1.8}

/* sits directly on top of the tab bar, never over it */
.mobile-buy{position:fixed;inset-inline:0;bottom:var(--stack-b);z-index:70;
  background:rgba(248,241,231,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:12px var(--s2);display:none;gap:var(--s2);align-items:center}
body[data-page="pdp"] .mobile-buy{display:flex}
.mobile-buy .mb-p b{font-family:"Alexandria";font-weight:800;display:block;line-height:1.2}
.mobile-buy .mb-p small{color:var(--ink-45);font-size:11px}
.mobile-buy .btn{flex:1}
@media(min-width:980px){body[data-page="pdp"] .mobile-buy{display:none}}

/* ---------- forms ------------------------------------------- */
.field{display:block;margin-bottom:var(--s3)}
.field>label,.lbl{display:block;font-family:"Alexandria";font-size:var(--t-cap);font-weight:600;margin-bottom:7px;color:var(--ink-70)}
.field .req{color:var(--red)}
/* `input:not([type])` is load-bearing: an <input> with no type attribute renders as
   text but does NOT match input[type="text"], so it would drop out of this rule and
   fall back to the browser default. Every selector here is (0,1,1); component-level
   overrides declared EARLIER in this file must therefore be (0,2,1) or higher to win
   (see .search-form input[type="search"]). */
.inp,input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="password"],
input[type="search"],input[type="date"],input[type="datetime-local"],input[type="time"],
input[type="url"],input[type="number"],select,textarea{
  width:100%;height:50px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);
  padding:0 var(--s2);font-family:inherit;font-size:var(--t-lab);color:var(--ink);transition:border-color .2s,box-shadow .2s}
textarea{height:auto;min-height:130px;padding:var(--s2);line-height:1.8;resize:vertical}
select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C6E70' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;background-size:18px;padding-inline-end:var(--s2);padding-inline-start:42px}
.inp:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(216,31,38,.10)}
.inp::placeholder,input::placeholder,textarea::placeholder{color:var(--ink-mute)}
.hint{font-size:11px;color:var(--ink-45);margin-top:6px;line-height:1.6}
.err-msg{font-size:11px;color:var(--err);margin-top:6px;display:none}
.field.has-err .inp,.field.has-err input,.field.has-err select{border-color:var(--err)}
.field.has-err .err-msg{display:block}
.form-row{display:grid;gap:var(--s3)}
@media(min-width:640px){.form-row.c2{grid-template-columns:1fr 1fr}.form-row.c3{grid-template-columns:repeat(3,1fr)}}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--t-lab);color:var(--ink-70);cursor:pointer;line-height:1.7}
.check input{appearance:none;width:19px;height:19px;border:1.5px solid var(--line);border-radius:4px;flex:none;
  background:#fff;display:grid;place-items:center;transition:all .18s;margin-top:2px}
.check input:checked{background:var(--red);border-color:var(--red)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input[type="radio"]{border-radius:50%}
.check input[type="radio"]:checked::after{width:8px;height:8px;border:0;background:#fff;border-radius:50%;transform:none}
.card-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.card-box+.card-box{margin-top:var(--s3)}
.card-box h2,.card-box h3{font-size:var(--t-h4);margin-bottom:var(--s3)}
.box-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.box-head h2,.box-head h3{margin-bottom:0}

/* radio card (payment/shipping choice) */
.opt-card{display:flex;align-items:flex-start;gap:var(--s2);border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);padding:var(--s3);cursor:pointer;transition:all .2s;margin-bottom:10px}
.opt-card:hover{border-color:var(--ink-45)}
.opt-card:has(input:checked){border-color:var(--red);background:#FFFCFC;box-shadow:0 0 0 1px var(--red) inset}
.opt-card input{appearance:none;width:19px;height:19px;border:1.5px solid var(--line);border-radius:50%;flex:none;
  background:#fff;display:grid;place-items:center;transition:all .18s;margin-top:2px}
.opt-card input:checked{border-color:var(--red);border-width:6px}
.opt-card b{font-family:"Alexandria";font-size:var(--t-lab);display:block}
.opt-card small{display:block;color:var(--ink-45);font-size:var(--t-cap);margin-top:4px;line-height:1.6}
.opt-card .price{margin-inline-start:auto;font-family:"Alexandria";font-weight:700;white-space:nowrap}

/* ---------- auth pages -------------------------------------- */
.auth{min-height:60vh;display:grid;place-items:center;padding-block:var(--s10)}
.auth-box{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s6) var(--s5);box-shadow:var(--shadow-sm)}
.auth-box h1{font-size:var(--t-h3);text-align:center}
.auth-box>p{text-align:center;color:var(--ink-45);font-size:var(--t-lab);margin-top:10px;margin-bottom:var(--s5)}
.auth-alt{text-align:center;margin-top:var(--s4);font-size:var(--t-lab);color:var(--ink-45)}
.auth-alt a{color:var(--red);font-weight:600}
.auth-sep{display:flex;align-items:center;gap:var(--s2);margin-block:var(--s4);color:var(--ink-25);font-size:var(--t-cap)}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- cart / checkout --------------------------------- */
.two-col{display:grid;gap:var(--s5);padding-block:var(--s6) var(--s12)}
@media(min-width:980px){.two-col{grid-template-columns:1fr 380px;gap:var(--s6);align-items:start}}
@media(min-width:980px){.side-sticky{position:sticky;top:calc(var(--hdr-h) + 24px)}}
.cart-item{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cart-item:first-child{padding-top:0}
.cart-item img{width:96px;height:96px;object-fit:contain;background:var(--cream-3);border:1px solid var(--line);border-radius:var(--r-sm)}
.ci-body{display:flex;flex-direction:column;gap:6px}
.ci-name{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;line-height:1.5}
.ci-meta{font-size:var(--t-cap);color:var(--ink-45)}
.ci-foot{display:flex;align-items:center;gap:var(--s2);margin-top:auto;flex-wrap:wrap}
.ci-price{font-family:"Alexandria";font-weight:800;font-size:var(--t-h5);margin-inline-start:auto}
.ci-rm{font-size:var(--t-cap);color:var(--ink-45);display:inline-flex;align-items:center;gap:5px}
.ci-rm:hover{color:var(--err)}
.qty.sm button{width:36px;height:40px;font-size:var(--t-body)}
.qty.sm span,.qty.sm input{width:38px;font-size:var(--t-cap)}
.sum-row{display:flex;justify-content:space-between;gap:var(--s2);padding-block:11px;font-size:var(--t-lab);color:var(--ink-70)}
.sum-row b{font-family:"Alexandria"}
.sum-row.tot{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s3);font-size:var(--t-lead);color:var(--ink)}
.sum-row.tot b{font-size:var(--t-h4);font-weight:800}
.sum-row .ok{color:var(--ok)}
.coupon-row{display:flex;gap:8px;margin-top:var(--s3)}
.coupon-row .inp{height:46px}
.ship-bar{margin-top:var(--s3);background:var(--cream-3);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2)}
.ship-bar p{font-size:var(--t-cap);color:var(--ink-70)}
.ship-bar .track{height:6px;background:var(--cream-2);border-radius:99px;overflow:hidden;margin-top:8px}
.ship-bar .fill{height:100%;background:var(--ok);transition:width .4s var(--ease)}
.trust-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);font-size:11px;color:var(--ink-45)}
.trust-row span{display:inline-flex;align-items:center;gap:5px}
.trust-row .ic{width:15px;height:15px;color:var(--ok)}

/* checkout steps */
.steps{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:10px;font-size:var(--t-lab);color:var(--ink-25)}
.step .n{width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;
  font-family:"Alexandria";font-size:var(--t-cap);font-weight:700}
.step.is-on{color:var(--red)} .step.is-on .n{background:var(--red);color:#fff;border-color:var(--red)}
.step.is-done{color:var(--ok)} .step.is-done .n{background:var(--ok);color:#fff;border-color:var(--ok)}
.step-line{flex:1;height:1px;background:var(--line);min-width:20px}

/* order confirmation */
.conf-hero{text-align:center;padding-block:var(--s10) var(--s6)}
.conf-tick{width:88px;height:88px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto var(--s4)}
.conf-tick .ic{width:44px;height:44px;stroke-width:2}
.conf-hero h1{font-size:var(--t-h2)}
.conf-hero p{color:var(--ink-45);margin-top:var(--s2);font-size:var(--t-lead)}
.conf-no{display:inline-block;margin-top:var(--s3);background:var(--ink);color:var(--cream);font-family:"Alexandria";
  font-weight:700;padding:12px var(--s4);border-radius:var(--r-sm);letter-spacing:.05em}
.timeline{display:grid;gap:0;margin-top:var(--s4)}
.tl{display:grid;grid-template-columns:32px 1fr;gap:var(--s2);position:relative;padding-bottom:var(--s4)}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;inset-inline-start:15px;top:28px;bottom:0;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl .dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;
  place-items:center;color:var(--ink-25);z-index:1}
.tl.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.tl.done::before{background:var(--ok)}
.tl.now .dot{border-color:var(--red);color:var(--red)}
.tl b{font-family:"Alexandria";font-size:var(--t-lab);display:block}
.tl small{color:var(--ink-45);font-size:var(--t-cap);display:block;margin-top:3px;line-height:1.6}

/* ---------- account ----------------------------------------- */
.acct-grid{display:grid;gap:var(--s5);padding-block:var(--s6) var(--s12)}
@media(min-width:900px){.acct-grid{grid-template-columns:250px 1fr;gap:var(--s6);align-items:start}}
.acct-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.acct-user{padding:var(--s3);border-bottom:1px solid var(--line);display:flex;gap:var(--s2);align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--burgundy);color:var(--gold-soft);display:grid;
  place-items:center;font-family:"Alexandria";font-weight:700;flex:none}
.acct-user b{font-family:"Alexandria";font-size:var(--t-lab);display:block}
.acct-user small{color:var(--ink-45);font-size:11px}
.acct-nav ul{list-style:none}
.acct-nav li a{display:flex;align-items:center;gap:10px;padding:13px var(--s3);font-size:var(--t-lab);
  color:var(--ink-70);border-bottom:1px solid var(--line-2);transition:all .2s}
.acct-nav li a:hover{background:var(--cream-3);color:var(--ink)}
.acct-nav li a[aria-current="page"]{background:var(--cream-2);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--red)}
[dir="rtl"] .acct-nav li a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--red)}
.acct-nav .ic{width:18px;height:18px;color:var(--ink-45)}
.acct-nav li:last-child a{border-bottom:0;color:var(--err)}
.kpi-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr);margin-bottom:var(--s4)}
@media(min-width:760px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3)}
.kpi .n{font-family:"Alexandria";font-size:var(--t-h3);font-weight:800;line-height:1}
.kpi .l{font-size:var(--t-cap);color:var(--ink-45);margin-top:6px}
.kpi .d{font-size:11px;margin-top:6px;color:var(--ok)}
.kpi .d.dn{color:var(--err)}

/* data table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.tbl{width:100%;font-size:var(--t-lab);min-width:640px}
.tbl th{text-align:start;padding:14px var(--s2);background:var(--cream-3);font-family:"Alexandria";font-size:var(--t-cap);
  font-weight:600;color:var(--ink-45);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:14px var(--s2);border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--cream-3)}
.tbl .num{font-family:"Alexandria";font-weight:700}
.tbl a.lnk{color:var(--red);font-weight:600}
.tbl .thumb-sm{width:44px;height:44px;object-fit:contain;background:var(--cream-3);border:1px solid var(--line);border-radius:4px}
.cell-prod{display:flex;align-items:center;gap:10px;min-width:220px}
.cell-prod b{font-family:"Alexandria";font-size:var(--t-cap);font-weight:600;line-height:1.5;display:block}
.cell-prod small{color:var(--ink-45);font-size:11px}

/* ---------- content pages ----------------------------------- */
.prose{max-width:74ch;font-size:var(--t-lab);line-height:1.95;color:var(--ink-70)}
.prose h2{font-size:var(--t-h3);color:var(--ink);margin-top:var(--s6);margin-bottom:var(--s2)}
.prose h3{font-size:var(--t-h4);color:var(--ink);margin-top:var(--s5);margin-bottom:var(--s2)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:var(--s3)}
.prose ul,.prose ol{margin:0 0 var(--s3);padding-inline-start:var(--s3);display:grid;gap:10px}
.prose li{list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose blockquote{border-inline-start:3px solid var(--gold);padding-inline-start:var(--s3);margin:var(--s4) 0;
  color:var(--ink);font-style:normal}
.prose table{width:100%;margin-bottom:var(--s4);font-size:var(--t-cap)}
.prose th,.prose td{padding:11px var(--s2);border-bottom:1px solid var(--line);text-align:start}
.prose th{background:var(--cream-3);font-family:"Alexandria";font-weight:600;color:var(--ink)}

.toc{background:var(--cream-3);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s5)}
.toc h2{font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;margin-bottom:var(--s2);margin-top:0}
.toc ul{list-style:none;display:grid;gap:8px}
.toc a{font-size:var(--t-cap);color:var(--ink-70)}
.toc a:hover{color:var(--red)}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.acc details{border-bottom:1px solid var(--line-2)}
.acc details:last-child{border-bottom:0}
.acc summary{padding:var(--s3);font-family:"Alexandria";font-size:var(--t-lab);font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:var(--s2);list-style:none;transition:background .2s}
.acc summary::-webkit-details-marker{display:none}
/* Same rule as the tick: a down-chevron is bottom+right rotated 45deg. Physical borders. */
.acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-45);border-bottom:2px solid var(--ink-45);
  transform:rotate(45deg);margin-inline-start:auto;flex:none;transition:transform .25s}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc summary:hover{background:var(--cream-3)}
.acc .acc-body{padding:0 var(--s3) var(--s3);font-size:var(--t-lab);color:var(--ink-70);line-height:1.9}

/* branch / agent cards */
.branch-grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:700px){.branch-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.branch-grid{grid-template-columns:repeat(3,1fr)}}
.branch{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);
  display:flex;flex-direction:column;gap:10px;transition:all .3s var(--ease)}
.branch:hover{box-shadow:var(--shadow-md);border-color:transparent;transform:translateY(-3px)}
.branch.flag{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.branch h3{font-size:var(--t-h5)}
.branch .row{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-cap);color:var(--ink-70);line-height:1.7}
.branch .row .ic{width:16px;height:16px;color:var(--red);flex:none;margin-top:2px}
.branch .acts{display:flex;gap:8px;margin-top:auto;padding-top:var(--s2)}
.branch .acts .btn{flex:1}

/* contact rows — plain list; .branch here would nest a card inside a card */
.info-list{list-style:none;display:grid;gap:var(--s3)}
.info-list li{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-cap);color:var(--ink-70);line-height:1.7}
.info-list .ic{width:17px;height:17px;color:var(--red);flex:none;margin-top:2px}
.info-list b{display:block;font-family:"Alexandria";font-size:var(--t-lab);color:var(--ink);margin-bottom:2px}
.info-list a{color:var(--ink-70)}
.info-list a:hover{color:var(--red)}

/* stat band */
.stat-band{background:var(--cream-2);border-block:1px solid var(--line)}
.stat-band .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);padding-block:var(--s6)}
@media(min-width:860px){.stat-band .wrap{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat b{font-family:"Alexandria";font-size:var(--t-h2);font-weight:800;color:var(--burgundy);display:block;line-height:1}
/* icon variant: an .ic is a fixed 20px and would float tiny in the text-sized slot */
.stat.ico b{display:grid;place-items:center;width:52px;height:52px;margin:0 auto var(--s1);
  border-radius:50%;background:var(--cream-3);border:1px solid var(--line)}
.stat.ico b .ic{width:24px;height:24px;color:var(--burgundy)}
.stat span{font-size:var(--t-cap);color:var(--ink-45);margin-top:8px;display:block}

/* article cards */
.art-grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:700px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.art-grid{grid-template-columns:repeat(3,1fr)}}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;
  flex-direction:column;transition:all .3s var(--ease)}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
/* Sources are ~430px product shots on plain grounds, not photography. `cover`
   stretched them past native size (blurry) and cropped the subject. `contain`
   on a tinted panel presents them as product art and never upscales. Swap back
   to cover once real editorial photography replaces these. */
.art-media{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(160deg,var(--cream-3),var(--cream-2));
  display:grid;place-items:center}
.art-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  padding:var(--s2);transition:transform .5s var(--ease)}
.art:hover .art-media img{transform:scale(1.05)}
.art-body{padding:var(--s3);display:flex;flex-direction:column;flex:1;gap:8px}
.art-cat{font-size:11px;color:var(--red);font-family:"Alexandria";font-weight:600;letter-spacing:.06em}
.art h3{font-size:var(--t-h5);line-height:1.5}
.art p{font-size:var(--t-cap);color:var(--ink-45);line-height:1.75;flex:1}
.art-meta{display:flex;gap:var(--s2);font-size:11px;color:var(--ink-45);padding-top:8px;border-top:1px solid var(--line-2)}
/* 21/9 forced a 2.5x upscale of a 430px source; 16/7 + contain keeps it sharp */
.art-hero{aspect-ratio:16/7;border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s6);
  background:linear-gradient(160deg,var(--cream-3),var(--cream-2));display:grid;place-items:center;
  border:1px solid var(--line)}
.art-hero img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;padding:var(--s3)}

/* compare table */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.cmp{width:100%;min-width:760px;font-size:var(--t-lab)}
.cmp th,.cmp td{padding:var(--s2);border-bottom:1px solid var(--line-2);text-align:start;vertical-align:top}
.cmp thead th{background:var(--cream-3);border-bottom:1px solid var(--line)}
.cmp .rowlab{background:var(--cream-3);font-family:"Alexandria";font-size:var(--t-cap);font-weight:600;
  color:var(--ink-45);width:150px;white-space:nowrap}
.cmp-prod img{width:100%;max-width:150px;aspect-ratio:1;object-fit:contain;background:var(--cream-3);border-radius:var(--r-sm)}
.cmp-prod b{font-family:"Alexandria";font-size:var(--t-cap);display:block;margin-top:8px;line-height:1.5}

/* map placeholder */
.map-box{aspect-ratio:16/7;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,#EFE9DF,#E3DAcc);display:grid;place-items:center;position:relative}
.map-box .mk{position:absolute;width:14px;height:14px;background:var(--red);border:2px solid #fff;border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.3)}
.map-note{position:relative;z-index:1;font-size:var(--t-cap);color:var(--ink-45);background:rgba(255,255,255,.85);
  padding:10px var(--s3);border-radius:var(--r-full)}

/* callout */
.callout{border:1px solid var(--line);border-inline-start:3px solid var(--red);background:#fff;border-radius:var(--r-sm);
  padding:var(--s3);display:flex;gap:var(--s2);align-items:flex-start;font-size:var(--t-lab);line-height:1.8;color:var(--ink-70)}
.callout .ic{color:var(--red);flex:none;margin-top:3px}
.callout.ok{border-inline-start-color:var(--ok)} .callout.ok .ic{color:var(--ok)}
.callout.warn{border-inline-start-color:var(--warn)} .callout.warn .ic{color:var(--warn)}
.callout b{color:var(--ink)}

/* CTA band */
.cta-band{background:var(--burgundy);color:var(--cream);border-radius:var(--r-lg);padding:var(--s8) var(--s5);
  text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 50% 0%,rgba(216,31,38,.35),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{font-size:var(--t-h2)}
.cta-band p{color:rgba(248,241,231,.72);margin-top:var(--s2);max-width:52ch;margin-inline:auto;line-height:1.8}
.cta-band .btns{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s5);flex-wrap:wrap}

/* 404 */
.e404{text-align:center;padding-block:var(--s14)}
.e404 .big{font-family:"Alexandria";font-size:clamp(5rem,18vw,11rem);font-weight:800;line-height:.9;
  color:transparent;-webkit-text-stroke:2px var(--line)}
.e404 h1{font-size:var(--t-h2);margin-top:var(--s3)}
.e404 p{color:var(--ink-45);margin-top:var(--s2);max-width:46ch;margin-inline:auto;line-height:1.8}

/* ---------- bottom app bar (mobile) --------------------------
   One variable drives the whole bottom stack, so the buy bar, the floats and
   the toast can never end up underneath each other:
     --tabbar-h  height of the tab bar itself (0 on desktop)
     --stack-b   where the NEXT thing up must start
   Anything newly pinned to the bottom must use --stack-b, not bottom:0. */
:root{--tabbar-h:0px;--safe-b:env(safe-area-inset-bottom,0px);--stack-b:var(--safe-b)}
@media(max-width:900px){:root{--tabbar-h:58px;--stack-b:calc(58px + var(--safe-b))}}

.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:80;display:none;
  grid-template-columns:repeat(5,1fr);background:rgba(248,241,231,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding-bottom:var(--safe-b);
  box-shadow:0 -2px 18px rgba(26,19,21,.09)}
@media(max-width:900px){.tabbar{display:grid}}
body[data-page^="admin"] .tabbar{display:none !important}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:var(--tabbar-h);font-family:"Alexandria";font-size:10px;font-weight:500;
  color:var(--ink-45);position:relative;transition:color .2s;-webkit-tap-highlight-color:transparent}
.tabbar .ic{width:22px;height:22px;stroke-width:1.5}
.tabbar a:active,.tabbar button:active{background:var(--cream-2)}
.tabbar [aria-current="page"]{color:var(--red);font-weight:600}
.tabbar [aria-current="page"]::before{content:"";position:absolute;top:0;inset-inline:26%;height:2px;
  background:var(--red);border-radius:0 0 3px 3px}
.tabbar .pill{top:5px;inset-inline-start:calc(50% + 3px);border:2px solid var(--cream)}
/* reserve the bar's height so it never covers the end of the footer */
@media(max-width:900px){body{padding-bottom:var(--stack-b)}}
@media(max-width:900px){body[data-page="pdp"]{padding-bottom:calc(var(--stack-b) + 76px)}}

/* ---------- floaters ---------------------------------------- */
/* centred with physical left+translate so it does not drift when dir flips —
   inset-inline-start:50% + translate(50%) only happens to work in RTL */
.toast{position:fixed;bottom:calc(var(--stack-b) + var(--s3));left:50%;transform:translate(-50%,220%);
  background:var(--ink);color:var(--cream);padding:14px var(--s3);border-radius:var(--r-sm);
  font-size:var(--t-lab);z-index:120;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;
  transition:transform .35s var(--ease);white-space:nowrap}
.toast.on{transform:translate(-50%,0)}
.toast .pyr{width:14px;color:var(--gold)}
@media(max-width:900px){body[data-page="pdp"] .toast{bottom:calc(var(--stack-b) + 76px + var(--s2))}}
.wa-float{position:fixed;inset-inline-start:var(--s3);bottom:calc(var(--stack-b) + var(--s2));
  width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;z-index:65;box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float .ic{width:26px;height:26px}
@media(max-width:900px){body[data-page="pdp"] .wa-float{bottom:calc(var(--stack-b) + 76px + var(--s2))}}
.to-top{position:fixed;inset-inline-end:var(--s3);bottom:calc(var(--stack-b) + var(--s2));
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--cream);display:grid;place-items:center;z-index:65;box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .25s}
.to-top.on{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}
@media(max-width:900px){body[data-page="pdp"] .to-top{bottom:calc(var(--stack-b) + 76px + var(--s2))}}

/* ---------- footer ------------------------------------------ */
.footer{background:var(--ink);color:rgba(248,241,231,.7);padding-block:var(--s10) var(--s5);margin-top:auto}
.f-grid{display:grid;gap:var(--s6)}
@media(min-width:860px){.f-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}}
.footer h2{font-family:"Alexandria";color:var(--cream);font-size:var(--t-lab);font-weight:600;margin-bottom:var(--s3)}
.footer ul{list-style:none;display:grid;gap:10px;font-size:var(--t-lab)}
.footer li a:hover{color:var(--gold-soft)}
.footer .brand .pyr{color:var(--red)} .footer .brand-txt .n1{color:var(--cream)}
.f-about{font-size:var(--t-lab);line-height:1.8;margin-top:var(--s3);max-width:40ch}
.f-social{display:flex;gap:8px;margin-top:var(--s3)}
.f-social a{width:38px;height:38px;border:1px solid rgba(248,241,231,.16);border-radius:var(--r-sm);display:grid;
  place-items:center;color:rgba(248,241,231,.7);transition:all .2s}
.f-social a:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.f-pay{display:flex;gap:8px;margin-top:var(--s3);flex-wrap:wrap}
.f-pay span{border:1px solid rgba(248,241,231,.16);border-radius:4px;padding:5px 10px;font-size:10px;letter-spacing:.05em}
.f-bottom{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid rgba(248,241,231,.10);display:flex;
  flex-wrap:wrap;gap:var(--s2);justify-content:space-between;font-size:var(--t-cap);color:rgba(248,241,231,.45)}
.f-bottom a:hover{color:var(--gold-soft)}

/* ---------- motion ------------------------------------------ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none} html{scroll-behavior:auto}
}
@media print{
  .header,.topbar,.worlds,.footer,.wa-float,.to-top,.mobile-buy,.mobile-nav,.scrim,.search-panel{display:none!important}
  body{background:#fff}
}