/* 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: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: rgba(46,159,107,.12); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.shop-hero__pin i { display: flex; }
.shop-hero h1 { font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 500; margin: 0 0 10px; text-wrap: balance; }
.shop-hero p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0 auto 24px; max-width: 34ch; text-wrap: balance; }
/* ---------- категории ---------- */
.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(min(210px, 100%), 1fr)); gap: 16px; }
.pgrid > .pcard { min-width: 0; }
.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 / 1; border-radius: 14px; background: #fff; border: 0; /* белый фон без рамки: фото крупнее, метки и сердечко над ним, а не поверх */
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: 0; mix-blend-mode: multiply; }
/* ряд над фото: метки слева (переносятся на следующую строку, если их несколько), справа место под сердечко */
.pcard__tags { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 4px; min-height: 32px; padding-right: 40px; margin-bottom: 2px; }
.pcard__badge { display: inline-flex; align-items: center; margin-top: 4px; padding: 4px 9px; border-radius: 100px; background: #E53935; color: #fff; font-size: 11px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
.pcard__badge--new { background: var(--green); }
.pcard__badge--sale { background: #f59e0b; }
.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; overflow-wrap: anywhere; }
.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 { display: flex; align-items: center; justify-content: center; min-height: 64px; margin-top: 20px; }
.shop-more[hidden] { display: none; }
.shop-more__dots { display: flex; gap: 7px; opacity: 0; transition: opacity .2s ease .3s; } /* показываем, только если загрузка затянулась */
.shop-more.is-loading .shop-more__dots { opacity: 1; }
.shop-more__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: shopDot 1s ease-in-out infinite; }
.shop-more__dots i:nth-child(2) { animation-delay: .15s; }
.shop-more__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes shopDot { 0%, 80%, 100% { transform: scale(.55); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.shop-more .btn[hidden] { display: none; }
.shop-more:has(.btn:not([hidden])) .shop-more__dots { display: none; }
/* скелетон и пустые состояния */
.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 { border-color: transparent; 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,.6); 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: 1.5px solid rgba(46,159,107,.6); 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: #fff; 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, minmax(0, 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 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 { display: block; margin: -12px 0 18px; padding: 9px 14px; border-radius: 14px; background: rgba(46,159,107,.10); color: var(--green-dark); font-size: 12px; line-height: 1.4; text-align: center; }
.shop-store span { min-width: 0; }
.shop-store { text-wrap: balance; }
.shop-store .nw { display: inline-block; max-width: 100%; }
@media (max-width: 800px) { .shop-store { margin: -14px 0 16px; padding: 8px 12px; font-size: 11.5px; gap: 8px; } }
.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: geopulse 1.1s ease-in-out infinite; }
@keyframes geospin { to { transform: rotate(360deg); } }
@keyframes geopulse { 0%, 100% { opacity: .4; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.1); } }
/* «Адрес найден» — аккуратный зелёный значок вместо голой строки */
/* статус адреса — прямо под полем «Улица и дом»: найден (зелёный) или ещё нет (приглушённый жёлтый), меняется по мере набора */
/* значок — тот же плоский стиль пина, что и у «Указать на карте», без кружка-бейджа */
.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, .sform__ok, .sform__geo.is-busy i { 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(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 6px 14px 18px; }
.ord__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-size: 10.5px; letter-spacing: -.01em; line-height: 1.25; color: var(--ink-soft); }
.ord__steps li::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--border); transition: background .4s ease; }
.ord__steps li:first-child::before { display: none; }
.ord__steps .is-done::before, .ord__steps .is-now::before { background: var(--green); }
.ord__dot { position: relative; z-index: 1; display: flex; width: 33px; height: 33px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--border); color: #9aa89f; font-size: 15px; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.ord__dot i { display: flex; }
.ord__steps .is-done .ord__dot { background: var(--green); border-color: var(--green); color: #fff; }
.ord__steps .is-now .ord__dot { border-color: var(--green); color: var(--green-dark); box-shadow: 0 0 0 4px rgba(46,159,107,.16); animation: ordRing 1.8s ease-out infinite; }
.ord__lbl { max-width: 100%; overflow-wrap: break-word; }
.ord__steps .is-done .ord__lbl { color: var(--ink); }
.ord__steps .is-now .ord__lbl { color: var(--green-dark); font-weight: 500; }
@keyframes ordRing { 0% { box-shadow: 0 0 0 0 rgba(46,159,107,.38); } 80%, 100% { box-shadow: 0 0 0 10px rgba(46,159,107,0); } }
.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: #fff; border: 1.5px solid rgba(46,159,107,.6); 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: contain; }
.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: 4px 8px 16px; } .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__dot, .ord__steps li::before, .ord__body { transition: none; animation: none; } .ord__steps .is-now .ord__dot { 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: 12px; right: 12px; width: 32px; height: 32px; }
.pcard__like svg { width: 18px; height: 18px; }
.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,.6); } }
/* ---------- мои адреса ---------- */
.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: geopulse 1.1s ease-in-out 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__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: break-word; hyphens: manual; }
@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; }
}
/* ---------- телефон: шторки и крестик ---------- */
@media (max-width: 800px) {
/* крестик крупнее (44px под палец), на белом фоне с тенью: виден и над фото, и над текстом */
.shop-modal__x, .cart__x { width: 44px; height: 44px; }
.shop-modal__x { background: #fff; box-shadow: 0 2px 10px rgba(10,60,35,.2); }
/* в прокручиваемых окнах крестик «липнет» к верху и остаётся под рукой, когда форму прокрутили */
.shop-modal__panel > .shop-modal__x { position: sticky; top: -12px; right: auto; margin: -12px -6px -44px auto; } /* отступ считается от внутренней границы поля панели (26px), итого 14px от верха */
.shop-modal__panel--lg > .shop-modal__x { top: 12px; margin: 0 14px -44px auto; }
/* шторка снизу: тень вверх, а под нижним краем «продолжение» шторки (когда выезжает клавиатура или панель Safari, под окном не просвечивает страница) */
.shop-modal__panel { box-shadow: 0 -8px 40px rgba(10,60,35,.22), 0 400px 0 var(--cream); }
}
/* телефон: пока открыта шторка, страница под ней скрыта (visibility сохраняет прокрутку): когда выезжает клавиатура или панель Safari, под шторкой не торчит кусок страницы, а продолжается её фон */
@media (max-width: 800px) {
body.shop-lock > header, body.shop-lock > main, body.shop-lock > footer { visibility: hidden; }
}
@media (max-width: 340px) { .pcat__t { font-size: 13.5px; } }
/* «21+» не перекрывает название: бейдж стоит под ним (раньше у «Алкоголь» закрывал последнюю букву) */
.pcats:not(.pcats--wide-on) .pcat .pcat__age { right: auto; left: 16px; top: 42px; }
@media (max-width: 800px) { .pcats:not(.pcats--wide-on) .pcat .pcat__age { left: 12px; top: 37px; } }
/* ---------- появление при прокрутке (js/shop-reveal.js) ---------- */
.rvo { opacity: 0; transform: translateY(28px) scale(.97); animation: none !important; will-change: opacity, transform; }
.pcats__h.rvo, .shop-sub.rvo { transform: translateX(-16px); }
.rvo.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.16, 1, .3, 1) var(--rd, 0s), transform .95s cubic-bezier(.16, 1, .3, 1) var(--rd, 0s); }
.rvd { animation: none !important; }
/* телефон: окно товара — сердечко слева (справа крестик), картинка не больше трети экрана */
@media (max-width: 800px) {
.pmodal__like { left: 14px; right: auto; top: 14px; }
.pmodal__media { min-height: 0; height: clamp(180px, 32dvh, 280px); }
.pmodal__media img { height: 100%; max-height: 100%; padding: 14px; }
}
/* нажатие «В корзину»: сразу видно, что кнопка нажата, и быстрый отклик на тач */
.pcard__add, .stepper button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pcard__add.is-busy { opacity: .75; pointer-events: none; }
.pcard__add.is-busy i { animation: geospin .8s linear infinite; }
.pcard__add:active { transform: scale(.95); background: var(--green); color: #fff; }
.stepper button:active { transform: scale(.9); }
/* корзина: пока закрыта, не отбрасывает тень на экран (раньше справа у края виднелась серая полоса) */
.cart { visibility: hidden; transition: transform .35s cubic-bezier(.22,.8,.3,1), visibility 0s linear .35s; }
.cart.is-open { visibility: visible; transition: transform .35s cubic-bezier(.22,.8,.3,1), visibility 0s; }
/* корзина на телефоне: на всю ширину (на широких телефонах слева оставалась полоса), компактные строки: картинка | название и цена | счётчик */
@media (max-width: 640px) {
.cart__head { padding: 14px 16px 6px; }
.cart__head h2 { font-size: 1.15rem; }
.cart__body { padding: 0 16px; }
.cline { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 11px 0; align-items: center; }
.cline__ico, .cline__ico--img { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; align-self: start; }
.cline__info { display: contents; }
.cline__info b { grid-column: 2 / -1; grid-row: 1; font-size: 13.5px; line-height: 1.3; }
.cline__info span { grid-column: 2; grid-row: 2; font-size: 14px; align-self: center; }
.cline__step { grid-column: 3; grid-row: 2; width: 104px; }
.cline__step .stepper { padding: 3px; }
.cline__step .stepper button { width: 28px; height: 28px; font-size: 17px; }
.cart__foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.cart__clear { margin-bottom: 6px; }
.cart__row { margin-bottom: 10px; }
}
/* очень узкие экраны: счётчик уходит под цену, чтобы цена не переносилась */
@media (max-width: 359px) {
.cline { grid-template-columns: 52px minmax(0, 1fr); }
.cline__ico, .cline__ico--img { width: 52px; height: 52px; grid-row: 1 / span 3; }
.cline__info b { grid-column: 2; }
.cline__step { grid-column: 2; grid-row: 3; width: 112px; }
}
/* телефоны до 480 px (в т.ч. большие, шире 420): корзина на всю ширину, без полосы слева */
@media (max-width: 480px) { .cart { width: 100%; box-shadow: none; } }
/* телефон: окна-формы (вход, адрес, профиль, отзыв, оплата) открываются на весь экран, а не маленькой шторкой с пустой тёмной зоной сверху */
@media (max-width: 800px) {
#authModal .shop-modal__panel, #addrModal .shop-modal__panel, #userModal .shop-modal__panel, #fbModal .shop-modal__panel, #payModal .shop-modal__panel {
width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none;
padding: 32px 20px calc(24px + env(safe-area-inset-bottom));
}
#authModal .shop-modal__panel > .shop-modal__x, #addrModal .shop-modal__panel > .shop-modal__x, #userModal .shop-modal__panel > .shop-modal__x, #fbModal .shop-modal__panel > .shop-modal__x, #payModal .shop-modal__panel > .shop-modal__x { top: -8px; margin-top: -8px; }
#authModal .shop-modal__panel h2, #userModal .shop-modal__panel h2, #fbModal .shop-modal__panel h2 { margin-top: 4px; padding-right: 52px; }
}
/* вход на телефоне: логотип и крупный заголовок, чтобы экран не выглядел пустым */
@media (max-width: 800px) {
#authModal .shop-modal__panel { background: var(--cream) url("../logo a-store/v13-160.webp") no-repeat 20px 56px / 58px auto; background-attachment: local; }
#authModal .shop-modal__panel h2 { margin-top: 108px; font-size: 1.65rem; line-height: 1.15; }
}
/* окна на весь экран: строка заголовка не ниже крестика (44px) и справа оставлено место под него, поэтому крестик ничего не перекрывает (раньше заходил на поле адреса) */
@media (max-width: 800px) {
#authModal .shop-modal__panel h2, #addrModal .shop-modal__panel h2, #userModal .shop-modal__panel h2, #fbModal .shop-modal__panel h2, #payModal .shop-modal__panel h2 {
display: flex; align-items: center; min-height: 44px; margin: -8px 0 12px; padding-right: 56px; line-height: 1.2;
}
#authModal .shop-modal__panel h2 { margin-top: 108px; }
}
/* кнопка «Оплатить» после нажатия: вращающийся значок и текст, пока сервер готовит счёт */
[data-act="pay"].is-busy, [data-act="checkout"].is-busy { opacity: .85; pointer-events: none; }
[data-act="pay"].is-busy i, [data-act="checkout"].is-busy i { animation: geospin .9s linear infinite; }
/* профиль: номер под заголовком (на десктопе тоже), на телефоне воздух между шапкой, строками и «Выйти» */
.umod__phone { margin: -6px 0 14px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 800px) {
#userModal .shop-modal__panel { display: flex; flex-direction: column; padding: 34px 20px calc(28px + env(safe-area-inset-bottom)); }
#userModal .shop-modal__body { flex: 1; display: flex; flex-direction: column; }
#userModal .shop-modal__panel h2 { margin-bottom: 6px; }
#userModal .umod__phone { margin: 0 0 26px; font-size: 14px; padding-right: 56px; }
#userModal .sform { flex: 1; display: flex; flex-direction: column; gap: 12px; }
#userModal .sform .btn { min-height: 60px; padding: 12px 20px 12px 14px; border-radius: 20px; }
#userModal .sform .btn[data-act="logout"] { margin-top: auto; color: #b3261e; background: transparent; border-color: rgba(179,38,30,.25); }
#userModal .sform .btn[data-act="logout"] > i { color: #b3261e; }
}
/* ---------- мягкие переходы (окна, корзина, экраны, шаги входа) ---------- */
:root { --soft: cubic-bezier(.22, .8, .3, 1); }
/* окна: плавно появляются и так же уходят; панель чуть всплывает и проявляется */
.shop-modal { transition: opacity .32s ease, visibility .32s; }
.shop-modal__panel { opacity: 0; transition: transform .45s var(--soft), opacity .3s ease; }
.shop-modal.is-open .shop-modal__panel { opacity: 1; }
/* корзина: чуть медленнее выезжает, затемнение проявляется мягче */
.cart { transition: transform .45s var(--soft), visibility 0s linear .45s; }
.cart.is-open { transition: transform .45s var(--soft), visibility 0s; }
.cart-overlay { transition: opacity .38s ease, visibility .38s; }
/* смена экранов магазина: проявление с лёгким подъёмом вместо резкого появления */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.shop-view.is-in { animation: viewIn .36s var(--soft) both; }
/* шаги входа (телефон → имя → код) и сообщения об ошибках проявляются, а не «щёлкают» */
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#authStep1:not([hidden]), #authStepName:not([hidden]), #authStep2:not([hidden]) { animation: stepIn .34s var(--soft) backwards; }
#authErr:not([hidden]) { animation: stepIn .26s var(--soft) backwards; }
@media (prefers-reduced-motion: reduce) {
.shop-modal, .shop-modal__panel, .cart, .cart-overlay { transition: none; }
.shop-view.is-in, #authStep1, #authStepName, #authStep2, #authErr { animation: none; }
.shop-modal__panel { opacity: 1; }
}
/* форма профиля: дата не вылезает за карточку (на iPhone поле даты имеет собственную ширину), кнопки в ряд поровну, подписи по центру */
.sform__f input[type="date"] { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; min-height: 48px; text-align: left; }
.sform__f input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.pform__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pform__btns .btn { justify-content: center; gap: 10px; min-width: 0; padding-left: 16px; padding-right: 16px; }
/* форма профиля на узком экране: кнопки друг под другом на всю ширину (подпись «Сохранить» с значком не помещалась в половину) */
@media (max-width: 520px) { .pform__btns { grid-template-columns: 1fr; } .pform__btns .btn { width: 100%; white-space: nowrap; } }
/* весовой товар: «2,5 кг» не переносится на вторую строку, счётчик в строке корзины раздвигается по содержимому */
.stepper b { white-space: nowrap; }
.stepper--w b { padding: 0 4px; }
.cline__step:has(.stepper--w) { width: max-content; }
@media (max-width: 800px) { .cline__step:has(.stepper--w) { min-width: 118px; } }
/* окно товара: фон за ним не размывается и затемняется мягко, страница за окном остаётся различимой */
#prodModal .shop-modal__back { background: rgba(10,37,27,.32); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* телефон: окно товара: шторка по высоте содержимого (без пустого места), фото небольшое, название и цена не крупные */
@media (max-width: 800px) {
.shop-modal .shop-modal__panel--lg { height: auto; max-height: 94dvh; border-radius: 26px 26px 0 0; }
.shop-modal__panel--lg .pmodal__media { border-radius: 26px 26px 0 0; height: auto; min-height: 0; }
.shop-modal__panel--lg .pmodal__media img, .shop-modal__panel--lg .pmodal__media > i { height: clamp(170px, 28dvh, 250px); }
.shop-modal__panel--lg .pmodal__info { gap: 10px; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); }
.shop-modal__panel--lg .pmodal__info h2 { font-size: 1.02rem; line-height: 1.3; font-weight: 600; }
.shop-modal__panel--lg .pmodal__buy { margin-top: 4px; gap: 10px; }
.shop-modal__panel--lg .pmodal__buy .pcard__price b { font-size: 1.2rem; }
}
/* телефон: окно товара по центру экрана карточкой, а не шторкой снизу с пустотой сверху */
@media (max-width: 800px) {
#prodModal { align-items: center; padding: 16px; }
#prodModal .shop-modal__panel--lg { width: 100%; max-height: calc(100dvh - 32px); border-radius: 26px; box-shadow: 0 24px 60px rgba(10,37,27,.35); }
#prodModal .shop-modal__panel--lg .pmodal__media { border-radius: 26px 26px 0 0; border-bottom: 1.5px solid rgba(46,159,107,.6); } /* зелёная линия под фото только когда фото над текстом */
#prodModal .shop-modal__panel--lg .pmodal__info { padding-bottom: 20px; }
}
/* окно товара: картинка и дописанные позже блоки проявляются плавно, без рывков */
.pmodal__media img { opacity: 0; transition: opacity .35s ease; }
.pmodal__media img.is-ready { opacity: 1; }
.pmodal__in { animation: pmIn .4s var(--soft, ease) both; }
@keyframes pmIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pmodal__media img { transition: none; } .pmodal__in { animation: none; } }
/* окно товара (карточка по центру, без клавиатуры): страница за ним не пропадает, поэтому при открытии и закрытии нет резкого «вспыхивания» фона */
@media (max-width: 800px) {
body.shop-lock:has(#prodModal.is-open) > header, body.shop-lock:has(#prodModal.is-open) > main, body.shop-lock:has(#prodModal.is-open) > footer { visibility: visible; }
}
/* фон при открытии и закрытии окон не «плывёт» по краям: полоса прокрутки не исчезает и не сдвигает страницу, затемнение чуть шире экрана
(на iPhone при сворачивании панели Safari по краям мелькали светлые полоски), панель окна рисуется своим слоем */
html:has(body.shop-lock) { scrollbar-gutter: stable; }
.shop-modal__back { inset: -120px 0; }
#prodModal .shop-modal__panel { will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: flat; }
/* «Определить моё местоположение»: меньше шрифт и отступы, на телефоне в одну строку */
.sform__geomain { font-size: 13.5px; font-weight: 500; padding: 12px 14px; gap: 9px; }
.sform__geomain i { font-size: 16px; }
@media (max-width: 800px) { .sform__geomain { font-size: 12.5px; white-space: nowrap; } }
@media (max-width: 350px) { .ord__steps { padding: 4px 0 16px; } .ord__steps li { font-size: 9px; letter-spacing: -.03em; } .ord__dot { width: 30px; height: 30px; font-size: 14px; } .ord__steps li::before { top: 14px; } }
/* срок доставки под этапами заказа */
.ord__eta { display: flex; align-items: center; gap: 9px; margin: -4px 18px 16px; padding: 9px 13px; border-radius: 14px; background: rgba(46,159,107,.10); color: var(--green-dark); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.ord__eta i { display: flex; flex: 0 0 auto; font-size: 16px; }
@media (max-width: 520px) { .ord__eta { margin: -4px 14px 14px; font-size: 12px; } }
/* квартира, подъезд и этаж обязательны: звёздочка у подписи и красная рамка у пустого поля после попытки сохранить */
.sform__f:has(input[name="flat"]) > span::after, .sform__f:has(input[name="entrance"]) > span::after, .sform__f:has(input[name="floor"]) > span::after { content: ' *'; color: #c0392b; }
.sform__f input.is-bad { border-color: #c0392b; background: #fff6f5; }
/* частный дом или офис: поля квартиры, подъезда и этажа отключены */
.sform__house { margin: -2px 0 2px; }
.sform__grid.is-off { opacity: .45; }
.sform__grid.is-off input { background: var(--soft, #f3f3ef); }
/* после оплаты: карточка заказа с этапами под сообщением «Заказ принят» */
.paybox:has(.paytrack) { max-width: 540px; margin-top: 36px; }
.paytrack { width: 100%; text-align: left; margin: 6px 0 4px; }
.paytrack .ord { margin-bottom: 0; }
.paytrack__note { margin: 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
.paybox__link { font-size: 13px; color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 420px) { .ord__steps li { font-size: 9.5px; letter-spacing: -.02em; } .ord__steps { padding-left: 4px; padding-right: 4px; } }
/* самая длинная подпись («Доставлен») получает чуть больше места, остальные короткие: подписи не упираются друг в друга */
@media (max-width: 520px) { .ord__steps { grid-template-columns: .9fr .95fr .95fr .9fr 1.4fr; } }
@media (max-width: 800px) { .pcat__t { font-size: clamp(12.5px, 3.7vw, 15px); } }
/* ---- сортировка и фильтры категории ---- */
.catbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; flex-wrap: wrap; }
.catbar__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; background: #fff; border: 1.5px solid var(--border); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.catbar__btn i { display: flex; color: var(--green-dark); font-size: 15px; }
.catbar__btn:active { background: rgba(46,159,107,.08); }
.catbar__btn.is-on { border-color: var(--green); background: rgba(46,159,107,.10); }
.catbar__n { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; align-items: center; justify-content: center; background: var(--green); color: #fff; font-size: 11px; font-weight: 600; }
.catbar__reset { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--border); background: #fff; color: var(--green-dark); font-size: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.catbar__reset i { display: flex; }
.catbar__reset:active { background: rgba(46,159,107,.10); }
@media (max-width: 520px) { .catbar { gap: 8px; } .catbar__btn { padding: 9px 12px; gap: 6px; } .catbar__reset { width: 36px; height: 36px; } }
.sheet { display: flex; flex-direction: column; margin-top: 6px; }
.sheet__opt, .sheet__sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 2px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 15px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
.sheet__opt input, .sheet__sw input { position: absolute; opacity: 0; pointer-events: none; }
.sheet__radio { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 2px solid #8a948d; transition: border-color .2s; }
.sheet__radio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform .2s ease; }
.sheet__opt input:checked + .sheet__radio { border-color: var(--green); }
.sheet__opt input:checked + .sheet__radio::after { transform: scale(1); }
.sheet__switch { position: relative; width: 46px; height: 28px; flex: 0 0 46px; border-radius: 100px; background: #d5dcd7; transition: background .2s; }
.sheet__switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s ease; }
.sheet__sw input:checked + .sheet__switch { background: var(--green); }
.sheet__sw input:checked + .sheet__switch::after { transform: translateX(18px); }
.sheet__go { margin-top: 18px; width: 100%; justify-content: center; }
.sheet__sec { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.sheet__sec > b { font-size: 15px; font-weight: 600; }
.sheet__q { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: #fff; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.sheet__q:focus { border-color: var(--green); }
.sheet__brands { display: flex; flex-direction: column; max-height: min(38dvh, 320px); overflow-y: auto; margin: 0 -2px; padding: 0 2px; overscroll-behavior: contain; }
.sheet__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sheet__brand[hidden] { display: none; }
.sheet__brand input { position: absolute; opacity: 0; pointer-events: none; }
.sheet__tick { position: relative; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 2px solid #8a948d; transition: background .2s, border-color .2s; }
.sheet__tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .15s ease; }
.sheet__brand input:checked + span + .sheet__tick { background: var(--green); border-color: var(--green); }
.sheet__brand input:checked + span + .sheet__tick::after { transform: rotate(45deg) scale(1); }
.sheet__foot { display: flex; gap: 10px; margin-top: 18px; }
.sheet__foot .btn { flex: 1; justify-content: center; }
.sheet__foot .btn--ghost { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .sheet__radio, .sheet__radio::after, .sheet__switch, .sheet__switch::after, .sheet__tick, .sheet__tick::after { transition: none; } }
/* листы без значка в кнопке: текст ровно по центру (у обычной кнопки слева больше отступ под стрелку) */
.sheet__go, .sheet__foot .btn, .shop-empty .btn { padding: 14px 24px; }
/* окно фильтров: заголовок и кнопки всегда на виду, прокручивается только список брендов */
#filterModal .shop-modal__panel { display: flex; flex-direction: column; overflow: hidden; max-height: min(88dvh, 680px); }
#filterModal .shop-modal__body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#filterModal .sheet { flex: 1; min-height: 0; }
#filterModal .sheet__sec { flex: 1; min-height: 0; }
#filterModal .sheet__brands { flex: 1; min-height: 96px; max-height: none; }
@media (max-width: 800px) { #filterModal .shop-modal__panel { max-height: 92dvh; } }
@media (max-width: 800px) { #filterModal .shop-modal__panel > .shop-modal__x { position: absolute; top: 14px; right: 14px; margin: 0; } #filterModal .shop-modal__body h2 { padding-right: 52px; } }
/* телефон: сортировка и фильтры — карточкой по центру экрана (а не шторкой снизу), как окно товара */
@media (max-width: 800px) {
#sortModal, #filterModal { align-items: center; padding: 16px; }
#sortModal .shop-modal__panel, #filterModal .shop-modal__panel { width: 100%; max-width: 440px; margin: 0 auto; max-height: calc(100dvh - 32px); border-radius: 26px; padding: 26px 22px 22px; box-shadow: 0 24px 60px rgba(10,37,27,.35); }
#sortModal .shop-modal__panel > .shop-modal__x, #filterModal .shop-modal__panel > .shop-modal__x { position: absolute; top: 14px; right: 14px; margin: 0; }
#sortModal .shop-modal__body h2, #filterModal .shop-modal__body h2 { padding-right: 52px; }
}
@media (max-width: 800px) { #filterModal .shop-modal__panel { max-height: min(calc(100dvh - 32px), 680px); } }
@media (max-width: 360px) { .catbar { gap: 6px; } .catbar__btn { padding: 8px 10px; font-size: 12.5px; gap: 5px; } .catbar__btn i { font-size: 14px; } .catbar__reset { width: 34px; height: 34px; font-size: 16px; } .catbar__n { min-width: 18px; height: 18px; font-size: 10px; } }
/* «В корзину» всегда в одну строку: на узких карточках чуть мельче и теснее (иначе слово переносилось и кнопка выглядела съехавшей) */
.pcard__add span { white-space: nowrap; }
@media (max-width: 420px) { .pcard__add { font-size: 12px; gap: 6px; padding: 11px 8px; } .pcard__add i { font-size: 13px; } }
@media (max-width: 340px) { .pcard__add { font-size: 11.5px; gap: 5px; padding: 10px 6px; } .pcard__add i { font-size: 12px; } }
/* панель сортировки на самых узких экранах: без значков в кнопках, чтобы выбранные сортировка, фильтры и сброс помещались в одну строку */
@media (max-width: 360px) { .catbar__btn i { display: none; } .catbar__btn { padding: 8px 12px; } }
/* окно товара на компьютере: название и бренд не заходят под крестик в правом верхнем углу */
@media (min-width: 801px) { .pmodal__info h2 { padding-right: 34px; } .pmodal__info .pmodal__cat { max-width: calc(100% - 40px); } }
/* ошибки форм и заметка о магазине появляются мягко (а не рывком) */
@keyframes softShow { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sform__err:not([hidden]), .shop-store:not([hidden]) { animation: softShow .3s ease backwards; }
@media (prefers-reduced-motion: reduce) { .sform__err:not([hidden]), .shop-store:not([hidden]) { animation: none; } }
/* карточка товара на телефоне: меньше отступы (фото крупнее), сердечко и метки в ряду над фото, название до трёх строк */
@media (max-width: 640px) {
.pcard { padding: 10px; }
.pcard__like { top: 10px; right: 10px; width: 30px; height: 30px; }
.pcard__like svg { width: 17px; height: 17px; }
.pcard__tags { min-height: 30px; padding-right: 36px; }
.pcard__badge { margin-top: 3px; padding: 3px 8px; font-size: 10.5px; }
.pcard__name { margin: 8px 2px 8px; -webkit-line-clamp: 3; overflow-wrap: break-word; }
}
/* ---------- корзина мягче ---------- */
/* выезжает и проявляется, закрывается чуть быстрее и спокойнее; затемнение набирает силу вместе с лёгким размытием */
.cart { opacity: 0; transition: transform .44s cubic-bezier(.45, 0, .35, 1), opacity .4s ease .04s, visibility 0s linear .44s; }
.cart.is-open { opacity: 1; transition: transform .55s var(--soft), opacity .4s ease, visibility 0s; }
.cart-overlay { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity .45s ease, visibility .45s, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.cart.is-open ~ .cart-overlay, .cart-overlay:has(+ .cart.is-open) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* при открытии шапка, строки и итог корзины проявляются по очереди */
@keyframes cartIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cart.is-opening .cart__head, .cart.is-opening .cline, .cart.is-opening .cart__foot, .cart.is-opening .cart__body > .shop-empty { animation: cartIn .5s var(--soft) both; }
.cart.is-opening .cart__head { animation-delay: .12s; }
.cart.is-opening .cline:nth-child(1), .cart.is-opening .cart__body > .shop-empty { animation-delay: .16s; }
.cart.is-opening .cline:nth-child(2) { animation-delay: .21s; }
.cart.is-opening .cline:nth-child(3) { animation-delay: .26s; }
.cart.is-opening .cline:nth-child(n+4) { animation-delay: .31s; }
.cart.is-opening .cart__foot { animation-delay: .22s; }
/* телефон: страница под корзиной не пропадает рывком (раньше при открытии она сразу скрывалась, а при закрытии сразу возвращалась, пока затемнение ещё гасло) */
@media (max-width: 800px) {
body.shop-lock:has(#cartDrawer.is-open) > header, body.shop-lock:has(#cartDrawer.is-open) > main, body.shop-lock:has(#cartDrawer.is-open) > footer { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
.cart, .cart.is-open, .cart-overlay { transition: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cart.is-opening .cart__head, .cart.is-opening .cline, .cart.is-opening .cart__foot, .cart.is-opening .cart__body > .shop-empty { animation: none; }
}
/* «Показать всё» у блоков главной: тихая текстовая ссылка справа от заголовка, не кнопка */
.shop-subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 44px 0 18px; }
.shop-subrow .shop-sub { margin: 0; min-width: 0; }
.shop-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; padding: 4px 0 4px 8px; font-size: 13px; font-weight: 500; color: var(--green-dark); opacity: .8; white-space: nowrap; transition: opacity .2s; }
.shop-all[hidden] { display: none; }
.shop-all i { display: flex; font-size: 17px; transition: transform .2s; }
@media (hover: hover) { .shop-all:hover { opacity: 1; } .shop-all:hover i { transform: translateX(2px); } }
@media (max-width: 640px) { .shop-subrow { margin: 34px 0 14px; } .shop-all { font-size: 12.5px; } }