/* ============================================================
   ХИНКАЛИ ХАУС — тёмная тема в стиле iOS (стекло, скругления,
   системный шрифт Apple). Обычный адаптивный сайт:
   десктоп — веб-раскладка, телефон — мобильная версия.
   ============================================================ */

:root{
  /* поверхности */
  --bg:        #0a0a0c;
  --bg-2:      #0f0f12;
  --glass:     rgba(255,255,255,.055);
  --glass-2:   rgba(255,255,255,.085);
  --glass-hd:  rgba(12,12,15,.72);
  --stroke:    rgba(255,255,255,.10);
  --stroke-2:  rgba(255,255,255,.17);

  /* текст */
  --tx:   #f5f5f7;
  --tx-2: rgba(235,235,245,.62);
  --tx-3: rgba(235,235,245,.36);

  /* акценты */
  --accent:   #ff4d2e;
  --accent-2: #ff8a3d;
  --gold:     #ffc24b;
  --green:    #32d74b;
  --red:      #ff453a;

  /* метрики */
  --hd:   68px;                 /* высота шапки */
  --tabh: 0px;                  /* нижнее меню: 0 на десктопе */
  --wrap: 1280px;
  --r:    20px;

  --ease: cubic-bezier(.32,.72,0,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  min-height:100%;
  font-family:var(--font);
  font-size:16px; line-height:1.4; letter-spacing:-.01em;
  color:var(--tx);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom, 0px));
  overflow-x:hidden;
}
body.lock{ overflow:hidden; }
button,input{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
svg{ display:block; }
h1,h2,h3,h4{ text-wrap:balance; font-weight:800; letter-spacing:-.03em; }
input[type=search]::-webkit-search-cancel-button{ display:none; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:8px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; width:100%; }

/* ============================ ШАПКА ============================ */
.hd{
  position:sticky; top:0; z-index:60;
  background:var(--glass-hd);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 .5px 0 rgba(255,255,255,.10);
}
.hd__in{ height:var(--hd); display:flex; align-items:center; gap:14px; }

.logo{ display:flex; align-items:center; gap:9px; flex:none; }
.logo__m{ font-size:26px; line-height:1; display:flex; align-items:center; }
.logo__m--img{ width:34px; height:34px; }
.logo__m--img img{ width:100%; height:100%; object-fit:contain; border-radius:9px; }
.logo__t{ font-size:17px; font-weight:800; letter-spacing:-.035em; white-space:nowrap; }
.logo__t b{ font-weight:800; color:var(--accent); }

.addrbtn{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; flex:none; max-width:220px; padding:3px 0; }
.addrbtn__cap{ font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.07em; }
.addrbtn__val{ display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; max-width:100%; }
.addrbtn__val span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.addrbtn__val svg{ width:10px; flex:none; color:var(--tx-2); }
.addrbtn:hover .addrbtn__val{ color:var(--accent-2); }

.search{
  display:flex; align-items:center; gap:9px;
  height:42px; padding:0 14px; border-radius:13px;
  background:var(--glass); border:1px solid var(--stroke);
  transition:border-color .18s, background .18s;
}
.search:focus-within{ border-color:var(--stroke-2); background:var(--glass-2); }
.search svg{ width:17px; flex:none; fill:none; stroke:var(--tx-3); stroke-width:2; stroke-linecap:round; }
.search input{ flex:1; min-width:0; font-size:15px; outline:none; }
.search input::placeholder{ color:var(--tx-3); }
.hd__search{ flex:1; max-width:360px; margin-left:auto; }

.hd__nav{ display:flex; gap:4px; flex:none; }
.hd__nav button{
  padding:9px 13px; border-radius:11px; font-size:15px; font-weight:600; color:var(--tx-2);
  transition:.18s;
}
.hd__nav button:hover{ color:var(--tx); background:var(--glass); }
.hd__nav button.is-on{ color:var(--tx); background:var(--glass-2); }

.hd__phone{ font-size:15px; font-weight:650; white-space:nowrap; flex:none; }
.hd__phone:hover{ color:var(--accent-2); }

.iconbtn{
  width:40px; height:40px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--stroke); transition:.18s;
}
.iconbtn svg{ width:21px; fill:none; stroke:var(--tx); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.iconbtn:hover{ background:var(--glass-2); }
.iconbtn.is-on{ border-color:var(--accent); color:var(--accent); }
.iconbtn.is-on svg{ stroke:var(--accent); }

.cartbtn{
  display:flex; align-items:center; gap:9px; flex:none;
  height:42px; padding:0 16px; border-radius:13px;
  font-size:15px; font-weight:650; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px -12px rgba(255,77,46,.95);
  transition:transform .16s var(--ease), filter .18s;
}
.cartbtn svg{ width:19px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cartbtn:hover{ filter:brightness(1.07); }
.cartbtn:active{ transform:scale(.97); }

/* ============================ ГЕРОЙ ============================ */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--stroke);
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(255,77,46,.20), transparent 62%),
    radial-gradient(45% 100% at 90% 10%, rgba(255,194,75,.10), transparent 60%),
    var(--bg-2);
}
.hero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:center; padding-top:46px; padding-bottom:46px; }
.hero__t{ font-size:clamp(30px, 3.4vw, 46px); line-height:1.05; }
.hero__s{ font-size:16px; color:var(--tx-2); margin-top:16px; max-width:46ch; line-height:1.5; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.fact{
  font-size:13px; color:var(--tx-2); padding:8px 13px; border-radius:11px;
  background:var(--glass); border:1px solid var(--stroke);
}
.fact b{ color:var(--tx); font-weight:700; }

.promorow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.promocard{
  position:relative; overflow:hidden; text-align:left;
  min-height:132px; padding:15px; border-radius:var(--r);
  display:flex; flex-direction:column; justify-content:space-between; gap:10px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(135deg,var(--c1),var(--c2));
  transition:transform .18s var(--ease);
}
.promocard::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(100% 80% at 100% 0%, rgba(255,255,255,.20), transparent 62%);
}
.promocard:hover{ transform:translateY(-3px); }
.promocard__emo{ position:absolute; right:-8px; bottom:-16px; font-size:78px; opacity:.92; filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.promocard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.promocard.has-img::after{
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.72) 100%);
}
.promocard.has-img .promocard__t{ max-width:100%; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.promocard__t{ position:relative; z-index:1; font-size:17px; font-weight:800; letter-spacing:-.025em; max-width:62%; line-height:1.15; }
.promocard__b{ position:relative; z-index:1; align-self:flex-start; font-size:11px; font-weight:700; padding:5px 9px; border-radius:9px; background:rgba(0,0,0,.42); }

/* ============================ КАТЕГОРИИ ============================ */
.mobsearch{ display:none; }

.catbar{
  position:sticky; top:var(--hd); z-index:50;
  background:var(--glass-hd);
  backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 .5px 0 rgba(255,255,255,.08);
}
.chips{ display:flex; gap:8px; overflow-x:auto; padding:11px 0; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; height:36px; padding:0 15px; border-radius:12px;
  font-size:14.5px; font-weight:600; color:var(--tx-2); white-space:nowrap;
  background:var(--glass); border:1px solid var(--stroke);
  display:flex; align-items:center; gap:7px; transition:.18s;
}
.chip:hover{ color:var(--tx); background:var(--glass-2); }
.chip__img{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none; margin-left:-4px; }
.chip__emo{ font-size:15px; line-height:1; }
.cat__title .chip__img{ width:34px; height:34px; margin:0; }
.cat__title .chip__emo{ font-size:24px; }
.chip.is-on{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; box-shadow:0 8px 20px -8px rgba(255,77,46,.9); }

/* ============================ ТОВАРЫ ============================ */
.cat{ scroll-margin-top:calc(var(--hd) + 66px); padding-top:14px; }
.cat__title{ font-size:26px; margin:22px 0 16px; display:flex; align-items:center; gap:10px; }
.cat__title small{ font-size:13px; font-weight:500; color:var(--tx-3); }
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); gap:16px; }

.card{
  display:flex; flex-direction:column; text-align:left; overflow:hidden;
  border-radius:var(--r); background:var(--glass); border:1px solid var(--stroke);
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--stroke-2); box-shadow:0 18px 40px -22px rgba(0,0,0,.95); }
.ph{
  position:relative; aspect-ratio:4/3;
  display:grid; place-items:center; font-size:62px;
  background:linear-gradient(150deg,var(--c1),var(--c2));
}
.ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 18%, rgba(255,255,255,.15), transparent 70%); }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* заглушка, пока фото не загружено */
.nophoto{ width:34%; max-width:64px; opacity:.22; fill:none; stroke:#fff; stroke-width:1.1;
  stroke-linejoin:round; position:relative; z-index:1; }
.psheet__ph .nophoto{ width:22%; }
.citem__ph .nophoto{ width:46%; }
.card__body{ display:flex; flex-direction:column; gap:4px; flex:1; padding:13px 15px 15px; }
.card__name{ font-size:16px; font-weight:650; letter-spacing:-.02em; line-height:1.22; }
.card__meta{ font-size:12.5px; color:var(--tx-3); }
.card__desc{ font-size:13px; color:var(--tx-2); line-height:1.35; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.price{ font-size:18px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.price small{ font-size:11.5px; font-weight:500; color:var(--tx-3); }
.price s{ color:var(--tx-3); font-size:12.5px; font-weight:500; }
.addbtn{
  height:36px; padding:0 15px; border-radius:12px; flex:none;
  font-size:14.5px; font-weight:650; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 20px -10px rgba(255,77,46,.95);
  transition:transform .15s var(--ease), filter .18s;
}
.addbtn:hover{ filter:brightness(1.08); }
.addbtn:active{ transform:scale(.93); }

.badge{
  position:absolute; left:10px; top:10px; z-index:2;
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 8px; border-radius:9px; color:#fff;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.badge--hit{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.badge--new{ background:linear-gradient(135deg,#0a84ff,#5e5ce6); border-color:transparent; }
.badge--spicy{ background:linear-gradient(135deg,#d70015,#ff453a); border-color:transparent; }
.fav{
  position:absolute; right:10px; top:10px; z-index:2;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:14px;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .15s var(--ease);
}
.fav:hover{ transform:scale(1.1); }

/* ============================ ЗАГОЛОВКИ СТРАНИЦ ============================ */
.view{ display:none; animation:fadeUp .3s var(--ease); }
.view.is-active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } }
.pagetitle{ font-size:clamp(28px, 3vw, 38px); padding:34px 0 22px; }
.backbtn{ display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600; color:var(--accent); padding-top:26px; }
.backbtn svg{ width:11px; }
.backbtn:hover{ opacity:.8; }
.linkbtn{ font-size:14.5px; font-weight:600; color:var(--accent); }
.linkbtn:hover{ opacity:.75; }
.closebtn{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:14px; color:var(--tx-2); background:var(--glass-2); transition:.18s;
}
.closebtn:hover{ color:var(--tx); background:rgba(255,255,255,.14); }

.empty{ padding:70px 20px 90px; text-align:center; }
.empty__ico{ font-size:56px; margin-bottom:16px; }
.empty__t{ font-size:21px; font-weight:750; margin-bottom:7px; }
.empty__s{ font-size:15px; color:var(--tx-2); max-width:38ch; margin:0 auto; }
.empty .btn{ margin:22px auto 0; }

/* ============================ БЛОКИ-СПИСКИ ============================ */
.group{ border-radius:var(--r); overflow:hidden; background:var(--glass); border:1px solid var(--stroke); margin-bottom:16px; }
.group__cap{ font-size:12.5px; font-weight:700; color:var(--tx-3); text-transform:uppercase; letter-spacing:.06em; padding:6px 4px 9px; }
.row{ display:flex; align-items:center; gap:13px; padding:14px 16px; width:100%; text-align:left; border-bottom:.5px solid var(--stroke); transition:background .16s; }
.row:last-child{ border-bottom:0; }
.row:hover{ background:rgba(255,255,255,.045); }
.row__ico{ width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:17px; background:var(--glass-2); }
.row__main{ flex:1; min-width:0; }
.row__t{ display:block; font-size:15.5px; font-weight:600; }
.row__s{ display:block; font-size:13px; color:var(--tx-3); margin-top:2px; }
.row__v{ font-size:15px; color:var(--tx-2); }
.row__chev{ width:8px; flex:none; color:var(--tx-3); }
.row__chev svg{ width:8px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.sw{ width:50px; height:30px; flex:none; border-radius:16px; background:rgba(120,120,128,.32); position:relative; transition:background .22s; }
.sw::after{ content:""; position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.35); transition:transform .24s var(--ease); }
.sw.is-on{ background:var(--green); }
.sw.is-on::after{ transform:translateX(20px); }

.mark{ width:23px; height:23px; flex:none; border-radius:50%; border:1.6px solid var(--stroke-2); display:grid; place-items:center; transition:.18s; }
.mark--sq{ border-radius:8px; }
.mark.is-on{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.mark.is-on::after{ content:"✓"; font-size:12px; font-weight:800; color:#fff; }

.seg{ display:flex; padding:3px; border-radius:13px; background:rgba(118,118,128,.22); margin-bottom:16px; }
.seg button{ flex:1; height:36px; border-radius:10px; font-size:14px; font-weight:650; color:var(--tx-2); transition:.2s; }
.seg button:hover{ color:var(--tx); }
.seg button.is-on{ background:rgba(99,99,105,.9); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4); }

/* ============================ КНОПКИ ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 20px; border-radius:14px;
  font-size:15.5px; font-weight:650; letter-spacing:-.01em;
  transition:transform .15s var(--ease), filter .18s, background .18s;
}
.btn:active{ transform:scale(.98); }
.btn--lg{ height:52px; border-radius:16px; width:100%; font-size:16px; }
.btn--primary{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 14px 30px -14px rgba(255,77,46,1); }
.btn--primary:hover{ filter:brightness(1.07); }
.btn--ghost{ background:var(--glass); border:1px solid var(--stroke); }
.btn--ghost:hover{ background:var(--glass-2); }
.btn__sum{ margin-left:auto; padding-left:14px; font-variant-numeric:tabular-nums; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ============================ КОРЗИНА (ПАНЕЛЬ) ============================ */
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(430px, 100%);
  display:flex; flex-direction:column;
  background:rgba(18,18,21,.92);
  backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  border-left:1px solid var(--stroke);
  box-shadow:-30px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%); visibility:hidden;
  transition:transform .4s var(--ease), visibility .4s;
}
.cart.is-on{ transform:none; visibility:visible; }
.cart__hd{ display:flex; align-items:center; gap:12px; padding:18px 20px 14px; border-bottom:.5px solid var(--stroke); }
.cart__hd h2{ font-size:22px; flex:1; }
.cart__body{ flex:1; overflow-y:auto; padding:16px 20px; }
.cart__ft{ padding:14px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-top:.5px solid var(--stroke); background:rgba(0,0,0,.25); }

.citem{ display:flex; gap:13px; padding:13px 0; border-bottom:.5px solid var(--stroke); }
.citem:first-child{ padding-top:0; }
.citem:last-child{ border-bottom:0; }
.citem__ph{ width:66px; height:66px; flex:none; border-radius:16px; display:grid; place-items:center; font-size:31px; position:relative; overflow:hidden; background:linear-gradient(150deg,var(--c1),var(--c2)); }
.citem__ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.citem__main{ flex:1; min-width:0; }
.citem__n{ font-size:15px; font-weight:650; letter-spacing:-.015em; }
.citem__o{ font-size:12.5px; color:var(--tx-3); margin-top:3px; line-height:1.35; }
.citem__f{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; }
.stepper{ display:flex; align-items:center; gap:2px; border-radius:12px; background:var(--glass-2); padding:3px; }
.stepper button{ width:30px; height:28px; border-radius:9px; font-size:16px; line-height:1; display:grid; place-items:center; transition:background .16s; }
.stepper button:hover{ background:rgba(255,255,255,.14); }
.stepper span{ min-width:26px; text-align:center; font-size:14.5px; font-weight:650; font-variant-numeric:tabular-nums; }

.sum{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14.5px; font-variant-numeric:tabular-nums; }
.sum span:first-child{ color:var(--tx-2); }
.sum--disc span:last-child{ color:var(--green); }
.sum--total{ font-size:19px; font-weight:800; padding-top:11px; margin-top:6px; border-top:.5px solid var(--stroke); }
.sum--total span:first-child{ color:var(--tx); }

.promoinput{ display:flex; gap:9px; margin:16px 0; }
.promoinput input{
  flex:1; min-width:0; height:44px; padding:0 14px; border-radius:13px; font-size:15px; outline:none;
  background:var(--glass); border:1px solid var(--stroke); text-transform:uppercase;
}
.promoinput input::placeholder{ text-transform:none; color:var(--tx-3); }
.promotag{ display:flex; align-items:center; gap:9px; margin:16px 0; padding:12px 14px; border-radius:13px; font-size:14px; background:rgba(50,215,75,.10); border:1px solid rgba(50,215,75,.28); }
.promotag b{ color:var(--green); }
.promotag button{ margin-left:auto; font-size:13px; color:var(--tx-2); }
.promotag button:hover{ color:var(--tx); }

/* поля контактов в оформлении */
.copad{ padding:4px 14px; }
.coinp{
  width:100%; height:50px; font-size:16px; outline:none; border:0;
  background:none; color:var(--tx); font-family:inherit;
  border-bottom:.5px solid var(--stroke);
}
.copad .coinp:last-child{ border-bottom:0; }
.coinp::placeholder{ color:var(--tx-3); }
.coinp--area{ height:auto; padding:14px 0; line-height:1.45; resize:vertical; }

/* ============================ ОФОРМЛЕНИЕ ============================ */
.checkout{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:28px; align-items:start; padding-bottom:70px; }
.checkout__side{ position:sticky; top:calc(var(--hd) + 22px); }
.paycard{ border-radius:var(--r); background:var(--glass); border:1px solid var(--stroke); padding:20px; }
.paycard h3{ font-size:19px; margin-bottom:14px; }
.paycard .btn{ margin-top:16px; }

/* ============================ ЗАКАЗЫ ============================ */
.track{ border-radius:var(--r); overflow:hidden; background:var(--glass); border:1px solid var(--stroke); margin-bottom:20px; }
.track__h{ padding:20px 22px; background:linear-gradient(135deg, rgba(255,77,46,.22), rgba(255,138,61,.07)); }
.track__eta{ font-size:13.5px; color:var(--tx-2); }
.track__time{ font-size:34px; font-weight:850; letter-spacing:-.03em; margin-top:2px; font-variant-numeric:tabular-nums; }
.track__num{ font-size:13px; color:var(--tx-3); margin-top:5px; }
.steps{ padding:10px 22px 20px; }
.step{ display:flex; gap:14px; }
.step__line{ display:flex; flex-direction:column; align-items:center; }
.step__dot{ width:23px; height:23px; border-radius:50%; border:2px solid var(--stroke-2); margin-top:11px; display:grid; place-items:center; font-size:11px; flex:none; transition:.3s; }
.step__bar{ flex:1; width:2px; background:var(--stroke); min-height:18px; }
.step.is-done .step__dot{ background:var(--green); border-color:var(--green); }
.step.is-done .step__dot::after{ content:"✓"; color:#000; font-weight:900; }
.step.is-done .step__bar{ background:var(--green); }
.step.is-now .step__dot{ border-color:var(--accent); animation:pulse 1.9s infinite; }
.step__c{ padding:9px 0 7px; }
.step__t{ font-size:15.5px; font-weight:650; }
.step.is-pend .step__t{ color:var(--tx-3); font-weight:500; }
.step__s{ font-size:13px; color:var(--tx-3); margin-top:2px; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(255,77,46,.20); } 50%{ box-shadow:0 0 0 10px rgba(255,77,46,.03); } }

.ordercard{ padding:18px 20px; border-radius:var(--r); background:var(--glass); border:1px solid var(--stroke); margin-bottom:12px; }
.ordercard__h{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ordercard__n{ font-size:16px; font-weight:700; }
.ordercard__st{ font-size:11.5px; font-weight:700; padding:5px 9px; border-radius:9px; background:rgba(50,215,75,.16); color:var(--green); }
.ordercard__l{ font-size:13.5px; color:var(--tx-3); margin-top:9px; line-height:1.45; }
.ordercard__f{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }

/* ============================ ПРОФИЛЬ ============================ */
.profile{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; padding-bottom:70px; }
.pcard{
  position:relative; overflow:hidden; padding:24px; border-radius:24px;
  background:linear-gradient(140deg, rgba(255,77,46,.28), rgba(255,138,61,.09) 55%, rgba(255,255,255,.05));
  border:1px solid var(--stroke-2); margin-bottom:16px;
}
.pcard::after{ content:"🥟"; position:absolute; right:-18px; bottom:-26px; font-size:124px; opacity:.13; }
.pcard__top{ display:flex; align-items:center; gap:14px; }
.avatar{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:23px; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.pcard__n{ font-size:21px; font-weight:750; letter-spacing:-.02em; }
.pcard__p{ font-size:13.5px; color:var(--tx-2); }
.pcard__bonus{ position:relative; z-index:1; margin-top:22px; }
.pcard__val{ display:flex; align-items:baseline; gap:8px; font-size:34px; font-weight:850; letter-spacing:-.03em; }
.pcard__val small{ font-size:14px; font-weight:600; color:var(--tx-2); }
.bar{ height:7px; border-radius:4px; background:rgba(0,0,0,.35); margin-top:12px; overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--gold),#ffe6a8); }
.pcard__hint{ font-size:12.5px; color:var(--tx-2); margin-top:9px; }

/* ============================ АКЦИИ ============================ */
.promogrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px; padding-bottom:20px; }
.pbig{ border-radius:var(--r); overflow:hidden; border:1px solid var(--stroke); background:var(--glass); display:flex; flex-direction:column; }
.pbig__top{ position:relative; height:160px; display:grid; place-items:center; font-size:78px; background:linear-gradient(140deg,var(--c1),var(--c2)); overflow:hidden; }
.pbig__top img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pbig__top::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 70% at 50% 12%, rgba(255,255,255,.18), transparent 70%); }
.pbig__b{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.pbig__t{ font-size:19px; font-weight:750; letter-spacing:-.025em; }
.pbig__s{ font-size:14px; color:var(--tx-2); margin-top:7px; line-height:1.45; flex:1; }
.pbig__f{ display:flex; align-items:center; gap:10px; margin-top:18px; }
.code{
  flex:1; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:750; letter-spacing:.09em;
  border:1.5px dashed var(--stroke-2); background:rgba(255,255,255,.04); transition:.18s;
}
.code:hover{ background:rgba(255,255,255,.09); }
.code span{ opacity:.5; font-size:12px; letter-spacing:0; font-weight:500; }

/* ============================ ДОКУМЕНТЫ ============================ */
.doc{ padding-bottom:70px; }
.doc__body{ max-width:70ch; }
.doc__body p{ font-size:15.5px; line-height:1.65; color:var(--tx-2); margin-bottom:16px; }
.doc__body p:first-child{ color:var(--tx); font-size:16.5px; }
.lnk{ color:var(--accent); cursor:pointer; font-weight:600; }
.lnk:hover{ opacity:.8; }

/* ============================ УСПЕХ ============================ */
.success{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 0 80px; }
.success__ring{
  width:128px; height:128px; border-radius:50%; display:grid; place-items:center; margin-bottom:28px;
  background:radial-gradient(circle at 50% 35%, rgba(255,77,46,.34), rgba(255,77,46,.04) 70%);
  border:1px solid rgba(255,77,46,.35); animation:pop .6s var(--ease) both;
}
.success__ico{ font-size:62px; animation:pop .7s .1s var(--ease) both; }
@keyframes pop{ from{ opacity:0; transform:scale(.55); } }
.success__t{ font-size:clamp(28px, 3vw, 38px); }
.success__s{ font-size:16px; color:var(--tx-2); margin-top:12px; max-width:44ch; }
.success__num{ margin-top:22px; font-size:13.5px; font-weight:650; color:var(--tx-2); padding:9px 16px; border-radius:12px; background:var(--glass); border:1px solid var(--stroke); }
.success__btns{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; justify-content:center; }
.success__btns .btn{ width:auto; min-width:220px; }

/* ============================ ШТОРКА / МОДАЛКА ============================ */
.scrim{
  position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:.3s;
}
.scrim.is-on{ opacity:1; visibility:visible; }

.sheet{
  position:fixed; z-index:95; display:flex; flex-direction:column;
  left:50%; top:50%; width:min(860px, calc(100vw - 48px)); max-height:min(88vh, 860px);
  border-radius:26px;
  background:rgba(20,20,24,.92);
  backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--stroke-2);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transform:translate(-50%,-48%) scale(.97);
  transition:opacity .26s ease, transform .3s var(--ease), visibility .3s;
}
.sheet.is-on{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.sheet__grab{ display:none; }
.sheet__x{ position:absolute; right:14px; top:14px; z-index:3; background:rgba(0,0,0,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sheet__inner{ overflow-y:auto; padding:26px; }

.psheet{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:26px; align-items:start; }
.psheet__ph{ position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:22px; display:grid; place-items:center; font-size:104px; background:linear-gradient(150deg,var(--c1),var(--c2)); }
.psheet__ph::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 15%, rgba(255,255,255,.16), transparent 70%); }
.psheet__ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.psheet__n{ font-size:27px; }
.psheet__d{ font-size:15px; color:var(--tx-2); margin-top:9px; line-height:1.5; }
.psheet__nutr{ display:flex; gap:9px; margin-top:18px; }
.nutr{ flex:1; padding:10px 6px; border-radius:13px; text-align:center; background:var(--glass); border:1px solid var(--stroke); }
.nutr b{ display:block; font-size:15px; font-weight:750; }
.nutr span{ font-size:10.5px; color:var(--tx-3); text-transform:uppercase; letter-spacing:.05em; }
.opt{ margin-top:22px; }
.opt__t{ display:flex; justify-content:space-between; align-items:baseline; font-size:16.5px; font-weight:700; margin-bottom:11px; }
.opt__t small{ font-size:12.5px; font-weight:500; color:var(--tx-3); }
.optlist{ border-radius:16px; overflow:hidden; background:var(--glass); border:1px solid var(--stroke); }
.optrow{ display:flex; align-items:center; gap:11px; padding:13px 15px; width:100%; text-align:left; border-bottom:.5px solid var(--stroke); transition:background .16s; }
.optrow:last-child{ border-bottom:0; }
.optrow:hover{ background:rgba(255,255,255,.045); }
.optrow__n{ flex:1; font-size:15px; }
.optrow__p{ font-size:14.5px; color:var(--tx-2); font-variant-numeric:tabular-nums; }
.optrow.is-on .mark{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.optrow.is-on .mark::after{ content:"✓"; font-size:12px; font-weight:800; color:#fff; }
.sheetdock{ display:flex; gap:12px; align-items:center; margin-top:24px; }
.sheetdock .stepper{ height:52px; border-radius:16px; padding:4px; }
.sheetdock .stepper button{ width:38px; height:100%; font-size:19px; }
.sheetdock .btn{ flex:1; }
.hint{ font-size:13px; color:var(--tx-3); line-height:1.5; margin-top:14px; }
.hint b{ font-weight:700; }

/* ============================ НИЖНЕЕ МЕНЮ ============================ */
.tabbar{ display:none; }

/* ============================ ТОСТЫ ============================ */
.toasts{
  position:fixed; z-index:120; left:0; right:0; bottom:calc(var(--tabh) + 20px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:0 16px; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:10px; max-width:100%;
  padding:12px 18px; border-radius:16px; font-size:14.5px; font-weight:600;
  background:rgba(38,38,44,.9); border:1px solid var(--stroke-2);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  animation:toastIn .34s var(--ease) both;
}
.toast.is-out{ animation:toastOut .26s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.95); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px) scale(.96); } }

/* ============================ УСТАНОВКА ПРИЛОЖЕНИЯ ============================ */
.installbar{
  position:fixed; z-index:110; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom, 0px));
  width:min(560px, calc(100vw - 28px));
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:18px; background:rgba(28,28,34,.94); border:1px solid var(--stroke-2);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 18px 46px rgba(0,0,0,.6);
  animation:toastIn .4s var(--ease) both;
}
.installbar__ico{ width:42px; height:42px; flex:none; border-radius:12px; overflow:hidden; }
.installbar__ico img{ width:100%; height:100%; object-fit:cover; }
.installbar__t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.installbar__t b{ font-size:14.5px; font-weight:700; }
.installbar__t i{ font-style:normal; font-size:12px; color:var(--tx-3); line-height:1.35; }
.installbar .btn{ height:38px; padding:0 15px; font-size:14px; flex:none; }

/* ============================ ПОДВАЛ ============================ */
.ft{ border-top:1px solid var(--stroke); background:var(--bg-2); margin-top:60px; }
.ft__in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-top:48px; padding-bottom:36px; }
.ft__brand p{ font-size:13.5px; color:var(--tx-3); line-height:1.6; margin-top:14px; max-width:34ch; }
.ft__col h4{ font-size:14px; font-weight:700; margin-bottom:14px; }
.ft__col ul{ display:flex; flex-direction:column; gap:9px; }
.ft__col li, .ft__col a{ font-size:13.5px; color:var(--tx-3); line-height:1.45; }
.ft__col a:hover, .ft__col li[data-action]:hover{ color:var(--accent-2); cursor:pointer; }
.ft__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; padding-bottom:34px; border-top:.5px solid var(--stroke); font-size:12.5px; color:var(--tx-3); }

/* ============================================================
   ПЛАНШЕТ
   ============================================================ */
@media (max-width:1100px){
  .hd__phone{ display:none; }
  .checkout{ grid-template-columns:minmax(0,1fr); }
  .checkout__side{ position:static; }
  .profile{ grid-template-columns:minmax(0,1fr); }
  .hero__in{ grid-template-columns:minmax(0,1fr); gap:28px; padding-top:36px; padding-bottom:36px; }
  .ft__in{ grid-template-columns:1fr 1fr; gap:30px; }
}

/* ============================================================
   ТЕЛЕФОН — мобильная версия
   ============================================================ */
@media (max-width:820px){
  :root{ --hd:56px; --tabh:62px; --r:18px; }
  .wrap{ padding:0 14px; }

  /* шапка: логотип, адрес, профиль */
  .hd__in{ gap:10px; }
  .hd__search, .hd__nav, .cartbtn{ display:none; }
  .logo__t{ display:none; }
  .logo__m{ font-size:27px; }
  .addrbtn{ flex:1; max-width:none; margin-right:auto; }
  .iconbtn{ width:38px; height:38px; border-radius:12px; }

  .mobsearch{ display:block; padding-top:14px; }
  .catbar{ top:var(--hd); }
  .chips{ padding:10px 0; margin:0 -14px; padding-left:14px; padding-right:14px; }

  .hero{ background:var(--bg); border-bottom:0; }
  .hero__in{ padding-top:18px; padding-bottom:4px; gap:18px; }
  .hero__txt{ display:none; }
  .promorow{
    display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -14px; padding:2px 14px; scrollbar-width:none;
  }
  .promorow::-webkit-scrollbar{ display:none; }
  .promocard{ flex:none; width:255px; scroll-snap-align:start; }

  .cat{ scroll-margin-top:calc(var(--hd) + 58px); padding-top:6px; }
  .cat__title{ font-size:21px; margin:18px 0 12px; }
  .cards{ grid-template-columns:1fr 1fr; gap:11px; }
  .card__desc{ display:none; }
  .card__body{ padding:11px 12px 12px; }
  .card__name{ font-size:14.5px; }
  .card__meta{ font-size:11.5px; }
  .price{ font-size:16px; }
  .addbtn{ width:36px; padding:0; font-size:20px; font-weight:400; }
  .ph{ font-size:54px; }

  .pagetitle{ font-size:27px; padding:22px 0 16px; }
  .promogrid{ grid-template-columns:1fr; gap:14px; }
  .pbig__top{ height:132px; font-size:64px; }

  /* корзина и модалка — во весь экран снизу */
  .cart{ width:100%; border-left:0; }
  .cart__hd{ padding:16px 16px 12px; }
  .cart__body{ padding:14px 16px; }
  .cart__ft{ padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }

  .sheet{
    left:0; top:auto; bottom:0; width:100%; max-height:92dvh;
    border-radius:24px 24px 0 0; border-bottom:0;
    transform:translateY(101%); opacity:1;
    transition:transform .42s var(--ease), visibility .42s;
  }
  .sheet.is-on{ transform:none; }
  .sheet__grab{ display:grid; place-items:center; height:24px; flex:none; }
  .sheet__grab::after{ content:""; width:38px; height:5px; border-radius:3px; background:rgba(255,255,255,.28); }
  .sheet__x{ display:none; }
  .sheet__inner{ padding:4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .psheet{ grid-template-columns:minmax(0,1fr); gap:0; }
  .psheet__ph{ aspect-ratio:16/10; font-size:84px; margin-bottom:18px; }
  .psheet__n{ font-size:23px; }
  .psheet__d{ font-size:14px; }

  /* нижнее меню */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    height:calc(var(--tabh) + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--glass-hd);
    backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%);
    box-shadow:0 -.5px 0 rgba(255,255,255,.12);
  }
  .tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; font-weight:600; color:var(--tx-3); transition:color .2s; }
  .tab svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .tab.is-active{ color:var(--accent); }
  .tab__ico{ position:relative; display:block; }
  .tab__badge{
    position:absolute; top:-5px; right:-10px; min-width:17px; height:17px; padding:0 5px;
    border-radius:9px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:800;
    display:grid; place-items:center; box-shadow:0 0 0 2px #0c0c0f;
  }

  /* На телефоне подвал не нужен: сайт должен читаться как приложение.
     Всё, что в нём было, доступно из профиля — контакты, документы, поддержка. */
  .ft{ display:none; }
  .installbar{ bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom, 0px)); }
  .success__btns .btn{ width:100%; }
  .track__h{ padding:16px; }
  .steps{ padding:8px 16px 16px; }
  .ordercard{ padding:15px 16px; }
  .pcard{ padding:20px; }
}

@media (max-width:380px){
  .cards{ gap:9px; }
  .card__name{ font-size:13.5px; }
  .fact{ font-size:12px; }
}

/* ============================================================
   ДОСТУПНОСТЬ
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}