/* ============================================================
   ARBUZ Store v2 — «Свежий рынок» Design System
   Light, image-forward, Onest. Tokens + components.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

:root{
  --bg:#f6f3ec; --paper:#fff; --ink:#23211c; --muted:#9b958a;
  --green:#1f7a48; --green-deep:#176a3c; --green-soft:#e9f3ec;
  --terra:#c2693f; --terra-soft:#f6ece3; --amber:#e0a13a;
  --red:#e2483f; --red-soft:#fbe7e5; --rare:#7a5cc0; --rare-soft:#efe9f8;
  --line:rgba(35,33,28,.07);
  --z-nav:20; --z-bar:25; --z-overlay:50; --z-toast:100; --z-story:200;
  --dur:.2s;
}
@media (prefers-color-scheme: dark){ /* placeholder: v2 ships light; dark in later PR */ }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;}
body{
  max-width:480px;margin:0 auto;background:var(--bg);color:var(--ink);
  font-family:"Onest",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-weight:400;padding-bottom:96px;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.muted{color:var(--muted);}
.hide{display:none !important;}

/* ---------- View transitions ---------- */
#app{position:relative;}
/* opacity-only: transform создал бы containing block и сломал position:fixed nav */
.view{animation:viewIn var(--dur) ease both;}
@keyframes viewIn{from{opacity:0;}to{opacity:1;}}

/* ---------- Header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px;}
.top .htitle{font-size:17px;font-weight:600;}
/* .loc теперь button — сбрасываем стили кнопки */
.loc{display:flex;flex-direction:column;min-width:0;background:transparent;border:0;padding:0;text-align:left;cursor:pointer;}
.loc small{font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.loc b{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:600;margin-top:1px;max-width:220px;}
.loc b .addr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc b svg{width:15px;height:15px;color:var(--green);flex-shrink:0;}
.loc b .chev{width:12px;height:12px;color:var(--muted);}
.iconbtn{width:40px;height:40px;border-radius:13px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;}
.iconbtn svg{width:19px;height:19px;color:var(--ink);}
.iconbtn.dot::after{content:'';position:absolute;top:10px;right:11px;width:6px;height:6px;background:var(--red);border-radius:50%;border:2px solid var(--paper);}
.h1{font-size:23px;font-weight:600;letter-spacing:-.02em;padding:8px 16px 0;}

/* ---------- Search ---------- */
.search{margin:10px 16px 2px;display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
.search svg{width:18px;height:18px;color:var(--muted);flex-shrink:0;}
.search input{border:0;outline:0;background:transparent;font:400 16px "Onest";color:var(--ink);width:100%;}
.search input::placeholder{color:var(--muted);}
.search .clr{width:22px;height:22px;border:0;border-radius:50%;background:var(--bg);color:var(--muted);font-size:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

/* ---------- Section head + chips ---------- */
.sec{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 2px;}
.sec h2{font-size:17px;font-weight:600;display:flex;align-items:center;gap:6px;}
.sec a{font-size:12.5px;font-weight:500;color:var(--green);white-space:nowrap;}
.chips{display:flex;gap:7px;overflow-x:auto;padding:12px 16px 2px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 13px;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.chip.active{background:var(--green);color:#fff;border-color:var(--green);}

/* ---------- Product card (image-forward) ---------- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:12px 16px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 3px 12px rgba(35,33,28,.035);position:relative;}
.card .img{position:relative;width:100%;aspect-ratio:1/1;background:radial-gradient(120% 120% at 50% 32%,#fff,#f3efe6);display:flex;align-items:center;justify-content:center;font-size:78px;overflow:hidden;}
.card .img img{width:100%;height:100%;object-fit:cover;}
.card .badge{position:absolute;top:9px;left:9px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--green-deep);box-shadow:0 1px 5px rgba(0,0,0,.05);}
.card .badge.sale{background:var(--red);color:#fff;}.card .badge.rare{background:var(--rare);color:#fff;}
.card .fav{position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.card .fav svg{width:15px;height:15px;color:var(--muted);}
/* Кнопка добавить — внутри .img (overflow:hidden), bottom:8px чтобы не обрезалась */
.card .add{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border:0;border-radius:12px;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(31,122,72,.36);z-index:2;cursor:pointer;transition:transform .12s,opacity .12s;}
.card .add:active{transform:scale(.88);}
.card .add svg{width:19px;height:19px;color:#fff;}
.card .step{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;background:var(--green);border-radius:12px;height:38px;box-shadow:0 4px 12px rgba(31,122,72,.36);z-index:2;}
.card .step button{width:32px;height:38px;border:0;background:transparent;color:#fff;font-size:17px;font-weight:500;cursor:pointer;}
.card .step b{min-width:18px;text-align:center;color:#fff;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.card .step b.bump{animation:bump .2s cubic-bezier(.34,1.56,.64,1);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.25);}100%{transform:scale(1);}}
.card .info{padding:11px 11px 12px;}
.card .nm{font-size:13px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;}
.card .mt{font-size:11.5px;font-weight:400;color:var(--muted);margin:2px 0 8px;}
.card .pr{display:flex;align-items:baseline;gap:6px;}
.card .pr .now{font-size:15px;font-weight:700;letter-spacing:-.01em;}.card .pr .now.deal{color:var(--red);}
.card .pr .old{font-size:12px;color:var(--muted);text-decoration:line-through;font-weight:400;}

/* ---------- Buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;border:0;border-radius:14px;background:var(--green);color:#fff;font:600 15px "Onest";cursor:pointer;transition:transform .12s,opacity .15s;}
.btn:active{transform:scale(.99);}
.btn[disabled]{opacity:.5;pointer-events:none;}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.iconbtn svg{width:19px;height:19px;flex-shrink:0;}
/* Constrain SVG in profile row containers and any non-btn svg wrapper */
.prow-icon svg{width:20px;height:20px;flex-shrink:0;}
.prof-logout svg{width:18px;height:18px;flex-shrink:0;}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line);}
.btn.soft{background:var(--green-soft);color:var(--green-deep);}
.btn[data-loading="1"]{color:transparent;position:relative;pointer-events:none;}
.btn[data-loading="1"]::after{content:'';position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .65s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Panel ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 16px 10px;}

/* ---------- Confirm bottom sheet ---------- */
.cs-backdrop{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;
  animation:fadeIn .15s ease;
}
.cs-backdrop.cs-out{animation:fadeOut .18s ease forwards;}
@keyframes fadeOut{to{opacity:0;}}
.cs-body{
  background:#fff;border-radius:24px 24px 0 0;
  padding:28px 20px calc(28px + env(safe-area-inset-bottom,0));
  width:100%;box-sizing:border-box;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:8px;
}
.cs-title{font-size:18px;font-weight:700;text-align:center;margin-bottom:2px;}
.cs-text{font-size:14px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:4px;}

/* ---------- Profile row item hover ---------- */
.prow-item{transition:background .12s;}
.prow-item:active{background:var(--bg);}
.kick{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}

/* ---------- Bottom nav ---------- */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:calc(100% - 28px);max-width:448px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 30px rgba(35,33,28,.1);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 6px;z-index:var(--z-nav);}
.nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--muted);position:relative;cursor:pointer;}
.nav button svg{width:22px;height:22px;}
.nav button.active{color:var(--green);}
.nav .ndot{position:absolute;top:-3px;right:50%;margin-right:-19px;min-width:15px;height:15px;background:var(--red);color:#fff;font-size:9.5px;font-weight:600;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* ---------- Sticky bottom bar ---------- */
.sticky-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;padding:14px 16px;background:linear-gradient(180deg,transparent,var(--bg) 24%);z-index:var(--z-bar);}
.sticky-bar .inner{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 10px 28px rgba(35,33,28,.1);}

/* ---------- Product detail ---------- */
.pd-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;max-width:480px;margin:0 auto;}
.pd-cbtn{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pd-cbtn svg{width:20px;height:20px;color:var(--ink);}
.pd-hero{height:330px;background:radial-gradient(120% 100% at 50% 42%,#fff,#f1ece2);display:flex;align-items:center;justify-content:center;font-size:170px;position:relative;overflow:hidden;}
.pd-hero img{width:100%;height:100%;object-fit:cover;}
.pd-hero .badge{position:absolute;top:66px;left:16px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--red);color:#fff;}
.pd-sheet{position:relative;margin-top:-16px;border-radius:18px 18px 0 0;background:var(--bg);padding:18px 16px 0;}
.pd-nm{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.12;}
.pd-meta{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.pd-meta .w{font-size:14px;color:var(--muted);}
.pd-meta .tag{font-size:12px;font-weight:600;color:var(--green-deep);background:var(--green-soft);padding:4px 10px;border-radius:999px;}
.pd-prc{display:flex;align-items:baseline;gap:9px;margin:14px 0 16px;}
.pd-prc .now{font-size:24px;font-weight:700;letter-spacing:-.02em;}.pd-prc .now.deal{color:var(--red);}
.pd-prc .old{font-size:15px;color:var(--muted);text-decoration:line-through;}
.pd-prc .save{font-size:12px;font-weight:600;color:var(--red);background:var(--red-soft);padding:3px 9px;border-radius:999px;}
.pd-desc{font-size:16px;line-height:1.65;color:#3a3630;margin:0 0 20px;font-weight:400;}
.pd-acc{display:flex;align-items:center;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;}
.pd-acc b{font-size:13.5px;font-weight:600;}.pd-acc svg{width:18px;height:18px;color:var(--muted);}
.pd-bar .inner{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;}
.pd-bar .pp{display:flex;flex-direction:column;line-height:1.05;}
.pd-bar .pp small{font-size:11px;color:var(--muted);text-decoration:line-through;}
.pd-bar .pp b{font-size:19px;font-weight:700;}
.pd-bar .btn{flex:1;}
.rrow{display:flex;gap:10px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none;}.rrow::-webkit-scrollbar{display:none;}
.rc{flex:0 0 116px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;cursor:pointer;}
.rc .ri{aspect-ratio:1/1;border-radius:10px;background:radial-gradient(120% 120% at 50% 32%,#fff,#f3efe6);display:flex;align-items:center;justify-content:center;font-size:42px;margin-bottom:6px;overflow:hidden;}
.rc .ri img{width:100%;height:100%;object-fit:cover;}
.rc .rn{font-size:12px;font-weight:500;line-height:1.1;}.rc .rp{font-size:13px;font-weight:700;margin-top:2px;}

/* ---------- Skeleton ---------- */
.sk{position:relative;overflow:hidden;background:#efe9df;border-radius:10px;}
.sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shimmer 1.1s infinite;}
@keyframes shimmer{to{transform:translateX(100%);}}
.sk-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.sk-card .sk-img{width:100%;aspect-ratio:1/1;}
.sk-card .sk-line{height:11px;margin:10px 11px;border-radius:6px;}

/* ---------- Empty / error ---------- */
.empty{padding:60px 28px;text-align:center;}
.empty .em{font-size:54px;}
.empty h3{font-size:18px;font-weight:600;margin:12px 0 6px;}
.empty p{font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.45;}
.empty .btn{max-width:240px;margin:0 auto;}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:8px;width:calc(100% - 32px);max-width:440px;pointer-events:none;}
.toast{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:14px;font-size:14px;font-weight:600;color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.16);pointer-events:auto;cursor:pointer;animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) both;}
.toast.out{animation:toastOut .18s ease forwards;}
.toast svg{width:18px;height:18px;flex-shrink:0;}
.toast.success{background:rgba(31,122,72,.96);}
.toast.error{background:rgba(226,72,63,.96);}
.toast.info{background:rgba(35,33,28,.92);}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.96);}}

/* ==================== PR2 ADDITIONS ==================== */

/* ---------- Greeting ---------- */
.greeting{padding:18px 16px 6px;animation:slideDown .2s ease;}
.g-hi{font-size:14px;color:var(--muted);font-weight:500;letter-spacing:.01em;}
.g-name{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:3px;color:var(--ink);}
/* Без имени — одна крупная строка */
.greeting:not(:has(.g-name)) .g-hi{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}

/* ---------- Active order banner ---------- */
.order-banner{display:flex;align-items:center;gap:12px;margin:10px 16px 2px;background:var(--green-soft);border:1px solid rgba(31,122,72,.14);border-radius:16px;padding:13px 14px;cursor:pointer;transition:opacity .15s;}
.order-banner:active{opacity:.8;}
.ob-icon{width:40px;height:40px;border-radius:12px;background:var(--green);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ob-icon svg{width:20px;height:20px;color:#fff;}
.ob-info{flex:1;min-width:0;}
.ob-title{font-size:13.5px;font-weight:600;color:var(--green-deep);}
.ob-sub{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ob-chev svg{width:16px;height:16px;color:var(--muted);}

/* ---------- Stories strip (circles — Instagram-style) ---------- */
.story-strip{display:flex;gap:14px;overflow-x:auto;padding:14px 16px 10px;scrollbar-width:none;}
.story-strip::-webkit-scrollbar{display:none;}
.story-bubble{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;-webkit-user-select:none;user-select:none;background:transparent;border:0;padding:0;
}
.story-bubble:active .story-ring{transform:scale(.92);}
.story-ring{
  width:64px;height:64px;border-radius:50%;padding:2.5px;
  background:conic-gradient(from 210deg,var(--terra),var(--amber),var(--green),var(--terra));
  transition:transform .15s;
}
.story-ring.seen{background:var(--line);}
.story-ring .si{
  width:100%;height:100%;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--bg);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.story-ring .si img{width:100%;height:100%;object-fit:cover;}
/* fallback gradient circle when no product image */
.story-ring .si.si-theme{background-size:cover;}
.story-ring .si.si-fresh   {background-image:linear-gradient(145deg,#1b5e35,#5ac47c);}
.story-ring .si.si-promo   {background-image:linear-gradient(145deg,#8b1a14,#e0943a);}
.story-ring .si.si-gift    {background-image:linear-gradient(145deg,#4a2070,#c4a0e2);}
.story-ring .si.si-box     {background-image:linear-gradient(145deg,#0e2d50,#4a87b5);}
.story-ring .si.si-veg     {background-image:linear-gradient(145deg,#2a5a10,#8dd440);}
.story-ring .si.si-business{background-image:linear-gradient(145deg,#0e0e20,#4a5580);}
.story-lbl{
  font-size:11px;font-weight:500;color:var(--ink);
  max-width:66px;text-align:center;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---------- Story overlay (fullscreen) — hero + bottom-panel ---------- */
.story-overlay{
  position:fixed;inset:0;z-index:var(--z-story);background:#111;
  touch-action:none;overflow:hidden;will-change:transform,opacity;
  animation:storyFadeIn .2s ease both;
}
.story-overlay.out{animation:storyFadeOut .24s ease both;}
@keyframes storyFadeIn {from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:none;}}
@keyframes storyFadeOut{to  {opacity:0;transform:translateY(56px) scale(.95);}}

/* Header + progress */
.story-hdr{
  position:absolute;top:0;left:0;right:0;z-index:20;
  padding:env(safe-area-inset-top,0) 14px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,transparent 100%);
  pointer-events:none;
}
.story-hdr > *{pointer-events:auto;}
.story-segs{display:flex;gap:4px;padding:10px 0 6px;}
.story-seg{flex:1;height:2.5px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden;position:relative;}
.story-seg .fill{position:absolute;inset:0;width:0;background:#fff;border-radius:999px;}
.story-seg.done .fill{width:100%;}
.story-seg.active .fill{animation:segFill var(--seg-dur,5s) linear forwards;}
@keyframes segFill{from{width:0%}to{width:100%}}

.story-close{
  position:absolute;top:10px;right:14px;width:36px;height:36px;
  border:0;border-radius:50%;background:rgba(0,0,0,.35);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:20;
}
.story-close svg{width:17px;height:17px;}

/* Stage */
.story-stage{position:absolute;inset:0;overflow:hidden;}

/* Card: full-screen, bg + hero + bottom panel */
.story-card{position:absolute;inset:0;display:flex;flex-direction:column;}

/* Card: full-screen layout — gradient bg + scrollable product showcase */
/* Theme gradient backgrounds */
.story-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.story-bg.fresh   {background-color:#3d9960;background-image:linear-gradient(170deg,#1b5e35 0%,#3d9960 55%,#5ac47c 100%);}
.story-bg.promo   {background-color:#c2693f;background-image:linear-gradient(170deg,#8b1a14 0%,#c2693f 55%,#e0943a 100%);}
.story-bg.gift    {background-color:#9b6cc4;background-image:linear-gradient(170deg,#4a2070 0%,#9b6cc4 55%,#c4a0e2 100%);}
.story-bg.box     {background-color:#2d5f8a;background-image:linear-gradient(170deg,#0e2d50 0%,#2d5f8a 55%,#4a87b5 100%);}
.story-bg.veg     {background-color:#5a9e2a;background-image:linear-gradient(170deg,#2a5a10 0%,#5a9e2a 55%,#8dd440 100%);}
.story-bg.business{background-color:#2d3561;background-image:linear-gradient(170deg,#0e0e20 0%,#2d3561 55%,#4a5580 100%);}
.story-bg.default {background-color:#4a4540;background-image:linear-gradient(170deg,#1e1b16 0%,#4a4540 55%,#706b64 100%);}

/* Bottom panel with scrollable product grid */
.story-bottom{
  position:absolute;bottom:0;left:0;right:0;z-index:15;
  display:flex;flex-direction:column;
  padding:0 0 calc(env(safe-area-inset-bottom,0) + 16px);
  background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.7) 50%,transparent 100%);
  pointer-events:none;
  /* Height: fills bottom 70% of screen */
  max-height:72vh;
}
.story-bottom > *{pointer-events:auto;}

/* Story title block */
.story-meta{padding:16px 18px 12px;}

/* Product grid inside story — 2 columns */
.story-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:0 12px 14px;overflow-y:auto;flex:1;
  scrollbar-width:none;
}
.story-grid::-webkit-scrollbar{display:none;}
.sg-card{
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .12s;cursor:pointer;
}
.sg-card:active{transform:scale(.96);}
.sg-img{
  width:100%;aspect-ratio:1/1;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.sg-img img{width:100%;height:100%;object-fit:cover;}
.sg-body{padding:8px 9px 9px;}
.sg-name{font-size:12px;font-weight:600;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:5px;}
.sg-row{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.sg-price{font-size:13px;font-weight:700;color:#fff;}
.sg-add{
  width:28px;height:28px;border:0;border-radius:8px;
  background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:transform .1s,background .1s;
}
.sg-add:active{transform:scale(.86);background:#fff;}
.sg-add svg{width:14px;height:14px;color:var(--ink);}
/* stepper inside story card */
.sg-stepper{
  display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,.9);border-radius:8px;overflow:hidden;
  height:28px;
}
.sg-stepper button{
  width:26px;height:28px;border:0;background:transparent;
  font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sg-stepper span{font-size:12px;font-weight:700;color:var(--ink);min-width:16px;text-align:center;}

.story-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:4px 11px;font-size:10.5px;font-weight:700;
  color:#fff;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:8px;align-self:flex-start;
}
.story-title{font-size:24px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1;margin-bottom:2px;}
.story-sub  {font-size:13px;color:rgba(255,255,255,.7);margin-bottom:0;line-height:1.35;}

.story-cta-btn{
  width:calc(100% - 24px);margin:10px 12px 0;height:46px;border:0;border-radius:14px;
  background:rgba(255,255,255,.92);color:var(--ink);
  font:600 15px "Onest",sans-serif;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:opacity .12s;
}
.story-cta-btn:active{opacity:.85;}
.story-cta-btn svg{width:16px;height:16px;}

/* Tap zones — верхняя треть экрана (над product grid) */
.story-tap{position:absolute;top:0;height:30%;z-index:5;}
.story-tap-l{left:0;width:35%;}
.story-tap-r{right:0;width:65%;}

/* productCard в горизонтальном скролле главной */
.coll-row .card{flex:0 0 148px;min-width:148px;}

/* ---------- Collection row (horizontal scroll) ---------- */
.coll{margin-bottom:0;}
.coll-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 0;}
.coll-hdr h2{font-size:17px;font-weight:600;letter-spacing:-.01em;}
.coll-hdr .kick{font-size:10.5px;}
.coll-hdr a{font-size:12.5px;font-weight:500;color:var(--green);cursor:pointer;}
.coll-row{
  display:flex;gap:10px;overflow-x:auto;
  padding:10px 16px 16px;scrollbar-width:none;
}
.coll-row::-webkit-scrollbar{display:none;}
.coll-card{
  flex:0 0 148px;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;cursor:pointer;
  box-shadow:0 2px 10px rgba(35,33,28,.03);
  transition:transform .12s;
}
.coll-card:active{transform:scale(.97);}
.coll-img{
  position:relative;aspect-ratio:1/1;
  background:radial-gradient(120% 120% at 50% 32%,#fff,#f3efe6);
  display:flex;align-items:center;justify-content:center;font-size:60px;overflow:hidden;
}
.coll-img img{width:100%;height:100%;object-fit:cover;}
.coll-img .cbadge{
  position:absolute;top:7px;left:7px;
  font-size:9.5px;font-weight:600;padding:2.5px 7px;
  border-radius:999px;background:var(--red);color:#fff;
}
.coll-info{padding:9px 10px 11px;}
.coll-nm{font-size:13px;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.coll-pr{display:flex;align-items:baseline;gap:5px;margin-top:4px;}
.coll-pr .now{font-size:14px;font-weight:700;}
.coll-pr .now.deal{color:var(--red);}
.coll-pr .old{font-size:11px;color:var(--muted);text-decoration:line-through;}

/* ---------- Value cards ---------- */
.values{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 16px 4px;}
.val-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;}
.vc-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;margin-bottom:10px;}
.vc-title{font-size:13.5px;font-weight:600;line-height:1.2;margin-bottom:4px;}
.vc-sub{font-size:12px;color:var(--muted);line-height:1.35;}

/* ---------- PWA install banner ---------- */
.pwa-banner{
  margin:12px 16px 16px;background:var(--ink);border-radius:18px;
  padding:18px 16px;color:#fff;
}
.pwa-banner h3{font-size:15px;font-weight:600;margin-bottom:5px;}
.pwa-banner p{font-size:13px;color:rgba(255,255,255,.6);margin:0 0 14px;line-height:1.4;}
.pwa-banner .pwa-btns{display:flex;gap:9px;}
.pwa-banner .btn{background:rgba(255,255,255,.15);color:#fff;height:44px;font-size:14px;flex:1;}
.pwa-banner .pwa-dismiss{background:transparent;border:0;color:rgba(255,255,255,.4);font-size:13px;padding:0 4px;cursor:pointer;white-space:nowrap;}
@media(display-mode:standalone){.pwa-banner{display:none !important;}}

/* ==================== PR3: Cart / Checkout / Order ====================*/

/* --- Cart items --- */
.cart-empty{padding:80px 28px;text-align:center;}
.cart-empty .em{font-size:64px;}
.cart-empty h2{font-size:20px;font-weight:600;margin:14px 0 8px;}
.cart-empty p{font-size:14px;color:var(--muted);margin:0 0 22px;line-height:1.45;}

.cart-list{display:flex;flex-direction:column;gap:0;margin:0 16px;}
.ci{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.ci:last-child{border-bottom:0;}
.ci-img{width:58px;height:58px;border-radius:12px;background:radial-gradient(120% 120% at 50% 32%,#fff,#f3efe6);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;}
.ci-img img{width:100%;height:100%;object-fit:cover;}
.ci-body{flex:1;min-width:0;}
.ci-name{font-size:14px;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ci-unit{font-size:12px;color:var(--muted);margin-top:2px;}
.ci-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.ci-price{font-size:14px;font-weight:700;}
.ci-step{display:flex;align-items:center;gap:0;background:var(--bg);border-radius:10px;height:32px;}
.ci-step button{width:32px;height:32px;border:0;background:transparent;font-size:17px;font-weight:500;color:var(--ink);cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.ci-step button:active{background:var(--line);}
.ci-step b{min-width:22px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}

/* --- Order totals --- */
.order-totals{margin:0 16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;}
.ot-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;}
.ot-row.total{padding-top:10px;margin-top:6px;border-top:1px solid var(--line);}
.ot-label{font-size:14px;color:var(--muted);}
.ot-value{font-size:14px;font-weight:600;}
.ot-row.total .ot-label{font-size:15px;font-weight:600;color:var(--ink);}
.ot-row.total .ot-value{font-size:18px;font-weight:700;}

/* --- Checkout form sections --- */
.co-sec{margin:0 16px 10px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.co-sec-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
.co-sec-hdr h3{font-size:15px;font-weight:600;margin:0;flex:1;}
.co-sec-hdr .co-badge{font-size:11px;font-weight:600;color:var(--green-deep);background:var(--green-soft);padding:3px 9px;border-radius:999px;}
.co-option{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .12s;}
.co-option:not(:last-child){border-bottom:1px solid var(--line);}
.co-option:active{background:var(--bg);}
.co-option input[type="radio"]{accent-color:var(--green);width:18px;height:18px;flex-shrink:0;}
.co-option label{flex:1;font-size:14px;font-weight:500;cursor:pointer;}
.co-option .co-cost{font-size:13px;color:var(--muted);}
.co-option.selected{background:var(--green-soft);}
.co-option.selected label{color:var(--green-deep);font-weight:600;}

.co-addr-text{padding:12px 16px;font-size:14px;line-height:1.4;color:var(--ink);}
.co-addr-change{padding:0 16px 12px;font-size:13px;font-weight:500;color:var(--green);cursor:pointer;}

/* Bonus row */
.co-bonus{display:flex;align-items:center;gap:10px;padding:12px 16px;}
.co-bonus-icon{width:36px;height:36px;border-radius:10px;background:var(--amber);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.co-bonus-info{flex:1;}
.co-bonus-info b{font-size:13.5px;font-weight:600;display:block;}
.co-bonus-info small{font-size:12px;color:var(--muted);}

/* --- Order status screen --- */
.order-status{padding:0 16px 100px;}
.os-hero{text-align:center;padding:32px 16px 20px;}
.os-icon{width:72px;height:72px;border-radius:22px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:34px;}
.os-icon.new      {background:var(--bg);}
.os-icon.assembling{background:var(--amber);background:linear-gradient(135deg,#f9d068,#e0a13a);}
.os-icon.delivery  {background:var(--green-soft);}
.os-icon.done      {background:var(--green-soft);}
.os-headline{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;}
.os-number {font-size:14px;color:var(--muted);}

/* 4-step progress */
.os-steps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin:20px 0 24px;}
.os-step{display:flex;flex-direction:column;align-items:center;flex:1;}
.os-step-dot{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--muted);
  position:relative;z-index:1;transition:all .25s;
}
.os-step.done .os-step-dot{background:var(--green);border-color:var(--green);color:#fff;}
.os-step.active .os-step-dot{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 0 4px var(--green-soft);}
.os-step-label{font-size:10.5px;font-weight:500;color:var(--muted);margin-top:6px;text-align:center;line-height:1.2;}
.os-step.done .os-step-label,.os-step.active .os-step-label{color:var(--green-deep);font-weight:600;}
/* Connector line */
.os-step:not(:last-child)::after{
  content:'';display:block;position:absolute;
  height:2px;background:var(--line);
  width:calc(100% - 28px);
  top:13px;left:calc(50% + 14px);
}
/* Done connector */
.os-step.done:not(:last-child)::after{background:var(--green);}
.os-steps{position:relative;}
.os-step{position:relative;}

/* Payment status card */
.os-pay{margin:0 0 14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px;}
.os-pay-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.os-pay-row:last-child{margin-bottom:0;}
.os-pay-label{font-size:13.5px;color:var(--muted);}
.os-pay-value{font-size:14px;font-weight:600;}
.os-pay-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;}
.os-pay-status.paid{background:var(--green-soft);color:var(--green-deep);}
.os-pay-status.pending{background:var(--terra-soft);color:var(--terra);}
.os-pay-status.failed{background:var(--red-soft);color:var(--red);}

/* ==================== PR4: Auth + Profile ==================== */
.auth-field{display:flex;flex-direction:column;}
.auth-input{
  border:1.5px solid var(--line);border-radius:14px;
  padding:13px 16px;font:500 17px "Onest",sans-serif;color:var(--ink);
  background:var(--paper);outline:none;width:100%;
  transition:border-color .15s;
}
.auth-input:focus{border-color:var(--green);}
.auth-input::placeholder{color:var(--muted);}

/* Auth: divider */
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.auth-divider span{font-size:12px;color:var(--muted);white-space:nowrap;}

/* Auth: 6-digit code card */
.auth-code-card{
  background:var(--green-soft);border-radius:20px;padding:20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:16px;
}
.auth-code-label{font-size:11px;font-weight:700;color:var(--green-deep);text-transform:uppercase;letter-spacing:.1em;}
.auth-code-value{
  font-size:44px;font-weight:800;letter-spacing:.18em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;
}
.auth-copy-btn{
  display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;
  background:#fff;border:1.5px solid var(--line);font:600 14px "Onest",sans-serif;
  color:var(--ink);cursor:pointer;transition:all .15s;
}
.auth-copy-btn:active{transform:scale(.97);}
.auth-copy-btn.is-copied{background:var(--green);border-color:var(--green);color:#fff;}

/* Auth: status bar */
.auth-status-bar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);margin-bottom:4px;
  font-size:13px;color:var(--muted);
}
.auth-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}

/* Global micro-animations */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes scaleIn{from{opacity:0;transform:scale(.93);}to{opacity:1;transform:scale(1);}}

/* View transitions */
[data-view]{animation:fadeIn .18s ease;}

/* Button press feedback */
.btn:not([data-loading]):active{transform:scale(.97);transition:transform .08s;}
.btn.ghost:not([data-loading]):active{transform:scale(.97);}
.iconbtn:active{transform:scale(.88);}
.card:active{transform:scale(.98);transition:transform .1s;}

/* ==================== END PR2 ==================== */

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}