/* ============================================================
   THE BUNKER — core styles + 3 направления (data-theme)
   Переменные задаются темой; Tweaks переопределяют их inline.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.ui-lock{overflow:hidden}
html, body, .modal-body, .cart-items, .profile-body, .catnav-inline{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 72%,#777) color-mix(in srgb,var(--bg) 88%,#000);
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{
  background:color-mix(in srgb,var(--bg) 88%,#000);
  border-left:1px solid var(--border);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#7b2c00));
  border-radius:999px;
  border:2px solid color-mix(in srgb,var(--bg) 88%,#000);
}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::-webkit-scrollbar-corner{background:var(--bg)}
::-webkit-scrollbar-button{width:0;height:0;display:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- THEME: Уголь (default) ---------------- */
:root,[data-theme="charcoal"]{
  --bg:#111112;
  --bg-2:#1a1a1c;
  --bg-3:#222225;
  --text:#f4f1ec;
  --text-dim:#a3a09a;
  --text-faint:#6e6c68;
  --accent:#ff6a00;
  --accent-ink:#0d0d0d;
  --accent-soft:rgba(255,106,0,.14);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --radius:16px;
  --radius-sm:11px;
  --font-display:"Oswald",sans-serif;
  --font-marker:"Caveat",cursive;
  --font-body:"Golos Text",system-ui,sans-serif;
  --shadow:0 18px 40px -22px rgba(0,0,0,.85);
  --texture-op:.04;
  --doodle:1;
  --head-skew:-2deg;
  --display-spacing:.01em;
  --display-weight:700;
}

/* ---------------- THEME: Граффити ---------------- */
[data-theme="graffiti"]{
  --bg:#0c0c0d;
  --bg-2:#161514;
  --bg-3:#201e1b;
  --text:#f6f2ea;
  --text-dim:#a8a097;
  --text-faint:#6f675e;
  --accent:#ff5722;
  --accent-ink:#0a0a0a;
  --accent-soft:rgba(255,87,34,.16);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.18);
  --radius:6px;
  --radius-sm:4px;
  --font-display:"Oswald",sans-serif;
  --font-marker:"Caveat",cursive;
  --font-body:"Golos Text",system-ui,sans-serif;
  --shadow:0 20px 46px -20px rgba(0,0,0,.9);
  --texture-op:.085;
  --doodle:1;
  --head-skew:-3.5deg;
  --display-spacing:0em;
  --display-weight:700;
}

/* ---------------- THEME: Бетон (индустриальный) ---------------- */
[data-theme="concrete"]{
  --bg:#15171a;
  --bg-2:#1f2125;
  --bg-3:#282b30;
  --text:#eef0f2;
  --text-dim:#9aa0a8;
  --text-faint:#676d75;
  --accent:#ffb000;
  --accent-ink:#15171a;
  --accent-soft:rgba(255,176,0,.14);
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.15);
  --radius:4px;
  --radius-sm:3px;
  --font-display:"Russo One",sans-serif;
  --font-marker:"Caveat",cursive;
  --font-body:"Golos Text",system-ui,sans-serif;
  --shadow:0 16px 38px -22px rgba(0,0,0,.8);
  --texture-op:.05;
  --doodle:0;
  --head-skew:0deg;
  --display-spacing:.02em;
  --display-weight:400;
}

/* density + grunge vars */
:root{
  --d:1;
  --grunge:url("assets/textures/grunge.jpg");
  --og:url("assets/textures/orange-grunge.png");
  --grunge-op:0.55;
  --doodle-op:0.92;
}
[data-density="compact"]{--d:.78}
[data-density="comfy"]{--d:1.2}

/* texture overlay — real grunge scan */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--texture-op);mix-blend-mode:screen;
  background-image:url("assets/textures/grunge.jpg");
  background-size:cover;background-position:center;
}

/* ---- грunge doodles — baked PNG <img>, reliable render ---- */
.scribble{
  display:inline-block;object-fit:contain;
  opacity:var(--doodle-op);pointer-events:none;flex:none;
}

/* ---- grunge-textured orange DISPLAY text (pre-coloured orange texture, no blend needed) ---- */
/* ---- grunge overlay on orange BUTTONS / chips ---- */
.btn-primary, .cart-btn, .mcart,
.catnav button.active, .add-btn:hover, .opt[aria-pressed="true"], .toast{
  position:relative;isolation:isolate;overflow:hidden;
}
/* tagchip грунж отдельно — нельзя ставить position:relative, иначе слетает абсолютное позиционирование */
.tagchip.tag-hit{isolation:isolate;overflow:hidden}

/* layout helpers */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.section{padding:calc(56px * var(--d)) 0}
.eyebrow{
  font-family:var(--font-display);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;font-size:13px;color:var(--accent);
}

/* painted banner heading */
.banner-h{position:relative;display:inline-block}
.banner-h h2{
  font-family:var(--font-display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:var(--display-spacing);
  font-size:clamp(30px,5.4vw,52px);line-height:.96;color:var(--text);
  position:relative;z-index:1;padding:.08em .12em;
}
.banner-h.paint h2{color:var(--accent-ink)}
.banner-h.paint::before{
  content:"";position:absolute;inset:-6% -3%;z-index:0;background:var(--text);
  transform:rotate(var(--head-skew));
  -webkit-mask:var(--brush);mask:var(--brush);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.banner-h.accentbar::after{
  content:"";position:absolute;left:.1em;bottom:-.12em;height:.16em;width:62%;
  background:var(--accent);transform:rotate(var(--head-skew));border-radius:2px;
}
:root{--brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cpath d='M6 22C40 8 90 14 140 10c46-4 110 2 150 6 4 14 0 30-2 44-60 8-120 6-180 8-40 1-86 4-108-6-6-20-2-30 4-40z'/%3E%3C/svg%3E")}

/* ============================================================ GRAFFITI BACKGROUND LAYER ============================================================ */
#root{ position:relative }
.graffiti-layer{
  position:absolute;top:0;left:0;width:100%;height:500vh;
  z-index:-1;pointer-events:none;overflow:hidden;
}
.graffiti-layer img{
  position:absolute;
  filter:invert(1);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* ============================================================ HEADER ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-head .wrap{display:flex;align-items:center;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:46px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.brand .city{
  font-family:var(--font-display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);line-height:1.3;
  border-left:2px solid var(--accent);padding-left:9px;
}
.head-nav{display:flex;gap:6px;margin-left:6px}
.head-nav a{
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;font-size:14px;color:var(--text-dim);
  padding:8px 12px;border-radius:var(--radius-sm);transition:.18s;
}
.head-nav a:hover{color:var(--text);background:var(--bg-2)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.head-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.head-meta b{font-family:var(--font-display);font-size:15px;letter-spacing:.02em}
.head-meta span{font-size:11px;color:var(--text-dim)}

/* address selector */
.addr-sel{position:relative}
.addr-trigger{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  padding:6px 10px;border-radius:var(--radius-sm);transition:.15s;border:1px solid transparent;
  cursor:pointer;background:none;
}
.addr-trigger:hover,.addr-trigger[aria-expanded="true"]{
  background:var(--bg-2);border-color:var(--border-strong);
}
.addr-city{
  display:flex;align-items:center;
  font-family:var(--font-display);font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);font-weight:600;
}
.addr-street{
  display:flex;align-items:center;gap:2px;
  font-size:11.5px;color:var(--text-dim);white-space:nowrap;
}
.addr-street-text{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right}

/* двухстрочный чип адреса: улица+дом / стоимость доставки */
.addr-trigger-2line{
  flex-direction:row;align-items:center;gap:8px;max-width:300px;
}
.addr-trigger-2line .addr-pin{flex-shrink:0;color:var(--accent)}
.addr-trigger-2line .addr-lines{
  display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.25;
}
.addr-trigger-2line .addr-line1{
  font-size:13px;font-weight:600;color:var(--text);
  max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.addr-trigger-2line .addr-line2{
  font-size:11.5px;color:var(--text-dim);
  max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.addr-trigger-2line .addr-line2.bad{color:#e5484d}
.addr-trigger-2line .addr-caret{flex-shrink:0;color:var(--text-dim);transition:.15s}
.addr-drop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:50;
  width:310px;background:var(--bg-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  animation:pop .18s cubic-bezier(.2,.9,.3,1.1);
}
.addr-drop-title{
  font-family:var(--font-display);font-size:13px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-dim);margin-bottom:12px;
}
.addr-form{display:flex;gap:8px}
.addr-input{
  flex:1;background:var(--bg-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:10px 13px;font-size:14px;color:var(--text);font-family:var(--font-body);
  outline:none;transition:.15s;
}
.addr-form .addr-input{width:100%;box-sizing:border-box}
.addr-input:focus{border-color:var(--accent)}
.addr-input::placeholder{color:var(--text-faint)}
.addr-apply{
  background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);
  font-family:var(--font-display);font-weight:700;font-size:14px;
  padding:10px 14px;transition:.15s;border:none;cursor:pointer;
}
.addr-apply:disabled{opacity:.4;cursor:not-allowed}
.addr-apply:not(:disabled):hover{filter:brightness(1.08)}
.addr-divider{height:1px;background:var(--border);margin:12px 0}
.addr-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 8px;border-radius:var(--radius-sm);transition:.15s;cursor:pointer;
  background:none;border:none;color:var(--text);
}
.addr-opt:hover{background:var(--bg-3)}
.addr-opt-text{display:flex;flex-direction:column;gap:2px}
.addr-opt-text b{font-size:14px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.addr-sub{font-size:12px;color:var(--text-dim)}
.cart-btn{
  display:flex;align-items:center;gap:10px;background:var(--accent);
  color:var(--accent-ink);font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;font-size:15px;
  padding:11px 16px;border-radius:var(--radius-sm);transition:.16s;
}
.cart-btn:hover{filter:brightness(1.08)}
.cart-btn .n{
  background:var(--accent-ink);color:var(--accent);min-width:22px;height:22px;
  border-radius:11px;display:grid;place-items:center;font-size:12px;padding:0 6px;
}
.burger-toggle{display:none;width:44px;height:44px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);place-items:center}
.burger-toggle svg{width:22px;height:22px}

/* direction switcher */
.dirbar{
  display:flex;justify-content:center;gap:8px;padding:9px 22px;
  background:var(--bg-2);border-bottom:1px solid var(--border);
  position:relative;z-index:30;flex-wrap:wrap;align-items:center;
}
.dirbar .lbl{font-size:12px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-display)}
.dirbar button{
  font-family:var(--font-display);font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;padding:6px 14px;border-radius:999px;
  border:1px solid var(--border-strong);color:var(--text-dim);transition:.16s;
}
.dirbar button[aria-pressed="true"]{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;
}
.dirbar button:hover{color:var(--text)}

/* ============================================================ HERO ============================================================ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);min-height:clamp(620px,62vw,960px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("assets/textures/brick.png");
  background-size:820px auto;background-position:center top;
  opacity:.58;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,.76) 66%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,.76) 66%,transparent);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.28) 46%,rgba(0,0,0,.68)),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.1) 58%,rgba(0,0,0,.85)),
    radial-gradient(82% 82% at 80% 35%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 60%);
}
.hero-inner{
  max-width:none;width:min(100%,1780px);
  display:block;
  min-height:inherit;
  padding:clamp(28px,3.2vw,58px) clamp(28px,3.8vw,70px) clamp(28px,3vw,54px);
}
.hero-copy{
  --hero-title-w:min(37.3vw,663px);
  --hero-title-left:clamp(40px,4.8vw,88px);
  position:relative;z-index:2;display:block;padding-top:clamp(12px,2vw,32px)
}
.hero-art-stage{position:relative;min-height:clamp(500px,52vw,820px);isolation:isolate}
.hero-title-art{
  position:relative;z-index:2;width:var(--hero-title-w);height:auto;display:block;
  padding-top:clamp(30px,4.4vw,76px);
  margin-left:var(--hero-title-left);
  transform:translate3d(var(--hero-title-shift-x,0px),var(--hero-title-shift-y,0px),0);
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.64));
  will-change:transform;
}
.hero-logo{height:clamp(110px,15vw,180px);width:auto;margin-bottom:18px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.hero h1{
  font-family:var(--font-display);font-weight:var(--display-weight);
  text-transform:uppercase;line-height:.95;letter-spacing:var(--display-spacing);
  font-size:clamp(36px,6vw,72px);margin-bottom:18px;
}
.hero h1 em{font-style:normal;color:var(--accent);position:relative}
.hero .lede{font-size:clamp(16px,2vw,19px);color:var(--text-dim);max-width:46ch;margin-bottom:26px}
.hero-actions{
  position:relative;z-index:4;margin-top:clamp(-260px,-17vw,-190px);
  width:var(--hero-title-w);margin-left:var(--hero-title-left);
  display:flex;flex-direction:column;align-items:center;
}
.hero-cta{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;width:100%}
.btn{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:16px;padding:15px 26px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;gap:10px;transition:.16s;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--accent)}
.hero-badges{display:flex;gap:34px;margin-top:clamp(22px,2.6vw,42px);justify-content:center;flex-wrap:wrap;width:100%}
.hero-badge{display:flex;flex-direction:column}
.hero-badge b{font-family:var(--font-display);font-size:clamp(24px,2.3vw,36px);color:var(--accent)}
.hero-badge span{font-size:12.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.hero-burger-wrap{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-burger-art{
  position:absolute;width:min(55vw,940px);max-width:none;height:auto;
  right:clamp(-54px,-1.8vw,-14px);top:50%;transform:translate3d(var(--hero-burger-shift,0px),-50%,0);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.72));
  will-change:transform;
}
.hero-visual{position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:#000;display:grid;place-items:center}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-visual .ph-emoji{font-size:clamp(90px,20vw,200px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.hero-marker{position:absolute;bottom:16px;right:18px;font-size:30px;z-index:2}
.hero-visual .ph-note{position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-size:12px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase}

/* category nav — full-width, sticky under header */
.catnav-inline{
  position:sticky;top:74px;z-index:35;
  display:flex;gap:8px;overflow-x:auto;
  width:100%;box-sizing:border-box;
  padding:13px max(22px, calc((100vw - 1180px) / 2 + 22px));
  background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.catnav-inline::-webkit-scrollbar{display:none}
.catnav-inline::-webkit-scrollbar{display:none}
.catnav-inline button{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:14.5px;color:var(--text-dim);
  padding:9px 16px;border-radius:999px;border:1px solid var(--border);
  transition:.16s;white-space:nowrap;background:none;cursor:pointer;
}
.catnav-inline button:hover{color:var(--text);border-color:var(--border-strong)}
.catnav-inline button.active{
  background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);font-weight:600;
  position:relative;isolation:isolate;overflow:hidden;
}
/* ============================================================ MENU ============================================================ */
.menu-cat{padding-top:calc(40px * var(--d));scroll-margin-top:150px}
.cat-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.cat-doodle{flex:none}
.cat-note{font-size:14px;color:var(--text-dim);max-width:54ch;margin:6px 0 22px}
.cat-note.warn{color:var(--accent)}

.menu-grid{display:grid;gap:calc(16px * var(--d))}
.menu-grid.cards{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.menu-grid.list{grid-template-columns:1fr}
.menu-grid.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

.card{
  position:relative;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:visible;transition:.18s;display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px var(--border);
}
.card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.card-img{
  position:relative;aspect-ratio:4/3;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;background:
    radial-gradient(110% 110% at 65% 25%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 58%),
    var(--bg-3);
  display:grid;place-items:center;overflow:hidden;
}
.card-img .emoji{font-size:64px;opacity:.92;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.card-img.has-img{background:#000}
.card-img.has-img .prod-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card:hover .card-img.has-img img{transform:scale(1.045)}
.card-img.has-img img{transition:transform .4s ease}
.card-img .ph-tag{position:absolute;bottom:8px;left:8px;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);background:color-mix(in srgb,var(--bg) 70%,transparent);
  padding:3px 7px;border-radius:4px}
.tagchip{
  position:absolute;top:10px;left:10px;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:4px 9px;border-radius:999px;z-index:2;
}
.tag-hit{background:var(--accent);color:var(--accent-ink)}
.tag-new{background:#3ba55d;color:#06210f}
.tag-spicy{background:#e23b2e;color:#fff}
.tag-veg{background:#7cb342;color:#0c1f06}
/* image tags — replace text chips */
.tagimg{
  position:absolute;top:0;left:0;z-index:4;transform:translate(-25%,-25%);
  width:68px;height:auto;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.tagimg-modal{width:72px;top:10px;left:10px}
.card-body{padding:calc(15px * var(--d)) calc(16px * var(--d)) calc(16px * var(--d));display:flex;flex-direction:column;gap:7px;flex:1}
.card-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card-title h3{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:21px;line-height:1}
.card-weight{font-size:12px;color:var(--text-faint);white-space:nowrap}
.card-desc{font-size:13.5px;color:var(--text-dim);line-height:1.42;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.meat-icons{display:flex;gap:2px;align-items:center;flex:0 1 auto;margin-left:auto;min-width:0}
.meat-icon{width:var(--meat-size,31px);height:var(--meat-size,31px);object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.price{font-family:var(--font-display);font-weight:700;font-size:24px}
.price .cur{font-size:16px;color:var(--text-dim);margin-left:1px}
.price .from{font-size:12px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;margin-right:5px}
.add-btn{
  background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:13px;padding:10px 14px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:7px;transition:.15s;
}
.add-btn:hover{background:var(--accent);color:var(--accent-ink)}
.add-btn svg{width:15px;height:15px}

/* list layout */
.menu-grid.list .card{flex-direction:row;align-items:stretch}
.menu-grid.list .card-img{width:170px;aspect-ratio:auto;flex-shrink:0}
.menu-grid.list .card-img .emoji{font-size:48px}
.menu-grid.list .card-desc{-webkit-line-clamp:3}
/* compact layout */
.menu-grid.compact .card-img{aspect-ratio:16/9}
.menu-grid.compact .card-img .emoji{font-size:44px}
.menu-grid.compact .card-title h3{font-size:18px}
.menu-grid.compact .card-desc{-webkit-line-clamp:2;font-size:12.5px}
.menu-grid.compact .price{font-size:20px}

/* ============================================================ DOODLES ============================================================ */
.doodle{position:absolute;pointer-events:none;color:var(--accent);opacity:calc(var(--doodle) * .9);z-index:2}
.doodle.ink{color:var(--text)}
.doodle svg{width:100%;height:100%;display:block}
[data-doodle="off"] .doodle{display:none}
.marker{font-family:var(--font-marker);color:var(--accent);transform:rotate(-7deg);display:inline-block;
  opacity:var(--doodle)}

/* ============================================================ PRODUCT MODAL ============================================================ */
.modal-scrim{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.66);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:18px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{
  width:min(560px,100%);max-height:92vh;overflow:hidden;background:var(--bg);
  border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);
  position:relative;animation:pop .24s cubic-bezier(.2,.9,.3,1.2);
  display:flex;flex-direction:column}
@keyframes pop{from{transform:translateY(20px) scale(.97);opacity:0}}
.modal-img{aspect-ratio:16/10;position:relative;background:
  radial-gradient(110% 110% at 60% 20%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 60%),var(--bg-3);
  display:grid;place-items:center}
.modal-img .emoji{font-size:100px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.modal-img.has-img{background:#000}
.modal-img.has-img .prod-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:20px;backdrop-filter:blur(6px)}
.modal-close:hover{background:var(--accent);color:var(--accent-ink)}
.modal-body{padding:22px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 70%,#777) var(--bg-2)}
.modal-body::-webkit-scrollbar{width:7px}
.modal-body::-webkit-scrollbar-track{background:var(--bg-2);border-left:1px solid var(--border)}
.modal-body::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--accent) 64%,#777);
  border-radius:999px;
  border:2px solid var(--bg-2);
}
.modal-body::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.modal-body h2{font-family:var(--font-display);text-transform:uppercase;font-size:30px;line-height:1;margin-bottom:6px}
.modal-meta{display:flex;gap:14px;color:var(--text-dim);font-size:13px;margin-bottom:14px}
.modal-desc{color:var(--text-dim);font-size:15px;line-height:1.5;margin-bottom:22px}
.opt-group{margin-bottom:20px}
.opt-group h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:14px;
  color:var(--text-dim);margin-bottom:10px}
.opt-row{display:flex;flex-wrap:wrap;gap:9px}
.opt{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:11px 15px;font-size:14px;
  font-family:var(--font-display);font-weight:500;letter-spacing:.02em;transition:.15s;display:flex;gap:8px;align-items:center}
.opt:hover{border-color:var(--accent)}
.opt[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.opt .op{color:var(--text-faint);font-size:12px}
.opt[aria-pressed="true"] .op{color:var(--accent-ink)}
.addon-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.addon-row:last-child{border-bottom:none}
.addon-row .nm{font-size:14.5px}
.addon-row .rt{display:flex;align-items:center;gap:12px}
.addon-row .pr{color:var(--text-dim);font-size:13px}
.chk{width:26px;height:26px;border-radius:7px;border:1px solid var(--border-strong);display:grid;place-items:center;transition:.15s}
.chk[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chk svg{width:15px;height:15px}
.modal-foot{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border);
  padding:16px 22px;display:flex;align-items:center;gap:14px}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:4px}
.qty button{width:38px;height:38px;border-radius:calc(var(--radius-sm) - 2px);font-size:22px;display:grid;place-items:center;
  font-family:var(--font-display);transition:.14s}
.qty button:hover{background:var(--bg-2);color:var(--accent)}
.qty .v{min-width:30px;text-align:center;font-family:var(--font-display);font-size:19px}
.modal-foot .btn{
  flex:1;justify-content:center;min-height:50px;
  padding:12px 18px;white-space:nowrap;line-height:1.05;text-align:center;
}

/* ============================================================ CART DRAWER ============================================================ */
.cart-scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);animation:fade .2s}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:56;width:min(420px,100%);
  background:var(--bg);border-left:1px solid var(--border-strong);display:flex;flex-direction:column;
  animation:slideIn .26s cubic-bezier(.2,.9,.3,1);box-shadow:-20px 0 60px -30px rgba(0,0,0,.9)}
@keyframes slideIn{from{transform:translateX(100%)}}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border)}
.cart-head h3{font-family:var(--font-display);text-transform:uppercase;font-size:24px;letter-spacing:.03em}
.cart-head .x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;transition:.14s}
.cart-head .x:hover{background:var(--bg-2);color:var(--accent)}
.cart-items{flex:1;overflow:auto;padding:14px 22px;display:flex;flex-direction:column;gap:14px}
.cart-empty{flex:1;display:grid;place-items:center;text-align:center;color:var(--text-dim);padding:40px}
.cart-empty .em{font-size:70px;opacity:.5;margin-bottom:14px}
.cart-empty-icon{width:96px;height:96px;object-fit:contain;opacity:.78;margin-bottom:18px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.ci{display:flex;gap:13px;align-items:flex-start}
.ci-img{width:62px;height:62px;border-radius:var(--radius-sm);background:
  radial-gradient(110% 110% at 60% 25%, color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),var(--bg-3);
  display:grid;place-items:center;font-size:30px;flex-shrink:0;overflow:hidden}
.ci-img.has-img{background:#000}
.ci-img.has-img img{width:100%;height:100%;object-fit:cover}
.ci-main{flex:1;min-width:0}
.ci-main h4{font-family:var(--font-display);text-transform:uppercase;font-size:16px;letter-spacing:.02em}
.ci-main .opts{font-size:12px;color:var(--text-faint);margin-top:2px;line-height:1.35}
.ci-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ci-qty{display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:8px}
.ci-qty button{width:28px;height:28px;display:grid;place-items:center;font-size:16px;font-family:var(--font-display);transition:.14s}
.ci-qty button:hover{color:var(--accent)}
.ci-qty .v{min-width:24px;text-align:center;font-size:14px;font-family:var(--font-display)}
.ci-price{font-family:var(--font-display);font-weight:600;font-size:17px}
.cart-foot{border-top:1px solid var(--border);padding:18px 22px;background:var(--bg-2)}
.cart-row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-dim);margin-bottom:8px}
.cart-row.total{font-family:var(--font-display);font-size:22px;color:var(--text);margin:12px 0 16px;text-transform:uppercase}
.cart-row.total b{color:var(--accent)}
.cart-foot .btn{width:100%;justify-content:center}
.cart-hint{font-size:12px;color:var(--text-faint);text-align:center;margin-top:10px;line-height:1.5}

/* ============================================================ INFO STRIP / FEATURES ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feat{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:22px;position:relative}
.feat .ic{height:46px;margin-bottom:12px;display:flex;align-items:center}
.feat h4{font-family:var(--font-display);text-transform:uppercase;font-size:18px;letter-spacing:.02em;margin-bottom:6px}
.feat p{font-size:14px;color:var(--text-dim);line-height:1.5}

/* ============================================================ DELIVERY / FOOTER ============================================================ */
.delivery{position:relative;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.delivery::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("assets/textures/brick.png");
  background-size:680px auto;opacity:.32;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.85),transparent 70%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.85),transparent 70%);
}
.delivery .wrap{position:relative;z-index:1}
.delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.del-item h4{font-family:var(--font-display);text-transform:uppercase;font-size:15px;letter-spacing:.06em;color:var(--accent);margin-bottom:8px}
.del-item p{font-size:15px;line-height:1.55}
.del-item .big{font-family:var(--font-display);font-size:26px;text-transform:uppercase}
.site-foot{padding:48px 0 36px;border-top:1px solid var(--border)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:34px}
.foot-grid img{height:54px;margin-bottom:16px}
.foot-grid p{color:var(--text-dim);font-size:14px;line-height:1.6;max-width:34ch}
.foot-col h5{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--text-dim);margin-bottom:14px}
.foot-col a{display:block;padding:5px 0;font-size:15px;transition:.14s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:var(--text-faint)}
.foot-bottom .soc{display:flex;gap:10px}
.foot-bottom .soc a{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);
  display:grid;place-items:center;transition:.15s}
.foot-bottom .soc a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.foot-bottom .soc svg{width:18px;height:18px}
.foot-bottom .soc .soc-text{font-family:var(--font-display);font-size:12px;font-weight:900;line-height:1}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:80;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:15px;padding:13px 22px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow);opacity:0;transition:.26s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:767px){
  .toast.over-mcart{bottom:82px}
}

/* mobile cart bar */
.mcart{position:fixed;left:14px;right:14px;bottom:14px;z-index:45;display:flex;
  background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);
  padding:14px 18px;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);animation:slideUp .3s;cursor:pointer;border:none;}
@keyframes slideUp{from{transform:translateY(120%)}}
@media(min-width:768px){
  .mcart{left:auto;right:32px;bottom:32px;width:auto;border-radius:var(--radius-sm);padding:13px 28px;}
}
.mcart-label{font-size:18px;line-height:1;white-space:nowrap}
.mcart-total{font-size:24px;line-height:1;white-space:nowrap}
.mcart-total span{font-size:16px;margin-left:2px}
.mcart .l{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.mcart .l .n{background:var(--accent-ink);color:var(--accent);min-width:24px;height:24px;border-radius:12px;
  display:grid;place-items:center;font-size:13px;padding:0 6px}
.mcart .r{font-size:18px;font-weight:700}

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:900px){
  .hero{min-height:auto}
  .hero-inner{
    min-height:auto;
    padding-top:clamp(36px,9vw,70px);
    padding-bottom:clamp(34px,8vw,62px);
  }
  .hero-copy{
    --hero-title-w:clamp(300px,46vw,430px);
    --hero-title-left:0px;
    width:min(100%,860px);margin:0 auto;
    padding-top:0;display:block;text-align:left;
  }
  .hero-art-stage{min-height:clamp(420px,56vw,560px);width:100%}
  .hero-title-art{width:var(--hero-title-w);padding-top:clamp(30px,6vw,60px);margin-left:0}
  .hero-actions{width:var(--hero-title-w);margin-left:0;margin-top:clamp(-155px,-17vw,-95px)}
  .hero-burger-wrap{display:block}
  .hero-burger-art{
    width:clamp(300px,48vw,520px);
    right:0;
    top:48%;
  }
  .hero-visual{max-width:380px;margin:0 auto;width:100%}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero{margin-top:64px}
  .head-nav,.head-meta{display:none}
  .site-head .wrap{height:64px;gap:8px;padding-left:12px;padding-right:12px}
  .catnav-inline{top:64px;padding-top:8px;padding-bottom:8px}
  .brand img{height:34px}
  .brand .city{display:none}
  .head-right{gap:6px;min-width:0;flex:1}
  .addr-sel{min-width:0;flex:1}
  .addr-trigger{width:100%;max-width:100%;align-items:flex-end;padding:5px 8px}
  .addr-city{font-size:12px}
  .addr-street{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:100%;max-width:100%;font-size:10.5px;gap:5px}
  .addr-street svg{margin-left:0!important}
  .auth-btn{height:40px;padding:0 12px;justify-content:center;gap:6px;font-size:13px}
  .auth-btn svg{width:18px;height:18px}
  .head-bonus{height:40px;min-width:44px;padding:0 8px;border-radius:12px}
  .head-bonus span{font-size:20px}
  .head-bonus b{font-size:12px}
  .cart-btn .lbl-cart{display:none}
  .cart-btn{width:40px;height:40px;padding:0;justify-content:center;gap:0}
  .cart-btn svg{width:18px;height:18px}
  .cart-btn.has-count{display:none}
  .burger-toggle{display:none}
  .menu-grid.list .card{flex-direction:column}
  .menu-grid.list .card-img{width:100%;aspect-ratio:4/3}
  .foot-grid{grid-template-columns:1fr}
  html, body, .modal-body, .cart-items, .profile-body, .catnav-inline{scrollbar-width:none}
  ::-webkit-scrollbar{width:0;height:0}
}
@media (max-width:540px){
  .hero-inner{padding:34px 18px 38px}
  .hero-copy{
    --hero-title-w:min(100%,420px);
    width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .hero-art-stage{min-height:auto;width:100%}
  .hero-title-art{width:var(--hero-title-w);max-width:420px;padding-top:0;margin:0 auto}
  .hero-burger-wrap{display:none}
  .hero-actions{width:var(--hero-title-w);margin-left:0;margin-top:24px}
  .hero-cta{width:min(100%,340px);justify-content:center;gap:10px}
  .hero-cta .btn{flex:1 1 0;justify-content:center;min-width:0;padding:13px 10px;font-size:13px}
  .hero-badges{justify-content:center;text-align:left;gap:28px;margin-top:20px}
  .hero-badge b{font-size:23px}
  .hero-badge span{font-size:11px}
  .menu-grid.cards,.menu-grid.compact{grid-template-columns:1fr 1fr}
  .menu-grid.compact{gap:10px}
  .menu-grid.cards{gap:10px}
  .card-body{padding:12px 12px 13px;gap:6px}
  .card-title{gap:6px}
  .card-title h3{font-size:17px}
  .card-weight{font-size:11px}
  .card-desc{-webkit-line-clamp:2}
  .add-btn .lbl{display:none}
  .add-btn{width:42px;height:42px;padding:0;justify-content:center;flex:0 0 42px}
  .add-btn svg{width:17px;height:17px}
  .card-foot{gap:5px}
  .price{font-size:18px;white-space:nowrap;line-height:1}
  .price .cur{font-size:.82em}
  .meat-icons{gap:1px}
  .meat-icon{width:clamp(18px,6vw,25px);height:clamp(18px,6vw,25px)}
  .modal-foot{padding:10px 14px;gap:10px}
  .modal-foot .btn{min-height:48px;padding:10px 12px;font-size:15px;letter-spacing:.03em}
  .qty{padding:3px;flex:0 0 auto}
  .qty button{width:34px;height:34px;font-size:20px}
  .qty .v{min-width:26px;font-size:18px}
  .feat-grid{gap:10px}
  .feat{
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:12px;
    align-items:center;
    padding:14px 16px;
    border-radius:var(--radius-sm);
  }
  .feat .ic{
    grid-row:1 / span 2;
    height:44px;
    margin:0;
    align-items:center;
    justify-content:center;
  }
  .feat .ic .scribble{max-width:38px;max-height:38px}
  .feat h4{font-size:16px;margin:0 0 3px}
  .feat p{font-size:13px;line-height:1.35;margin:0}
}

/* mobile slide-down nav */
.mnav{position:fixed;inset:0;z-index:50;background:var(--bg);display:none;flex-direction:column;
  padding:24px;animation:fade .2s}
.mnav.open{display:flex}
.mnav .x{align-self:flex-end;width:44px;height:44px;font-size:26px;display:grid;place-items:center}
.mnav a{font-family:var(--font-display);text-transform:uppercase;font-size:26px;padding:14px 0;
  border-bottom:1px solid var(--border);letter-spacing:.02em}


/* ============================================================
   AUTH MODAL
   ============================================================ */
.auth-modal{max-width:400px;width:90vw;padding:36px 32px}
.auth-logo{display:flex;justify-content:center;margin-bottom:24px}
.auth-step{display:flex;flex-direction:column;gap:0}
.auth-title{font-family:var(--font-display);font-size:26px;text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:8px;text-align:center}
.auth-sub{color:var(--text-dim);font-size:14px;text-align:center;margin-bottom:20px}
.auth-field{margin-bottom:12px}
.auth-input{
  width:100%;box-sizing:border-box;
  background:var(--bg-2);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm);padding:14px 16px;
  font-size:17px;color:var(--text);font-family:var(--font-body);
  letter-spacing:.06em;outline:none;transition:.15s;
}
.auth-input:focus{border-color:var(--accent)}
.auth-input.err{border-color:#e23b2e}
.auth-input::placeholder{color:var(--text-faint);letter-spacing:0}
.auth-error{color:#e23b2e;font-size:13px;margin-bottom:10px;text-align:center}
.auth-cta{padding:13px 40px;font-size:16px;margin-top:4px;align-self:center}
.auth-legal{font-size:11.5px;color:var(--text-faint);text-align:center;margin-top:14px}
.auth-legal a{color:var(--text-dim)}
.auth-resend{text-align:center;font-size:13px;color:var(--text-dim);margin-top:14px}
.link-btn{background:none;border:none;color:var(--text-dim);font-size:13px;
  cursor:pointer;text-decoration:underline;padding:0;font-family:var(--font-body);
  display:block;margin:0 auto}
.link-btn:hover{color:var(--text)}

/* SMS code input */
.code-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.code-cell{
  width:56px;height:64px;text-align:center;
  background:var(--bg-2);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm);font-size:28px;font-family:var(--font-display);
  color:var(--text);outline:none;transition:.15s;
  font-weight:400;letter-spacing:0;caret-color:var(--accent);
}
.code-cell:focus{border-color:var(--accent);background:var(--bg-3)}
.code-cell.err{border-color:#e23b2e}

/* ============================================================
   PROFILE DRAWER
   ============================================================ */
.profile-drawer{width:420px;max-width:95vw;display:flex;flex-direction:column}
.drawer-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.profile-identity{min-width:0}
.profile-head-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}
.profile-head-bonus{display:flex;align-items:baseline;gap:4px;text-align:right;color:var(--accent);font-family:var(--font-display);line-height:1}
.profile-head-bonus span{font-size:30px}
.profile-head-bonus b{font-size:17px;font-weight:inherit}

.head-bonus{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:3px;
  min-width:58px;
  height:48px;
  padding:0 12px;
  border:1px solid rgba(255,106,0,.45);
  border-radius:14px;
  background:rgba(255,106,0,.08);
  color:var(--accent);
  font-family:var(--font-display);
  line-height:1;
  cursor:pointer;
}
.head-bonus span{font-size:24px}
.head-bonus b{font-size:14px;font-weight:400}
@media (max-width:760px){
  .head-bonus{height:40px;min-width:44px;padding:0 8px;border-radius:12px}
  .head-bonus span{font-size:20px}
  .head-bonus b{font-size:12px}
}
.profile-head-actions .modal-close{position:static;width:40px;height:40px;flex-shrink:0;background:transparent;color:var(--text-dim);backdrop-filter:none}
.profile-head-actions .modal-close:hover{background:var(--bg-2);color:var(--accent)}
.profile-section{padding:20px 24px}
.profile-section-title{
  font-family:var(--font-display);font-size:15px;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:14px;color:var(--text-dim);
}
.profile-divider{height:1px;background:var(--border);margin:0}
.profile-tabs{
  display:flex;border-bottom:1px solid var(--border);flex-shrink:0;
}
.ptab{
  flex:1;padding:14px 8px;font-family:var(--font-display);font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);
  border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;
  transition:.15s;
}
.ptab:hover{color:var(--text)}
.ptab.active{color:var(--accent);border-bottom-color:var(--accent)}
.profile-body{flex:1;overflow-y:auto;padding:20px 24px;scrollbar-width:thin}
.profile-footer{padding:16px 24px;border-top:1px solid var(--border);flex-shrink:0}
.logout-btn{width:100%;justify-content:center}

/* Bonuses tab */
.bonus-card{
  background:var(--bg-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:24px;
}
.bonus-amount{font-family:var(--font-display);font-size:56px;color:var(--accent);line-height:1}
.bonus-amount span{font-size:28px}
.bonus-label{color:var(--text-dim);font-size:13px;margin-top:4px}
.bonus-progress-wrap{margin-top:16px}
.bonus-progress-bar{height:6px;background:var(--bg-3);border-radius:3px;overflow:hidden}
.bonus-progress-fill{height:100%;border-radius:3px;transition:.3s}
.bonus-progress-label{font-size:11.5px;color:var(--text-faint);margin-top:6px}
.bonus-rules{display:flex;flex-direction:column;gap:12px}
.bonus-rules h4{font-family:var(--font-display);font-size:15px;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:4px}
.bonus-rule{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-dim)}
.br-icon{font-size:18px;flex-shrink:0;line-height:1.3}

/* Addresses tab */
.tab-addresses{display:flex;flex-direction:column;gap:8px}
.addr-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.addr-row-text{flex:1;font-size:14px}
.addr-del{background:none;border:none;color:var(--text-faint);cursor:pointer;
  padding:4px;display:flex;align-items:center;border-radius:4px;}
.addr-del:hover{color:#e23b2e;background:rgba(226,59,46,.1)}
.add-addr-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 14px;border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text-dim);
  background:none;cursor:pointer;font-size:14px;font-family:var(--font-body);
  transition:.15s;margin-top:4px;margin-bottom:20px;
}
.add-addr-btn:hover{border-color:var(--accent);color:var(--accent)}
.addr-add-form{padding:14px;background:var(--bg-2);border-radius:var(--radius-sm);border:1px solid var(--border-strong)}
.empty-hint{color:var(--text-faint);font-size:14px;text-align:center;padding:24px 0}

/* Orders tab */
.tab-history{display:flex;flex-direction:column;gap:12px}
.order-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.order-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.order-id{font-family:var(--font-display);font-size:14px;letter-spacing:.04em}
.order-date{color:var(--text-dim);font-size:12px;margin-left:auto}
.order-status{font-size:12px;font-weight:600}
.order-items{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.order-item{display:flex;justify-content:space-between;font-size:13px;color:var(--text-dim)}
.order-foot{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-top:1px solid var(--border);background:var(--bg-3)}
.order-total{font-family:var(--font-display);font-size:16px}
.order-bonus{background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-family:var(--font-display);padding:3px 8px;border-radius:999px}

/* ============================================================
   AUTH BUTTON IN HEADER
   ============================================================ */
.auth-btn{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:none;
  color:var(--text-dim);font-family:var(--font-display);
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;transition:.15s;white-space:nowrap;flex-shrink:0;
}
.auth-btn:hover{color:var(--text);border-color:var(--text-dim)}
.auth-btn.logged{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */
.checkout-page{
  padding:24px 0 60px;
  background:none;overflow:hidden;position:relative;
}
.checkout-wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.co-back{
  display:flex;align-items:center;gap:8px;
  background:none;border:none;color:var(--text-dim);
  font-family:var(--font-body);font-size:14px;cursor:pointer;
  padding:0;margin-bottom:24px;transition:.15s;
}
.co-back:hover{color:var(--text)}
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
@media(max-width:860px){.checkout-grid{grid-template-columns:1fr}}
.co-right{position:sticky;top:90px}
.co-card{
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;margin-bottom:16px;
}
.co-card-title{
  font-family:var(--font-display);font-size:18px;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:16px;
}
.co-mode-btns{display:flex;gap:10px;margin-bottom:0}
.co-mode-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  background:none;color:var(--text-dim);font-size:14px;font-family:var(--font-body);
  cursor:pointer;transition:.15s;
}
.co-mode-btn:hover{border-color:var(--text-dim);color:var(--text)}
.co-mode-btn.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.co-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);display:block;margin-bottom:6px}
.co-pickup-info{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding:12px 14px;background:var(--bg-3);
  border-radius:var(--radius-sm);font-size:14px;color:var(--text-dim);
}
.co-addr-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.co-addr-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;font-size:14px;transition:.15s;
}
.co-addr-opt input{accent-color:var(--accent)}
.co-addr-opt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.co-pay-list{display:flex;flex-direction:column;gap:8px}
.co-pay-opt{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;font-size:14px;transition:.15s;
}
.co-pay-opt input{display:none}
.co-pay-opt.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--text)}
.co-pay-opt:not(.active){color:var(--text-dim)}
.co-comment{
  width:100%;box-sizing:border-box;resize:vertical;
  background:var(--bg-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14px;color:var(--text);font-family:var(--font-body);
  outline:none;min-height:72px;
}
.co-comment:focus{border-color:var(--accent)}
.co-items{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;margin-bottom:4px;scrollbar-width:thin}
.co-item{display:flex;justify-content:space-between;font-size:13.5px}
.co-item-name{color:var(--text-dim)}
.co-item-price{flex-shrink:0}
.co-divider{height:1px;background:var(--border);margin:12px 0}
.co-row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.co-row.discount{color:var(--accent)}
.co-total{font-family:var(--font-display);font-size:20px;margin-top:4px}
.co-free-hint{font-size:12px;color:var(--text-faint);margin-top:4px}
.co-bonus-toggle{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:12px;margin:8px 0;background:var(--bg-3);border-radius:var(--radius-sm);
  cursor:pointer;font-size:13.5px;
}
.co-bonus-toggle input{accent-color:var(--accent)}
.co-bonus-avail{color:var(--text-faint);font-size:12px;margin-left:auto}
.bonus-earn{color:var(--accent)}
.co-place{width:100%;padding:15px;font-size:16px;margin-top:16px}
.co-terms{font-size:11px;color:var(--text-faint);text-align:center;margin-top:10px}
.promo-row{display:flex;gap:8px}
.promo-input{flex:1}
.promo-apply{
  background:var(--bg-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:10px 16px;color:var(--text-dim);font-family:var(--font-display);font-size:14px;
  cursor:pointer;transition:.15s;
}
.promo-apply:hover{color:var(--text);border-color:var(--text-dim)}
.promo-msg{font-size:13px;margin-top:8px}
.promo-msg.ok{color:#3ba55d}
.promo-msg.err{color:#e23b2e}
.co-guest-hint{font-size:13px;color:var(--text-dim);line-height:1.5}
.co-guest-hint b{color:var(--accent)}
.co-summary{position:sticky;top:90px}

/* ── Order success ── */
.order-success{
  max-width:480px;margin:80px auto;text-align:center;
  padding:40px 32px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius);
}
.success-icon{margin-bottom:24px}
.success-title{font-family:var(--font-display);font-size:32px;text-transform:uppercase;margin-bottom:8px}
.success-sub{color:var(--text-dim);font-size:15px;margin-bottom:24px}
.success-details{background:var(--bg-3);border-radius:var(--radius-sm);padding:16px}
.success-row{display:flex;justify-content:space-between;font-size:15px;padding:4px 0}


/* ============================================================
   MODAL BASE (shared by auth, product, etc.)
   ============================================================ */
.modal-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;animation:fade .18s;
}
.modal-box{
  position:relative;
  background:var(--bg-2);border:1px solid var(--border-strong);
  border-radius:var(--radius);box-shadow:0 24px 64px rgba(0,0,0,.6);
  animation:pop .2s cubic-bezier(.2,.9,.3,1.1);
}
.modal-close{
  position:absolute;top:14px;right:14px;
  background:none;border:none;color:var(--text-dim);
  cursor:pointer;padding:6px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:.15s;
}
.modal-close:hover{color:var(--text);background:var(--bg-3)}

/* delivery gate */
.delivery-gate-backdrop{z-index:260}
.delivery-gate{
  width:min(430px,100%);padding:28px;
  display:flex;flex-direction:column;gap:18px;
}
.delivery-gate-logo{width:128px;height:auto;margin:0 auto 2px}
.delivery-gate h2{
  font-family:var(--font-display);font-size:34px;line-height:1;
  text-transform:uppercase;text-align:center;letter-spacing:.02em;
}
.delivery-gate-lead{color:var(--text-dim);font-size:15px;line-height:1.45;text-align:center}
.delivery-gate-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;
}
.delivery-gate-tabs button{
  min-height:42px;border-radius:calc(var(--radius-sm) - 4px);
  font-family:var(--font-display);font-size:16px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-dim);transition:.15s;
}
.delivery-gate-tabs button.active{background:var(--accent);color:var(--accent-ink)}
.delivery-gate-form,.delivery-gate-pickup{display:flex;flex-direction:column;gap:12px}
.delivery-gate-form .btn,.delivery-gate-pickup .btn{justify-content:center;width:100%}
.delivery-gate-msg{
  padding:11px 13px;border-radius:var(--radius-sm);font-size:13px;line-height:1.35;
  background:var(--bg);border:1px solid var(--border);color:var(--text-dim);
}
.delivery-gate-msg.bad{border-color:rgba(226,59,46,.55);color:#ffb0a8;background:rgba(226,59,46,.08)}
.delivery-gate-link{
  align-self:center;color:var(--text-dim);font-size:14px;text-decoration:underline;text-underline-offset:3px;
  padding:4px 8px;
}
.delivery-gate-link:hover{color:var(--accent)}
.delivery-gate-pickup-card{
  background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:16px;text-align:center;display:flex;flex-direction:column;gap:4px;
}
.delivery-gate-pickup-card b{
  font-family:var(--font-display);font-size:22px;line-height:1;text-transform:uppercase;color:var(--accent);
}
.delivery-gate-pickup-card span{color:var(--text-dim);font-size:14px}

/* drawer base */
.drawer-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  display:flex;justify-content:flex-end;animation:fade .18s;
}
.drawer{
  height:100%;overflow-y:auto;
  background:var(--bg-2);border-left:1px solid var(--border-strong);
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
  animation:slideInRight .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes slideInRight{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

/* ── Address autocomplete dropdown ──────────────────────────────────── */
.addr-suggest-drop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  max-height: 220px;
  overflow-y: auto;
}
.addr-suggest-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.addr-suggest-item:last-child { border-bottom: none; }
.addr-suggest-item:hover { background: var(--bg-3); }
.addr-suggest-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; opacity: .6; }