body{margin:0}[hidden]{display:none!important}img{max-width:100%}

/* Layout: grocery-app shell. Sticky header with search, category rail, hero carousel + two side banners,
   a plain info line, product shelves, store block. Cart is a side drawer; product detail is a modal. */
:root{
  --lapis:#1d3a8a; --lapis-2:#2a4fb3; --lapis-soft:#e9eefb;
  --saffron:#f2a20c; --saffron-soft:#fff4dc;
  --pom:#c8102e; --leaf:#1f8a4c;
  --bg:#f5f6fa; --surface:#ffffff; --surface-2:#eff1f7; --line:#e1e5ef; --line-2:#cfd6e6;
  --fg:#131a2c; --muted:#5d6680; --on-accent:#ffffff;
  --map:#e8ecf5; --map-park:#d3ead9;
  --spot-a:#f4ecd8; --spot-b:#e9dcbc; --spot-fg:#2a2213;
  --shadow-sm:0 1px 2px rgba(19,26,44,.06);
  --shadow:0 1px 2px rgba(19,26,44,.05),0 8px 24px -6px rgba(19,26,44,.10);
  --shadow-lg:0 2px 6px rgba(19,26,44,.06),0 24px 48px -12px rgba(19,26,44,.22);
  --f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-fa:"Vazirmatn",Tahoma,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.5,1);
  --r-sm:10px; --r-md:16px; --r-lg:24px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --lapis:#8aa5f4; --lapis-2:#a9bdf7; --lapis-soft:#1b2546;
  --saffron:#f6b53d; --saffron-soft:#33280f; --pom:#ff5c70; --leaf:#4fcc84;
  --bg:#0c1020; --surface:#151a2d; --surface-2:#1c2340; --line:#252d4b; --line-2:#323c62;
  --fg:#e9ecf6; --muted:#9aa3be; --on-accent:#0c1020;
  --map:#121833; --map-park:#173226;
  --spot-a:#2b2614; --spot-b:#1d1a10; --spot-fg:#f3ead2;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -8px rgba(0,0,0,.45); --shadow-lg:0 30px 60px -12px rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --lapis:#8aa5f4; --lapis-2:#a9bdf7; --lapis-soft:#1b2546;
  --saffron:#f6b53d; --saffron-soft:#33280f; --pom:#ff5c70; --leaf:#4fcc84;
  --bg:#0c1020; --surface:#151a2d; --surface-2:#1c2340; --line:#252d4b; --line-2:#323c62;
  --fg:#e9ecf6; --muted:#9aa3be; --on-accent:#0c1020;
  --map:#121833; --map-park:#173226;
  --spot-a:#2b2614; --spot-b:#1d1a10; --spot-fg:#f3ead2;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -8px rgba(0,0,0,.45); --shadow-lg:0 30px 60px -12px rgba(0,0,0,.6);
  color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
[dir="rtl"] body,[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] select,[dir="rtl"] textarea{font-family:var(--f-fa)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:8px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
.num{font-variant-numeric:tabular-nums}

/* ---------- preview ribbon ---------- */
.ribbon{background:var(--saffron-soft);font-size:13px;color:var(--fg)}
.ribbon .wrap{display:flex;gap:10px;align-items:center;padding-block:7px}
.ribbon .tag{flex:0 0 auto;background:var(--saffron);color:#2a1c00;border-radius:999px;padding:2px 9px;font-weight:800;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
[dir="rtl"] .ribbon .tag{letter-spacing:0}

/* ---------- header ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.top.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -14px rgba(19,26,44,.25)}
header.top .wrap{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:16px;align-items:center;padding-block:12px;transition:padding .3s var(--ease)}
header.top.scrolled .wrap{padding-block:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);border-radius:12px}
.logo svg{transition:transform .5s var(--spring)}
.logo:hover svg{transform:rotate(-6deg) scale(1.05)}
.logo-text{white-space:nowrap;font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.logo-text small{display:block;font-family:var(--f-fa);font-weight:500;font-size:12px;color:var(--muted);letter-spacing:0;margin-top:3px;transition:opacity .25s,height .3s var(--ease),margin .3s var(--ease);height:15px;overflow:hidden}
header.top.scrolled .logo-text small{opacity:0;height:0;margin-top:0}
.where{display:flex;align-items:center;gap:8px;padding:6px 8px;color:var(--fg);text-decoration:none;border-radius:12px;transition:background .2s}
.where:hover{background:var(--surface-2)}
.where span{display:block;font-size:12px;color:var(--muted);line-height:1.2}
.where strong{display:block;font-size:14px;white-space:nowrap;line-height:1.3}
.where svg{color:var(--pom);flex:0 0 auto}

.search{position:relative}
.search input{-webkit-appearance:none;appearance:none;font-size:16px;width:100%;height:46px;border-radius:14px;border:1.5px solid transparent;background:var(--surface-2);padding-inline:44px 40px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{border-color:var(--lapis);background:var(--surface);box-shadow:0 0 0 4px rgba(42,79,179,.14);box-shadow:0 0 0 4px color-mix(in srgb,var(--lapis) 14%,transparent)}
.search .ico{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search .clear{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%) scale(.6);opacity:0;pointer-events:none;width:32px;height:32px;border-radius:50%;border:0;background:var(--line);display:grid;place-items:center;transition:.2s var(--ease)}
.search.has-q .clear{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
.suggest{position:absolute;top:calc(100% + 8px);inset-inline:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity .18s,transform .22s var(--ease);z-index:5;max-height:min(420px,70vh);overflow:auto}
.suggest.on{opacity:1;transform:none;pointer-events:auto}
.sg{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:0;background:none;padding:6px 8px;border-radius:12px;text-align:start}
.sg[aria-selected="true"],.sg:hover{background:var(--surface-2)}
.sg .mini{width:44px;height:44px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center}
.sg .mini svg{width:40px;height:40px}
.sg .mini{background:#fff}
.sg .mini img{width:40px;height:40px;object-fit:contain;border-radius:6px}
.sg b{display:block;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg small{color:var(--muted);font-size:12px}
.sg mark{background:rgba(242,162,12,.35);background:color-mix(in srgb,var(--saffron) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.sg-all{display:flex;justify-content:center;gap:6px;align-items:center;width:100%;border:0;background:none;padding:10px;color:var(--lapis);font-weight:700;border-top:1px solid var(--line);margin-top:4px}
[dir="rtl"] .sg-all .arr{transform:scaleX(-1)}
.sg-none{padding:14px;color:var(--muted);font-size:14px}

.lang{position:relative;display:flex;background:var(--surface-2);border-radius:12px;padding:3px;isolation:isolate}
.lang .ind{position:absolute;top:3px;bottom:3px;left:0;width:0;background:var(--surface);border-radius:9px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),width .35s var(--ease);z-index:-1}
.lang button{border:0;background:none;padding:7px 10px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted);transition:color .2s;min-width:38px}
.lang button[aria-pressed="true"]{color:var(--fg)}
.lang button[data-lang="fa"]{font-family:var(--f-fa)}
.cartbtn{position:relative;display:flex;align-items:center;gap:10px;height:46px;padding-inline:16px;border-radius:14px;border:0;background:var(--lapis);color:var(--on-accent);font-weight:700;white-space:nowrap;transition:transform .2s var(--ease),background .2s,box-shadow .2s;box-shadow:0 6px 16px -6px rgba(29,58,138,.5);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--lapis) 60%,transparent)}
.cartbtn:hover{background:var(--lapis-2)}
.cartbtn:active{transform:scale(.97)}
.cartbtn .count{min-width:22px;height:22px;border-radius:999px;background:var(--saffron);color:#2a1c00;display:grid;place-items:center;font-size:12px;padding:0 6px;font-variant-numeric:tabular-nums}
.cartbtn .sum{font-variant-numeric:tabular-nums}

/* ---------- category rail ---------- */
.rail{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:18px 8px;padding-inline:12px;scroll-behavior:smooth;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent)}
.rail::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:6px 2px;border-radius:var(--r-md);color:var(--fg)}
.cat .disc{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);transition:transform .35s var(--spring),box-shadow .3s}
.cat .disc svg{width:52px;height:52px;transition:transform .45s var(--spring)}
.cat:hover .disc{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cat:hover .disc svg{transform:scale(1.08) rotate(-4deg)}
.cat:active .disc{transform:scale(.95)}
.cat[aria-pressed="true"] .disc{box-shadow:0 0 0 3px var(--lapis),var(--shadow)}
.cat .lbl{font-size:13px;font-weight:600;text-align:center;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat .n{position:absolute;top:-2px;inset-inline-end:-2px;min-width:20px;height:20px;border-radius:999px;background:var(--lapis);color:var(--on-accent);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bg)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;padding-block:14px 6px;animation:cardIn .7s var(--ease) both}
.carousel{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;background:#14295f;isolation:isolate}
.slides{display:flex;height:100%;min-height:380px;transition:transform .8s cubic-bezier(.65,0,.2,1);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slides.dragging{transition:none}
.slide{flex:0 0 100%;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:34px 34px 64px}
.slide canvas{position:absolute;inset:0;width:100%;height:100%}
.slide .copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;max-width:min(30ch,62%)}
.slide .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
[dir="rtl"] .slide .eyebrow{letter-spacing:0}
.slide h2{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4vw,50px);line-height:1;margin:0;letter-spacing:-.03em;text-wrap:balance}
[dir="rtl"] .slide h2{font-family:var(--f-fa);letter-spacing:0;line-height:1.35}
.slide p{margin:0;opacity:.9;font-size:16px;text-wrap:pretty}
.slide .cta{align-self:flex-start;margin-top:6px;border:0;background:#fff;color:#14295f;border-radius:999px;padding:11px 20px;font-weight:800;display:inline-flex;gap:8px;align-items:center;transition:transform .25s var(--spring),box-shadow .25s;box-shadow:0 8px 20px -8px rgba(0,0,0,.4)}
.slide .cta:hover{transform:translateY(-2px)}
.arr{transition:transform .25s var(--ease);flex:0 0 auto}
.slide .cta:hover .arr,.linkbtn:hover .arr,.tile:hover .go .arr,.btn:hover .arr{transform:translateX(3px)}
[dir="rtl"] .arr{transform:scaleX(-1)}
[dir="rtl"] .slide .cta:hover .arr,[dir="rtl"] .linkbtn:hover .arr,[dir="rtl"] .tile:hover .go .arr,[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.slide .art{position:absolute;inset-inline-end:4%;bottom:15%;width:min(42%,320px);aspect-ratio:1;pointer-events:none}
.slide .art svg{width:100%;height:100%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.28))}
.s-pist{background:radial-gradient(120% 90% at 85% 80%,#3f8a4d 0,#1f4d32 55%,#163a26 100%)}
.s-zer{background:radial-gradient(120% 90% at 85% 80%,#c81a38 0,#8e0f24 55%,#6a0b1b 100%)}
.s-ship{background:radial-gradient(120% 90% at 85% 80%,#ffc24d 0,#f0a010 50%,#d98b06 100%);color:#2a1c00}
.s-ship .cta{background:#2a1c00;color:#fff4dc}
.trio{position:absolute;inset-inline-end:3%;bottom:17%;width:min(52%,400px);aspect-ratio:1.45;pointer-events:none}
.trio > *{position:absolute;bottom:0;width:46%}
.trio > *:nth-child(1){inset-inline-start:0;transform:rotate(-8deg);z-index:1}
.trio > *:nth-child(2){inset-inline-start:25%;z-index:2;width:52%}
.trio > *:nth-child(3){inset-inline-end:0;transform:rotate(8deg);z-index:1}
.trio svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 20px rgba(0,0,0,.3))}
.slide .copy > *{transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--d,0) * 80ms + 280ms)}
.slide:not(.is-active) .copy > *{opacity:0;transform:translateY(14px);transition-delay:0s;transition-duration:.2s}
.slide .art,.slide .trio{transition:transform 1.1s var(--ease),opacity .8s}
.slide:not(.is-active) .art,.slide:not(.is-active) .trio{transform:translateX(40px) scale(.94);opacity:0}
[dir="rtl"] .slide:not(.is-active) .art,[dir="rtl"] .slide:not(.is-active) .trio{transform:translateX(-40px) scale(.94)}
.car-ui{position:absolute;inset-inline:34px;bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:3}
.dots{display:flex;gap:8px}
.dot{width:28px;height:6px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.35);overflow:hidden;position:relative;transition:width .4s var(--ease),background .3s}
.dot[aria-current="true"]{width:52px}
.dot i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
[dir="rtl"] .dot i{transform-origin:right}
.dot[aria-current="true"] i{animation:fill 6.5s linear forwards}
.carousel.paused .dot i{animation-play-state:paused}
.s-ship-active .dot{background:rgba(42,28,0,.25)} .s-ship-active .dot i{background:#2a1c00}
@keyframes fill{to{transform:scaleX(1)}}
.arrows{display:flex;gap:8px}
.arrows button{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,transform .2s var(--spring),color .3s}
.arrows button:hover{background:rgba(255,255,255,.3);transform:scale(1.06)}
.s-ship-active .arrows button{background:rgba(42,28,0,.12);color:#2a1c00}
[dir="rtl"] .arrows svg,[dir="rtl"] .navbtn svg{transform:scaleX(-1)}

.hero-side{display:grid;gap:14px;grid-template-rows:1fr 1fr}
.tile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:24px;border:0;text-align:start;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;min-height:176px;transition:transform .35s var(--ease),box-shadow .35s;color:#fff;text-decoration:none}
@media (hover:hover){.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}}
.tile .eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85;position:relative}
[dir="rtl"] .tile .eyebrow{letter-spacing:0}
.tile h3{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.2vw,28px);line-height:1.05;margin:0;letter-spacing:-.02em;max-width:12ch;position:relative;text-wrap:balance}
[dir="rtl"] .tile h3{font-family:var(--f-fa);letter-spacing:0;line-height:1.4}
.tile .go{position:relative;font-weight:700;font-size:14px;display:inline-flex;gap:6px;align-items:center;opacity:.95}
.tile .pic{position:absolute;inset-inline-end:-4px;bottom:-12px;width:44%;max-width:170px;transition:transform .6s var(--ease)}
.tile:hover .pic{transform:translateY(-6px) rotate(-3deg)}
.tile .pic svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 16px rgba(0,0,0,.25))}
.t-tea{background:linear-gradient(140deg,#2a4fb3,#14295f)}
.t-tea > :not(.pic),.t-shop > :not(.storefront){max-width:60%;position:relative;z-index:1}
.t-shop{background:var(--saffron-soft);color:var(--fg)}
.t-shop .eyebrow{color:var(--pom);opacity:1}
.t-shop .open{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;position:relative;color:var(--leaf)}
.t-shop .open i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
.t-shop .open.closed{color:var(--muted)} .t-shop .open.closed i{animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.storefront{position:absolute;inset-inline-end:12px;bottom:0;width:44%;max-width:170px;transition:transform .6s var(--ease)}
.t-shop:hover .storefront{transform:translateY(-4px)}
.storefront svg{display:block;width:100%;height:auto}

/* ---------- info line: plain information, deliberately not interactive ---------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-block:20px 4px;border-block:1px solid var(--line)}
.fact{display:flex;gap:12px;align-items:center;padding:14px 18px;cursor:default;min-width:0}
.fact + .fact{border-inline-start:1px solid var(--line)}
.fact svg{flex:0 0 auto;color:var(--muted);width:22px;height:22px}
.fact p{margin:0;font-size:13px;color:var(--muted);line-height:1.35;min-width:0}
.fact p b{display:block;color:var(--fg);font-weight:600;font-size:14px}

/* ---------- shelves ---------- */
section.shelf{padding-block:30px 4px}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.shelf-head h3{font-family:var(--f-display);font-size:26px;letter-spacing:-.02em;margin:0;line-height:1.1;text-wrap:balance}
.shelf-head h3 small{display:block;font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:5px}
[dir="rtl"] .shelf-head h3,[dir="rtl"] .shelf-head h3 small{font-family:var(--f-fa);letter-spacing:0}
.shelf-tools{display:flex;gap:8px;align-items:center}
.linkbtn{color:var(--lapis);font-weight:700;background:none;border:0;padding:8px 6px;white-space:nowrap;border-radius:10px;display:inline-flex;gap:6px;align-items:center}
.navbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:grid;place-items:center;transition:opacity .2s,background .2s,transform .2s var(--spring)}
.navbtn:hover:not([disabled]){background:var(--surface-2);transform:scale(1.06)}
.navbtn[disabled]{opacity:.35;cursor:default}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(178px,18vw,214px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 18px;margin:-4px -4px 0;scrollbar-width:none;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track > *{scroll-snap-align:start}

/* ---------- product card ---------- */
.card{background:var(--surface);border-radius:var(--r-md);padding:10px 10px 12px;display:flex;flex-direction:column;gap:6px;position:relative;border:1px solid var(--line);min-width:0;transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .3s}
@media (hover:hover){.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:transparent}}
.card .thumb{position:relative;aspect-ratio:1/1;max-width:100%;border-radius:12px;background:#fff;display:grid;place-items:center;border:0;padding:0;width:100%;perspective:700px;overflow:hidden}
.card .thumb img{width:90%;height:90%;object-fit:contain;transition:transform .55s var(--ease);will-change:transform;-webkit-user-drag:none}
.card .thumb.tilting img{transition:transform .12s linear}
.card.oos .thumb img{filter:grayscale(.85);opacity:.55}
.card .thumb svg{width:86%;height:86%;transition:transform .55s var(--ease);will-change:transform}
.card .thumb.tilting svg{transition:transform .12s linear}
.card.oos .thumb svg{filter:grayscale(.85);opacity:.55}
.badge{position:absolute;top:10px;inset-inline-start:10px;font-weight:800;font-size:11px;border-radius:7px;padding:3px 7px;z-index:1;letter-spacing:.02em}
.badge.oos{background:var(--fg);color:var(--bg)}
.badge.orig{background:var(--saffron-soft);color:var(--fg)}
.card .name{border:0;background:none;padding:0;text-align:start;margin-top:4px;font-size:14.5px;font-weight:700;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--fg);transition:color .2s}
.card .name:hover{color:var(--lapis)}
.card .alt{font-size:12.5px;color:var(--muted);min-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alt[lang="fa"]{font-family:var(--f-fa)}
.alt[lang="it"]{font-family:var(--f-body)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:2px;position:relative;isolation:isolate;align-self:flex-start;max-width:100%}
.seg button{border:0;background:none;font-size:12px;font-weight:700;padding:4px 10px;border-radius:7px;color:var(--muted);transition:color .2s;white-space:nowrap}
.seg button[aria-pressed="true"]{color:var(--fg)}
.seg .ind{position:absolute;top:2px;bottom:2px;left:0;width:0;background:var(--surface);border-radius:7px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),width .3s var(--ease);z-index:-1}
.size{font-size:12.5px;color:var(--muted);min-height:26px;display:flex;align-items:center}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.price{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;min-width:0}
.price b{font-size:18px;font-weight:800;letter-spacing:-.01em;display:inline-block}
.price small{font-size:11px;color:var(--muted);white-space:nowrap}
.flip{animation:flip .35s var(--ease)}
@keyframes flip{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}

/* add button that morphs into a stepper */
.ctl{--w:40px;position:relative;display:flex;align-items:center;justify-content:space-between;width:var(--w);height:40px;border-radius:12px;background:var(--lapis-soft);color:var(--lapis);flex:0 0 auto;transition:width .38s var(--spring),background .25s,color .25s;overflow:hidden}
.ctl:not([data-q="0"]){--w:108px;background:var(--lapis);color:var(--on-accent)}
.ctl button{border:0;background:none;color:inherit;height:40px;width:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;transition:background .15s}
@media (hover:hover){.ctl button:hover{background:rgba(127,127,127,.16);background:color-mix(in srgb,currentColor 14%,transparent)}}
.ctl .inc{position:absolute;inset-inline-end:2px;top:0}
.ctl .dec,.ctl output{opacity:0;transition:opacity .2s}
.ctl[data-q="0"] .dec{pointer-events:none}
.ctl:not([data-q="0"]) .dec,.ctl:not([data-q="0"]) output{opacity:1;transition-delay:.12s}
.ctl output{position:absolute;left:50%;transform:translateX(-50%);font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none}
.ctl output.pop{animation:pop .3s var(--spring)}
@keyframes pop{0%{transform:translateX(-50%) scale(1.5)}100%{transform:translateX(-50%) scale(1)}}
.ctl .addl{display:none;font-weight:800;font-size:13.5px}
.ctl.off{width:auto;padding-inline:10px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700;cursor:not-allowed}

/* ---------- tea + kashk ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:stretch}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.spot{position:relative;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--spot-a),var(--spot-b));color:var(--spot-fg);padding:26px;overflow:hidden;display:flex;flex-direction:column;gap:10px}
.spot .eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pom)}
[dir="rtl"] .spot .eyebrow{letter-spacing:0}
.spot h3{font-family:var(--f-display);font-size:34px;margin:0;line-height:1;letter-spacing:-.02em}
[dir="rtl"] .spot h3{font-family:var(--f-fa);letter-spacing:0;line-height:1.4}
.spot p{margin:0;max-width:36ch;opacity:.85;font-size:14.5px}
.spot .pic{align-self:center;width:min(210px,64%);margin-block:4px;border:0;background:none;padding:0;transition:transform .5s var(--ease)}
.spot .pic:hover{transform:translateY(-4px) rotate(-2deg)}
.spot .pic svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 18px rgba(60,40,0,.25))}
.spot .pic img{width:100%;height:auto;display:block;background:#fff;border-radius:20px;padding:10px;box-shadow:0 18px 30px -14px rgba(60,40,0,.4)}
.spot .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.spot .row b{font-size:24px;font-variant-numeric:tabular-nums}
.spot .row small{display:block;font-size:12px;opacity:.7}

/* ---------- in-store band ---------- */
.instore{margin-top:36px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:center}
.instore h3{font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);margin:0 0 8px;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
[dir="rtl"] .instore h3{font-family:var(--f-fa);letter-spacing:0;line-height:1.45}
.instore p{margin:0;color:var(--muted);max-width:46ch}
.mini-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mc{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:8px 12px 8px 8px;text-align:start;font-weight:600;font-size:13.5px;transition:border-color .2s,transform .25s var(--ease),background .2s,box-shadow .25s;color:var(--fg)}
[dir="rtl"] .mc{padding:8px 8px 8px 12px}
.mc:hover{border-color:var(--line-2);transform:translateY(-2px);background:var(--surface);box-shadow:var(--shadow)}
.mc svg{width:34px;height:34px;flex:0 0 auto}

/* ---------- store block ---------- */
.store{margin-top:36px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);scroll-margin-top:96px}
.map{position:relative;min-height:320px;background:var(--map)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.store-info{padding:30px;display:flex;flex-direction:column;gap:18px}
.store-info h3{font-family:var(--f-display);font-size:32px;margin:0;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
[dir="rtl"] .store-info h3{font-family:var(--f-fa);letter-spacing:0;line-height:1.4}
.kvs{display:grid;gap:14px}
.kv{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;font-size:14.5px}
.kv svg{color:var(--muted);margin-top:2px}
.kv small{display:block;color:var(--muted);font-size:12px}
.kv > div{min-width:0;overflow-wrap:anywhere}
.kv a{text-decoration:none;display:inline-block;padding-block:8px;margin-block:-8px}
.copybtn{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;font-size:12px;font-weight:700;padding:5px 10px;transition:background .2s;color:var(--fg)}
.copybtn:hover{background:var(--surface-2)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding-inline:18px;border-radius:14px;font-weight:800;text-decoration:none;border:0;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lapis);color:var(--on-accent)}
.btn.primary:hover{background:var(--lapis-2)}
.btn.wa{background:#1fa855;color:#fff}
.btn.wa:hover{background:#1b964b}
.btn.ghost{background:var(--surface);color:var(--fg);border:1px solid var(--line-2)}
.btn.ghost:hover{background:var(--surface-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.block{width:100%}
.btn.link{height:40px;background:none;border:0;color:var(--muted);font-weight:700}
.btn.link:hover{color:var(--fg)}

/* ---------- list views ---------- */
.results-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding-block:24px 14px;flex-wrap:wrap}
.results-head h3{font-family:var(--f-display);font-size:30px;margin:0;line-height:1.1;letter-spacing:-.02em}
[dir="rtl"] .results-head h3{font-family:var(--f-fa);letter-spacing:0}
.results-head .count{font-size:15px;color:var(--muted);font-weight:500;font-family:var(--f-body)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;max-width:100%;scroll-behavior:smooth}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;transition:background .2s,color .2s,border-color .2s;color:var(--fg)}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:18px}
.grid .card,.grid3 .card{animation:cardIn .5s var(--ease) both;animation-delay:calc(min(var(--i,0),12) * 40ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ctile{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;text-align:start;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;animation:cardIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms);color:var(--fg)}
.ctile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.ctile .disc{width:60px;height:60px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto}
.ctile .disc svg{width:44px;height:44px}
.ctile b{display:block;font-size:15px;line-height:1.3}
.ctile small{color:var(--muted);font-size:13px}
.ctile small.on{color:var(--leaf);font-weight:700}
.empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:40px 16px 20px;color:var(--muted);animation:cardIn .5s var(--ease) both}
.empty .disc{width:96px;height:96px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center}
.empty .disc svg{width:66px;height:66px}
.empty h4{margin:0;font-size:22px;color:var(--fg);font-family:var(--f-display);text-wrap:balance}
[dir="rtl"] .empty h4{font-family:var(--f-fa)}
.empty p{margin:0;max-width:48ch}

/* scroll-linked reveal where supported; content stays fully visible elsewhere */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@keyframes rise{from{opacity:.3;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- footer ---------- */
footer{margin-top:52px;background:var(--surface);border-top:1px solid var(--line)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1fr;gap:28px;padding-block:36px}
footer h5{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
[dir="rtl"] footer h5{letter-spacing:0}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
footer li button{background:none;border:0;padding:0;text-align:start;color:var(--fg);transition:color .2s}
footer li button:hover{color:var(--lapis)}
footer .about{color:var(--muted);max-width:38ch;font-size:14px}
.legal{border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.legal .wrap{display:flex;justify-content:space-between;gap:6px 16px;padding-block:16px;flex-wrap:wrap}
.legal-data{text-align:start}
.legal-data{overflow-wrap:anywhere}

/* ---------- bottom nav (phones) ---------- */
nav.bottom{display:none;position:fixed;inset:auto 0 0;z-index:55;background:var(--surface);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav.bottom .row{display:grid;grid-template-columns:repeat(4,1fr)}
nav.bottom button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;font-size:11px;font-weight:700;color:var(--muted);position:relative;transition:color .2s}
nav.bottom button svg{transition:transform .3s var(--spring)}
nav.bottom button[aria-current="true"]{color:var(--lapis)}
nav.bottom button[aria-current="true"] svg{transform:translateY(-2px)}
nav.bottom .dot2{position:absolute;top:4px;inset-inline-start:calc(50% + 6px);background:var(--pom);color:#fff;font-size:10px;border-radius:999px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px;font-variant-numeric:tabular-nums}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,12,28,.48);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(440px,100%);background:var(--bg);z-index:80;display:flex;flex-direction:column;transform:translateX(104%);transition:transform .45s cubic-bezier(.32,.72,0,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);box-shadow:var(--shadow-lg);visibility:hidden}
[dir="rtl"] .drawer{transform:translateX(-104%);padding-right:0;padding-left:env(safe-area-inset-left,0px)}
.drawer.on{transform:none!important;visibility:visible}
.drawer:not(.on){transition:transform .4s cubic-bezier(.32,.72,0,1),visibility 0s .4s}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.drawer-head h3{margin:0;font-family:var(--f-display);font-size:22px;letter-spacing:-.01em}
[dir="rtl"] .drawer-head h3{font-family:var(--f-fa)}
.x{width:40px;height:40px;border-radius:12px;border:0;background:var(--surface-2);display:grid;place-items:center;transition:background .2s,transform .3s var(--spring);color:var(--fg)}
@media (hover:hover){.x:hover{background:var(--line);transform:rotate(90deg)}}
.drawer-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.step{animation:stepIn .35s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
[dir="rtl"] .step{animation-name:stepInR}
@keyframes stepInR{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.line{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--surface);border-radius:14px;padding:8px;border:1px solid var(--line);transition:opacity .22s,transform .3s var(--ease)}
.line.out{opacity:0;transform:translateX(30px)}
.line .mini{width:60px;height:60px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center}
.line .mini svg{width:54px;height:54px}
.line .mini{background:#fff}
.line .mini img{width:54px;height:54px;object-fit:contain;border-radius:8px}
.line h4{margin:0;font-size:14px;font-weight:700;line-height:1.3}
.line small{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}
.note{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.note svg{flex:0 0 auto;color:var(--lapis);margin-top:1px}
.drawer-foot{padding:16px 18px;background:var(--surface);border-top:1px solid var(--line);display:grid;gap:10px}
.drawer-foot:empty{display:none}
.totals{display:grid;gap:5px;font-variant-numeric:tabular-nums;font-size:14px}
.totals div{display:flex;justify-content:space-between;gap:10px}
.totals span:first-child{color:var(--muted)}
.totals .grand{font-size:19px;font-weight:800}
.totals .grand span:first-child{color:var(--fg)}
.field{display:grid;gap:6px;font-size:13px;font-weight:700}
.field input,.field textarea{-webkit-appearance:none;appearance:none;font-size:16px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);padding-inline:12px;font-weight:500;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--lapis);box-shadow:0 0 0 4px rgba(42,79,179,.14);box-shadow:0 0 0 4px color-mix(in srgb,var(--lapis) 14%,transparent)}
.field textarea{height:84px;padding:10px 12px;resize:vertical}
.field.err input{border-color:var(--pom);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--ease),opacity .25s}
.collapse > div{overflow:hidden}
.collapse.shut{grid-template-rows:0fr;opacity:0}
.radio2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.radio2 button{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;text-align:start;font-weight:700;font-size:13.5px;transition:border-color .2s,background .2s;color:var(--fg)}
.radio2 button small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.radio2 button[aria-pressed="true"]{border-color:var(--lapis);background:var(--lapis-soft)}
.summary{white-space:pre-wrap;background:var(--surface);border:1px dashed var(--line-2);border-radius:12px;padding:14px;font-size:13px;user-select:all;-webkit-user-select:all;max-height:300px;overflow:auto;font-variant-numeric:tabular-nums;text-align:left}
.okmark{width:64px;height:64px;border-radius:50%;background:rgba(31,138,76,.16);background:color-mix(in srgb,var(--leaf) 16%,transparent);display:grid;place-items:center;color:var(--leaf);margin-inline:auto;animation:pop2 .45s var(--spring) both}
@keyframes pop2{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.okmark path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .2s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.modal{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px;pointer-events:none;visibility:hidden;transition:visibility 0s}
.modal.on{visibility:visible}
.modal:not(.on){transition:visibility 0s .35s}
.modal .box{pointer-events:auto;position:relative;background:var(--surface);border-radius:var(--r-lg);width:min(840px,100%);max-height:calc(100% - 32px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);opacity:0;transform:translateY(16px) scale(.97);transition:opacity .25s,transform .4s var(--ease);box-shadow:var(--shadow-lg);overscroll-behavior:contain}
.modal:not(.on) .box{pointer-events:none}
.modal.on .box{opacity:1;transform:none}
.modal .pic img{width:88%;max-width:340px;height:auto;animation:float 5s ease-in-out infinite}
.modal .pic{background:#fff;display:grid;place-items:center;padding:28px;min-height:360px;position:relative}
.modal .pic svg{width:88%;max-width:310px;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.modal .info{padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.modal .info h3{font-family:var(--f-display);font-size:30px;margin:0;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;padding-inline-end:40px}
[dir="rtl"] .modal .info h3{font-family:var(--f-fa);letter-spacing:0;line-height:1.4}
.modal .alt2{color:var(--muted);font-size:16px;margin-top:-4px}
.modal .desc{margin:0;color:var(--fg);opacity:.85;font-size:15px}
.bigprice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bigprice b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:inline-block}
.bigprice small{color:var(--muted);font-size:13px}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.specs b{color:var(--fg);font-weight:600}
.buy{display:flex;gap:10px;align-items:center;margin-top:auto}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;height:48px;flex:0 0 auto}
.qty button{width:42px;height:44px;border:0;background:none;font-size:20px;font-weight:700;border-radius:12px;color:var(--fg)}
@media (hover:hover){.qty button:hover{background:var(--surface-2)}}
#mAdd .short{display:none}
.qty output{min-width:26px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.modal .close{position:absolute;top:12px;inset-inline-end:12px;z-index:2}
.modal.sheet .box{display:block;width:min(620px,100%)}
.sheet-body{padding:28px;display:grid;gap:12px}
.sheet-body h3{font-family:var(--f-display);font-size:28px;margin:0;letter-spacing:-.02em}
[dir="rtl"] .sheet-body h3{font-family:var(--f-fa);letter-spacing:0}
.sheet-body h4{margin:8px 0 0;font-size:16px}
.sheet-body li{color:var(--muted);font-size:14.5px}
.sheet-body ul{margin:0;padding-inline-start:20px;display:grid;gap:6px}

.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,24px) scale(.96);background:var(--fg);color:var(--bg);padding:11px 16px;border-radius:14px;font-weight:600;z-index:90;opacity:0;transition:opacity .25s,transform .4s var(--spring);pointer-events:none;width:max-content;max-width:calc(100vw - 32px);display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-lg);font-size:14px}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.toast svg{color:var(--leaf);flex:0 0 auto}
.flyer{position:fixed;z-index:95;pointer-events:none}
.flyer svg{width:100%;height:100%;display:block}
.flyer img{width:100%;height:100%;display:block;object-fit:contain;background:#fff;border-radius:14px}
.bump{animation:bump .45s var(--spring)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}

::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  header.top .wrap{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo . lang cart" "search search search search";row-gap:10px}
  .logo{grid-area:logo}.lang{grid-area:lang}.cartbtn{grid-area:cart}.search{grid-area:search}.where{display:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-inline-start:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .instore{grid-template-columns:minmax(0,1fr)}
  .store{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  nav.bottom{display:block}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .ribbon .wrap{font-size:12px;align-items:flex-start}
  header.top .wrap{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo . lang" "search search search";column-gap:10px}
  .cartbtn{display:none}
  .logo-text{font-size:20px}
  .lang button{padding:7px 8px;min-width:32px}
  .carousel,.slides{min-height:500px}
  .slide{padding:26px 22px 70px;justify-content:flex-start}
  .slide .copy{max-width:100%}
  .slide h2{font-size:32px}
  .slide p{font-size:15px}
  .slide .art{width:44%;bottom:60px}
  .trio{width:62%;bottom:58px}
  .car-ui{inset-inline:22px}
  .arrows{display:none}
  .hero-side{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:150px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .fact{padding:11px 2px}
  .fact + .fact{border-inline-start:0;border-top:1px solid var(--line)}
  .track{grid-auto-columns:47%;gap:10px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:47%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 4px 16px;margin:-4px -4px 0}
  .grid3::-webkit-scrollbar{display:none}
  .grid3 > *{scroll-snap-align:start}
  .storefront{width:38%}
  .navbtn{display:none}
  .seg button{padding:4px 7px}
  .modal{padding:0;place-items:end center}
  .modal .box{grid-template-columns:minmax(0,1fr);border-radius:24px 24px 0 0;max-height:92%;transform:translateY(100%);width:100%}
  .modal .pic{min-height:0;padding:24px 18px 8px}
  .modal .pic svg{max-width:150px}
  .modal .pic img{max-width:180px}
  .modal .info{padding:16px 20px 0;gap:10px}
  .modal .info h3{font-size:26px}
  .buy{position:sticky;bottom:0;z-index:2;background:var(--surface);margin-inline:-20px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .buy .btn{white-space:nowrap;font-size:15px;padding-inline:14px}
  #mAdd .long{display:none}
  #mAdd .short{display:inline}
  .qty button{width:36px}
  .card .price-row{flex-direction:column;align-items:stretch;gap:8px}
  .card .ctl,.card .ctl:not([data-q="0"]){--w:100%;height:38px}
  .card .ctl button{height:38px}
  .card .ctl[data-q="0"] .inc{inset:0;width:100%;display:flex;gap:6px;align-items:center;justify-content:center}
  .card .ctl[data-q="0"] .addl{display:inline}
  header.top{transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
  header.top.tuck{transform:translateY(calc(-1 * var(--tuck,60px)))}
  .store-info,.instore,.spot{padding:20px}
  .map{min-height:220px}
  footer .cols{grid-template-columns:minmax(0,1fr)}
  .shelf-head h3{font-size:22px}
  .results-head h3{font-size:24px}
}
@media (max-width:380px){
  .carousel,.slides{min-height:468px}
  .slide{padding:22px 18px 64px}
  .slide h2{font-size:28px}
  .slide p{font-size:14px}
  .slide .cta{padding:10px 16px;font-size:14px}
  .trio{width:58%;bottom:54px}
  .slide .art{width:40%;bottom:56px}
  .car-ui{inset-inline:18px;bottom:18px}
  .tile{padding:20px}
  .card .name{font-size:13.5px}
  .price b{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Product photography in promotional cards. */
.slide .art img,.trio img,.tile .pic img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:transparent;border-radius:0;filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.tile .pic{bottom:12px;inset-inline-end:12px;width:38%}