/* ============================================================================
   «Рестарт» — визуальная система v2

   Главное ограничение, из которого выросло всё остальное: у товаров НЕТ ФОТО
   и не будет. Значит вес, который в обычном магазине несут картинки, должны
   нести три вещи: фактура страницы, цвет категории и типографская иерархия
   внутри карточки. Всё три — системные, а не декоративные.

   1. ТЕНИ. Форму держит кольцо в 1px, размытие только намекает на высоту.
      Максимальная альфа во всей системе — 6%, а не привычные 10–25%.
   2. ЦВЕТ КАТЕГОРИИ. У карточки одна переменная --tag (OKLCH), из неё
      color-mix'ом выводятся фон, рамка и текст бейджа. 15 категорий = 15 чисел
      оттенка при одинаковых светлоте и насыщенности, поэтому палитра не
      разъезжается и тёмная тема получается сама.
   3. ЧИСЛА. tabular-nums только на числах, не на всём тексте: в колонке цен
      пропорциональные цифры дают рваный край, а в обычном тексте табличные
      выглядят разреженно.
   4. ДВИЖЕНИЕ. Асимметричное: приход 200 мс, уход 320 мс. Анимируются только
      transform и opacity — тень лежит на псевдоэлементе и гасится прозрачностью,
      иначе 60 карточек в сетке перерисовываются на каждый кадр.
   ========================================================================= */

:root{
  color-scheme:light;

  /* поверхности и текст — парами, как в любой нормальной токен-системе */
  --bg:#f7f6f4;
  --surface:#ffffff;
  --inset:#f4f4f5;
  --ink:#0f1216;
  --ink-2:#5b636e;
  --ink-3:#8b929c;

  /* линии: обычная и усиленная. Обе полупрозрачные — тогда они одинаково
     работают и на белой карточке, и на сером фоне, и в тёмной теме */
  --line:rgb(15 18 22 / .09);
  --line-2:rgb(15 18 22 / .14);

  /* фирменный оранжевый. Держим его ТОЛЬКО для действий: кнопки, ссылки,
     активные состояния. Категории красятся своими оттенками, поэтому
     оранжевый нигде не конкурирует сам с собой */
  --o:#ee5f16;
  --o-ink:#c2470a;
  --o-tint:rgb(238 95 22 / .10);

  --ok:#0f7a43;
  --warn:#8a5a12;

  /* тени: кольцо + затухание. --sh-card намеренно почти не видна */
  --ring:0 0 0 1px var(--line);
  --sh-1:0 1px 2px rgb(15 18 22 / .04);
  --sh-2:0 12px 24px -12px rgb(15 18 22 / .10), 0 4px 8px -6px rgb(15 18 22 / .06);
  --sh-3:0 24px 48px -20px rgb(15 18 22 / .16), 0 8px 16px -10px rgb(15 18 22 / .08);

  /* радиусы — производные от одного числа */
  --r:12px;
  --r-sm:calc(var(--r) * .6);
  --r-md:calc(var(--r) * .8);
  --r-lg:var(--r);
  --r-xl:calc(var(--r) * 1.35);
  --r-2xl:calc(var(--r) * 1.8);

  --ease:cubic-bezier(.22,1,.36,1);
  --in:200ms;
  --out:320ms;
}

*{box-sizing:border-box}

/* Фактура вместо картинок: диагональная штриховка в 1px с альфой 4%.
   Карточки — сплошные — лежат поверх и «вырезаются» из неё. Именно это,
   а не тени, не даёт странице выглядеть пустой без единого изображения. */
body{
  margin:0;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 7px, rgb(15 18 22 / .028) 7px 8px);
  background-attachment:fixed;
  color:var(--ink);
  font:16px/1.55 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-feature-settings:"cv11","ss01";
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:880px}
/* цифры набираются табличными точечно — там, где они выстраиваются в столбец */
.pr,.price,.num,.cnt b,.bars,.spec,table.facts td:last-child,.cats i,.catnav i,.chip i{
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- шапка -- */
header{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30}
.hd{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;
  letter-spacing:-.5px}
.logo .mark{width:36px;height:36px;border-radius:50%;flex:none;display:block}
.logo b{color:var(--o);font-weight:700}
.logo small{display:block;font-size:9.5px;font-weight:600;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--ink-3);margin-top:-3px}
.hd nav{margin-left:auto;display:flex;gap:4px;font-size:14px}
.hd nav a{padding:8px 11px;border-radius:var(--r-md);color:var(--ink-2);font-weight:500;
  transition:background-color var(--out) var(--ease),color var(--out) var(--ease)}
.hd nav a:hover{background:var(--inset);color:var(--ink);transition-duration:var(--in)}
/* Переключатель темы. Иконка показывает не текущее состояние, а то, куда
   человек попадёт нажатием, — так понятнее, что кнопка вообще делает. */
.themetog{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;border:0;border-radius:var(--r-md);
  background:transparent;color:var(--ink-2);cursor:pointer;padding:0;
  transition:background-color var(--out) var(--ease),color var(--out) var(--ease)}
.themetog:hover{background:var(--inset);color:var(--ink);transition-duration:var(--in)}
.themetog svg{width:17px;height:17px}
.themetog .sun{display:none}
.themetog .moon{display:block}
.hd .tel{display:inline-flex;align-items:center;gap:8px;background:var(--o);color:#fff;
  padding:9px 15px;border-radius:var(--r-md);font-weight:600;font-size:14px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18);
  transition:background-color var(--out) var(--ease),transform var(--out) var(--ease)}
.hd .tel:hover{background:var(--o-ink);transition-duration:var(--in)}
.hd .tel:active{transform:scale(.97);transition-duration:80ms}
.hd .tel svg{width:15px;height:15px}

/* ---------------------------------------------------------------- герой -- */
/* Не баннер и не слоган на весь экран. Первое, что видит человек, — сколько
   товара есть прямо сейчас и насколько свежие данные. Для магазина б/у это
   и есть главное конкурентное преимущество, прятать его в подвал незачем. */
.hero{padding:44px 0 26px}
.hero h1{margin:0 0 12px;font-size:clamp(28px,4vw,42px);line-height:1.08;
  letter-spacing:-1.4px;font-weight:650;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--o)}
.stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin:0 0 22px;
  font-size:14.5px;color:var(--ink-2)}
.stats b{font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.3px;
  font-variant-numeric:tabular-nums}
.stats .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2);flex:none}
.stats .live{display:inline-flex;align-items:center;gap:7px}
.stats .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.hsearch{margin:0 0 22px;max-width:580px;position:relative}
.hsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-3);pointer-events:none}
/* Селектор с атрибутом, а не просто «.hsearch input»: ниже по файлу лежит
   общее правило input[type=search] для панели фильтра, у него та же
   специфичность, и оно выигрывало по порядку — левый отступ пропадал,
   и лупа налезала на плейсхолдер. */
.hsearch input[type=search]{width:100%;font:inherit;font-size:16px;
  padding:14px 16px 14px 44px;
  border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);box-shadow:var(--sh-1);
  transition:border-color var(--in) var(--ease),box-shadow var(--in) var(--ease)}
.hsearch input[type=search]::placeholder{color:var(--ink-3)}
.hsearch input[type=search]:focus{outline:none;border-color:var(--o);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--o) 18%,transparent)}
.trust{display:flex;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.trust div{display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;
  box-shadow:var(--sh-1)}
.trust svg{width:15px;height:15px;color:var(--o);flex:none}

/* ------------------------------------------------------ плитки категорий -- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:8px;margin:6px 0 4px}
.cats a,.cats button{position:relative;background:var(--surface);border:0;
  border-radius:var(--r-lg);padding:13px 14px;color:var(--ink);text-align:left;
  cursor:pointer;display:block;width:100%;box-shadow:var(--ring),var(--sh-1);
  transition:transform var(--out) var(--ease),box-shadow var(--out) var(--ease)}
.cats a:hover,.cats button:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--line-2),var(--sh-2);transition-duration:var(--in)}
.cats a::before,.cats button::before{content:'';display:block;width:8px;height:8px;
  border-radius:3px;margin-bottom:9px;
  background:color-mix(in oklab,var(--tag) 78%,var(--surface))}
.cats b{display:block;font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.2px}
.cats i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.cats a.on,.cats button.on{background:var(--ink);color:var(--bg);
  box-shadow:0 0 0 1px var(--ink),var(--sh-2)}
.cats a.on i,.cats button.on i{color:color-mix(in srgb,var(--bg) 62%,transparent)}

/* --------------------------------------------------------------- фильтр -- */
.bar{background:color-mix(in srgb,var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);padding:11px 0;position:sticky;top:64px;
  z-index:20;margin-top:16px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
input[type=search],select{font:inherit;font-size:14px;padding:9px 12px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);
  color:var(--ink);box-shadow:var(--sh-1);
  transition:border-color var(--in) var(--ease),box-shadow var(--in) var(--ease)}
input[type=search]{flex:1;min-width:210px}
input[type=search]:focus,select:focus{outline:none;border-color:var(--o);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--o) 18%,transparent)}
/* Неактивный чип — просто текст, без фона и рамки. Активный поднимается над
   дорожкой белым и кольцом. Пятнадцать залитых пилюль были бы визуальным
   шумом; пятнадцать текстовых меток, из которых одна приподнята, — нет. */
.chips{display:flex;gap:4px;flex-wrap:wrap;padding:2px}
.chip{border:0;background:transparent;border-radius:999px;padding:7px 13px;
  font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:7px;
  transition:background-color var(--out) var(--ease),color var(--out) var(--ease),
    box-shadow var(--out) var(--ease)}
.chip:hover{background:var(--inset);color:var(--ink);transition-duration:var(--in)}
.chip i{font-style:normal;font-size:11.5px;color:var(--ink-3);
  padding:1px 5px;border-radius:5px}
.chip.on{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--ring),var(--sh-1)}
.chip.on i{background:var(--inset);color:var(--ink-2)}
.cnt{color:var(--ink-2);font-size:13.5px;margin:22px 0 12px}
.cnt b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- карточки -- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:10px;padding-bottom:30px}
.card{
  position:relative;
  background:var(--surface);
  border-radius:var(--r-xl);
  padding:14px 15px 13px;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--ring),var(--sh-1);
  /* отсекаем то, что за экраном: на 1600 карточках это даёт больше,
     чем любая оптимизация анимаций */
  content-visibility:auto;
  contain-intrinsic-size:auto 232px;
  transform:translate3d(0,0,0);
  transition:transform var(--out) var(--ease)}
/* тень живёт на псевдоэлементе и гасится прозрачностью: box-shadow
   перерисовывается на paint-стадии, opacity — на композитной */
.card::after{content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;box-shadow:0 0 0 1px var(--line-2),var(--sh-2);opacity:0;
  transition:opacity var(--out) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .card:hover,.card:focus-within{transform:translate3d(0,-3px,0);
    transition-duration:var(--in)}
  .card:hover::after,.card:focus-within::after{opacity:1;transition-duration:var(--in)}
}
.card .top{display:flex;align-items:center;gap:7px;min-width:0}
/* монограмма — первая буква названия на подложке цвета категории.
   Ноль ассетов, работает на любом из 1600 наименований */
.mono{width:22px;height:22px;border-radius:var(--r-sm);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;line-height:1;text-transform:uppercase;
  background:color-mix(in oklab,var(--tag) 16%,var(--surface));
  color:color-mix(in oklab,var(--tag) 88%,var(--ink))}
/* бейдж категории: фон 16%, рамка 30%, текст 88% — та пропорция, которая
   отличает читаемый бейдж от кислотного */
.tag{font-size:11.5px;font-weight:500;line-height:1;padding:4px 8px;
  border-radius:var(--r-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
  background:color-mix(in oklab,var(--tag) 16%,var(--surface));
  border:1px solid color-mix(in oklab,var(--tag) 30%,var(--surface));
  color:color-mix(in oklab,var(--tag) 88%,var(--ink))}
.new{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--o)}
.new::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--o)}
.nm{font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.24px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Состояние — пятью полосками, а не звёздами: звёзды читаются как оценка
   покупателей, полоски — как измеренная характеристика. */
.spec{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;
  color:var(--ink-2);min-height:18px}
.bars{display:inline-flex;align-items:center;gap:8px}
.bars u{display:inline-flex;gap:2.5px;text-decoration:none}
.bars s{display:block;width:3px;height:11px;border-radius:2px;background:var(--line-2);
  text-decoration:none}
.bars s.f{background:var(--ink)}
.bars.hi s.f{background:var(--ok)}
.bars.md s.f{background:var(--warn)}
.chip-b{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;
  color:var(--ink-2);background:var(--inset);border-radius:var(--r-sm);padding:3px 7px}
.dsc{font-size:12.5px;color:var(--ink-3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Цена читается мгновенно не потому что огромная, а потому что она
   единственная плотная, табличная и тяжёлая во всей карточке */
.pr{font-weight:650;font-size:20px;letter-spacing:-.6px;margin-top:auto;padding-top:2px}
.wh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:9px}
.wh span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh svg{width:12px;height:12px;color:var(--ink-3);flex:none}
.more,.showall{display:block;margin:6px auto 46px;padding:12px 26px;border:0;
  background:var(--surface);border-radius:var(--r-lg);cursor:pointer;font-weight:600;
  font-size:14.5px;box-shadow:var(--ring),var(--sh-1);
  transition:transform var(--out) var(--ease),box-shadow var(--out) var(--ease)}
.showall{width:100%;margin:6px 0 26px}
.more:hover,.showall:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px var(--line-2),var(--sh-2);transition-duration:var(--in)}
.more:active,.showall:active{transform:scale(.99);transition-duration:80ms}
/* пустое состояние — не иллюстрация, а один осиротевший элемент сетки */
.empty{text-align:center;color:var(--ink-2);padding:52px 20px;background:var(--surface);
  border-radius:var(--r-xl);box-shadow:var(--ring),var(--sh-1);font-size:14px}
.empty b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:6px}

/* ---------------------------------------------------------------- подвал -- */
footer{background:var(--ink);color:color-mix(in srgb,var(--bg) 62%,transparent);
  padding:44px 0 34px;font-size:14px;margin-top:30px}
footer h3{color:var(--bg);font-size:16px;margin:0 0 20px;letter-spacing:-.3px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.fgrid b{color:var(--bg);display:block;font-size:14.5px;margin-bottom:3px}
.fgrid a{color:var(--o-ink)}
.fgrid a:hover{color:var(--o)}
/* Селектор a.tgico[href], а не .tgico и даже не a.tgico: иконка стоит внутри
   блоков, где ссылки покрашены в оранжевый (.fgrid a в подвале, .shop a в
   карточке товара и магазина). У a.tgico с ними одинаковая специфичность,
   и побеждал тот, кто ниже по файлу, — самолётик внутри синего кружка
   оказывался оранжевым. Атрибут в селекторе поднимает вес и снимает вопрос. */
a.tgico[href]{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#229ED9;color:#fff;
  vertical-align:-1.5px;margin:0 3px;
  transition:background-color var(--out) var(--ease),transform var(--out) var(--ease)}
a.tgico[href] svg{width:12px;height:12px;margin-right:1px}
a.tgico[href]:hover{background:#1b87ba;color:#fff;transform:translateY(-1px);
  transition-duration:var(--in)}
.fnote{margin-top:30px;padding-top:22px;border-top:1px solid rgb(255 255 255 / .1);
  font-size:13px;color:color-mix(in srgb,var(--bg) 45%,transparent);max-width:70ch}

/* ------------------------------------------------- категории и справка -- */
.lead{font-size:16px;line-height:1.62;color:var(--ink-2);max-width:70ch;margin:0 0 18px}
.catnav{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px}
.catnav a{border-radius:999px;padding:7px 13px;font-size:13.5px;color:var(--ink-2);
  font-weight:500;display:inline-flex;align-items:center;gap:7px;
  transition:background-color var(--out) var(--ease),color var(--out) var(--ease),
    box-shadow var(--out) var(--ease)}
.catnav a:hover{background:var(--inset);color:var(--ink);transition-duration:var(--in)}
.catnav a i{font-style:normal;color:var(--ink-3);font-size:11.5px}
.catnav a.on{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--ring),var(--sh-1)}
.catnav a.on i{color:var(--ink-2)}
.faq{max-width:74ch;margin:34px 0 10px}
.faq h2{font-size:21px;letter-spacing:-.5px;margin:0 0 14px;font-weight:650}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;
  font-weight:600;font-size:15.5px;line-height:1.45;
  transition:color var(--in) var(--ease)}
.faq summary:hover{color:var(--o)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;
  border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--out) var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0 0 17px;color:var(--ink-2);line-height:1.62;font-size:15px;max-width:68ch}
.grid.cut .card:nth-child(n+61){display:none}

/* --------------------------------------------------------- товар и блоки -- */
.crumb{font-size:13px;color:var(--ink-3);padding:20px 0 14px}
.crumb a:hover{color:var(--o)}
.prod{background:var(--surface);border-radius:var(--r-2xl);padding:30px;
  box-shadow:var(--ring),var(--sh-1)}
h1{font-size:26px;line-height:1.22;margin:8px 0 12px;letter-spacing:-.7px;font-weight:650}
.price{font-size:38px;font-weight:650;letter-spacing:-1.6px;margin:6px 0 18px}
.price.gone{color:var(--ink-3);font-size:26px}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.badge{background:var(--inset);color:var(--ink-2);border-radius:var(--r-md);
  padding:8px 12px;font-size:13px;font-weight:500}
.badge.g{background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ok);
  font-weight:600}
.badge.a{background:color-mix(in srgb,var(--warn) 14%,var(--surface));color:var(--warn);
  font-weight:600}
.note{background:var(--o-tint);border-radius:var(--r-lg);padding:15px 17px;font-size:15px;
  margin-bottom:20px}
.note b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--o-ink);margin-bottom:5px;font-weight:700}
table.facts{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:22px}
table.facts td{padding:11px 0;border-bottom:1px solid var(--line)}
table.facts tr:last-child td{border:0}
table.facts td:first-child{color:var(--ink-3);width:200px}
.btns{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 24px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 22px;
  border-radius:var(--r-lg);font-weight:600;font-size:14.5px;border:0;
  background:var(--surface);box-shadow:var(--ring),var(--sh-1);
  transition:transform var(--out) var(--ease),box-shadow var(--out) var(--ease),
    background-color var(--out) var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-2),var(--sh-2);
  transition-duration:var(--in)}
.btn:active{transform:scale(.98);transition-duration:80ms}
.btn svg{width:16px;height:16px}
.btn.p{background:var(--o);color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18)}
.btn.p:hover{background:var(--o-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),
  var(--sh-2)}
.btn.tg{background:#229ED9;color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18)}
.btn.tg:hover{background:#1c86b8;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),
  var(--sh-2)}
.soldbar{background:var(--ink);color:var(--bg);border-radius:var(--r-lg);padding:14px 18px;
  font-size:15px;font-weight:600;margin-bottom:20px;display:flex;gap:10px;flex-wrap:wrap;
  align-items:baseline}
.soldbar span{font-weight:400;color:color-mix(in srgb,var(--bg) 60%,transparent);
  font-size:14px}
.shop{border-top:1px solid var(--line);padding-top:20px;font-size:14.5px;line-height:1.75}
.shop b{font-size:15px}
.shop a{color:var(--o);font-weight:500}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
  margin-top:16px}
.strip div{background:var(--surface);border-radius:var(--r-lg);padding:15px 17px;
  display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);
  box-shadow:var(--ring),var(--sh-1)}
.strip svg{width:18px;height:18px;color:var(--o);flex:none;margin-top:2px}
.strip b{display:block;color:var(--ink);font-size:14px;margin-bottom:1px}
#magazyny{scroll-margin-top:132px}
/* Карта магазинов. Подложка — обычная картинка, булавки поверх неё —
   обычные ссылки, поставленные в проценты от размера кадра. Проценты
   посчитаны при сборке из тех же координат, что и разметка Store,
   поэтому карта и микроразметка не могут разъехаться. */
.mapwrap{position:relative;line-height:0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--ring),var(--sh-1);background:#e9e7e1;margin-bottom:10px}
.mapwrap img{display:block;width:100%;height:auto}
/* Булавка — svg-капля, а не круг с треугольником: у капли остриё ровно внизу,
   поэтому translate(-50%,-100%) ставит её точно в нужную точку карты. */
.mappin{position:absolute;transform:translate(-50%,-100%);transform-origin:50% 100%;
  width:26px;height:34px;transition:transform var(--out) var(--ease)}
.mappin svg{display:block;width:100%;height:100%;fill:var(--o);stroke:#fff;stroke-width:1.7;
  filter:drop-shadow(0 2px 4px rgb(0 0 0 / .4))}
.mappin span{position:absolute;left:0;top:5px;width:100%;text-align:center;
  font-size:13px;font-weight:700;line-height:1;color:#fff}
.mappin:hover,.mappin:focus{transform:translate(-50%,-100%) scale(1.15);z-index:2;
  transition-duration:var(--in)}
.mapcredit{font-size:12px;color:var(--ink-3);margin:0 0 18px}
.mapcredit a{color:var(--ink-3);text-decoration:underline}
.shop-card h3 .num{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:var(--r-sm);background:var(--o);color:#fff;
  font-size:11.5px;font-weight:700;margin-right:9px;vertical-align:2px}
.shops{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;
  margin-bottom:8px}
/* колонка + margin-top:auto у нижней ссылки: у магазинов разной длины
   примечания, и без этого «Дивитись N товарів» висит на разной высоте */
.shop-card{background:var(--surface);border-radius:var(--r-xl);padding:20px 22px;
  box-shadow:var(--ring),var(--sh-1);display:flex;flex-direction:column}
.shop-card h3{margin:0 0 3px;font-size:17px;letter-spacing:-.4px;font-weight:650}
.shop-card .addr{color:var(--ink-2);font-size:14px;line-height:1.6;margin-bottom:14px}
.shop-card .addr b{color:var(--ink);font-weight:600}
.shop-card .links{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.shop-card .links a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;
  font-weight:600;border-radius:var(--r-md);padding:9px 13px;
  box-shadow:var(--ring),var(--sh-1);
  transition:transform var(--out) var(--ease)}
.shop-card .links a:hover{transform:translateY(-1px);transition-duration:var(--in)}
.shop-card .links a.tg{background:#229ED9;color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18)}
.shop-card .links a.ph{background:var(--o);color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18)}
.shop-card .links svg{width:14px;height:14px}
.shop-card .go{display:block;border-top:1px solid var(--line);padding-top:13px;
  font-size:14px;color:var(--o);font-weight:600;margin-top:auto}
.hint{background:var(--surface);border-radius:var(--r-lg);padding:16px 18px;font-size:13.5px;
  color:var(--ink-2);margin-top:16px;line-height:1.6;box-shadow:var(--ring),var(--sh-1)}
.sect h2{font-size:20px;margin:34px 0 14px;letter-spacing:-.5px;font-weight:650}
table.cond{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ring),var(--sh-1)}
table.cond td{padding:11px 15px;border-bottom:1px solid var(--line)}
table.cond tr:last-child td{border:0}
table.cond td:first-child{width:86px;font-weight:700;color:var(--o)}

@media(max-width:760px){
  .hd{height:56px;gap:12px}
  .hd nav{display:none}
  .logo{font-size:17px;gap:9px}
  .logo .mark{width:32px;height:32px}
  .themetog{margin-left:auto}
  .hd .tel{padding:9px 14px}
  .hero{padding:28px 0 20px}
  .hero h1{letter-spacing:-1px}
  .stats{gap:6px 16px;font-size:13.5px}
  .bar{top:56px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
  .card{padding:12px 13px 11px;contain-intrinsic-size:auto 210px}
  .nm{font-size:14px}
  .pr{font-size:18px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .prod{padding:18px;border-radius:var(--r-xl)}
  h1{font-size:21px}
  .price{font-size:31px;letter-spacing:-1.2px;margin:4px 0 14px}
  .note{padding:13px 15px;font-size:14.5px}
  .shop-card{padding:17px 18px}
  .mappin{width:22px;height:29px}
  .mappin span{font-size:11.5px;top:4px}
}

/* Движение выключаем, кроссфейды оставляем короткими: WCAG говорит
   о движении, а не о любой анимации, и резкое переключение состояний
   для многих хуже плавного. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    scroll-behavior:auto !important}
  .card,.card::after,.cats a,.cats button,.btn,.more,.showall,.mappin,
  .shop-card .links a,.hd .tel{transform:none !important}
  .card,.cats a,.cats button,.btn,.more,.showall{transition-duration:.01ms !important}
  .card::after{transition:opacity 100ms linear !important}
}

/* ================================================== цвет категории ======= */
/* --tag собирается из трёх чисел: оттенок приходит инлайном с карточки,
   светлота и насыщенность — из темы. Пятнадцать категорий = пятнадцать
   чисел при одинаковых L и C, поэтому палитра не разъезжается, а тёмная
   тема получается сдвигом одной переменной.

   Объявляем --tag НЕ на :root, а на самих элементах: var() внутри значения
   кастомного свойства подставляется там, где свойство объявлено. Объявление
   на :root взяло бы --tag-h корня, а не карточки, и все бейджи стали бы
   одного цвета. */
:root{--tag-l:58%; --tag-c:.15; --tag-h:250}
.card,.card *,.cats a,.cats a *,.cats button,.cats button *,.tag,.mono{
  --tag:oklch(var(--tag-l) var(--tag-c) var(--tag-h))}

/* категория мелкой строкой над названием на странице товара */
.prod .ct{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--ink-3);font-weight:700}

@media(max-width:760px){
  .about,.adv,.botcta{padding:17px 18px}
  footer{padding:32px 0 100px}          /* место под липкую панель звонка */
  .card .top .new span{display:none}    /* на узкой карточке хватает точки */
  .cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:9px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--line)}
  .cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 10px;border-radius:var(--r-lg);font-weight:600;font-size:14.5px;
    background:var(--surface);box-shadow:var(--ring),var(--sh-1)}
  .cta a.p{background:var(--o);color:#fff}
  .cta a.tg{background:#229ED9;color:#fff}
  .cta svg{width:17px;height:17px}
}
@media(min-width:761px){ .cta{display:none} }

/* ============================ блоки сети «Рестарт» ======================== */
/* «Про нас», «Переваги» и телеграм-бот есть на всех городских витринах,
   кроме полтавской, и на странице сети. Правила всё равно живут в общем
   файле: копия стилей на каждый город — это ровно тот способ, которым дизайн
   со временем расползается. Неиспользованные селекторы стоят полкилобайта,
   расхождение между городами стоит дороже.

   margin:auto по бокам обязателен: .sect стоит в файле ниже .wrap и с той же
   специфичностью, поэтому «margin:38px 0 0» затирал бы у .wrap «margin:0 auto»
   и блок переставал бы центрироваться, прилипая к левому краю. Так уже было. */
.sect{margin:38px auto 0}
.about{background:var(--surface);border-radius:var(--r-xl);padding:22px 24px;
  box-shadow:var(--ring),var(--sh-1)}
.about p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:76ch}
.advs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.adv{background:var(--surface);border-radius:var(--r-xl);padding:20px 22px;
  box-shadow:var(--ring),var(--sh-1)}
.adv svg{width:20px;height:20px;color:var(--o);margin-bottom:10px}
.adv b{display:block;font-size:16px;letter-spacing:-.3px;margin-bottom:4px;font-weight:650}
.adv p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.botcta{background:var(--surface);border-radius:var(--r-xl);padding:22px 24px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  box-shadow:var(--ring),var(--sh-1)}
.botcta p{margin:0;flex:1 1 320px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.botcta a{display:inline-flex;align-items:center;gap:9px;background:#229ED9;color:#fff;
  border-radius:var(--r-lg);padding:13px 20px;font-weight:600;font-size:15px;
  white-space:nowrap;box-shadow:inset 0 1px 0 rgb(255 255 255 / .18);
  transition:background-color var(--out) var(--ease),transform var(--out) var(--ease)}
.botcta a:hover{background:#1c86b8;transform:translateY(-1px);transition-duration:var(--in)}
.botcta a svg{width:17px;height:17px}
/* строка ссылок в подвале: та же оранжевая, что и адреса магазинов рядом */
.fnote a{color:var(--o-ink)}
.fnote a:hover{color:var(--o)}

/* ---- тёмная тема: по настройке системы (если человек не выбирал сам) ---- */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0c0e11;
  --surface:#14171c;
  --inset:#1b1f25;
  --ink:#eef1f4;
  --ink-2:#a3abb6;
  --ink-3:#79818d;
  --line:rgb(255 255 255 / .09);
  --line-2:rgb(255 255 255 / .15);
  --o:#ff7534;
  --o-ink:#ff9057;
  --o-tint:rgb(255 117 52 / .14);
  --ok:#3ec27c;
  --warn:#d7a44a;
  --sh-1:0 1px 2px rgb(0 0 0 / .5);
  --sh-2:0 12px 24px -12px rgb(0 0 0 / .6), 0 4px 8px -6px rgb(0 0 0 / .4);
  --sh-3:0 24px 48px -20px rgb(0 0 0 / .7), 0 8px 16px -10px rgb(0 0 0 / .5);
  --tag-l:74%;
  --tag-c:.14;
}
:root:not([data-theme="light"]) body{background-image:repeating-linear-gradient(-45deg,
  transparent 0 7px, rgb(255 255 255 / .02) 7px 8px)}
:root:not([data-theme="light"]) footer{background:#080a0c;color:#9aa3ae;border-top:1px solid var(--line)}
:root:not([data-theme="light"]) footer h3,:root:not([data-theme="light"]) .fgrid b{color:#fff}
:root:not([data-theme="light"]) .fnote{color:#79818d}
:root:not([data-theme="light"]) .themetog .sun{display:block}
:root:not([data-theme="light"]) .themetog .moon{display:none}
}

/* ---- тёмная тема: выбрана кнопкой в шапке ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0e11;
  --surface:#14171c;
  --inset:#1b1f25;
  --ink:#eef1f4;
  --ink-2:#a3abb6;
  --ink-3:#79818d;
  --line:rgb(255 255 255 / .09);
  --line-2:rgb(255 255 255 / .15);
  --o:#ff7534;
  --o-ink:#ff9057;
  --o-tint:rgb(255 117 52 / .14);
  --ok:#3ec27c;
  --warn:#d7a44a;
  --sh-1:0 1px 2px rgb(0 0 0 / .5);
  --sh-2:0 12px 24px -12px rgb(0 0 0 / .6), 0 4px 8px -6px rgb(0 0 0 / .4);
  --sh-3:0 24px 48px -20px rgb(0 0 0 / .7), 0 8px 16px -10px rgb(0 0 0 / .5);
  --tag-l:74%;
  --tag-c:.14;
}
:root[data-theme="dark"] body{background-image:repeating-linear-gradient(-45deg,
  transparent 0 7px, rgb(255 255 255 / .02) 7px 8px)}
:root[data-theme="dark"] footer{background:#080a0c;color:#9aa3ae;border-top:1px solid var(--line)}
:root[data-theme="dark"] footer h3,:root[data-theme="dark"] .fgrid b{color:#fff}
:root[data-theme="dark"] .fnote{color:#79818d}
:root[data-theme="dark"] .themetog .sun{display:block}
:root[data-theme="dark"] .themetog .moon{display:none}