/* ===== Font: Vazirmatn (self-hosted, variable weight, OFL) ===== */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/vazirmatn.woff2') format('woff2-variations'),url('../fonts/vazirmatn.woff2') format('woff2')}

/* ===== Design tokens — warm, soft, fully rounded ===== */
:root{
  --bg:#f8f4ef;--surface:#fff;--surface-2:#f7f2ec;--surface-3:#f1e9e0;
  --ink:#1f1a15;--ink-2:#3d352d;--muted:#8b8076;
  --line:#efe7de;--line-2:#e3d8cc;
  --accent:#ec5a24;--accent-2:#ff8a3d;--accent-ink:#c2410c;--accent-soft:#fdeee5;
  --ok:#15803d;--ok-soft:#e9f6ee;--danger:#dc2626;--danger-soft:#fdeded;--warn:#b45309;--warn-soft:#fff7e6;
  --r-xs:.625rem;--r-sm:.875rem;--r:1.125rem;--r-lg:1.5rem;--r-xl:2rem;--pill:999px;
  --gutter:clamp(.875rem,3.2vw,2rem);
  --gap:clamp(.625rem,1.6vw,1.125rem);
  --fs-xs:clamp(.6875rem,.66rem + .12vw,.75rem);
  --fs-sm:clamp(.75rem,.72rem + .15vw,.8125rem);
  --fs-md:clamp(.8125rem,.78rem + .2vw,.9375rem);
  --fs-lg:clamp(.9375rem,.88rem + .3vw,1.125rem);
  --fs-xl:clamp(1.125rem,1rem + .6vw,1.5rem);
  --fs-2xl:clamp(1.5rem,1.05rem + 2vw,2.625rem);
  --shadow-sm:0 1px 2px rgba(60,40,20,.05);
  --shadow:0 2px 4px rgba(60,40,20,.04),0 10px 28px rgba(60,40,20,.07);
  --shadow-lg:0 18px 44px rgba(40,25,10,.2);
  --shadow-accent:0 8px 20px rgba(236,90,36,.32);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{margin:0;font-family:'Vazirmatn',Tahoma,system-ui,sans-serif;font-size:var(--fs-md);line-height:1.7;background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,b,strong,th{font-weight:600}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{line-height:1.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.shell{width:100%;max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.main-content{flex:1;padding-block:clamp(.75rem,2vw,1.5rem) clamp(2rem,5vw,3.5rem)}

/* ===== Header — floating rounded capsule ===== */
.site-header{position:sticky;top:0;z-index:40;padding-top:calc(env(safe-area-inset-top) + clamp(.5rem,1.2vw,.875rem));pointer-events:none}
.site-header .shell{pointer-events:auto}
.header-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand search nav";align-items:center;gap:clamp(.5rem,2vw,1.5rem);padding:.5rem;padding-inline-start:.625rem;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.brand{grid-area:brand;display:flex;align-items:center;gap:.625rem}
.brand-mark{width:2.5rem;height:2.5rem;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-accent)}
.brand-mark .ic{width:1.3rem;height:1.3rem}
.brand-text b{display:block;font-size:var(--fs-lg);font-weight:600;line-height:1.2}
.brand-text small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.3}
.header-search{grid-area:search;justify-self:center;width:100%;max-width:34rem;position:relative;display:flex;align-items:center}
.header-search .ic{position:absolute;inset-inline-start:1rem;color:var(--muted);width:1.125rem;height:1.125rem;pointer-events:none}
.header-search input{width:100%;height:2.75rem;border:1px solid transparent;background:var(--surface-2);border-radius:var(--pill);padding-inline:2.75rem 1rem;font-size:1rem;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.header-search input::placeholder{color:var(--muted);font-size:var(--fs-md)}
.header-search input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.header-search input::-webkit-search-cancel-button{cursor:pointer}
.top-nav{grid-area:nav;display:flex;align-items:center;gap:.25rem}
.nav-link{padding:.5rem 1rem;border-radius:var(--pill);font-weight:500;font-size:var(--fs-md);color:var(--ink-2);transition:background .2s}
.nav-link:hover{background:var(--surface-2)}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding-inline:1rem .5rem;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:500;font-size:var(--fs-md);transition:background .2s,transform .2s var(--ease)}
.cart-link:hover{background:var(--ink-2)}
.cart-link:active{transform:scale(.97)}
.cart-count{min-width:1.625rem;height:1.625rem;padding-inline:.4375rem;border-radius:var(--pill);background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:600;display:inline-grid;place-items:center;line-height:1}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.375rem,4vw,3rem);border-radius:var(--r-xl);background:linear-gradient(135deg,#2a1e15 0%,#1f1a15 55%,#3a1f10 100%);color:#fff;margin-top:clamp(.5rem,1.5vw,1rem)}
.hero::before,.hero::after{content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.hero::before{width:32rem;height:32rem;inset-inline-end:-10rem;top:-14rem;background:radial-gradient(circle,rgba(255,138,61,.55),transparent 65%)}
.hero::after{width:22rem;height:22rem;inset-inline-start:-6rem;bottom:-12rem;background:radial-gradient(circle,rgba(236,90,36,.4),transparent 65%)}
.hero-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .75rem;border-radius:var(--pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font-size:var(--fs-xs);font-weight:500;color:#ffd2b8;margin-bottom:.875rem}
.hero-badge i{width:.5rem;height:.5rem;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.hero h1{font-size:var(--fs-2xl);font-weight:700;margin:0 0 .625rem;line-height:1.35;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#ffb27a,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:rgba(255,255,255,.72);font-size:var(--fs-lg);max-width:32rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem;margin-top:clamp(1rem,2.5vw,1.625rem)}
.hero-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.hero-points li{display:inline-flex;align-items:center;gap:.4375rem;padding:.5rem .875rem;border-radius:var(--pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,.88)}
.hero-points .ic{width:1.05rem;height:1.05rem;color:#ffb38f}
.hero-art{position:relative;justify-self:center;width:min(100%,19rem);aspect-ratio:1}
.hero-art .plate{position:absolute;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08);border:6px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.35);display:grid;place-items:center;color:rgba(255,255,255,.35)}
.hero-art .plate img{width:100%;height:100%;object-fit:cover}
.hero-art .plate .ic{width:40%;height:40%;stroke-width:1.2}
.hero-art .p1{inset:8% 8% 8% 8%}
.hero-art .p2{width:36%;height:36%;inset-inline-start:-4%;bottom:0}
.hero-art .p3{width:28%;height:28%;inset-inline-end:0;top:0}
.hero-art .float-tag{position:absolute;inset-inline-end:-6%;bottom:14%;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem .5rem .875rem;border-radius:var(--r-sm);background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.hero-art .float-tag span{width:1.75rem;height:1.75rem;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.hero-art .float-tag .ic{width:1rem;height:1rem}

/* ===== Categories ===== */
.category-bar{display:flex;gap:.5rem;overflow-x:auto;padding-block:clamp(.875rem,2vw,1.25rem) .5rem;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.category-bar::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;scroll-snap-align:start;display:inline-flex;align-items:center;gap:.375rem;height:2.5rem;padding-inline:1.125rem;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:var(--fs-sm);white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.chip:hover{border-color:var(--line-2);transform:translateY(-1px)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}

/* ===== Section heading ===== */
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.75rem 0 1rem}
.section-heading h1{font-size:var(--fs-xl);font-weight:600;margin:.25rem 0 0}
.section-heading h2{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xl);font-weight:600;margin:0}
.count-badge{display:inline-grid;place-items:center;min-width:1.75rem;height:1.625rem;padding-inline:.5rem;border-radius:var(--pill);background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-xs);font-weight:600}
.page-head{margin:clamp(.75rem,2vw,1.25rem) 0 clamp(1rem,2.5vw,1.5rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;border-radius:var(--pill);background:var(--accent-soft);font-size:var(--fs-xs);color:var(--accent-ink);font-weight:600}
.text-link{display:inline-flex;align-items:center;gap:.375rem;padding:.4375rem .875rem;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:var(--fs-sm);white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.text-link:hover{color:var(--accent-ink);border-color:var(--accent-soft);background:var(--accent-soft)}
.text-link .ic{width:1rem;height:1rem}

/* ===== Menu — rounded product cards ===== */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--gap)}
.item{position:relative;display:flex;flex-direction:column;padding:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);content-visibility:auto;contain-intrinsic-size:auto 20rem}
.item:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-3px)}
.item.in-cart{border-color:#f8cdb6}
.item-thumb{aspect-ratio:4/3;width:100%;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--surface-2),var(--surface-3));display:grid;place-items:center;color:var(--line-2)}
.item-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.item:hover .item-thumb img{transform:scale(1.05)}
.item-thumb .ic{width:34%;height:34%;stroke-width:1.3;color:#d9cbbb}
.item-body{min-width:0;display:flex;flex-direction:column;gap:.125rem;padding:.75rem .5rem .25rem;flex:1}
.item-body h3{margin:0;font-size:var(--fs-lg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-body p{margin:0;font-size:var(--fs-xs);color:var(--muted);line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .5rem .375rem}
.price{font-size:var(--fs-lg);font-weight:700;white-space:nowrap}
.price small{font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin-inline-start:.25rem}
.add-form{position:relative;margin:0}
.add-btn{width:2.625rem;height:2.625rem;border:0;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;transition:background .2s,color .2s,transform .15s var(--ease),box-shadow .2s}
.add-btn .ic{width:1.3rem;height:1.3rem;stroke-width:2.3}
.add-btn:hover{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.add-btn:active{transform:scale(.9)}
.add-btn.busy{opacity:.55;pointer-events:none}
.item-qty:not([hidden])+.add-btn{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.item-qty{position:absolute;z-index:1;top:-.5rem;inset-inline-end:-.5rem;min-width:1.375rem;height:1.375rem;padding-inline:.3125rem;border-radius:var(--pill);background:var(--ink);color:#fff;border:2px solid var(--surface);font-size:.6875rem;font-weight:600;display:grid;place-items:center;line-height:1;animation:pop .25s var(--ease)}
@keyframes pop{from{transform:scale(.4);opacity:0}}

/* ===== Empty state ===== */
.empty-state{grid-column:1/-1;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(2.25rem,6vw,4rem) 1.25rem}
.empty-icon{width:4rem;height:4rem;border-radius:var(--r-lg);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin:0 auto 1rem}
.empty-icon .ic{width:1.75rem;height:1.75rem}
.empty-state h2,.empty-state h3{margin:0 0 .25rem;font-size:var(--fs-xl);font-weight:600}
.empty-state p{color:var(--muted);margin:0 0 1.25rem;font-size:var(--fs-sm)}

/* ===== Buttons ===== */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;min-height:2.875rem;padding-inline:1.5rem;border:1px solid transparent;border-radius:var(--pill);font-weight:600;font-size:var(--fs-md);transition:background .2s,border-color .2s,box-shadow .2s,transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn .ic{width:1.1rem;height:1.1rem}
.btn.primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;box-shadow:var(--shadow-accent)}
.btn.primary:hover{background:linear-gradient(135deg,var(--accent),var(--accent-ink))}
.btn.secondary{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.18)}
.btn.big{width:100%;min-height:3.25rem;font-size:var(--fs-lg)}
.muted{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:.75rem;text-align:center}

/* ===== Cart / checkout layout ===== */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) min(100%,24rem);gap:clamp(.875rem,2.2vw,1.5rem);align-items:start}
.cart-list{display:flex;flex-direction:column;gap:var(--gap)}
.cart-item{display:grid;grid-template-columns:clamp(4rem,12vw,5rem) minmax(0,1fr) auto auto;grid-template-areas:"thumb info qty total";align-items:center;gap:clamp(.75rem,1.8vw,1.25rem);padding:.5rem;padding-inline-end:clamp(.75rem,1.8vw,1.25rem);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:box-shadow .25s}
.cart-item:hover{box-shadow:var(--shadow)}
.cart-item .item-thumb{grid-area:thumb;aspect-ratio:1;border-radius:var(--r)}
.cart-info{grid-area:info;min-width:0}
.cart-info h3{margin:0;font-size:var(--fs-lg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-info span{color:var(--muted);font-size:var(--fs-xs)}
.qty-form{grid-area:qty;display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:var(--pill);background:var(--surface-2);border:1px solid var(--line);margin:0}
.qty-form button{width:2.125rem;height:2.125rem;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--ink-2);transition:background .2s,color .2s}
.qty-form button:hover{background:var(--accent);color:#fff}
.qty-form button .ic{width:1rem;height:1rem;stroke-width:2.2}
.qty-form strong{min-width:1.625rem;text-align:center;font-size:var(--fs-md);font-weight:600}
.line-total{grid-area:total;font-weight:700;font-size:var(--fs-md);white-space:nowrap;min-width:6rem;text-align:end}
.line-total small{font-weight:500;color:var(--muted);font-size:var(--fs-xs);margin-inline-start:.25rem}
.summary-card,.form-card,.status-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.125rem,2.6vw,1.75rem);box-shadow:var(--shadow-sm)}
.summary-card{position:sticky;top:6.5rem}
.card-title{font-size:var(--fs-lg);font-weight:600;margin:0 0 .5rem}
.summary-row{display:flex;justify-content:space-between;gap:1rem;padding:.6875rem 0;border-bottom:1px dashed var(--line-2);font-size:var(--fs-sm)}
.summary-row span{color:var(--muted)}
.summary-row strong{font-weight:600;white-space:nowrap}
.summary-total{display:flex;justify-content:space-between;align-items:center;margin:1rem 0;padding:.875rem 1rem;border-radius:var(--r);background:var(--surface-2);font-size:var(--fs-md);font-weight:600}
.summary-total strong{font-size:var(--fs-xl);font-weight:700;color:var(--accent-ink)}
.summary-total small{font-size:var(--fs-xs);color:var(--muted);font-weight:500}

/* ===== Forms ===== */
.card-head{display:flex;align-items:center;gap:.875rem;margin-bottom:1.25rem}
.card-head .card-title{margin:0}
.card-head p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.soft-icon{width:2.875rem;height:2.875rem;flex-shrink:0;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.soft-icon .ic{width:1.35rem;height:1.35rem}
.stack-form{display:flex;flex-direction:column;gap:1.125rem}
.field{display:flex;flex-direction:column;gap:.4375rem}
.field>span{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.stack-form input:not([type=radio]):not([type=checkbox]),.stack-form textarea,.stack-form select{width:100%;min-height:3rem;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);padding:.6875rem 1rem;font-size:1rem;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.stack-form input:focus,.stack-form textarea:focus,.stack-form select:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.stack-form textarea{resize:vertical;min-height:7rem;line-height:1.8}
.stack-form ::placeholder{color:#b3a89d}
.error{color:var(--danger);font-size:var(--fs-xs)}
.field>div,.field ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.625rem}
.field>div label,.field ul li label{display:flex;align-items:center;gap:.625rem;border:1.5px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);padding:.875rem 1rem;cursor:pointer;font-weight:500;font-size:var(--fs-sm);transition:.2s}
.field>div label:hover,.field ul li label:hover{border-color:var(--line-2)}
.field input[type=radio]{accent-color:var(--accent);width:1.1rem;height:1.1rem;margin:0}
.field>div label:has(input:checked),.field ul li label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.notice{display:flex;gap:.625rem;align-items:flex-start;background:var(--warn-soft);border:1px solid #fbe3bd;padding:.875rem 1rem;border-radius:var(--r-sm);color:#7c4a0e;font-size:var(--fs-sm);line-height:1.9}
.notice .ic{width:1.15rem;height:1.15rem;margin-top:.3rem;color:var(--warn)}
.notice strong{color:var(--warn)}
.cod-box{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border-radius:var(--r);background:var(--ok-soft);color:var(--ok);margin-top:.25rem}
.cod-box .ic{width:1.5rem;height:1.5rem}
.cod-box strong,.cod-box small{display:block}
.cod-box strong{font-size:var(--fs-sm)}
.cod-box small{font-size:var(--fs-xs);color:var(--ink-2);opacity:.8;margin-top:.125rem;line-height:1.7}

/* ===== Steps ===== */
.steps{display:flex;align-items:center;gap:.5rem;list-style:none;margin:0 0 .5rem;padding:0;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.steps li{display:inline-flex;align-items:center;gap:.375rem}
.steps li b{flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);font-size:.6875rem}
.steps li.on{color:var(--accent-ink)}
.steps li.on b{background:var(--accent);color:#fff}
.steps li.done b{background:var(--ok-soft);color:var(--ok)}
.steps li b .ic{width:.8rem;height:.8rem;stroke-width:2.6}
.steps .sep{width:1.75rem;height:2px;border-radius:2px;background:var(--line-2)}

/* ===== Order tracking ===== */
.order-hero{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,#fff 40%,var(--accent-soft));border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.125rem,3vw,2rem);margin:clamp(.5rem,1.5vw,1rem) 0 clamp(.875rem,2.2vw,1.5rem)}
.order-hero-main{display:flex;align-items:center;gap:1rem}
.order-hero .done-mark{width:3.25rem;height:3.25rem;flex-shrink:0;border-radius:var(--r);background:var(--ok);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(21,128,61,.28)}
.order-hero .done-mark .ic{width:1.6rem;height:1.6rem;stroke-width:2.4}
.order-hero h1{font-size:var(--fs-xl);font-weight:700;margin:.25rem 0 .125rem}
.order-hero h1 span{color:var(--accent-ink)}
.order-hero p{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.live-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-sm)}
.live-badge i{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.45)}100%{box-shadow:0 0 0 .5rem rgba(21,128,61,0)}}
.timeline{position:relative;display:flex;flex-direction:column;gap:.375rem}
.timeline::before{content:'';position:absolute;inset-inline-start:1.75rem;top:1.5rem;bottom:1.5rem;width:2px;border-radius:2px;background:var(--line)}
.timeline-step{display:grid;grid-template-columns:2.5rem 1fr;gap:.875rem;align-items:center;padding:.625rem;border-radius:var(--r);position:relative;transition:background .3s}
.timeline-step>span{width:2.5rem;height:2.5rem;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line-2);color:var(--muted);font-size:var(--fs-sm);font-weight:600;z-index:1;transition:.3s}
.timeline-step strong,.timeline-step small{display:block}
.timeline-step strong{font-size:var(--fs-md);font-weight:600}
.timeline-step small{font-size:var(--fs-xs);color:var(--muted)}
.timeline-step.done>span{background:var(--ok-soft);border-color:#bfe3cc;color:var(--ok)}
.timeline-step.current{background:var(--accent-soft)}
.timeline-step.current>span{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-accent)}
.timeline-step.current strong{color:var(--accent-ink)}
.cancelled-note{margin-top:.875rem;padding:.875rem 1rem;border-radius:var(--r);background:var(--danger-soft);color:var(--danger);font-size:var(--fs-sm);font-weight:500}
.customer-box{display:flex;flex-direction:column;gap:.25rem;background:var(--surface-2);padding:1rem;border-radius:var(--r);margin:.25rem 0 1rem;font-size:var(--fs-sm)}
.customer-box strong{font-size:var(--fs-md)}
.customer-box span{color:var(--muted)}
.customer-box span[dir=ltr]{text-align:end}
.tag{align-self:flex-start;margin-top:.375rem;padding:.25rem .75rem;border-radius:var(--pill);background:var(--ok-soft);color:var(--ok)!important;font-size:var(--fs-xs);font-weight:600}

/* ===== Toasts ===== */
.messages-stack{position:fixed;z-index:60;top:calc(env(safe-area-inset-top) + 5.25rem);inset-inline:var(--gutter);display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}
.messages-stack:empty{display:none}
.toast{pointer-events:auto;max-width:28rem;padding:.6875rem 1.25rem;border-radius:var(--pill);background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-lg);animation:toast-in .25s var(--ease);transition:opacity .25s,transform .25s}
.toast.success{background:var(--ink)}
.toast.error,.toast.warning{background:var(--danger)}
.toast.out{opacity:0;transform:translateY(-.5rem)}
@keyframes toast-in{from{opacity:0;transform:translateY(-.5rem) scale(.96)}}

/* ===== Floating cart bar ===== */
.cart-bar{position:fixed;z-index:50;inset-inline:var(--gutter);bottom:calc(env(safe-area-inset-bottom) + .875rem);max-width:30rem;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.5rem;padding:.5rem;padding-inline-end:1.25rem;border-radius:var(--pill);background:var(--ink);color:#fff;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-lg);animation:bar-in .35s var(--ease)}
.cart-bar-count{display:inline-flex;align-items:center;gap:.375rem;height:2.5rem;padding-inline:.875rem;border-radius:var(--pill);background:linear-gradient(135deg,var(--accent-2),var(--accent));font-weight:600}
.cart-bar-count .ic{width:1.1rem;height:1.1rem}
.cart-bar strong{font-weight:700}
.cart-bar small{font-weight:500;opacity:.7}
@keyframes bar-in{from{opacity:0;transform:translateY(1rem)}}
body:has(.cart-bar:not([hidden])) .site-footer{padding-bottom:calc(env(safe-area-inset-bottom) + 5.5rem)}

/* ===== Footer — rounded dark card ===== */
.site-footer{padding-block:0 clamp(.875rem,2vw,1.5rem);color:rgba(255,255,255,.62);font-size:var(--fs-sm)}
.footer-card{position:relative;overflow:hidden;background:var(--ink);border-radius:var(--r-xl);padding:clamp(1.375rem,3.5vw,2.5rem)}
.footer-card::before{content:'';position:absolute;width:24rem;height:24rem;inset-inline-start:-8rem;top:-14rem;border-radius:50%;background:radial-gradient(circle,rgba(236,90,36,.35),transparent 65%);pointer-events:none}
.footer-top{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1.5rem}
.footer-brand{display:flex;align-items:center;gap:.625rem;font-size:var(--fs-xl);font-weight:700;color:#fff}
.footer-brand .brand-mark{width:2.375rem;height:2.375rem}
.footer-brand .brand-mark .ic{width:1.15rem;height:1.15rem}
.footer-about p{margin:.625rem 0 .75rem;max-width:26rem;line-height:1.9}
.footer-address{display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .875rem;border-radius:var(--pill);background:rgba(255,255,255,.07);font-size:var(--fs-xs);color:rgba(255,255,255,.8)}
.footer-address .ic{width:1rem;height:1rem;color:var(--accent-2)}
.footer-social{display:flex;gap:.5rem}
.footer-social a{width:2.75rem;height:2.75rem;border-radius:var(--r-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;transition:background .2s,transform .2s var(--ease)}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.footer-social .ic{width:1.15rem;height:1.15rem}
.footer-bottom{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.125rem;border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-xs)}
.footer-links{display:flex;gap:.5rem}
.footer-links a{color:rgba(255,255,255,.85);font-weight:500;padding:.3125rem .75rem;border-radius:var(--pill);background:rgba(255,255,255,.06);transition:background .2s}
.footer-links a:hover{background:rgba(255,255,255,.14);color:#fff}

/* ===== Layout switches (content-driven, not device-specific) ===== */
@media (max-width:56rem){
  .checkout-layout{grid-template-columns:minmax(0,1fr)}
  .summary-card{position:static}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-art{display:none}
}
@media (max-width:40rem){
  html{scroll-padding-top:8.5rem}
  .header-inner{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand nav" "search search";row-gap:.5rem;padding:.5rem}
  .brand-mark{width:2.375rem;height:2.375rem}
  .nav-link,.cart-label{display:none}
  .cart-link{width:2.75rem;height:2.75rem;padding:0;justify-content:center;background:var(--surface-2);color:var(--ink)}
  .cart-link:hover{background:var(--surface-3)}
  .cart-link .ic{width:1.3rem;height:1.3rem}
  .cart-link .cart-count{position:absolute;top:-.3125rem;inset-inline-start:-.3125rem;min-width:1.375rem;height:1.375rem;border:2px solid var(--surface)}
  .header-search{max-width:none}
  .messages-stack{top:calc(env(safe-area-inset-top) + 8.25rem)}
  .hero{border-radius:var(--r-lg)}
  .hero p{font-size:var(--fs-md)}
  .hero-actions .btn{flex:1}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
  .item{padding:.375rem;border-radius:var(--r)}
  .item-thumb{aspect-ratio:1;border-radius:var(--r-sm)}
  .item-body{padding:.5rem .375rem 0}
  .item-body h3{font-size:var(--fs-md)}
  .item-body p{-webkit-line-clamp:1}
  .item-foot{padding:.375rem .375rem .25rem}
  .price{font-size:var(--fs-md)}
  .price small{display:block;margin:0;line-height:1.2}
  .add-btn{width:2.375rem;height:2.375rem;border-radius:var(--r-xs)}
  .cart-item{grid-template-columns:4rem minmax(0,1fr) auto;grid-template-areas:"thumb info qty" "thumb total qty";row-gap:.125rem;border-radius:var(--r)}
  .line-total{text-align:start;min-width:0}
  .summary-card,.form-card,.status-card,.order-hero,.footer-card,.empty-state{border-radius:var(--r-lg)}
  .footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:22rem){.menu-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}