:root{
  --pine:#07281E; --pine-soft:#0E4534; --green:#16785C; --green-light:#2FA37C;
  --beam:#FFE2A3; --paper:#FBFCFA; --ink:#12211C; --text-soft:#5A6B64; --border:#DDE5E0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Onest',sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

header{position:absolute;top:0;left:0;right:0;z-index:30;padding:24px 0}
.top-row{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Unbounded',sans-serif;font-weight:600;font-size:19px;color:#fff;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--beam)}
nav{display:flex;align-items:center}
nav a+a{margin-left:30px}
nav a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15px;transition:color .25s ease}
nav a:hover,nav a:focus-visible{color:#fff}
.phone-btn{color:#fff;text-decoration:none;font-weight:500;font-size:15px;
  border:1px solid rgba(255,255,255,.28);padding:9px 18px;border-radius:100px;white-space:nowrap;
  transition:background .25s ease,border-color .25s ease}
.phone-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}

.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--pine);display:flex;align-items:center}
.glow{position:absolute;top:-15%;right:-10%;bottom:-15%;left:-10%;pointer-events:none;
  background:radial-gradient(46% 40% at 74% 44%,rgba(255,226,163,.13),transparent 68%),
             radial-gradient(40% 36% at 8% 78%,rgba(47,163,124,.2),transparent 70%);
  will-change:transform}
.haze{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:8;
  background:linear-gradient(180deg,transparent 64%,rgba(7,40,30,.92) 100%)}

/* ФУРЫ ПЕРВОГО ЭКРАНА.
   Две по краям, текст между ними. Фуры почти не видны — тёмный силуэт
   на тёмном фоне. Заметны прежде всего фары: их свет ложится на текст.

   КАЖДАЯ ФУРА — ОТДЕЛЬНАЯ ОБЁРТКА, а фара и свет лежат внутри неё.
   Поэтому их место задаётся в долях от самой фуры, а не от края экрана.
   Прежде считали от экрана, и на разной ширине фара уезжала мимо кабины.
   Настоящее место фары найдено по снимку: 96% ширины, 22% от низа. */
.trucks{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;
  pointer-events:none;overflow:hidden}
.truck{position:absolute;
  transform:translate3d(var(--shift,0px),0,0);will-change:transform}
.truck img{display:block;width:100%;height:auto}

/* Видимая часть — примерно седьмая доля ширины экрана, как просил
   заказчик. Фура шире, остальное уходит за край: 42% ширины при
   вылете 28% оставляют на виду 14%. Наружу уходит кузов,
   на виду остаётся кабина с фарой. */
.trucks .truck-left{left:-28%; bottom:18%; width:42vw; opacity:.17}
.trucks .truck-right{right:-28%; bottom:18%; width:42vw; opacity:.17}
.trucks .truck-front{display:none}

/* Фара. Место — в долях от фуры, поэтому не съедет ни на каком экране.
   У зеркальной правой фуры кабина слева, значит отсчёт с другой стороны. */
.truck .headlight{position:absolute;
  left:93%; bottom:18%; width:9%; height:14%;
  background:radial-gradient(ellipse at center,
    rgba(255,244,214,1) 0%, rgba(255,226,163,.7) 30%, transparent 70%);
  filter:blur(2px)}
.truck-right .headlight{left:auto; right:93%}

/* Свет. Начинается у фары и уходит к центру экрана, расширяясь. */
.truck .beam{position:absolute;
  left:96%; bottom:-24%; width:290%; height:150%;
  background:radial-gradient(ellipse 100% 62% at 0% 62%,
    rgba(255,226,163,.30) 0%, rgba(255,226,163,.13) 22%,
    rgba(255,226,163,.05) 44%, transparent 72%);
  filter:blur(20px)}
.truck-right .beam{left:auto; right:96%;
  background:radial-gradient(ellipse 100% 62% at 100% 62%,
    rgba(255,226,163,.30) 0%, rgba(255,226,163,.13) 22%,
    rgba(255,226,163,.05) 44%, transparent 72%)}

.hero-text{position:relative;z-index:10;width:100%;padding-top:118px;padding-bottom:72px}
.tagline{display:inline-block;color:var(--beam);font-size:14px;margin-bottom:18px;max-width:30ch}
h1{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(38px,7.4vw,100px);line-height:.98;letter-spacing:-.045em;
  color:#fff;max-width:11ch;overflow-wrap:break-word}
/* Название на первом экране стоит по центру, врезка и описание — под ним.
   Прежде порядок был обратный: сначала перечень марок, потом название,
   и глаз цеплялся за мелкий текст раньше, чем за имя магазина. */
.hero-text h1{max-width:none;text-align:center;margin:0 auto}
.hero-text .tagline{display:block;text-align:center;margin:18px auto 0;max-width:34ch}
.hero-text .lead{margin-left:auto;margin-right:auto;text-align:center;max-width:46ch}
.hero-text .buttons{justify-content:center}
.hero-text .stats{justify-content:center}
.lead{margin-top:20px;max-width:38ch;font-size:clamp(16px,1.4vw,18px);color:rgba(255,255,255,.76)}
.buttons{margin-top:32px;display:flex;flex-wrap:wrap}
.buttons a+a{margin-left:12px}
.btn-main{background:var(--beam);color:var(--pine);text-decoration:none;font-weight:600;
  font-size:16px;padding:16px 32px;border-radius:100px;
  transition:transform .25s ease,box-shadow .25s ease}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,226,163,.22)}
.btn-second{color:#fff;text-decoration:none;font-size:16px;padding:16px 28px;
  border:1px solid rgba(255,255,255,.3);border-radius:100px;
  transition:border-color .25s ease,background .25s ease}
.btn-second:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55)}
.stats{margin-top:46px;display:flex;flex-wrap:wrap}
.stats div+div{margin-left:44px}
.stats div b{display:block;font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(24px,2.4vw,30px);color:#fff;line-height:1.1}
.stats div span{font-size:14px;color:rgba(255,255,255,.6)}

/* Появление первого экрана.
   ВАЖНО: нигде не пишем opacity:0 в самом правиле. Вместо этого
   backwards — он применяет первый кадр анимации только на время
   задержки, а если анимация не отработала вовсе, элемент просто виден.

   Цена прежнего порядка (поймано снимком экрана): при opacity:0
   плюс forwards любой сбой анимации оставлял текст прозрачным
   навсегда — на первом экране пропадали и название, и описание. */
body.animate .tagline{animation:всплыть .9s .15s ease backwards}
body.animate h1{animation:всплыть 1s .3s ease backwards}
body.animate .lead{animation:всплыть 1s .5s ease backwards}
body.animate .buttons{animation:всплыть 1s .7s ease backwards}
body.animate .stats{animation:всплыть 1s .9s ease backwards}
@keyframes всплыть{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

section{padding:104px 0}
h2{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(26px,3.6vw,44px);line-height:1.14;letter-spacing:-.03em;max-width:20ch}
.note{margin-top:16px;max-width:54ch;color:var(--text-soft);font-size:clamp(15px,1.3vw,17px)}

.kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:50px;
  background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.kind{min-width:0;background:#fff;padding:0 26px 28px;transition:background .35s ease;position:relative}
.kind:hover{background:#F5FAF7}
.shot{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.shot img{max-height:118px;max-width:82%;width:auto;display:block;
  filter:brightness(.92) saturate(.86);transition:filter .45s ease,transform .45s ease}
.kind:hover .shot img{filter:brightness(1.18) saturate(1.25) drop-shadow(0 0 18px var(--glow-color));transform:scale(1.06)}
.kind h3{font-family:'Unbounded',sans-serif;font-weight:400;font-size:18px;margin-bottom:8px}
.kind p{font-size:15px;color:var(--text-soft);line-height:1.55}
.kind em{display:block;font-style:normal;font-size:13px;color:var(--green);margin-top:14px;font-weight:500}

.brands-bg{background:var(--pine-soft);color:#fff;position:relative;overflow:hidden}
.brands-bg h2{color:#fff}
.brands-bg .note{color:rgba(255,255,255,.66)}
.brands-bg .corner{position:absolute;pointer-events:none;opacity:var(--depth);
  transform:rotate(var(--angle));filter:brightness(1.06) saturate(1.1)}
/* Фонари по краям блока с марками. Отодвинуты дальше за край:
   прежде левый налезал на заголовок «Найдите по своей машине»
   и перекрывал первые буквы. */
/* Фонари по краям блока с марками. ВСЕ шесть жмутся к самым кромкам
   и частично уходят за них. Прежде три стояли внутри блока — на 9%,
   27% и 33% — и налезали на заголовок и плашки марок.
   Текст в этом блоке начинается от края «wrap», то есть примерно
   на 3% ширины при узком экране: значит фонарь не должен
   заходить правее 2%. */
.c1{right:-6%; top:5%;              width:min(8vw,104px); --angle:17deg;  --depth:.26}
.c3{right:-6%; top:42%;             width:min(7vw,92px);  --angle:-21deg; --depth:.20}
.c5{right:-3%; bottom:4%;           width:min(6vw,80px);  --angle:-8deg;  --depth:.18}
.c2{left:-5%;  top:8%;              width:min(8vw,100px); --angle:-13deg; --depth:.22}
.c4{left:-7%;  top:46%;             width:min(7vw,96px);  --angle:24deg;  --depth:.19}
.c6{left:-4%;  bottom:6%;           width:min(6vw,76px);  --angle:11deg;  --depth:.17}
.brands{margin-top:42px;display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:2}
.brand{border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:11px 20px;
  font-size:15px;color:rgba(255,255,255,.9);
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.brand:hover{background:rgba(255,226,163,.14);border-color:var(--beam);transform:translateY(-2px)}

.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;margin-top:50px}
.reason{border-top:2px solid var(--green);padding-top:22px;border-radius:0}
.reason h3{font-family:'Unbounded',sans-serif;font-weight:400;font-size:19px;margin-bottom:10px}
.reason p{color:var(--text-soft);font-size:16px}

.address-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hours{margin-top:30px;border-top:1px solid var(--border)}
.hour{display:flex;justify-content:space-between;padding:13px 0;
  border-bottom:1px solid var(--border);font-size:16px}
.hour span:last-child{color:var(--text-soft);white-space:nowrap}
.map-stub{background:var(--pine);border-radius:20px;min-height:320px;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);
  font-size:15px;position:relative;overflow:hidden;text-align:center;padding:20px}
.map-stub::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:radial-gradient(60% 60% at 50% 40%,rgba(47,163,124,.26),transparent 72%)}

footer{background:var(--pine);color:rgba(255,255,255,.6);padding:54px 0 36px;font-size:15px}
.footer-row{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer a:hover{color:var(--beam)}
.build{margin-top:30px;font-size:13px;color:rgba(255,255,255,.32)}

/* Прячем блоки до появления ТОЛЬКО когда скрипт жив и сам поставил
   «оживить» на body. Без скрипта — всё видно сразу. */
body.animate .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
body.animate .reveal.shown{opacity:1;transform:none}

/* ====== ШИРОКИЙ МОНИТОР ====== */
@media (min-width:1600px){
  .wrap{max-width:1320px}
  .hero-text{padding-top:130px}
}

/* ====== НОУТБУК ====== */
@media (max-width:1100px){
  h1{max-width:13ch}
  .lead{max-width:34ch}
}

/* ====== ПЛАНШЕТ ======
   Карточки в два ряда, фонари уходят глубже в фон. */
@media (max-width:900px){
  /* Шапка в две строки. Ссылки переносятся вниз целой строкой:
     order ставит их после телефона, ширина 100% рвёт строку. */
  .top-row{flex-wrap:wrap;row-gap:0}
  nav{order:3;width:100%;justify-content:space-between;
      margin-top:13px;padding-top:11px;
      border-top:1px solid rgba(255,255,255,.14)}
  nav a{font-size:14px}
  nav a+a{margin-left:0}
  /* На витрине верхние ссылки на телефоне прячем: ниже стоят кнопки,
     ведущие туда же, а место на узком экране дорого.
     На остальных страницах кнопок нет — там ссылки нужны. */
  body.vitrina nav{display:none}
  body.vitrina header{padding:16px 0}
  section{padding:80px 0}
  .kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .address-row{grid-template-columns:minmax(0,1fr);gap:34px}
  .brands-bg .corner{opacity:calc(var(--depth) * .6)}
}

/* ====== ТЕЛЕФОН ======
   Текст занимает весь экран, поэтому фонари переезжают за него фоном:
   часть прячется совсем, остальные становятся едва различимы.
   Цена ошибки без этого: фонарь ложится поверх заголовка,
   и название магазина не прочесть. */
@media (max-width:640px){
  .wrap{padding:0 18px}
  header{padding:18px 0}
  .logo{font-size:17px}
  .phone-btn{font-size:14px;padding:8px 14px}

  .hero{min-height:auto;padding:104px 0 64px}
  .hero-text{padding-top:0;padding-bottom:0}
  .tagline{font-size:13px;margin-bottom:14px}
  h1{font-size:clamp(30px,9.2vw,46px);max-width:100%;
     word-break:normal;overflow-wrap:break-word;hyphens:none}
  .lead{margin-top:16px;max-width:100%;font-size:16px}
  .buttons{margin-top:26px}
  .buttons a+a{margin-left:0;margin-top:10px}
  .btn-main,.btn-second{flex:1 1 100%;text-align:center;padding:15px 20px}
  /* Счётчики на телефоне: три колонки в ряд, подписи мельче.
     Раньше подпись «позиций в наличии» рвалась пополам и съезжала. */
  .stats{margin-top:32px;justify-content:center;text-align:center}
  .stats div+div{margin-left:10px}
  .stats div{flex:1 1 0;min-width:0}
  .stats div b{font-size:21px}
  .stats div span{font-size:11.5px;line-height:1.3;display:block}
  .haze{display:none}

  /* На телефоне боковые фуры прячем — места по краям нет.
     Вместо них одна фура прямо за текстом, передом на зрителя. */
  .trucks .truck-left,.trucks .truck-right{display:none}
  .trucks .truck-front{display:block;left:50%;bottom:5%;width:64vw;
    transform:translate3d(-50%,var(--shift,0px),0);opacity:.2}
  .truck-front .beam-front{left:-40%;bottom:-14%;width:180%;height:120%;
    background:radial-gradient(ellipse 58% 52% at 50% 86%,
      rgba(255,226,163,.24) 0%, rgba(255,226,163,.08) 38%, transparent 72%);
    filter:blur(18px)}

  section{padding:62px 0}
  .kinds{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .kind{padding:0 22px 24px}
  .shot{height:124px}
  .shot img{max-height:96px}
  .reasons{grid-template-columns:minmax(0,1fr);gap:30px;margin-top:36px}
  .brands{margin-top:32px;gap:8px}
  .brand{padding:9px 16px;font-size:14px}
  .brands-bg .corner{opacity:.32;width:auto;height:74px}
  .c1{right:-6%; top:5%}
  .c2{left:-8%;  top:auto;bottom:8%}
  .c3{right:-7%; top:auto;bottom:-2%;height:58px}
  .brands-bg .corner:nth-of-type(n+4){display:none}
  .map-stub{min-height:240px}
  .hour{font-size:15px}
  footer{padding:42px 0 30px}
}

/* ====== УЗКИЙ ТЕЛЕФОН ====== */
@media (max-width:380px){
  h1{font-size:clamp(27px,8.6vw,34px)}
  .stats div b{font-size:20px}
  .stats{gap:8px}
}

/* ====== ТЕЛЕФОН ЛЁЖА ====== */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:128px 0 56px}
  .stats{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  body.animate .reveal{opacity:1;transform:none}
}

/* ===== СТРАХОВКА ОТ РАСТЯГИВАНИЯ ВБОК =====
   Длинное слово без пробелов — артикул, номер, ссылка — не переносится
   само и растягивает колонку, а за ней всю страницу. Фон блоков при
   этом остаётся по ширине экрана, и получается обрезанная шапка
   при съехавшем содержимом. */
img,video,table,pre{max-width:100%}
.product-name,.prod-title,.description p,.kind p,.note,.brand,.car{
  overflow-wrap:break-word;word-break:normal}
/* Таблица свойств: без этого длинное значение в правой ячейке
   раздвигает таблицу шире экрана. */
.specs{table-layout:fixed}
.specs td{overflow-wrap:break-word}

/* ================= КАТАЛОГ ================= */
.cat-top{background:var(--pine);padding:112px 0 44px;color:#fff}
.cat-title{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(30px,4.4vw,52px);line-height:1;letter-spacing:-.04em;color:#fff}
.found-count{margin-top:10px;color:rgba(255,255,255,.62);font-size:16px}

.cat-row{display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:40px;align-items:start;padding-top:36px;padding-bottom:90px}

.filter-key,.filter-btn,.filter-close{display:none}

.filters{position:sticky;top:20px;min-width:0}
.filter-block{padding:18px 0;border-bottom:1px solid var(--border)}
.filter-block:last-child{border-bottom:0}
.filter-block h3{font-family:'Unbounded',sans-serif;font-weight:400;font-size:15px;margin-bottom:10px}
.reset{display:inline-block;font-size:14px;color:var(--green);text-decoration:none;
  border-bottom:1px dashed var(--green);padding-bottom:1px}
.reset:hover{color:var(--ink);border-color:var(--ink)}

.filter-row{display:flex;align-items:center;gap:9px;padding:7px 0;
  text-decoration:none;color:var(--ink);font-size:15px}
.filter-row:hover .filter-name{color:var(--green)}
.check{flex:0 0 17px;width:17px;height:17px;border:1.5px solid var(--border);
  border-radius:5px;position:relative;transition:border-color .2s ease,background .2s ease}
.filter-row:hover .check{border-color:var(--green-light)}
.picked .check{background:var(--green);border-color:var(--green)}
/* Галочка нарисована двумя гранями повёрнутого прямоугольника —
   так не нужен ни значок, ни картинка, и она всегда чёткая. */
.picked .check::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.filter-name{flex:1;transition:color .2s ease}
.picked .filter-name{font-weight:500}
.count{color:var(--text-soft);font-size:13px;font-variant-numeric:tabular-nums}

.price-form{display:flex;align-items:center;gap:6px}
.price-form input{width:100%;min-width:0;padding:9px 10px;font:inherit;font-size:14px;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
.price-form input:focus{outline:2px solid var(--green-light);outline-offset:1px;border-color:transparent}
.price-form span{color:var(--text-soft)}
.price-form button{padding:9px 13px;font:inherit;font-size:14px;cursor:pointer;
  border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--ink)}
.price-form button:hover{background:var(--green);color:#fff;border-color:var(--green)}

.products-part{min-width:0}
.toolbar{min-width:0;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.search-form{display:flex;gap:8px;flex:1 1 300px;min-width:0;max-width:100%}
.search-form input{flex:1;min-width:0;padding:11px 15px;font:inherit;font-size:15px;
  border:1px solid var(--border);border-radius:100px;background:#fff;color:var(--ink)}
.search-form input:focus{outline:2px solid var(--green-light);outline-offset:1px;border-color:transparent}
.search-form button{padding:11px 22px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  border:0;border-radius:100px;background:var(--green);color:#fff;transition:background .2s ease}
.search-form button:hover{background:var(--pine-soft)}

.sorting{display:flex;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}
.sorting a{font-size:14px;color:var(--text-soft);text-decoration:none;
  padding:8px 14px;border-radius:100px;border:1px solid transparent;transition:all .2s ease}
.sorting a:hover{border-color:var(--border);color:var(--ink)}
.sorting a.picked{background:var(--pine);color:#fff;border-color:var(--pine)}

.grid{min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{min-width:0;display:block;text-decoration:none;color:var(--ink)}
.frame{position:relative;aspect-ratio:3/4;background:#F2F6F3;border-radius:14px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  transition:background .3s ease}
.card:hover .frame{background:#E8F1EB}
.frame img{max-width:78%;max-height:78%;width:auto;height:auto;display:block;
  transition:transform .4s ease,filter .4s ease}
/* Наведение зажигает фонарь — для товара, который светит,
   это самый понятный отклик. */
.card:hover .frame img{transform:scale(1.06);filter:brightness(1.12) saturate(1.2)}
.badge-sale{position:absolute;left:10px;bottom:10px;background:var(--green);color:#fff;
  font-size:13px;font-weight:500;padding:4px 10px;border-radius:100px}
.badge-out{position:absolute;left:10px;top:10px;background:rgba(18,33,28,.78);color:#fff;
  font-size:12px;padding:4px 10px;border-radius:100px}
.price-row{margin-top:12px;display:flex;align-items:baseline;flex-wrap:wrap}
.price-row s{margin-left:8px}
.price-row b{font-size:19px;font-weight:500}
.price-row s{color:var(--text-soft);font-size:14px}
.product-name{margin-top:5px;font-size:14px;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-bottom{margin-top:6px;display:flex;flex-wrap:wrap;font-size:13px}
.card-bottom span+span{margin-left:10px}
.card-brand{color:var(--text-soft)}
.in-stock{color:var(--green)}

.pages{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:48px;flex-wrap:wrap}
.pages a,.pages span{min-width:40px;height:40px;display:flex;align-items:center;
  justify-content:center;padding:0 12px;border-radius:10px;font-size:15px;text-decoration:none;
  color:var(--ink);border:1px solid var(--border)}
.pages a:hover{border-color:var(--green);color:var(--green)}
.pages .current{background:var(--pine);color:#fff;border-color:var(--pine)}
.pages .dots{border-color:transparent;color:var(--text-soft)}

.empty{text-align:center;padding:70px 20px}
.empty h3{font-family:'Unbounded',sans-serif;font-weight:400;font-size:22px;margin-bottom:12px}
.empty p{color:var(--text-soft);max-width:44ch;margin:0 auto 26px}
.empty .buttons{justify-content:center}
.btn-second.dark{color:var(--ink);border-color:var(--border)}
.btn-second.dark:hover{background:#fff;border-color:var(--green);color:var(--green)}

@media (max-width:1100px){
  .cat-row{grid-template-columns:225px minmax(0,1fr);gap:30px}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}

/* На узком экране отбор прячется за кнопку и выезжает поверх.
   Работает на одной галочке в разметке, без скриптов: если скрипты
   отключены или не загрузились, отбор всё равно открывается. */
@media (max-width:900px){
  .cat-top{padding:132px 0 34px}
  .cat-row{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:70px}
  .filter-btn{display:inline-block;margin-bottom:18px;padding:12px 24px;
    border:1px solid var(--border);border-radius:100px;font-size:15px;font-weight:500;
    cursor:pointer;background:#fff}
  .filter-btn:hover{border-color:var(--green);color:var(--green)}
  .filters{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#fff;padding:20px 22px 40px;
    overflow-y:auto;display:none}
  .filter-key:checked ~ .filters{display:block}
  .filter-close{display:block;text-align:right;font-size:15px;color:var(--green);
    cursor:pointer;margin-bottom:8px;font-weight:500}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:640px){
  .cat-top{padding:126px 0 28px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .price-row b{font-size:17px}
  .product-name{font-size:13px}
  .toolbar{gap:12px;margin-bottom:18px}
  .sorting{width:100%;min-width:0;max-width:100%;overflow-x:auto;
    flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .search-form{flex:1 1 100%}
  .sorting a{white-space:nowrap;font-size:13px;padding:7px 12px}
  .filter-row{padding:10px 0}
  .pages{margin-top:34px}
}

/* ================= СТРАНИЦА ТОВАРА ================= */
.prod-top{background:var(--pine);padding:100px 0 26px}
.crumbs{display:flex;flex-wrap:wrap;font-size:14px}
.crumbs a+a{margin-left:10px}
.crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs a+a::before{content:"/";margin-right:10px;color:rgba(255,255,255,.3)}

.prod-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:52px;padding-top:36px;padding-bottom:70px;align-items:start}
.prod-frame{position:relative;aspect-ratio:1/1;background:#F2F6F3;border-radius:20px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.prod-frame img{max-width:80%;max-height:80%;width:auto;height:auto}

.prod-title{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(22px,2.6vw,32px);line-height:1.18;letter-spacing:-.025em}
.sku-row{margin-top:10px;color:var(--text-soft);font-size:14px}
.price-big{margin-top:22px;display:flex;align-items:baseline;flex-wrap:wrap}
.price-big s{margin-left:12px}
.price-big b{font-family:'Unbounded',sans-serif;font-weight:600;font-size:34px;letter-spacing:-.03em}
.price-big s{color:var(--text-soft);font-size:18px}
.stock-row{margin-top:10px;font-size:15px}
.stock-row.in-stock{color:var(--green)}
.stock-row.out{color:var(--text-soft)}
.prod-right .buttons{margin-top:24px}

.fits{margin-top:34px}
.fits h3,.description h3{font-family:'Unbounded',sans-serif;font-weight:400;
  font-size:16px;margin-bottom:12px}
.cars{display:flex;gap:8px;flex-wrap:wrap}
.car{border:1px solid var(--border);border-radius:100px;padding:7px 14px;font-size:14px}

.specs{width:100%;margin-top:32px;border-collapse:collapse;font-size:15px}
.specs td{padding:11px 0;border-bottom:1px solid var(--border);vertical-align:top}
.specs td:first-child{color:var(--text-soft);width:45%;padding-right:16px}

.description{margin-top:32px}
.description p{color:var(--ink);line-height:1.7}

.similar{padding:0 0 90px}
.similar h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:26px}

@media (max-width:900px){
  .prod-top{padding:128px 0 20px}
  .prod-row{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:50px}
  .prod-frame{aspect-ratio:4/3}
  .price-big b{font-size:28px}
  .similar{padding-bottom:64px}
}

/* ================= СТРАНИЦА МАГАЗИНА ================= */
nav a.here{color:#fff;font-weight:500}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:15px}

.shop-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:52px;padding-top:40px;padding-bottom:80px;align-items:start}
.info-block{margin-bottom:46px}
.info-block:last-child{margin-bottom:0}
.info-block h2{font-family:'Unbounded',sans-serif;font-weight:400;
  font-size:19px;letter-spacing:-.01em;margin-bottom:12px;max-width:none}
.info-block .note{margin-top:0}
.info-block .hours{margin-top:0}
.contact{margin-top:26px;margin-bottom:24px}

.shop-right{position:sticky;top:20px;min-width:0}
.map{width:100%;height:460px;border-radius:20px;overflow:hidden;
  background:#EDF3EF;z-index:1}
/* Значок магазина рисуем сами: у готового значка своя картинка
   отдельным файлом, а этот — просто кружок с обводкой. */
.marker-dot{display:block;width:20px;height:20px;border-radius:50%;
  background:var(--green);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
.map-fallback{display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;padding:24px;text-align:center;
  color:var(--text-soft);font-size:15px;gap:8px}
.map-fallback a{color:var(--green)}
.map .maplibregl-ctrl-attrib{font-size:10px}
.map-under{margin-top:12px;font-size:14px}
.map-under a{color:var(--green);text-decoration:none;border-bottom:1px dashed var(--green)}
.map-under a:hover{color:var(--ink);border-color:var(--ink)}

@media (max-width:900px){
  .shop-row{grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:60px}
  .shop-right{position:static}
  .map{height:360px}
}
@media (max-width:640px){
  .map{height:300px;border-radius:14px}
  .info-block{margin-bottom:38px}
  .footer-links{flex-direction:row;gap:18px;flex-wrap:wrap}
}

/* Состояние карты, пока она собирается. Видно прямо в блоке —
   на телефоне журнал браузера не открыть, а понять, где застряло, надо. */
.map-status{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;color:var(--text-soft);font-size:14px;pointer-events:none}
.map{position:relative}