/* ============================================================
   ДАЛИНИ · Вариант 1 — Современный минимализм
   Светлая тема, много воздуха, тонкие линии, янтарный акцент.
   ============================================================ */
:root{
  --ink:#0E0E10;
  --ink-2:#4A4A52;
  --muted:#767680;   /* поднят до контраста 4,3:1 на белом */
  --line:#E7E7EA;
  --line-2:#F0F0F2;
  --bg:#FFFFFF;
  --surface:#F6F6F7;
  --amber:#F7B70B;
  --amber-d:#D89E00;
  --green:#149A5A;
  --steel:#31353E;
  --r:14px;
  --r-s:10px;
  --shadow:0 1px 2px rgba(14,14,16,.04), 0 8px 28px -12px rgba(14,14,16,.14);
  --shadow-l:0 2px 6px rgba(14,14,16,.05), 0 24px 60px -24px rgba(14,14,16,.22);
  --wrap:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,'Segoe UI',system-ui,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 0;
}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ---------- типографика ---------- */
h1,h2,h3,h4{margin:0;letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(34px,5.2vw,62px);letter-spacing:-.038em}
h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.032em}
h3{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em}
p{margin:0}
.lead{font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);line-height:1.6}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--amber)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:var(--r-s);
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  transition:.22s var(--ease);white-space:nowrap;
}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#26262c;transform:translateY(-1px)}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:#ffc824;transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(247,183,11,.9)}
.btn--ghost{border:1px solid var(--line);background:#fff}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--sm{height:42px;padding:0 18px;font-size:14px}
.btn--block{width:100%}

/* ---------- иконки ---------- */
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i--s{width:16px;height:16px}

/* ============ ТОПБАР ============ */
.topbar{border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-2);background:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:42px;gap:24px}
.topbar nav{display:flex;gap:22px}
.topbar a:hover{color:var(--ink)}
.topbar .right{display:flex;align-items:center;gap:20px}

/* На телефоне шесть ссылок верхней строки не помещались и выталкивали
   правый блок за экран — страница становилась шире вьюпорта, и браузер
   уменьшал её целиком (на 375px — до 55%, весь сайт мелкий). Ссылки
   убираем в горизонтальную прокрутку, город прячем: он есть в подвале
   и на контактах, а вход в кабинет с телефона доступен только отсюда —
   в шапке эти кнопки скрыты. */
@media(max-width:820px){
  .topbar .wrap{gap:14px}
  .topbar nav{flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;gap:16px;scrollbar-width:none;-ms-overflow-style:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar .right{flex:none;gap:14px}
  .topbar .geo{display:none}
}
.geo{display:flex;align-items:center;gap:6px}
.geo b{font-weight:600;color:var(--ink);border-bottom:1px dashed var(--muted)}

/* ============ ШАПКА ============ */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line-2);transition:.25s var(--ease)}
.header .wrap{display:flex;align-items:center;gap:22px;height:84px;transition:height .25s var(--ease)}
.header.is-stuck .wrap{height:66px}
.logo{flex:none;width:150px}
.logo img{width:100%}
.search{flex:1;display:flex;align-items:stretch;height:50px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;transition:.2s var(--ease);background:#fff}
.search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.06)}
.search input{flex:1;border:0;outline:0;padding:0 16px;font:inherit;font-size:15px;min-width:0}
.search input::placeholder{color:var(--muted)}
.search button{width:56px;display:grid;place-items:center;background:var(--amber);color:var(--ink);transition:.2s}
.search button:hover{background:#ffc824}
.hactions{display:flex;align-items:center;gap:4px;flex:none}
.hact{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;padding:8px 0;border-radius:10px;font-size:11px;color:var(--ink-2);transition:.18s}
.hact:hover{background:var(--surface);color:var(--ink)}
.hact .cnt{position:absolute;top:2px;right:12px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--amber);color:var(--ink);font-size:10px;font-weight:700;display:grid;place-items:center}
.hphone{flex:none;text-align:right;line-height:1.25}
.hphone b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em}
.hphone span{font-size:12px;color:var(--muted)}
@media(max-width:1080px){.hphone{display:none}}
@media(max-width:820px){.hact:nth-child(1),.hact:nth-child(2){display:none}}

/* На телефоне логотип, поиск и корзина в одну строку не влезают: полю
   поиска оставалось 69 пикселей — вводить в такое нельзя. Переносим
   поиск на вторую строку во всю ширину, логотип и корзина остаются
   в первой. */
@media(max-width:560px){
  .header .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;gap:12px}
  .header.is-stuck .wrap{height:auto}
  .logo{width:132px}
  .search{order:3;flex:1 0 100%;height:46px}
  .hactions{margin-left:auto}
  /* Прокрутили страницу — поиск убираем: две строки прилипшей шапки
     съедают шестую часть экрана телефона. Логотип и корзина остаются. */
  .header.is-stuck .search{display:none}
}

/* ============ МЕНЮ КАТАЛОГА ============ */
.catbar{border-bottom:1px solid var(--line-2);background:#fff}
.catbar .wrap{display:flex;align-items:center;gap:8px;height:56px}
.catbtn{display:flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:var(--r-s);background:var(--amber);color:var(--ink);font-weight:600;font-size:14px}
.catbtn:hover{background:var(--amber-d)}
.catnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.catnav a{display:flex;align-items:center;height:40px;padding:0 14px;border-radius:8px;font-size:14px;color:var(--ink-2);white-space:nowrap;transition:.16s}
.catnav a:hover{background:var(--surface);color:var(--ink)}
.catnav a.hot{color:#C8102E}

/* ============ ГЕРОЙ ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-2)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:96px}
.hero__copy>*+*{margin-top:24px}
.hero h1 .am{color:var(--amber-d)}
.hero__pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:var(--ink-2);background:#fff}
.pill svg{width:14px;height:14px;stroke:var(--amber-d);fill:none;stroke-width:2}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}

/* --- hero-art: студийная композиция из реальных снимков --- */
.hero__art{position:relative;aspect-ratio:1/1;display:grid;place-items:center;perspective:1200px}
.hero__art::before{
  content:"";position:absolute;inset:2% 0 6%;border-radius:50%;
  background:radial-gradient(circle at 46% 38%,#FFFFFF 0%,#F4F4F6 44%,#E7E7EB 72%,transparent 100%);
}
.hero__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--line) 1.1px,transparent 1.1px);
  background-size:26px 26px;opacity:.85;
  mask-image:radial-gradient(66% 62% at 50% 48%,#000,transparent 78%);
}
.stage{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.shot{
  position:absolute;border-radius:18px;overflow:hidden;background:#fff;
  border:1px solid var(--line-2);
  box-shadow:0 2px 4px rgba(14,14,16,.05),0 30px 60px -26px rgba(14,14,16,.32);
  transition:.5s var(--ease);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot--main{width:63%;aspect-ratio:1/1;top:11%;right:4%;z-index:3;border-radius:22px}
.shot--a{width:31%;aspect-ratio:1/1;top:3%;left:2%;z-index:2;rotate:-4deg}
.shot--b{width:27%;aspect-ratio:1/1;bottom:9%;left:12%;z-index:4;rotate:3deg}
.hero__art:hover .shot--main{transform:translateY(-6px)}
.hero__art:hover .shot--a{rotate:-6deg;transform:translate(-4px,-4px)}
.hero__art:hover .shot--b{rotate:5deg;transform:translate(-2px,6px)}

/* аннотация размера — единственный янтарный акцент в композиции */
.callout{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;pointer-events:none}
.callout__dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(247,183,11,.22)}
.callout__line{width:52px;height:1px;background:var(--amber)}
.callout__box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 13px;box-shadow:var(--shadow);white-space:nowrap}
.callout__box b{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;font-family:'JetBrains Mono',monospace}
.callout__box span{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.callout--dim{top:22%;right:-2%;flex-direction:row-reverse}
.callout--art{bottom:26%;left:-4%}

/* «серия» — счётчик под миниатюрами */
.serieschip{
  position:absolute;z-index:5;bottom:2%;left:44%;display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 14px;border-radius:99px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(14,14,16,.7);
}
.serieschip i{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-bottom:64px}
  .hero__art{max-width:480px;margin:0 auto;width:100%}
  .callout--dim{right:0}.callout--art{left:0}
}
@media(max-width:520px){.callout__box span{display:none}.callout__line{width:26px}}

/* ============ ПОДБОР ПОДШИПНИКА ============ */
.finder{margin-top:24px;position:relative;z-index:5}
.finder__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-l);padding:26px 28px}
.finder__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.finder__head h3{display:flex;align-items:center;gap:10px}
.finder__head h3 svg{width:22px;height:22px;stroke:var(--amber-d);fill:none;stroke-width:1.6}
.finder__head a{font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.finder__grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.02em}
.field input,.field select{
  width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-s);
  padding:0 14px;font:inherit;font-size:15px;background:#fff;outline:0;transition:.18s;
}
.field input:focus,.field select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.06)}
@media(max-width:900px){.finder__grid{grid-template-columns:1fr 1fr}.finder__grid .btn{grid-column:1/-1}}

/* ============ СЕКЦИИ ============ */
section{padding:88px 0}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.sechead>div>*+*{margin-top:12px}
.link-more{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.link-more svg{width:16px;height:16px;transition:.2s var(--ease)}
.link-more:hover svg{transform:translateX(4px)}

/* ---- категории ---- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{
  display:flex;flex-direction:column;gap:16px;padding:22px 20px 20px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  transition:.24s var(--ease);position:relative;overflow:hidden;min-height:172px;
}
.cat:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.cat svg.ci{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.4;transition:.24s}
.cat:hover svg.ci{stroke:var(--amber-d)}
.cat b{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-top:auto}
.cat span{font-size:12px;color:var(--muted)}
@media(max-width:1080px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---- товары ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:12px 16px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.18s}
.tab.is-on,.tab:hover{color:var(--ink)}
.tab.is-on{border-color:var(--amber);font-weight:600}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1080px){.grid4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grid4{grid-template-columns:repeat(2,1fr)}}

.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:.24s var(--ease)}
.card:hover{box-shadow:var(--shadow-l);border-color:transparent;transform:translateY(-3px)}
.card__badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:var(--ink);color:#fff}
.badge--amber{background:var(--amber);color:var(--ink)}
.badge--out{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.card__fav{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.9);color:var(--muted);opacity:0;transform:translateY(-4px);transition:.22s var(--ease)}
.card:hover .card__fav{opacity:1;transform:none}
.card__fav:hover{color:#C8102E}
.card__img{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;border-bottom:1px solid var(--line-2)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.card:hover .card__img img{transform:scale(1.05)}
.card__body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__brand{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card__name{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.card__meta{font-size:12px;color:var(--muted);line-height:1.45}
.card__dims{display:flex;gap:6px;flex-wrap:wrap}
.dim{font-size:11px;padding:3px 7px;border-radius:5px;background:var(--surface);color:var(--ink-2);font-family:'JetBrains Mono',monospace}
/* Выделен именно размер, а не первый попавшийся чип: у товара без
   размеров рядом остаётся одно обозначение, и цветом бы выделилось оно */
.card__dims .dim--size{font-size:13px;font-weight:600;padding:4px 10px;color:var(--ink);background:#FFF6DC;border:1px solid #F3D77A;letter-spacing:.01em}
.card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.price{font-size:20px;font-weight:700;letter-spacing:-.03em}
.price small{font-size:12px;font-weight:500;color:var(--muted);display:block;letter-spacing:0}
.stock{font-size:12px;display:flex;align-items:center;gap:6px;color:var(--green);font-weight:500}
.stock i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.stock--order{color:var(--muted)}
.card__add{display:flex;align-items:stretch;gap:8px;margin-top:12px}
.card__add .card__buy{margin-top:0;flex:1 1 auto;width:auto;min-width:0}
.card__buy{width:100%;height:44px;margin-top:12px;border-radius:var(--r-s);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s var(--ease)}
.card:hover .card__buy{background:var(--amber)}
.card__buy:hover{background:var(--amber)!important;box-shadow:0 8px 20px -10px rgba(247,183,11,.9)}

/* Товара нет на складе — вместо корзины кнопка запроса. Она намеренно
   тише покупки: это обращение к менеджеру, а янтарь на всю плитку
   обещал бы то же самое, что «В корзину» у позиции в наличии. */
.card__add .card__ask{margin-top:0;flex:1 1 auto;width:auto;min-width:0}
.card__ask{width:100%;height:44px;margin-top:12px;border-radius:var(--r-s);border:1px solid var(--line);background:#fff;color:var(--ink-2);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.2s var(--ease)}
.card:hover .card__ask{border-color:var(--ink-2);color:var(--ink)}
.card__ask:hover{border-color:var(--ink);color:var(--ink);background:var(--surface)}

/* ---- преимущества ---- */
.usp{background:var(--surface);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.usp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.usp__item{padding:0 30px;border-left:1px solid var(--line)}
.usp__item:first-child{padding-left:0;border-left:0}
.usp__item svg{width:28px;height:28px;stroke:var(--amber-d);fill:none;stroke-width:1.5;margin-bottom:16px}
.usp__item b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.usp__item p{font-size:14px;color:var(--ink-2);line-height:1.55}
@media(max-width:900px){.usp__grid{grid-template-columns:1fr 1fr;gap:32px 0}.usp__item:nth-child(odd){padding-left:0;border-left:0}}
@media(max-width:560px){.usp__grid{grid-template-columns:1fr}.usp__item{padding-left:0;border-left:0}}

/* ---- цифры (тёмная) ---- */
.stats{background:var(--ink);color:#fff}
.stats .eyebrow{color:#8A8A93}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden;margin-top:36px}
.stat{background:var(--ink);padding:30px 26px}
.stat b{display:block;font-size:clamp(34px,4.2vw,54px);font-weight:800;letter-spacing:-.05em;color:var(--amber);line-height:1}
.stat span{display:block;margin-top:10px;font-size:13px;color:#A7A7A7;letter-spacing:.02em}
@media(max-width:820px){.stats__grid{grid-template-columns:1fr 1fr}}

/* ---- бренды ---- */
.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.brand{background:#fff;height:104px;display:grid;place-items:center;font-weight:800;font-style:italic;letter-spacing:-.03em;font-size:20px;color:#B6B6BD;transition:.24s}
.brand:hover{color:var(--ink);background:var(--surface)}
.brand.own{color:var(--ink)}
.brand.own::after{content:"свой бренд";display:block;font-style:normal;font-weight:600;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-d);text-align:center;margin-top:4px}
@media(max-width:900px){.brands{grid-template-columns:repeat(3,1fr)}}

/* ---- производство по чертежам ---- */
.custom{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.custom__l{padding:52px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.custom__list{display:flex;flex-direction:column;gap:14px}
.custom__list li{list-style:none;display:flex;gap:12px;font-size:15px;color:var(--ink-2)}
.custom__list svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--amber-d);fill:none;stroke-width:2}
.custom__r{background:var(--ink);color:#fff;padding:52px;display:flex;flex-direction:column;justify-content:center;gap:20px;position:relative;overflow:hidden}
.custom__r::before{content:"";position:absolute;inset:0;background-image:
  repeating-linear-gradient(-45deg,rgba(247,183,11,.12) 0 1px,transparent 1px 14px)}
.custom__r>*{position:relative}
.custom__r h3{font-size:26px;letter-spacing:-.03em}
.custom__r p{color:#A7A7A7;font-size:15px}
.formrow{display:flex;gap:10px;flex-wrap:wrap}
.formrow input{flex:1;min-width:150px;height:50px;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;padding:0 16px;font:inherit;font-size:15px;outline:0}
.formrow input::placeholder{color:#7A7A83}
.formrow input:focus{border-color:var(--amber)}
.note{font-size:11.5px;color:#6E6E76;line-height:1.5}
@media(max-width:860px){.custom{grid-template-columns:1fr}.custom__l,.custom__r{padding:36px 28px}}

/* ---- блог ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{display:flex;flex-direction:column;gap:14px}
.post__img{aspect-ratio:16/10;border-radius:var(--r);background:var(--surface);overflow:hidden;position:relative;border:1px solid var(--line-2)}
.post__img svg{width:100%;height:100%}
.post time{font-size:12px;color:var(--muted);letter-spacing:.03em}
.post b{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.post:hover b{color:var(--amber-d)}
.post p{font-size:14px;color:var(--ink-2)}
@media(max-width:820px){.posts{grid-template-columns:1fr}}

/* ---- футер ---- */
footer{background:var(--ink);color:#A7A7A7;padding:64px 0 28px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.fgrid h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fgrid a:hover{color:var(--amber)}
.flogo{width:150px;margin-bottom:18px}
.fcontacts b{display:block;color:#fff;font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.fcontacts>div+div{margin-top:16px}
.fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:12.5px;color:#6E6E76}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---- появление при скролле ---- */
.rv{opacity:0;transform:translateY(18px);transition:.7s var(--ease)}
.rv.on{opacity:1;transform:none}

/* ---- плашка варианта ---- */
.demobar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:14px;background:rgba(14,14,16,.92);backdrop-filter:blur(12px);color:#fff;border-radius:99px;padding:9px 10px 9px 20px;font-size:13px;box-shadow:0 12px 34px -12px rgba(0,0,0,.6)}
.demobar b{font-weight:600}
.demobar a{background:var(--amber);color:var(--ink);border-radius:99px;padding:7px 14px;font-weight:600;font-size:12.5px}
@media(max-width:560px){.demobar{font-size:11.5px;padding-left:14px}}

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (категория · товар · статья · кабинет)
   ============================================================ */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:20px 0;font-size:13px;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs b{color:var(--ink);font-weight:500}

.pagehead{padding:6px 0 30px;border-bottom:1px solid var(--line-2);margin-bottom:32px}
.pagehead__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pagehead h1{font-size:clamp(28px,3.4vw,44px)}
.pagehead__cnt{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted)}
.pagehead p{margin-top:16px;max-width:78ch}

/* minmax(0,1fr), а не просто 1fr: дорожка fr не сжимается уже своего
   содержимого, и широкий блок внутри (фильтр Mega Filter на странице
   поиска) распирал колонку шире экрана — страница уезжала вбок. */
.layout{display:grid;grid-template-columns:266px minmax(0,1fr);gap:36px;align-items:start;padding-bottom:88px}
@media(max-width:960px){.layout{grid-template-columns:minmax(0,1fr)}}

/* Страницы без боковой колонки: шаблон оставляет обёртку с пустым class,
   и нижнего воздуха у неё нет — корзина, сертификаты, карта сайта и
   инфостраницы упирались в подвал. Даём тот же отступ, что у .layout.
   Главную не трогаем: там последней идёт тёмная полоса, она смыкается
   с подвалом намеренно. */
.wrap:not(.page-home) > div[class=""]{padding-bottom:88px}

/* Лента блога заканчивается страницами — им тоже нужен воздух. */
.wrap > .pager:last-child{padding-bottom:88px}

.fgroup{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.fgroup>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;letter-spacing:-.01em}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:.25s var(--ease)}
.fgroup[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fgroup__b{padding:2px 18px 18px;display:flex;flex-direction:column;gap:11px}
.chk{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--amber);flex:none;margin:0}
.chk:hover{color:var(--ink)}
.chk .n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)}
.range{display:flex;align-items:center;gap:9px}
.range input{width:100%;height:40px;border:1px solid var(--line);border-radius:8px;padding:0 11px;font:inherit;font-size:14px;font-family:'JetBrains Mono',monospace;outline:0;min-width:0}
.range input:focus{border-color:var(--ink)}
.range span{color:var(--muted);font-size:13px}

.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:22px}
.toolbar__sp{flex:1}
.sel{height:42px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;padding:0 34px 0 13px;font:inherit;font-size:14px;color:var(--ink);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238A8A93' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.viewsw{display:flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.viewsw button{width:42px;height:42px;display:grid;place-items:center;color:var(--muted);transition:.18s}
.viewsw button.on{background:var(--ink);color:#fff}
.chipset{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:22px}
.fchip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 13px;border:1px solid var(--line);border-radius:99px;font-size:13px;background:#fff}
.fchip button{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.fchip button:hover{background:var(--surface);color:var(--ink)}
.fchip--clear{border-style:dashed;color:var(--muted);padding-right:13px}

.pager{display:flex;align-items:center;gap:6px;padding-top:34px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-s);font-size:14px;font-weight:500;background:#fff;transition:.18s}
.pager a:hover{border-color:var(--ink)}
.pager .on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .gap{border:0;background:none;color:var(--muted)}
.pager__info{margin-left:auto;font-size:13px;color:var(--muted);border:0;background:none;padding:0}

.seo{border-top:1px solid var(--line-2);padding-top:32px;margin-top:44px;color:var(--ink-2);font-size:15px;line-height:1.7;max-width:80ch}
.seo h2{font-size:22px;color:var(--ink);margin-bottom:14px}
.seo p+p,.seo ul{margin-top:14px}
.seo li{margin-left:20px}

/* ---- товар ---- */
.prod{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:start;padding-bottom:72px}
@media(max-width:940px){.prod{grid-template-columns:1fr;gap:32px}}
.pgal{display:grid;grid-template-columns:80px 1fr;gap:14px}
/* Колонка миниатюр не должна задавать высоту галереи: снимков у позиции
   бывает десяток, и страница вытягивалась вдвое выше самого снимка.

   Поэтому колонку выносим из потока: высоту блока задаёт только главный
   снимок, а миниатюры растягиваются на неё сверху донизу и всё лишнее
   уводят в прокрутку. Трек в 80px сетка держит сама, но главному снимку
   приходится назвать колонку явно — без соседа он уехал бы в первую. */
.pgal{position:relative}
.pgal__main{grid-column:2}
.pgal__thumbs{
  position:absolute;inset:0 auto 0 0;width:80px;
  display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.pgal__thumbs::-webkit-scrollbar{width:5px}
.pgal__thumbs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.pgal__thumbs::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.pgal__thumbs::-webkit-scrollbar-track{background:transparent}
/* flex:none обязателен: без него миниатюры сжимаются, чтобы влезть
   в колонку, вместо того чтобы прокручиваться, — и десять снимков
   превращаются в десять полосок. */
.pgal__thumbs button{flex:none;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:.2s;padding:0}
.pgal__thumbs button.on{border-color:var(--ink)}
.pgal__thumbs img{width:100%;height:100%;object-fit:cover}
.pgal__main{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.pgal__main img{width:100%;height:100%;object-fit:cover}
.pgal__zoom{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:12px;color:var(--ink-2)}
/* На узком экране миниатюры становятся строкой под снимком — и там
   лишние уезжают вбок, а не вниз. Высоту возвращаем: колонка кончилась. */
@media(max-width:520px){
  .pgal{grid-template-columns:1fr}
  .pgal__main{grid-column:auto}
  .pgal__thumbs{
    position:static;width:auto;
    flex-direction:row;order:2;
    overflow-x:auto;overflow-y:hidden;padding-bottom:4px;
  }
  .pgal__thumbs button{width:64px}
}

.pinfo>*+*{margin-top:20px}
.pinfo__top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pcode{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.pact--sm{height:34px;padding:0 12px;font-size:13px;border-radius:99px}
.pact--sm svg{width:15px;height:15px}
.pinfo h1{font-size:clamp(24px,2.6vw,34px)}
.pmeta{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.pmeta b{color:var(--ink);font-weight:600;font-family:'JetBrains Mono',monospace}
/* аналогов у позиции бывает десяток — им нужна своя строка, а не хвост в pmeta */
.panalogs{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:16px}
.panalogs__t{font-size:13.5px;color:var(--ink-2);flex:none}
.panalogs__l{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.panalogs__l a{font-family:'JetBrains Mono',monospace;font-size:12.5px;padding:4px 9px;border-radius:6px;
  background:var(--surface);color:var(--ink-2);transition:.18s}
.panalogs__l a:hover{background:var(--ink);color:#fff}
.buybox{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--surface)}
.buybox__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.buybox__price b{font-size:34px;font-weight:800;letter-spacing:-.04em}
.buybox__price s{color:var(--muted);font-size:17px}
.buybox__price em{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:#C8102E;border-radius:6px;padding:4px 8px}
.buybox__row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;flex:none}
.qty button{width:44px;height:50px;display:grid;place-items:center;color:var(--ink-2);font-size:18px}
.qty button:hover{color:var(--ink)}
.qty input{width:56px;height:50px;border:0;outline:0;text-align:center;font:inherit;font-size:16px;font-weight:600;font-family:'JetBrains Mono',monospace}
.qty--sm{flex:none}
.qty--sm button{width:32px;height:44px;font-size:16px}
.qty--sm input{width:34px;height:44px;font-size:14px}
.tiers{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.tiers__t{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tiers__g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tier{border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px;text-align:center}
.tier.on{border-color:var(--amber);background:#FFFDF2}
.tier b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.tier span{display:block;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px}
@media(max-width:560px){.tiers__g{grid-template-columns:1fr 1fr}}
.ptrust{display:flex;flex-direction:column;gap:12px}
.ptrust div{display:flex;gap:11px;font-size:14px;color:var(--ink-2)}
.ptrust svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:var(--amber-d);fill:none;stroke-width:1.7}

.tabs2{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs2::-webkit-scrollbar{display:none}
.tabs2 button{padding:14px 18px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.18s}
.tabs2 button.on{color:var(--ink);font-weight:600;border-color:var(--amber)}
/* Нижний отступ тот же, что у .layout: вкладки — последний блок карточки
   товара, и без него описание упирается прямо в подвал. */
.tabpane{display:none;padding:30px 0 88px}
.tabpane.on{display:block}
.specs{width:100%;border-collapse:collapse;font-size:15px;max-width:720px}
.specs td{padding:13px 0;border-bottom:1px solid var(--line-2);vertical-align:top}
.specs td:first-child{color:var(--ink-2);width:44%}
.specs td:last-child{font-weight:600;font-family:'JetBrains Mono',monospace}
.prose{max-width:76ch;color:var(--ink-2);font-size:15.5px;line-height:1.72}
.prose p+p,.prose ul,.prose h3{margin-top:16px}
.prose h3{color:var(--ink);font-size:19px}
.prose li{margin-left:20px;margin-top:6px}
.prose strong{color:var(--ink)}

.rev{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-2)}
.rev__av{width:44px;height:44px;flex:none;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-weight:700;color:var(--ink-2)}
.rev__h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.rev__h b{font-size:15px}
.rev__h time{font-size:12.5px;color:var(--muted)}
.stars{display:flex;gap:2px;color:var(--amber)}
.stars svg{width:15px;height:15px;fill:currentColor;stroke:none}
.stars .off{color:var(--line)}

/* ---- статья ---- */
.art{max-width:760px;margin:0 auto;padding-bottom:80px}
.art__meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:18px}
.art__meta b{color:var(--ink-2);font-weight:500}
.art h1{font-size:clamp(28px,3.6vw,46px);text-wrap:balance}
.art__lead{margin-top:20px;font-size:19px;line-height:1.6;color:var(--ink-2)}
.art__cover{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface);margin:28px 0 8px;border:1px solid var(--line-2)}
.art__cover img{width:100%;height:100%;object-fit:cover}
.art figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);padding-top:10px}
.art__src{flex:none;font-size:12px;color:var(--muted);opacity:.85}
.art__src b{font-weight:500;color:var(--ink-2)}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:32px 0}
.toc b{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--ink-2)}
.toc a:hover{color:var(--ink);text-decoration:underline}
.art__body{font-size:17px;line-height:1.75;color:var(--ink-2)}
.art__body>*+*{margin-top:20px}
.art__body h2{font-size:26px;color:var(--ink);padding-top:20px}
.art__body h3{font-size:20px;color:var(--ink)}
.art__body strong{color:var(--ink)}
.art__body ul,.art__body ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
/* Таблицы в статьях приходят из визуального редактора: без классов, зато
   с атрибутами border=… Эти атрибуты браузер рисует рамками outset/inset —
   теми самыми «объёмными» из девяностых. Наши правила их не перебивали,
   потому что задавали только нижнюю границу. Поэтому сначала полный сброс,
   потом наша разметка. */
   Правила нарочно привязаны к таблицам БЕЗ класса. Свёрстанные вручную
   таблицы страниц — «Уровни и скидки» на /wholesaler, тарифы на
   /delivery — имеют класс .tbl2 и собственную обёртку .tblwrap; им эта
   разметка только мешала: ломала отступы и колонку с бейджем. */
.art__body table:not([class]){width:100%;border-collapse:collapse;border:0;font-size:15px;
  font-variant-numeric:tabular-nums}
.art__body table:not([class]) th,
.art__body table:not([class]) td{text-align:left;padding:12px 14px;border:0;
  border-bottom:1px solid var(--line-2);vertical-align:top}
.art__body table:not([class]) th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600;background:var(--surface);border-bottom:1px solid var(--line);white-space:nowrap}
.art__body table:not([class]) tbody tr:nth-child(even) td{background:#FBFBFC}
.art__body table:not([class]) tbody tr:hover td{background:var(--surface)}
.art__body table:not([class]) tbody tr:last-child td{border-bottom:0}
/* Первая колонка — смысловой якорь строки: обозначение подшипника или узел.
   Моноширинный шрифт остаётся, но переносы разрешаем: в таблицах
   применяемости там не код, а описание в несколько слов, и nowrap
   растягивал колонку на пол-экрана. */
.art__body table:not([class]) td:first-child{font-weight:600;color:var(--ink)}

/* Обёртку ставит dalini.js: таблица шире колонки статьи прокручивается
   внутри себя, а не тащит вбок всю страницу. */
.tablewrap{margin:20px 0;border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;
  background:#fff;-webkit-overflow-scrolling:touch}
.tablewrap table{margin:0;min-width:560px}
.tablewrap th:first-child,.tablewrap td:first-child{padding-left:18px}
.tablewrap th:last-child,.tablewrap td:last-child{padding-right:18px}
.tablewrap::-webkit-scrollbar{height:9px}
.tablewrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

/* На широком экране таблица выходит за колонку текста: статья свёрстана
   под 760 пикселей ради читаемости строки, а таблице применяемости эта
   ширина мала — половина колонок пряталась бы в прокрутку. Отрицательные
   поля симметричные, поэтому таблица остаётся по центру статьи. */
@media(min-width:1180px){
  .art__body .tablewrap{margin-left:-140px;margin-right:-140px}
}
.callout2{border-left:3px solid var(--amber);background:var(--surface);border-radius:0 var(--r) var(--r) 0;padding:20px 22px;font-size:16px}
.callout2 b{color:var(--ink)}
.art__share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:28px 0;margin-top:32px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.art__share span{font-size:13px;color:var(--muted);margin-right:4px}

/* ---- личный кабинет ---- */
.acct{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start;padding-bottom:88px}
@media(max-width:900px){.acct{grid-template-columns:1fr}}
.anav{position:sticky;top:104px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.anav a{display:flex;align-items:center;gap:11px;padding:13px 16px;font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);transition:.18s}
.anav a:last-child{border-bottom:0}
.anav a:hover{background:var(--surface);color:var(--ink)}
.anav a.on{background:var(--ink);color:#fff}
.anav a.on svg{stroke:var(--amber)}
.anav svg{width:18px;height:18px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.7}
.anav .cnt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted)}
@media(max-width:900px){.anav{position:static}}

.acards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
@media(max-width:820px){.acards{grid-template-columns:1fr}}
.acard{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#fff;display:flex;flex-direction:column;gap:6px}
.acard--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.acard__l{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.acard--dark .acard__l{color:#8A8A93}
.acard b{font-size:27px;font-weight:800;letter-spacing:-.035em}
.acard--dark b{color:var(--amber)}
.acard span{font-size:13px;color:var(--ink-2)}
.acard--dark span{color:#A7A7A7}
.acard__mgr{display:flex;align-items:center;gap:12px;margin-top:2px}
.acard__mgr i{width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}

.block{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;margin-bottom:22px}
.block__h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.block__h h2{font-size:19px}
.block__b{padding:20px}
.tbl2{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl2 th{text-align:left;padding:12px 20px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface);border-bottom:1px solid var(--line-2)}
.tbl2 td{padding:15px 20px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl2 tr:last-child td{border-bottom:0}
.tbl2 .num{font-family:'JetBrains Mono',monospace;font-weight:600}
.tbl2 .sum{font-weight:700;white-space:nowrap}
.st{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.st i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st--ok{background:rgba(20,154,90,.10);color:var(--green)}
.st--go{background:rgba(247,183,11,.18);color:#8A6600}
.st--wait{background:var(--surface);color:var(--ink-2)}
.st--no{background:rgba(200,16,46,.09);color:#C8102E}
.tblwrap{overflow-x:auto}
.reqs{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;font-size:14.5px;margin:0}
.reqs div{display:flex;flex-direction:column;gap:4px}
.reqs dt{font-size:12px;color:var(--muted);letter-spacing:.02em}
.reqs dd{margin:0;font-weight:600}
@media(max-width:640px){.reqs{grid-template-columns:1fr}}

/* ---- переключатель демо-страниц ---- */
/* width:max-content обязателен: у fixed-элемента с left:50% доступная
   ширина — только правая половина экрана, и панель ужимается вдвое */
.demobar{gap:8px;padding:6px 6px 6px 16px;flex-wrap:nowrap;
  width:max-content;max-width:calc(100vw - 28px)}
.demobar b{font-weight:700;white-space:nowrap;font-size:12.5px;flex:none}
/* ссылок много: ряд не переносим, а прокручиваем — иначе панель растёт вверх
   на две строки и перекрывает макет, который как раз и смотрят */
.demobar nav{display:flex;gap:2px;flex-wrap:nowrap;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
.demobar nav::-webkit-scrollbar{display:none}
.demobar nav a{padding:6px 9px;border-radius:99px;font-size:12px;color:#A7A7A7;background:none;font-weight:500;white-space:nowrap;transition:.18s;scroll-snap-align:center}
.demobar nav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.demobar nav a.on{background:var(--amber);color:var(--ink);font-weight:600}
.demobar__all{flex:none;background:rgba(255,255,255,.12)!important;color:#fff!important;font-weight:600}
.demobar__all:hover{background:rgba(255,255,255,.2)!important}
.demobar__min{flex:none;width:30px;height:30px;padding:0;border:0;cursor:pointer;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:.18s}
.demobar__min:hover{background:rgba(255,255,255,.24)}
.demobar__min svg{width:15px;height:15px;transition:transform .2s var(--ease)}
/* свёрнутое состояние: панель уходит в левый угол и превращается в одну кнопку */
.demobar.is-min{left:20px;transform:none;padding:6px;gap:0;width:auto}
.demobar.is-min>b,.demobar.is-min>nav,.demobar.is-min>.demobar__all{display:none}
.demobar.is-min .demobar__min svg{transform:rotate(180deg)}
@media(max-width:820px){.demobar{display:none}}

/* сетка товаров рядом с колонкой фильтров */
.layout .grid4{grid-template-columns:repeat(3,1fr)}
@media(max-width:1180px){.layout .grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.layout .grid4{grid-template-columns:1fr}}

/* ============================================================
   КОРЗИНА И ОФОРМЛЕНИЕ ЗАКАЗА
   ============================================================ */
.cartlay{display:grid;grid-template-columns:1fr 356px;gap:30px;align-items:start;padding-bottom:88px}
@media(max-width:980px){.cartlay{grid-template-columns:1fr}}

.citems{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.citems__h{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.citems__h label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer}
.citems__h input{width:17px;height:17px;accent-color:var(--amber);margin:0}
.citems__h button{font-size:13.5px;color:var(--muted)}
.citems__h button:hover{color:#C8102E}

.citem{display:grid;grid-template-columns:auto 92px 1fr 132px 108px 34px;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.citem:last-child{border-bottom:0}
.citem>input[type=checkbox]{width:17px;height:17px;accent-color:var(--amber);margin:0}
.citem__ph{aspect-ratio:1/1;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:#fff}
.citem__ph img{width:100%;height:100%;object-fit:cover}
.citem__brand{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.citem__n{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.35;margin:4px 0 6px}
.citem__n:hover{color:var(--amber-d)}
.citem__meta{display:flex;gap:6px;flex-wrap:wrap}
.citem__meta i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 7px;border-radius:5px;background:var(--surface);color:var(--ink-2)}
.citem__stock{font-size:12px;color:var(--green);margin-top:7px;display:flex;align-items:center;gap:6px}
.citem__stock i{width:6px;height:6px;border-radius:50%;background:currentColor}
.citem .qty button{width:36px;height:42px}
.citem .qty input{width:44px;height:42px;font-size:15px}
.citem__sum{text-align:right}
.citem__sum b{display:block;font-size:17px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}
.citem__sum span{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap}
.citem__del{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--muted)}
.citem__del:hover{background:var(--surface);color:#C8102E}
@media(max-width:760px){
  .citem{grid-template-columns:auto 72px 1fr;grid-template-areas:"c p i" ". q s";row-gap:14px}
  .citem>input[type=checkbox]{grid-area:c}.citem__ph{grid-area:p}.citem__body{grid-area:i}
  .citem .qty{grid-area:q}.citem__sum{grid-area:s;text-align:left}.citem__del{position:absolute;right:16px}
}

.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:#FFFDF2;border:1px solid rgba(247,183,11,.45);font-size:14px;color:var(--ink-2);margin-top:16px}
.notice svg{width:20px;height:20px;flex:none;margin-top:1px;stroke:var(--amber-d);fill:none;stroke-width:1.8}
.notice b{color:var(--ink)}
.notice--plain{background:var(--surface);border-color:var(--line)}
.notice--plain svg{stroke:var(--ink-2)}

.totals{position:sticky;top:104px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.totals__b{padding:20px}
.totals__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:14.5px;color:var(--ink-2);padding:9px 0}
.totals__row b{color:var(--ink);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.totals__row--dis b{color:var(--green)}
.totals__row--big{margin-top:0;padding-top:2px;font-size:16px;color:var(--ink)}
.totals__row+.totals__row--big{border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
.totals__row--big b{font-size:27px;font-weight:800;letter-spacing:-.035em}
.totals__b>.btn{width:100%;margin-top:16px}
.totals__note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:14px}
.totals__alt{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.totals__alt a{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.totals__alt a:hover{color:var(--ink)}
.totals__alt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
@media(max-width:980px){.totals{position:static}}

/* промокод и скидка постоянного клиента понадобятся позже — пока скрыты */
.promo,.promo__ok{display:none}
.promo{gap:10px;padding:18px 20px;border-top:1px solid var(--line-2)}
.promo input{flex:1;height:46px;border:1px solid var(--line);border-radius:var(--r-s);padding:0 14px;font:inherit;font-size:14.5px;outline:0;min-width:0}
.promo input:focus{border-color:var(--ink)}
.promo__ok{align-items:center;gap:9px;padding:12px 20px;font-size:13.5px;color:var(--green);border-top:1px solid var(--line-2)}

/* ---- оформление ---- */
.co{display:grid;grid-template-columns:1fr 356px;gap:30px;align-items:start;padding-bottom:88px}
@media(max-width:980px){.co{grid-template-columns:1fr}}
.costeps{display:flex;flex-direction:column;gap:16px}
.costep{padding:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.costep__h{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line-2)}
.costep__n{width:28px;height:28px;flex:none;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.costep__h h2{font-size:18px}
.costep__h .done{margin-left:auto;font-size:13px;color:var(--green);display:flex;align-items:center;gap:7px}
.costep__h .done svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.costep__b{padding:20px}

.tabsw{display:inline-flex;padding:3px;border-radius:var(--r-s);background:var(--surface);border:1px solid var(--line);margin-bottom:20px}
.tabsw button{padding:9px 18px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);transition:.18s}
.tabsw button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
/* Выбор «Физическое лицо / Компания» — тот же переключатель, но во всю
   ширину колонки: на шаге с данными покупателя это первый вопрос,
   а не примечание сбоку. */
.tabsw--buyer{display:flex;width:100%;max-width:440px}
.tabsw--buyer button{flex:1 1 0;text-align:center}
/* Своё display перебивает браузерное правило для [hidden], и скрытый
   скриптом переключатель оставался на виду — на вкладке «Авторизация»
   рядом с формой входа висел выбор типа покупателя. */
.tabsw[hidden]{display:none}

.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid2 .wide{grid-column:1/-1}
@media(max-width:620px){.fgrid2{grid-template-columns:1fr}}
.fld2 label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.fld2 label em{font-style:normal;color:#C8102E}
.fld2 input,.fld2 select,.fld2 textarea{
  width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-s);padding:0 14px;
  font:inherit;font-size:15px;background:#fff;outline:0;transition:.18s;color:var(--ink);
}
.fld2 textarea{height:auto;padding:13px 14px;resize:vertical}
.fld2 input:focus,.fld2 select:focus,.fld2 textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.06)}
.fld2 input::placeholder,.fld2 textarea::placeholder{color:var(--muted)}
.fld2 .hint{font-size:12px;color:var(--muted);margin-top:7px}

.rcards{display:flex;flex-direction:column;gap:10px}
.rcard{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.2s var(--ease);background:#fff}
.rcard:hover{border-color:var(--ink)}
.rcard.on{border-color:var(--amber);background:#FFFDF2;box-shadow:0 0 0 3px rgba(247,183,11,.18)}
.rcard input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--amber)}
.rcard b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.rcard span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.rcard__price{margin-left:auto;text-align:right;flex:none;padding-left:12px}
.rcard__price b{font-size:16px;font-weight:700;white-space:nowrap}
.rcard__price span{font-size:12px;color:var(--muted);margin-top:3px}
.rcard__logo{width:38px;height:38px;flex:none;border-radius:9px;background:var(--surface);display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:-.02em;color:var(--ink-2)}

.olist{display:flex;flex-direction:column;gap:0}
.olist li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.olist li:last-child{border-bottom:0}
.olist__ph{width:44px;height:44px;flex:none;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.olist__ph img{width:100%;height:100%;object-fit:cover}
.olist__n{flex:1;line-height:1.35}
.olist__n span{display:block;font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:3px}
.olist__s{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Только на самой подписи: OpenCart отдаёт текст согласия со ссылкой,
   у которой тот же класс — <a class="agree"><b>…</b></a>. Без label
   раскладка попадала и на неё, и ссылка уезжала на свою строку. */
.agreebox{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:14px}
/* min-width нужен явно: в блоке заявки галочка лежит внутри .formrow,
   а там у полей min-width:150px — иначе квадратик растягивается. */
.agreebox input{width:17px;min-width:0;height:17px;flex:none;margin:1px 0 0;accent-color:var(--amber)}
.agreebox a{color:var(--ink-2);border-bottom:1px solid var(--line)}
.agreebox a:hover{color:var(--ink)}

/* ============================================================
   ДОПОЛНЕНИЯ
   ============================================================ */

/* ---- слайдер баннеров на главной ---- */
.hslider{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.hslider__view{overflow:hidden}
.hslider__track{display:flex;transition:transform .7s var(--ease)}
.hslide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center;min-height:440px;padding:46px 52px}
.hslide__b{display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-width:0}
.hslide__tag{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:99px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hslide__tag--amber{background:var(--amber);color:var(--ink)}
.hslide h2{font-size:clamp(26px,3.3vw,42px);letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.hslide h2 em{font-style:normal;color:var(--amber-d)}
.hslide p{font-size:clamp(15px,1.25vw,17.5px);color:var(--ink-2);line-height:1.6;max-width:46ch}
.hslide__cta{display:none;gap:12px;flex-wrap:wrap;padding-top:4px}
.hslide__ph{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line-2)}
.hslide__ph img{width:100%;height:100%;object-fit:cover}
.hslide__note{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;height:34px;padding:0 13px;border-radius:99px;background:rgba(255,255,255,.94);border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-2)}
.hslide--dark{background:var(--ink);color:#fff}
.hslide--dark p{color:#A7A7A7}
.hslide--dark h2 em{color:var(--amber)}
.hslide--dark .hslide__tag{background:rgba(255,255,255,.14);color:#fff}
.hslide--dark .btn--ghost{border-color:rgba(255,255,255,.24);background:transparent;color:#fff}
.hslide--dark .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hslider__dots{position:absolute;left:52px;bottom:26px;z-index:3;display:flex;gap:7px}
.hslider__dots button{width:30px;height:4px;border-radius:99px;background:rgba(138,138,147,.5);transition:.25s var(--ease)}
.hslider__dots button.on{background:var(--amber);width:44px}
.hslider__nav{position:absolute;right:26px;bottom:22px;z-index:3;display:flex;gap:8px}
.hslider__nav button{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:.22s var(--ease)}
.hslider__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hslider__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .hslide{grid-template-columns:1fr;min-height:0;padding:32px 26px 84px;gap:24px}
  .hslide__ph{order:-1;aspect-ratio:16/10}
  .hslider__dots{left:26px;bottom:24px}
  .hslider__nav{right:20px;bottom:18px}
}

/* ---- фильтр: обычная колонка в потоке страницы ----
   Раньше сайдбар был липким со своей прокруткой: фильтр стоял на месте,
   а товары уезжали. Для длинного фильтра это означало две полосы
   прокрутки на экране и колесо, которое «залипало» над колонкой.
   Теперь страница каталога прокручивается целиком, одной полосой. */
.side{display:flex;flex-direction:column;gap:12px}
/* без этого группы сжимаются под высоту колонки и режут содержимое */
.side>*{flex:0 0 auto}

/* удерживаем прокрутку внутри блока только когда ему действительно есть что
   прокручивать: иначе колесо над таким блоком упирается и страница стоит.
   Класс is-scroll ставит theme.js по фактическому переполнению */
.fgroup__b--list.is-scroll{overscroll-behavior:contain}

/* список чекбоксов: всегда видно ровно пять пунктов, остальные — прокруткой.
   5 строк по 22px + 4 зазора по 11px + собственные отступы блока (2 + 18) */
.fgroup__b--list{
  max-height:calc(5 * 22px + 4 * 11px + 20px);
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  scrollbar-gutter:stable;   /* место под полосу резервируем во всех списках,
                                иначе счётчики в разных группах не совпадают */
  /* мягкие тени сверху и снизу появляются, только если список длиннее пяти
     пунктов: слои local прокручиваются с содержимым и закрывают тень у краёв */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top    / 100% 16px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 16px no-repeat local,
    radial-gradient(farthest-side at 50% 0,   rgba(14,14,16,.14), rgba(14,14,16,0)) top    / 100% 7px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,rgba(14,14,16,.14), rgba(14,14,16,0)) bottom / 100% 7px no-repeat scroll;
}
.fgroup__b--list::-webkit-scrollbar{width:5px}
.fgroup__b--list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.fgroup__b--list::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.fgroup__b--list::-webkit-scrollbar-track{background:transparent}

/* подпись над парой полей «от — до»: не чекбокс, поэтому без курсора и ховера */
.fapply{width:100%;justify-content:center;margin-top:2px}
.fcap{display:block;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.fgroup__b .fcap+.range{margin-top:7px}
.fgroup__b .range+.fcap{margin-top:5px}

@media(max-width:960px){
  .fgroup__b--list{max-height:none;overflow:visible;padding-right:18px}
}

/* ---- маркеры на карточке ---- */
.badge--sale{background:#C8102E;color:#fff}
.badge--promo{background:#0B7A3B;color:#fff}
.price s{font-size:14px;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:0}

/* ---- вид «списком» ---- */
.grid4.is-list{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.is-list .card{
  display:grid;grid-template-columns:120px minmax(0,1fr) 34px;
  grid-template-areas:"img body fav";align-items:start;gap:20px;
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:18px 8px;
}
.is-list .card:hover{transform:none;box-shadow:none;background:var(--surface)}
.is-list .card__img{grid-area:img;align-self:start;border:1px solid var(--line-2);border-radius:10px}
.is-list .card:hover .card__img img{transform:none}
/* метки лежат на снимке, а не отдельной колонкой слева от него */
.is-list .card__badges{grid-column:1;grid-row:4;margin-top:3px;gap:5px}
.is-list .card__fav{grid-area:fav;position:static;opacity:1;transform:none;align-self:start}
.is-list .card__body{
  grid-area:body;align-self:start;display:grid;
  grid-template-columns:minmax(0,1fr) 150px 150px;
  grid-template-rows:repeat(5,auto);        /* явные строки: без них span схлопывается в первую */
  align-items:start;align-content:start;
  column-gap:20px;row-gap:5px;padding:0;
}
.is-list .card__brand{grid-column:1;grid-row:1}
.is-list .card__name{grid-column:1;grid-row:2;font-size:16px}
.is-list .card__dims{grid-column:1;grid-row:3;margin-top:3px}
.is-list .card__meta{grid-column:1;grid-row:5;margin-top:2px}
.is-list .card__foot{grid-column:2;grid-row:1/span 5;align-self:start;flex-direction:column;align-items:flex-start;gap:4px;padding-top:0;margin-top:0}
.is-list .card__add{grid-column:3;grid-row:1/span 5;align-self:start;flex-direction:column;align-items:stretch;margin-top:0}
.is-list .card__add .qty{width:100%}
.is-list .card__add .qty input{flex:1 1 0;width:auto;min-width:0}
@media(max-width:900px){
  .is-list .card__body{grid-template-columns:minmax(0,1fr) 140px}
  .is-list .card__add{grid-column:1/-1;grid-row:auto;flex-direction:row;margin-top:10px}
  .is-list .card__add .qty{width:auto}
  .is-list .card__add .qty input{flex:none;width:34px}
}
@media(max-width:620px){
  .is-list .card{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"img body" "img fav";gap:14px}
  .is-list .card__fav{justify-self:end}
  .is-list .card__body{grid-template-columns:1fr}
  .is-list .card__foot{grid-column:1;grid-row:auto;flex-direction:row;align-items:baseline;justify-content:space-between}
}

/* ---- корневая страница каталога ---- */
.rootcats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1180px){.rootcats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:940px){.rootcats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.rootcats{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.rootcats{grid-template-columns:1fr}}
.rcat{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:.24s var(--ease)}
.rcat:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.rcat__ph{aspect-ratio:16/10;background:#fff;border-bottom:1px solid var(--line-2);overflow:hidden;position:relative}
.rcat__ph img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.rcat:hover .rcat__ph img{transform:scale(1.05)}
.rcat__cnt{position:absolute;top:9px;right:9px;font-family:'JetBrains Mono',monospace;font-size:10px;padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink-2)}
.rcat__b{padding:14px 14px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.rcat__b h3{font-size:15px;line-height:1.25}
.rcat__link::after{content:"";position:absolute;inset:0;z-index:1}
.rcat__sub a,.rcat__all{position:relative;z-index:2}
.rcat__sub{display:flex;flex-wrap:wrap;gap:5px}
.rcat__sub a{font-size:11.5px;color:var(--ink-2);padding:4px 8px;border-radius:99px;background:var(--surface);transition:.18s}
.rcat__sub a:hover{background:var(--ink);color:#fff}
.rcat__all{margin-top:auto;padding-top:2px;font-size:12.5px;font-weight:600;color:var(--amber-d);display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.rcat__all svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:.2s var(--ease)}
.rcat:hover .rcat__all svg{transform:translateX(4px)}

/* ---- кнопки под покупкой на карточке товара ---- */
.pacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}
.pact{
  display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 15px;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
  font-size:14px;font-weight:500;color:var(--ink-2);transition:.2s var(--ease);
}
a.pact{text-decoration:none}
.pact:hover{border-color:var(--ink);color:var(--ink)}
.pact.on{border-color:var(--amber);background:#FFFDF2;color:var(--ink);font-weight:600}
.pact svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.pact.on svg{stroke:var(--amber-d)}

/* ---- корзина: галочка у промокода ---- */
.promo__ok svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.promo .btn{flex:none;width:auto;margin-top:0}

/* ---- сортировка таблицы заказов ---- */
.tbl2 th.sort{cursor:pointer;user-select:none;transition:.18s}
.tbl2 th.sort:hover{color:var(--ink)}
.tbl2 th.sort span{display:inline-flex;align-items:center;gap:6px}
.tbl2 th.sort i{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:5px solid currentColor;opacity:.28;transition:.18s;
}
.tbl2 th.sort[data-dir="asc"]{color:var(--ink)}
.tbl2 th.sort[data-dir="asc"] i{opacity:1;border-bottom-color:var(--amber-d)}
.tbl2 th.sort[data-dir="desc"]{color:var(--ink)}
.tbl2 th.sort[data-dir="desc"] i{opacity:1;border-bottom-color:var(--amber-d);transform:rotate(180deg)}

/* ---- статья во всю ширину контейнера ---- */
.art{max-width:none;margin:0;padding-bottom:80px}
.art__head{max-width:900px}
.art__head .art__lead{margin-top:22px;font-size:20px}
.art__cover{aspect-ratio:21/9}
/* minmax(0,1fr) и min-width:0 у колонок: дорожка грида не сжимается уже
   своего содержимого, и широкая таблица в статье распирала колонку шире
   экрана — на телефоне страница уезжала вбок. */
.art__cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;margin-top:36px}
.art__cols>*{min-width:0}
.art__aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}
.art__cols .toc{margin:0}
.art__cols .art__body{max-width:76ch}
.art__cols .art__share{margin-top:36px}
@media(max-width:980px){
  .art__cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .art__aside{position:static}
  .art__cover{aspect-ratio:16/9}
}

/* ---- страница контактов ---- */
.contacts{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start;padding-bottom:80px}
@media(max-width:900px){.contacts{grid-template-columns:1fr}}
.cblocks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cblocks{grid-template-columns:1fr}}
.cblock{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff}
.cblock svg{width:22px;height:22px;stroke:var(--amber-d);fill:none;stroke-width:1.7;margin-bottom:14px}
.cblock h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cblock b{display:block;font-size:19px;font-weight:700;letter-spacing:-.025em;line-height:1.3}
.cblock p{font-size:13.5px;color:var(--ink-2);margin-top:8px;line-height:1.55}
.cblock a{border-bottom:1px solid var(--line)}
.cblock a:hover{border-color:var(--ink)}
.cmap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);aspect-ratio:16/10;position:relative;display:grid;place-items:center}
.cmap__grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.6}
.cmap__pin{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cmap__pin span{width:44px;height:44px;border-radius:50% 50% 50% 0;background:var(--amber);transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 10px 24px -10px rgba(247,183,11,.9)}
.cmap__pin span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--ink)}
.cmap__pin b{font-size:14px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px}
.cteam{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:560px){.cteam{grid-template-columns:1fr}}
.cperson{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:#fff}
.cperson i{width:46px;height:46px;flex:none;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--ink-2)}
.cperson b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.cperson span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.cperson em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:6px;font-family:'JetBrains Mono',monospace}

/* ---- список статей ---- */
.rubrics{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:28px}
.rubric{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--line);border-radius:99px;font-size:14px;color:var(--ink-2);background:#fff;transition:.18s}
.rubric:hover{border-color:var(--ink);color:var(--ink)}
.rubric.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.post__img img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.post:hover .post__img img{transform:scale(1.05)}
.post__tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--ink-2)}
.posts--list{grid-template-columns:repeat(3,1fr);gap:26px 20px}
@media(max-width:900px){.posts--list{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.posts--list{grid-template-columns:1fr}}
.post--wide{grid-column:1/-1;flex-direction:row;gap:28px;align-items:center;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.post--wide .post__img{width:46%;flex:none;aspect-ratio:16/10;border:0;border-radius:0}
.post--wide .post__b{padding:8px 28px 8px 0;display:flex;flex-direction:column;gap:12px}
.post--wide b{font-size:24px;letter-spacing:-.03em;line-height:1.2}
.post--wide p{font-size:15px}
@media(max-width:760px){.post--wide{flex-direction:column;gap:0}.post--wide .post__img{width:100%}.post--wide .post__b{padding:20px 22px 24px}}

/* ---- cookie ---- */
.cookie{
  position:fixed;left:24px;bottom:24px;z-index:180;width:min(420px,calc(100vw - 48px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow-l);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:.4s var(--ease);
}
.cookie.on{opacity:1;transform:none;pointer-events:auto}
.cookie__h{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.cookie__h svg{width:20px;height:20px;flex:none;stroke:var(--amber-d);fill:none;stroke-width:1.7}
.cookie__h b{font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.cookie p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.cookie p a{border-bottom:1px solid var(--line)}
.cookie p a:hover{border-color:var(--ink)}
.cookie__row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.cookie__row .btn{flex:1;min-width:130px}
@media(max-width:820px){.cookie{left:16px;right:16px;bottom:16px;width:auto}}
@media(max-width:560px){.cookie__row .btn{flex:1 1 100%}}

/* ============================================================
   ПОИСК · ИНФОРМАЦИОННЫЕ СТРАНИЦЫ
   ============================================================ */

/* ---- крупная форма поиска ---- */
.bigsearch{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:22px}
.bigsearch__row{display:flex;gap:10px;flex-wrap:wrap}
.bigsearch__f{flex:1 1 320px;min-width:0;display:flex;height:54px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;overflow:hidden;transition:.2s var(--ease)}
.bigsearch__f:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.06)}
.bigsearch__f input{flex:1;border:0;outline:0;padding:0 16px;font:inherit;font-size:16px;min-width:0}
.bigsearch__f input::placeholder{color:var(--muted)}
.bigsearch__f svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.7;align-self:center;margin-left:16px;flex:none}
.bigsearch .sel{height:54px;flex:0 1 220px}
.bigsearch .btn{height:54px;flex:none}
.bigsearch__opts{display:flex;gap:22px;flex-wrap:wrap;padding-top:16px}
.bigsearch__opts .chk{font-size:14px}

.sugg{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:18px}
.sugg span{font-size:13.5px;color:var(--muted)}
.sugg a{display:inline-flex;align-items:center;height:32px;padding:0 13px;border:1px solid var(--line);border-radius:99px;font-size:13.5px;background:#fff;transition:.18s}
.sugg a:hover{border-color:var(--ink)}

/* ---- компактный поиск (блог) ---- */
.blogtop{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-bottom:28px}
.blogtop .rubrics{padding-bottom:0;flex:1 1 auto}
.searchmini{display:flex;height:44px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;overflow:hidden;flex:0 1 300px;min-width:220px;transition:.2s var(--ease)}
.searchmini:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,14,16,.06)}
.searchmini input{flex:1;border:0;outline:0;padding:0 14px;font:inherit;font-size:14.5px;min-width:0}
.searchmini input::placeholder{color:var(--muted)}
.searchmini button{width:46px;flex:none;display:grid;place-items:center;background:var(--amber);color:var(--ink);transition:.2s}
.searchmini button:hover{background:#ffc824}
.searchmini svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- пустой результат ---- */
.empty{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:44px 32px;text-align:center;max-width:620px;margin:0 auto}
.empty svg{width:42px;height:42px;stroke:var(--muted);fill:none;stroke-width:1.4;margin:0 auto 18px}
.empty h3{font-size:20px;margin-bottom:10px}
.empty p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:44ch;margin:0 auto}
.empty__acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ---- вопрос-ответ ---- */
.faq{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-size:15.5px;font-weight:600;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:.25s var(--ease)}
.faq details[open] summary{color:var(--ink)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq__b{padding:0 20px 20px;font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:82ch}
.faq__b p+p,.faq__b ul{margin-top:10px}
.faq__b li{margin-left:20px;margin-top:5px}

/* ---- шаги ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff;transition:.24s var(--ease)}
.step:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.step__n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:16px}
.step b{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.step p{font-size:14px;color:var(--ink-2);line-height:1.55}

/* ---- таблица уровней ---- */
.tbl2 tr.is-me{background:#FFFDF2}
.tbl2 tr.is-me td{font-weight:600}
.lvl{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.lvl i{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none}
.lvl.on i{background:var(--amber)}
.badge--now{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--amber);color:var(--ink);margin-left:8px}

/* ---- реквизиты в две колонки ---- */
.reqcols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:860px){.reqcols{grid-template-columns:1fr}}
.reqs--rows{grid-template-columns:1fr}
.reqs--rows div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.reqs--rows div:last-child{border-bottom:0}
.reqs--rows dt{flex:0 0 auto;max-width:52%}
.reqs--rows dd{text-align:right;font-family:'JetBrains Mono',monospace;font-size:13.5px}

/* ---- документ (политика, оферта) ---- */
.doc{max-width:none;padding-bottom:80px}
.doc__body h2{font-size:23px}
.doc__body h3{font-size:18px}
.doc__body{font-size:16px;line-height:1.7}

/* «Скачать в PDF» под текстом документа. Отделена чертой: это не часть
   документа, а действие с ним. */
.doc__dl{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}
.doc__dl .btn{height:46px;padding:0 22px;font-size:14.5px}
.doc__dl .btn svg{width:17px;height:17px;flex:none}
.doc__dlnote{font-size:13px;color:var(--muted)}
.doc__body ol{counter-reset:none}

/* ---- отступ под текстом на странице каталога ---- */
.pagetail{padding-bottom:88px}

/* ---- о компании: миссия и руководитель ---- */
.quote{margin:0;border-left:3px solid var(--amber);padding:8px 0 8px 26px;font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.03em;line-height:1.32;max-width:34ch}
.quote span{display:block;font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:14px}
.leader{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;border:1px solid var(--line);border-radius:var(--r);padding:26px;background:#fff}
.leader__av{width:64px;height:64px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink-2)}
.leader b{display:block;font-size:19px;letter-spacing:-.025em;line-height:1.25}
.leader__pos{font-size:13.5px;color:var(--muted);margin-top:5px}
.leader ul{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.leader li{list-style:none;display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.leader li::before{content:"";width:5px;height:5px;margin-top:9px;flex:none;border-radius:50%;background:var(--amber)}
/* имена клиентов и объединений — обычный текст, а не логотип-курсив */
.brands--4{grid-template-columns:repeat(4,1fr)}
.brands--5{grid-template-columns:repeat(5,1fr)}
.brands--3{grid-template-columns:repeat(3,1fr)}
.brand--name{height:92px;font-style:normal;font-weight:600;font-size:14.5px;letter-spacing:-.015em;line-height:1.35;color:var(--ink-2);text-align:center;padding:0 16px}
.brand--name:hover{color:var(--ink)}
@media(max-width:1000px){.about__top{grid-template-columns:1fr!important;gap:28px!important}}
@media(max-width:1100px){.brands--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.brands--4,.brands--3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.brands--5{grid-template-columns:1fr}.brands--4,.brands--3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.leader{grid-template-columns:1fr}}

/* ---- лента истории на «О компании» ---- */
.tline{display:grid;grid-template-columns:repeat(4,1fr);column-gap:26px;row-gap:32px}
.tline__i{position:relative;border-top:2px solid var(--line);padding-top:22px}
.tline__i::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 3px #fff}
.tline__y{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tline__i b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;margin-top:8px}
.tline__i p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:6px}
@media(max-width:980px){.tline{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tline{grid-template-columns:1fr}}

/* ---- сертификаты ---- */
.certs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.cert{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;padding:18px;transition:.24s var(--ease)}
.cert:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.cert__ph{aspect-ratio:3/4;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);
  display:grid;place-items:center;color:var(--amber-d)}
.cert__ph svg{width:40px;height:40px}
.cert__b{min-width:0;display:flex;flex-direction:column;gap:9px}
.cert__b h3{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.cert__b>p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.cert__d{display:flex;flex-direction:column;gap:5px;margin:0}
.cert__d div{display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.cert__d dt{flex:none;width:76px;color:var(--muted)}
.cert__d dd{margin:0;min-width:0;color:var(--ink-2);font-family:'JetBrains Mono',monospace;overflow-wrap:anywhere}
.cert__a{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.cert__note{font-size:12px;color:var(--muted);font-family:'JetBrains Mono',monospace}
@media(max-width:900px){.certs{grid-template-columns:1fr}}
@media(max-width:460px){.cert{grid-template-columns:1fr}.cert__ph{aspect-ratio:16/9}}

/* ---- «О компании»: кнопки под шапкой, карточки-ссылки, прайс, контакты, соцсети ---- */
.pagehead__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cblock--link{display:flex;flex-direction:column;transition:.24s var(--ease)}
.cblock--link:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.cblock__more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--amber-d)}
.cblock__more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:.2s var(--ease)}
.cblock--link:hover .cblock__more svg{transform:translateX(4px)}
.pricecta{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:36px 40px}
.pricecta h2{font-size:clamp(22px,2.4vw,30px)}
.pricecta p{margin-top:12px;max-width:56ch}
.ccontacts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:4px}
.ccontacts span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ccontacts b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;margin-top:5px}
.socs{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.soc{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px;border:1px solid var(--line);
  border-radius:99px;font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;transition:.2s var(--ease)}
.soc:hover{border-color:var(--ink);color:var(--ink)}
.soc svg{width:17px;height:17px;flex:none}
@media(max-width:560px){.ccontacts{grid-template-columns:1fr}}

/* ---- бонусный счёт в кабинете ---- */
.bonus{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:center;
  border:1px solid #F3D77A;border-radius:var(--r);background:#FFFBEF;padding:22px 24px;margin-bottom:28px}
.bonus__n b{display:block;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:7px 0 4px}
.bonus__n>span:last-child{font-size:13px;color:var(--ink-2)}
.bonus p{font-size:14px;color:var(--ink-2);line-height:1.6}
.bonus a{border-bottom:1px solid var(--line);white-space:nowrap}
.bonus a:hover{border-color:var(--ink)}
@media(max-width:700px){.bonus{grid-template-columns:1fr;gap:14px}}

/* ---- персональная скидка под ценой товара ---- */
.pdisc{display:inline-flex;align-items:center;gap:9px;margin-top:12px;min-height:32px;padding:5px 13px;
  border-radius:99px;background:#E6F4EC;color:#0B6E37;font-size:13.5px;font-weight:500}
.pdisc b{font-weight:700}
.pdisc svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor}
.pdisc--guest{background:var(--surface);color:var(--ink-2)}
.pdisc--guest a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.pdisc--guest a:hover{border-color:var(--ink)}