/* ==========================================================================
   بيت (bayt) — theme.css
   Storefront theme for home businesses. Uses ONLY the --sf-* namespace
   (THEME_ENGINE.md P1): no --ds-* tokens, no packages/ui components.
   Every colour / font / radius / button / card decision below reads a
   variable or a data-attribute that comes from StoreTheme.settings.
   Logical properties only (RTL-first). No physical left/right.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Server-inlined variables (stand-in)
   In production the server runs resolveStorePalette()+resolveThemeSettings()
   and inlines this block as <style id="sf-vars"> (~1KB). Values below are the
   output for preset "زعفران" (see presets.js) so every page renders fully
   with JavaScript disabled.
   -------------------------------------------------------------------------- */
:root{--sf-bg:#FBF5EC;--sf-fg:#442415;--sf-fg-muted:#7B6355;--sf-surface:#FDFBF7;--sf-surface-muted:#F1EAE0;--sf-border:#958074;--sf-divider:#E3DAD0;--sf-primary:#B4532A;--sf-primary-fg:#FFFFFF;--sf-primary-hover:#A24B26;--sf-primary-active:#944422;--sf-primary-subtle:#F4E5D9;--sf-primary-subtle-fg:#A64C27;--sf-link:#A64C27;--sf-accent:#E3A33B;--sf-accent-fg:#14100C;--sf-accent-hover:#E6AC4F;--sf-accent-text:#856023;--sf-accent-subtle:#F8EAD3;--sf-ring:#B4532A;--sf-deep:#371F13;--sf-deep-fg:#FFFFFF;--sf-danger:#B42318;--sf-success:#1D7647;--sf-warning:#96560A;--sf-whatsapp:#118648;--sf-font-heading:'Almarai','Segoe UI',Tahoma,system-ui,sans-serif;--sf-font-body:'Almarai','Segoe UI',Tahoma,system-ui,sans-serif;--sf-fs-base:100%;--sf-r-control:12px;--sf-r-card:16px;--sf-r-sheet:20px;--sf-r-button:9999px;--sf-arch:999px;--sf-gap:12px;--sf-section-y:48px;--sf-dur:160ms;--sf-card-ratio:1 / 1}

/* --------------------------------------------------------------------------
   1. Theme-local constants (engineering, not identity)
   Spacing 4/8 scale + type scale re-used from packages/design-tokens
   engineering (allowed by P1). Nothing here is a colour.
   -------------------------------------------------------------------------- */
:root{
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
  --t-xs:.8125rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.125rem;--t-xl:1.375rem;--t-2xl:1.75rem;--t-3xl:2.25rem;
  --gutter:16px;--maxw:1200px;
  --header-h:56px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* raised = xs shadow only (THEME_ENGINE §1.1 cards.style) */
  --shadow-xs:0 1px 2px rgba(20,12,6,.08),0 1px 1px rgba(20,12,6,.04);
  --shadow-sheet:0 -8px 32px rgba(20,12,6,.18);
}
@media (min-width:768px){:root{--gutter:24px;--header-h:72px}}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* typography.scale lives on <html> as a PERCENT (100% / 106.25%): every --t-* is rem, so "large" scales all text,
   and the shopper's own browser text size is still respected (WCAG 1.4.4) */
html{font-size:var(--sf-fs-base);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
/* fixed/sticky bars never cover the focused element (WCAG 2.4.11) */
html[data-page="product"]{scroll-padding-bottom:calc(120px + var(--safe-b))}
html[data-page="cart"],html[data-page="checkout"]{scroll-padding-bottom:calc(112px + var(--safe-b))}
html[data-page="checkout"]{scroll-padding-top:calc(var(--header-h) + 60px)}
html[data-page="collection"]{scroll-padding-top:calc(var(--header-h) + 76px)}
@media (min-width:900px){html[data-page]{scroll-padding-bottom:16px}}
body{margin:0;background:var(--sf-bg);color:var(--sf-fg);font-family:var(--sf-font-body);font-size:1rem;line-height:1.6;
  -webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--sf-font-heading);font-weight:700;line-height:1.3;margin:0;color:var(--sf-fg);text-wrap:balance}
p{margin:0}
a{color:var(--sf-link);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sf-ring);outline-offset:2px;border-radius:4px}
/* On coloured surfaces the primary-coloured ring would vanish (1:1 on tone=primary): use the text colour
   of that surface instead — it is already guaranteed >= 4.5:1 against it (WCAG 2.4.7 / 2.4.13). */
[data-tone="primary"] :focus-visible,[data-tone="accent"] :focus-visible,[data-tone="dark"] :focus-visible,
.ftr :focus-visible,.announce :focus-visible{outline-color:currentColor}
/* No faux-bold Arabic: mixed pairs (readex-plex, kufi-tajawal, kufi-plex) load the body font at 400 ONLY (2 font files,
   THEME_ENGINE §1.3), so every bold UI text uses the heading family (always loaded at 700). In single-family pairs this
   is a no-op. Regular-weight text nested inside bold elements goes back to the body family (heading has no 400 file). */
b,strong,summary,legend,.link-arrow,.announce a,.nav a,.drawer-panel li a,.hero-kicker,.cat,.card-name,.badge,.ends,.bubble .who,
.pay-icons span,.region,.save,.stock,.qty input,.line-name,.line-total,.row-total,.nudge,.field label,.label,.err,.phone .cc,.rcard .amt,
.seg span,.mini-line .p,.status-badge,.kv dd,.region-pill,.card-meta.low,.geo-ok,.amount-due,.gov-opt .amt,.gov-cta,.added-ok,.oos-wa,
.draft-note button,.sample,.trust-item,.chip,.pill-opt span,.fab-wa,.toast,.cart-count,.bb-sum b,.co-progress{font-family:var(--sf-font-heading)}
.cur,.from,.pill-opt small,.opt legend span,.opt-tag{font-family:var(--sf-font-body)}
.num,[dir="ltr"]{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;background:var(--sf-deep);color:var(--sf-deep-fg);padding:12px 16px;border-radius:var(--sf-r-control)}
.skip:focus{top:8px}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--sf-fg-muted)}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:18px;height:18px}
.flip{transform:scaleX(-1)} /* directional icons in RTL */

/* «مثال» — every sample item/section is visibly labelled (THEME_ENGINE §6.3) */
.sample{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:700;line-height:1;padding:5px 8px;border-radius:999px;
  background:var(--sf-accent-subtle);color:var(--sf-fg);border:1px dashed var(--sf-border);vertical-align:middle;white-space:nowrap}
.sample-ribbon{background:var(--sf-surface-muted);color:var(--sf-fg);font-size:var(--t-xs);text-align:center;padding:6px var(--gutter);border-bottom:1px dashed var(--sf-border)}

/* --------------------------------------------------------------------------
   3. Buttons — buttons.style: solid | outline | pill
   Secondary is derived: outline when primary is solid/pill, ghost when outline.
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--sf-r-button);
  font-family:var(--sf-font-heading);font-weight:700;font-size:var(--t-md);text-decoration:none;border:2px solid transparent;white-space:nowrap;
  touch-action:manipulation;transition:background-color var(--sf-dur) var(--ease),transform 80ms var(--ease),color var(--sf-dur),border-color var(--sf-dur)}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn-lg{min-height:56px;font-size:var(--t-lg)}
.btn-primary{background:var(--sf-primary);color:var(--sf-primary-fg)}
.btn-primary:hover{background:var(--sf-primary-hover)}
.btn-primary:active{background:var(--sf-primary-active)}
.btn-secondary{background:transparent;color:var(--sf-link);border-color:var(--sf-link)}
.btn-secondary:hover{background:var(--sf-primary-subtle)}
html[data-buttons="outline"] .btn-primary{background:transparent;color:var(--sf-link);border-color:var(--sf-link)}
html[data-buttons="outline"] .btn-primary:hover{background:var(--sf-primary-subtle)}
html[data-buttons="outline"] .btn-secondary{border-color:transparent;text-decoration:underline}
/* Bayt rule: the ONE conversion CTA in the thumb bar stays filled in every style,
   so "outline" never produces a weak buy button (documented in NOTES.md). */
html[data-buttons="outline"] .btn-primary.btn-commit{background:var(--sf-primary);color:var(--sf-primary-fg);border-color:var(--sf-primary)}
.btn-wa{background:var(--sf-whatsapp);color:#fff}
.btn-wa:hover{filter:brightness(.94)}
.btn-ghost{background:transparent;color:var(--sf-fg);min-height:44px;padding:0 12px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.link-arrow{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:700;text-decoration:none;color:var(--sf-link)}
.link-arrow:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   4. Announcement bar — announcement.tone
   -------------------------------------------------------------------------- */
.announce{font-size:var(--t-sm);text-align:center;padding:8px var(--gutter);line-height:1.5}
.announce[data-tone="primary"]{background:var(--sf-primary);color:var(--sf-primary-fg)}
.announce[data-tone="accent"]{background:var(--sf-accent);color:var(--sf-accent-fg)}
.announce[data-tone="dark"]{background:var(--sf-deep);color:var(--sf-deep-fg)}
.announce[data-tone="subtle"]{background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg)}
.announce a{color:inherit;font-weight:700}

/* --------------------------------------------------------------------------
   5. Header — header.layout / sticky / logoSize
   -------------------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--sf-bg);border-bottom:1px solid var(--sf-divider)}
.hdr-in{height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.hdr-start,.hdr-end{display:flex;align-items:center;gap:4px}
.hdr-end{justify-content:flex-end}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;color:var(--sf-fg);background:transparent;border:0;text-decoration:none}
.icon-btn:hover{background:var(--sf-surface-muted)}
.icon-btn:active{transform:scale(.94)}
.cart-count{position:absolute;top:4px;inset-inline-end:2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--sf-accent);color:var(--sf-accent-fg);
  font-size:12px;font-weight:700;display:grid;place-items:center;line-height:1;border:2px solid var(--sf-bg)}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--sf-fg);font-family:var(--sf-font-heading);font-weight:700;font-size:var(--t-lg);white-space:nowrap}
.logo-mark{width:32px;height:36px;flex:none}
.logo small{display:block;font-family:var(--sf-font-body);font-weight:400;font-size:11px;color:var(--sf-fg-muted);line-height:1}
.nav{display:none}
.hdr-search{display:none}
@media (min-width:768px){
  .nav{display:flex;gap:4px}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--sf-r-control);text-decoration:none;color:var(--sf-fg);font-weight:700;font-size:var(--t-sm)}
  .nav a:hover,.nav a[aria-current="page"]{background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg)}
  .menu-btn{display:none}
  .logo{font-size:var(--t-xl)}
  .logo-mark{width:38px;height:44px}
  /* real search form (spec 02: GET /search?q=) — a pill on desktop */
  .hdr-search{display:flex;align-items:center;gap:8px;height:44px;padding-inline:14px 6px;border-radius:999px;background:var(--sf-surface);border:1px solid var(--sf-border);
    color:var(--sf-fg-muted);font-size:var(--t-sm);width:min(260px,24vw)}
  .hdr-search:focus-within{border-color:var(--sf-ring);box-shadow:0 0 0 3px var(--sf-primary-subtle)}
  .hdr-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:var(--t-sm);color:var(--sf-fg);outline:none}
  .hdr-search input::placeholder{color:var(--sf-fg-muted)}
  .hdr-search-icon{display:none}
}
/* logo_start: logo first, nav after it */
html[data-header="logo_start"] .hdr-in{grid-template-columns:auto 1fr auto}
/* simplified checkout header */
.hdr-min .hdr-in{grid-template-columns:1fr auto 1fr}
.hdr-min .secure{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--sf-fg-muted)}

/* Drawer menu — :target, zero JS (no-JS fallback in production is /menu) */
.drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
.drawer:target{visibility:visible;pointer-events:auto}
.drawer-scrim{position:absolute;inset:0;background:rgba(10,6,3,.45);opacity:0;transition:opacity var(--sf-dur)}
.drawer:target .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(86vw,340px);background:var(--sf-bg);padding:16px;
  border-start-end-radius:var(--sf-r-sheet);border-end-end-radius:var(--sf-r-sheet);transform:translateX(100%);transition:transform calc(var(--sf-dur) * 1.5) var(--ease);overflow:auto}
.drawer:target .drawer-panel{transform:none}
.drawer-panel ul{list-style:none;margin:16px 0;padding:0}
.drawer-panel li a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 8px;text-decoration:none;color:var(--sf-fg);font-weight:700;border-bottom:1px dashed var(--sf-divider)}

/* --------------------------------------------------------------------------
   6. Sections — shared frame
   -------------------------------------------------------------------------- */
.sec{padding-block:calc(var(--sf-section-y) * .66)}
@media (min-width:768px){.sec{padding-block:var(--sf-section-y)}}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:var(--s-4)}
.sec-title{font-size:var(--t-xl);position:relative;padding-bottom:12px}
/* Bayt signature: a hand-stitched underline under every section title, tinted by accent */
.sec-title::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:72px;height:8px;background:var(--sf-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cpath d='M2 5c6-4 10 2 16-1s10-3 16 0 10 2 16-1 10-2 20 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='5 4'/%3E%3C/svg%3E") no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cpath d='M2 5c6-4 10 2 16-1s10-3 16 0 10 2 16-1 10-2 20 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='5 4'/%3E%3C/svg%3E") no-repeat}
.sec-sub{color:var(--sf-fg-muted);font-size:var(--t-sm);margin-top:4px}
@media (min-width:768px){.sec-title{font-size:var(--t-2xl)}}
/* Tone (THEME_ENGINE §2.2) — section backgrounds come from the palette only */
[data-tone="muted"]{background:var(--sf-surface-muted)}
[data-tone="primary"].sec,[data-tone="primary"].tone-box{background:var(--sf-primary);color:var(--sf-primary-fg)}
[data-tone="accent"].sec,[data-tone="accent"].tone-box{background:var(--sf-accent);color:var(--sf-accent-fg)}
[data-tone="dark"].sec,[data-tone="dark"].tone-box{background:var(--sf-deep);color:var(--sf-deep-fg)}
[data-tone="primary"] h2,[data-tone="accent"] h2,[data-tone="dark"] h2{color:inherit}

/* Section outline mode (switcher → "إظهار الأقسام") proves the page is a list of sections */
html.show-sections [data-section]{outline:2px dashed #2563EB;outline-offset:-2px;position:relative}
html.show-sections [data-section]::before{content:attr(data-section) " · " attr(data-variant);position:absolute;top:6px;inset-inline-end:6px;z-index:5;
  background:#1E3A8A;color:#fff;font:700 11px/1 ui-monospace,Consolas,monospace;padding:5px 7px;border-radius:4px;direction:ltr}

/* --------------------------------------------------------------------------
   7. trust_badges (row) — derived items only, placed up front in bayt
   -------------------------------------------------------------------------- */
.trust{background:var(--sf-surface);border-bottom:1px dashed var(--sf-border)}
/* Phones: exactly TWO fixed answers, side by side, never a scroller — «الدفع عند الاستلام» + «التوصيل إلى محافظتك».
   Wallets / WhatsApp / exchange policy stay in the footer and the FAQ (they appear here again from 768px). */
.trust-list{list-style:none;margin:0;padding:8px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trust-list>li:nth-child(n+3){display:none}
.trust-item{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg);
  font-size:var(--t-xs);font-weight:700;line-height:1.25;text-align:center;text-decoration:none;min-height:44px;height:100%}
a.trust-item:hover{text-decoration:underline}
.trust-item .icon{width:20px;height:20px}
@media (min-width:768px){
  .trust-list{display:flex;flex-wrap:wrap;justify-content:center}
  .trust-list>li:nth-child(n+3){display:block}
  .trust-item{padding:6px 12px 6px 14px;font-size:var(--t-sm);white-space:nowrap}
}
html[data-trust-icons="filled"] .trust-item{background:var(--sf-primary);color:var(--sf-primary-fg)}

/* --------------------------------------------------------------------------
   8. hero — variant "split"; bayt's arch window + qamariya fan
   -------------------------------------------------------------------------- */
/* Phones: a SHORT hero (~250px at 360×740, well under 55% of the screen) so the first product row starts above the fold.
   The arch shrinks to a 112px window beside the headline; the hand-written note waits for desktop. */
.hero{position:relative;overflow:hidden;padding-block:var(--s-4) var(--s-5);
  background-image:radial-gradient(var(--sf-divider) 1.2px,transparent 1.4px);background-size:22px 22px;background-position:center top}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:var(--s-4);row-gap:6px;align-items:center}
.hero-grid>.hero-copy{display:contents}
.hero-copy>*{grid-column:1}
.hero-grid>.hero-art{grid-column:2;grid-row:1 / span 3}
.hero-grid .hero-ctas{grid-column:1 / -1}
.hero-art{position:relative;width:112px}
@media (max-width:899px){
  .hero-note{display:none}
  .hero-copy>*{text-align:start}
  .hero-sub{font-size:var(--t-md);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-ctas{margin-top:var(--s-3)!important}
  .hero-ctas .btn{flex:1 1 0!important;min-width:0;min-height:48px;font-size:var(--t-md);padding:0 12px}
  .hero .arch{box-shadow:0 0 0 4px var(--sf-surface),0 0 0 5px var(--sf-divider)}
  .hide-sm{display:none}
}
.arch{position:relative;overflow:hidden;border-radius:var(--sf-arch) var(--sf-arch) var(--sf-r-card) var(--sf-r-card);background:var(--sf-surface-muted);aspect-ratio:4 / 5;
  box-shadow:0 0 0 6px var(--sf-surface),0 0 0 7px var(--sf-divider)}
.arch img{width:100%;height:100%;object-fit:cover}
.qamariya{position:absolute;inset-inline:12%;top:-2px;height:auto;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 0 var(--sf-surface))}
html[data-radius="none"] .qamariya,html[data-radius="sm"] .qamariya{display:none}
.hero-note{position:absolute;inset-inline-end:-6px;bottom:22px;z-index:3;background:var(--sf-surface);color:var(--sf-fg);border-radius:var(--sf-r-card);padding:10px 14px;
  box-shadow:var(--shadow-xs);border:1px dashed var(--sf-border);font-size:var(--t-sm);max-width:190px;rotate:-3deg}
.hero-note b{display:block;font-family:var(--sf-font-heading);color:var(--sf-link)}
.hero-copy{text-align:center}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:700;color:var(--sf-accent-text);margin-bottom:8px}
.hero h1{font-size:clamp(1.5rem,6.4vw,3.25rem);line-height:1.25;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--sf-link);position:relative;white-space:nowrap}
.hero-sub{color:var(--sf-fg-muted);font-size:var(--t-lg);margin:12px auto 0;max-width:34ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--s-5)}
.hero-ctas .btn{flex:1 1 200px;max-width:280px}
@media (min-width:900px){
  .hero{padding-block:var(--s-7) var(--s-8)}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:var(--s-7)}
  .hero-grid>.hero-copy{display:block;text-align:start}
  .hero-grid>.hero-art{grid-column:auto;grid-row:auto}
  .hero-sub{margin-inline:0}
  .hero-ctas{justify-content:flex-start}
  .hero-art{width:100%;max-width:440px}
}
/* page-load choreography: CSS only, once — and it NEVER hides an LCP candidate:
   · the headline block only moves (transform), it is fully painted on the first frame;
   · the arch "opens" with a curtain (::after) lifting OFF the image — the <img> itself is painted at once.
   Off under motion:none, prefers-reduced-motion and «توفير البيانات». */
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
@keyframes riseFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* decorative note only */
@keyframes curtain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes fan{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
.arch::after{content:"";position:absolute;inset:0;z-index:1;background:var(--sf-surface-muted);clip-path:inset(0 0 100% 0);pointer-events:none}
html[data-motion="subtle"] .hero-copy>*{animation:rise .6s var(--ease) both}
html[data-motion="subtle"] .hero-copy>*:nth-child(2){animation-delay:.06s}
html[data-motion="subtle"] .hero-copy>*:nth-child(3){animation-delay:.12s}
html[data-motion="subtle"] .hero-copy>*:nth-child(4){animation-delay:.18s}
html[data-motion="subtle"] .arch::after{animation:curtain .8s var(--ease) both}
html[data-motion="subtle"] .qamariya{animation:fan .7s .45s var(--ease) both;transform-origin:50% 100%}
html[data-motion="subtle"] .hero-note{animation:riseFade .5s .7s var(--ease) both}
html.save-data .hero-copy>*,html.save-data .arch::after,html.save-data .hero-note{animation:none}

/* --------------------------------------------------------------------------
   9. categories — bayt renders the "circles" variant as little arched windows
   -------------------------------------------------------------------------- */
.cats{list-style:none;margin:0;padding:4px 0 8px;display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.cats::-webkit-scrollbar{display:none}
.cat{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--sf-fg);font-weight:700;font-size:var(--t-sm);text-align:center}
.cat-img{width:96px;aspect-ratio:4 / 5;border-radius:var(--sf-arch) var(--sf-arch) var(--sf-r-control) var(--sf-r-control);overflow:hidden;background:var(--sf-surface-muted);
  box-shadow:0 0 0 3px var(--sf-bg),0 0 0 4px var(--sf-divider);transition:box-shadow var(--sf-dur),transform var(--sf-dur) var(--ease)}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat:hover .cat-img,.cat:focus-visible .cat-img{box-shadow:0 0 0 3px var(--sf-bg),0 0 0 5px var(--sf-primary);transform:translateY(-3px)}
.cat-img.letter{display:grid;place-items:center;font-family:var(--sf-font-heading);font-size:var(--t-2xl);color:var(--sf-primary-subtle-fg);background:var(--sf-primary-subtle)}
@media (min-width:900px){.cats{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible;margin-inline:0;padding-inline:0}.cat-img{width:100%;max-width:150px}}

/* --------------------------------------------------------------------------
   10. Product card — cards.style / cards.imageRatio / density
   Whole card is one link (01-home). Big, friendly, one badge max.
   -------------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sf-gap)}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--sf-gap) + 8px)}}
@media (min-width:1024px){.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--sf-fg);border-radius:var(--sf-r-card);background:transparent;
  transition:transform var(--sf-dur) var(--ease),box-shadow var(--sf-dur)}
.card-media{position:relative;aspect-ratio:var(--sf-card-ratio);border-radius:var(--sf-r-card);overflow:hidden;background:var(--sf-surface-muted)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform calc(var(--sf-dur) * 3) var(--ease)}
.card-body{padding:10px 4px 4px;display:flex;flex-direction:column;gap:4px;flex:1}
.card-name{font-weight:700;font-size:var(--t-md);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.card-meta{font-size:var(--t-xs);color:var(--sf-fg-muted)}
.card-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:auto;padding-top:4px}
.price{font-family:var(--sf-font-heading);font-weight:700;font-size:var(--t-lg);color:var(--sf-fg);white-space:nowrap}
.price-sale{color:var(--sf-accent-text)}
.price-was{color:var(--sf-fg-muted);text-decoration:line-through;font-size:var(--t-sm);white-space:nowrap}
.cur{font-size:.78em;font-weight:400}
.from{font-size:.72em;font-weight:400;color:var(--sf-fg-muted)} /* «من 4,500» on multi-price cards */
html[data-cards="bordered"] .card{background:var(--sf-surface);border:1px solid var(--sf-border)}
html[data-cards="raised"] .card{background:var(--sf-surface);box-shadow:var(--shadow-xs)}
html[data-cards="bordered"] .card-media,html[data-cards="raised"] .card-media{border-end-start-radius:0;border-end-end-radius:0}
html[data-cards="bordered"] .card-body,html[data-cards="raised"] .card-body{padding:12px}
@media (hover:hover){
  html[data-motion="subtle"] .card:hover{transform:translateY(-3px)}
  html[data-motion="subtle"] .card:hover .card-media img{transform:scale(1.04)}
}
.card:active{transform:scale(.98)}
.card.is-oos .card-media img{filter:grayscale(.7);opacity:.7}
/* Badges: one max, priority oos > sale > new */
.badge{position:absolute;top:10px;inset-inline-start:10px;z-index:2;font-size:var(--t-xs);font-weight:700;line-height:1;padding:6px 10px;border-radius:999px}
.badge-sale{background:var(--sf-accent);color:var(--sf-accent-fg)}
.badge-new{background:var(--sf-primary);color:var(--sf-primary-fg)}
.badge-oos{background:var(--sf-deep);color:var(--sf-deep-fg)}
/* «مثال» on a card = ONE small corner tag on the image, never inside the name/price block */
.card .sample{position:absolute;top:10px;inset-inline-end:10px;z-index:2}
@media (max-width:767px){.card .sample{top:6px;inset-inline-end:6px;font-size:11px;padding:3px 6px;border-style:solid;border-color:var(--sf-divider)}}
/* carousel layout (scroll-snap, no JS) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44%,1fr);gap:var(--sf-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media (min-width:768px){.rail{grid-auto-columns:calc((100% - 3 * var(--sf-gap)) / 4)}}

/* --------------------------------------------------------------------------
   11. whatsapp_cta (card) — bayt's warm "order like you'd message a neighbour"
   -------------------------------------------------------------------------- */
.wa-card{position:relative;overflow:hidden;display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--sf-r-sheet)}
.wa-card h2{font-size:var(--t-xl)}
.wa-card p{max-width:46ch} /* no opacity: faded text on primary fell to 4.47:1 */
.wa-card .btn{justify-self:start}
.wa-card-art{position:absolute;inset-inline-end:-30px;bottom:-40px;width:180px;opacity:.16;pointer-events:none}
.wa-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--t-sm)}
.wa-steps li{display:flex;gap:10px;align-items:center}
.wa-steps b{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.18);border:1px dashed currentColor;flex:none;font-size:var(--t-xs)}
[data-tone="accent"] .wa-steps b{background:rgba(0,0,0,.08)}
@media (min-width:900px){.wa-card{grid-template-columns:1.2fr 1fr auto;align-items:center;padding:var(--s-6) var(--s-7)}.wa-card .btn{justify-self:end}}

/* offers — honest end time (static text, countdown island optional) */
.offer-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ends{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:700;color:var(--sf-accent-text);background:var(--sf-accent-subtle);padding:6px 10px;border-radius:999px}

/* image_text */
.it{display:grid;gap:var(--s-5);align-items:center}
.it-img{border-radius:var(--sf-r-card);overflow:hidden;aspect-ratio:4 / 5;background:var(--sf-surface-muted);max-width:420px;width:100%;margin-inline:auto;
  border-start-start-radius:var(--sf-arch);border-start-end-radius:var(--sf-arch)}
.it-img img{width:100%;height:100%;object-fit:cover}
.it-body{display:grid;gap:12px}
.it-body p{color:var(--sf-fg-muted);font-size:var(--t-lg)}
.signature{font-family:var(--sf-font-heading);color:var(--sf-link);font-size:var(--t-xl)}
@media (min-width:900px){.it{grid-template-columns:1fr 1.1fr;gap:var(--s-8)}}

/* testimonials — rendered as WhatsApp-style chat bubbles (no stars: no reviews model) */
.bubbles{display:grid;gap:var(--s-4)}
@media (min-width:900px){.bubbles{grid-template-columns:repeat(3,1fr)}}
.bubble{position:relative;background:var(--sf-surface);border:1px solid var(--sf-divider);border-radius:var(--sf-r-card);border-start-start-radius:4px;padding:14px 16px 10px;box-shadow:var(--shadow-xs)}
.bubble::before{content:"";position:absolute;top:-1px;inset-inline-start:-9px;width:10px;height:14px;background:inherit;border-top:1px solid var(--sf-divider);clip-path:polygon(100% 0,0 0,100% 100%)}
[dir="rtl"] .bubble::before{clip-path:polygon(0 0,100% 0,0 100%)} /* mirror the tail shape in RTL */
.bubble q{display:block;quotes:none;font-size:var(--t-md)}
.bubble footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:var(--t-xs);color:var(--sf-fg-muted)}
.bubble .who{font-weight:700;color:var(--sf-fg)}

/* faq (boxed) — <details>, zero JS */
.faq{display:grid;gap:8px;max-width:760px}
.faq details{background:var(--sf-surface);border:1px solid var(--sf-divider);border-radius:var(--sf-r-card)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 16px;font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--sf-link);transition:transform var(--sf-dur)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 16px 16px;color:var(--sf-fg-muted)}

/* --------------------------------------------------------------------------
   12. Footer — footer.tone
   -------------------------------------------------------------------------- */
.ftr{padding-block:var(--s-7) calc(var(--s-6) + var(--safe-b));margin-top:var(--s-6)}
.ftr[data-tone="light"]{background:var(--sf-surface-muted);color:var(--sf-fg)}
.ftr[data-tone="dark"]{background:var(--sf-deep);color:var(--sf-deep-fg)}
.ftr[data-tone="brand"]{background:var(--sf-primary);color:var(--sf-primary-fg)}
.ftr a{color:inherit}
.ftr-grid{display:grid;gap:var(--s-5)}
@media (min-width:768px){.ftr-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.ftr h3{font-size:var(--t-md);margin-bottom:8px;color:inherit}
.ftr ul{list-style:none;margin:0;padding:0}
/* footer text keeps full opacity: faded white on a merchant "brand" footer dropped below 4.5:1 */
.ftr li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.ftr li a:hover{text-decoration:underline}
.ftr .about{max-width:36ch;margin-top:8px}
.pay-icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pay-icons span{font-size:var(--t-xs);font-weight:700;padding:6px 10px;border-radius:var(--sf-r-control);border:1px solid currentColor}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px dashed currentColor;font-size:var(--t-xs)}
.ftr-bottom label{display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* Floating WhatsApp — social.floatingWhatsapp (plain wa.me link, zero JS; hidden on cart/checkout) */
.fab-wa{position:fixed;z-index:35;inset-inline-end:16px;bottom:calc(16px + var(--safe-b) + var(--bar-offset,0px));display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 18px 0 16px;border-radius:999px;
  background:var(--sf-whatsapp);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.fab-wa .icon{width:26px;height:26px}
@media (max-width:767px){.fab-wa span{display:none}.fab-wa{width:56px;padding:0;justify-content:center}}
html[data-page="cart"] .fab-wa,html[data-page="checkout"] .fab-wa{display:none}
/* product on phones: the page already has «اسأل على واتساب» + a two-button buy bar — no third floating target */
@media (max-width:899px){html[data-page="product"] .fab-wa{display:none}}

/* --------------------------------------------------------------------------
   13. Collection page (templates.collection)
   -------------------------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--t-sm);color:var(--sf-fg-muted);padding-block:12px 4px;list-style:none;margin:0}
.crumbs a{color:var(--sf-fg-muted)}
.crumbs li+li::before{content:"‹";margin-inline-end:6px}
.plp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.plp-head h1{font-size:var(--t-2xl)}
.region-note{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--sf-fg-muted)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px var(--gutter);margin-inline:calc(var(--gutter) * -1);scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--sf-border);background:var(--sf-surface);
  color:var(--sf-fg);text-decoration:none;font-weight:700;font-size:var(--t-sm)}
.chip[aria-current="page"],.chip.is-on{background:var(--sf-fg);color:var(--sf-bg);border-color:var(--sf-fg)}
.chip-x{background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg);border-color:transparent}
.toolbar{position:sticky;top:var(--header-h);z-index:30;background:var(--sf-bg);display:flex;gap:8px;align-items:center;padding-block:8px;border-bottom:1px solid var(--sf-divider);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
.toolbar .btn{min-height:44px;padding:0 16px;font-size:var(--t-sm)}
.select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 14px;padding-inline-end:36px;border-radius:var(--sf-r-control);border:1px solid var(--sf-border);background-color:var(--sf-surface);
  font-size:16px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:left 18px center,left 13px center;background-size:5px 5px;background-repeat:no-repeat}
.plp{display:grid;gap:var(--s-5);padding-block:var(--s-4) var(--s-6)}
.filters-side{display:none}
@media (min-width:1024px){
  .plp{grid-template-columns:256px 1fr}
  .filters-side{display:block;position:sticky;top:calc(var(--header-h) + 16px);align-self:start}
  .toolbar .open-filters{display:none}
}
.fgroup{border-bottom:1px dashed var(--sf-divider);padding-block:16px}
.fgroup h3{font-size:var(--t-md);margin-bottom:10px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--sf-primary);flex:none;margin:0}
.range-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:var(--s-6)}
.pager .btn{min-width:120px}
/* bottom sheet via :target (zero JS) */
.sheet{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.sheet:target,.sheet.is-open{visibility:visible;pointer-events:auto}
.sheet-scrim{position:absolute;inset:0;background:rgba(10,6,3,.45);opacity:0;transition:opacity var(--sf-dur)}
.sheet:target .sheet-scrim,.sheet.is-open .sheet-scrim{opacity:1}
.sheet-panel{position:absolute;inset-inline:0;bottom:0;max-height:85dvh;display:flex;flex-direction:column;background:var(--sf-bg);border-radius:var(--sf-r-sheet) var(--sf-r-sheet) 0 0;box-shadow:var(--shadow-sheet);
  transform:translateY(100%);transition:transform calc(var(--sf-dur) * 1.6) var(--ease)}
.sheet:target .sheet-panel,.sheet.is-open .sheet-panel{transform:none}
/* search opens from the TOP so the phone keyboard never covers the field */
.sheet-top .sheet-panel{bottom:auto;top:0;border-radius:0 0 var(--sf-r-sheet) var(--sf-r-sheet);transform:translateY(-100%)}
@media (min-width:768px){.sheet .sheet-panel{inset-inline:auto;width:min(480px,100%);inset-inline-start:50%;translate:50% 0}
  [dir="ltr"] .sheet .sheet-panel{translate:-50% 0}}
.sheet-grab{width:40px;height:4px;border-radius:4px;background:var(--sf-border);margin:8px auto 0}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--sf-divider)}
.sheet-body{overflow:auto;padding:0 16px}
.sheet-foot{display:flex;gap:12px;align-items:center;padding:12px 16px calc(12px + var(--safe-b));border-top:1px solid var(--sf-divider)}

/* --------------------------------------------------------------------------
   14. Product page (templates.product)
   -------------------------------------------------------------------------- */
.pdp{display:grid;gap:var(--s-5);padding-bottom:calc(120px + var(--safe-b))}
@media (min-width:900px){.pdp{grid-template-columns:55fr 45fr;gap:var(--s-7);padding-block:var(--s-5) var(--s-7)}}
.gallery{position:relative;margin-inline:calc(var(--gutter) * -1)}
@media (min-width:900px){.gallery{margin-inline:0;position:sticky;top:calc(var(--header-h) + 16px);align-self:start}}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.g-track::-webkit-scrollbar{display:none}
.g-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1 / 1;background:var(--sf-surface-muted);overflow:hidden}
.g-slide picture{display:block;width:100%;height:100%}
.g-slide img{width:100%;height:100%;object-fit:cover}
.g-slide.zoom img{transform:scale(1.7);transform-origin:45% 40%}
.g-slide.zoom2 img{transform:scale(1.5);transform-origin:70% 70%}
@media (min-width:900px){.g-track{border-radius:var(--sf-arch) var(--sf-arch) var(--sf-r-card) var(--sf-r-card)}}
.g-dots{position:absolute;bottom:12px;inset-inline:0;display:flex;justify-content:center;gap:6px}
/* dots: 8px visual, 24px hit area (WCAG 2.5.8) via a transparent border clipped from the background */
.g-dots{gap:0}
.g-dots a{box-sizing:content-box;width:8px;height:8px;border:8px solid transparent;background:var(--sf-surface) padding-box;border-radius:99px;opacity:.75;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.g-dots a:first-child{width:22px;opacity:1}
.g-count{position:absolute;top:12px;inset-inline-end:12px;background:rgba(20,12,6,.6);color:#fff;font-size:var(--t-xs);padding:4px 10px;border-radius:99px}
.g-thumbs{display:none}
@media (min-width:900px){.g-thumbs{display:flex;gap:8px;margin-top:12px}.g-thumbs a{width:72px;aspect-ratio:1;border-radius:var(--sf-r-control);overflow:hidden;border:2px solid transparent}.g-thumbs a:first-child{border-color:var(--sf-primary)}.g-thumbs img{width:100%;height:100%;object-fit:cover}.g-dots{display:none}}
.pd{display:grid;gap:var(--s-4);align-content:start}
.pd h1{font-size:var(--t-2xl)}
.pd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px}
.pd-price .price{font-size:var(--t-3xl);line-height:1.1}
.region{font-size:var(--t-sm);font-weight:700;color:var(--sf-fg-muted);white-space:nowrap}
.save{background:var(--sf-accent);color:var(--sf-accent-fg);font-size:var(--t-xs);font-weight:700;padding:5px 9px;border-radius:999px}
.sar-hint{font-size:var(--t-sm);color:var(--sf-fg-muted);margin-top:-8px}
.stock{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--t-sm)}
.stock::before{content:"";width:10px;height:10px;border-radius:99px;background:currentColor;box-shadow:0 0 0 4px var(--sf-surface-muted)}
.stock-ok{color:var(--sf-success)}
.stock-low{color:var(--sf-warning)}
.stock-out{color:var(--sf-danger)}
.opt{border:0;margin:0;padding:0;display:grid;gap:10px}
.opt legend{font-weight:700;padding:0;margin-bottom:10px}
.opt legend span{font-weight:400;color:var(--sf-fg-muted)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.pill-opt{position:relative}
.pill-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill-opt span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;min-width:64px;padding:6px 16px;border-radius:var(--sf-r-control);border:1.5px solid var(--sf-border);
  background:var(--sf-surface);font-weight:700;line-height:1.3;text-align:center;transition:border-color var(--sf-dur),background var(--sf-dur)}
.pill-opt small{font-weight:400;font-size:var(--t-xs);color:var(--sf-fg-muted)}
.pill-opt input:checked+span{border-color:var(--sf-primary);background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg);box-shadow:inset 0 0 0 1px var(--sf-primary)}
.pill-opt input:focus-visible+span{outline:3px solid var(--sf-ring);outline-offset:2px}
.pill-opt.is-oos span{color:var(--sf-fg-muted);text-decoration:line-through;border-style:dashed}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--sf-border);border-radius:var(--sf-r-button);background:var(--sf-surface);height:48px}
.qty button{width:48px;height:100%;border:0;background:transparent;display:grid;place-items:center;border-radius:inherit}
.qty button:active{transform:scale(.9)}
.qty input{width:44px;text-align:center;border:0;background:transparent;font-weight:700;font-size:16px;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty-sm{height:40px}.qty-sm button{width:40px}
.info-list{list-style:none;margin:0;padding:0;border:1px dashed var(--sf-border);border-radius:var(--sf-r-card);background:var(--sf-surface)}
.info-list li{display:flex;gap:12px;padding:14px 16px;align-items:flex-start}
.info-list li+li{border-top:1px dashed var(--sf-divider)}
.info-list .icon{color:var(--sf-link);margin-top:2px}
.info-list b{display:block}
.info-list span{color:var(--sf-fg-muted);font-size:var(--t-sm)}
.desc{color:var(--sf-fg)}
.desc p+p{margin-top:8px}
.desc details summary{list-style:none;cursor:pointer;color:var(--sf-link);font-weight:700;min-height:44px;display:flex;align-items:center}
.desc details summary::-webkit-details-marker{display:none}
.ask-wa{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--sf-r-card);background:var(--sf-surface-muted);text-decoration:none;color:var(--sf-fg)}
.ask-wa .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:99px;background:var(--sf-whatsapp);color:#fff;flex:none}
.ask-wa b{display:block}
.ask-wa span{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.buy-inline{display:none}
@media (min-width:900px){.buy-inline{display:flex;gap:12px}.buy-inline .btn{flex:1}.buy-inline .btn-buynow{flex:0 0 auto}}
/* sticky buy bar — mobile, cannot be disabled (templates.product.stickyBuyBar) */
/* One clear primary: «أضف للسلة · المبلغ» comes FIRST in the DOM (= the right, thumb side, in RTL) and takes the width;
   «اطلب الآن» is a compact secondary. A summary line above repeats what is being bought (size · qty) and, once the
   shopper's governorate is known, the approximate total with delivery. */
.buybar{position:fixed;inset-inline:0;bottom:0;z-index:45;background:var(--sf-bg);border-top:1px solid var(--sf-divider);padding:8px var(--gutter) calc(10px + var(--safe-b));
  display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;box-shadow:0 -6px 20px rgba(20,12,6,.08)}
.buybar .btn{flex:1 1 0;min-width:0;min-height:52px}
.buybar .btn-buynow{flex:0 0 auto;padding:0 16px;font-size:var(--t-sm)}
.bb-sum{flex:1 0 100%;margin:0;font-size:var(--t-xs);color:var(--sf-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-sum b{color:var(--sf-fg)}
@media (min-width:900px){.buybar{display:none}}
html[data-page="product"]{--bar-offset:100px}
/* «التوصيل إلى محافظتك» sits right ABOVE the buy buttons: price + where + how much to get it here, in one look */
.pd-ship{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--sf-r-card);background:var(--sf-surface);border:1px dashed var(--sf-border)}
.pd-ship .icon{color:var(--sf-link);margin-top:2px}
.pd-ship b{display:block}
.pd-ship p{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.pd-ship .gov-cta{min-height:44px}
@media (min-width:900px){html[data-page="product"]{--bar-offset:0px}}

/* --------------------------------------------------------------------------
   15. Cart & checkout (follow global settings only — THEME_ENGINE §3.4)
   -------------------------------------------------------------------------- */
.page-title{font-size:var(--t-2xl);padding-block:var(--s-5) var(--s-3)}
.two-col{display:grid;gap:var(--s-5);padding-bottom:calc(120px + var(--safe-b))}
@media (min-width:900px){.two-col{grid-template-columns:62fr 38fr;gap:var(--s-6);padding-bottom:var(--s-7)}.two-col>aside{position:sticky;top:calc(var(--header-h) + 16px);align-self:start}}
.panel{background:var(--sf-surface);border:1px solid var(--sf-divider);border-radius:var(--sf-r-card);padding:var(--s-4)}
.panel+.panel{margin-top:var(--s-3)}
.line{display:grid;grid-template-columns:88px 1fr;gap:12px;padding-block:14px}
.line+.line{border-top:1px dashed var(--sf-divider)}
.line-img{width:88px;aspect-ratio:1;border-radius:var(--sf-r-control);overflow:hidden;background:var(--sf-surface-muted)}
.line-img img{width:100%;height:100%;object-fit:cover}
.line-top{display:flex;justify-content:space-between;gap:8px}
.line-name{font-weight:700;text-decoration:none;color:var(--sf-fg)}
.line-var{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.line-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.line-total{font-weight:700;white-space:nowrap}
.rows{display:grid;gap:10px;font-size:var(--t-md)}
.row{display:flex;justify-content:space-between;gap:12px}
.row-total{border-top:2px dashed var(--sf-divider);padding-top:12px;font-weight:700;font-size:var(--t-lg);align-items:baseline}
.row-total .price{font-size:var(--t-xl)}
.coupon summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--sf-link)}
.coupon summary::-webkit-details-marker{display:none}
.coupon form{display:flex;gap:8px;margin-top:8px}
.nudge{display:flex;gap:10px;align-items:center;font-size:var(--t-sm);padding:10px 12px;border-radius:var(--sf-r-control);background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg);font-weight:700}
.bar-bottom{position:fixed;inset-inline:0;bottom:0;z-index:45;background:var(--sf-bg);border-top:1px solid var(--sf-divider);padding:10px var(--gutter) calc(10px + var(--safe-b));box-shadow:0 -6px 20px rgba(20,12,6,.08)}
.bar-bottom .hint{text-align:center;font-size:var(--t-xs);color:var(--sf-fg-muted);margin-top:6px}
@media (min-width:900px){.bar-bottom{display:none}}
.aside-cta{display:none}
@media (min-width:900px){.aside-cta{display:block;margin-top:var(--s-4)}}

/* fields */
.field{display:grid;gap:6px}
.field+.field{margin-top:var(--s-4)}
.field label,.label{font-weight:700;font-size:var(--t-sm)}
.req{color:var(--sf-danger)}
.opt-tag{font-weight:400;color:var(--sf-fg-muted)}
.input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border-radius:var(--sf-r-control);border:1.5px solid var(--sf-border);background:var(--sf-surface);font-size:16px;color:var(--sf-fg)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:left 20px center,left 15px center;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:40px}
.field textarea{min-height:88px;resize:vertical}
.input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sf-ring);box-shadow:0 0 0 3px var(--sf-primary-subtle)}
.help{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.err{font-size:var(--t-sm);color:var(--sf-danger);font-weight:700;display:flex;gap:6px;align-items:center}
.field.has-err .input{border-color:var(--sf-danger)}
.phone{display:flex;direction:ltr;border:1.5px solid var(--sf-border);border-radius:var(--sf-r-control);background:var(--sf-surface);overflow:hidden}
.phone:focus-within{border-color:var(--sf-ring);box-shadow:0 0 0 3px var(--sf-primary-subtle)}
.phone .cc{display:grid;place-items:center;padding:0 12px;background:var(--sf-surface-muted);font-weight:700;border-inline-end:1px solid var(--sf-divider)}
.phone input{border:0;min-height:50px;flex:1;min-width:0;padding:0 12px;font-size:16px;background:transparent;outline:none;text-align:start}
.step{position:relative;padding:var(--s-5) var(--s-4);border-radius:var(--sf-r-card);background:var(--sf-surface);border:1px solid var(--sf-divider)}
.step+.step{margin-top:var(--s-3)}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-4)}
.step-h h2{font-size:var(--t-lg)}
.step-n{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--sf-primary);color:var(--sf-primary-fg);font-weight:700;flex:none;font-family:var(--sf-font-heading)}
.grid-2{display:grid;gap:var(--s-4)}
.grid-2 .field+.field{margin-top:0}
@media (min-width:600px){.grid-2{grid-template-columns:1fr 1fr}}
/* radio cards */
.rcard{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border:1.5px solid var(--sf-border);border-radius:var(--sf-r-control);background:var(--sf-surface);cursor:pointer;min-height:64px}
.rcard+.rcard,.rcard+.rdetails+.rcard{margin-top:10px}
.rcard input{width:22px;height:22px;accent-color:var(--sf-primary);margin:0}
.rcard b{display:block}
.rcard .sub{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.rcard:has(input:checked){border-color:var(--sf-primary);background:var(--sf-primary-subtle);box-shadow:inset 0 0 0 1px var(--sf-primary)}
.rcard .amt{font-weight:700;white-space:nowrap}
.rdetails{display:none;margin:10px 0 0;padding:16px;border-radius:var(--sf-r-control);border:1.5px dashed var(--sf-border);background:var(--sf-bg)}
.pay:has(#pay-wallet:checked) .rdetails-wallet,.rdetails.is-open{display:block}
.xfer{display:grid;gap:12px}
.xfer-num{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--sf-r-control);background:var(--sf-surface);border:1px solid var(--sf-divider)}
.xfer-num strong{font-size:var(--t-xl);letter-spacing:.04em;font-family:ui-monospace,Consolas,monospace}
.wallet-tabs{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0}
.seg span{display:grid;place-items:center;min-height:48px;padding:6px 10px;text-align:center;border-radius:var(--sf-r-control);border:1.5px solid var(--sf-border);background:var(--sf-surface);font-weight:700;font-size:var(--t-sm)}
.seg input:checked+span{border-color:var(--sf-primary);background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg)}
.seg input:focus-visible+span{outline:3px solid var(--sf-ring);outline-offset:2px}
.summary-fold summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:56px;padding:0 16px;font-weight:700}
.summary-fold summary::-webkit-details-marker{display:none}
.summary-fold{background:var(--sf-surface-muted);border-radius:var(--sf-r-card);margin-top:var(--s-4)}
.summary-fold>div{padding:0 16px 12px}
@media (min-width:900px){.summary-fold{display:none}}
.mini-line{display:flex;gap:10px;align-items:center;padding-block:8px;font-size:var(--t-sm)}
.mini-line img{width:48px;height:48px;border-radius:var(--sf-r-control);object-fit:cover;flex:none}
.mini-line .q{color:var(--sf-fg-muted)}
.mini-line .p{margin-inline-start:auto;font-weight:700;white-space:nowrap}

/* alerts & states */
.alert{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--sf-r-control);background:var(--sf-surface);border:1px solid var(--sf-divider);border-inline-start:4px solid currentColor;font-size:var(--t-sm)}
.alert>div{color:var(--sf-fg)}
.alert-warning{color:var(--sf-warning)}
.alert-danger{color:var(--sf-danger)}
.alert-success{color:var(--sf-success)}
.alert b{display:block;color:var(--sf-fg)}
.skel{background:linear-gradient(90deg,var(--sf-surface-muted),var(--sf-divider),var(--sf-surface-muted));background-size:200% 100%;border-radius:var(--sf-r-control);min-height:16px}
html[data-motion="subtle"] .skel{animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.states{margin-block:var(--s-7) var(--s-6);padding:var(--s-5);border:2px dashed var(--sf-border);border-radius:var(--sf-r-sheet)}
.states>h2{font-size:var(--t-lg)}
.states>p{color:var(--sf-fg-muted);font-size:var(--t-sm);margin-bottom:var(--s-4)}
.states-grid{display:grid;gap:var(--s-4)}
@media (min-width:900px){.states-grid{grid-template-columns:repeat(2,1fr)}}
.state-card{background:var(--sf-bg);border:1px solid var(--sf-divider);border-radius:var(--sf-r-card);padding:var(--s-4)}
.state-card>.label{display:block;margin-bottom:10px;color:var(--sf-fg-muted);font-size:var(--t-xs);text-transform:none}
.empty{text-align:center;display:grid;justify-items:center;gap:10px;padding:var(--s-5) var(--s-3)}
.empty-art{width:120px;height:132px}
.empty h3{font-size:var(--t-lg)}

/* --------------------------------------------------------------------------
   16. Order tracking
   -------------------------------------------------------------------------- */
.track{max-width:720px;margin-inline:auto;padding-block:var(--s-5) var(--s-7)}
@media (min-width:1024px){.track.wide{max-width:1040px}.track-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-5);align-items:start}}
.celebrate{position:relative;overflow:hidden;text-align:center;padding:var(--s-6) var(--s-4);border-radius:var(--sf-r-sheet);background:var(--sf-primary-subtle);color:var(--sf-primary-subtle-fg);margin-bottom:var(--s-5)}
.celebrate h1{color:inherit;font-size:var(--t-2xl)}
.celebrate p{color:var(--sf-fg);margin-top:6px}
.celebrate .door{width:84px;height:96px;margin:0 auto 12px}
html[data-motion="subtle"] .celebrate .door .leaf{transform-origin:22% 50%;animation:door 1.1s .2s var(--ease) both}
@keyframes door{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
.status-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:var(--t-sm);background:var(--sf-accent-subtle);color:var(--sf-fg)}
.status-badge::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--sf-accent-text)}
.order-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-bottom:var(--s-4)}
.order-head h1{font-size:var(--t-2xl)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;padding-bottom:22px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;inset-inline-start:15px;top:32px;bottom:0;width:2px;background:var(--sf-divider)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--sf-primary)}
.tl-dot{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--sf-surface);border:2px solid var(--sf-border);color:var(--sf-fg-muted);z-index:1}
.done .tl-dot{background:var(--sf-primary);border-color:var(--sf-primary);color:var(--sf-primary-fg)}
.now .tl-dot{border-color:var(--sf-primary);color:var(--sf-link);box-shadow:0 0 0 5px var(--sf-primary-subtle)}
html[data-motion="subtle"] .now .tl-dot{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px var(--sf-primary-subtle)}}
.tl-body b{display:block;padding-top:4px}
.tl-body time,.tl-body span{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.todo .tl-body b{color:var(--sf-fg-muted);font-weight:400}
.kv{display:grid;gap:4px}
.kv dt{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.kv dd{margin:0;font-weight:700}
.devices{list-style:none;margin:0;padding:0}
.devices a{display:flex;justify-content:space-between;align-items:center;min-height:52px;text-decoration:none;color:var(--sf-fg);border-bottom:1px dashed var(--sf-divider)}

/* --------------------------------------------------------------------------
   16b. Offers box, islands helpers, save-data
   -------------------------------------------------------------------------- */
.offer-box{display:grid;gap:var(--s-4);padding:var(--s-5) var(--s-4);border-radius:var(--sf-r-sheet);background:var(--sf-accent-subtle)}
.offer-box .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.offer-copy{display:grid;gap:10px;align-content:center}
.offer-copy h2{font-size:var(--t-2xl)}
.offer-copy p{color:var(--sf-fg-muted)}
@media (min-width:900px){.offer-box{grid-template-columns:1fr 2fr;gap:var(--s-6);padding:var(--s-6)}}
.region-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:700;padding:5px 10px;border-radius:999px;background:var(--sf-surface-muted);color:var(--sf-fg)}
.js-only{display:none!important}
html.js .js-only{display:inline-flex!important}
html.save-data .deco,html.save-data .qamariya{display:none}
html.save-data .hero-art{display:none}
html.save-data .hero-grid{grid-template-columns:minmax(0,1fr)}
.copied{color:var(--sf-success)!important}
.tick{color:var(--sf-link);letter-spacing:-.2em;font-weight:700}
.card-meta.low{color:var(--sf-warning);font-weight:700}
@media (min-width:1280px){.plp .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plp-count{color:var(--sf-fg-muted);font-size:var(--t-sm)}
.toolbar form{display:flex;gap:8px;align-items:center;margin-inline-start:auto}
.ranges{display:grid;gap:2px}
.filter-actions{display:flex;gap:8px;margin-top:16px}
.filter-actions .btn{flex:1;min-height:44px}
.ref-field{display:none}
.xfer:has(#ref-now:checked) .ref-field{display:grid}
.ship-empty{padding:14px 16px;border-radius:var(--sf-r-control);background:var(--sf-surface-muted);color:var(--sf-fg-muted);font-size:var(--t-sm)}
.geo-ok{display:inline-flex;align-items:center;gap:6px;color:var(--sf-success);font-weight:700;font-size:var(--t-sm)}
.wallet-tabs .seg{grid-template-columns:repeat(3,1fr);width:100%}
.amount-due{font-size:var(--t-lg);font-weight:700}

/* --------------------------------------------------------------------------
   16c. Polish pass: search, delivery-by-governorate, add-to-cart sheet, toasts
   -------------------------------------------------------------------------- */
.search-field{display:flex;align-items:center;gap:8px;min-height:52px;padding-inline:14px;border:1.5px solid var(--sf-border);border-radius:var(--sf-r-control);background:var(--sf-surface)}
.search-field:focus-within{border-color:var(--sf-ring);box-shadow:0 0 0 3px var(--sf-primary-subtle)}
.search-field input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;font-size:16px;color:var(--sf-fg);outline:none}
.search-sheet .sheet-body{display:grid;gap:12px;padding-block:12px 16px}
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;overflow:visible}
.search-tips{margin:0;padding-inline-start:20px;color:var(--sf-fg-muted);font-size:var(--t-sm);text-align:start}
/* «التوصيل إلى محافظتك» — one derived component (ShippingZone), used by trust_badges, product and checkout */
.gov-list{border:0;margin:0;padding:0;display:grid;gap:8px}
.gov-opt{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;min-height:56px;padding:8px 14px;border:1.5px solid var(--sf-border);border-radius:var(--sf-r-control);background:var(--sf-surface);cursor:pointer}
.gov-opt input{width:22px;height:22px;margin:0;accent-color:var(--sf-primary)}
.gov-opt b{display:block;font-size:var(--t-md)}
.gov-opt small{color:var(--sf-fg-muted);font-size:var(--t-xs)}
.gov-opt .amt{font-size:var(--t-sm);font-weight:700;white-space:nowrap;text-align:end}
.gov-opt:has(input:checked){border-color:var(--sf-primary);background:var(--sf-primary-subtle);box-shadow:inset 0 0 0 1px var(--sf-primary)}
.gov-cta{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:var(--t-sm);color:var(--sf-link)}
/* add-to-cart success sheet (spec 03) */
.added-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding-block:12px}
.added-row img{width:64px;height:64px;border-radius:var(--sf-r-control);object-fit:cover;background:var(--sf-surface-muted)}
.added-row b{display:block}
.added-row span{font-size:var(--t-sm);color:var(--sf-fg-muted)}
.added-ok{display:inline-flex;align-items:center;gap:8px;color:var(--sf-success);font-weight:700}
.sheet-foot.stack{flex-direction:column;align-items:stretch;gap:8px}
/* toast: sits above the mobile buy bar, never covers it */
.toast{position:fixed;z-index:80;inset-inline:16px;bottom:calc(16px + var(--safe-b) + var(--bar-offset,0px));max-width:420px;margin-inline:auto;padding:12px 16px;border-radius:var(--sf-r-control);
  background:var(--sf-deep);color:var(--sf-deep-fg);font-weight:700;font-size:var(--t-sm);box-shadow:var(--shadow-sheet)}
.oos-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--sf-link)}
.oos-wa .icon{color:var(--sf-whatsapp)}
/* cart: the WhatsApp alternative is a real 48px button on phones, not a tiny inline link */
.wa-alt{margin-top:var(--s-3)}
@media (min-width:900px){.wa-alt{display:none}}
/* checkout bottom bar steps aside while the phone keyboard is open (it would cover the field being typed in) */
@media (max-width:899px){
  body:has(.two-col input:not([type="radio"]):not([type="checkbox"]):focus,.two-col textarea:focus) .bar-bottom{display:none}
}
/* checkout: a sticky «4 خطوات · أقل من دقيقتين» line with a ✓ per finished step (CSS-only baseline: plain text) */
.co-progress{position:sticky;top:var(--header-h);z-index:30;display:flex;align-items:center;gap:10px;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter);
  background:var(--sf-bg);border-bottom:1px solid var(--sf-divider);font-size:var(--t-xs);font-weight:700;color:var(--sf-fg)}
.co-progress ol{list-style:none;margin:0;padding:0;display:flex;gap:6px;margin-inline-start:auto}
.co-progress li{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;border:1.5px solid var(--sf-border);color:var(--sf-fg-muted);background:var(--sf-surface)}
.co-progress li.is-done{background:var(--sf-success);border-color:var(--sf-success);color:var(--sf-bg)}
.co-progress li.is-done span{display:none}
.co-progress li.is-done::before{content:"✓"}
@media (min-width:900px){.co-progress{position:static;margin-inline:0;padding-inline:0;border:0;background:none}}
.step.is-done .step-n{background:var(--sf-success);color:var(--sf-bg)}
.step.is-done .step-n span{display:none}
.step.is-done .step-n::before{content:"✓"}
/* WhatsApp is an explicit way out of the form, not a hidden floating button */
.wa-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:var(--s-3);padding:2px 14px;border-radius:var(--sf-r-control);background:var(--sf-surface);
  border:1px dashed var(--sf-border);font-size:var(--t-sm);color:var(--sf-fg)}
.wa-line a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;color:var(--sf-link)}
.wa-line .icon{color:var(--sf-whatsapp)}
.draft-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:var(--t-sm);color:var(--sf-fg-muted);margin-top:var(--s-3)}
.draft-note button{min-height:44px;padding:0 4px;border:0;background:none;color:var(--sf-link);font-weight:700;text-decoration:underline}

/* --------------------------------------------------------------------------
   17. Motion & accessibility guards
   -------------------------------------------------------------------------- */
html[data-motion="none"] *,html[data-motion="none"] *::before,html[data-motion="none"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){.btn,.chip,.pill-opt span,.rcard{border:2px solid CanvasText}}
@media print{.hdr,.fab-wa,.buybar,.bar-bottom,.bx-switch{display:none!important}}
/* demo switcher (prototype chrome) steps aside while a sheet/drawer is open */
body:has(.sheet:target,.sheet.is-open,.drawer:target) .bx-switch{display:none}