/* A-Store — страница заказа (order.html). Переменные и кнопки — из style.css */

.shop { padding: calc(var(--header-h) + 28px) 0 90px; min-height: 80vh; }
body.shop-lock { overflow: hidden; }
:where(.shop, .cart, .shop-modal) button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* ---------- верхняя панель: адрес / поиск / корзина ---------- */
.shop-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 30px; }
.shop-bar__addr {
  display: inline-flex; align-items: center; gap: 10px; max-width: 360px; flex-shrink: 0;
  padding: 12px 16px; border-radius: 100px; background: #fff; border: 1.5px solid var(--border);
  font-size: 13px; color: var(--ink); box-shadow: 0 8px 20px rgba(10,60,35,.05);
  transition: border-color .25s, transform .2s;
}
.shop-bar__addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-bar__addr i { color: var(--green); font-size: 16px; display: flex; flex-shrink: 0; }
.shop-bar__addr.is-empty { border-color: var(--green); background: rgba(46,159,107,.08); }
.shop-bar__addr:active { transform: scale(.98); }
.shop-bar__search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border-radius: 100px; background: #fff; border: 1.5px solid var(--border);
  box-shadow: 0 8px 20px rgba(10,60,35,.05); transition: border-color .25s;
}
.shop-bar__search:focus-within { border-color: var(--green); }
.shop-bar__search i { color: var(--ink-soft); display: flex; font-size: 15px; }
.shop-bar__search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 14px 0; font: inherit; font-size: 14px; color: var(--ink); }
.shop-bar__search input::-webkit-search-cancel-button { display: none; }
.shop-bar__cart {
  position: relative; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, var(--green) 0%, #22815a 100%); box-shadow: 0 8px 16px rgba(46,159,107,.22);
  transition: transform .2s;
}
.shop-bar__cart i { display: flex; }
.shop-bar__cart:active { transform: scale(.94); }
.shop-bar__badge[hidden] { display: none; }
.shop-bar__badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #E53935; color: #fff; font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cream);
}

/* ---------- заголовки ---------- */
.shop-head { text-align: center; margin-bottom: 34px; }
.shop-head--left { text-align: left; margin-bottom: 22px; }
.shop-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 500; margin: 0 0 8px; text-wrap: balance; }
.shop-head p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.shop-sub { font-size: 1.3rem; font-weight: 500; margin: 44px 0 18px; }
.shop-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--green-dark); font-size: 13px; }
.shop-back i { display: flex; font-size: 20px; }

/* ---------- нужен адрес ---------- */
.shop-hero { max-width: 520px; margin: 40px auto; text-align: center; }
.shop-hero__pin { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; background: rgba(46,159,107,.12); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.shop-hero__pin i { display: flex; }
.shop-hero h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500; margin: 0 0 12px; text-wrap: balance; }
.shop-hero p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0 0 26px; }

/* ---------- категории ---------- */
.cgrid { --n: 5; --g: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--g); }
.ccard {
  flex: 0 0 calc((100% - var(--g) * (var(--n) - 1)) / var(--n));
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; text-align: center;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 400;
  box-shadow: 0 8px 20px rgba(10,60,35,.05); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ccard__ico { width: 58px; height: 58px; border-radius: 18px; background: rgba(46,159,107,.12); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 25px; }
.ccard__ico i { display: flex; }
.ccard:active { transform: scale(.97); }
@media (hover: hover) { .ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(46,159,107,.45); } }

/* ---------- товары ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pgrid--row { display: flex; gap: 14px; }
.pgrid--row .pcard { flex: 0 0 210px; }
.hscroll { overflow-x: auto; margin: 0 -24px; padding: 4px 24px 14px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: 0 8px 20px rgba(10,60,35,.04); }
.pcard__media {
  position: relative; aspect-ratio: 1 / .82; border-radius: 14px; background: linear-gradient(135deg, rgba(46,159,107,.10), rgba(46,159,107,.04));
  display: flex; align-items: center; justify-content: center; color: rgba(46,159,107,.55); font-size: 42px; overflow: hidden; width: 100%;
}
.pcard__media i { display: flex; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.pcard__badge { position: absolute; top: 8px; left: 8px; padding: 4px 9px; border-radius: 100px; background: #E53935; color: #fff; font-size: 11px; font-weight: 500; }
.pcard__name { text-align: left; margin: 12px 2px 10px; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--ink); min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.pcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 0 2px; }
.pcard__price b { font-size: 16px; font-weight: 500; }
.pcard__price b.is-promo { color: #d32f2f; }
.pcard__price small { font-size: 11px; font-weight: 300; color: var(--ink-soft); }
.pcard__price s { font-size: 12px; color: var(--ink-soft); }
.pcard__add {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: 100px;
  background: rgba(46,159,107,.12); color: var(--green-dark); font-size: 13px; font-weight: 400; transition: background .2s, color .2s, transform .2s;
}
.pcard__add i { display: flex; }
.pcard__add:active { transform: scale(.97); }
@media (hover: hover) { .pcard__add:hover { background: var(--green); color: #fff; } }
.stepper { display: flex; align-items: center; justify-content: space-between; border-radius: 100px; background: var(--green); color: #fff; padding: 4px; }
.stepper b { font-size: 13px; font-weight: 500; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.stepper button i { display: flex; }
.stepper button:active { background: rgba(255,255,255,.35); }
.shop-more { text-align: center; margin-top: 28px; }
.shop-more .btn:disabled { opacity: .6; }

/* скелетон и пустые состояния */
.sk { border-radius: 8px; background: linear-gradient(90deg, #ece9dd 25%, #f4f2e8 50%, #ece9dd 75%); background-size: 200% 100%; animation: shopSk 1.2s linear infinite; }
.sk--l { height: 14px; margin: 12px 2px 6px; }
.sk--s { height: 14px; width: 55%; margin: 6px 2px 4px; }
.pcard--sk .pcard__media { animation: shopSk 1.2s linear infinite; background: linear-gradient(90deg, #ece9dd 25%, #f4f2e8 50%, #ece9dd 75%); background-size: 200% 100%; }
@keyframes shopSk { to { background-position: -200% 0; } }
.shop-empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.shop-empty > i { display: flex; justify-content: center; font-size: 42px; color: rgba(46,159,107,.5); margin-bottom: 14px; }
.shop-empty h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.shop-empty p { margin: 0; font-size: 13px; }

/* ---------- корзина ---------- */
.cart-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(10,37,27,.5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 901; width: min(420px, 100%); background: var(--cream);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.22,.8,.3,1); box-shadow: -20px 0 50px rgba(10,60,35,.18);
}
.cart.is-open { transform: none; }
.cart.is-open ~ .cart-overlay, .cart-overlay:has(+ .cart.is-open) { opacity: 1; visibility: visible; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 14px; }
.cart__head h2 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.cart__x, .shop-modal__x { width: 38px; height: 38px; border-radius: 50%; background: rgba(46,159,107,.12); color: var(--green-dark); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.cart__x i, .shop-modal__x i { display: flex; }
.cart__body { flex: 1; overflow-y: auto; padding: 4px 22px; overscroll-behavior: contain; }
.cline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cline__ico { width: 48px; height: 48px; border-radius: 12px; background: rgba(46,159,107,.10); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.cline__ico i { display: flex; }
.cline__ico--img { width: 64px; height: 64px; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.cline__ico--img img { width: 100%; height: 100%; object-fit: contain; padding: 2px; display: block; }
.cline__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cline__info b { font-size: 13px; font-weight: 400; line-height: 1.35; }
.cline__info span { font-size: 13px; font-weight: 500; }
.cline__info s { font-weight: 300; color: var(--ink-soft); font-size: 11px; }
.cline__step { width: 118px; flex-shrink: 0; }
.cline__step .stepper button { width: 30px; height: 30px; font-size: 18px; }
.cart__foot { padding: 16px 22px calc(22px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); }
.cart__clear { font-size: 12px; color: var(--ink-soft); text-decoration: underline; margin-bottom: 10px; }
.cart__save { font-size: 12px; color: var(--green-dark); margin-bottom: 8px; }
.cart__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cart__row b { font-size: 1.3rem; font-weight: 500; }
.cart__go { width: 100%; }

/* ---------- модалки ---------- */
.shop-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.shop-modal.is-open { visibility: visible; opacity: 1; }
.shop-modal__back { position: absolute; inset: 0; background: rgba(10,37,27,.55); backdrop-filter: blur(2px); }
.shop-modal__panel { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--cream); border-radius: 26px; padding: 30px 28px; box-shadow: 0 30px 70px rgba(10,60,35,.3); transform: translateY(18px) scale(.97); transition: transform .3s cubic-bezier(.22,.8,.3,1); overscroll-behavior: contain; }
.shop-modal.is-open .shop-modal__panel { transform: none; }
/* окно адреса шире остальных — длинные адреса (особенно на казахском и в Усть-Каменогорске) иначе не помещаются в поле */
@media (min-width: 640px) { #addrModal .shop-modal__panel { width: min(600px, 92vw); } }
.shop-modal__panel--sm { width: min(420px, 100%); }
.shop-modal__panel--lg { width: min(760px, 100%); padding: 0; }
.shop-modal__x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.shop-modal__body h2 { margin: 0 34px 18px 0; font-size: 1.35rem; font-weight: 500; }

/* формы */
.sform { display: flex; flex-direction: column; gap: 14px; }
.sform__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sform__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sform__f span { font-size: 12px; color: var(--ink-soft); }
.sform__f input, .sform__f select, .sform__f textarea, .pay__field textarea {
  width: 100%; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; font: inherit; font-size: 14px; color: var(--ink); outline: none; transition: border-color .2s;
}
.sform__f input:focus, .sform__f select:focus, .sform__f textarea:focus, .pay__field textarea:focus { border-color: var(--green); }
.sform__go { width: 100%; margin-top: 4px; }
.sform__go:disabled { opacity: .6; }
.sform__hint { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.sform__hint--demo { margin-top: 14px; font-size: 12px; text-align: center; }
.sform__err { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: #b3261e; font-size: 13px; }
.sform__err[hidden] { display: none; }
.sform__link { font-size: 13px; color: var(--green-dark); text-decoration: underline; align-self: center; }
.sform__link:disabled { color: var(--ink-soft); text-decoration: none; cursor: default; opacity: .8; }

/* карточка товара */
.pmodal { display: grid; grid-template-columns: 1fr 1fr; }
.pmodal__media { display: flex; align-items: center; justify-content: center; min-height: 320px; background: linear-gradient(135deg, rgba(46,159,107,.12), rgba(46,159,107,.04)); color: rgba(46,159,107,.55); font-size: 84px; border-radius: 26px 0 0 26px; overflow: hidden; }
.pmodal__media i { display: flex; }
.pmodal__media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; mix-blend-mode: multiply; }
.pmodal__info { padding: 34px 30px 30px 26px; display: flex; flex-direction: column; gap: 12px; }
.pmodal__cat { font-size: 11px; color: var(--green-dark); background: rgba(46,159,107,.12); padding: 4px 10px; border-radius: 100px; align-self: flex-start; }
.pmodal__info h2 { margin: 0; font-size: 1.3rem; }
.pmodal__info p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.pmodal__buy { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.pmodal__buy .pcard__price b { font-size: 1.4rem; }
.pmodal__note { font-size: 11px; color: var(--ink-soft); }

/* оформление */
.pay__row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; margin-bottom: 10px; }
.pay__row > i { color: var(--green); font-size: 20px; display: flex; }
.pay__row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pay__row small { font-size: 11px; color: var(--ink-soft); }
.pay__row b { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.pay__edit { font-size: 12px; color: var(--green-dark); text-decoration: underline; }
.pay__field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.pay__field span { font-size: 12px; color: var(--ink-soft); }
.pay__field textarea { resize: none; }
.pay__sum { display: flex; flex-direction: column; gap: 8px; padding: 14px 4px; font-size: 13px; }
.pay__sum > div { display: flex; justify-content: space-between; }
.pay__total { padding-top: 10px; border-top: 1px solid var(--border); font-size: 15px; }
.pay__total b { font-weight: 500; }
.pay__go { width: 100%; }
.pay__go:disabled { opacity: .6; }
.pay__note { margin: 12px 0 0; font-size: 11px; text-align: center; color: var(--ink-soft); }
.pay__done { text-align: center; padding: 10px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pay__done > span { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.pay__done > span i { display: flex; }
.pay__done h2 { margin: 6px 0 0; }
.pay__done p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.pay__done .btn { margin-top: 12px; }

/* уведомление */
.shop-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1100; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 100px; background: var(--ink); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center; }
.shop-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- планшет / телефон ---------- */
@media (max-width: 1000px) { .cgrid { --n: 4; } }
@media (max-width: 800px) {
  .shop { padding: calc(var(--header-h) + 14px) 0 70px; }
  .shop-bar { flex-wrap: wrap; margin-bottom: 22px; }
  .shop-bar__addr { order: 1; flex: 1 1 100%; max-width: none; min-width: 0; }   /* без min-width:0 flex-элемент не сжимается и текст не обрезается многоточием */
  .shop-bar__search { order: 2; }
  .shop-bar__cart { order: 3; }
  .cgrid { --n: 3; --g: 12px; }
  .ccard { padding: 16px 8px; font-size: 12.5px; }
  .ccard__ico { width: 50px; height: 50px; font-size: 22px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pgrid--row .pcard { flex-basis: 165px; }
  .hscroll { margin: 0 -24px; }
  .shop-modal { align-items: flex-end; padding: 0; }
  .shop-modal__panel, .shop-modal__panel--sm, .shop-modal__panel--lg { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translateY(40px); padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); }
  .shop-modal__panel--lg { padding: 0; }
  .pmodal { grid-template-columns: 1fr; }
  .pmodal__media { min-height: 200px; border-radius: 26px 26px 0 0; }
  .pmodal__info { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .sform__f input, .sform__f select, .pay__field textarea, .shop-bar__search input { font-size: 16px; } /* iOS не приближает экран при фокусе */
}
@media (max-width: 380px) { .cgrid { --n: 2; } .sform__grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .cart, .shop-modal__panel, .shop-toast, .sk { transition: none; animation: none; } }

/* категории с картинками из ADK и подкатегории */
.ccard__ico--img { width: 84px; height: 84px; background: none; border-radius: 0; }
.ccard__ico--img img { width: 100%; height: 100%; object-fit: contain; }
.subcats { display: flex; gap: 8px; overflow-x: auto; margin: 0 -24px 22px; padding: 2px 24px 8px; scrollbar-width: none; }
.subcats::-webkit-scrollbar { display: none; }
.subcat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; background: #fff; border: 1.5px solid var(--border); font-size: 13px; white-space: nowrap; transition: border-color .2s, background .2s; }
.subcat small { font-size: 11px; color: var(--ink-soft); }
@media (hover: hover) { .subcat:hover { border-color: var(--green); background: rgba(46,159,107,.08); } }
.subcat:active { transform: scale(.97); }

/* подтверждение возраста */
.age { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.age__badge { width: 76px; height: 76px; border-radius: 50%; background: #E53935; color: #fff; font-size: 22px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.age h2 { margin: 6px 0 0; }
.age p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.age__btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.ccard__age { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 100px; background: #E53935; color: #fff; font-size: 10px; font-weight: 500; }
.ccard { position: relative; }

.shop-bar__user { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 48px; padding: 0 16px; border-radius: 100px; background: #fff; border: 1.5px solid var(--border); font-size: 13px; box-shadow: 0 8px 20px rgba(10,60,35,.05); }
.shop-bar__user i { display: flex; color: var(--green); font-size: 17px; }
.shop-bar__user span:empty { display: none; }
.shop-bar__user:active { transform: scale(.97); }
.sform__check { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; cursor: pointer; }
.sform__check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); flex-shrink: 0; }
@media (max-width: 800px) { .shop-bar__user { order: 3; } .shop-bar__user span { display: none; } .shop-bar__user { width: 48px; padding: 0; justify-content: center; } .shop-bar__cart { order: 4; } }

.sform__f--sug { position: relative; }
.sform__inputwrap { position: relative; }
/* статус адреса «прирастает» к самому полю снизу (не пилюля-кнопка, а часть поля) — так его не путают с кнопками рядом */
.sform__f--sug input.is-ok, .sform__f--sug input.is-warn { border-radius: 14px 14px 0 0; position: relative; z-index: 1; }
.sform__f--sug input.is-ok { border-color: var(--green); }
.sform__f--sug input.is-warn, .sform__f--sug input.is-warn:focus { border-color: #c98a00; }
.sug[hidden] { display: none; }

.shop-demo { margin: -10px 0 18px; padding: 8px 14px; border-radius: 12px; background: rgba(46,159,107,.10); color: var(--green-dark); font-size: 12px; text-align: center; }

/* атрибут hidden должен побеждать display:flex у форм */
.sform[hidden], .sform__check[hidden] { display: none; }

/* страница оплаты и итог заказа */
.paybox { max-width: 460px; margin: 60px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.paybox__ico { width: 84px; height: 84px; border-radius: 50%; background: rgba(46,159,107,.12); color: var(--green); font-size: 34px; display: flex; align-items: center; justify-content: center; }
.paybox__ico i { display: flex; }
.paybox__ico--bad { background: #fdecea; color: #b3261e; }
.paybox__ico--ok { background: var(--green); color: #fff; }
.paybox__ico--spin i { animation: payspin 1.1s linear infinite; }
@keyframes payspin { to { transform: rotate(360deg); } }
.paybox h1 { margin: 6px 0 0; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500; text-wrap: balance; }
.paybox p { margin: 0 0 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .paybox__ico--spin i { animation: none; } }

.cline__age { font-style: normal; font-size: 10px; padding: 2px 7px; margin-left: 4px; border-radius: 100px; background: #E53935; color: #fff; vertical-align: middle; }

/* 3-D Secure и карты */
.paybox__stuckhint { color: #c98a00; font-weight: 500; }
.paybox__3ds { width: min(460px, 100%); height: 420px; border-radius: 18px; overflow: hidden; background: #fff; border: 1.5px solid var(--border); }
.paybox__3ds iframe { width: 100%; height: 100%; border: 0; }
.paym { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.paym__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; cursor: pointer; font-size: 13px; transition: border-color .2s, background .2s; }
.paym__opt:has(input:checked) { border-color: var(--green); background: rgba(46,159,107,.07); }
.paym__opt input { accent-color: var(--green); width: 18px; height: 18px; flex-shrink: 0; margin: 0; }
.paym__opt i { display: flex; color: var(--green); font-size: 18px; }
.paym__opt b { font-weight: 400; }
.paym__opt small { color: var(--ink-soft); margin-left: auto; font-size: 11px; }
.paym__save { margin: 2px 2px 8px 32px; }
/* карта A-Store: списание бонусов за заказ */
.bonusrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; margin: 4px 0; border-radius: 14px; background: rgba(46,159,107,.08); border: 1.5px solid transparent; font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s; }
.bonusrow:has(input:checked) { border-color: var(--green); background: rgba(46,159,107,.14); }
.bonusrow input { width: 18px; height: 18px; accent-color: var(--green); flex-shrink: 0; margin: 0; }
.bonusrow > i { display: flex; color: var(--green-dark); font-size: 17px; flex-shrink: 0; }
.bonusrow span { flex: 1; min-width: 0; }
.bonusrow b { font-weight: 600; color: var(--green-dark); white-space: nowrap; }
#cartBonus[hidden], #payBonus[hidden] { display: none; }

.cardrow { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; margin-bottom: 10px; }
.cardrow > i { display: flex; color: var(--green); font-size: 22px; }
.cardrow div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cardrow b { font-weight: 500; font-size: 14px; }
.cardrow small { color: var(--ink-soft); font-size: 12px; }
.cardrow button { color: #b3261e; font-size: 12px; text-decoration: underline; }

/* мои заказы */
.orderrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; margin-bottom: 10px; }
.orderrow__ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(46,159,107,.10); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.orderrow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.orderrow__info b { font-size: 14px; font-weight: 500; }
.orderrow__info small { font-size: 12px; color: var(--ink-soft); }
.orderrow__status { align-self: flex-start; margin-top: 2px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; background: rgba(46,159,107,.12); color: var(--green-dark); }
.orderrow__status--canceled { background: #fdecea; color: #b3261e; }
.orderrow__status--delivered { background: rgba(46,159,107,.18); color: var(--green-dark); }
.orderrow__cancel { flex-shrink: 0; font-size: 12px; color: #b3261e; text-decoration: underline; }
.orderrow__cancel:disabled { opacity: .5; }

/* карта A-Store: номер и бонусы */
.loycard { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; border-radius: 20px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, var(--green) 0%, #22815a 100%); box-shadow: 0 14px 32px rgba(10,60,35,.22); }
.loycard__top { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; letter-spacing: .03em; }
.loycard__top i { display: flex; font-size: 20px; }
.loycard__bonus { text-align: right; }
.loycard__bonus b { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.loycard__bonus small { font-size: 11px; opacity: .85; }

/* штрихкод карты: белая карточка-квитанция под зелёной картой сверху */
.loybarcode { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 18px; box-shadow: 0 8px 20px rgba(10,60,35,.05); transition: transform .15s, box-shadow .2s; }
.loybarcode svg { max-width: 100%; height: auto; }
.loybarcode small { font-size: 12px; color: var(--ink-soft); }
@media (hover: hover) { .loybarcode:hover { box-shadow: var(--shadow); } }
.loybarcode:active { transform: scale(.98); }

/* полноэкранный показ штрихкода — крупно и на белом фоне, чтобы кассиру было проще сканировать */
.loyfull { position: fixed; inset: 0; z-index: 2000; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .25s ease; }
.loyfull.is-open { opacity: 1; }
.loyfull svg { width: 100%; max-width: 420px; height: auto; }
.loyfull__x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(10,37,27,.06); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.loyfull__x i { display: flex; }
@media (prefers-reduced-motion: reduce) { .loyfull, .loybarcode { transition: none; } }

/* какой магазин обслуживает выбранный адрес */
.shop-store { margin: -12px 0 20px; padding: 9px 14px; border-radius: 12px; background: rgba(46,159,107,.10); color: var(--green-dark); font-size: 12px; line-height: 1.5; text-align: center; }
.shop-store[hidden] { display: none; }
.shop-store--warn { background: #fff4e0; color: #8a5a00; }
.shop-store b { font-weight: 500; }

/* --- выбор адреса: строка "Улица и дом" + значок геолокации + подсказки --- */
.sform__f--sug input { padding-right: 46px; }
.sug {
  position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px;
  list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 34px rgba(10,60,35,.14);
  max-height: 240px; overflow-y: auto; opacity: 0; transform: translateY(-4px) scale(.99); transform-origin: top center;
  pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.sug:not([hidden]) { opacity: 1; transform: none; pointer-events: auto; }
.sug button { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: left; font-size: 13px; line-height: 1.4; }
.sug button i { display: flex; color: var(--green); margin-top: 2px; flex-shrink: 0; }
@media (hover: hover) { .sug button:hover { background: rgba(46,159,107,.10); } }
.sug button:active { background: rgba(46,159,107,.16); }

/* маленький значок «Определить моё местоположение» внутри поля, не отдельная широкая кнопка */
.sform__geo { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(46,159,107,.12); color: var(--green-dark); font-size: 16px; transition: background .2s, color .2s, transform .2s; }
.sform__geo i { display: flex; }
.sform__geo:disabled { opacity: .5; }
@media (hover: hover) { .sform__geo:hover { background: var(--green); color: #fff; } }
.sform__geo:active { transform: scale(.92); }
.sform__geo.is-busy i { animation: geospin 1s linear infinite; }
@keyframes geospin { to { transform: rotate(360deg); } }

/* «Указать на карте» — тонкая пилюля-переключатель, не тяжёлая кнопка на всю ширину */
.sform__map {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin-top: -2px;
  border-radius: 100px; background: rgba(46,159,107,.09); color: var(--green-dark); font-size: 13px; font-weight: 400;
  transition: background .2s, transform .15s;
}
.sform__map > i:first-child { display: flex; font-size: 15px; }
.sform__map-chev { display: flex; font-size: 11px; opacity: .55; transition: transform .25s ease; }
.sform__map.is-open .sform__map-chev { transform: rotate(180deg); }
@media (hover: hover) { .sform__map:hover { background: rgba(46,159,107,.15); } }
.sform__map:active { transform: scale(.97); }

/* сама карта: плавное появление, без скачков высоты (карта уже нужного размера с первого кадра) */
.addrmap[hidden] { display: none; }
.addrmap { opacity: 0; transform: translateY(-6px); transition: opacity .28s ease, transform .28s ease; }
.addrmap.is-open { opacity: 1; transform: none; }
.addrmap__box { position: relative; height: 260px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 14px 32px rgba(10,60,35,.12); }
#addrMapCanvas { position: absolute; inset: 0; background: #e9efe6; z-index: 0; }
/* фирменная «заглушка» вместо голого белого экрана, пока грузится сама карта (скрипт/тайлы) */
.addrmap__box.is-loading::before {
  content: ''; position: absolute; inset: 0; z-index: 50;
  background: linear-gradient(90deg, #e3e8de 25%, #eef1ea 50%, #e3e8de 75%); background-size: 200% 100%; animation: shopSk 1.2s linear infinite;
}
.addrmap__pin { position: absolute; left: 50%; top: 50%; z-index: 500; transform: translate(-50%, -100%); font-size: 38px; color: #E53935; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); line-height: 1; transition: transform .18s; }
.addrmap__pin i { display: flex; }
.addrmap__pin-shadow { position: absolute; left: 50%; bottom: -3px; width: 14px; height: 5px; border-radius: 50%; background: rgba(10,37,27,.28); transform: translateX(-50%) scale(1); filter: blur(1px); transition: transform .18s, opacity .18s; }
.addrmap__box.is-moving .addrmap__pin { transform: translate(-50%, calc(-100% - 8px)); }
.addrmap__box.is-moving .addrmap__pin-shadow { transform: translateX(-50%) scale(.7); opacity: .6; }
@keyframes pinFound { 0% { transform: translate(-50%, -100%) scale(1); } 35% { transform: translate(-50%, -100%) scale(1.22, .82); } 65% { transform: translate(-50%, -100%) scale(.94, 1.08); } 100% { transform: translate(-50%, -100%) scale(1); } }
.addrmap__pin--found { animation: pinFound .42s cubic-bezier(.3,1.4,.4,1); }
/* подсказка — плавающая пилюля поверх карты, а не текст под ней */
.addrmap__hint {
  position: absolute; left: 10px; right: 10px; top: 10px; z-index: 400; margin: 0; padding: 9px 14px;
  border-radius: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(10,60,35,.16);
  font-size: 12px; line-height: 1.5; color: var(--ink-soft); text-align: center;
}
.addrmap__hint:empty { display: none; }
.addrmap__hint b { color: var(--ink); font-weight: 500; }
.addrmap__hint--ok { color: var(--green-dark); }
.maplibregl-ctrl-attrib { font-size: 9px; }

/* «Адрес найден» — аккуратный зелёный значок вместо голой строки */
/* статус адреса — прямо под полем «Улица и дом»: найден (зелёный) или ещё нет (приглушённый жёлтый), меняется по мере набора */
/* значок — тот же плоский стиль пина, что и у «Указать на карте», без кружка-бейджа */
.sform__ok {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: -1.5px 0 0; padding: 8px 14px 9px;
  border: 1.5px solid; border-top: none; border-radius: 0 0 14px 14px; font-size: 12.5px; font-weight: 600;
  animation: okIn .18s ease; transition: background .2s, color .2s, border-color .2s;
}
.sform__ok span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sform__ok[hidden] { display: none; }
.sform__ok i { display: flex; flex-shrink: 0; font-size: 15px; }
.sform__ok--ok { background: rgba(46,159,107,.16); color: var(--green-dark); border-color: var(--green); }
.sform__ok--warn { background: #fdecc0; color: #7a5900; border-color: #c98a00; }
@keyframes okIn { from { opacity: 0; transform: translateY(-3px) scale(.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sug, .addrmap, .sform__map-chev, .addrmap__pin, .addrmap__pin-shadow, .sform__ok, .sform__geo.is-busy i, .addrmap__box.is-loading::before { transition: none; animation: none; } }

/* Мягкие переходы между вкладками: страница появляется плавно, карточки подъезжают чуть позже друг друга.
   Анимация идёт на вставке элемента, поэтому подмена скелетона готовым списком тоже не «щёлкает». Скелетоны не анимируем. */
@keyframes softIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes viewIn { from { opacity: .0; } to { opacity: 1; } }
.shop-view.is-in { animation: viewIn .18s ease-out both; }
.pgrid .pcard:not(.pcard--sk), .ccard, .subcat, .orderrow, .cardrow, .loycard, .loybarcode, .shop-empty { animation: softIn .3s cubic-bezier(.2,.7,.3,1) both; }
.pgrid .pcard:nth-child(2), .ccard:nth-child(2) { animation-delay: .03s; }
.pgrid .pcard:nth-child(3), .ccard:nth-child(3) { animation-delay: .06s; }
.pgrid .pcard:nth-child(4), .ccard:nth-child(4) { animation-delay: .09s; }
.pgrid .pcard:nth-child(5), .ccard:nth-child(5) { animation-delay: .12s; }
.pgrid .pcard:nth-child(n+6), .ccard:nth-child(n+6) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .shop-view.is-in, .pgrid .pcard, .ccard, .subcat, .orderrow, .cardrow, .loycard, .loybarcode, .shop-empty { animation: none; } }

/* ---------- мои заказы: карточки со составом, суммой и ходом выполнения ---------- */
.ord { background: #fff; border: 1.5px solid var(--border); border-radius: 20px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 8px 22px rgba(10,60,35,.05); transition: box-shadow .25s, border-color .25s; }
.ord.is-open { border-color: rgba(46,159,107,.45); box-shadow: 0 14px 32px rgba(10,60,35,.10); }
.ord--sk { padding: 18px; }
.ord__head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; }
.ord__ico { width: 44px; height: 44px; border-radius: 14px; background: rgba(46,159,107,.12); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.ord__ico i { display: flex; }
.ord__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ord__main b { font-size: 15px; font-weight: 500; }
.ord__main small { font-size: 12px; color: var(--ink-soft); }
.ord__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.ord__side .orderrow__status { margin: 0; align-self: flex-end; }
.ord__sum { font-size: 15px; font-weight: 500; min-height: 1.2em; }
.ord__chev { display: flex; color: var(--ink-soft); font-size: 18px; flex-shrink: 0; transition: transform .25s ease; }
.ord.is-open .ord__chev { transform: rotate(180deg); }
.ord--canceled { background: #faf8f3; box-shadow: none; }
.ord--canceled .ord__ico { background: #fdecea; color: #b3261e; }
.ord--canceled .ord__sum { color: var(--ink-soft); text-decoration: line-through; }
.ord--delivered .ord__ico { background: var(--green); color: #fff; }
.ord__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0 18px 16px; }
.ord__steps li { display: flex; flex-direction: column; gap: 6px; font-size: 11px; line-height: 1.3; color: var(--ink-soft); }
.ord__steps i { display: block; height: 5px; border-radius: 5px; background: var(--border); }
.ord__steps .is-done i, .ord__steps .is-now i { background: var(--green); }
.ord__steps .is-done, .ord__steps .is-now { color: var(--ink); }
.ord__steps .is-now i { animation: ordPulse 1.6s ease-in-out infinite; }
@keyframes ordPulse { 50% { opacity: .35; } }
.ord__body { padding: 14px 18px 18px; border-top: 1px solid var(--border); animation: softIn .28s cubic-bezier(.2,.7,.3,1) both; }
.ord__body[hidden] { display: none; }
.ord__item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ord__thumb { width: 44px; height: 44px; border-radius: 12px; background: #f4f2e8; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.ord__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ord__thumb i { display: flex; }
.ord__iname { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.ord__item b { font-size: 13px; font-weight: 500; white-space: nowrap; }
.ord__rows { display: grid; gap: 7px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ord__rows > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-soft); }
.ord__rows b { color: var(--ink); font-weight: 500; }
.ord__rows .ord__total { margin-top: 2px; font-size: 16px; color: var(--ink); }
.ord__meta { display: flex; gap: 10px; margin-top: 14px; padding: 11px 13px; border-radius: 14px; background: rgba(46,159,107,.07); font-size: 13px; line-height: 1.5; }
.ord__meta i { display: flex; margin-top: 2px; color: var(--green); }
.ord__meta small { color: var(--ink-soft); font-size: 12px; }
.ord__actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.ord__cancel { padding: 10px 18px; border-radius: 100px; border: 1.5px solid #f1c6c2; background: #fff; color: #b3261e; font-size: 13px; transition: background .2s, transform .15s; }
.ord__cancel:hover { background: #fdecea; }
.ord__cancel:active { transform: scale(.97); }
.ord__cancel:disabled { opacity: .5; }
.ord__err { margin: 0; font-size: 13px; color: var(--ink-soft); }
.ord__err button { color: var(--green-dark); text-decoration: underline; }
@media (max-width: 520px) { .ord__head { padding: 14px; gap: 10px; } .ord__steps { padding: 0 14px 14px; } .ord__body { padding: 12px 14px 16px; } .ord__ico { width: 40px; height: 40px; } }

/* ---------- окно подтверждения ---------- */
.confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding-top: 6px; }
.confirm__ico { width: 60px; height: 60px; border-radius: 50%; background: #fdecea; color: #b3261e; font-size: 26px; display: flex; align-items: center; justify-content: center; }
.confirm__ico i { display: flex; }
.confirm h2 { margin: 0; font-size: 1.3rem; font-weight: 500; }
.confirm p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.confirm__btns { width: 100%; display: grid; gap: 10px; margin-top: 8px; }
.btn--danger { background: #c0392b; color: #fff; box-shadow: 0 12px 24px rgba(179,38,30,.22); }
@media (hover: hover) { .btn--danger:hover { background: #a93226; } }
@media (prefers-reduced-motion: reduce) { .ord, .ord__chev, .ord__steps .is-now i, .ord__body { transition: none; animation: none; } }
.ord:not(.ord--sk) { animation: softIn .3s cubic-bezier(.2,.7,.3,1) both; }

/* сводка в корзине: вес и доставка (как в приложении) */
.cart__info { display: grid; gap: 6px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(46,159,107,.07); }
.cart__info > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.cart__info b { color: var(--ink); font-weight: 500; }
.pay__sum .pay__save b { color: var(--green-dark); }

/* ---------- избранное: сердечко на карточке и в окне товара ---------- */
.pcard { position: relative; }
.pcard__like, .pmodal__like { position: absolute; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: #7a8a80; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(10,60,35,.14); transition: transform .18s, color .2s, background .2s; }
.pcard__like { top: 20px; right: 20px; }
.pmodal__like { top: 14px; right: 14px; width: 40px; height: 40px; }
.pmodal__media { position: relative; }
.pcard__like svg, .pmodal__like svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: fill .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.pcard__like.is-on, .pmodal__like.is-on { color: #e53935; }
.pcard__like.is-on svg, .pmodal__like.is-on svg { fill: currentColor; transform: scale(1.08); }
.pcard__like:active, .pmodal__like:active { transform: scale(.88); }
@media (hover: hover) { .pcard__like:hover, .pmodal__like:hover { color: #e53935; } }
.pcard.is-leaving { opacity: 0; transform: scale(.94); transition: opacity .25s, transform .25s; pointer-events: none; }

/* ---------- мои данные ---------- */
.pinfo { background: #fff; border: 1.5px solid var(--border); border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 8px 22px rgba(10,60,35,.05); }
.pinfo__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pinfo__head h3 { margin: 0; font-size: 1.05rem; font-weight: 500; }
.pinfo__edit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green-dark); padding: 7px 12px; border-radius: 100px; background: rgba(46,159,107,.10); transition: background .2s; }
.pinfo__edit i { display: flex; font-size: 13px; }
@media (hover: hover) { .pinfo__edit:hover { background: rgba(46,159,107,.18); } }
.pinfo__row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 14px; }
.pinfo__row:first-of-type { border-top: 0; }
.pinfo__row span { color: var(--ink-soft); flex-shrink: 0; }
.pinfo__row b { font-weight: 500; text-align: right; word-break: break-word; }
.pform { display: grid; gap: 12px; }
.pform__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.phub { display: grid; gap: 8px; margin-bottom: 14px; }
.prow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; font-size: 14px; transition: border-color .2s, transform .15s; }
.prow > i:first-child { display: flex; width: 38px; height: 38px; border-radius: 12px; background: rgba(46,159,107,.12); color: var(--green); align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.prow > span { flex: 1; }
.prow > i:last-child { display: flex; color: var(--ink-soft); font-size: 18px; }
.prow:active { transform: scale(.985); }
@media (hover: hover) { .prow:hover { border-color: rgba(46,159,107,.5); } }

/* ---------- мои адреса ---------- */
.arow { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 18px; margin-bottom: 10px; transition: border-color .2s; animation: softIn .3s cubic-bezier(.2,.7,.3,1) both; }
.arow.is-current { border-color: rgba(46,159,107,.55); background: rgba(46,159,107,.05); }
.arow__ico { display: flex; width: 40px; height: 40px; border-radius: 12px; background: rgba(46,159,107,.12); color: var(--green); align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.arow__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.arow__info b { font-size: 14px; font-weight: 500; word-break: break-word; }
.arow__info small { font-size: 12px; color: var(--ink-soft); }
.arow__tag { padding: 4px 11px; border-radius: 100px; background: var(--green); color: #fff; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.arow__pick { padding: 7px 14px; border-radius: 100px; border: 1.5px solid rgba(46,159,107,.45); color: var(--green-dark); font-size: 12px; flex-shrink: 0; transition: background .2s; }
.arow__pick:hover { background: rgba(46,159,107,.10); }
.arow__pick:disabled, .arow__del:disabled { opacity: .5; }
.arow__del { display: flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; color: #b3261e; font-size: 15px; flex-shrink: 0; transition: background .2s; }
.arow__del:hover { background: #fdecea; }
#addrBox + .btn { margin-top: 6px; }
@media (max-width: 520px) { .arow { flex-wrap: wrap; } .arow__info { flex-basis: calc(100% - 100px); } }
@media (prefers-reduced-motion: reduce) { .pcard__like, .pmodal__like, .pcard__like svg, .pmodal__like svg, .arow { transition: none; animation: none; } .pcard.is-leaving { transition: none; } }

/* меню профиля: значки в одну колонку слева, текст выровнен по левому краю, стрелка справа — вместо «гармошки» из-за разной длины слов */
#userModal .sform .btn { justify-content: flex-start; gap: 14px; padding: 10px 18px 10px 12px; text-align: left; }
#userModal .sform .btn > i { order: -1; flex-shrink: 0; }
#userModal .sform .btn > span { flex: 1; }
#userModal .sform a.btn::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-top: 2px solid var(--ink-soft); border-right: 2px solid var(--ink-soft); transform: rotate(45deg); margin-right: 4px; opacity: .55; transition: transform .2s, opacity .2s; }
@media (hover: hover) { #userModal .sform a.btn:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); } }

.arow__nopoint { padding: 4px 10px; border-radius: 100px; background: #fff4dd; color: #8a5a00; font-size: 11px; flex-shrink: 0; }

.arow__note { margin: 14px 2px 0; color: var(--ink-soft, #6b7a72); font-size: 14px; line-height: 1.45; }

/* главная кнопка «Определить моё местоположение» над полем адреса; карта — только уточнение */
.sform__geomain { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 16px; margin: 4px 0 2px; border-radius: 14px; background: rgba(46,159,107,.12); color: var(--green-dark); font: inherit; font-weight: 600; font-size: 15px; transition: background .2s, color .2s, transform .2s; }
.sform__geomain i { display: flex; font-size: 18px; }
.sform__geomain:disabled { opacity: .6; }
.sform__geomain.is-busy i { animation: geospin 1s linear infinite; }
@media (hover: hover) { .sform__geomain:hover { background: var(--green); color: #fff; } }
.sform__geomain:active { transform: scale(.985); }
.sform__or { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--ink-soft, #6b7a72); font-size: 12px; }
.sform__or::before, .sform__or::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,.09); }

.sform__hint { margin: 8px 2px 0; padding: 10px 12px; border-radius: 12px; background: #fff4dd; color: #6b4a00; font-size: 13.5px; line-height: 1.4; }
.sform__hint--ok { background: rgba(46,159,107,.12); color: var(--green-dark); }
.sform__map[hidden] { display: none; }
.sform__geo { display: none; }

/* кнопка «Повторить» на экране ошибки: компактная, иконка слева и вращается, пока идёт повторный запрос */
.shop-empty .btn { margin-top: 18px; }
.btn--retry { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 100px; background: rgba(46,159,107,.12); color: var(--green-dark); font: inherit; font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s, transform .2s, opacity .2s; }
.btn--retry i { display: flex; margin: 0; font-size: 16px; color: inherit; }
.btn--retry:disabled { opacity: .7; cursor: default; }
.btn--retry.is-busy i { animation: geospin 1s linear infinite; }
@media (hover: hover) { .btn--retry:not(:disabled):hover { background: var(--green); color: #fff; } }
.btn--retry:active { transform: scale(.97); }

/* карточка заказа: цены позиций, скидка, кнопки «Повторить заказ» / «Оставить отзыв», ответ менеджера */
.ord__iname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ord__iname small { color: var(--ink-soft); font-size: 12px; }
.ord__iprice { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; white-space: nowrap; }
.ord__iprice s { color: var(--ink-soft); font-size: 11.5px; opacity: .8; }
.ord__rows .ord__save b, .ord__rows .ord__save span { color: var(--green-dark); }
.ord__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ord__act { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; background: rgba(46,159,107,.12); color: var(--green-dark); font: inherit; font-weight: 600; font-size: 13.5px; transition: background .2s, color .2s, transform .15s; }
.ord__act i { display: flex; font-size: 15px; }
.ord__act--fb { background: #fff; border: 1.5px solid rgba(46,159,107,.35); }
.ord__act:disabled { opacity: .65; cursor: default; }
.ord__act.is-busy i { animation: geospin 1s linear infinite; }
@media (hover: hover) { .ord__act:not(:disabled):hover { background: var(--green); color: #fff; border-color: var(--green); } }
.ord__act:active { transform: scale(.97); }
.ord__sent { display: inline-flex; align-items: center; gap: 6px; color: var(--green-dark); font-size: 13px; }
.ord__sent i { display: flex; }
.ord__reply { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(46,159,107,.09); font-size: 13.5px; }
.ord__reply b { display: block; margin-bottom: 4px; color: var(--green-dark); font-size: 12.5px; }
.ord__reply p { margin: 0; line-height: 1.45; }
.fb__sub { margin: -4px 0 14px; color: var(--ink-soft); font-size: 13.5px; }
.fb__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.fb__row > span { font-weight: 500; }
.fb__stars { display: flex; gap: 4px; }
.fb__star { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #c9d3cd; font-size: 22px; transition: color .15s, transform .15s; }
.fb__star i { display: flex; }
.fb__star.is-on { color: #f2b01e; }
@media (hover: hover) { .fb__star:hover { transform: scale(1.12); } }
.fb__note { margin: 10px 2px 0; color: var(--ink-soft); font-size: 12.5px; text-align: center; }
#fbForm textarea { width: 100%; resize: vertical; min-height: 96px; }

/* ---------- категории с фото (как в макете): группы, ряды без пустых мест ---------- */
.pcats { margin: 0 0 30px; }
.pcats__h { margin: 0 0 14px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 500; }
.pcats__grid { --gap: 14px; --rh: 240px; display: flex; flex-direction: column; gap: var(--gap); }
.pcats__row { display: flex; gap: var(--gap); }
.pcats__grid--few .pcat { flex: 0 0 var(--cw); }   /* маленькая группа: карточки обычной ширины, не на весь экран */
.pcat { box-sizing: border-box; position: relative; display: block; flex: 1 1 0; min-width: 0; height: var(--rh); overflow: hidden; border-radius: 22px; background: var(--tone, #fbf3de); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; animation: softIn .3s cubic-bezier(.2,.7,.3,1) both; }
.pcats--cream { --tone: #fbf1da; } .pcats--lilac { --tone: #e9e6f3; } .pcats--sage { --tone: #dfe7dc; } .pcats--rose { --tone: #f3e2de; }
.pcat picture, .pcat img { position: absolute; left: 0; right: 0; bottom: 0; top: 58px; width: 100%; height: calc(100% - 58px); display: block; }
.pcat picture { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }   /* фото начинается под названием и плавно проявляется — подпись не лежит на предметах */
.pcat picture img { top: 0; height: 100%; }
.pcat img { object-fit: cover; object-position: 62% 100%; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.pcat__t { position: absolute; z-index: 1; left: 16px; top: 15px; right: 14px; font-size: 16.5px; font-weight: 500; line-height: 1.2; color: #2a2a2a; overflow-wrap: anywhere; }
.pcat--ico .pcat__ico { position: absolute; right: 14px; bottom: 14px; width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); color: var(--green-dark); font-size: 24px; }
.pcat--ico .pcat__ico i { display: flex; }
.pcat__age { position: absolute; z-index: 1; right: 10px; top: 10px; padding: 3px 8px; border-radius: 100px; background: #E53935; color: #fff; font-size: 10px; font-weight: 500; }
.pcat:active { transform: scale(.98); }
@media (hover: hover) { a.pcat:hover { transform: translateY(-4px); box-shadow: var(--shadow); } a.pcat:hover img { transform: scale(1.05); } }
@media (max-width: 800px) { .pcats__grid { --gap: 10px; } .pcat { border-radius: 18px; } .pcat__t { left: 12px; top: 12px; right: 10px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .pcat, .pcat img { animation: none; transition: none; } }

/* ленты товаров на компьютере заканчиваются по линии контента, как категории ниже; на телефоне — до края экрана */
@media (min-width: 801px) {
  .hscroll { margin: 0 -10px; padding: 4px 10px 14px; clip-path: inset(-24px 10px -24px -24px); }
}
#homeCats { margin-top: 44px; }
@media (max-width: 800px) { #homeCats { margin-top: 34px; } }

/* «Только 21+» на широком экране: две широкие карточки на всю ширину, текст слева, фото справа */
.pcats--wide-on .pcats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pcats--wide-on .pcat { flex: none; height: 168px; }
.pcats--wide-on .pcat picture { left: auto; top: 0; width: 42%; height: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%); mask-image: linear-gradient(to right, transparent 0, #000 34%); }
.pcats--wide-on .pcat picture img { object-position: 50% 100%; }
.pcats--wide-on .pcat__t { top: 50%; transform: translateY(-50%); right: 46%; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.pcats--wide-on .pcat__sub { position: absolute; z-index: 1; left: 16px; top: 50%; transform: translateY(32px); font-size: 13px; color: var(--ink-soft); }
.pcats--wide-on .pcat__age { top: 14px; right: auto; left: 16px; }
.pcat__sub { display: none; }
.pcats--wide-on .pcat__sub { display: block; }
/* у карточек с отдельным широким фото: вертикальное прячем, широкое — справа на всю высоту, предметы видны целиком */
.pcat .pcat__wide { display: none; }
.pcats--wide-on .pcat--hasw { background: var(--tone-w, var(--tone)); }
.pcats--wide-on .pcat--hasw > picture:not(.pcat__wide) { display: none; }
.pcats--wide-on .pcat picture.pcat__wide { display: block; left: auto; right: 0; top: 0; bottom: 0; width: auto; max-width: 80%; height: 100%; aspect-ratio: 1188 / 504; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.pcats--wide-on .pcat picture.pcat__wide img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }

/* телефон: заголовок и подпись в одну строку, без висящих слов; если не влезает — переносим поровну */
@media (max-width: 800px) {
  .shop-head { margin-bottom: 22px; }
  .shop-head h1 { font-size: clamp(1.1rem, 5.6vw, 1.5rem); white-space: nowrap; margin-bottom: 6px; }
  .shop-head p { font-size: clamp(11px, 3vw, 13px); text-wrap: balance; }
  .shop-head--left h1 { white-space: normal; text-wrap: balance; }
}
@media (max-width: 800px) { :lang(kk) .shop-head h1 { font-size: clamp(.95rem, 4.5vw, 1.3rem); } }

/* совсем узкие экраны (320–360): поиск не обрезает подсказку, кнопки поменьше */
@media (max-width: 360px) {
  .shop-bar { gap: 8px; }
  .shop-bar__user, .shop-bar__cart { width: 42px; height: 42px; }
  .shop-bar__search { padding-left: 12px; padding-right: 8px; gap: 8px; }
  .shop-bar__search input::placeholder { font-size: 13px; }
}

/* корзина на телефоне: длинное название не лезет под счётчик, счётчик переходит под название */
.cline__info b { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) {
  .cline { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: center; }
  .cline__ico { grid-row: 1 / span 2; align-self: start; }
  .cline__info { grid-column: 2; }
  .cline__step { grid-column: 2; width: 124px; }
}