/* ============================================================================
   TIRTH ENTERPRISE — Design System v3
   "Clean & professional": calm surfaces, one type ladder, an 4px spacing grid,
   soft elevation instead of decoration, and product photography as the hero.

   RULES THIS FILE ENFORCES (do not break them when adding components):
   1. SPACING  — every gap/padding/margin is a --sp-* token (4px grid). No stray px.
   2. TYPE     — every font-size is a --fs-* token. Six sizes, no more.
   3. COLOR    — semantic tokens only (--brand, --accent, --ink-*, --line, --surface).
                 Colour carries meaning (status), never decoration.
   4. TARGETS  — every interactive element is >= 44px tall on touch.
   5. NO CLIP  — text truncates with ellipsis or clamps; containers never overflow.
   Tested from 320px up.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* brand */
  --brand:#16234B;          /* navy — headers, primary actions, headings      */
  --brand-700:#1E3164;      /* hover                                          */
  --brand-50:#EEF1F8;       /* tinted surface                                 */
  --accent:#F5A524;         /* amber — the single "do this" colour            */
  --accent-600:#D98A0B;
  --accent-50:#FEF6E7;

  /* ink (text) */
  --ink:#111827;            /* primary text            */
  --ink-2:#4B5563;          /* secondary text          */
  --ink-3:#6B7280;          /* muted / meta            */
  --ink-inv:#FFFFFF;

  /* surfaces & lines */
  --bg:#F7F7F6;             /* page background (warm grey)   */
  --surface:#FFFFFF;        /* cards, header, inputs         */
  --surface-2:#FAFAF9;      /* subtle inset / table header   */
  --line:#E5E7EB;           /* hairline border               */
  --line-2:#D1D5DB;         /* stronger border (inputs)      */

  /* status */
  --ok:#0E9F6E;   --ok-bg:#E7F7F0;
  --warn:#B45309; --warn-bg:#FEF3C7;
  --info:#2563EB; --info-bg:#EFF4FF;
  --danger:#DC2626; --danger-bg:#FEECEC;
  --wa:#25D366;             /* WhatsApp brand green */

  /* type ladder — 1.25 minor third */
  --fs-xs:12px;    --lh-xs:1.45;
  --fs-sm:13px;    --lh-sm:1.5;
  --fs-base:15px;  --lh-base:1.6;
  --fs-md:17px;    --lh-md:1.5;
  --fs-lg:20px;    --lh-lg:1.35;
  --fs-xl:26px;    --lh-xl:1.25;
  --fs-2xl:32px;   --lh-2xl:1.18;
  --fs-3xl:40px;   --lh-3xl:1.12;

  /* spacing — 4px grid */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* radius */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-full:999px;

  /* elevation — soft, never harsh */
  --sh-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 2px 6px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.06);
  --sh-3:0 12px 32px rgba(16,24,40,.12);
  --ring:0 0 0 3px rgba(22,35,75,.14);

  /* layout */
  --page:1200px;
  --gutter:16px;
  --sec:40px;               /* vertical rhythm between page sections */
  --hdr-h:60px;
}
@media(min-width:768px){ :root{ --gutter:24px; --sec:56px; } }
@media(min-width:1100px){ :root{ --sec:72px; } }

/* ------------------------------------------------------------- baseline -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--fs-base);line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-feature-settings:'cv11','ss01';
}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;color:var(--brand);overflow-wrap:break-word}
h1{font-size:var(--fs-2xl);line-height:var(--lh-2xl)}
h2{font-size:var(--fs-xl);line-height:var(--lh-xl)}
h3{font-size:var(--fs-md);line-height:var(--lh-md)}
p{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
img,svg,video{max-width:100%;height:auto;display:block}
input,select,textarea,button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-6) 0}
::selection{background:var(--accent-50)}

/* utilities used across pages (kept deliberately tiny) */
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}
.grow{flex:1;min-width:0}
.push{margin-left:auto}
.muted{color:var(--ink-3)}
.small{font-size:var(--fs-sm);line-height:var(--lh-sm)}
.xs{font-size:var(--fs-xs);line-height:var(--lh-xs)}
.center{text-align:center}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nowrap{white-space:nowrap}
.hide{display:none}
@media(max-width:639px){.hide-sm{display:none!important}}
@media(min-width:640px){.only-sm{display:none!important}}
@media(max-width:899px){.hide-md{display:none!important}}
@media(min-width:900px){.only-md{display:none!important}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{flex:none;display:inline-block;vertical-align:-.15em}

/* section rhythm — the ONLY vertical spacing between page blocks */
.section{padding-block:var(--sec) 0}
.section:last-of-type{padding-bottom:var(--sec)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-bottom:var(--sp-5)}
.section-head .eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-600);margin-bottom:var(--sp-1)}
.section-head p{color:var(--ink-3);font-size:var(--fs-sm);margin-top:var(--sp-1)}
.section-head .link{font-size:var(--fs-sm);font-weight:600;color:var(--brand);display:inline-flex;
  align-items:center;gap:var(--sp-1);white-space:nowrap}
.section-head .link:hover{color:var(--accent-600)}

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);border-radius:var(--r);border:1px solid transparent;
  font-size:var(--fs-base);font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .06s;
  background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1);
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn--primary{background:var(--brand);color:var(--ink-inv);border-color:var(--brand)}
.btn--primary:hover{background:var(--brand-700)}
.btn--accent{background:var(--accent);color:#3D2A00;border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-600);color:#fff}
.btn--wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn--wa:hover{background:#1EBE5B}
.btn--ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--brand)}
.btn--ghost:hover{background:var(--brand-50)}
.btn--danger{background:var(--surface);color:var(--danger);border-color:#F3C2C2}
.btn--danger:hover{background:var(--danger-bg)}
.btn--sm{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn--lg{min-height:52px;padding:0 var(--sp-6);font-size:var(--fs-md)}
.btn--block{width:100%}
.btn--icon{width:44px;min-width:44px;padding:0}
.btn--icon.btn--sm{width:36px;min-width:36px}

/* ------------------------------------------------------------- badges --- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px var(--sp-2);border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;line-height:1.4;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);white-space:nowrap}
.badge--ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge--warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.badge--info{background:var(--info-bg);color:var(--info);border-color:transparent}
.badge--danger{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.badge--accent{background:var(--accent-50);color:var(--accent-600);border-color:transparent}
.badge--brand{background:var(--brand);color:var(--ink-inv);border-color:transparent}

/* -------------------------------------------------------------- cards --- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card__head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.card__head h2,.card__head h3{font-size:var(--fs-md);margin:0}
.card__body{padding:var(--sp-5)}
.card__foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line);background:var(--surface-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}

/* -------------------------------------------------------------- forms --- */
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.field > label,.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.label .req{color:var(--danger)}
.field .hint{font-size:var(--fs-xs);color:var(--ink-3)}
.field .err{font-size:var(--fs-xs);color:var(--danger);font-weight:500}
.input,.field input,.field select,.field textarea{
  width:100%;min-height:44px;padding:0 var(--sp-3);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);font-size:var(--fs-base);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field textarea,textarea.input{min-height:110px;padding:var(--sp-3);line-height:var(--lh-base);resize:vertical}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:#9CA3AF}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.field input::placeholder,.field textarea::placeholder{color:#9CA3AF}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger)}
select.input,.field select{appearance:none;padding-right:var(--sp-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--sp-3) center}
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .col-2{grid-column:1/-1}}

/* toggle switch */
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .track{position:absolute;inset:0;background:#CBD5E1;border-radius:var(--r-full);transition:background .18s}
.switch .track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--sh-1);transition:transform .18s}
.switch input:checked + .track{background:var(--ok)}
.switch input:checked + .track::after{transform:translateX(18px)}
.switch input:focus-visible + .track{box-shadow:var(--ring)}

/* file dropzone */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;
  padding:var(--sp-6);border:2px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);
  color:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.is-over{border-color:var(--brand);background:var(--brand-50)}
.dropzone strong{color:var(--brand);font-size:var(--fs-base)}
.dropzone .ic{color:var(--brand)}

/* -------------------------------------------------------------- table --- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{text-align:left;font-weight:600;font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1}
.table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--surface-2)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- empty state -- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-12) var(--sp-5)}
.empty .icon{width:56px;height:56px;border-radius:var(--r-full);background:var(--brand-50);
  display:grid;place-items:center;color:var(--brand)}
.empty h3{font-size:var(--fs-md)}
.empty p{color:var(--ink-3);font-size:var(--fs-sm);max-width:38ch}

/* ------------------------------------------------------------- header --- */
.topbar{background:var(--brand);color:#C7D0E8;font-size:var(--fs-xs);line-height:1.5}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:34px;flex-wrap:wrap;padding-block:var(--sp-1)}
.topbar b{color:#fff;font-weight:600}
.topbar a{display:inline-flex;align-items:center;gap:var(--sp-1)}
.topbar a:hover{color:#fff}

.header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.header.is-stuck{box-shadow:var(--sh-2)}
.header__row{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--hdr-h);flex-wrap:wrap;
  padding-block:var(--sp-2)}
@media(min-width:900px){.header__row{flex-wrap:nowrap;gap:var(--sp-5);padding-block:var(--sp-3)}}

.brand{display:flex;align-items:center;gap:var(--sp-2);min-width:0;flex:0 1 auto}
.brand img{width:38px;height:38px;border-radius:var(--r-full);flex:none}
.brand__name{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.brand__name b{font-size:var(--fs-sm);font-weight:700;color:var(--brand);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand__name span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
@media(max-width:359px){.brand__name{display:none}}

/* search: full-width own row on phones, inline from 900px */
.search{order:5;flex:1 0 100%;position:relative;display:flex;min-width:0}
@media(min-width:900px){.search{order:0;flex:1 1 auto;max-width:520px}}
.search input{width:100%;min-height:44px;padding:0 46px 0 var(--sp-4);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-full);font-size:var(--fs-base);color:var(--ink)}
.search input:focus{outline:none;background:var(--surface);border-color:var(--brand);box-shadow:var(--ring)}
.search button{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;border-radius:var(--r-full);
  background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}
.search button:hover{background:var(--brand-700)}

/* header actions — ALWAYS pinned right */
.header__actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:none}
.iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-width:44px;height:44px;padding:0 var(--sp-3);border-radius:var(--r);border:1px solid transparent;
  background:transparent;color:var(--brand);font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.iconbtn:hover{background:var(--brand-50)}
.iconbtn--outline{border-color:var(--line-2);background:var(--surface)}
.count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);
  background:var(--accent);color:#3D2A00;font-size:10px;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--surface)}

/* desktop category bar */
.navbar{display:none;background:var(--surface);border-bottom:1px solid var(--line)}
@media(min-width:900px){.navbar{display:block}}
.navbar .wrap{display:flex;gap:var(--sp-1);overflow-x:auto;scrollbar-width:none}
.navbar .wrap::-webkit-scrollbar{display:none}
.navbar a{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3);
  font-size:var(--fs-sm);font-weight:500;color:var(--ink-2);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.navbar a:hover{color:var(--brand)}
.navbar a.is-active{color:var(--brand);font-weight:600;border-bottom-color:var(--accent)}
.navbar .swatch{width:8px;height:8px;border-radius:var(--r-full);flex:none}

/* ------------------------------------------------------------- drawer --- */
.scrim{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:90;opacity:0;pointer-events:none;
  transition:opacity .2s;backdrop-filter:blur(1px)}
body.is-drawer .scrim{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,340px);z-index:100;background:var(--surface);
  display:flex;flex-direction:column;transform:translateX(-101%);transition:transform .24s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--sh-3);overflow-y:auto;overscroll-behavior:contain}
body.is-drawer .drawer{transform:none}
body.is-drawer{overflow:hidden}
.drawer__head{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--line);z-index:1}
.drawer__head b{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--brand);font-weight:700}
.drawer__section{padding:var(--sp-3) 0}
.drawer__label{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.drawer a.item{display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:var(--sp-2) var(--sp-5);
  font-size:var(--fs-base);color:var(--ink);font-weight:500}
.drawer a.item:hover{background:var(--surface-2)}
.drawer a.item .swatch{width:10px;height:10px;border-radius:var(--r-full);flex:none}
.drawer a.item .ic{color:var(--ink-3)}
.drawer a.item .tail{margin-left:auto;color:var(--ink-3);font-size:var(--fs-xs)}
.drawer__foot{margin-top:auto;padding:var(--sp-4) var(--sp-5) var(--sp-6);border-top:1px solid var(--line)}

/* --------------------------------------------------------------- hero --- */
.hero{background:linear-gradient(180deg,var(--brand) 0%,#1B2C5E 100%);color:#fff;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 80% at 85% 20%, rgba(245,165,36,.22), transparent 60%)}
.hero .wrap{position:relative;z-index:1;padding-block:var(--sp-10) var(--sp-12);display:grid;gap:var(--sp-8)}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;padding-block:var(--sp-16)}}
.hero .eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-full);background:rgba(255,255,255,.12);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.04em;margin-bottom:var(--sp-4);color:#fff}
.hero h1{color:#fff;font-size:var(--fs-2xl);line-height:var(--lh-2xl);max-width:16ch}
@media(min-width:768px){.hero h1{font-size:var(--fs-3xl);line-height:var(--lh-3xl)}}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lede{color:#C7D0E8;font-size:var(--fs-md);line-height:1.6;margin-top:var(--sp-4);max-width:52ch}
.hero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.1)}
.hero__proof{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-8)}
@media(min-width:520px){.hero__proof{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.hero__proof{margin-top:var(--sp-10)}}
.hero__proof div{display:flex;flex-direction:column;gap:2px}
.hero__proof b{font-size:var(--fs-lg);color:#fff;font-weight:700;line-height:1.2}
.hero__proof span{font-size:var(--fs-xs);color:#9FADD0;line-height:1.35}
.hero__media{display:none}
@media(min-width:900px){
  .hero__media{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .hero__media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);
    box-shadow:var(--sh-3);background:#fff}
  .hero__media img:nth-child(1){transform:translateY(-12px)}
  .hero__media img:nth-child(4){transform:translateY(12px)}
}

/* -------------------------------------------------------- trust strip --- */
.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);padding-block:var(--sp-5)}
@media(min-width:768px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust__item{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0}
.trust__item .ic{color:var(--brand);margin-top:2px}
.trust__item b{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.trust__item span{display:block;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.4}

/* ---------------------------------------------------------- categories -- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(min-width:640px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.cat-grid{grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}}
.cat{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center;
  padding:var(--sp-5) var(--sp-3);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);transition:border-color .15s,box-shadow .15s,transform .15s}
.cat:hover{border-color:var(--brand);box-shadow:var(--sh-2);transform:translateY(-2px)}
.cat__icon{width:48px;height:48px;border-radius:var(--r-full);display:grid;place-items:center;font-size:22px}
.cat b{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.3}
.cat span{font-size:var(--fs-xs);color:var(--ink-3)}

/* ------------------------------------------------------- product cards -- */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(min-width:640px){.product-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
@media(min-width:1000px){.product-grid{grid-template-columns:repeat(4,1fr)}}

.product{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.product:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.product__media{position:relative;display:block;aspect-ratio:1;background:var(--surface-2);overflow:hidden}
.product__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.product:hover .product__media img{transform:scale(1.04)}
.product__media .ph{width:100%;height:100%;display:grid;place-items:center;font-size:34px;opacity:.35}
.product__code{position:absolute;left:var(--sp-2);top:var(--sp-2);padding:2px var(--sp-2);border-radius:var(--r-sm);
  background:rgba(17,24,39,.78);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
.product__fav{position:absolute;right:var(--sp-2);top:var(--sp-2);width:34px;height:34px;border-radius:var(--r-full);
  background:rgba(255,255,255,.94);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-3);cursor:pointer;padding:0}
.product__fav:hover{color:var(--danger)}
.product__fav.is-on{color:var(--danger);background:#fff}
.product__oos{position:absolute;inset:0;background:rgba(255,255,255,.72);display:grid;place-items:center}
.product__oos span{background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:600;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full)}
.product__body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);flex:1}
@media(min-width:640px){.product__body{padding:var(--sp-4)}}
.product__title{font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.product__meta{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.product__price{margin-top:auto;display:flex;flex-direction:column;gap:1px}
.product__price b{font-size:var(--fs-md);font-weight:700;color:var(--ink);line-height:1.2;
  font-variant-numeric:tabular-nums}
.product__price .was{font-size:var(--fs-xs);color:var(--ink-3);text-decoration:line-through;margin-right:var(--sp-1)}
.product__price span{font-size:var(--fs-xs);color:var(--ink-3)}
.product__cta{margin-top:var(--sp-1)}
.product__lock{margin-top:auto;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);
  background:var(--surface-2);border-radius:var(--r);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.4}
.product__lock .ic{color:var(--ink-3)}
.product__lock a{color:var(--brand);font-weight:600;text-decoration:underline}

/* ------------------------------------------------------ product detail -- */
.pdp{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-block:var(--sp-6)}
@media(min-width:900px){.pdp{grid-template-columns:1fr 1fr;gap:var(--sp-10);padding-block:var(--sp-8)}}
.pdp__gallery img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.pdp h1{font-size:var(--fs-xl);line-height:var(--lh-xl)}
@media(min-width:768px){.pdp h1{font-size:var(--fs-2xl)}}
.pdp__code{font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pdp__price{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-block:var(--sp-4)}
.pdp__price b{font-size:var(--fs-2xl);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pdp__price span{color:var(--ink-3);font-size:var(--fs-sm)}
.pdp__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
.pdp__facts div{padding:var(--sp-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.pdp__facts b{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:600;margin-bottom:2px}
.pdp__facts span{font-size:var(--fs-sm);color:var(--ink)}
/* A labelled row with a control on the left and an explanation beside it. */
.switch-row{display:flex;gap:var(--sp-3);align-items:center;cursor:pointer}
.switch-row input[type=radio],.switch-row input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--brand)}
.switch-row .small{line-height:1.5}
.hint{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5}

.notice{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r);
  background:var(--accent-50);border:1px solid #F5DCA8;font-size:var(--fs-sm);color:#6B4A05;line-height:1.5}
.notice .ic{color:var(--accent-600);flex:none;margin-top:1px}
.notice--info{background:var(--info-bg);border-color:#C7D8FB;color:#1E40AF}
.notice--info .ic{color:var(--info)}
.notice--ok{background:var(--ok-bg);border-color:#B7E8D3;color:#065F46}
.notice--ok .ic{color:var(--ok)}
.notice--danger{background:var(--danger-bg);border-color:#F5C2C2;color:#991B1B}
.notice--danger .ic{color:var(--danger)}

/* quantity stepper */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);overflow:hidden;height:46px;flex:none}
/* flex:none matters — inside a tight row on a 320px screen these were being
   squeezed to 12px wide, which is not a button anyone can press. */
.stepper button{width:44px;min-width:44px;flex:none;height:44px;border:0;background:transparent;
  color:var(--brand);font-size:var(--fs-md);cursor:pointer;display:grid;place-items:center}
.stepper button:hover{background:var(--surface-2)}
.stepper input{width:56px;min-width:44px;flex:none;height:44px;border:0;border-inline:1px solid var(--line);text-align:center;
  font-weight:600;font-variant-numeric:tabular-nums;min-height:0;border-radius:0}
.stepper input:focus{outline:none;box-shadow:none}

/* ---------------------------------------------------------- shop page --- */
.shop{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-block:var(--sp-6)}
@media(min-width:900px){.shop{grid-template-columns:248px 1fr;gap:var(--sp-8)}}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  align-self:start;overflow:hidden}
@media(max-width:899px){
  .filters{position:fixed;inset:0 auto 0 0;width:min(86vw,330px);z-index:100;border-radius:0;
    transform:translateX(-101%);transition:transform .24s cubic-bezier(.32,.72,0,1);
    display:flex;flex-direction:column;box-shadow:var(--sh-3);overflow-y:auto}
  body.is-filters .filters{transform:none}
  body.is-filters{overflow:hidden}
  body.is-filters .scrim{opacity:1;pointer-events:auto}
}
.filters__head{display:none;align-items:center;gap:var(--sp-3);padding:var(--sp-4);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
@media(max-width:899px){.filters__head{display:flex}}
.filters__head b{flex:1;font-size:var(--fs-md);color:var(--brand)}
.fgroup{padding:var(--sp-4);border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:0}
.fgroup h4{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--sp-3)}
.fopt{display:flex;align-items:center;gap:var(--sp-3);min-height:40px;padding:var(--sp-1) 0;
  font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.fopt:hover{color:var(--brand)}
.fopt .box{width:18px;height:18px;border:1px solid var(--line-2);border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;background:var(--surface);color:#fff;transition:background .15s,border-color .15s}
.fopt.is-on{color:var(--brand);font-weight:600}
.fopt.is-on .box{background:var(--brand);border-color:var(--brand)}
.fopt .n{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.filters__foot{position:sticky;bottom:0;padding:var(--sp-4);background:var(--surface);
  border-top:1px solid var(--line);display:none}
@media(max-width:899px){.filters__foot{display:block}}
.shop__intro{margin-bottom:var(--sp-4)}
.shop__intro h1{font-size:var(--fs-xl);line-height:var(--lh-xl)}
.shop__intro p{margin-top:var(--sp-2);color:var(--ink-3);font-size:var(--fs-sm);line-height:1.55;max-width:70ch}
.shop__toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.shop__count{font-size:var(--fs-sm);color:var(--ink-3)}
.shop__toolbar .sort{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--ink-3)}
.shop__toolbar .sort select{min-height:40px;width:auto;font-size:var(--fs-sm)}
.pagination{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-8)}
.pagination a,.pagination span{min-width:40px;height:40px;display:grid;place-items:center;padding:0 var(--sp-2);
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-2)}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .is-current{background:var(--brand);color:#fff;border-color:var(--brand)}

/* --------------------------------------------------------- cart/order --- */
.two-col{display:grid;grid-template-columns:1fr;gap:var(--sp-5);padding-block:var(--sp-6)}
@media(min-width:900px){.two-col{grid-template-columns:1fr 380px;gap:var(--sp-8);align-items:start}}
@media(min-width:900px){.two-col__side{position:sticky;top:calc(var(--hdr-h) + var(--sp-4))}}
.line-item{display:grid;grid-template-columns:64px 1fr;gap:var(--sp-3);padding:var(--sp-4);
  border-bottom:1px solid var(--line);align-items:center}
@media(min-width:640px){.line-item{grid-template-columns:72px 1fr auto auto;gap:var(--sp-4)}}
.line-item:last-child{border-bottom:0}
.line-item__img{width:64px;height:64px;border-radius:var(--r);border:1px solid var(--line);
  object-fit:cover;background:var(--surface-2)}
@media(min-width:640px){.line-item__img{width:72px;height:72px}}
.line-item__info{min-width:0}
.line-item__info b{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.line-item__info span{font-size:var(--fs-xs);color:var(--ink-3)}
.line-item__total{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.summary-row{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;
  font-size:var(--fs-sm);border-bottom:1px dashed var(--line)}
.summary-row span{color:var(--ink-2)}
.summary-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.summary-row--total{border-bottom:0;padding-top:var(--sp-4);font-size:var(--fs-md)}
.summary-row--total b{font-size:var(--fs-lg);color:var(--brand)}

/* order progress */
.steps{display:flex;gap:var(--sp-2);padding:var(--sp-5) var(--sp-4) var(--sp-2)}
.step{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);position:relative;min-width:0}
.step__dot{width:32px;height:32px;border-radius:var(--r-full);background:var(--surface);border:2px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink-3);z-index:1}
.step__label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);text-align:center;line-height:1.3}
.step::after{content:"";position:absolute;top:16px;left:50%;width:100%;height:2px;background:var(--line)}
.step:last-child::after{display:none}
.step.is-done .step__dot{background:var(--ok);border-color:var(--ok);color:#fff}
.step.is-done .step__label{color:var(--ok)}
.step.is-done::after{background:var(--ok)}
.step.is-current .step__dot{background:var(--accent);border-color:var(--accent);color:#3D2A00}
.step.is-current .step__label{color:var(--accent-600)}
.step.is-bad .step__dot{background:var(--danger);border-color:var(--danger);color:#fff}
.step.is-bad .step__label{color:var(--danger)}

/* --------------------------------------------------------- account nav -- */
.account{display:grid;grid-template-columns:1fr;gap:var(--sp-5);padding-block:var(--sp-6)}
@media(min-width:900px){.account{grid-template-columns:240px 1fr;gap:var(--sp-8);align-items:start}}
.anav{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.anav__user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--line);
  min-width:0}
.anav__avatar{width:40px;height:40px;border-radius:var(--r-full);background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);flex:none}
.anav__user b{display:block;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anav__user span{font-size:var(--fs-xs);color:var(--ok);font-weight:600}
.anav a{display:flex;align-items:center;gap:var(--sp-3);min-height:46px;padding:0 var(--sp-4);
  font-size:var(--fs-sm);color:var(--ink-2);border-left:3px solid transparent}
.anav a:hover{background:var(--surface-2);color:var(--brand)}
.anav a.is-active{background:var(--brand-50);color:var(--brand);font-weight:600;border-left-color:var(--brand)}
.anav a .ic{color:currentColor}
.anav a .tail{margin-left:auto}
@media(max-width:899px){
  .anav{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:var(--r-lg)}
  .anav::-webkit-scrollbar{display:none}
  .anav__user{display:none}
  .anav a{flex:none;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;min-height:48px}
  .anav a.is-active{border-left:0;border-bottom-color:var(--brand)}
}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-bottom:var(--sp-5)}
@media(min-width:900px){.kpis{grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4)}
.kpi b{display:block;font-size:var(--fs-lg);font-weight:700;color:var(--brand);line-height:1.2;
  font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600}
.kpi a{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--brand);font-weight:600}

/* notification list */
.notif{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.notif:last-child{border-bottom:0}
.notif.is-unread{background:var(--accent-50)}
.notif__icon{width:36px;height:36px;border-radius:var(--r-full);background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;flex:none}
.notif__body{flex:1 1 200px;min-width:0}
.notif__body b{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.notif__body p{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}
.notif__body time{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--sp-2)}
.notif__actions{display:flex;gap:var(--sp-2);flex:1 1 100%;padding-left:calc(36px + var(--sp-3))}
@media(min-width:720px){.notif__actions{flex:0 0 auto;padding-left:0;align-items:flex-start}}

/* ------------------------------------------------------------- footer --- */
.footer{background:var(--brand);color:#9FADD0;margin-top:var(--sec)}
.footer .wrap{padding-block:var(--sp-8) var(--sp-6)}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding-bottom:var(--sp-5);border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.footer__brand img{width:40px;height:40px;border-radius:var(--r-full)}
.footer__brand b{display:block;color:#fff;font-size:var(--fs-sm);font-weight:700}
.footer__brand span{display:block;font-size:var(--fs-xs);color:#9FADD0}
.footer__social{display:flex;gap:var(--sp-2)}
.footer__social a{width:40px;height:40px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#fff}
.footer__social a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.footer__social a.wa{background:var(--wa);border-color:var(--wa)}
.footer__social a.wa:hover{background:#1EBE5B}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);padding-block:var(--sp-5)}
.footer__links a{font-size:var(--fs-sm);color:#C7D0E8;font-weight:500;padding-block:var(--sp-1)}
.footer__links a:hover{color:#fff}
.footer__legal{font-size:var(--fs-xs);line-height:1.7;color:#8695BC;padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.12)}
/* Reserve room at the very end of the page for the floating WhatsApp button —
   and for the order bar as well when it is showing — so neither ever comes to
   rest on top of the footer's text or links. */
.footer .wrap{padding-bottom:calc(var(--sp-6) + 72px)}
body.has-cartbar .footer .wrap{padding-bottom:calc(var(--sp-6) + 140px)}
@media(min-width:900px){.footer .wrap{padding-bottom:calc(var(--sp-6) + 80px)}}
.footer__legal a{text-decoration:underline}
.footer__legal a:hover{color:#fff}

/* --------------------------------------------------- floating actions --- */
.fab{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:70;width:56px;height:56px;
  border-radius:var(--r-full);background:var(--wa);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-3);transition:transform .15s,opacity .15s}
.fab:hover{transform:scale(1.05)}
/* The footer carries its own WhatsApp button, so the floating one steps aside
   once the footer is on screen — it can then never land on top of content. */
.fab.is-parked{opacity:0;transform:scale(.85) translateY(8px);pointer-events:none}
.fab.is-raised{bottom:calc(var(--gutter) + 68px)}
@media(min-width:900px){.fab.is-raised{bottom:var(--gutter)}}
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--brand);color:#fff;
  display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--gutter);box-shadow:var(--sh-3)}
.cartbar b{font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:var(--sp-2)}
.cartbar .btn{margin-left:auto}
@media(min-width:900px){.cartbar{display:none}}

/* -------------------------------------------------------------- toast --- */
.toasts{position:fixed;top:var(--sp-4);right:var(--sp-4);left:var(--sp-4);z-index:200;display:flex;
  flex-direction:column;gap:var(--sp-2);pointer-events:none;align-items:flex-end}
@media(min-width:640px){.toasts{left:auto;max-width:400px}}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;
  padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:var(--r);box-shadow:var(--sh-3);font-size:var(--fs-sm);
  transform:translateY(-8px);opacity:0;transition:opacity .22s,transform .22s}
.toast.is-in{opacity:1;transform:none}
.toast .ic{flex:none;margin-top:1px}
.toast p{flex:1;min-width:0;line-height:1.45}
.toast button{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:0;flex:none}
.toast--ok{border-left-color:var(--ok)}     .toast--ok .ic{color:var(--ok)}
.toast--err{border-left-color:var(--danger)}.toast--err .ic{color:var(--danger)}
.toast--warn{border-left-color:var(--warn)} .toast--warn .ic{color:var(--warn)}
.toast--info{border-left-color:var(--info)} .toast--info .ic{color:var(--info)}

/* ------------------------------------------------------- search drop ---- */
.sdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;display:none;max-height:70vh;overflow-y:auto;z-index:60}
.sdrop.is-open{display:block}
.sdrop .sgroup{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);background:var(--surface-2)}
.sdrop .sitem{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line)}
.sdrop .sitem:hover{background:var(--surface-2)}
.sdrop .sitem img{width:40px;height:40px;border-radius:var(--r-sm);object-fit:cover;flex:none}
.sdrop .sitem b{display:block;font-size:var(--fs-sm);font-weight:600}
.sdrop .sitem span{font-size:var(--fs-xs);color:var(--ink-3)}
.sdrop .sall{display:block;padding:var(--sp-3);text-align:center;font-size:var(--fs-sm);font-weight:600;
  color:var(--brand);background:var(--surface-2)}
.sdrop .snone{padding:var(--sp-5);text-align:center;font-size:var(--fs-sm);color:var(--ink-3)}

/* ---------------------------------------------------------- auth pages -- */
.auth{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-block:var(--sp-6) var(--sp-10);
  align-items:start}
@media(min-width:900px){.auth{grid-template-columns:1fr 1fr;gap:var(--sp-10);padding-block:var(--sp-10)}}
.auth__pitch{background:var(--brand);color:#fff;border-radius:var(--r-xl);padding:var(--sp-6);overflow:hidden}
@media(min-width:900px){.auth__pitch{padding:var(--sp-8)}}
.auth__pitch h2{color:#fff;font-size:var(--fs-xl)}
.auth__pitch ul{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)}
.auth__pitch li{display:flex;gap:var(--sp-3);font-size:var(--fs-sm);color:#C7D0E8;line-height:1.5}
.auth__pitch li b{display:block;color:#fff;font-size:var(--fs-base);font-weight:600;margin-bottom:2px}
.auth__pitch li .ic{color:var(--accent);flex:none;margin-top:2px}
.auth__strip{display:flex;gap:var(--sp-2);margin-top:var(--sp-6);overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.auth__strip img{width:64px;height:64px;border-radius:var(--r);object-fit:cover;flex:none;background:#fff}

/* --------------------------------------------------------- admin shell -- */
.admin{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:1000px){.admin{grid-template-columns:230px 1fr}}
.asidebar{background:var(--brand);color:#C7D0E8;display:flex;flex-direction:column}
@media(min-width:1000px){.asidebar{position:sticky;top:0;height:100vh;overflow-y:auto}}
.asidebar__brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid rgba(255,255,255,.12)}
.asidebar__brand img{width:34px;height:34px;border-radius:var(--r-full)}
.asidebar__brand b{color:#fff;font-size:var(--fs-sm)}
.asidebar__brand span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8695BC}
.asidebar nav{padding:var(--sp-3) 0;display:flex;flex-direction:column;gap:2px}
.asidebar a{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:0 var(--sp-5);
  font-size:var(--fs-sm);color:#C7D0E8;font-weight:500;border-left:3px solid transparent}
.asidebar a:hover{background:rgba(255,255,255,.06);color:#fff}
.asidebar a.is-active{background:rgba(255,255,255,.1);color:#fff;font-weight:600;border-left-color:var(--accent)}
.asidebar a .pill{margin-left:auto;background:var(--accent);color:#3D2A00;font-size:11px;font-weight:700;
  border-radius:var(--r-full);padding:1px 7px}
@media(max-width:999px){
  .asidebar{flex-direction:row;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:40}
  .asidebar::-webkit-scrollbar{display:none}
  .asidebar__brand{display:none}
  .asidebar nav{flex-direction:row;padding:0}
  .asidebar a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;padding:0 var(--sp-4);min-height:52px}
  .asidebar a.is-active{border-left:0;border-bottom-color:var(--accent)}
}
.amain{background:var(--bg);min-width:0;padding:var(--sp-5) var(--gutter) var(--sp-16)}
@media(min-width:1000px){.amain{padding:var(--sp-8) var(--sp-8) var(--sp-16)}}
.apage-head{margin-bottom:var(--sp-5)}
.apage-head h1{font-size:var(--fs-xl)}
.apage-head p{color:var(--ink-3);font-size:var(--fs-sm);margin-top:var(--sp-1);max-width:70ch}
.toolbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.toolbar .grow{min-width:180px}

/* batch editor */
.batch input,.batch select{min-height:38px;font-size:var(--fs-sm);border-radius:var(--r-sm);padding:0 var(--sp-2)}
.batch textarea{font-size:var(--fs-sm)}
.batch input.is-dirty,.batch select.is-dirty{border-color:var(--accent);background:var(--accent-50);
  box-shadow:0 0 0 2px rgba(245,165,36,.18)}
.batch tr.is-dirty{background:var(--accent-50)}
.batch tr.is-error{background:var(--danger-bg)}
.batch img.thumb{width:40px;height:40px;border-radius:var(--r-sm);object-fit:cover;border:1px solid var(--line)}
.batch .code{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--brand);color:#fff;
  display:none;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--gutter);box-shadow:var(--sh-3);
  flex-wrap:wrap}
.savebar.is-visible{display:flex}
.savebar b{font-size:var(--fs-sm);font-weight:600}
.savebar .actions{margin-left:auto;display:flex;gap:var(--sp-2)}
.savebar .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.savebar .btn--ghost:hover{background:rgba(255,255,255,.1)}
.group-row td{background:var(--brand-50);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.05em;color:var(--brand);padding:var(--sp-3) var(--sp-4)}

/* workflow steps (admin order) */
.wf{display:flex;flex-direction:column;gap:var(--sp-4)}
.wf__step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.wf__step.is-done{border-color:#B7E8D3}
.wf__head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.wf__num{width:26px;height:26px;border-radius:var(--r-full);background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;flex:none}
.wf__step.is-done .wf__num{background:var(--ok);color:#fff}
.wf__head h3{font-size:var(--fs-base);flex:1;min-width:0}
.checklist{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}

/* --------------------------------------------------------- misc pages --- */
.prose{max-width:70ch;font-size:var(--fs-base);line-height:1.75;color:var(--ink-2)}
.prose h2{margin-top:var(--sp-8);margin-bottom:var(--sp-3);font-size:var(--fs-lg)}
.prose h3{margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.prose p+p{margin-top:var(--sp-4)}
.prose ul{margin:var(--sp-3) 0;padding-left:var(--sp-5);list-style:disc}
.prose li{margin-block:var(--sp-2)}
.prose b,.prose strong{color:var(--ink)}
.breadcrumb{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-xs);color:var(--ink-3);
  padding-block:var(--sp-4);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb b{color:var(--ink-2);font-weight:500}
.map-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.map-card iframe{display:block;width:100%;height:280px;border:0}
.info-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-row__icon{width:40px;height:40px;border-radius:var(--r-full);background:var(--brand-50);color:var(--brand);
  display:grid;place-items:center;flex:none}
.info-row b{display:block;font-size:var(--fs-sm);font-weight:600}
.info-row span{display:block;font-size:var(--fs-xs);color:var(--ink-3);word-break:break-word}
.info-row .btn{margin-left:auto;flex:none}

/* error / maintenance pages */
.errpage{min-height:80vh;display:grid;place-items:center;padding:var(--sp-6)}
.errpage__card{max-width:460px;text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:var(--sp-10) var(--sp-6)}
.errpage__code{font-size:var(--fs-3xl);font-weight:700;color:var(--brand);line-height:1}
.errpage h1{font-size:var(--fs-lg);margin-block:var(--sp-3) var(--sp-2)}
.errpage p{color:var(--ink-3);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.errpage .actions{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}

/* ------------------------------------------------- overflow guardrails ---
   A grid or flex track sizes itself to its widest child's MIN-CONTENT unless
   the child is told it may shrink. One long, unbreakable button label was
   therefore able to push a whole column past the viewport on a 320px phone.
   These two rules make that structurally impossible, everywhere.            */
.hero .wrap > *, .hero__cta > *, .two-col > *, .card > *, .product__body > *{min-width:0}
/* A <fieldset> defaults to min-width:min-content, which makes it ignore its
   container and push the whole page sideways on a narrow screen. */
fieldset{min-width:0;max-width:100%}
input[type="datetime-local"],input[type="date"],input[type="time"]{max-width:100%}
.btn{max-width:100%}
/* A button may wrap its label rather than blow out its column. Icon buttons,
   which have no label to wrap, keep their fixed square. */
@media(max-width:400px){
  .btn:not(.btn--icon){white-space:normal;text-align:center;line-height:1.25;
    padding-block:var(--sp-2);height:auto}
}
img, svg, video, canvas, iframe{max-width:100%}

/* -------------------------------------------------------- touch targets ---
   Every control a thumb has to hit is at least 44 × 44 CSS px. That applies on
   any narrow screen and on any touch device — a wide mouse-driven screen keeps
   the compact sizes, because a cursor is precise and density is worth more.  */
@media (max-width:899px), (pointer:coarse){
  .btn--sm{min-height:44px;padding-inline:var(--sp-4)}
  .btn--icon.btn--sm{width:44px;min-width:44px}
  .brand{min-height:44px}
  .brand img{width:42px;height:42px}
  /* The search field grows so its round submit button can reach 44px and still
     sit clear of the field's own border. */
  .search input{min-height:52px;padding-right:56px}
  .search button{width:44px;height:44px;right:4px;top:50%;transform:translateY(-50%)}
  .footer__social a{width:44px;height:44px}
  .footer__links a{display:inline-flex;align-items:center;min-height:44px}
  .fopt{min-height:44px}
  .pagination a,.pagination span{min-width:44px;height:44px}
  .product__fav{width:44px;height:44px}
  /* The label around these is the real tap target; the box itself just needs to
     be big enough to see and to aim at. */
  .switch-row{min-height:44px}
  .switch-row input[type=radio],.switch-row input[type=checkbox]{width:22px;height:22px}
  a.link, .info-row a, .kpi a{display:inline-flex;align-items:center;min-height:44px}
  /* Inside a dense data table 40px is the practical floor — 44 would make a
     20-row batch editor unusable. The rows still scroll, so reach is fine. */
  .table .btn--sm, .batch .btn--sm{min-height:40px}
}

@media print{.header,.footer,.fab,.cartbar,.topbar,.navbar{display:none!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}