:root{
  --bg:#ffffff; --soft:#f4f4f6; --soft2:#ececf0; --ink:#0d0d11; --mu:#6d6d78;
  --ac:#ff5c00; --star:#ffa800; --wrap:1280px; --r:22px; --pad:22px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;text-wrap:balance;font-family:Geologica,Inter,sans-serif;font-weight:600;
  letter-spacing:-.03em;line-height:1.05}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
a{color:inherit}

/* шапка */
.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  transition:transform .25s ease}
.hd > .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-height:76px;padding-block:12px}
/* верхний ряд — только ссылки */
.htop{border-bottom:1px solid var(--soft)}
.htop .wrap{display:flex;justify-content:flex-end;padding-block:9px}
.htop .hnav{margin:0;gap:24px;font-size:14px}
/* нижний ряд — логотип, каталог, поиск, корзина */
.hmain .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:14px;min-height:74px;padding-block:11px}
.lg{font-family:Geologica,sans-serif;font-weight:700;font-size:23px;letter-spacing:-.05em;
  text-decoration:none;flex:none}
.lg i{font-style:normal;color:var(--ac)}
/* в магазине строка поиска стоит в ряду всегда, в справочнике — раскрывается лупой */
.srch{flex:1;display:flex;min-width:0;height:48px;background:var(--soft);
  border-radius:99px;padding:0 6px 0 18px;align-items:center;gap:10px}
/* поиск справочника — во всю ширину между логотипом и кнопкой «В магазин» */
.hdhelp .srch{display:flex;flex:1;max-width:none}
.srch svg{width:18px;height:18px;color:var(--mu);flex:none}
.srch input{flex:1;min-width:0;border:0;background:none;font:400 15px Inter,sans-serif;color:inherit}
.srch input:focus{outline:none}
.hnav{display:flex;gap:22px;font-size:14.5px;font-weight:500;margin-left:auto;flex:none}
.hnav a{text-decoration:none;color:var(--mu)}
.hnav a:hover{color:var(--ink)}

.ic{display:none;flex:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--soft);
  color:var(--ink);cursor:pointer;place-items:center}
.ic svg{width:20px;height:20px}
.ic:hover{background:var(--soft2)}
.cart{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:4px 8px;border:0;background:none;color:var(--ink);cursor:default;
  font:500 11.5px Inter,sans-serif}
.cart span{color:var(--mu)}
.cart svg{width:24px;height:24px}
.cart em{position:absolute;top:-6px;right:-4px;background:var(--ac);color:#fff;font-style:normal;
  font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:99px}

/* меню выезжает справа поверх страницы */
.mmenu{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(330px,86vw);background:#fff;
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .25s ease;
  box-shadow:-18px 0 50px rgba(13,13,17,.16);overscroll-behavior:contain}
.mmenu.open{transform:none}
.mmhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px 12px 22px;border-bottom:1px solid var(--soft)}
.mmhead b{font-family:Geologica,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.03em}
.mmclose{display:grid}
.mmbody{display:flex;flex-direction:column;padding:6px 22px 24px;overflow-y:auto}
.mmenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;text-decoration:none;font-size:15.5px;font-weight:500;
  border-bottom:1px solid var(--soft)}
.mmenu a:last-child{border-bottom:0}
.mmenu a i{font-style:normal;font-size:13px;color:var(--mu)}
/* затемнение за панелью */
.scrim{position:fixed;inset:0;z-index:94;background:rgba(13,13,17,.45);
  opacity:0;transition:opacity .25s ease}
.scrim.open{opacity:1}
.scrim[hidden]{display:none}

/* герой */
.hero{padding:26px 0 44px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:stretch}
.hcopy{background:var(--soft);border-radius:var(--r);padding:clamp(28px,4vw,52px);
  display:flex;flex-direction:column;justify-content:center}
.hcopy h1{font-size:clamp(30px,4.4vw,56px)}
.hcopy p{margin:18px 0 0;color:var(--mu);font-size:clamp(15px,1.4vw,17.5px);max-width:34ch}
.hbtns{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
/* border и appearance обнуляем: .btn бывает и ссылкой, и кнопкой формы,
   а у <button> браузер рисует свою серую рамку */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;
  border:0;-webkit-appearance:none;appearance:none;cursor:pointer;
  border-radius:99px;text-decoration:none;font:600 15px Inter,sans-serif;
  background:var(--ink);color:#fff;transition:transform .15s,opacity .15s}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn.g{background:#fff;color:var(--ink)}
/* лента скидок */
.sale{padding:0 0 30px}
.salehd{display:flex;align-items:flex-end;gap:20px;padding-bottom:18px}
.salehd h2{font-size:clamp(22px,2.6vw,32px)}
.salehd p{margin:8px 0 0;color:var(--mu);font-size:14.5px}
.salearr{margin-left:auto;display:flex;gap:8px;flex:none}
.salearr .garr{position:static;margin:0;box-shadow:none;background:var(--soft)}
.salearr .garr:hover{background:var(--soft2)}
.salearr .garr[disabled]{opacity:.35;pointer-events:none}
.saletrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:4px}
.saletrack::-webkit-scrollbar{display:none}
.sc{flex:0 0 200px;scroll-snap-align:start;display:flex;flex-direction:column;
  text-decoration:none;min-width:0}
/* пропорция как у карточек каталога: при квадрате товар обрезался сверху и снизу */
.scim{position:relative;display:block;height:0;padding-top:133.333%;border-radius:18px;overflow:hidden;
  background:var(--soft)}
.scim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sc:hover .scim img{transform:scale(1.05)}
.scim .tag{position:absolute;left:10px;top:10px}
.scn{margin:10px 0 6px;font-size:14px;line-height:1.3;font-weight:500;height:calc(2 * 1.3em);
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.scp{display:flex;align-items:baseline;gap:8px}
.scp b{font-family:Geologica,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.03em}
.scp s{font-size:13px;color:#a8a8b2}

/* фильтр */
/* только вертикальные отступы: сокращение padding:6px 0 22px обнуляло боковые
   отступы .wrap, и категории вылезали за край, по которому выровнены все блоки */
.bar{padding-block:6px 22px}
/* категории переносятся на новую строку, а не уходят вправо за экран */
.chips{display:flex;flex-wrap:wrap;gap:9px}
/* .chip бывает и кнопкой, и ссылкой на страницу категории — отсюда text-decoration */
.chip{flex:none;display:flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:0;
  border-radius:99px;background:var(--soft);color:var(--ink);cursor:pointer;white-space:nowrap;
  text-decoration:none;font:500 14.5px Inter,sans-serif;transition:background .15s,color .15s}
.chip i{font-style:normal;font-size:12.5px;color:var(--mu)}
.chip:hover{background:var(--soft2)}
.chip.on{background:var(--ink);color:#fff}
.chip.on i{color:rgba(255,255,255,.6)}

/* сетка */
.cathd{display:flex;align-items:baseline;gap:14px;padding-bottom:18px}
.cathd h2{font-size:clamp(22px,2.4vw,30px)}
.cathd span{color:var(--mu);font-size:14.5px}
/* minmax(0,1fr), а не 1fr: иначе колонка не уже своего содержимого и при
   сужении окна карточки остаются прежней ширины до перезагрузки */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-bottom:20px}
.p{display:flex;flex-direction:column;min-width:0}
/* скрытие фильтром: у [hidden] display:none браузера слабее правила .p выше,
   поэтому задаём явно — иначе счётчик меняется, а карточки остаются на месте */
.p[hidden],[hidden]{display:none!important}
/* пропорция снимка как в карточке Wildberries — 3:4, кадр целиком.
   Высоту задаёт padding, а не aspect-ratio: Safari не пересчитывает
   aspect-ratio внутри flex-колонки при изменении ширины окна */
.pim{position:relative;display:block;flex:none;height:0;padding-top:133.333%;
  background:var(--soft);border-radius:var(--r);overflow:hidden}
.pim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.p:hover .pim img{transform:scale(1.04)}
.tags{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:2;
  align-items:flex-start}
.tag{background:var(--ac);color:#fff;font:600 12px Inter,sans-serif;padding:5px 10px;border-radius:99px}
.tag.low{background:#fff;color:var(--ink)}
.pb{padding:14px 4px 0;display:flex;flex-direction:column;flex:1 1 auto}
.prate{display:flex;align-items:center;gap:5px;font:500 13px/1.2 Inter,sans-serif;color:var(--mu);
  white-space:nowrap;overflow:hidden}
.prate svg{width:15px;height:15px;flex:none;color:var(--star)}
.prate b{font-weight:600;color:var(--ink)}
.prate i{font-style:normal}
.prate span{overflow:hidden;text-overflow:ellipsis}
/* высота названия и подписи — ровно две строки, лишнее обрезается многоточием:
   так кнопки «Купить» во всём ряду стоят на одной линии в любом браузере */
.pb h3{margin:8px 0 4px;font-family:Inter,sans-serif;font-size:15.5px;font-weight:600;
  letter-spacing:-.015em;line-height:1.3;height:calc(2 * 1.3em);overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.pb h3 a{text-decoration:none}
.pb h3 a:hover{color:var(--ac)}
.pb p{margin:0;font-size:13.5px;color:var(--mu);line-height:1.4;height:calc(2 * 1.4em);overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.pprice{display:flex;align-items:baseline;gap:9px;margin:14px 0 12px}
.pprice b{font-family:Geologica,sans-serif;font-size:22px;font-weight:600;letter-spacing:-.04em}
.pprice s{font-size:13.5px;color:#a8a8b2}
/* текст центрируем флексом: шорткат font ниже сбрасывает line-height, из-за этого
   надпись «Купить» прилипала к верху кнопки */
.pbuy{display:flex;flex:none;align-items:center;justify-content:center;height:46px;border-radius:99px;
  background:var(--soft);color:var(--ink);text-decoration:none;font:600 14.5px Inter,sans-serif;
  margin-top:auto;transition:background .15s,color .15s}
.pbuy:hover{background:var(--ink);color:#fff}
.none{grid-column:1/-1;padding:60px 0;text-align:center;color:var(--mu)}

/* полоса доверия */
.why{padding:44px 0}
.why .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wc{background:var(--soft);border-radius:var(--r);padding:28px}
/* .wc span красит текст в серый — иконке цвет задаём отдельно, специфичнее */
.wc .wcim{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;
  color:var(--ac);margin-bottom:18px}
.wcim svg{width:24px;height:24px}
.wc b{display:block;font-family:Geologica,sans-serif;font-size:clamp(26px,3vw,36px);font-weight:600;
  letter-spacing:-.04em;margin-bottom:8px}
.wc span{font-size:14.5px;color:var(--mu);line-height:1.5}

/* как купить */
.how{padding:0 0 44px}
/* плашка — отдельный элемент внутри .wrap, иначе она упирается в края экрана */
.hpanel{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(26px,4vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px}
.hpanel h2{font-size:clamp(21px,2.4vw,28px);color:#fff}
.hpanel p{margin:8px 0 0;color:#9c9ca8;font-size:15px;max-width:52ch}
.hpanel a{margin-left:auto;background:var(--ac);color:#fff;text-decoration:none;font:600 15px Inter,sans-serif;
  height:52px;display:inline-flex;align-items:center;padding:0 28px;border-radius:99px}
.hpanel a:hover{opacity:.92}

/* подвал целиком по центру — и ссылки, и текст */
footer{padding:34px 0 46px;font-size:13.5px;color:var(--mu);line-height:1.7;text-align:center;
  border-top:1px solid var(--soft2)}
footer a{color:var(--mu);text-decoration:none}
footer a:hover{color:var(--ink)}
.fn{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 22px;margin-bottom:18px;
  font-size:14.5px;font-weight:500}

@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .why .wrap{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hnav{display:none}
  .htop{display:none}
  /* шапка закреплена сверху и прячется при прокрутке вниз */
  .hd{position:fixed;left:0;right:0;top:0}
  body{padding-top:var(--hdh,132px)}
  .hd.hd-off{transform:translateY(-100%)}
  .hmain .wrap{gap:10px;min-height:64px;padding-block:10px}
  .srch{order:9;flex-basis:100%}
  .cart{order:4;margin-left:auto}
  .mbtn{order:5}
  .cart span{display:none}
  .cart{padding:0;width:48px;justify-content:center;border-radius:50%}
}
@media (max-width:640px){
  :root{--pad:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hd > .wrap{min-height:64px;gap:10px}
  .hpanel a{margin-left:0}
  .pb h3{font-size:14.5px}
  .chips{gap:7px}
  .chip{height:40px;padding:0 14px;font-size:13.5px;gap:6px}
}
@media (prefers-reduced-motion:reduce){.pim img{transition:none} .btn:hover{transform:none}}

/* ───────── общие для внутренних страниц ───────── */
.pim{text-decoration:none}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;padding:18px 0 4px;font-size:13.5px;color:var(--mu)}
.crumbs a{text-decoration:none;color:var(--mu)}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.5}
.crumbs span{color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec{padding:34px 0}
.sec > .wrap > h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:18px}

/* ───────── страница товара ───────── */
.pp{padding:14px 0 10px}
.pp > .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}

/* галерея: лента с прокруткой по снимкам — на телефоне листается пальцем */
.gal{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px}
.gtrack{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;border-radius:var(--r);background:var(--soft);overscroll-behavior-x:contain}
.gtrack::-webkit-scrollbar{display:none}
.gslide{flex:0 0 100%;scroll-snap-align:start;position:relative;height:0;padding-top:133.333%}
.gslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gwrap{grid-column:2;grid-row:1;position:relative;min-width:0}
.gcount{position:absolute;right:14px;bottom:14px;background:rgba(13,13,17,.72);color:#fff;
  font:500 12.5px Inter,sans-serif;padding:5px 10px;border-radius:99px;pointer-events:none}
.garr{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 4px 16px rgba(13,13,17,.1);transition:opacity .15s}
.garr svg{width:18px;height:18px}
.garr.prev{left:14px}.garr.next{right:14px}
.garr[disabled]{opacity:0;pointer-events:none}
/* высота 0 + min-height 100%: столбик миниатюр не растягивает ряд, а равен высоте фото */
.gthumbs{position:relative;grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;height:0;min-height:100%;overflow-y:auto;
  scrollbar-width:none}
.gthumbs::-webkit-scrollbar{display:none}
.gthumbs button{flex:none;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;
  background:var(--soft);cursor:pointer;width:76px;height:101px;transition:border-color .15s}
.gthumbs button img{width:100%;height:100%;object-fit:cover}
.gthumbs button.on{border-color:var(--ink)}
.gthumbs button:hover{border-color:var(--soft2)}
.gthumbs button.on:hover{border-color:var(--ink)}

.pinfo{position:sticky;top:96px}
.pinfo .prate{font-size:14px}
.pinfo .prate svg{width:17px;height:17px}
.pinfo h1{font-size:clamp(26px,3vw,38px);margin:12px 0 10px}
.psub{margin:0;color:var(--mu);font-size:16px}
.pcost{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:26px 0 20px}
.pcost b{font-family:Geologica,sans-serif;font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1}
.pcost s{font-size:17px;color:#a8a8b2}
.pcost .tag{font-size:13px;padding:6px 11px}
.bigbuy{display:flex;align-items:center;justify-content:center;gap:10px;height:58px;border-radius:99px;
  background:var(--ac);color:#fff;text-decoration:none;font:600 16.5px Inter,sans-serif;transition:opacity .15s}
.bigbuy:hover{opacity:.9}
.bigbuy svg{width:18px;height:18px}
.pnote{margin:12px 0 0;font-size:13.5px;color:var(--mu);line-height:1.5}
.plow{display:inline-block;margin-top:14px;font:600 13px Inter,sans-serif;color:var(--ac)}
.facts{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--soft2)}
.facts li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--soft2);
  font-size:14.5px}
.facts li span{color:var(--mu)}
.facts li b{font-weight:500;text-align:right}

.pdesc{max-width:none}
.pdesc p{margin:0 0 14px;font-size:16px;line-height:1.65}
/* колонки, а не сетка: группы разной длины встают друг под другом без пустот */
.specs{columns:2;column-gap:16px}
.sgrp{break-inside:avoid;margin-bottom:16px;background:var(--soft);border-radius:var(--r);padding:22px 24px}
.sgrp h3{font-family:Inter,sans-serif;font-size:15.5px;letter-spacing:-.01em;margin-bottom:6px}
.sgrp dl{margin:0}
.sgrp div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;padding:10px 0;
  border-bottom:1px solid var(--soft2);font-size:14px;line-height:1.45}
.sgrp div:last-child{border-bottom:0}
.sgrp dt{color:var(--mu)}
.sgrp dd{margin:0;overflow-wrap:anywhere}

/* нижняя панель покупки на телефоне */
.buybar{display:none}

/* ───────── о нас, контакты ───────── */
.phead{padding:10px 0 6px}
.phead h1{font-size:clamp(32px,4.4vw,54px);margin:10px 0 16px}
/* Описание тянется на всю ширину блока: узкая колонка выглядела прижатой влево */
.lead{margin:0;font-size:clamp(16px,1.6vw,19px);color:var(--mu);max-width:none;line-height:1.55}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.box{background:var(--soft);border-radius:var(--r);padding:26px 28px}
.box h3{font-family:Inter,sans-serif;font-size:17px;letter-spacing:-.015em;margin-bottom:10px}
.box p{margin:0;color:var(--mu);font-size:15px;line-height:1.55}
.box p + p{margin-top:10px}
.box a{color:var(--ink)}
.box .big{display:block;font-family:Geologica,sans-serif;font-size:clamp(20px,2vw,24px);font-weight:600;
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;margin:6px 0 10px;overflow-wrap:anywhere}
.box .big:hover{color:var(--ac)}
.catlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.catlist a{display:flex;flex-direction:column;gap:4px;background:var(--soft);border-radius:18px;padding:18px 22px;
  text-decoration:none;transition:background .15s}
.catlist a:hover{background:var(--soft2)}
.catlist b{font-weight:600;font-size:15.5px}
.catlist span{font-size:14px;color:var(--mu)}
.req{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 28px;margin:0;font-size:15px}
.req dt{color:var(--mu)}
.req dd{margin:0}

@media (max-width:1080px){
  .pp > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .gal{grid-template-columns:minmax(0,1fr)}
  .gthumbs{display:none}
  .gwrap{grid-column:1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .pp > .wrap{grid-template-columns:minmax(0,1fr)}
  .pinfo{position:static}
  .specs{columns:1}
  /* прячем только стрелки галереи товара: у лент они нужны и на телефоне */
  .gwrap .garr{display:none}
  .buybar{display:flex;align-items:center;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);border-top:1px solid var(--soft2)}
  .buybar b{font-family:Geologica,sans-serif;font-size:24px;font-weight:600;letter-spacing:-.04em;line-height:1}
  .buybar s{display:block;font-size:12.5px;color:#a8a8b2;margin-top:3px}
  .buybar a{margin-left:auto;flex:1;max-width:260px;height:50px;font-size:15.5px}
  body.has-buybar footer{padding-bottom:110px}
}
@media (max-width:640px){
  .pcost b{font-size:34px}
  .catlist{grid-template-columns:minmax(0,1fr)}
  .stats{gap:12px}
  .box{padding:22px}
  .req{grid-template-columns:minmax(0,1fr);gap:2px}
  .req dd{margin-bottom:10px}
}

/* ───────── подсказки поиска ───────── */
.srch{position:relative}
.sres{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;background:#fff;
  border-radius:18px;padding:6px;box-shadow:0 12px 40px rgba(13,13,17,.16);max-height:70vh;overflow-y:auto}
.sres a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;
  text-decoration:none;font-size:14.5px}
.sres a:hover,.sres a:focus{background:var(--soft)}
.sres img{width:38px;height:38px;flex:none;border-radius:9px;object-fit:cover;background:var(--soft)}
.sres .st{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sres b{flex:none;font-family:Geologica,sans-serif;font-weight:600;letter-spacing:-.02em}
.sres .sg{flex:none;font-size:12.5px;color:var(--mu)}
.sres .sall{justify-content:center;font-weight:500;color:var(--mu);border-top:1px solid var(--soft);
  border-radius:0 0 12px 12px;margin-top:4px}
.sempty{margin:0;padding:14px;text-align:center;color:var(--mu);font-size:14.5px}

/* страница результатов */
/* поиск — одна строка на любой ширине: поле тянется, кнопка сжимается */
.spform{display:flex;flex-wrap:nowrap;gap:10px;margin-top:26px;max-width:560px}
.spform input{flex:1 1 auto;min-width:0;width:100%;height:52px;padding:0 20px;border:0;
  border-radius:99px;background:var(--soft);font:400 15.5px Inter,sans-serif;color:inherit;
  text-overflow:ellipsis}
.spform .btn{flex:0 0 auto;padding:0 26px}
.spform input:focus{outline:2px solid var(--ink);outline-offset:1px}
#spres h2{display:flex;align-items:baseline;gap:10px;font-size:clamp(20px,2.2vw,26px);margin:34px 0 16px}
#spres h2:first-child{margin-top:0}
#spres h2 i{font-style:normal;font-size:14.5px;color:var(--mu);font-family:Inter,sans-serif;font-weight:500}
.sgrid .p{text-decoration:none}
.sgrid .sh3{display:block;margin:8px 0 4px;font-size:15.5px;font-weight:600;letter-spacing:-.015em;
  line-height:1.3}
.sgrid .pb p{margin:0 0 10px}

/* ───────── страница категории ───────── */
.catfacts{display:flex;flex-wrap:wrap;gap:14px 36px}
.catfacts span{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--mu)}
.catfacts b{font-family:Geologica,sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:600;
  letter-spacing:-.03em;color:var(--ink)}
.catnav{flex-wrap:wrap}
.catnav a{display:flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:99px;
  background:var(--soft);text-decoration:none;font:500 14.5px Inter,sans-serif;white-space:nowrap}
.catnav a:hover{background:var(--soft2)}
.catnav i{font-style:normal;font-size:12.5px;color:var(--mu)}

/* ───────── списки статей ───────── */
.hlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hlist a{display:flex;flex-direction:column;gap:5px;padding:20px 22px;border-radius:18px;
  background:var(--soft);text-decoration:none;transition:background .15s}
.hlist a:hover{background:var(--soft2)}
.hlist b{font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.hlist span{font-size:14px;color:var(--mu);line-height:1.45}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;font-size:15px}
.more:hover{color:var(--ac)}
.more svg{width:16px;height:16px}

/* ───────── статья: справочник и блог ───────── */
.art{padding:14px 0 10px}
.art h1{font-size:clamp(28px,3.6vw,44px);margin-bottom:16px}
.art .lead{margin:0 0 30px}
.artbody{max-width:none}
.artbody p{margin:0 0 16px;font-size:16.5px;line-height:1.65}
.artbody .sub{font-size:clamp(20px,2.2vw,25px);margin:34px 0 14px}
.artbody .note{font-size:15px;color:var(--mu);background:var(--soft);border-radius:14px;padding:14px 18px}
.callout{display:flex;gap:12px;background:#fff6ed;border:1px solid #ffd8b5;border-radius:16px;
  padding:16px 18px;margin:0 0 18px}
.callout p{margin:0;font-size:15.5px}
.plain{margin:0 0 18px;padding-left:22px}
.plain li{margin-bottom:8px;font-size:16px;line-height:1.55}
.steps{margin:0 0 22px;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;counter-increment:s;padding:0 0 18px 46px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font:600 14px Inter,sans-serif}
.step__t{display:block;font-weight:600;font-size:16.5px;margin-bottom:3px}
.step__d{display:block;color:var(--mu);font-size:15px;line-height:1.55}
.tw{overflow-x:auto;margin:0 0 22px;border-radius:16px;background:var(--soft)}
.tw table{border-collapse:collapse;width:100%;font-size:15px}
.tw th,.tw td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--soft2);vertical-align:top}
.tw th{font-weight:600;white-space:nowrap}
.tw tr:last-child td{border-bottom:0}

/* ───────── блог ───────── */
.blist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bpost{display:flex;flex-direction:column;text-decoration:none;min-width:0}
.bpim{display:block;position:relative;height:0;padding-top:62%;border-radius:var(--r);overflow:hidden;
  background:var(--soft);margin-bottom:14px}
.bpim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.bpost:hover .bpim img{transform:scale(1.04)}
.bmeta{font-size:13px;color:var(--mu)}
.bpost b{margin:7px 0 6px;font-family:Geologica,sans-serif;font-size:19px;font-weight:600;
  letter-spacing:-.03em;line-height:1.2}
.bpost:hover b{color:var(--ac)}
.blead{font-size:14.5px;color:var(--mu);line-height:1.5}
.art .bmeta{margin:0 0 10px}

@media (max-width:1080px){
  .blist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hlist{grid-template-columns:minmax(0,1fr)}
  .catfacts{gap:12px 24px}
}
@media (max-width:640px){
  .blist{grid-template-columns:minmax(0,1fr);gap:26px}
  .sc{flex-basis:160px}
  /* стрелки нужны и на телефоне: иначе непонятно, что блок листается */
  .salehd{align-items:center;gap:12px}
  .salehd h2{font-size:22px}
  .salearr .garr{width:38px;height:38px}
  .salearr .garr svg{width:16px;height:16px}
  .spform{gap:8px;margin-top:20px}
  .spform input{height:48px;padding:0 16px;font-size:15px}
  .spform .btn{height:48px;padding:0 18px;font-size:14.5px}
  .steps li{padding-left:40px}
}

/* ───────── второй баннер в герое ───────── */
.hpromo{display:grid;grid-template-rows:1fr 1fr;gap:20px;min-width:0}
.pbanner{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  gap:16px;border-radius:var(--r);padding:26px 28px;text-decoration:none;overflow:hidden;
  transition:transform .15s}
.pbanner:hover{transform:translateY(-2px)}
.pbanner .pbk{font:600 12.5px Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;opacity:.65}
.pbanner b{font-family:Geologica,sans-serif;font-size:clamp(20px,2.2vw,26px);font-weight:600;
  letter-spacing:-.03em;line-height:1.15;max-width:15ch}
.pbanner .pbf{display:flex;align-items:center;gap:10px;font-size:14.5px}
.pbanner .pbf svg{width:34px;height:34px;flex:none;padding:8px;border-radius:50%;
  background:rgba(255,255,255,.16)}
.pb1{background:var(--ink);color:#fff}
.pb1 .pbf svg{background:rgba(255,255,255,.14)}
.pb2{background:var(--ac);color:#fff}
.pb2 .pbf svg{background:rgba(255,255,255,.2)}
.pbnum{font-family:Geologica,sans-serif;font-size:34px;font-weight:600;letter-spacing:-.04em;line-height:1}

@media (max-width:1080px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hpromo{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hpromo{grid-template-columns:minmax(0,1fr)}
  .pbanner{padding:22px}
}

/* ───────── справочник как отдельный сайт ───────── */
.toshop{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;
  border-radius:99px;background:var(--ink);color:#fff;text-decoration:none;
  font:500 14.5px Inter,sans-serif}
.toshop:hover{background:var(--ac)}
.toshop svg{width:16px;height:16px}
.toshop .shopic{display:none}
/* первый экран справочника — по левому краю, текст во всю ширину блока */
.hhero{padding:34px 0 14px}
.hhero h1{font-size:clamp(34px,5vw,58px);margin-bottom:16px}
.hhero .lead{max-width:none}
.hsecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hsec{display:flex;flex-direction:column;gap:8px;background:var(--soft);border-radius:var(--r);
  padding:26px 28px;text-decoration:none;transition:background .15s}
.hsec:hover{background:var(--soft2)}
.hsec b{display:flex;align-items:baseline;gap:9px;font-family:Geologica,sans-serif;font-size:21px;
  font-weight:600;letter-spacing:-.03em}
.hsec b i{font-style:normal;font-family:Inter,sans-serif;font-size:13.5px;font-weight:500;color:var(--mu)}
.hsec > span{font-size:14.5px;color:var(--mu);line-height:1.5}
.hsec .more{margin-top:4px;font-size:14.5px}
@media (max-width:860px){
  .hsecs{grid-template-columns:minmax(0,1fr)}
  .toshop{display:none}
}
.sempty2{margin:0 0 18px;color:var(--mu);font-size:15px}

/* Логотип справочника — тот же, что в магазине, без единой правки начертания.
   Приписка «справочник» стоит рядом отдельной плашкой и логотип не трогает. */
.hdhelp .lg{display:flex;align-items:center;gap:9px}
.hdhelp .lgs{font-family:Inter,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--mu);padding:4px 9px;border-radius:99px;background:var(--soft)}
/* бургер только на телефоне: на большом экране разделы стоят строкой сверху */
@media (max-width:860px){.hdhelp .mbtn{display:grid}}
/* в магазине бургер только на телефоне, в справочнике — всегда */
@media (max-width:860px){.hd .mbtn{display:grid}}

/* страницы моделей */
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mcard{display:flex;align-items:center;gap:16px;background:var(--soft);border-radius:18px;
  padding:14px 18px 14px 14px;text-decoration:none;transition:background .15s}
.mcard:hover{background:var(--soft2)}
/* пропорция 3:4 — как у самих снимков: квадрат резал товар по краям */
.mcim{flex:none;width:60px;height:80px;border-radius:12px;overflow:hidden;background:#fff}
.mcim img{width:100%;height:100%;object-fit:contain}
.mct{display:flex;flex-direction:column;gap:3px;min-width:0}
.mct b{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.mct span{font-size:13.5px;color:var(--mu);line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.mct i{font-style:normal;font-size:12.5px;color:var(--ac);font-weight:600}
.mhead{padding:10px 0 6px}
.mhead .wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.mshot{position:relative;height:0;padding-top:133.333%;border-radius:var(--r);overflow:hidden;
  background:var(--soft)}
.mshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.minfo h1{font-size:clamp(26px,3vw,38px);margin:10px 0 12px}
.minfo .pbk{color:var(--mu)}
.minfo .facts{margin:22px 0 18px;border-top:1px solid var(--soft2)}
@media (max-width:1080px){
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .mhead .wrap{grid-template-columns:minmax(0,1fr)}
  /* фото модели на узком экране — по центру.
     Центруем через justify-self: у margin:auto в гриде ширина схлопывается в ноль. */
  .mshot{width:min(240px,100%);justify-self:center;padding-top:min(133.333%,320px)}
}
@media (max-width:640px){
  .mgrid{grid-template-columns:minmax(0,1fr)}
}
/* вправо уезжает вся группа: «В магазин», лупа и бургер */
.hdhelp .toshop{margin-left:auto}

/* ───────── плитки категорий на главной ───────── */
.cattiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ctile{display:flex;flex-direction:column;background:var(--soft);border-radius:var(--r);
  overflow:hidden;text-decoration:none;transition:background .15s}
.ctile:hover{background:var(--soft2)}
.ctim{position:relative;display:block;height:0;padding-top:72%;background:#fff}
.ctim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctt{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.ctt b{font-family:Geologica,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.03em}
.ctt span{font-size:13.5px;color:var(--mu);line-height:1.4;min-height:calc(2 * 1.4em)}
.ctt i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ac);margin-top:2px}
.cathd span{color:var(--mu);font-size:14.5px}

/* ───────── отступы в блоках с подзаголовками ───────── */
/* подпись перед сеткой (например, на главной справочника перед моделями) */
.sec > .wrap > .lead{margin-bottom:22px}
/* заголовки разделов внутри страницы модели: iPhone и iPad, Android и прочие */
.sec > .wrap > h2 + .hlist{margin-bottom:8px}
.sec > .wrap > .hlist + h2,
.sec > .wrap > .grid + h2,
.sec > .wrap > .mgrid + h2{margin-top:36px}

/* ───────── крестик очистки в строке поиска ───────── */
/* штатный синий крестик Safari и Chrome заменяем своим, в цвет кнопки «Найти» */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;height:16px;width:16px;cursor:pointer;
  background-color:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.55}
input[type="search"]::-webkit-search-cancel-button:hover{opacity:1}

/* ───────── страница статьи ───────── */
/* Текст идёт во всю ширину контейнера — как и блоки под статьёй, чтобы при
   переходе с других страниц сайт не «схлопывался» в узкую колонку. */
.artbody{max-width:none}
.artbody p,.artbody .plain li{max-width:none}
.artbody .tw{max-width:none}
.art .lead{font-size:clamp(16px,1.6vw,19px);max-width:none}

/* ───────── лента категорий ───────── */
.cattrack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:4px}
.cattrack::-webkit-scrollbar{display:none}
.cattrack .ctile{flex:0 0 260px;scroll-snap-align:start}
.cbtn{flex:none;margin-left:auto;gap:10px}
.cbtn svg{width:17px;height:17px}
.catmore{margin:22px 0 0;text-align:center}
.catmore .btn{background:var(--soft);color:var(--ink);gap:10px}
.catmore .btn:hover{background:var(--soft2)}
.catmore svg{width:16px;height:16px}

@media (max-width:1080px){
  .cattiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .cbtn{display:none}
}
@media (max-width:640px){
  .cattiles{grid-template-columns:minmax(0,1fr)}
  .cattrack .ctile{flex-basis:220px}
}


/* ───────── уведомление о куки ───────── */
.cookie{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:70;
  display:flex;align-items:center;gap:18px;width:min(720px,calc(100% - 32px));
  padding:16px 18px 16px 22px;border-radius:20px;background:var(--ink);color:#fff;
  box-shadow:0 12px 40px rgba(13,13,17,.25)}
.cookie p{margin:0;font-size:14px;line-height:1.5;color:#d6d6de}
.cookie .btn{flex:none;height:44px;padding:0 24px;background:#fff;color:var(--ink);font-size:14.5px}
.cookie .btn:hover{opacity:.9}
/* на странице товара внизу уже висит панель покупки — поднимаем над ней */
@media (max-width:860px){
  .has-buybar .cookie{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  .cookie{flex-direction:column;align-items:stretch;gap:12px;padding:16px;bottom:12px;
    width:calc(100% - 24px)}
  .cookie .btn{width:100%}
}

/* ───────── кнопка «Каталог» в шапке ───────── */
.hcat{flex:none;display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 20px 0 17px;
  border-radius:99px;background:var(--soft);color:var(--ink);text-decoration:none;
  font:500 14.5px Inter,sans-serif;transition:background .15s}
.hcat:hover{background:var(--soft2)}
.hcat svg{width:19px;height:19px}
.hnav{margin-left:auto}
@media (max-width:860px){
}

/* кнопка «Каталог» на телефоне — с подписью, сразу после логотипа.
   Ряд узкий, поэтому ужимаем отступы самой кнопки, а не логотип и иконки. */
@media (max-width:860px){
  .lg{font-size:21px}
  .hcat{display:inline-flex;order:2;gap:7px;padding:0 13px 0 11px;font-size:13.5px}
  .hcat svg{width:17px;height:17px}
  .hmain .wrap{gap:8px}
}
/* на совсем узких экранах подпись не влезает — остаётся значок */
@media (max-width:379px){
  .hcat{padding:0;width:48px;justify-content:center;border-radius:50%}
  .hcat span{display:none}
}

/* ───────── шапка справочника на узком экране ───────── */
@media (max-width:860px){
  .hdhelp .srch{order:9;flex-basis:100%;max-width:none}
  /* «В магазин» и бургер — справа от логотипа, в один ряд с ним.
     Логотип, плашка и иконки остаются обычного размера, поэтому у кнопки
     «В магазин» на телефоне прячем подпись и оставляем значок. */
  .hdhelp .toshop{display:inline-flex;margin-left:auto;width:48px;height:48px;padding:0;
    justify-content:center;border-radius:50%}
  .hdhelp .toshop span{display:none}
  .hdhelp .toshop svg{display:none}
  .hdhelp .toshop .shopic{display:block;width:20px;height:20px}
  .hdhelp .hmain .wrap{flex-wrap:wrap;gap:10px}
}

/* ───────── фото товара во весь экран ───────── */
.gslide{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(13,13,17,.92);padding:56px 16px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(100%,900px);max-height:100%;object-fit:contain;border-radius:14px;
  background:#fff}
.lbclose,.lbprev,.lbnext{position:absolute;display:grid;place-items:center;width:48px;height:48px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  transition:background .15s}
.lbclose:hover,.lbprev:hover,.lbnext:hover{background:rgba(255,255,255,.26)}
.lbclose{top:14px;right:14px}
.lbprev{left:16px;top:50%;margin-top:-24px}
.lbnext{right:16px;top:50%;margin-top:-24px}
.lbclose svg,.lbprev svg,.lbnext svg{width:20px;height:20px}
.lbcount{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;color:#fff;
  font:500 13.5px Inter,sans-serif;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:99px}
@media (max-width:640px){
  .lightbox{padding:60px 8px 64px}
  .lbprev,.lbnext{width:42px;height:42px;margin-top:-21px}
  .lbprev{left:8px}.lbnext{right:8px}
}