/* ===================================================================
 STEFANI Group — базовые стили. Mobile-first.
 =================================================================== */

:root {
 --bg: #050607;
 --bg-2: #0a0b0d;
 --bg-3: #14161a;
 --border: #3a2f1c;
 --text: #eeeeee;
 --text-dim: #8a8a8a;
 --gold: #f4bf43;
 --gold-2: #ffdf77;
 --pink: #e60087;
 --pink-2: #ff65be;
 --green: #35c46a;
 --red: #ff4d4f;
 --radius: 14px;
 --radius-sm: 10px;
 --container: 1456px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
 background: var(--bg) url('../img/bg-mobile.jpg') no-repeat top center;
 background-size: cover;
 background-attachment: fixed;
 color: var(--text);
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 line-height: 1.4;
 padding-bottom: 58px; /* место под мобильную нижнюю навигацию */
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* ---------------- Кнопки ---------------- */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 border: none; border-radius: 999px; padding: 12px 20px; font-weight: 600; font-size: 14px;
 transition: transform .12s ease, opacity .12s ease; text-align: center; line-height: 1.25;
}
.btn:active { transform: scale(.97); }
.btn--gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #201400; transition: box-shadow .2s, transform .12s; }
.btn--gold:hover { }
.btn--outline { background: rgba(230,0,135,.06); border: 1.5px solid var(--pink); color: var(--pink-2); transition: box-shadow .2s, transform .12s, background .2s; }
.btn--outline:hover { }
.btn--outline.is-active { background: var(--pink); color: #fff; }
.btn--wide { width: 100%; }
.btn--cart { background: var(--bg-3); color: var(--gold-2); border: 1px solid var(--border); width: 100%; margin-top: auto; transition: box-shadow .2s, border-color .2s; }
.btn--cart:hover { border-color: var(--gold); }
.btn--cart-gold {
 background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #201400; width: 100%; margin-top: auto;
 border: none; font-size: 12.5px; padding: 9px 10px; transition: box-shadow .2s, transform .12s;
}
.btn--cart-gold:hover { }
.btn--cart-gold[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; background: var(--bg-3); color: var(--text-dim); }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ---------------- Шапка ---------------- */
.topbar { background: var(--bg-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; transition: transform .28s ease; }
/* Отступ под статус-бар нужен ТОЛЬКО когда сайт открыт как установленное приложение
 (без адресной строки Safari) — там контент реально уходит под чёлку/время. Пока
 открыто в обычном браузере, Safari сама разводит свой интерфейс и наш контент —
 добавлять к этому ещё и safe-area было лишним и давало на iPhone большой пустой отступ. */
@media (display-mode: standalone) {
 .topbar { padding-top: env(safe-area-inset-top, 0px); }
}
.topbar--hidden { transform: translateY(-100%); }
/* На "внутренних" страницах (товар, кабинет, корзина, оформление) на мобильном прячем
 шапку с логотипом/поиском/переключателем ОПТ-РОЗНИЦА-РЕСЕЙЛ — там она не нужна,
 остаётся только нижняя навигация. На десктопе шапка нужна (там нет нижнего меню). */
@media (max-width: 979px) {
 body.chrome-minimal .topbar,
 body.chrome-minimal .footer-mini { display: none; }
 /* Шапки нет — а у .section/.accthero/.breadcrumbs свой встроенный отступ сверху
 (28px/16px/14px), задуманный, чтобы отделиться именно от шапки. Без неё это выглядит
 как пустой "провал" под самым статус-баром. Прижимаем первый блок страницы. */
 body.chrome-minimal main.main > *:first-child { margin-top: 12px !important; }
}
/* Safe-area отступ сверху добавляем ТОЛЬКО для установленного standalone-приложения —
 в обычном браузере Safari уже сама разводит свой интерфейс и наш контент, добавлять
 что-то поверх не нужно (иначе получается лишний отступ поверх обычного браузера). */
@media (max-width: 979px) and (display-mode: standalone) {
 body.chrome-minimal .site { padding-top: env(safe-area-inset-top, 0px); }
}
.topbar__inner { display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: nowrap; position: relative; }

.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.brand__badge-img { flex-shrink: 0; }
.brand__badge-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.brand__badge-img--sm { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; overflow: hidden; }
.brand__text strong { font-size: 16px; color: var(--gold-2); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.brand__text small { font-size: 8.5px; color: var(--pink-2); letter-spacing: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* Кнопка "Каталог" (текст на десктопе, иконка-гамбургер на мобильном) */
.catalog-btn {
 display: flex; align-items: center; gap: 7px; flex-shrink: 0; color: var(--gold-2); background: var(--bg-3);
 border: 1.5px solid var(--gold); border-radius: 999px; padding: 9px; 
 transition: box-shadow .2s;
}
.catalog-btn:hover { }
.catalog-btn span { display: none; }

/* Общий контейнер для лупы поиска и кнопки каталога — держатся вместе, не переносятся по отдельности */
.topbar__icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* Сворачиваемый поиск: иконка -> раскрывающаяся строка-оверлей под шапкой */
.search-wrap { flex-shrink: 0; }
.search-toggle {
 width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
 background: var(--bg-3); border: 1.5px solid var(--gold); color: var(--gold-2); 
 transition: box-shadow .2s, background .2s, color .2s;
}
.search-toggle:hover, .search-toggle.is-active { border-color: var(--pink); color: var(--pink-2); }
.search { display: none; border-radius: 999px; isolation: isolate; }
.search.is-open {
 display: flex; align-items: center; position: absolute; inset: 0; z-index: 55; margin: 0;
 padding: 0 52px 0 16px; background: var(--bg-2); border-radius: 0; border-bottom: 2px solid var(--gold);
}
.search.is-open::before { display: none; }
.search__close {
 display: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
 width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-dim);
 align-items: center; justify-content: center;
}
.search.is-open .search__close { display: flex; }
.search::before {
 content: ""; position: absolute; inset: -2px; border-radius: 999px; z-index: -1;
 background: linear-gradient(90deg, var(--gold) 0%, var(--pink) 50%, var(--gold) 100%);
}
.search__icon-inline { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; }
.search input {
 flex: 1; min-width: 0; background: var(--bg-3); border: none; border-radius: 999px;
 padding: 10px 16px 10px 44px; color: var(--text); font-size: 16px; outline: none;
}
.search input:focus { background: #181a1f; }
.search button[type="submit"] {
 background: var(--gold); border: none; border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0;
 display: flex; align-items: center; justify-content: center; margin-left: 8px; color: #1a1200;
}
.search button img { filter: brightness(0); }
.search__suggest {
 position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-3); border: 1px solid var(--border);
 border-radius: var(--radius-sm); z-index: 50; display: none; max-height: 340px; overflow-y: auto; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.search__suggest.is-open { display: block; }
.search__suggest-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.search__suggest-item:last-child { border-bottom: none; }
.search__suggest-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: #000; }
.search__suggest-item .name { font-size: 13px; flex: 1; }
.search__suggest-item .price { font-size: 13px; color: var(--gold-2); font-weight: 600; }
.search__suggest-empty { padding: 14px; text-align: center; color: var(--text-dim); font-size: 13px; }

.topbar__actions { display: flex; gap: 14px; align-items: center; }
.icon-link { display: none; flex-direction: column; align-items: center; font-size: 11px; color: var(--text-dim); position: relative; gap: 2px; }
.icon-link span { display: none; }
.icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.badge {
 position: absolute; top: -7px; right: -9px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 700;
 width: 17px; height: 17px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
 line-height: 1.4; padding: 0; box-sizing: border-box; text-align: center;
 font-variant-numeric: tabular-nums;
}
.badge--mobile { top: -6px; right: -8px; }

.typenav { display: flex; padding: 10px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.typenav::-webkit-scrollbar { display: none; }
.typegroup { display: flex; border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.typegroup--desktop { display: none; }
.typenav__btn {
 display: flex; align-items: center; gap: 6px; padding: 8px 18px; font-size: 13px; font-weight: 800; letter-spacing: .3px;
 background: var(--bg-3); border: 1.5px solid; border-right-width: 0; transition: box-shadow .2s, background .2s, color .2s;
 white-space: nowrap; flex-shrink: 0;
}
.typenav__btn:first-child { border-radius: 999px 0 0 999px; }
.typenav__btn:last-child { border-radius: 0 999px 999px 0; border-right-width: 1.5px; }
.typenav__btn.wholesale { border-color: var(--gold); color: var(--gold-2); }
.typenav__btn.retail { border-color: var(--pink); color: var(--pink-2); }
.typenav__btn.wholesale.is-active { background: rgba(244,191,67,.16); }
.typenav__btn.retail.is-active { background: rgba(230,0,135,.18); }
.typenav__btn.resell { border-color: #2ea8ff; color: #6fc3ff; border-right-width: 1.5px; }
.typenav__btn.resell.is-active { background: rgba(46,168,255,.18); }

.catnav { padding: 0 16px 10px; }
.catnav__scroll { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.catnav__scroll::-webkit-scrollbar { display: none; }
.catnav__item {
 flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 4px 0; background: none;
 border: none; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; transition: color .2s;
}
.catnav__item svg, .catnav__item .cat-icon-img { flex-shrink: 0; color: var(--gold-2); opacity: .9; width: 18px; height: 18px; object-fit: contain; }
.catnav__item.is-active, .catnav__item:hover { color: var(--gold-2); }

/* ---------------- Flash сообщения ---------------- */
.flash-wrap { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; }
.flash--error { background: rgba(255,77,79,.12); border: 1px solid rgba(255,77,79,.4); color: #ffb3b4; }
.flash--success { background: rgba(53,196,106,.12); border: 1px solid rgba(53,196,106,.4); color: #a8f0c0; }

/* ---------------- Главная / герой ---------------- */
.main { min-height: 60vh; padding-bottom: 40px; }
.hero {
 margin-top: 16px; border-radius: var(--radius); border: 1px solid var(--border); position: relative;
 overflow: hidden; background: #07090a; min-height: 260px; display: flex; align-items: center;
}
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; z-index: 1; }
.hero:after {
 content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
 background: linear-gradient(90deg, #070809 0%, rgba(7,8,9,.92) 40%, rgba(7,8,9,.55) 65%, transparent 85%);
}
.hero__copy { position: relative; z-index: 3; padding: 24px 18px; max-width: 60%; }
.hero__tag { font-size: 11px; letter-spacing: 1px; color: var(--gold-2); font-weight: 700; }
.hero h1 { font-size: 22px; line-height: 1.2; margin: 10px 0 8px; color: var(--gold-2); font-weight: 800; }
.hero p { color: #ccc; font-size: 13.5px; margin: 0 0 16px; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__media-mobile-fallback { display: none; }
.hero__dots { position: absolute; right: 16px; bottom: 10px; z-index: 4; display: flex; gap: 6px; }
.hero__dots span { width: 5px; height: 5px; border-radius: 999px; background: #555; }
.hero__dots span.is-active { background: var(--gold); width: 14px; border-radius: 999px; }

/* ---------------- Секции ---------------- */
.section { margin-top: 28px; }
.section--narrow { max-width: 720px; margin-inline: auto; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.section__head h2 { font-size: 18px; margin: 0; }
.section__count { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.section__link { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.section__link:hover { color: var(--gold-2); }

.catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.catgrid__item {
 position: relative; aspect-ratio: 3/2; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--gold);
 background: var(--bg-2); display: block; 
 transition: box-shadow .2s, transform .15s;
}
.catgrid__item:hover { transform: translateY(-2px); }
.catgrid__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catgrid__item:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,8,9,.9), transparent 60%); }
.catgrid__label { position: absolute; z-index: 2; left: 12px; bottom: 10px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.catgrid__label small { display: block; font-size: 10px; font-weight: 400; color: var(--text-dim); margin-top: 2px; }
.catgrid__arrow {
 position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 26px; height: 26px;
 display: flex; align-items: center; justify-content: center;
}
.catgrid__arrow img { width: 100%; height: 100%; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.catgrid__item:hover .catgrid__arrow img { filter: drop-shadow(0 0 8px rgba(244,191,67,.8)); }

/* ---------------- Сетка товаров ---------------- */
.productgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pcard {
 background: var(--bg-2); border: 1.5px solid var(--gold); border-radius: var(--radius); overflow: hidden;
 display: flex; flex-direction: column; padding: 8px; gap: 0;
 
 transition: box-shadow .2s, transform .15s;
}
.pcard:hover { box-shadow: 0 8px 22px rgba(0,0,0,.4); transform: translateY(-2px); }
.pcard__media { position: relative; aspect-ratio: 1/1; background: #05060a; display: block; border-radius: var(--radius-sm); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__tags { position: absolute; top: 7px; left: 7px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pcard__tag {
 background: rgba(6,8,9,.75); border: 1px solid var(--green); color: var(--green);
 font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(2px);
}
.pcard__tag--resale { border-color: var(--pink); color: var(--pink-2); }
.pcard__tag--reserved { border-color: var(--gold); color: var(--gold-2); background: rgba(244,191,67,.15); }
.pcard__tag--reserved-other { border-color: var(--red); color: var(--red); background: rgba(255,70,70,.12); }
.pcard__body { padding: 9px 4px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pcard__actions { display: flex; gap: 6px; margin-top: auto; }
.pcard__actions .btn { flex: 1; padding: 8px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__countdown { font-variant-numeric: tabular-nums; }
/* Когда кнопку "В корзину" на карточке заменяет степпер количества — растягиваем его
 на всю ширину (как и была кнопка) и добавляем кнопку быстрого перехода в корзину. */
.pcard__stepper-wrap { display: flex; gap: 6px; margin-top: auto; }
.pcard__stepper-wrap .qty-stepper { flex: 1; justify-content: space-between; }
.pcard__stepper-wrap .qty-stepper .qty-stepper__btn { flex: 1; }
.pcard__goto-cart {
 flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
 background: var(--gold); color: #1a1200; 
}
.pcard__name { font-size: 12.5px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 32px; }
.pcard__meta { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__price-row { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.pcard__price { color: var(--gold-2); font-weight: 700; font-size: 14.5px; }
.pcard__old-price { color: var(--text-dim); font-size: 11px; text-decoration: line-through; }
.pcard__discount { background: var(--pink); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.pcard__stock { font-size: 10.5px; color: var(--green); margin-top: 2px; }
.pcard__stock.is-low { color: var(--gold-2); }
.pcard__stock.is-out { color: var(--red); }
.empty-state { text-align: center; padding: 40px 10px; color: var(--text-dim); grid-column: 1 / -1; }
.empty-state .btn { margin-top: 14px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pagination__item { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--border); font-size: 13px; }
.pagination__item.is-active { background: var(--gold); color: #1a1200; border-color: transparent; }

.products-row { display: flex; flex-direction: column; gap: 12px; }
.bulkcard {
 border: 1px solid var(--gold); border-radius: var(--radius-sm); overflow: hidden; position: relative;
 padding: 14px 0 14px; background: linear-gradient(160deg, rgba(244,191,67,.12), rgba(230,0,135,.08) 70%), var(--bg-2);
 
}
.bulkcard__tag { display: block; color: #d49338; font-size: 10px; letter-spacing: 1px; padding: 0 14px; font-weight: 700; }
.bulkcard h3 { font-size: 18px; line-height: 1.15; margin: 4px 14px 8px; color: var(--text); }
.bulkcard ul { list-style: none; padding: 0 14px; margin: 0 0 10px; font-size: 12px; color: #bbb; display: flex; flex-direction: column; gap: 4px; }
.bulkcard li:before { content: "✓ "; color: var(--gold-2); }
.bulkcard .btn { margin: 0 14px; width: calc(100% - 28px); }

.advbar {
 margin-top: 30px; border-top: 1px solid #2b2822; border-bottom: 1px solid #2b2822; padding: 14px 0;
 display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.advbar__item { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.advbar__item svg, .advbar__item img { flex-shrink: 0; color: var(--gold-2); object-fit: contain; }
.advbar__item strong { display: block; font-size: 12px; }
.advbar__item span { font-size: 10.5px; color: var(--text-dim); }

/* ---------------- Витрина продавца (ресейл) ---------------- */
.sellerhero {
 display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 20px; background: var(--bg-2);
 border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap;
}
.sellerhero__logo {
 width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-2); overflow: hidden;
 display: flex; align-items: center; justify-content: center; background: var(--bg-3); flex-shrink: 0;
 
}
.sellerhero__logo img { width: 100%; height: 100%; object-fit: cover; }
.sellerhero__body { flex: 1; min-width: 200px; }
.sellerhero__body h1 { font-size: 20px; margin: 6px 0 6px; }
.sellerhero__body p { font-size: 13px; color: var(--text-dim); margin: 0 0 8px; }
.sellerhero__meta { font-size: 12px; color: var(--text-dim); }
.chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.chip--pink { background: rgba(230,0,135,.15); color: var(--pink-2); border: 1px solid rgba(230,0,135,.4); }
.chip--blue { background: rgba(46,168,255,.15); color: #6fc3ff; border: 1px solid rgba(46,168,255,.4); }
.resellhero {
 margin-top: 16px; padding: 22px 20px; background: var(--bg-2); border: 1px solid #2ea8ff; border-radius: var(--radius);
 
}
.resellhero h1 { font-size: 22px; margin: 8px 0 6px; }
.resellhero p { font-size: 13px; color: var(--text-dim); margin: 0; max-width: 640px; }
.breadcrumbs { margin-top: 14px; font-size: 12px; color: var(--text-dim); }
.breadcrumbs a { color: var(--text-dim); }
.productpage { display: grid; gap: 20px; margin-top: 12px; grid-template-columns: 1fr; }
.gallery { position: relative; }
.gallery__reserved-badge {
 position: absolute; top: 10px; right: 10px; z-index: 3;
}
.gallery__zoom {
 position: absolute; right: 10px; bottom: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%;
 background: rgba(6,8,9,.7); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold-2);
}
.gallery__main { position: relative; aspect-ratio: 1/1; background: #05060a; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.gallery__discount { position: absolute; top: 10px; left: 10px; z-index: 3; }
.gallery__arrow {
 position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.5); border: none; color: #fff;
 width: 34px; height: 34px; border-radius: 50%; font-size: 20px; display: flex; align-items: center; justify-content: center;
}
.gallery__arrow--prev { left: 8px; } .gallery__arrow--next { right: 8px; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gallery__thumb { flex-shrink: 0; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; border: 2px solid var(--border); background: #05060a; padding: 0; }
.gallery__thumb.is-active { border-color: var(--gold); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.productinfo__tag { display: inline-block; margin-bottom: 8px; }
.productinfo h1 { font-size: 20px; margin: 0 0 6px; line-height: 1.25; }
.productinfo__sku { color: var(--text-dim); font-size: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seller-badge {
 display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px;
 padding: 7px 14px 7px 7px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; width: fit-content; max-width: 100%;
}
.seller-badge strong { color: var(--text); }
a.seller-badge:hover { border-color: var(--gold); }
.seller-badge--own { border-color: rgba(244,191,67,.4); }
.seller-badge__logo {
 width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: var(--bg-3); flex-shrink: 0;
 display: flex; align-items: center; justify-content: center; color: var(--gold-2);
}
.seller-badge__logo img { width: 100%; height: 100%; object-fit: cover; }
.productinfo__price-row { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; }
.productinfo__price { font-size: 26px; font-weight: 800; color: var(--gold-2); }
.productinfo__stock { font-size: 13px; color: var(--green); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.productinfo__stock:before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.productinfo__stock.is-low { color: var(--gold-2); }
.productinfo__stock.is-out { color: var(--red); }
.productinfo__short { color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.productinfo__cart-area { display: flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.productinfo__perks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); margin: 14px 0; }
.productinfo__desc h3 { font-size: 15px; margin-bottom: 6px; }
.productinfo__desc p { color: var(--text-dim); font-size: 13.5px; }

/* Рейтинг звёздами */
.rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.rating-row__stars { display: flex; gap: 2px; color: var(--gold); }
.rating-row__num { font-size: 13px; font-weight: 700; color: var(--text); }
.rating-row__count { font-size: 12.5px; color: var(--text-dim); }
.rating-row__count:hover { color: var(--gold-2); }
.rating-row--link { font-size: 12.5px; color: var(--text-dim); text-decoration: none; }
.rating-row--link:hover { color: var(--gold-2); }
.rating-row--link svg { flex-shrink: 0; }

/* Иконки-ссылки на этот же товар на других маркетплейсах (Яндекс Маркет / Wildberries / Ozon) */
.marketplace-links { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.marketplace-links__label { font-size: 12.5px; color: var(--text-dim); }
.marketplace-links__item { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; background: var(--surface-2, #f2f2f2); transition: transform .15s ease, box-shadow .15s ease; }
.marketplace-links__item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.marketplace-links__item img { width: 100%; height: 100%; object-fit: cover; }
.marketplace-links--panel { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.marketplace-links__btn { display: inline-flex; align-items: center; gap: 8px; }
.marketplace-links__btn img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }

/* Плашки характеристик (экран / процессор / память ...) */
.specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.spec-box {
 display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
 background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 8px;
}
.spec-box svg { color: var(--gold-2); }
.spec-box__value { font-size: 13px; font-weight: 700; color: var(--text); }
.spec-box__label { font-size: 10.5px; color: var(--text-dim); line-height: 1.3; }

/* Ссылки-раскрытия "Подробнее о товаре" / "Характеристики" */
.productinfo__toggles { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.toggle-link {
 display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none;
 color: var(--gold-2); font-size: 13.5px; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--border); text-align: left; width: 100%;
}
.toggle-link svg { transition: transform .2s; flex-shrink: 0; color: var(--gold-2); }
.toggle-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.toggle-panel { display: none; padding: 4px 0 6px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.toggle-panel.is-open { display: block; }
.toggle-panel__specs { display: flex; flex-direction: column; gap: 0; }
.toggle-panel__specs li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.toggle-panel__specs li span:first-child { color: var(--text-dim); }
.toggle-panel__specs li span:last-child { color: var(--text); font-weight: 600; text-align: right; }

/* ---------------- Товар: правая колонка (цена + сайдбар) ---------------- */
.productside { display: flex; flex-direction: column; gap: 14px; }
.pricecard {
 background: var(--bg-2); border: 1.5px solid var(--gold); border-radius: var(--radius); padding: 18px;
 
}
.pricecard__old-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.pricecard__old { color: var(--text-dim); font-size: 15px; text-decoration: line-through; }
.pricecard__price { font-size: 30px; font-weight: 800; color: var(--gold-2); margin: 2px 0 12px; }
.pricecard__stock { font-size: 12.5px; color: var(--green); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.pricecard__stock:before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.pricecard__qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.qtypicker { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--bg-3); }
.qtypicker__btn { width: 34px; height: 34px; background: none; border: none; color: var(--gold-2); font-size: 17px; display: flex; align-items: center; justify-content: center; }
.qtypicker__btn:disabled { opacity: .35; cursor: not-allowed; }
.qtypicker__val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; }
.pricecard .btn { margin-top: 10px; }
.pricecard__note { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--text-dim); border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.pricecard__note svg { flex-shrink: 0; color: var(--gold-2); margin-top: 1px; }
.pricecard__note strong { display: block; color: var(--text); font-weight: 600; font-size: 12px; }

.sidebarperks { display: flex; flex-direction: column; gap: 2px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sidebarperks__item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.sidebarperks__item:last-child { border-bottom: none; }
.sidebarperks__item img, .sidebarperks__item svg { flex-shrink: 0; color: var(--gold-2); width: 22px; height: 22px; object-fit: contain; }
.sidebarperks__item strong { display: block; font-size: 12.5px; font-weight: 600; }
.sidebarperks__item span { font-size: 10.5px; color: var(--text-dim); }

.palletecta {
 position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--gold); min-height: 190px;
 display: flex; align-items: flex-end; 
}
.palletecta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.palletecta:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,8,9,.96) 15%, rgba(6,8,9,.55) 55%, rgba(6,8,9,.1)); z-index: 1; }
.palletecta__body { position: relative; z-index: 2; padding: 14px; width: 100%; }
.palletecta__tag { font-size: 10px; letter-spacing: 1px; color: var(--pink-2); font-weight: 700; }
.palletecta h3 { font-size: 16px; margin: 4px 0 8px; color: var(--text); line-height: 1.2; }
.palletecta ul { font-size: 11px; color: #ccc; display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.palletecta li:before { content: "✓ "; color: var(--gold-2); }
.palletecta .btn { width: 100%; }

/* ---------------- Товар: вкладки ---------------- */
.ptabs { margin-top: 30px; }
.ptabs__nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.ptabs__nav::-webkit-scrollbar { display: none; }
.ptabs__btn {
 flex-shrink: 0; background: none; border: none; padding: 12px 16px; font-size: 13px; font-weight: 600;
 color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s;
}
.ptabs__btn.is-active { color: var(--gold-2); border-bottom-color: var(--gold); }
.ptabs__panels { padding-top: 20px; }
.ptabs__panel { display: none; }
.ptabs__panel.is-active { display: block; }
.ptabs__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.ptabs__desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.advlist { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; height: fit-content; }
.advlist h3 { font-size: 14px; margin: 0 0 12px; color: var(--pink-2); }
.advlist li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 6px 0; }
.advlist li svg { flex-shrink: 0; color: var(--green); margin-top: 2px; }
.specs-table { display: flex; flex-direction: column; }
.specs-table li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.specs-table li span:first-child { color: var(--text-dim); }
.specs-table li span:last-child { color: var(--text); font-weight: 600; text-align: right; }
.ptabs__empty { color: var(--text-dim); font-size: 13.5px; padding: 10px 0; }

.qty-stepper { display: flex; align-items: center; background: var(--bg-3); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.qty-stepper__btn { background: transparent; border: none; color: var(--gold-2); width: 34px; height: 34px; font-size: 18px; }
.qty-stepper__val { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; }

/* Лайтбокс */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 200; display: none; align-items: center; justify-content: center; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 85vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #fff; font-size: 32px; }
.lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; }
.lightbox__arrow--prev { left: 12px; } .lightbox__arrow--next { right: 12px; }

/* ---------------- Корзина ---------------- */
.cartlist { display: flex; flex-direction: column; gap: 10px; }
.cartrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; position: relative; }
.cartrow__img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #05060a; }
.cartrow__img img { width: 100%; height: 100%; object-fit: cover; }
.cartrow__name { font-size: 13px; font-weight: 600; display: block; }
.cartrow__price { font-size: 12px; color: var(--text-dim); }
.cartrow__sum { grid-column: 2 / 3; font-weight: 700; color: var(--gold-2); font-size: 13px; }
.cartrow .qty-stepper { grid-column: 3/4; grid-row: 1/2; }
.cartrow__remove {
 position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
 background: var(--bg-3); border: 1px solid var(--border); border-radius: 50%; color: var(--pink-2); font-size: 16px; line-height: 1;
 padding: 0;
}
.cartrow__remove:hover { border-color: var(--pink); background: rgba(230,0,135,.12); }
.cartsummary { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; position: sticky; bottom: 70px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.cartsummary__total { font-size: 15px; }
.cartsummary__total strong { color: var(--gold-2); font-size: 18px; }

/* ---------------- Формы ---------------- */
.auth-form, .checkout__form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.auth-form label, .checkout__form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); }
.auth-form input, .checkout__form input, .checkout__form textarea, select.form-select {
 background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 12px; color: var(--text); font-size: 16px; outline: none; font-family: inherit;
}
.auth-form input:focus, .checkout__form input:focus, .checkout__form textarea:focus { border-color: var(--gold); }
.auth-switch { margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.auth-switch a { color: var(--gold-2); }

.checkout { display: grid; gap: 24px; }
.checkout__summary { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; align-self: start; }
.checkout__row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.checkout__total { margin-top: 10px; font-size: 15px; text-align: right; }
.checkout__total strong { color: var(--gold-2); font-size: 18px; }

.success-page { text-align: center; padding: 40px 10px; }
.success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #06210f; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.success-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ---------------- Страницы входа и регистрации ---------------- */
.authbody { margin: 0; }
.authpage {
 min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
 padding: 32px 16px calc(32px + env(safe-area-inset-bottom, 0px)); gap: 22px;
}
.authpage__logo { display: flex; align-items: center; gap: 12px; text-align: left; }
.authpage__logo img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(244,191,67,.5)); }
.authpage__logo span { display: flex; flex-direction: column; line-height: 1.2; }
.authpage__logo strong { font-size: 22px; color: var(--gold-2); }
.authpage__logo small { font-size: 11px; letter-spacing: 2px; color: var(--pink-2); }

.authcard-wrap {
 width: 100%; max-width: 420px; border-radius: 20px; padding: 1.5px;
 background: linear-gradient(135deg, var(--pink), var(--gold));
 
}
.authcard { background: var(--bg-2); border-radius: 18.5px; padding: 30px 24px; }
.authcard__avatar-wrap { display: flex; justify-content: center; margin-bottom: 22px; }
.authcard__avatar {
 width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
 color: var(--gold-2); background: var(--bg-3);
 border: 2px solid transparent; background-clip: padding-box;
 
}
.authcard__avatar--sm { width: 52px; height: 52px; flex-shrink: 0; }
.authcard__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.authcard__head h1 { font-size: 19px; margin: 4px 0 6px; }
.authcard__head p { font-size: 12px; color: var(--text-dim); margin: 0; line-height: 1.5; }

.authcard__form { display: flex; flex-direction: column; gap: 12px; }
.authfield {
 position: relative; display: flex; align-items: center; gap: 10px; background: var(--bg-3);
 border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; transition: border-color .2s;
}
.authfield:focus-within { border-color: var(--gold); }
.authfield svg { flex-shrink: 0; color: var(--gold-2); }
.authfield input {
 flex: 1; min-width: 0; background: none; border: none; color: var(--text); padding: 13px 0; font-size: 16px; font-family: inherit;
}
.authfield input:focus { outline: none; }
.authfield input::placeholder { color: var(--text-dim); }
.authfield__eye { background: none; border: none; color: var(--text-dim); flex-shrink: 0; display: flex; padding: 6px; }
.authfield__eye:hover { color: var(--gold-2); }

.authcard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.authcheck { display: flex; align-items: center; gap: 8px; color: var(--text-dim); cursor: pointer; }
.authcheck input { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; }
.authcheck--terms { align-items: flex-start; font-size: 12px; line-height: 1.5; }
.authcheck--terms input { margin-top: 3px; }
.authcheck--terms a { color: var(--pink-2); }
.authcard__forgot { color: var(--text-dim); }
.authcard__forgot:hover { color: var(--gold-2); }

.btn--pink-gradient {
 background: linear-gradient(135deg, var(--pink), #ff2ba0); color: #fff; 
 transition: box-shadow .2s, transform .12s;
}
.btn--pink-gradient:hover { }

.authcard__divider { height: 1px; background: var(--border); margin: 20px 0 16px; }
.authcard__switch-label { text-align: center; font-size: 12.5px; color: var(--text-dim); margin: 0 0 10px; }
.authcard__trust { display: flex; justify-content: space-between; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.authcard__trust > div { flex: 1 1 30%; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--gold-2); }
.authcard__trust span { font-size: 10px; color: var(--text-dim); line-height: 1.3; }

/* ---------------- PWA: окно установки приложения ---------------- */
html.pwa-locked, html.pwa-locked body { overflow: hidden !important; height: 100%; }
.pwa-modal {
 display: none; position: fixed; inset: 0; z-index: 200; background: rgba(2,2,3,.75);
 align-items: center; justify-content: center; padding: 20px;
}
.pwa-modal.is-open { display: flex; }
.pwa-modal__card {
 position: relative; width: 100%; max-width: 380px; background: var(--bg-2); border-radius: var(--radius);
 padding: 28px 22px 22px; text-align: center; border: 1.5px solid var(--gold);
 
}
.pwa-modal__x {
 position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-dim);
 font-size: 22px; line-height: 1; padding: 4px;
}
.pwa-modal__logo { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px; }
.pwa-modal__card h3 { font-size: 17px; margin: 0 0 10px; color: var(--gold-2); }
.pwa-modal__card p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0 0 16px; }
.pwa-modal__steps { text-align: left; font-size: 13px; color: var(--text-dim); padding-left: 20px; margin: 0 0 16px; line-height: 1.8; }

/* На мобильных прячем "закрыть"/"не сейчас" для сценария Android — установка обязательна */
.pwa-modal--strict .pwa-modal__x { display: none; }
.pwa-modal--strict [data-pwa-mode="android"] [data-pwa-close] { display: none; }

/* Баннер "доступна новая версия" */
.pwa-update-toast {
 position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 300; background: var(--bg-2);
 border: 1.5px solid var(--gold); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center;
 justify-content: space-between; gap: 10px; transform: translateY(120%);
 transition: transform .3s ease; max-width: 420px; margin: 0 auto;
}
.pwa-update-toast.is-visible { transform: translateY(0); }
.pwa-update-toast span { font-size: 12.5px; color: var(--text); }
.pwa-update-toast button {
 background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #201400; border: none; border-radius: 999px;
 padding: 8px 16px; font-weight: 700; font-size: 12.5px; flex-shrink: 0;
}
@media (min-width: 900px) { .pwa-update-toast { left: auto; right: 24px; bottom: 24px; } }

/* ---------------- Чат покупатель ↔ продавец/поддержка ---------------- */
.ordercard__chats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chatpage {
  display: flex; flex-direction: column; height: calc(100dvh - 140px); min-height: 400px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 10px;
}
.chatpage__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chatpage__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--gold); color: var(--gold-2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.chatpage__head strong { display: block; font-size: 13.5px; }
.chatpage__head span { font-size: 11px; color: var(--text-dim); }
.chatpage__messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chatbubble { max-width: 78%; align-self: flex-start; background: var(--bg-3); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.chatbubble--mine { align-self: flex-end; background: rgba(230,0,135,.15); border-color: rgba(230,0,135,.4); border-radius: 14px 14px 4px 14px; }
.chatbubble__sender { display: block; font-size: 10.5px; font-weight: 700; color: var(--gold-2); margin-bottom: 2px; }
.chatbubble p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chatbubble time { display: block; font-size: 9.5px; color: var(--text-dim); margin-top: 3px; text-align: right; }
.chatpage__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; align-items: flex-end; }
.chatpage__form textarea {
  flex: 1; resize: none; background: var(--bg-3); border: 1px solid var(--border); border-radius: 18px; padding: 10px 14px;
  color: var(--text); font-size: 16px; font-family: inherit; max-height: 120px;
}
.chatpage__form textarea:focus { outline: none; border-color: var(--pink); }
.chatpage__form button {
  width: 42px; height: 42px; border-radius: 50%; background: var(--pink); color: #fff; border: none; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------- Личный кабинет ---------------- */
.account-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px; font-size: 14px; overflow-x: auto; }
.account-tabs a { padding: 10px 2px; color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; }
.account-tabs a.is-active { color: var(--gold-2); border-color: var(--gold); }
.account-tabs__logout { margin-left: auto; color: var(--pink-2) !important; }
.orderlist { display: flex; flex-direction: column; gap: 12px; }
.orderrow { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }
.orderrow__head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.orderrow__item { font-size: 12.5px; color: var(--text-dim); padding: 2px 0; }
.orderrow__total { margin-top: 8px; font-size: 13px; text-align: right; }
.status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.st-new { background: rgba(230,179,37,.15); color: var(--gold-2); }
.st-confirmed { background: rgba(53,196,106,.15); color: var(--green); }
.st-shipped { background: rgba(46,168,255,.15); color: #6fc3ff; }
.st-completed { background: rgba(53,196,106,.25); color: var(--green); }
.st-cancelled { background: rgba(255,77,79,.15); color: var(--red); }

/* Hero-плашка кабинета */
.accthero {
 margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2);
 padding: 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.accthero__text h1 { font-size: 22px; margin: 0 0 4px; color: var(--gold-2); }
.accthero__text p { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.accthero__art {
 flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold-2);
 display: flex; align-items: center; justify-content: center; 
}

/* Раскладка: боковое меню + контент */
.acct-layout { display: block; margin-top: 18px; }
.acct-sidebar { display: none; }
.acct-sidebar__item {
 display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: var(--radius-sm); color: var(--text-dim);
 border: 1px solid transparent; margin-bottom: 6px; transition: border-color .2s, background .2s, box-shadow .2s;
}
.acct-sidebar__item svg { flex-shrink: 0; }
.acct-sidebar__item strong { display: block; font-size: 13px; color: var(--text); font-weight: 600; }
.acct-sidebar__item span { font-size: 11px; color: var(--text-dim); }
.acct-sidebar__item:hover { border-color: var(--border); background: var(--bg-3); }
.acct-sidebar__item.is-active { border-color: var(--gold); background: rgba(244,191,67,.08); }
.acct-sidebar__item.is-active strong { color: var(--gold-2); }
.acct-sidebar__logout {
 display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 14px; border: 1.5px solid var(--pink);
 border-radius: var(--radius-sm); color: var(--pink-2); font-size: 13px; font-weight: 600; 
}

.acct-content__head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 14px; gap: 10px; }
.acct-content__head h2 { font-size: 16px; margin: 0; display: flex; align-items: center; }
.hubcount { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; }

/* Мобильный хаб личного кабинета (вкладка "Профиль" на телефоне) */
.accthub { display: block; }
.acct-dashboard-full { display: none; }
.hubprofile {
 display: flex; align-items: center; gap: 12px; background: var(--bg-2); border: 1.5px solid var(--gold); border-radius: var(--radius);
 padding: 14px 16px; margin-bottom: 14px; 
}
.hubprofile__avatar {
 width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-2); flex-shrink: 0;
 display: flex; align-items: center; justify-content: center; 
}
.hubprofile__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.hubprofile__info strong { font-size: 15px; }
.hubprofile__info span { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubprofile .chevron { flex-shrink: 0; color: var(--gold-2); }

.hubquicknav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.hubquicknav__item {
 display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); border: 1px solid var(--gold); border-radius: var(--radius-sm);
 padding: 14px 12px; color: var(--text-dim); 
}
.hubquicknav__item svg { color: var(--gold-2); }
.hubquicknav__item strong { display: block; font-size: 13px; color: var(--text); font-weight: 700; }
.hubquicknav__item span { font-size: 10.5px; color: var(--text-dim); }

.hublogout {
 display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--pink); color: var(--pink-2);
 border-radius: var(--radius-sm); padding: 13px; font-size: 13px; font-weight: 700; margin-bottom: 22px;
 
}

.hubstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.hubstats__box {
 display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 6px;
 border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg-2); color: var(--text-dim);
}
.hubstats__box span { font-size: 10.5px; color: var(--text-dim); }
.hubstats__box strong { font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 5px; }
.hubstats__dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--text-dim); }
.hubstats__box--active { border-color: var(--green); }
.hubstats__box--active .hubstats__dot { background: var(--green); }
.hubstats__box--completed { border-color: var(--green); }
.hubstats__box--completed .hubstats__dot { background: var(--green); }
.hubstats__box--cancelled { border-color: var(--red); }
.hubstats__box--cancelled .hubstats__dot { background: var(--red); }

/* Карточка профиля */
.profilecard { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.profilecard__avatar {
 width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-2);
 display: flex; align-items: center; justify-content: center; flex-shrink: 0; 
}
.profilecard__info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.profilecard__info strong { font-size: 16px; }
.profilecard__info span { font-size: 12.5px; color: var(--text-dim); }
.profilecard__badge { display: inline-flex; align-self: flex-start; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--gold-2); background: rgba(244,191,67,.12); border: 1px solid var(--gold); border-radius: 999px; padding: 2px 10px; }

/* Статистика */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.statbox { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 12px; }
.statbox svg { flex-shrink: 0; color: var(--gold-2); }
.statbox strong { display: block; font-size: 16px; color: var(--gold-2); }
.statbox span { font-size: 10.5px; color: var(--text-dim); }

/* Безопасность */
.securitycard { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 16px 10px; margin-bottom: 10px; }
.securitycard h3 { font-size: 14px; padding-top: 12px; margin: 0 0 4px; }
.securitycard__row {
 width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid var(--border);
 background: none; border-left: none; border-right: none; border-bottom: none; color: var(--text); font-size: 13px; text-align: left;
}
.securitycard__row span:nth-child(2) { flex: 1; }
.securitycard__row .chevron { color: var(--text-dim); }
.securitycard__status { color: var(--pink-2); font-size: 12px; font-weight: 600; }

/* Карточки заказа */
.ordercard-list { display: flex; flex-direction: column; gap: 12px; }
.ordercard { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.ordercard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ordercard__title { display: flex; align-items: center; gap: 10px; }
.ordercard__icon { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); color: var(--gold-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ordercard__title strong { display: block; font-size: 13.5px; }
.ordercard__date { font-size: 11px; color: var(--text-dim); }
.status-pill { font-size: 10.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.status-pill.st-new { background: rgba(230,179,37,.15); color: var(--gold-2); border: 1px solid rgba(230,179,37,.4); }
.status-pill.st-confirmed { background: rgba(46,168,255,.15); color: #6fc3ff; border: 1px solid rgba(46,168,255,.4); }
.status-pill.st-shipped { background: rgba(230,0,135,.15); color: var(--pink-2); border: 1px solid rgba(230,0,135,.4); }
.status-pill.st-completed { background: rgba(53,196,106,.15); color: var(--green); border: 1px solid rgba(53,196,106,.4); }
.status-pill.st-cancelled { background: rgba(255,77,79,.15); color: var(--red); border: 1px solid rgba(255,77,79,.4); }
.ordercard__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ordercard__thumbs { display: flex; gap: 6px; }
.ordercard__thumb { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #05060a; border: 1px solid var(--border); flex-shrink: 0; }
.ordercard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ordercard__thumb--more { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-dim); font-weight: 700; }
.ordercard__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ordercard__meta span { font-size: 11.5px; color: var(--text-dim); }
.ordercard__meta strong { font-size: 15px; color: var(--gold-2); }
.ordercard__cancelled { font-size: 12px; color: #ffb3b4; background: rgba(255,77,79,.1); border: 1px solid rgba(255,77,79,.3); border-radius: var(--radius-sm); padding: 8px 12px; }
.ordercard__stepper { display: flex; justify-content: space-between; padding-top: 4px; }
.ordercard__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.ordercard__step:not(:last-child):after {
 content: ""; position: absolute; top: 5px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0;
}
.ordercard__step--done:not(:last-child):after { background: var(--pink); }
.ordercard__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-3); border: 2px solid var(--border); z-index: 1; }
.ordercard__step--done .ordercard__dot { background: var(--pink); border-color: var(--pink); }
.ordercard__step-label { font-size: 9.5px; color: var(--text-dim); text-align: center; }
.ordercard__step--done .ordercard__step-label { color: var(--text); }
.ordercard__more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.ordercard__more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gold-2); font-weight: 600; }
.ordercard__more summary::-webkit-details-marker { display: none; }
.ordercard__more[open] summary svg { transform: rotate(90deg); }
.ordercard__itemlist { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ordercard__itemlist li { font-size: 12px; color: var(--text-dim); }

/* Подвкладки (Активные/Завершённые, Бронь/Просмотренные) */
.account-subtabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.account-subtabs::-webkit-scrollbar { display: none; }
.account-subtabs__btn {
 flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px; font-weight: 600;
 padding: 9px 16px; border-radius: 999px; transition: border-color .2s, color .2s, box-shadow .2s;
}
.account-subtabs__btn.is-active { border-color: var(--pink); color: var(--pink-2); }
[data-subtab-panel] { display: none; }
[data-subtab-panel].is-active { display: grid; }
.ordercard-list[data-subtab-panel].is-active { display: flex; }

/* Настройки */
.settingsgroup { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.settingsgroup h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); padding: 14px 16px 6px; margin: 0; }
.settingsrow {
 width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border);
 background: none; border-left: none; border-right: none; border-bottom: none; color: var(--text); text-align: left;
}
.settingsrow svg:first-child { flex-shrink: 0; color: var(--gold-2); }
.settingsrow div { flex: 1; }
.settingsrow strong { display: block; font-size: 13px; font-weight: 600; }
.settingsrow span:not(.settingsrow__value) { font-size: 11px; color: var(--text-dim); }
.settingsrow .chevron { color: var(--text-dim); flex-shrink: 0; }
.settingsrow__value { font-size: 12px; color: var(--gold-2); font-weight: 600; flex-shrink: 0; }
.settingsrow--static { cursor: default; }
.settingsrow--danger { color: var(--pink-2); border: 1.5px solid var(--pink); border-radius: var(--radius); }
.settingsrow--danger svg:first-child { color: var(--pink-2); }

/* ---------------- Подвал ---------------- */
.footer__brand { display: flex; gap: 10px; align-items: flex-start; }
.footer__brand p { color: var(--text-dim); font-size: 12px; margin: 4px 0 0; }
.footer__social { display: flex; flex-direction: column; gap: 8px; }
.footer__social-label { font-size: 12px; color: var(--text-dim); }
.footer__social-icons { display: flex; gap: 10px; }
.footer__social-icons a {
 width: 34px; height: 34px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--border);
 display: flex; align-items: center; justify-content: center; color: var(--gold-2); transition: box-shadow .2s, border-color .2s;
}
.footer__social-icons a:hover { border-color: var(--gold); }
.footer__phone { display: flex; align-items: center; gap: 7px; color: var(--gold-2); font-weight: 700; font-size: 14px; }
.footer__phone img { flex-shrink: 0; }

/* Компактная строка-кнопка вместо большого подвала на обычных страницах */
.footer-mini { margin-top: 40px; padding: 16px; text-align: center; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.footer-mini__link {
 display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim);
 padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); transition: border-color .2s, color .2s;
}
.footer-mini__link:hover { border-color: var(--gold); color: var(--gold-2); }
.footer-mini__link--accent { border-color: rgba(230,0,135,.4); color: var(--pink-2); }
.footer-mini__link--accent:hover { border-color: var(--pink); }

/* Страница "О компании" (contacts.php) */
.contactspage { display: flex; flex-direction: column; gap: 18px; padding: 20px 0 40px; }
.contactspage__brand { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.contactspage__note { font-size: 11px; color: var(--text-dim); }
.contactspage__copy { font-size: 11px; color: var(--text-dim); text-align: center; margin-top: 10px; }
.infocard { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.infocard h2 { font-size: 15px; margin: 0 0 8px; color: var(--gold-2); }
.infocard p { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin: 0; }

/* ---------------- Нижняя мобильная навигация ---------------- */
.mobilenav {
 position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-2); border-top: 1px solid var(--border);
 display: flex; z-index: 60; padding: 6px 0 4px;
}
@media (display-mode: standalone) {
 .mobilenav { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
 body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}
.mobilenav__item, .mobilenav__search-form button {
 flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
 font-size: 10.5px; color: var(--text-dim); background: none; border: none; position: relative; width: 100%; min-height: 40px;
}
.mobilenav__item svg, .mobilenav__item img { width: 22px; height: 22px; flex-shrink: 0; }
.mobilenav__item.is-active { color: var(--pink-2); }
.mobilenav__item.is-active svg { filter: drop-shadow(0 0 4px rgba(230,0,135,.6)); }
.mobilenav__search-form { flex: 1; display: flex; }

/* ===================================================================
 Планшет и десктоп
 =================================================================== */
@media (max-width: 719px) {
 .hero { min-height: 200px; }
 .hero__copy { max-width: 78%; padding: 18px 14px; }
 .hero h1 { font-size: 18px; }
 .hero p { font-size: 12.5px; }
 .hero:after { background: linear-gradient(90deg, #070809 0%, rgba(7,8,9,.94) 55%, rgba(7,8,9,.55) 78%, transparent 95%); }
}
@media (min-width: 720px) {
 .productgrid { grid-template-columns: repeat(3, 1fr); }
 .catgrid { grid-template-columns: repeat(4, 1fr); }
 .productpage { grid-template-columns: 1fr 1fr; align-items: start; }
 .productpage .productside { grid-column: 1 / -1; }
 .productpage .productside .pricecard { max-width: 420px; }
 .ptabs__grid { grid-template-columns: 2fr 1fr; }
 .checkout { grid-template-columns: 1.3fr 1fr; }
 .products-row { flex-direction: row; align-items: stretch; }
 .productgrid { flex: 1; }
 .bulkcard { width: 290px; flex-shrink: 0; }
 .advbar { grid-template-columns: repeat(5, 1fr); }
 .advbar__item { border-right: 1px solid #292822; }
 .advbar__item:last-child { border-right: none; }
}

@media (min-width: 980px) {
 body { background-image: url('../img/bg-desktop.jpg'); }
 body { padding-bottom: 0; }
 .mobilenav { display: none; }
 .topbar__inner { flex-wrap: nowrap; }
 .catalog-btn span { display: inline; }
 .typegroup--desktop { display: flex; order: 0; flex-shrink: 0; }
 .typenav--mobile { display: none; }
 .catnav__scroll { justify-content: space-between; overflow: visible; }
 .icon-link { display: flex; flex-direction: row; gap: 6px; align-items: center; }
 .icon-link span { display: inline; font-size: 13px; }
 .topbar__actions { order: 0; margin-left: 0; }
 .productgrid { grid-template-columns: repeat(4, 1fr); }
 .catgrid { grid-template-columns: repeat(6, 1fr); }
 .productpage { grid-template-columns: 460px 1fr 320px; }
 .productpage .productside { grid-column: auto; }
 .productpage .productside .pricecard { max-width: none; }
 .hero h1 { font-size: 30px; }
 .hero__copy { padding: 36px 30px; max-width: 55%; }
 .hero { min-height: 320px; }
 .footer__brand { max-width: 320px; }
 .account-tabs { display: none; }
 .acct-sidebar { display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 76px; align-self: start; }
 .acct-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
 .accthero { padding: 28px 30px; }
 .accthero__text h1 { font-size: 28px; }
 .profilecard { flex-wrap: nowrap; }
 .accthub { display: none; }
 .acct-dashboard-full { display: block; }
}

@media (min-width: 1280px) {
 .productgrid { grid-template-columns: repeat(5, 1fr); }
}

/* ---------------- Админка (общие переопределения смотри admin.css) ---------------- */