/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(250,249,246,0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo-mark { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; }
/* Настоящий логотип (assets/media/brand/): иконка растровая, contain — не
   тянем и не обрезаем; пропорции файла 1003×542 сохранены через aspect-ratio.
   Текст BUYROOM остаётся шрифтом Unbounded (не картинкой) — чётче на любом
   экране и не тяжелее на вес, чем растровый wordmark. */
.logo-glyph { width: 55px; aspect-ratio: 168/96; background: url('../media/brand/logo-icon.png') no-repeat center / contain; flex-shrink: 0; }
.logo-word { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 16px; }
.header-actions { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
/* Лёгкое меню категорий на внутренних страницах (на home/checkout его нет
   намеренно: лендинг и чекаут не отвлекаем). На узких экранах — горизонтальная
   прокрутка без скроллбара, шапку не ломает. */
.header-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0 16px; }
.header-nav::-webkit-scrollbar { display: none; }
.header-nav a { font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 11px; border-radius: 100px; white-space: nowrap; transition: color .12s ease, background-color .12s ease; }
.header-nav a:hover { color: var(--ink); }
.header-nav a.active { color: var(--ink); background: var(--card); }
.back-link { flex-shrink: 0; background: none; border: 1.5px solid var(--ink); border-radius: 100px; font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 9px 18px; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.back-link:hover { color: var(--orange-dark); border-color: var(--orange-dark); background: #fff0e8; }
.icon-btn { flex-shrink: 0; position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 24px; }
.cart-count { position: absolute; top: -6px; right: -8px; background: var(--orange); color: var(--paper); font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-count.pulse { animation: cartPulse .3s ease; }
@keyframes cartPulse { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.icon-btn.cart-bump { animation: cartBump .45s cubic-bezier(.3,1.5,.4,1); }
@keyframes cartBump { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-6deg); } 70% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }

/* Мобильная шапка (mobile-instructions/02, пункты 1/2/6/7). Корень бага:
   .header-row — flex с justify-content:space-between, но ЕДИНСТВЕННЫЙ элемент
   без flex-shrink:0 — это .header-nav; logo-mark/back-link/icon-btn все
   flex-shrink:0. На узком экране вся нехватка ширины ложится целиком на
   nav — он схлопывается до 0px (не overflow:hidden, а буквально нулевая
   ширина), а не влезающий целиком .header-row переполняет документ вбок,
   из-за чего сама корзина (тоже flex-shrink:0) уезжает за правый край
   видимой области. Фикс — не трогая логику самого nav (горизонтальная
   прокрутка чипами уже реализована, ей просто ни разу не доставалось места):
   уменьшить то, что можно уменьшить (лого, back-link прячем — дублирует
   nav/жест "назад" ОС), чтобы nav получил реальную ширину, а корзина
   гарантированно осталась на экране. */
@media (max-width: 640px) {
  .header-row { height: 58px; }
  .logo-mark { gap: 6px; }
  .logo-glyph { width: 32px; }
  .logo-word { font-size: 13px; }
  .header-nav { margin: 0 6px; gap: 0; }
  .header-nav a { padding: 6px 9px; font-size: 12px; }
  .header-actions { gap: 8px; }
  /* Дублирует и логотип-ссылку на главную, и категорийное меню, и системный
     жест "назад" — на телефоне не нужен, освобождает критичное место. */
  .back-link { display: none; }
  /* Корзина — единственная неприкосновенная часть шапки (см. 05, запрет №3):
     тап-цель растим до ~44px даже за счёт визуального компромисса. */
  .icon-btn { width: 44px; height: 44px; font-size: 22px; }
}

.breadcrumb { padding-top: 20px; font-size: 13px; color: var(--muted); }
.breadcrumb a:hover { color: var(--orange-dark); }
.breadcrumb span { margin: 0 6px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 100px; font-size: 14.5px; font-weight: 600; border: 1.5px solid var(--ink); white-space: nowrap; transition: transform .15s cubic-bezier(.3,1.4,.4,1); background: none; font-family: 'Manrope', sans-serif; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.94); }
.btn-accent { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-ghost { background: transparent; color: var(--ink); }

/* ---------- qty stepper ---------- */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--card-line); border-radius: 100px; }
.qty-stepper button { width: 25px; height: 25px; background: none; border: none; font-size: 14px; }
.qty-stepper span { min-width: 18px; text-align: center; font-size: 13px; font-weight: 600; }
.qty-stepper-full { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1.5px solid var(--ink); border-radius: 100px; padding: 6px; }
.qty-stepper-full button { width: 40px; height: 40px; border: none; background: var(--card); border-radius: 50%; font-size: 18px; }
.qty-stepper-full span { font-size: 13.5px; font-weight: 600; }

/* ---------- overlay / modal ---------- */
.overlay-bg { position: fixed; inset: 0; background: rgba(23,24,28,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 90; }
.overlay-bg.open { opacity: 1; pointer-events: auto; }
.modal-wrap { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; padding: 20px; background: rgba(23,24,28,.4); }
.modal-wrap.open { opacity: 1; pointer-events: auto; }
.modal-box { background: var(--paper); border-radius: 20px; max-width: 480px; width: 100%; padding: 28px; position: relative; }
.modal-close { position: absolute; top: 18px; right: 18px; background: var(--card); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; color: var(--muted); }
.modal-thumb { background: var(--card); border-radius: 14px; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.modal-box h2 { font-size: 22px; margin-bottom: 10px; }
.modal-box h3 { font-size: 16px; margin-bottom: 16px; }
.modal-box .desc { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }
.modal-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-price-row .price { font-family: 'Unbounded', sans-serif; font-size: 22px; }
.modal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.modal-grid button { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.modal-grid .mi-name { font-size: 11px; color: var(--muted); text-align: center; }
.modal-grid .mi-price { font-size: 10.5px; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 100px; font-size: 13.5px; font-weight: 600; z-index: 200; opacity: 0; transition: all .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- section head + "related items" tiles (используется на нескольких страницах) ---------- */
.section-head { margin-bottom: 32px; }
.section-head h2 { font-size: 24px; font-weight: 600; }

.related { padding-bottom: 96px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.related-card { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 20px; text-align: center; transition: transform .1s ease, border-color .2s ease; will-change: transform; display: block; }
.related-card:hover { border-color: #d5d1c5; }
.related-card:active { transform: scale(.97); }
.related-card.in-focus { transform: scale(1.02); border-color: var(--orange); }
.related-card .ph-icon { width: 36px; height: 36px; border: 2px solid var(--muted); border-radius: 8px; margin: 0 auto 14px; }
.related-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.related-card p { font-size: 12px; color: var(--muted); }
.related-card .rc-badge { display: inline-block; font-size: 10.5px; color: var(--orange-dark); background: #fff0e8; padding: 3px 9px; border-radius: 100px; margin-bottom: 8px; }

/* Превью товара в карточках-сетках (core/gallery.js:productPreview) — фото
   заполняет контейнер; contain-фото (прозрачные PNG) лежат на фоне --card. */
.preview-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rc-thumb { position: relative; height: 96px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; background: var(--card); }

/* ---------- панель: цвет + текстура печати ----------
   Единый рендер панели ВЕЗДЕ (большое превью, свотчи, конструктор, корзина).
   Слой цвета (--panel-color) + поверх текстура реального рельефа FDM-печати
   (нейтральна на сером 128, поэтому цвет не искажает — меняет только рельеф) +
   мягкий вертикальный градиент освещения ±6%. Матовость: без бликов/глянца.
   Сила зерна и режим наложения — переменные из tokens.css (один рубильник).
   Текстура тайлится в РЕАЛЬНОМ пиксельном размере (172px), без background-size —
   так подобран масштаб зерна, не растягиваем. Дубль правил — в admin.css
   (админка не подключает components.css). */
.panel-surface {
  position: relative; overflow: hidden;
  background-color: var(--panel-color, #ccc);
  /* мягкий вертикальный градиент освещения ±6% (сверху светлее) — на самом
     элементе, чтобы оба псевдо-слоя освободить под текстуру. */
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.06));
}
/* Слой 1 — нейтральная текстура рельефа: blend overlay/soft-light сохраняет цвет
   (нейтральна на сером 128), хорошо видна на средних и тёмных цветах. */
.panel-surface::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('../media/panel-texture.webp?v=67');
  background-repeat: repeat;
  mix-blend-mode: var(--panel-blend, soft-light);
  opacity: var(--panel-grain, 0.5);
  pointer-events: none;
}
/* Слой 2 — «буквальное» зерно (normal, малая непрозрачность): гарантирует, что
   рельеф виден и на очень светлых цветах (там overlay/soft-light почти не даёт
   контраста). Непрозрачность привязана к тому же рубильнику через calc, чтобы
   параметр силы зерна оставался ОДНИМ (--panel-grain в tokens.css). */
.panel-surface::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('../media/panel-texture.webp?v=67');
  background-repeat: repeat;
  mix-blend-mode: normal;
  opacity: calc(var(--panel-grain, 0.5) * 0.22);
  pointer-events: none;
}

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 40px 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; gap: 12px; }
.footer-links { display: flex; gap: 26px; }
/* Единый расширенный подвал: реквизиты продавца + контакты + документы + условия
   возврата (152-ФЗ / ЗоЗПП — юр-обвязка перед запуском). */
.footer-inner { display: flex; flex-direction: column; gap: 20px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.footer-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }
.footer-col a { font-size: 13.5px; color: var(--ink); }
.footer-col a:hover { color: var(--orange-dark); }
.footer-brand { font-size: 14px; font-weight: 600; color: var(--ink); }
.footer-legal { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.footer-returns { font-size: 12px; line-height: 1.55; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin: 0; }
@media (max-width: 640px) { .footer-cols { gap: 22px 32px; } }

@media (max-width: 860px) {
  .modal-grid { grid-template-columns: repeat(3,1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* mobile-instructions: карточки с текстом (h4+p) слишком узкие в 2 колонки
   на телефоне — текст рвётся. Схлопываем в одну, как .details-grid. */
@media (max-width: 640px) {
  .related-grid { grid-template-columns: 1fr; }
}