/* =========================================================================
   TRAKTPARTS — фирменный красный + улучшенная анимация.
   Подключается ПОСЛЕДНИМ (после style.css и reference-design.css).
   Ничего не удаляет из дизайн-системы: только цвета, тени и движение.
   ========================================================================= */

:root {
  --graphite: #1c1e21;
  --graphite-2: #26292d;
  --graphite-3: #33373c;
  --steel: #4a4f56;
  --on-dark: #ecedee;
  --on-dark-muted: #9fa3a9;
  --red: #c8101e;
  --red-hover: #a50d18;
  --red-on-dark: #ff4b57;           /* красный для текста на графите — читаемый */
  --ink: #202126;

  /* движение */
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .18s;
  --t-mid: .32s;
  --t-slow: .6s;
  --shadow-sm: 0 2px 6px -2px rgb(28 30 33 / .12);
  --shadow-md: 0 14px 34px -14px rgb(28 30 33 / .32);
  --shadow-red: 0 10px 24px -10px rgb(200 16 30 / .55);
}

/* ---------- Шапка: фирменный красный ---------- */
.masthead { transition: box-shadow var(--t-mid) var(--ease-out), padding var(--t-mid) var(--ease-out); }
.catalog-trigger {
  border-color: rgb(255 255 255 / .22);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.catalog-trigger:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .45); }
.catalog-trigger:active { transform: scale(.97); }

.search { transition: box-shadow var(--t-mid) var(--ease-out); }
.search:focus-within { box-shadow: 0 0 0 3px rgb(255 255 255 / .55); }
.search button { transition: background var(--t-fast) var(--ease-out), color var(--t-fast), transform var(--t-mid) var(--ease-spring); }
.search button:hover { background: var(--red); color: #fff; transform: translateX(2px); }

.header-action { transition: color var(--t-fast) var(--ease-out); }
.header-action:hover { opacity: .8; }
.header-action b.bump { animation: tp-bump .5s var(--ease-spring); }

.topline a { transition: opacity var(--t-fast); }
.topline a:hover { opacity: .75; }

.subnav a { position: relative; transition: color var(--t-fast); }
.subnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease-out);
}
.subnav a:hover::after { transform: scaleX(1); }

/* ---------- Кнопки ---------- */
.btn {
  transition: background var(--t-fast) var(--ease-out), transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out), color var(--t-fast);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-red); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .08s; }
.btn .icon { transition: transform var(--t-mid) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn.secondary:hover, .btn.white:hover { box-shadow: var(--shadow-sm); }
.btn.secondary:hover { background: #e7e8ea; }
.btn.dark { background: var(--ink); }
.btn.dark:hover { background: #383b43; box-shadow: var(--shadow-md); }
.text-link .icon { transition: transform var(--t-mid) var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }

/* ---------- Переключатель легковые/грузовые ---------- */
.segment-switch button, .segment-switch a {
  transition: background var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
.segment-switch button:not([aria-pressed="true"]):hover,
.segment-switch a:not(.active):hover { color: var(--ink); }


/* ---------- Категории ---------- */
.category {
  border: 1px solid transparent;
  transition: background var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid);
}
.category:hover { background: #fff; border-color: var(--line); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-symbol { transition: background var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out); }
.category:hover .category-symbol { background: var(--red); color: #fff; }
.category-arrow { transition: transform var(--t-mid) var(--ease-out), color var(--t-fast); }
.category:hover .category-arrow { transform: translateX(4px); color: var(--red); }

/* ---------- Карточки товаров ---------- */
.product-card {
  background: #fff;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d6d8dc; }
.product-image { overflow: hidden; }
.product-image img { transition: transform var(--t-slow) var(--ease-out); }
.product-card:hover .product-image img { transform: scale(1.045); }
.product-card h3 a { transition: color var(--t-fast); }
.product-buy b { color: var(--ink); }
.availability.in-stock { color: #17713a; background: #e6f3ea; }
.availability.in-stock::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: middle;
  animation: tp-pulse 2.4s var(--ease-out) infinite;
}


/* Пагинация (дополняет стили из catalog-additions) */
.pager a { transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-mid) var(--ease-out); }
.pager a:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.pager .pager-current { background: var(--red); }

/* Фильтры */
.filter-category, .check { transition: color var(--t-fast); }
.filter-category:hover { color: var(--red); }
.results-toolbar select { transition: box-shadow var(--t-fast); }
.results-toolbar select:hover { box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Диалог каталога ---------- */
dialog[open] { animation: tp-dialog-in var(--t-mid) var(--ease-out); }
dialog::backdrop { background: rgb(20 22 25 / .55); backdrop-filter: blur(6px); }
dialog[open]::backdrop { animation: tp-fade var(--t-mid) var(--ease-out); }
.dialog-segment { transition: background var(--t-fast), transform var(--t-mid) var(--ease-out); }
.dialog-segment:hover { background: #ebebea; transform: translateX(2px); }
.dialog-category { transition: background var(--t-fast), color var(--t-fast), padding var(--t-mid) var(--ease-out); }
.dialog-category:hover { background: var(--paper); color: var(--red); padding-left: 16px; }

/* ---------- Тост ---------- */
#toast {
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-spring);
}

/* ---------- Футер ---------- */
.footer-inner a { transition: color var(--t-fast), transform var(--t-mid) var(--ease-out); }
.footer-inner a:hover { transform: translateX(2px); }

/* ---------- Появление при прокрутке ---------- */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}
.rv.rv-in { opacity: 1; transform: none; }
/* после появления — обычные hover-переходы без задержки */
.rv.rv-done { transition-delay: 0ms; }

/* ---------- Ключевые кадры ---------- */
@keyframes tp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tp-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes tp-bump { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } }
@keyframes tp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- Уважение к настройке «уменьшить движение» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* ---------- Логотип крупнее ---------- */
.logo { width: 196px; border-radius: 22px; box-shadow: none; transition: transform var(--t-mid) var(--ease-out); }
.logo img { width: 180px; height: 110px; }
.logo:hover { transform: translateY(-1px); box-shadow: none; }
@media (max-width: 800px) {
  .logo { width: 156px; }
  .logo img { width: 142px; height: 88px; }
}
@media (max-width: 520px) {
  .logo { width: 124px; border-radius: 16px; }
  .logo img { width: 110px; height: 70px; }
}

/* ---------- Логотип в футере (как в шапке) ---------- */
.footer-logo { display: inline-block; width: 158px; background: #fff; border-radius: 20px; overflow: hidden; padding: 0 7px; transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out); }
.footer-logo img { display: block; width: 144px; height: 88px; object-fit: contain; }
.footer-inner a.footer-logo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); }
@media (max-width: 520px) {
  .footer-logo { width: 130px; border-radius: 16px; }
  .footer-logo img { width: 116px; height: 74px; }
}

/* Логотип в футере — без белой плашки */
.footer-logo { background: none; padding: 0; border-radius: 0; overflow: visible; width: auto; }
.footer-logo img { width: 170px; height: 104px; object-position: left center; }
.footer-inner a.footer-logo:hover { box-shadow: none; transform: translateY(-2px); }
@media (max-width: 520px) { .footer-logo img { width: 136px; height: 84px; } }

/* ---------- Каталог: иерархия, чипы, ссылки фильтров ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--paper);
  font-size: .875rem; font-weight: 500; transition: background var(--t-fast), color var(--t-fast), transform var(--t-mid) var(--ease-out); }
.chip span { color: var(--muted); font-weight: 400; font-size: .8125rem; }
.chip:hover { background: var(--red); color: #fff; transform: translateY(-1px); }
.chip:hover span { color: rgb(255 255 255 / .75); }
.filter-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.filter-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 -12px;
  border-radius: 10px; font-size: .9375rem; transition: background var(--t-fast), color var(--t-fast); }
.filter-link span { color: var(--muted); font-size: .8125rem; }
.filter-link:hover { background: var(--paper); color: var(--red); }
.filter-link.active { background: var(--red); color: #fff; }
.filter-link.active span { color: rgb(255 255 255 / .75); }
.filters h3 { margin-top: 4px; }
.dialog-category span.muted { margin-left: auto; margin-right: 6px; }
.dialog-empty { padding: 6px 12px; }
.dialog-empty a { color: var(--red); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- Карточка товара: галерея, характеристики ---------- */
.detail-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.detail-image.has-photo { background: #fff; border: 1px solid var(--line); }
.detail-image.has-photo img { width: 100%; height: 100%; max-height: 460px; object-fit: contain; animation: tp-fade var(--t-mid) var(--ease-out); }
.detail-thumbs { display: flex; gap: 10px; }
.detail-thumbs button { width: 84px; height: 84px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  transition: border-color var(--t-fast), transform var(--t-mid) var(--ease-out); }
.detail-thumbs button:hover { transform: translateY(-2px); }
.detail-thumbs button[aria-pressed="true"] { border-color: var(--red); }
.detail-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.detail-description h3 { margin-top: 26px; }
.purchase-panel .actions .btn.secondary { min-height: 50px; }
.product-image img[src^="/images/"] { object-fit: contain; background: #fff; }

/* ---------- Форма: поле-ловушка для ботов (скрыто от людей) ---------- */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Серверная версия страницы (до загрузки скрипта) ---------- */
.ssr { padding-top: 24px; min-height: 50vh; }
.ssr h1 { margin-top: 12px; }

/* ---------- Первый экран: три быстрых действия ---------- */
.quick-actions { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin: 14px 0 6px; }
.qa-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border-radius: 28px; padding: 26px 26px 24px;
  border: 1px solid transparent; transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), background var(--t-mid), border-color var(--t-mid); }
a.qa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background: #fff; border-color: var(--line); }
.qa-num { font-size: .75rem; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
.qa-card h2 { font-size: 1.35rem; margin-bottom: 8px; letter-spacing: -.03em; }
.qa-card p { font-size: .875rem; color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
.qa-card .text-link { margin-top: auto; color: var(--red); }
.qa-field { display: flex; gap: 8px; margin-top: auto; background: #fff; border-radius: 999px; padding: 6px 6px 6px 18px; border: 1px solid var(--line);
  transition: border-color var(--t-fast), box-shadow var(--t-mid) var(--ease-out); }
.qa-field:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgb(200 16 30 / .15); }
.qa-field input { flex: 1; min-width: 0; border: 0; background: none; font-size: .9375rem; outline: none; }
.qa-field .btn { min-height: 42px; padding: 8px 16px; }
.qa-field .btn .icon { width: 17px; height: 17px; }
.qa-accent { background: var(--red); color: #fff; }
.qa-accent .qa-num, .qa-accent p { color: rgb(255 255 255 / .8); }
.qa-accent .text-link { color: #fff; }
a.qa-accent:hover { background: var(--red-hover); border-color: transparent; box-shadow: var(--shadow-red); }
@media (max-width: 1100px) { .quick-actions { grid-template-columns: 1fr 1fr; } .qa-search { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .quick-actions { grid-template-columns: 1fr; gap: 10px; }
  .qa-card { padding: 20px; border-radius: 22px; }
  .qa-card h2 { font-size: 1.15rem; }
  .qa-field .btn span { display: none; }
}

/* ---------- Меню под шапкой: разделы каталога, на телефоне — прокрутка вбок ---------- */
.subnav { gap: 14px; }
@media (max-width: 520px) {
  .subnav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav > a, .subnav > a:nth-child(3), .subnav > a:nth-child(4) { display: inline-block; white-space: nowrap; flex-shrink: 0; }
}

/* ---------- Каталог: фильтры закреплены при прокрутке (компьютер / планшет) ---------- */
@media (min-width: 801px) {
  .catalog-layout { align-items: start; }
  .catalog-layout > .filters {
    position: sticky;
    top: var(--sticky-offset, 24px);
    max-height: calc(100vh - var(--sticky-offset, 24px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -12px; padding: 0 12px 12px;   /* место для подсветки активного пункта */
    scrollbar-width: thin;
    scrollbar-color: #d5d7db transparent;
    transition: top var(--t-mid) var(--ease-out);
  }
  .catalog-layout > .filters::-webkit-scrollbar { width: 6px; }
  .catalog-layout > .filters::-webkit-scrollbar-thumb { background: #d5d7db; border-radius: 6px; }
}

/* ---------- Контакты: реквизиты компании ---------- */
.requisites{max-width:none;margin:56px 0 72px;background:var(--paper);border-radius:28px;padding:34px}
.req-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.req-head .eyebrow{display:block;margin-bottom:8px}
.req-head h2{margin:0;font-size:1.75rem;letter-spacing:-.03em}
.req-copy{flex-shrink:0}
.req-copy.done{background:#1f7a3a}
.req-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.req-card{background:#fff;border-radius:20px;padding:24px 24px 8px;border:1px solid var(--line)}
.req-card h3{margin:0 0 14px;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--red)}
.requisites .req-card dl{margin:0}
.requisites .req-card dl>div{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--line);border-bottom:0}
.requisites .req-card dl>div:first-child{border-top:0;padding-top:0}
.req-card dt{font-size:.8125rem;color:var(--muted)}
.requisites .req-card dd{margin:0;text-align:left;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.req-card dd.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media(max-width:1000px){.req-grid{grid-template-columns:1fr 1fr}.req-card:last-child{grid-column:1/-1}}
@media(max-width:640px){.requisites{padding:22px 16px;border-radius:24px;margin:40px 0 56px}.req-head{flex-direction:column;align-items:stretch}.req-head h2{font-size:1.4rem}.req-copy{width:100%;justify-content:center}.req-grid{grid-template-columns:1fr}.req-card:last-child{grid-column:auto}.req-card{padding:20px 18px 6px}}

/* ---------- Правовые документы ---------- */
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--red)}
.legal-page .page-heading{margin-bottom:22px}
.legal-meta{font-size:.875rem!important;color:var(--muted)}
.legal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 34px}
.legal-tabs a{padding:10px 16px;border-radius:999px;background:var(--paper);font-size:.875rem;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background var(--t-fast,.15s)}
.legal-tabs a:hover{background:#e8e9eb}
.legal-tabs a[aria-current=page]{background:var(--red);color:#fff}
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;margin-bottom:72px}
.legal-toc{position:sticky;top:calc(var(--sticky-offset,24px) + 8px)}
.legal-toc details{background:var(--paper);border-radius:20px;padding:20px 22px}
.legal-toc summary{font-weight:600;cursor:pointer;list-style:none;font-size:.9375rem}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc ol{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;font-size:.875rem;line-height:1.35}
.legal-toc a{color:var(--muted);text-decoration:none}
.legal-toc a:hover{color:var(--red)}
.legal-doc{max-width:820px;min-width:0}
.legal-doc section{scroll-margin-top:calc(var(--sticky-offset,24px) + 16px);padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.legal-doc section:last-of-type{border-bottom:0}
.legal-doc h2{font-size:1.375rem;letter-spacing:-.02em;margin:0 0 14px;line-height:1.25}
.legal-doc h2 span{color:var(--red)}
.legal-doc p,.legal-doc li{color:#4b505a;line-height:1.75;font-size:.98rem}
.legal-doc p{margin:0 0 12px}
.legal-doc ul{margin:0 0 12px;padding-left:22px;display:grid;gap:6px}
.legal-doc a{color:var(--red);text-underline-offset:3px}
.legal-doc code{font-size:.85em;background:var(--paper);padding:2px 6px;border-radius:6px}
.table-wrap{overflow-x:auto;margin:6px 0 14px;border:1px solid var(--line);border-radius:16px}
.legal-doc table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.legal-doc th,.legal-doc td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);line-height:1.5}
.legal-doc th{background:var(--paper);font-weight:600;color:var(--ink)}
.legal-doc tr:last-child td{border-bottom:0}
.legal-req{display:grid;gap:0;margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.legal-req>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.legal-req>div:last-child{border-bottom:0}
.legal-req dt{color:var(--muted);font-size:.875rem}
.legal-req dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.legal-foot{font-size:.875rem!important;color:var(--muted)!important}
@media (max-width:900px){
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:56px}
  .legal-toc{position:static}
  .legal-toc details{padding:16px 18px}
  .legal-toc details:not([open]) summary::after,.legal-toc details[open] summary::after{content:'▾';float:right;color:var(--muted)}
  .legal-toc details[open] summary::after{content:'▴'}
  .legal-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 24px;padding:0 16px 4px;scrollbar-width:none}
  .legal-tabs::-webkit-scrollbar{display:none}
}
@media (max-width:520px){
  .legal-doc h2{font-size:1.2rem}
  .legal-doc p,.legal-doc li{font-size:.9375rem;line-height:1.65}
  .legal-req>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .legal-doc section{padding-bottom:22px;margin-bottom:22px}
}
@media print{
  .masthead,header,#footer,.legal-tabs,.legal-toc,.cookie-banner,.crumbs,.legal-foot button{display:none!important}
  .legal-layout{display:block}
  .legal-doc p,.legal-doc li{color:#000}
}

/* ---------- Футер: правовые ссылки ---------- */
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end}
.footer-legal a,.footer-legal .link-btn{color:inherit;font-size:inherit;text-decoration:none}
.footer-legal a:hover,.footer-legal .link-btn:hover{color:var(--red);text-decoration:underline}
@media (max-width:800px){.footer-bottom{flex-direction:column;align-items:flex-start}.footer-legal{justify-content:flex-start;gap:10px 16px}}

/* ---------- Баннер cookie ---------- */
.cookie-banner{position:fixed;z-index:60;left:24px;bottom:24px;max-width:460px;background:#fff;color:var(--ink);border-radius:22px;padding:20px 22px;box-shadow:0 18px 50px -12px rgb(0 0 0 / .28),0 0 0 1px rgb(0 0 0 / .05);animation:cookie-in .35s var(--ease-out,ease-out)}
.cookie-banner p{margin:0 0 14px;font-size:.875rem;line-height:1.55;color:#4b505a}
.cookie-banner a{color:var(--red)}
.cookie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.cookie-actions .btn{min-height:42px;padding:9px 18px;font-size:.875rem}
.cookie-actions .link-btn{font-size:.875rem;color:var(--muted)}
@keyframes cookie-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .cookie-banner{left:10px;right:10px;bottom:10px;max-width:none;padding:16px;border-radius:18px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .cookie-actions .btn{flex:1 1 auto}
  .cookie-actions .link-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cookie-banner{animation:none}}
.cookie-dialog{border:0;border-radius:24px;padding:26px;max-width:480px;width:calc(100% - 24px);box-shadow:0 30px 80px -20px rgb(0 0 0 / .4)}
.cookie-dialog::backdrop{background:rgb(20 21 26 / .45)}
.cookie-dialog h2{margin:0 0 16px;font-size:1.375rem}
.cookie-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.cookie-opt input{margin-top:4px;width:18px;height:18px;accent-color:var(--red);flex-shrink:0}
.cookie-opt b{display:block;font-size:.9375rem}
.cookie-opt small{display:block;color:var(--muted);font-size:.8125rem;line-height:1.5;margin-top:2px}
.cookie-dialog .cookie-actions{margin:14px 0 12px}
.cookie-dialog .small{font-size:.8125rem;color:var(--muted)}

/* ---------- Подвал на телефоне: крупнее и удобнее нажимать ---------- */
@media (max-width:600px){
  .footer-bottom{font-size:.8125rem;gap:14px;padding:22px 0 calc(22px + env(safe-area-inset-bottom))}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .footer-legal a,.footer-legal .link-btn{display:block;width:100%;text-align:left;padding:10px 0;border-top:1px solid #e1e2e6;font-size:.875rem;color:var(--ink)}
  .footer-legal .link-btn{color:var(--muted);text-decoration:none}
}
@media (max-width:600px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:26px 18px}
  .footer-inner>.footer-brand,.footer-inner>div:last-child{grid-column:1/-1}
  .footer-inner h3{font-size:.9375rem;margin:0 0 12px}
  .footer-inner a{font-size:.875rem;margin-bottom:0;padding:7px 0}
  .footer-inner p{font-size:.875rem}
  .footer-brand{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .footer-brand .footer-logo{grid-row:span 3}
  .footer-brand p{margin:0 0 4px}
  .footer-brand a:not(.footer-logo){padding:3px 0;font-weight:500;color:var(--ink)}
}

/* ---------- Мобильная шапка: «Каталог» слева, логотип по центру, «Избранное» справа ---------- */
@media (max-width:800px){
  .mainhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:10px}
  .mainhead>.catalog-trigger{grid-column:1;grid-row:1;justify-self:start;margin-left:0}
  .mainhead>.logo{grid-column:2;grid-row:1;justify-self:center}
  .mainhead>.header-action.basket{grid-column:3;grid-row:1;justify-self:end}
  .mainhead>.search{grid-column:1/-1;grid-row:2}
}
@media (max-width:350px){.catalog-trigger span{display:none}.catalog-trigger{width:46px;padding:0;justify-content:center}}

/* ---------- Слайдер на главной: телефон — картинка сверху, текст и кнопки снизу ---------- */
@media (max-width:700px){
  #main .hero-slide{min-height:0;display:flex;flex-direction:column;align-items:stretch}
  #main .hero-slide:after{display:none}
  #main .hero-slide .hero-art{position:relative;order:-1;inset:auto;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:68% center}
  #main .hero-slide .hero-copy{width:100%;padding:20px 20px 24px;transform:none}
  #main .hero-slide .eyebrow{display:block;font-size:.6875rem;line-height:1.4;margin-bottom:10px}
  #main .hero-slide h1,#main .hero-slide h2{font-size:clamp(1.6rem,7.4vw,2.05rem);line-height:1.08;letter-spacing:-.04em;margin:0 0 12px}
  #main .hero-slide p{font-size:.9375rem;line-height:1.5;margin:0 0 18px}
  #main .hero-slide .actions{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  #main .hero-slide .actions .btn{width:100%;justify-content:center;min-height:50px;font-size:.9375rem}
  #main .hero-slide .actions .text-link{display:flex;justify-content:center;margin:0;padding:10px;font-size:.9375rem}
  #main .hero-slides{border-radius:24px}
  .hero-controls{padding-top:12px}
}

/* ---------- Фильтры каталога ---------- */
.filters-head,.filters-foot,.filters-backdrop,.filters-open{display:none}
.filters-body{display:grid;gap:6px}
.fblock{border-bottom:1px solid var(--line);padding:4px 0 12px}
.fblock>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.9375rem;padding:10px 0;color:var(--ink)}
.fblock>summary::-webkit-details-marker{display:none}
.fblock>summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform var(--t-fast,.15s)}
.fblock[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.filters .fsearch{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;background:var(--paper);border-radius:999px;padding:0 14px;height:44px;border:0;margin-bottom:6px}
.fsearch .icon{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.fsearch input{border:0;background:none;width:100%;min-width:0;font:inherit;font-size:.875rem;outline:none}
.fchecks{display:grid;gap:2px}
.fcheck{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:.875rem}
.fcheck input{width:18px;height:18px;accent-color:var(--red);flex-shrink:0;margin:0}
.fcheck span{display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcheck em{font-style:normal;color:var(--muted);font-size:.8125rem}
.fcheck:hover span{color:var(--red)}
.fmore>summary{cursor:pointer;color:var(--red);font-size:.875rem;padding:6px 0;list-style:none}
.fmore>summary::-webkit-details-marker{display:none}
.fmore[open]>summary{display:none}
.filters .fprice{display:grid;background:none;padding:0;border-radius:0;flex-wrap:nowrap;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center}
.fprice input{width:100%;min-width:0;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:.875rem;background:#fff}
.fprice input:focus{border-color:var(--red);outline:none}
.fprice .btn.compact{min-height:44px;padding:0 14px}
.freset{font-size:.875rem;color:var(--red);text-decoration:none;font-weight:500}
.freset.wide{display:block;text-align:center;padding:12px;border-radius:999px;background:var(--paper);margin-top:6px}
.freset:hover{text-decoration:underline}
.filters .filter-help{margin-top:10px}
.results-toolbar{flex-wrap:wrap}
.results-count{margin-right:auto}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 20px;align-items:center}
.afilter{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 14px;border-radius:999px;background:#fdecee;color:var(--red);font-size:.8125rem;font-weight:500;text-decoration:none}
.afilter span{font-size:1.05rem;line-height:1}
.afilter:hover{background:#fbd9dd}
.afilter-reset{font-size:.8125rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;margin-left:4px}
.quick-groups{display:none}
.chip.active{background:var(--red);color:#fff}
.chip.active span{color:rgb(255 255 255 / .8)}

@media (max-width:800px){
  .catalog-layout{grid-template-columns:minmax(0,1fr)}
  .catalog-layout>*{min-width:0}
  .filters-open{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:.875rem;font-weight:500;cursor:pointer}
  .filters-open .icon{width:18px;height:18px}
  .filters-open b{background:var(--red);color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:.75rem;padding:0 6px}
  .results-toolbar{align-items:center;gap:10px}
  .results-count{order:3;width:100%;margin:0}
  .results-toolbar label{margin-left:auto}
  .quick-groups{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none}
  .quick-groups::-webkit-scrollbar{display:none}
  .quick-groups .chip{flex-shrink:0;white-space:nowrap}
  /* выезжающая снизу панель */
  .catalog-layout>.filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;max-height:88vh;margin:0;padding:0;background:#fff;border-radius:24px 24px 0 0;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .3s var(--ease-out,ease-out);box-shadow:0 -20px 60px -20px rgb(0 0 0 / .35);visibility:hidden}
  body.filters-open .catalog-layout>.filters{transform:none;visibility:visible}
  body.filters-open{overflow:hidden}
  .filters-backdrop{display:block;position:fixed;inset:0;z-index:79;background:rgb(20 21 26 / .45);opacity:0;pointer-events:none;transition:opacity .25s}
  body.filters-open .filters-backdrop{opacity:1;pointer-events:auto}
  .filters-head{display:flex;align-items:center;gap:14px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
  .filters-head b{font-size:1.125rem;margin-right:auto}
  .filters-x{border:0;background:var(--paper);width:36px;height:36px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}
  .filters-body{overflow-y:auto;padding:8px 20px 16px;overscroll-behavior:contain}
  .filters-foot{display:block;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .filters .filter-links{flex-direction:column;overflow:visible;margin:0;padding:0;gap:2px}
  .filters .filter-link{margin:0 -12px;padding:10px 12px;border-radius:12px;background:none;white-space:normal;font-size:.9375rem}
  .filters .filter-link.active{background:var(--red)}
  .filters .filter-help{display:none}
  .freset.wide{display:none}
}
@media (prefers-reduced-motion:reduce){.catalog-layout>.filters,.filters-backdrop{transition:none}}
@media (max-width:800px){
  .filters-head b{background:none;color:var(--ink);padding:0;border-radius:0;min-width:0;height:auto;font-size:1.125rem}
  .filters .filter-link{color:var(--ink)}
  .filters .filter-link span{color:var(--muted)}
  .filters .filter-link.active,.filters .filter-link.active span{color:#fff}
  .filters-foot .btn{width:100%;justify-content:center}
  .results-toolbar{flex-wrap:wrap}
  .results-toolbar label{font-size:0;gap:0}
  .results-toolbar label select{font-size:.875rem;margin:0;min-height:44px}
}
@media (max-width:800px){.filters .filters-foot .btn.full{width:100%;padding:12px 18px;min-height:50px}}
@media (max-width:800px){.catalog-layout>.filters{color:var(--ink)}.fcheck span{color:var(--ink)}}

/* ---------- iPhone не увеличивает страницу при вводе: поля не мельче 16px ---------- */
@media (max-width:800px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,
  .search input,#site-search,.fsearch input,.fprice input,.results-toolbar label select,.qty input,[data-quantity]{font-size:16px!important}
}

/* ---------- Сортировка: своя стрелка вместо системной ---------- */
.results-toolbar select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 44px 10px 18px;background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23202126' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px;cursor:pointer;line-height:1.3}
.results-toolbar select::-ms-expand{display:none}
@media (max-width:800px){.results-toolbar label select{padding:10px 40px 10px 16px;background-position:right 16px center}}

/* ---------- Товар без фото: размытый серый фон и надпись ---------- */
.no-photo{position:relative;overflow:hidden;width:100%;height:100%;min-height:150px;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:#e9eaec;isolation:isolate}
.no-photo::before{content:'';position:absolute;inset:-20%;z-index:-1;background:radial-gradient(circle at 28% 32%,#fafafb 0 18%,transparent 42%),radial-gradient(circle at 72% 68%,#cfd2d6 0 16%,transparent 44%),radial-gradient(circle at 70% 25%,#dfe1e4 0 12%,transparent 36%);filter:blur(22px)}
.no-photo span{font-size:.875rem;font-weight:500;color:#6b7078;background:rgb(255 255 255 / .6);padding:8px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.product-image .no-photo{aspect-ratio:4/3;min-height:0}
.detail-image .no-photo{min-height:340px}
.detail-image .no-photo span{font-size:1rem;padding:10px 18px}
@media (max-width:600px){.product-image .no-photo span{font-size:.6875rem;padding:6px 10px;white-space:nowrap}}