:root{
    --blue:#0090E7; --deep:#0A57A3; --night:#083A6E; --navy:#083A6E;
    --sky:#EAF5FE; --sky2:#D8EDFC; --ink:#12283D; --muted:#5B7288;
    --white:#FFFFFF; --hot:#FF8A00; --green:#1DB870; --red:#E5484D;
    --radius:18px; --shadow:0 10px 30px rgba(10,87,163,.10);
    --card-shadow-hover:0 20px 44px rgba(10,87,163,.18);
    --page-bg:var(--white); --header-bg:rgba(255,255,255,.82); --card-bg:#fff;
    /* Множитель скорости всех авто-движущихся элементов (лента брендов,
       холостое вращение витрины 360°) — настраивается в админке, «Внешний
       вид» → «Скорость анимаций». 1 = обычная (уже более медленная, чем
       была раньше), меньше 1 — медленнее, больше 1 — быстрее. */
    --motion-speed: 1;
  }
  html[data-theme="dark"]{
    --blue:#3FB4FF; --deep:#5BC4FF; --night:#EAF5FE;
    --sky:#152A40; --sky2:#1D3A56; --ink:#EAF2FA; --muted:#8FA7BE;
    --white:#0B1A2A; --shadow:0 10px 30px rgba(0,0,0,.35);
    --card-shadow-hover:0 20px 44px rgba(0,0,0,.5);
    --page-bg:#0B1A2A; --header-bg:rgba(15,35,56,.82); --card-bg:#122740;
  }
  html, body{background:var(--page-bg);transition:background .3s ease}
  /* .search убран из этого правила 27.07.2026: его переход всё равно
     задавался заново ниже, в блоке «СТРОКА ПОИСКА». */
  header{transition:background .3s ease, border-color .3s ease}
  header{background:var(--header-bg)!important}
  .card, .skel-card, .salon-card, .perk, .modal, .drawer{background:var(--card-bg)!important;transition:background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .25s}
  /* pp-price-block раньше попадал в это же правило и терял свой акцентный
     фон (var(--sky)) — становился белым на белой странице и выглядел как
     дыра в макете. Держим его отдельно, с собственным фоном под тему. */
  .pp-price-block{background:var(--sky)!important;transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
  .thumb, .pp-main-img, .dthumb{background:linear-gradient(145deg,var(--sky),var(--sky2))!important}
  .theme-toggle{background:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--muted);transition:.2s}
  .theme-toggle:hover{background:var(--sky);color:var(--deep)}
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Manrope',sans-serif;color:var(--ink);background:var(--white);line-height:1.55}
  /* Страховка от горизонтального переполнения: если какой-то блок случайно
     вылезет за край, страница не «уменьшится» и не поедет вбок (симптом,
     который был виден на телефонах при повороте экрана). clip, а не hidden —
     hidden создал бы скролл-контейнер и сломал position:sticky у шапки. */
  html,body{overflow-x:clip}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none}
  input,textarea{font-family:inherit;font-size:14.5px;padding:11px 13px;border:1.5px solid var(--sky2);border-radius:11px;width:100%;outline:none}
  input:focus,textarea:focus{border-color:var(--blue)}
  .wrap{max-width:1200px;margin:0 auto;padding:0 20px}

  /* Верхняя строка (город/ссылки/телефон) удалена 27.07.2026 вместе со всем
     своим оформлением: .topbar, .city*, .topbar .links, #topPhone.
     Разметки для них на витрине больше нет. Класс .topbar остаётся живым в
     админке (public/admin.v3.css) — это другой элемент, его не трогали. */

  header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);box-shadow:0 2px 20px rgba(10,87,163,.10);transition:box-shadow .3s ease}
  .head{display:flex;align-items:center;gap:24px;height:76px;transition:height .25s ease}
  :root{--brand-red:#E3252C;--brand-red-deep:#B5161D;--brand-red-light:#F0353C}

  /* ══ ЛОГОТИП «7store» ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ ══════════════════════════
     Меняешь плашку «7» или надпись «store» — меняешь в этом блоке и
     больше нигде. Прежнее название магазина убрано 30.07.2026 (RB-01):
     оно не утверждено руководством. Сам вид логотипа не менялся — только
     текст внутри него, он живёт в public/index.html. Раньше вид логотипа был расписан в четырёх файлах
     (storefront.v3, design-lab.v1, design-lab-flagship.v2, mobile-layout.v2):
     размер задавался в одном, цвет в другом, скругление в третьем, а
     работали не первые попавшиеся значения, а последние по списку
     подключения. 27.07.2026 всё сведено сюда — вид не изменился ни на
     пиксель, значения взяты те же, что работали.

     Что осталось снаружи и почему: место логотипа в сетке шапки на
     телефоне (grid-column / grid-row) — это раскладка шапки, а не вид
     логотипа, и живёт в mobile-layout.v2.css рядом с остальной раскладкой.

     Цвета через var(--fl-signal) и var(--fl-ink) объявлены ниже по списку,
     в design-lab-flagship.v2.css. Так можно: браузер подставляет значение
     переменной в момент показа страницы, а не в момент чтения файла.
     --fl-ink разный в светлой и тёмной теме — поэтому надпись «store»
     читается в обеих без отдельной заплатки.

     За единственностью этого места следит test/css-layers.test.js.
     ═══════════════════════════════════════════════════════════════════ */
  .logo{display:flex;align-items:center;gap:9px;flex-shrink:0;transition:transform .2s ease}
  .logo:hover{transform:translateY(-1px)}
  .logo .mark{display:grid;place-items:center;min-width:48px;height:44px;padding:0 11px;border-radius:14px;background:var(--fl-signal);box-shadow:0 8px 22px rgba(240,68,82,.2);color:#fff;font-family:'Unbounded',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.08em;transition:font-size .25s ease,padding .25s ease,box-shadow .2s ease}
  .logo:hover .mark{box-shadow:0 6px 18px rgba(227,37,44,.42)}
  .logo .name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px;color:var(--fl-ink);letter-spacing:-.04em;transition:font-size .25s ease}
  /* Надпись «store» прячется на узких экранах, чтобы шапка не переносилась.
     Раньше это же самое было записано тремя правилами с разными границами
     (680, 1040 и «841…1220») в трёх файлах. Итог у них был один: ниже 1221px
     надпись скрыта. Здесь ровно тот же итог одной строкой. */
  @media(max-width:1220px){.logo .name{display:none}}
  /* Компактная шапка при прокрутке страницы (см. initHeaderScroll) — держит
     полезную площадь экрана, не убирая ни один элемент */
  body.scrolled-header header{box-shadow:0 10px 30px rgba(10,87,163,.16)}
  body.scrolled-header .head{height:62px}
  body.scrolled-header .logo .mark{font-size:18px;padding:5px 10px}
  body.scrolled-header .logo .name{font-size:14.5px}
  body.scrolled-header .theme-toggle{width:38px;height:38px}
  body.scrolled-header .hbtn{padding:6px 10px}
  /* ══ СТРОКА ПОИСКА ЗАДАЁТСЯ ТОЛЬКО ЗДЕСЬ ═════════════════════════════
     Меняешь вид поиска в шапке — меняешь в этом блоке и больше нигде.
     Раньше он был расписан в четырёх файлах (storefront.v3, design-lab.v1,
     design-lab-flagship.v2, mobile-layout.v2): рамку задавал один, цвет
     фона другой, скругление третий, а на телефоне всё переписывал
     четвёртый. Работали не первые попавшиеся значения, а последние по
     списку подключения. 27.07.2026 всё сведено сюда; значения взяты те же,
     что фактически работали, — вид не изменился.

     Что осталось снаружи и почему:
     • mobile-layout.v2.css — только МЕСТО и РАЗМЕР поиска в сетке шапки на
       телефоне (grid-column, grid-row, ширина, высота, отступы). Это
       раскладка шапки, а не вид поиска.
     • ui-tweaks.v1.css — одно правило «рамка фокуса невидимая», общее с
       выпадающим списком сортировки. Это осознанное решение владельца,
       а не дубль оформления; трогать его отдельно от сортировки нельзя.
     • Выпадающие подсказки (.search-suggest и .sg-*) — самостоятельный
       компонент из ~80 правил, он разбирается отдельным шагом. Ниже он
       оставлен как был.

     Цвета через var(--fl-*) и var(--dl-line) объявлены в файлах, которые
     подключаются позже. Так можно: браузер подставляет значение переменной
     в момент показа страницы, а не в момент чтения файла. Обе темы
     переключаются сами.

     За единственностью этого места следит test/search-single-source.test.js.
     ═══════════════════════════════════════════════════════════════════ */
  .search{flex:1;display:flex;position:relative;height:50px;overflow:visible;border:1px solid var(--fl-line);border-radius:15px;background:var(--fl-surface);box-shadow:var(--fl-shadow-1);transition:border .2s,box-shadow .2s}
  /* Кольцо подсветки при фокусе намеренно погашено в ui-tweaks.v1.css
     (общее правило с сортировкой). Здесь меняется только цвет рамки. */
  .search:focus-within{border-color:var(--fl-blue)}
  .search input{border:none;background:transparent;border-radius:0;min-width:0;padding-left:17px}
  .search button{background:var(--fl-navy);color:#fff;font-weight:700;font-size:15px;min-width:92px;margin:4px;border-radius:12px;padding:0 18px}
  .search button:hover{background:var(--fl-blue-strong)}
  /* Планшет: строка ниже, кнопка уже. */
  @media(max-width:840px){
    .search{height:46px}
    .search button{min-width:76px;padding-inline:13px}
  }
  .sg-quick-label{padding:12px 14px 2px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
  .sg-quick-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 14px}
  .sg-chip{background:var(--sky);color:var(--deep);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700;transition:background .15s,color .15s,transform .15s}
  .sg-chip:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
  .search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--card-bg);border-radius:14px;box-shadow:0 16px 40px rgba(10,87,163,.18);z-index:120;overflow:hidden;display:none;max-height:400px;overflow-y:auto}
  .search-suggest.on{display:block}
  .sg-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:background .15s}
  .sg-item:hover, .sg-item.hl{background:var(--sky)}
  .sg-thumb{width:40px;height:40px;border-radius:9px;background:linear-gradient(145deg,var(--sky),var(--sky2));display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;flex-shrink:0}
  .sg-thumb img{width:100%;height:100%;object-fit:contain}
  .sg-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sg-price{font-size:13px;font-weight:800;color:var(--night);flex-shrink:0}
  .sg-more{padding:11px 14px;text-align:center;font-size:13px;font-weight:700;color:var(--blue);cursor:pointer;border-top:1px solid var(--sky2)}
  .sg-more:hover{background:var(--sky)}
  .sg-empty{padding:16px;text-align:center;font-size:13px;color:var(--muted)}
  /* Правила поиска, стоявшие здесь, перенесены выше — в блок «СТРОКА
     ПОИСКА». Их значения всё равно не работали: их перебивали
     design-lab.v1.css и design-lab-flagship.v2.css. */
  /* Кластер иконок действий: тема/избранное/корзина в общей "таблетке",
     а не тремя отдельно висящими кнопками */
  .head-actions{display:flex;align-items:center;gap:2px;background:var(--sky);border-radius:20px;padding:4px;flex-shrink:0;transition:padding .25s ease}
  .head-actions .theme-toggle{background:transparent;width:40px;height:40px;transition:width .25s ease,height .25s ease,background .2s}
  .head-actions .theme-toggle:hover{background:var(--card-bg)}
  .head-actions .hbtn-divider{width:1px;align-self:stretch;margin:6px 3px;background:var(--sky2)}
  .hbtn{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;padding:8px 12px;border-radius:14px;font-size:12px;font-weight:600;color:var(--muted);position:relative;transition:.2s}
  .hbtn:hover{background:var(--card-bg);color:var(--deep)}
  .hbtn .ico{font-size:20px;line-height:1}
  .count{position:absolute;top:2px;right:6px;background:var(--brand-red);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;opacity:0;transform:scale(.5);transition:.25s}
  .count.on{opacity:1;transform:scale(1)}

  nav.cats{border-top:1px solid var(--sky2);position:relative;display:flex;align-items:stretch}
  /* min-width:0 обязателен: без него флекс-элемент раздувается до ширины
     содержимого (все 15 категорий уезжали за край окна, до x≈5094px, и
     overflow-x:auto не срабатывал — прокрутки не было). С ним строка держится
     в пределах шапки и реально прокручивается колесом/перетаскиванием/свайпом. */
  nav.cats .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1;min-width:0}
  nav.cats .wrap::-webkit-scrollbar{display:none}
  nav.cats a{padding:12px 16px;font-size:14.5px;font-weight:700;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent;transition:.2s;cursor:pointer}
  nav.cats a:hover{color:var(--blue);border-color:var(--blue)}
  .cats-fade{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:2;transition:opacity .2s;opacity:0}
  .cats-fade.on{opacity:1}
  .cats-fade.left{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
  .cats-fade.right{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
  html[data-theme="dark"] .cats-fade.left{background:linear-gradient(90deg,var(--night,#0B1622),rgba(11,22,34,0))}
  html[data-theme="dark"] .cats-fade.right{background:linear-gradient(270deg,var(--night,#0B1622),rgba(11,22,34,0))}
  /* Стрелок больше нет — строка категорий крутится вручную: перетаскиванием
     (как витрина 360°, но без авто-вращения — только когда сам тянешь)
     или колесом мыши. Курсор подсказывает, что можно тянуть. */
  #navCats{cursor:grab}
  #navCats.dragging{cursor:grabbing;scroll-behavior:auto}
  #navCats.dragging a{pointer-events:none}
  /* Гамбургер «Категории»: на узких экранах строка вмещает лишь пару пунктов,
     поэтому там показываем кнопку, открывающую панель со всеми категориями.
     На десктопе кнопка скрыта — хватает прокручиваемой строки. */
  .cats-burger{display:none;flex-shrink:0;align-items:center;gap:8px;padding:12px 14px;font-size:14.5px;font-weight:800;color:var(--deep);background:var(--sky);border-right:1px solid var(--sky2);white-space:nowrap;position:relative;z-index:3;cursor:pointer}
  .cats-burger:hover{color:var(--blue)}
  .cats-burger-ico{font-size:16px;line-height:1}
  /* Панель категорий — выезжает слева, поверх той же вуали, что корзина/избранное */
  .cats-drawer{position:fixed;top:0;left:-380px;width:86%;max-width:340px;height:100dvh;background:var(--card-bg);z-index:81;transition:left .3s;display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(8,58,110,.15)}
  .cats-drawer.on{left:0}
  .cats-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--sky2)}
  .cats-drawer-head h3{font-family:'Unbounded',sans-serif;font-size:17px;color:var(--night)}
  .cats-drawer-body{flex:1;overflow-y:auto;padding:6px 0}
  .cats-drawer-body a{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:15.5px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--sky2);cursor:pointer;transition:background .15s}
  .cats-drawer-body a:hover, .cats-drawer-body a:active{background:var(--sky);color:var(--blue)}
  @media(max-width:680px){
    .cats-burger{display:inline-flex}
  }

  #homeView{display:flex;flex-direction:column}
  .hero{background:linear-gradient(120deg,var(--deep) 0%,var(--blue) 60%,#3FB4FF 100%);color:#fff;overflow:hidden;position:relative}
  .hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:380px;position:relative;padding-top:40px;padding-bottom:40px}
  .hero h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(26px,4vw,44px);line-height:1.15;margin-bottom:16px;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(0,0,0,.15)}
  .hero p{font-size:17px;max-width:440px;color:#DFF1FF;margin-bottom:28px}
  .hero .cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--deep);font-weight:800;font-size:16px;padding:15px 30px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .2s}
  .hero .cta:hover{transform:translateY(-2px)}
  .plus7{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(120px,20vw,240px);line-height:.9;text-align:center;color:rgba(255,255,255,.16);user-select:none}

  /* ── Живые карточки товаров в шапке ── */
  .hero-side{position:relative;min-height:320px}
  /* Сплошной белый фон без blur: backdrop-filter на повёрнутых карточках даёт артефакты в Chrome */
  .hcard{position:absolute;background:#fff;border-radius:18px;padding:14px 14px 12px;width:172px;box-shadow:0 22px 50px rgba(0,0,0,.28);cursor:pointer;animation:hFloat1 5.5s ease-in-out infinite;transition:box-shadow .25s;z-index:1}
  .hcard:hover{box-shadow:0 30px 60px rgba(0,0,0,.4);z-index:3}
  .hcard .him{height:104px;display:flex;align-items:center;justify-content:center;font-size:52px;margin-bottom:8px}
  .hcard .him img{max-width:100%;max-height:100%;object-fit:contain}
  .hcard .ht{font-size:12px;font-weight:700;color:#12283D;line-height:1.3;height:31px;overflow:hidden;margin-bottom:5px}
  .hcard .hp{font-size:14px;font-weight:800;color:#0A57A3;font-family:'Manrope',sans-serif;letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
  .hcard .hold{font-size:11.5px;color:#5B7288;text-decoration:line-through;margin-left:5px;font-family:'Manrope',sans-serif}
  /* Плавание через transform (не margin): layout-анимация на повёрнутых карточках
     заставляла Chrome расслаивать фон и текст — цена «моргала» за краем */
  .hcard:nth-child(1){left:2%;top:24px;animation-name:hFloat1;animation-delay:0s}
  .hcard:nth-child(2){right:4%;top:-6px;animation-name:hFloat2;animation-delay:1.4s}
  .hcard:nth-child(3){left:33%;bottom:-8px;animation-name:hFloat3;animation-delay:2.6s;z-index:2}
  @keyframes hFloat1{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-13px)}}
  @keyframes hFloat2{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-13px)}}
  @keyframes hFloat3{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-13px)}}
  /* Карточки, настроенные вручную в админке («Внешний вид» → «Карточки в шапке»):
     позиция и угол приходят как --hc-x/--hc-y/--hc-rot/--hc-scale инлайн-стилем,
     плавание — через ту же transform-анимацию, но с переменными вместо жёстких чисел.
     Рамка чуть заметнее, чтобы карточки не сливались друг с другом при плотной раскладке. */
  #heroSide .hcard.is-custom{left:var(--hc-x,2%);top:var(--hc-y,24px);right:auto;bottom:auto;border:1.5px solid rgba(18,40,61,.10);animation-name:hFloatC;z-index:1}
  #heroSide .hcard.is-custom:hover{z-index:5}
  @keyframes hFloatC{0%,100%{transform:rotate(var(--hc-rot,0deg)) scale(var(--hc-scale,1)) translateY(0)}50%{transform:rotate(var(--hc-rot,0deg)) scale(var(--hc-scale,1)) translateY(-13px)}}
  .hero .ring{position:absolute;border:2px solid rgba(255,255,255,.15);border-radius:50%;pointer-events:none}
  .r1{width:520px;height:520px;top:-180px;right:-120px}
  .r2{width:340px;height:340px;top:-90px;right:-30px}
  .r3{width:180px;height:180px;top:-10px;right:50px}

  /* ── Живой градиент и плавный вход текста в шапке ── */
  .hero{background-size:180% 180%;animation:heroBg 16s ease-in-out infinite alternate}
  @keyframes heroBg{from{background-position:0% 0%}to{background-position:100% 100%}}

  /* ── «Живые» цветовые пятна и зерно в шапке (стиль 2026) ── */
  .hero .blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;will-change:transform}
  .blob1{width:440px;height:440px;background:rgba(240,53,60,.5);left:-130px;top:-150px;animation:blobDrift 19s ease-in-out infinite alternate}
  .blob2{width:380px;height:380px;background:rgba(63,180,255,.55);right:16%;bottom:-170px;animation:blobDrift 24s ease-in-out infinite alternate-reverse}
  .blob3{width:260px;height:260px;background:rgba(255,255,255,.18);left:38%;top:-90px;animation:blobDrift 28s ease-in-out infinite alternate}
  @keyframes blobDrift{to{transform:translate(70px,45px) scale(1.18)}}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  .hero .wrap{z-index:1}
  .hero-stats{display:flex;gap:30px;margin-top:28px;flex-wrap:wrap}
  .hero-stat b{font-family:'Unbounded',sans-serif;font-size:21px;display:block;letter-spacing:-.3px}
  .hero-stat span{font-size:12.5px;color:#CFE9FF}
  @media(max-width:680px){.hero-stats{gap:20px}.hero-stat b{font-size:17px}}

  /* ── Горизонтальные ленты секций (вместо сетки с «дырами») ── */
  .grid.hscroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--sky2) transparent}
  .grid.hscroll .card{flex:0 0 262px;scroll-snap-align:start}
  /* На телефоне в горизонтальной ленте видно две компактные карточки сразу
     (и краешек третьей — подсказка, что лента листается), а не одна крупная */
  @media(max-width:680px){.grid.hscroll .card{flex-basis:calc(50vw - 30px);min-width:148px;max-width:200px}}

  /* ── Финальный призыв перед подвалом ── */
  .cta-strip{background:linear-gradient(120deg,var(--deep),var(--blue));border-radius:22px;padding:30px 34px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
  .cta-strip::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;border:2px solid rgba(255,255,255,.16);right:-60px;top:-80px;pointer-events:none}
  .cta-strip b{font-family:'Unbounded',sans-serif;font-size:clamp(17px,2vw,23px);display:block;margin-bottom:6px;letter-spacing:-.3px}
  .cta-strip .sub{font-size:14px;color:#DFF1FF}
  .cta-actions{display:flex;gap:12px;flex-wrap:wrap}
  .cta-call{background:linear-gradient(135deg,var(--brand-red-light),var(--brand-red-deep));color:#fff;font-weight:800;font-size:15px;padding:14px 26px;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:transform .2s}
  .cta-call:hover{transform:translateY(-2px)}
  .cta-map2{background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:15px;padding:14px 26px;border-radius:14px;cursor:pointer;transition:background .2s}
  .cta-map2:hover{background:rgba(255,255,255,.24)}
  .hero h1{animation:heroIn .7s cubic-bezier(.22,.8,.32,1) both}
  .hero p{animation:heroIn .7s .12s cubic-bezier(.22,.8,.32,1) both}
  .hero .cta{animation:heroIn .7s .24s cubic-bezier(.22,.8,.32,1) both}
  @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

  /* ── Промо-баннеры под шапкой ── */
  .promos{padding:26px 0 0}
  .promo-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
  .promo{border-radius:18px;padding:20px 24px;color:#fff;position:relative;overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;justify-content:center;min-height:104px}
  .promo::after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;border:2px solid rgba(255,255,255,.18);right:-50px;top:-60px;pointer-events:none}
  .promo:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(8,58,110,.24)}
  .promo b{font-family:'Unbounded',sans-serif;font-size:16.5px;margin-bottom:6px;letter-spacing:-.2px}
  .promo span{font-size:13.5px;opacity:.92}
  .promo .parr{position:absolute;right:18px;bottom:12px;font-size:20px;opacity:.75;transition:transform .25s}
  .promo:hover .parr{transform:translateX(4px)}
  .promo-red{background:linear-gradient(120deg,var(--brand-red-light),var(--brand-red-deep))}
  .promo-blue{background:linear-gradient(120deg,var(--blue),var(--deep))}
  .promo-dark{background:linear-gradient(120deg,#1B4E85,#0B2C4E)}
  @media(max-width:960px){.promo-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:680px){.promo-grid{grid-template-columns:1fr}.promo{min-height:80px}}

  /* ── Бегущая строка брендов ── */
  .brands{overflow:hidden;padding:30px 0 0}
  /* Скорость настраивается в админке («Внешний вид» → «Скорость анимаций»,
     settings.motionSpeed, множитель к длительности цикла).
     --brands-shift и --brands-dur выставляет storefront.v3.js: сдвиг равен
     ширине ровно одной копии списка, поэтому шов не виден при любом числе
     слов. Значения по умолчанию (50% и 46s) — на случай, если скрипт не
     успел посчитать: тогда работает прежнее поведение с двумя копиями. */
  .brands-track{display:flex;gap:var(--brands-gap,58px);width:max-content;animation:brandsRun calc(var(--brands-dur,46s) / var(--motion-speed,1)) linear infinite}
  .brands-copy{display:flex;gap:var(--brands-gap,58px)}
  .brands:hover .brands-track{animation-play-state:paused}
  .brands span{font-family:'Unbounded',sans-serif;font-weight:700;font-size:25px;color:var(--sky2);white-space:nowrap}
  .brands .brands-item:focus-visible{outline:2px solid var(--blue,#0090E7);outline-offset:3px;border-radius:4px}
  @keyframes brandsRun{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--brands-shift,50%)))}}
  /* Кому анимация мешает — строка стоит, но остаётся читаемой и кликабельной */
  @media (prefers-reduced-motion:reduce){.brands-track{animation:none}}

  /* ── Выбор варианта модели (цвет, память) на странице товара ── */
  .pp-variants{display:grid;gap:10px;margin:14px 0 4px}
  .pp-vrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .pp-vlabel{font-size:13px;font-weight:700;color:var(--muted,#6B8AAA);min-width:86px}
  /* Недоступное сочетание видно, но нажать его нельзя: покупатель сразу
     понимает, что такого цвета или объёма нет, а не думает, что сайт сломан */
  .pp-chip.unavailable{opacity:.45;text-decoration:line-through;cursor:not-allowed}

  /* ── Заголовок секции скидок ── */
  .h2-sale::before{background:linear-gradient(180deg,var(--brand-red-light),var(--brand-red-deep))}

  /* ── Параллакс в шапке: кольца и карточки едут за курсором ── */
  .hero .ring{transition:transform .35s ease-out}
  .hero-side{transition:transform .35s ease-out}

  /* ── Световой блик на карточках, следует за курсором ── */
  .card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(0,144,231,.12),transparent 46%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:1}
  .card:hover::after{opacity:1}
  html[data-theme="dark"] .card::after{background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),rgba(120,200,255,.10),transparent 46%)}

  /* ── Конфетти при успешном заказе ── */
  .confetti{position:fixed;top:-14px;width:9px;height:14px;z-index:200;border-radius:2px;pointer-events:none;animation:confFall 2.3s ease-in forwards}
  @keyframes confFall{to{transform:translateY(105vh) rotate(720deg);opacity:.5}}

  /* ── Кнопка «Поделиться» на странице товара ── */
  .pp-share{flex:0 0 auto;background:var(--sky);color:var(--deep);font-weight:800;font-size:14.5px;padding:11px 16px;border-radius:12px;position:relative;overflow:hidden;transition:background .25s,color .25s,transform .2s}
  .pp-share:hover{background:var(--sky2)}
  /* Подтверждение после «Поделиться»: кнопка зеленеет, пружинит, вспышка-блик */
  .pp-share.shared{background:#1DB870;color:#fff;transform:translateY(-1px);animation:sharePop .42s cubic-bezier(.22,1.4,.4,1)}
  @keyframes sharePop{0%{transform:scale(.94)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
  .share-spark{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.6),transparent 62%);pointer-events:none;animation:shareSpark .6s ease-out forwards}
  @keyframes shareSpark{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.7)}}
  @media(max-width:680px){.pp-share{display:none}}

  /* ── 3D-карусель товаров ── */
  /* perspective теперь не фиксированный, а выставляется в JS под конкретный
     радиус кольца (см. render3dCarousel) - иначе при перспективном увеличении
     передняя карточка вырастала на 50-90% и обрезалась по высоте контейнером
     (сильнее всего страдал iPhone с более узким perspective:800px) */
  .c3d-stage{height:380px;display:flex;align-items:center;justify-content:center;overflow-x:visible;overflow-y:hidden}
  .c3d-ring{position:relative;width:190px;height:280px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;cursor:grab;touch-action:pan-y;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .c3d-ring.dragging{cursor:grabbing}
  .c3d-item{position:absolute;inset:0;background:var(--card-bg);border:1px solid var(--sky2);border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 34px rgba(10,87,163,.14);transition:opacity .1s linear}
  .c3d-item img{width:100%;height:150px;object-fit:contain;background:#fff;border-radius:10px;pointer-events:none}
  .c3d-item .t{font-size:12px;font-weight:700;line-height:1.3;height:32px;overflow:hidden;margin:9px 0 5px;text-align:center;color:var(--ink)}
  .c3d-item .p{font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;color:var(--night);font-variant-numeric:tabular-nums}
  .c3d-item .po{font-size:11px;color:var(--muted);text-decoration:line-through;font-family:'Manrope',sans-serif;margin-left:4px}
  .c3d-hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:6px}
  @media(max-width:680px){.c3d-stage{height:340px}}

  /* ── Наличие в салонах на странице товара ── */
  .pp-avail{margin-top:16px;border:1.5px solid var(--sky2);border-radius:14px;overflow:hidden}
  .avail-head{background:var(--sky);font-weight:800;font-size:13.5px;padding:10px 14px;color:var(--night)}
  .avail-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--sky2);font-size:13px;cursor:pointer;transition:background .15s}
  .avail-row:hover{background:var(--sky)}
  .avail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .avail-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
  .avail-dot.yes{background:var(--green)}
  .avail-dot.no{background:var(--red)}
  .avail-dot.ask{background:var(--hot)}
  .avail-st{font-weight:700;flex-shrink:0}
  .avail-st.yes{color:var(--green)}
  .avail-st.no{color:var(--muted)}
  .avail-st.ask{color:var(--hot)}

  /* ── Сравнение товаров ── */
  .cmp{position:absolute;top:52px;right:10px;z-index:2;background:#fff;border:1px solid var(--sky2);width:36px;height:36px;border-radius:50%;font-size:15px;display:flex;align-items:center;justify-content:center;color:#B7C7D6;transition:.2s}
  .cmp:hover{color:var(--blue);transform:scale(1.1)}
  .cmp.on{color:#fff;background:var(--blue);border-color:var(--blue)}
  html[data-theme="dark"] .cmp,html[data-theme="dark"] .fav{background:#1D3A56;border-color:#2A4E70}
  #cmpBar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(90px);background:var(--navy);color:#fff;border-radius:999px;padding:9px 9px 9px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 34px rgba(0,0,0,.32);z-index:75;transition:.3s;opacity:0;font-weight:700;font-size:14px}
  #cmpBar.on{transform:translateX(-50%);opacity:1}
  #cmpBar .go{background:var(--blue);color:#fff;font-weight:800;font-size:13.5px;padding:9px 18px;border-radius:999px}
  #cmpBar .go:hover{background:#0f7fc7}
  #cmpBar .clr{background:rgba(255,255,255,.14);color:#fff;width:32px;height:32px;border-radius:50%}
  /* На мобильном плашка сравнения стояла у самого низа и налезала на кнопку
     чата (её ✕ оказывался под FAB) и на кнопки карточек. Поднимаем над
     кнопкой чата и ограничиваем ширину, чтобы правый край не доставал до FAB. */
  @media(max-width:680px){
    #cmpBar{bottom:84px;max-width:calc(100vw - 88px);padding:8px 8px 8px 16px;gap:8px;font-size:13.5px}
    #cmpBar .go{padding:8px 14px}
    /* нижний отступ, чтобы плашка сравнения не перекрывала кнопки карточек */
    body.has-cmpbar{padding-bottom:132px}
  }
  .cmp-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:14px;min-width:min-content;padding-bottom:6px}
  .cmp-col{border:1px solid var(--sky2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
  .cmp-ph{height:120px;background:#fff;border:1px solid var(--sky2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden}
  .cmp-ph img{width:100%;height:100%;object-fit:contain}
  .cmp-t{font-size:13px;font-weight:800;line-height:1.3;cursor:pointer;min-height:34px}
  .cmp-t:hover{color:var(--blue)}
  .cmp-p{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:var(--night);font-variant-numeric:tabular-nums}
  .cmp-p s{font-size:11px;color:var(--muted);font-family:'Manrope',sans-serif;margin-left:5px}
  .cmp-specs{list-style:none;font-size:12px;color:var(--muted);display:grid;gap:4px;flex:1}
  .cmp-specs li{border-top:1px dashed var(--sky2);padding-top:4px}
  .cmp-rm{background:none;color:var(--muted);font-size:12px;font-weight:600}
  .cmp-rm:hover{color:var(--red)}

  /* ── Голосовой поиск ── */
  .search #voiceBtn{background:transparent;color:var(--deep);font-size:17px;padding:0 10px;flex-shrink:0}
  .search #voiceBtn:hover{background:var(--sky2)}
  .search #voiceBtn.rec{color:var(--brand-red);animation:micPulse 1s ease-in-out infinite}
  @keyframes micPulse{50%{transform:scale(1.25)}}

  .chips{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 24px}
  .chip{background:var(--sky);color:var(--deep);font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;transition:.2s}
  .chip:hover{background:var(--sky2)}
  .chip.active{background:var(--blue);color:#fff}

  /* Якорные переходы: заголовки секций не прячутся под липкую шапку */
  section,.brands{scroll-margin-top:135px}
  section{padding:38px 0}
  h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,28px);color:var(--night);margin-bottom:22px;position:relative;padding-left:18px;letter-spacing:-.2px}
  h2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:4px;background:linear-gradient(180deg,var(--blue),var(--deep))}

  /* minmax(0,1fr) вместо 1fr: колонка 1fr не может стать уже своего
     содержимого (min-content), и одна карточка с длинной неразрывной строкой
     растягивала всю сетку за край экрана. minmax(0,...) разрешает сжатие. */
  .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .card{background:#fff;border:1px solid var(--sky2);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s, border-color .3s;position:relative;overflow:hidden}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--hot));opacity:0;transition:opacity .3s}
  .card:hover::before{opacity:1}
  .card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-6px);border-color:transparent}
  .badges{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:2}
  .badge{background:var(--hot);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px;box-shadow:0 4px 12px rgba(255,138,0,.35)}
  .badge.new{background:var(--blue);box-shadow:0 4px 12px rgba(0,144,231,.35)}
  .badge.sale{background:var(--red);box-shadow:0 4px 12px rgba(229,72,77,.35)}
  .fav{position:absolute;top:10px;right:10px;z-index:2;background:#fff;border:1px solid var(--sky2);width:36px;height:36px;border-radius:50%;font-size:17px;display:flex;align-items:center;justify-content:center;color:#B7C7D6;transition:.2s}
  .fav:hover{color:var(--red);border-color:#FAD4D6;transform:scale(1.1)}
  .fav.on{color:var(--red)}
  .thumb{height:150px;border-radius:14px;background:linear-gradient(145deg,var(--sky),var(--sky2));display:flex;align-items:center;justify-content:center;font-size:60px;margin-bottom:14px;overflow:hidden;cursor:pointer}
  .thumb img{width:100%;height:100%;object-fit:contain;transition:transform .4s ease}
  .card:hover .thumb img{transform:scale(1.08)}
  /* Фото обработаны «как у маркетплейсов» (белый квадрат) — под ними всегда белая подложка */
  .thumb.has-img,.dthumb.has-img,.sg-thumb.has-img,.pp-main-img.has-img{background:#fff!important}
  .price.disc,.pp-price.disc{color:var(--brand-red)}
  .card h3{font-size:15.5px;font-weight:800;line-height:1.35;margin-bottom:8px;min-height:42px;cursor:pointer}
  .card h3:hover{color:var(--blue)}
  /* Характеристики на карточке — теперь чипы (короткие плашки), а не список
     с точками: длинный текст аккуратно обрезается многоточием, не ломая карточку */
  .specs{list-style:none;font-size:12px;color:var(--muted);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px}
  .specs li{background:var(--sky);color:var(--night);padding:4px 10px;border-radius:8px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .specs li.mem-chip{background:transparent;border:1.5px solid var(--sky2);color:var(--deep)}
  html[data-theme="dark"] .specs li{background:var(--sky2)}

  /* ── Переключатель цвета/памяти на странице товара (реальные соседние
     товары в базе, не выдуманные варианты — переключение это переход
     на другую карточку того же семейства) ── */
  .pp-variants{margin:14px 0}
  .pp-variant-group{margin-bottom:14px}
  .pp-variant-label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:8px}
  .pp-swatches{display:flex;flex-wrap:wrap;gap:10px}
  .pp-swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--sky2);cursor:pointer;transition:.2s;position:relative;box-shadow:0 2px 8px rgba(10,87,163,.12)}
  .pp-swatch:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(10,87,163,.22)}
  .pp-swatch.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--sky)}
  .pp-chips{display:flex;flex-wrap:wrap;gap:8px}
  .pp-chip{background:var(--sky);color:var(--deep);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:11px;transition:.2s}
  .pp-chip:hover{background:var(--sky2)}
  .pp-chip.active{background:var(--blue);color:#fff}
  .price-row{margin-top:auto;display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
  .price{font-size:21px;font-weight:800;color:var(--night);font-family:'Manrope',sans-serif;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
  .old{font-size:14px;color:var(--muted);text-decoration:line-through}
  .buy{background:linear-gradient(135deg,var(--brand-red-light),var(--brand-red-deep));color:#fff;font-weight:800;font-size:14.5px;padding:11px;border-radius:12px;transition:.2s;width:100%;box-shadow:0 6px 18px rgba(227,37,44,.32)}
  .buy:hover{background:linear-gradient(135deg,#C92027,#8F1015);box-shadow:0 10px 24px rgba(227,37,44,.42);transform:translateY(-1px)}
  .buy.added{background:var(--green)}
  .empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:15px}
  .stock-line{font-size:12.5px;font-weight:700;margin:-4px 0 10px}
  .stock-line.oos{color:var(--red)}
  .stock-line.low{color:var(--hot)}
  .card.is-oos{opacity:.72}
  .buy:disabled{background:var(--sky2)!important;color:var(--muted)!important;cursor:not-allowed;box-shadow:none!important;transform:none!important}

  .section-sub{color:var(--muted);font-size:14.5px;margin:-14px 0 22px;max-width:560px}
  .catalog-cta-row{display:flex;justify-content:center;margin-top:8px}
  .catalog-cta{background:var(--sky);color:var(--deep);font-weight:800;font-size:15px;padding:14px 30px;border-radius:14px;display:inline-flex;align-items:center;gap:8px;transition:.2s}
  .catalog-cta:hover{background:var(--sky2);transform:translateY(-2px)}

  /* ── Полный каталог ── */
  .catalog-page{padding:30px 0 60px}
  .cat-page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
  .cat-page-head-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .cat-page-head-left .pp-back{margin-bottom:0}
  .cat-page-head-left h2{margin-bottom:0}
  .cat-page-head .catalog-toolbar{margin:0}
  /* ── «Сцена» категорий: активная — крупная карточка, остальные — мозаика ── */
  .cat-top-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  .cat-top-row .breadcrumb{margin-bottom:0}
  .cat-back-round{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--sky2);background:var(--sky);
    color:var(--blue);font-size:17px;cursor:pointer;transition:.2s;flex-shrink:0;padding:0}
  .cat-back-round:hover{border-color:var(--blue);transform:translateX(-2px)}
  .cat-title-bar{width:5px;height:30px;border-radius:3px;background:var(--brand-red);flex-shrink:0}
  .cat-count-badge{background:var(--sky);color:var(--deep);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
  .cat-stage{display:flex;gap:14px;align-items:stretch;margin:14px 0 4px}
  .cat-featured{flex:0 0 210px;background:linear-gradient(135deg,var(--brand-red-light),var(--brand-red-deep));
    border-radius:18px;padding:18px 16px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;
    animation:cfPop .35s ease;box-shadow:0 10px 24px rgba(227,37,44,.25)}
  @keyframes cfPop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
  .cf-icon{font-size:34px;line-height:1}
  .cf-icon .cat-img{width:46px;height:46px;object-fit:cover;border-radius:11px;display:block;background:#fff}
  .cf-name{font-size:19px;font-weight:800;line-height:1.2;margin-top:8px}
  .cf-count{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:3px}
  .cf-tag{font-size:11.5px;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 10px;margin-top:auto}
  .cf-chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 10px}
  .cf-chip{font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
    border-radius:999px;padding:3px 9px;cursor:pointer;transition:.15s}
  .cf-chip:hover{background:rgba(255,255,255,.3)}
  .cat-mosaic{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;align-content:start}
  .cat-tile{background:var(--sky);border:1.5px solid transparent;border-radius:12px;padding:10px 6px;cursor:pointer;
    transition:.18s;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
  .cat-tile:hover{transform:translateY(-3px);border-color:var(--blue);background:var(--sky2)}
  .ct-icon{font-size:20px;line-height:1}
  .ct-icon .cat-img{width:30px;height:30px;object-fit:cover;border-radius:8px;display:block}
  /* Маленькое фото категории вместо эмодзи в меню, панели категорий,
     подвале и чипах поиска (фото задаётся в админке: «Категории» → «📷 Фото») */
  .cat-ico-img{width:20px;height:20px;object-fit:cover;border-radius:6px;display:inline-block;vertical-align:-5px;background:#fff}
  .cats-drawer-body .cat-ico-img{width:26px;height:26px;border-radius:8px;vertical-align:middle}
  .sg-chip .cat-ico-img{width:18px;height:18px;vertical-align:-4px}
  footer .cat-ico-img{width:18px;height:18px;vertical-align:-4px}
  .ct-name{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.25}
  .ct-name b{color:var(--muted);font-weight:700;margin-left:2px}
  .cat-tile.empty{opacity:.45}
  @media(max-width:640px){
    .cat-stage{flex-direction:column}
    .cat-featured{flex:none;flex-direction:row;align-items:center;gap:10px;padding:12px 14px}
    .cf-name{margin-top:0}.cf-tag{margin:0 0 0 auto}
  }
  .catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 6px}
  .catalog-filters{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;
    background:var(--sky);border:1px solid var(--sky2);border-radius:14px;padding:10px 14px}
  .price-filter{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);font-weight:600;flex-wrap:wrap;row-gap:8px;min-width:0}
  .price-filter input{width:84px;padding:8px 10px;font-size:13.5px;border-radius:10px;background:var(--card-bg,#fff);color:var(--ink)}
  .btn-apply-price{background:var(--blue);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:10px;transition:.2s}
  .btn-apply-price:hover{background:var(--deep)}
  /* На узких экранах строка «Цена: от — до [Применить]» не влезала целиком
     и растягивала каталог за край (страница «уменьшалась» на телефоне).
     Поля цены сжимаются, кнопка при нехватке места переносится на свою строку. */
  @media(max-width:480px){
    .price-filter{width:100%}
    .price-filter input{width:0;flex:1 1 64px;min-width:56px}
    .btn-apply-price{flex:1 1 auto}
    .cf-divider{display:none}
  }
  .cf-divider{width:1px;height:22px;background:var(--sky2)}
  .stock-only-check{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
  .stock-only-check input{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:999px;
    background:var(--sky2);position:relative;transition:.2s;cursor:pointer;margin:0;border:none;flex-shrink:0}
  .stock-only-check input:checked{background:var(--blue)}
  .stock-only-check input::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
  .stock-only-check input:checked::after{left:18px}
  .cat-reset{margin-left:auto;background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;padding:4px 6px}
  .cat-reset:hover{color:var(--blue)}
  .catalog-count{font-size:13.5px;color:var(--muted)}
  .sort-select{width:auto;padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--deep);border-radius:11px;cursor:pointer;background:var(--sky)}
  .catalog-grid-wrap{min-height:200px}
  .pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:34px;flex-wrap:wrap}
  .pager button{width:38px;height:38px;border-radius:10px;background:var(--sky);color:var(--deep);font-weight:700;font-size:14px;transition:.2s}
  .pager button:hover:not(:disabled){background:var(--sky2)}
  .pager button.active{background:var(--blue);color:#fff}
  .pager button:disabled{opacity:.35;cursor:not-allowed}
  .pager .pg-dots{color:var(--muted);padding:0 4px}
  .pager .pg-arrow{padding:0 14px;width:auto}

  #scrollTopBtn{position:fixed;right:22px;bottom:88px;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;font-size:20px;box-shadow:0 10px 26px rgba(0,144,231,.35);z-index:70;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
  #scrollTopBtn.show{opacity:1;visibility:visible;transform:translateY(0)}
  #scrollTopBtn:hover{background:var(--deep);transform:translateY(-3px)}
  /* Пока раскрыто меню чата — прячем «наверх»: она в той же правой колонке,
     что и FAB, и накладывалась на пункты меню (перекрывала «Позвонить»). */
  #contactFab.open ~ #scrollTopBtn{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px)}
  @media(max-width:680px){#scrollTopBtn{right:16px;bottom:96px;width:42px;height:42px;font-size:18px}}

  .perks{background:var(--sky);position:relative;overflow:hidden}
  .perks .row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
  .perk{background:#fff;border-radius:var(--radius);padding:22px;display:flex;gap:14px;align-items:flex-start;transition:transform .3s cubic-bezier(.22,.8,.32,1),box-shadow .3s;position:relative;z-index:1}
  .perk:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover)}
  .perk .ico{font-size:26px;background:linear-gradient(145deg,var(--sky),var(--sky2));width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s cubic-bezier(.22,.8,.32,1)}
  .perk:hover .ico{transform:scale(1.12) rotate(-4deg)}
  .perk b{display:block;font-size:15px;margin-bottom:3px;color:var(--night)}
  .perk span{font-size:13px;color:var(--muted)}

  /* ── Kicker: маленькая цветная метка над заголовком секции ── */
  .kicker{display:inline-flex;align-items:center;gap:7px;font-family:'Unbounded',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-bottom:10px;padding-left:18px}
  .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-red)}
  html[data-theme="dark"] .kicker{color:var(--blue)}

  /* ── Aurora: мягкие цветные пятна атмосферы за секциями (без вреда для читаемости) ── */
  .aurora{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.35;z-index:0;will-change:transform}
  .aurora-red{background:rgba(240,53,60,.4)}
  .aurora-blue{background:rgba(0,144,231,.4)}
  html[data-theme="dark"] .aurora{opacity:.22}

  /* ── Мерцающий градиент финального CTA (перекликается с шапкой) ── */
  .cta-strip{background-size:200% 200%;animation:heroBg 14s ease-in-out infinite alternate}

  .map-layout{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
  .salon-list{display:grid;gap:12px;max-height:440px;overflow-y:auto;padding-right:4px}
  .salon-card{background:#fff;border:1.5px solid var(--sky2);border-radius:16px;padding:18px;cursor:pointer;transition:.2s}
  .salon-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}
  .salon-card.active{border-color:var(--blue);background:var(--sky)}
  .salon-card b{display:block;font-size:15px;color:var(--night);margin-bottom:6px}
  .salon-card .addr{font-size:13.5px;margin-bottom:4px;display:flex;align-items:center;gap:7px}
  .salon-card .hrs{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px}
  .salon-card .ln-ico{flex-shrink:0;display:inline-flex;align-items:center;color:var(--blue)}
  .salon-card .ln-ico .svg-ico{width:15px;height:15px}
  .map-frame{border-radius:20px;overflow:hidden;border:1.5px solid var(--sky2);height:440px;background:var(--sky)}
  .map-frame iframe{width:100%;height:100%;border:0;display:block}

  footer{background:var(--navy);color:#9EC9EC;margin-top:40px;font-size:14px}
  /* align-items:start вместо дефолтного stretch: раньше короткие колонки
     (описание, «Покупателям») растягивались по высоте самой длинной
     («Каталог», 15 пунктов) — получалась большая невидимая пустота под
     текстом. Плюс сам «Каталог» разбит на 2 колонки, чтобы не быть
     настолько выше остальных. */
  footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding:44px 0 30px;align-items:start}
  footer h4{color:#fff;font-size:15px;margin-bottom:12px;font-family:'Unbounded',sans-serif;font-weight:500}
  footer li{list-style:none;margin-bottom:8px;break-inside:avoid}
  footer #footCats{column-count:2;column-gap:20px}
  footer a{cursor:pointer}
  footer a:hover{color:#fff}
  footer .bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

  /* ── Панель корзины/избранного ── */

  /* Плавающая кнопка связи (Telegram / телефон) */
  #contactFab{position:fixed;right:22px;bottom:22px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  #fabMain{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;font-size:24px;color:#fff;background:linear-gradient(135deg,#F0353C,#B5161D);box-shadow:0 10px 26px rgba(240,53,60,.4);transition:transform .25s}
  #contactFab.open #fabMain{transform:rotate(90deg) scale(.95)}
  .fab-item{opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;display:flex;align-items:center;gap:8px;background:var(--card-bg,#fff);color:inherit;text-decoration:none;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(8,58,110,.2);white-space:nowrap}
  #contactFab.open .fab-item{opacity:1;visibility:visible;transform:none}
  .drawer-veil{position:fixed;inset:0;background:rgba(8,58,110,.45);opacity:0;pointer-events:none;transition:.25s;z-index:80}
  .drawer-veil.on{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:-440px;width:100%;max-width:420px;height:100dvh;background:#fff;z-index:81;transition:right .3s;display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(8,58,110,.15)}
  .drawer.on{right:0}
  .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--sky2)}
  .drawer-head h3{font-family:'Unbounded',sans-serif;font-size:17px;color:var(--night)}
  .x{background:var(--sky);width:36px;height:36px;border-radius:50%;font-size:16px;color:var(--deep)}
  .x:hover{background:var(--sky2)}
  .drawer-body{flex:1;overflow-y:auto;padding:16px 20px}
  .ditem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--sky)}
  .ditem .dthumb{width:62px;height:62px;border-radius:12px;background:linear-gradient(145deg,var(--sky),var(--sky2));display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;flex-shrink:0}
  .ditem .dthumb img{width:100%;height:100%;object-fit:contain}
  .ditem .dinfo{flex:1;min-width:0}
  .ditem .dtitle{font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:4px}
  .ditem .dprice{font-size:14.5px;font-weight:800;color:var(--night)}
  .qty{display:flex;align-items:center;gap:8px;margin-top:6px}
  .qty button{width:28px;height:28px;border-radius:8px;background:var(--sky);color:var(--deep);font-size:16px;font-weight:800}
  .qty button:hover{background:var(--sky2)}
  .qty span{font-weight:800;min-width:22px;text-align:center}
  .dremove{background:none;color:var(--muted);font-size:12.5px;font-weight:600;padding:0;margin-top:4px}
  .dremove:hover{color:var(--red)}
  .ditem-avail{font-size:12px;font-weight:700;margin-top:5px;display:inline-block;padding:2px 8px;border-radius:8px}
  .ditem-avail.yes{color:#0E7A4A;background:#E2F8EE}
  .ditem-avail.order{color:#B05E00;background:#FFF1E0}
  .ditem-avail.ask{color:var(--muted);background:var(--sky)}
  .ord-salon{width:100%;padding:10px 12px;border:1.5px solid var(--sky2);border-radius:12px;font:inherit;background:var(--card,#fff);color:inherit}
  .drawer-foot{border-top:1px solid var(--sky2);padding:16px 20px}
  .total-row{display:flex;justify-content:space-between;font-size:16px;margin-bottom:14px}
  .total-row b{font-size:20px;color:var(--night)}
  .field{margin-bottom:10px}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
  .submit{width:100%;background:linear-gradient(135deg,var(--brand-red-light),var(--brand-red-deep));color:#fff;font-weight:800;font-size:15.5px;padding:14px;border-radius:13px;transition:.2s;box-shadow:0 6px 18px rgba(227,37,44,.3)}
  .submit:hover{background:linear-gradient(135deg,#C92027,#8F1015);box-shadow:0 10px 24px rgba(227,37,44,.4);transform:translateY(-1px)}
  .submit:disabled{opacity:.6;cursor:wait}
  .form-err{color:var(--red);font-size:13px;font-weight:600;margin-top:8px;min-height:16px}
  .consent-check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);margin:10px 0;cursor:pointer;line-height:1.4}
  .consent-check input{width:auto;flex-shrink:0;margin-top:2px;accent-color:var(--blue);cursor:pointer}
  .consent-check a{color:var(--blue);font-weight:600}
  .success{text-align:center;padding:36px 10px}
  .success .big{font-size:52px;margin-bottom:12px}
  .success h4{font-size:18px;color:var(--night);margin-bottom:8px}
  .success p{font-size:14px;color:var(--muted)}
  .drawer .empty{padding:50px 10px;text-align:center}

  /* ── Модалка товара / инфо ── */
  .overlay{position:fixed;inset:0;background:rgba(8,58,110,.45);display:none;align-items:flex-start;justify-content:center;padding:30px 16px;z-index:90;overflow-y:auto}
  .overlay.on{display:flex}
  .modal{background:#fff;border-radius:20px;padding:26px;width:100%;max-width:720px;margin:auto 0;position:relative}
  .modal .x{position:absolute;top:16px;right:16px;z-index:2}
  .pbadge{display:inline-block;background:var(--hot);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px;margin-bottom:10px}
  .pbadge.new{background:var(--blue)}
  .oneclick{flex:1;min-width:150px;background:var(--sky);color:var(--deep);font-weight:800;font-size:14.5px;padding:11px;border-radius:12px}
  .oneclick:hover{background:var(--sky2)}
  .info-text{white-space:pre-line;font-size:15px;line-height:1.7;padding-right:20px}
  .modal h2{margin-bottom:14px;padding-right:36px}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;padding:13px 24px;border-radius:14px;font-weight:700;font-size:14.5px;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:.3s;z-index:100;opacity:0}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
  .toast.bad{background:var(--red)}

  /* ── Страница товара ── */
  .product-page{padding:30px 0 60px}
  .breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px;display:flex;gap:6px;flex-wrap:wrap}
  .breadcrumb a{color:var(--blue);font-weight:700;cursor:pointer}
  .breadcrumb a:hover{color:var(--deep)}
  .pp-layout{display:grid;grid-template-columns:440px minmax(0,1fr);gap:44px;margin-bottom:16px}
  .pp-gallery{position:sticky;top:130px;align-self:start;display:flex;flex-direction:column;gap:12px}
  .pp-main-img{background:linear-gradient(145deg,var(--sky),var(--sky2));border-radius:22px;height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:130px;position:relative}
  .pp-main-img img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .12s ease-out}
  @media(hover:hover){
    .pp-main-img.zoomable{cursor:zoom-in}
    .pp-main-img.zoomable img.zoomed{transform:scale(2);padding:0}
  }
  .pp-thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
  .pp-thumbs img{width:66px;height:66px;object-fit:cover;border-radius:13px;border:2px solid var(--sky2);cursor:pointer;flex-shrink:0;transition:.2s}
  .pp-thumbs img.active,.pp-thumbs img:hover{border-color:var(--blue)}
  .pp-info h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.25;color:var(--night);margin:10px 0 6px}
  .pp-model{font-size:13.5px;color:var(--muted);margin-bottom:6px}
  .pp-price-block{background:var(--sky);border-radius:20px;padding:24px;margin-top:18px}
  .pp-price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap;row-gap:4px}
  .pp-price{font-size:32px;font-weight:800;color:var(--night);font-family:'Manrope',sans-serif;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
  .pp-qty{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:18px;flex-wrap:wrap;row-gap:6px}
  .pp-actions{display:flex;gap:12px;flex-wrap:wrap}
  .pp-actions .buy{flex:1;min-width:170px;padding:15px}
  .pp-actions .oneclick{flex:1;min-width:170px;padding:15px}
  /* Раньше margin-top:18px был нужен внутри .pp-info; теперь блок живёт в
     .pp-gallery (flex, gap:12px уже даёт отступ) — оставляем только лёгкий
     разделитель сверху, чтобы не сливаться с миниатюрами фото. */
  .pp-mini-perks{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--sky2);font-size:13.5px;color:var(--muted)}
  .pp-tabs{display:flex;gap:4px;border-bottom:2px solid var(--sky2);margin:38px 0 22px;overflow-x:auto}
  .pp-tab-btn{background:none;padding:12px 18px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;transition:.2s}
  .pp-tab-btn:hover{color:var(--deep)}
  .pp-tab-btn.active{color:var(--blue);border-color:var(--blue)}
  .pp-tab-content{font-size:14.5px;line-height:1.75;color:var(--ink);max-width:760px}
  .pp-tab-content .pp-avail{margin-top:0}
  .spec-table{width:100%;border-collapse:collapse}
  .spec-table tr{border-bottom:1px solid var(--sky2)}
  .spec-table td{padding:11px 8px;font-size:14px}
  .spec-table td:first-child{color:var(--muted);width:44%}
  .spec-table td:last-child{font-weight:700;color:var(--night)}
  .spec-group{margin-bottom:26px}
  .spec-group:last-child{margin-bottom:0}
  .spec-group-title{font-size:13px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
  .pp-desc-block{margin-top:24px;padding-top:20px;border-top:1px solid var(--sky2)}
  .pp-desc-title{font-size:16px;font-weight:800;color:var(--night);margin-bottom:8px}
  .pp-kit-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .pp-kit-list li{position:relative;padding-left:22px}
  .pp-kit-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
  @media(max-width:520px){
    .spec-table td{padding:9px 4px;font-size:13.5px}
    .spec-table td:first-child{width:52%}
  }
  .pp-related{margin-top:54px}
  .pp-back{background:var(--sky);color:var(--deep);font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:12px;margin-bottom:20px;display:inline-flex;align-items:center;gap:6px}
  .pp-back:hover{background:var(--sky2)}
  @media(max-width:960px){
    /* minmax(0,1fr), а не 1fr: иначе строка цены/кнопок задавала колонке
       минимальную ширину ~485px и вся страница товара уезжала за край 360px-экрана */
    .pp-layout{grid-template-columns:minmax(0,1fr)}
    .pp-gallery{position:static}
    .pp-main-img{height:300px}
  }

  @media(max-width:960px){
    .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .perks .row{grid-template-columns:repeat(2,1fr)}
    .hero .wrap{grid-template-columns:1fr}
    .plus7,.hero-side{display:none}
    .map-layout{grid-template-columns:1fr}
    .salon-list{max-height:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
    .map-frame{height:360px}
  }
  @media(max-width:680px){
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    /* Компактные карточки: на телефоне в ряду 2 штуки шириной ~150-170px,
       поэтому всё внутри ужимается — меньше отступы, ниже фото, мельче
       шрифты. На экране помещается 2 карточки в ширину и ~2 ряда — то есть
       около 4 товаров без прокрутки вместо одного гиганта. */
    .card{padding:10px;border-radius:14px}
    .thumb{height:108px;font-size:44px;margin-bottom:8px;border-radius:10px}
    .card h3{font-size:12.5px;line-height:1.3;min-height:33px;margin-bottom:6px}
    .specs{font-size:10.5px;gap:4px;margin-bottom:8px}
    .specs li{padding:3px 7px;border-radius:6px}
    /* Третья и последующие плашки характеристик на телефоне не влезают —
       карточка вытягивалась в высоту. Показываем две, остальное — на странице товара. */
    .specs li:nth-child(n+3){display:none}
    .price-row{gap:6px;margin-bottom:8px}
    .price{font-size:16.5px}
    .old{font-size:12px}
    .stock-line{font-size:11px;margin:-2px 0 6px}
    .buy{font-size:12.5px;padding:9px 6px;border-radius:10px}
    .fav{width:30px;height:30px;font-size:14px;top:8px;right:8px}
    .cmp{width:30px;height:30px;font-size:13px;top:42px;right:8px}
    .badges{top:8px;left:8px;gap:4px}
    .badge{font-size:10.5px;padding:3px 7px;border-radius:6px}
    /* Шапка переносит поиск на отдельную строку во всю ширину: раньше поле
       было зажато между логотипом и иконками и схлопывалось до ~22px (виден
       был только значок микрофона). Теперь строка 1 — логотип + иконки,
       строка 2 — полноразмерный поиск. */
    .head{gap:8px;flex-wrap:wrap;height:auto;padding:8px 0;align-content:center}
    body.scrolled-header .head{height:auto}
    /* Логотип на телефоне: только вид значка. Его место в сетке шапки —
       в mobile-layout.v2.css. Надпись уже скрыта правилом до 1220px выше. */
    .logo .mark{width:44px;min-width:44px;height:40px;padding:0;border-radius:11px;box-shadow:none;font-size:17px}
    /* Поиск на телефоне: только ВИД. Место и размер в сетке шапки —
       в mobile-layout.v2.css. Рамка здесь другого цвета, чем на компьютере
       (--dl-line вместо --fl-line): так было и раньше, менять не стали.
       У поля отступ слева 17px, а не 11px — тоже как было. */
    .search{order:3;flex:1 1 100%;border:1px solid var(--dl-line);border-radius:12px;background:var(--card-bg);box-shadow:none}
    .search input{font-size:14px;padding:9px 11px 9px 17px}
    .hbtn span:not(.ico){display:none}
    .hbtn{padding:7px 10px}
    .hbtn .ico{font-size:18px}
    .head-actions{padding:3px;border-radius:16px}
    .theme-toggle{width:34px;height:34px;font-size:16px}
    .head-actions .theme-toggle{width:34px;height:34px}
    nav.cats a{padding:10px 13px;font-size:13.5px}
    .cats-burger{padding:10px 12px;font-size:13.5px}
    /* При прокрутке шапка сворачивается до одной строки: логотип прячется,
       поиск и иконки (тема/избранное/корзина) встают рядом. Экономит ~60px
       и без того небольшого экрана, а корзина остаётся под рукой. Наверху
       страницы всё возвращается как было. */
    body.scrolled-header .head{padding:8px 0}
    body.scrolled-header .head .logo{display:none}
    body.scrolled-header .search{order:0;flex:1 1 0;width:auto;min-width:0}
    body.scrolled-header .head-actions{order:1}
    /* Кнопка темы в свёрнутой строке лишняя — оставляем избранное и корзину,
       чтобы поиску хватило ширины и строка не переносилась. */
    body.scrolled-header .head-actions .theme-toggle,
    body.scrolled-header .head-actions .hbtn-divider{display:none}
    footer .cols{grid-template-columns:1fr 1fr}
    footer #footCats{column-count:1}
    /* padding у кнопки здесь не задаём: он приходит из блока «планшет»
       (0 13px) и на телефоне работал именно он. Прежнее `padding:0 16px`
       на странице не действовало никогда. */
    .search button{font-size:13.5px;border-radius:10px}
    .chip{padding:9px 15px;font-size:13.5px}

    /* Липкая панель покупки внизу экрана на странице товара */
    .product-page{padding-bottom:104px}
    .pp-price-block{margin-top:14px}
    .pp-actions{position:fixed;left:0;right:0;bottom:0;background:var(--card-bg);padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(10,87,163,.14);z-index:60;margin:0;border-radius:0;gap:10px}
    .pp-actions .buy, .pp-actions .oneclick{min-width:0;padding:14px 10px;font-size:14px}
  }
  @media(max-width:440px){
    /* Раньше на узких телефонах была одна огромная карточка на весь экран —
       теперь остаются те же 2 компактные колонки, что и до 680px. */
    .perks .row{grid-template-columns:1fr}
    .pp-actions{gap:8px}
    .pp-actions .buy, .pp-actions .oneclick{font-size:13px;padding:13px 6px}
  }
  /* Телефон в ландшафте (высота ≤520px): липкая шапка съедала бы почти
     половину экрана — отпускаем её, пусть уезжает вместе с прокруткой. */
  @media(max-height:520px) and (orientation:landscape){
    header{position:static}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ── Анимации ── */
  @keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
  .reveal{opacity:0}
  /* backwards (а не forwards): после анимации transform снимается,
     чтобы работал 3D-наклон карточек за курсором */
  .reveal.in{opacity:1;animation:cardIn .55s cubic-bezier(.22,.8,.32,1) backwards}
  /* .shown — мгновенное появление без анимации: для карточек, которые уже
     видны при открытии «страницы» SPA. Так нет ни белой вспышки во время
     перехода (View Transitions снимал бы кадр с opacity:0), ни полупрозрачных
     карточек при быстрой прокрутке. Анимируются только те, что появляются
     из-за края экрана при скролле. */
  .reveal.shown{opacity:1}

  @keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.9)}100%{transform:scale(1)}}
  .count.bump{animation:bump .38s ease}

  @keyframes modalPop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
  .overlay.on .modal{animation:modalPop .3s cubic-bezier(.22,.8,.32,1)}
  @keyframes overlayFade{from{opacity:0}to{opacity:1}}
  .overlay.on{animation:overlayFade .2s ease}

  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  .hero .ring{animation:floatY 7s ease-in-out infinite}
  .hero .r2{animation-duration:9s;animation-delay:.4s}
  .hero .r3{animation-duration:5.5s;animation-delay:.8s}

  button, .chip, .fav, .buy, .cta, .hbtn{transition:transform .15s ease, background .2s, color .2s, border-color .2s, box-shadow .2s}
  button:active, .chip:active, .buy:active, .cta:active{transform:scale(.96)}

  /* Полёт в корзину анимируется через Web Animations API (дуга + вращение),
     поэтому CSS-transition тут не нужен — только внешний вид «летящей» копии. */
  .fly-item{position:fixed;z-index:200;border-radius:14px;pointer-events:none;box-shadow:0 12px 30px rgba(10,87,163,.32);background-size:cover;background-position:center;will-change:transform,opacity;transform-origin:center center}

  @keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
  .skel{background:linear-gradient(90deg,var(--sky) 25%,var(--sky2) 37%,var(--sky) 63%);background-size:400px 100%;animation:shimmer 1.4s ease infinite;border-radius:14px}
  .skel-card{background:#fff;border:1px solid var(--sky2);border-radius:var(--radius);padding:18px}
  .skel-card .skel-thumb{height:150px;margin-bottom:14px}
  .skel-card .skel-line{height:12px;margin-bottom:8px}
  .skel-card .skel-line.w60{width:60%}
  .skel-card .skel-line.w40{width:40%}
  .skel-card .skel-btn{height:38px;margin-top:10px}

  /* ── FAQ-аккордеон (общий на главной и у товара) ── */
  .faq-list{display:flex;flex-direction:column;gap:10px;max-width:820px}
  .faq-item{border:1.5px solid var(--sky2);border-radius:14px;overflow:hidden;background:#fff;transition:border-color .2s}
  .faq-item.open{border-color:var(--blue)}
  .faq-q{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;
    padding:16px 18px;font-weight:700;font-size:15px;color:var(--ink);background:none;border:none;cursor:pointer;font-family:inherit}
  .faq-q .faq-arrow{flex-shrink:0;transition:transform .25s;color:var(--blue);font-size:13px}
  .faq-item.open .faq-q .faq-arrow{transform:rotate(180deg)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .faq-a-inner{padding:0 18px 16px;font-size:14px;color:var(--muted);line-height:1.65;white-space:pre-line}
  .faq-item.open .faq-a{max-height:600px}

/* ── Добавлено по аудиту: ссылки-заголовки карточек и видимый фокус ── */
.card h3 .tlink{color:inherit;text-decoration:none}
.card h3 .tlink:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #0a6fc2;outline-offset:2px}

/* ── Зоны нажатия ≥44×44 на сенсорных экранах (аудит: accessibility) ──
   Невидимое расширение области клика мелких кнопок — внешний вид не меняется.
   Клики идут делегированием через closest(), поэтому попадание в расширенную
   зону срабатывает как клик по самой кнопке. */
@media (pointer: coarse) {
  .fav, .cmp, .cmp-rm, .pp-swatch, .pp-chip, .qty button, .pager button { position: relative; }
  .fav::after, .cmp::after, .cmp-rm::after, .pp-swatch::after, .pp-chip::after,
  .qty button::after, .pager button::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px); border-radius: inherit;
  }
  .qty { gap: 12px }
}