/* Хемпромак: one stylesheet, mobile first. */

@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  --ink: #18191b;
  --ink-2: #46484b;
  --grey: #6b6d71;
  --line: #e3e3e1;
  --line-2: #cfd0d2;
  --stone: #f2f2f0;
  --graph: #1f2022;
  --red: #c8202b;
  --red-d: #a91a24;
  --wrap: 1240px;
  --gut: 20px;
  --head: 64px;
  --font: "Onest", system-ui, sans-serif;
}
@media (min-width: 900px) { :root { --gut: 56px; --head: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--ink); background: #fff; font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.only-wide { display: none; }
@media (min-width: 600px) { .only-wide { display: inline; } }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* type */
.h-xxl { font-size: clamp(40px, 7vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.h-xl { font-size: clamp(32px, 5vw, 52px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; }
.h-lg { font-size: clamp(30px, 4vw, 44px); line-height: 1.04; letter-spacing: -.035em; font-weight: 600; }
.h-md { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--red); }
.eyebrow--light { color: #d8d9db; }
.link { display: inline-block; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding: 10px 0 1px; margin-top: -10px; white-space: nowrap; }
.link::after { content: " →"; }
.link:hover { color: var(--red); }
.prose p + p, .prose h2 + p { margin-top: 14px; }
.prose h2 { font-size: 20px; font-weight: 600; margin-top: 32px; letter-spacing: -.01em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 3px; padding: 12px 20px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .15s; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-d); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--lg { padding: 16px 26px; font-size: 16px; }
.chip { display: inline-block; font-size: 14px; padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.top__in { height: var(--head); display: flex; align-items: center; gap: 32px; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.emblem { width: 30px; height: 35px; }
.logo__wm { font-weight: 700; font-size: 17px; letter-spacing: .02em; color: #3a3b3d; line-height: 1; }
.logo__wm small { display: block; font-size: 8.8px; letter-spacing: .16em; color: var(--red); margin-top: 4px; font-weight: 700; }
.nav { display: none; gap: 30px; font-size: 15px; font-weight: 500; align-items: center; }
.nav a, .nav__dd { text-decoration: none; background: none; border: 0; padding: 6px 0; }
.nav a:hover, .nav__dd:hover, .nav__dd[aria-expanded="true"], .nav a[aria-current] { color: var(--red); }
.nav__dd::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin: 0 0 3px 9px; transition: transform .15s; }
.nav__dd[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -1px; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; padding: 0; }
.iconbtn svg, .search__box svg, .hsearch svg, .fsearch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.iconbtn:hover { border-color: var(--ink); }
.top__tel, .top__cta { display: none; }
.top__tel { font-weight: 600; text-decoration: none; white-space: nowrap; }
.burger { width: 40px; height: 40px; border: 0; background: none; padding: 0; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink); content: ""; transition: transform .2s, top .2s; }
.burger span { top: 19px; } .burger span::before { top: -6px; left: 0; right: 0; } .burger span::after { top: 6px; left: 0; right: 0; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 900px) {
  .emblem { width: 36px; height: 42px; }
  .logo__wm { font-size: 21px; } .logo__wm small { font-size: 10.5px; margin-top: 5px; }
  .nav { display: flex; }
  .top__tel, .top__cta { display: inline-flex; }
  .burger { display: none; }
}

/* mega menu */
.mega { border-top: 1px solid var(--line); background: #fff; box-shadow: 0 24px 40px rgba(0,0,0,.14); max-height: calc(100vh - var(--head)); overflow: auto; }
.mega__grid { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 32px var(--gut) 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; }
.mega__h { display: block; font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.mega__h:hover { color: var(--red); }
.mega ul { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.mega ul.two { columns: 2; column-gap: 16px; }
.mega li a { text-decoration: none; } .mega li a:hover { color: var(--red); }
.mega__foot { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 18px var(--gut) 26px; display: flex; justify-content: space-between; gap: 20px; font-size: 14.5px; color: var(--grey); border-top: 1px solid var(--line); }
.mega__foot a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* mobile drawer */
.drawer { position: fixed; inset: var(--head) 0 0 0; z-index: 49; background: #fff; overflow: auto; padding: 6px var(--gut) 40px; }
.drawer__cat { border-bottom: 1px solid var(--line); }
.drawer__cat summary { list-style: none; display: flex; justify-content: space-between; padding: 15px 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; }
.drawer__cat summary::-webkit-details-marker { display: none; }
.drawer__cat summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; }
.drawer__cat[open] summary { color: var(--red); }
.drawer__cat[open] summary::after { content: "−"; color: var(--ink); }
.drawer__subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 16px; }
.drawer__low { display: grid; gap: 4px; margin-top: 20px; font-size: 16px; }
.drawer__low a { text-decoration: none; color: var(--grey); padding: 4px 0; }
body.is-locked { overflow: hidden; }

/* search overlay */
.search { border-top: 1px solid var(--line); background: #fff; box-shadow: 0 24px 40px rgba(0,0,0,.14); }
.search__in { max-width: 820px; margin: 0 auto; padding: 18px var(--gut) 22px; }
.search__box { display: flex; align-items: center; gap: 12px; border: 2px solid var(--ink); border-radius: 4px; height: 56px; padding: 0 8px 0 16px; }
.search__box input { flex: 1; border: 0; outline: 0; font-size: 17px; background: none; min-width: 0; }
.search__res { max-height: calc(100dvh - var(--head) - 110px); overflow: auto; overscroll-behavior: contain; }
.search__close { border: 0; background: none; color: var(--grey); font-size: 14px; padding: 8px; }
.res { display: grid; }
.res a { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); text-decoration: none; }
.res a:hover, .res a.is-active { background: var(--stone); }
.res__th { width: 56px; height: 42px; background: var(--stone); overflow: hidden; display: grid; place-items: center; }
.res__th img { width: 100%; height: 100%; object-fit: cover; }
.res__th--cut img { object-fit: contain; }
.res__th--none::after { content: ""; width: 14px; height: 2px; background: var(--line-2); }
.res b { font-weight: 600; display: block; line-height: 1.3; }
.res span { font-size: 13.5px; color: var(--grey); }
.res i { font-style: normal; font-size: 12.5px; color: var(--grey); text-align: right; }
@media (max-width: 599px) {
  .res a, .results .res a { grid-template-columns: 64px 1fr; gap: 4px 14px; }
  .res a > .res__th { grid-row: span 2; }
  .res i { text-align: left; grid-column: 2; }
  .results .res__th { width: 64px; height: 48px; }
}
.res__all { display: block; padding: 12px 6px 2px; font-size: 14.5px; font-weight: 600; }
.res__none { padding: 14px 6px; color: var(--grey); font-size: 15px; }
.res__none a { color: var(--ink); font-weight: 600; }

/* hero */
.hero { position: relative; z-index: 3; min-height: 600px; display: flex; align-items: flex-end; color: #fff; background: var(--graph); }
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(20,21,23,.92) 0%, rgba(20,21,23,.62) 55%, rgba(20,21,23,.2) 100%); }
.hero__in { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(40px, 7.4vw, 76px); line-height: .98; letter-spacing: -.04em; font-weight: 600; max-width: 11.5em; }
.hero__lead { font-size: clamp(16px, 1.6vw, 18px); color: #dcdddf; margin-top: 18px; max-width: 32em; }
.hsearch { position: relative; margin-top: 28px; max-width: 600px; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--ink); height: 58px; border-radius: 4px; padding: 0 7px 0 18px; }
.hsearch > svg { color: #8b8d91; flex-shrink: 0; }
.hsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16.5px; }
.hsearch .btn { display: none; }
.hsearch__res { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.28); padding: 4px 10px 10px; z-index: 5; }
.hsearch__res:empty { display: none; }
.hero__hint { margin-top: 12px; font-size: 13.5px; color: #c9cacd; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.hero__hint a { color: #fff; text-decoration: none; border-bottom: 1px solid #777; }
.hero__hint a:hover { border-color: #fff; }
@media (min-width: 900px) {
  .hero { min-height: 640px; }
  .hero::before { background: linear-gradient(90deg, rgba(20,21,23,.88) 0, rgba(20,21,23,.72) 38%, rgba(20,21,23,.12) 70%, rgba(20,21,23,0) 100%); }
  .hero__bg img { object-position: 55% 40%; }
  .hero__in { padding-bottom: 64px; }
  .hsearch .btn { display: inline-flex; }
}

/* facts band */
.facts { background: var(--graph); color: #c7c8cb; }
.facts__in { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-top: 36px; padding-bottom: 40px; }
.fact { border-top: 1px solid #3a3b3e; padding-top: 16px; font-size: 14px; line-height: 1.4; }
.fact b { display: block; white-space: nowrap; color: #fff; font-size: clamp(28px, 4.2vw, 46px); font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-bottom: 10px; }
.facts__ind { grid-column: 1 / -1; border-top: 3px solid var(--red); padding-top: 16px; font-size: 15px; line-height: 1.85; }
.facts__ind h2 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
@media (min-width: 900px) {
  .facts__in { grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 48px; padding-top: 60px; padding-bottom: 56px; }
  .fact { padding-top: 20px; font-size: 15px; }
  .facts__ind { grid-column: auto; padding-top: 18px; }
}

/* sections */
.sec { padding-top: 72px; }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-bottom: 28px; }
.sec__head .link { margin-left: auto; margin-bottom: 6px; }
@media (min-width: 900px) { .sec { padding-top: 104px; } .sec__head { margin-bottom: 34px; } }

/* category cards + rail */
.card { display: flex; flex-direction: column; text-decoration: none; }
.card__im { aspect-ratio: 4 / 5; background: var(--stone); overflow: hidden; display: grid; place-items: center; }
.card__im img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card__im--empty span { font-size: 15px; color: #9a9c9f; }
.card:hover .card__im img { transform: scale(1.03); }
.card__t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; border-top: 1px solid var(--ink); padding-top: 12px; }
.card__t h2, .card__t h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.card__t span { color: var(--grey); font-size: 14px; }
.card p { color: var(--grey); font-size: 14px; margin-top: 6px; line-height: 1.45; }
.card:hover h2, .card:hover h3 { color: var(--red); }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--gut) 4px; scroll-padding: 0 var(--gut); }
.rail::-webkit-scrollbar { display: none; }
.rail .card { flex: 0 0 72%; scroll-snap-align: start; }
@media (min-width: 600px) { .rail .card { flex-basis: 40%; } }
@media (min-width: 900px) {
  .rail { gap: 20px; padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2)); scroll-padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2)); }
  .rail .card { flex-basis: 272px; }
}
.rail__nav { display: none; gap: 8px; }
.rail__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--ink); background: #fff; font-size: 17px; }
.rail__nav button:disabled { border-color: var(--line-2); color: #b5b6b9; cursor: default; }
.rail__nav button:not(:disabled):hover { background: var(--ink); color: #fff; }
@media (min-width: 900px) { .rail__nav { display: flex; } .sec__head .link { margin-left: auto; margin-right: 16px; align-self: center; margin-bottom: 0; } }
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 36px; }
@media (min-width: 900px) { .grid4 { grid-template-columns: repeat(4, 1fr); gap: 44px 20px; } }

/* brands */
.brands { margin-top: 72px; border-block: 1px solid var(--line); padding: 28px 0 32px; overflow: hidden; }
.brands__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.brands__head h2 { font-size: 15px; font-weight: 600; }
.brands__head .link { font-size: 14px; }
.brands__rail { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brands__track { display: flex; gap: 16px; width: max-content; animation: marquee 40s linear infinite; }
.brands__rail:hover .brands__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .brands__track { animation: none; } }
.brand { flex: 0 0 auto; width: 176px; height: 76px; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 18px; letter-spacing: .02em; color: #55575a; padding: 14px 22px; }
.brand img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .8; }
.bgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 36px; }
.brand--lg { width: auto; height: 110px; font-size: 22px; }
@media (min-width: 900px) { .brands { margin-top: 104px; padding: 34px 0 36px; } .bgrid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* about teaser */
.about { display: grid; gap: 28px; padding-top: 72px; padding-bottom: 72px; align-items: center; }
.about__im { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.about__im img { width: 100%; height: 100%; object-fit: cover; }
.about p { color: var(--ink-2); font-size: 17px; margin: 18px 0 24px; }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 104px; padding-bottom: 104px; } }

/* CTA */
.cta { position: relative; padding-top: 40px; padding-bottom: 64px; display: grid; gap: 24px; }
.cta::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); height: 3px; background: var(--red); }
.cta__tel { font-size: 30px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.cta__tel span { display: block; font-size: 14px; font-weight: 400; color: var(--grey); letter-spacing: 0; }
.cta .btn { justify-self: start; }
@media (min-width: 900px) {
  .cta { display: flex; align-items: flex-end; gap: 48px; padding-top: 56px; padding-bottom: 88px; }
  .cta__tel { margin-left: auto; font-size: 34px; }
}
.page + .cta, .cat + .cta { margin-top: 0; }

/* footer */
.foot { background: var(--graph); color: #a9abae; font-size: 14.5px; line-height: 1.8; padding-bottom: 64px; }
.foot__in { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 48px var(--gut) 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.foot__in > div:first-child { grid-column: 1 / -1; }
.foot__h { color: #fff; font-weight: 600; margin-bottom: 8px; }
.foot p + p { margin-top: 10px; }
.foot a { text-decoration: none; } .foot a:hover { color: #fff; }
.foot__map { grid-column: 1 / -1; min-height: 120px; border: 1px solid #37383b; background: #2a2b2e; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.foot__map b { color: #fff; font-weight: 600; }
.foot__base { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 18px var(--gut) 0; border-top: 1px solid #333437; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
@media (min-width: 900px) {
  .foot { padding-bottom: 32px; }
  .foot__in { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-top: 56px; }
  .foot__in > div:first-child, .foot__map { grid-column: auto; }
  .foot__base { padding-left: var(--gut); padding-right: var(--gut); }
}

/* mobile action bar */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.mbar a { text-align: center; padding: 15px 0; font-weight: 600; text-decoration: none; }
.mbar a:last-child { background: var(--red); color: #fff; }
@media (min-width: 900px) { .mbar { display: none; } }

/* inner pages */
.page { padding-top: 48px; padding-bottom: 72px; }
.page__lead { font-size: 18px; color: var(--ink-2); max-width: 40em; margin-top: 16px; }
.page__lead a { font-weight: 600; }
.split { display: grid; gap: 32px; margin-top: 32px; }
.split .prose p { font-size: 16.5px; color: var(--ink-2); }
.split__im { aspect-ratio: 4 / 3; overflow: hidden; } .split__im img { width: 100%; height: 100%; object-fit: cover; }
.offer { display: grid; gap: 28px; margin: 28px 0 72px; }
.offer > div { border-top: 1px solid var(--ink); padding-top: 14px; }
.offer h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.offer p { color: var(--ink-2); font-size: 15px; margin-top: 8px; }
@media (min-width: 900px) {
  .page { padding-top: 72px; padding-bottom: 104px; }
  .split { grid-template-columns: 1.1fr 1fr; gap: 64px; margin-top: 40px; align-items: start; }
  .offer { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 104px; }
}

/* category page */
.cat { background: var(--stone); padding-top: 36px; padding-bottom: 72px; }
.crumb { font-size: 13.5px; color: var(--grey); margin-bottom: 14px; }
.crumb a { text-decoration: none; } .crumb a:hover { color: var(--ink); }
.cat__lead { color: var(--ink-2); font-size: 17px; max-width: 42em; margin-top: 14px; }
.cat__tools { position: sticky; top: var(--head); z-index: 10; background: var(--stone); margin: 24px calc(-1 * var(--gut)) 0; padding: 12px var(--gut); display: grid; gap: 12px; }
.fsearch { display: flex; align-items: center; gap: 10px; height: 48px; background: #fff; border: 1px solid var(--line-2); border-radius: 3px; padding: 0 14px; color: #8b8d91; }
.fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.fsearch--lg { height: 58px; border: 2px solid var(--ink); max-width: 720px; margin-top: 24px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .cat { padding-top: 56px; padding-bottom: 104px; }
  .cat__tools { grid-template-columns: 300px 1fr; align-items: center; margin-top: 32px; }
  .cat__tools--chips { grid-template-columns: 1fr; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}
.grp { margin-top: 32px; }
.grp__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.grp__h h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); font-weight: 600; }
.grp__h span { font-size: 13px; color: var(--grey); }
.tbl { background: #fff; }
.tbl__h { display: none; }
.tbl__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 16px; color: var(--ink-2); font-size: 15px; }
.cat__none { margin-top: 32px; font-size: 16px; color: var(--ink-2); }
.cat__none a { font-weight: 600; color: var(--ink); }

/* product row */
.prod { border-top: 1px solid var(--line); }
.tbl > .prod:first-child, .tbl__h + .prod { border-top: 0; }
.prod__row { display: grid; grid-template-columns: 84px 1fr; gap: 6px 14px; padding: 14px 16px; align-items: start; }
.prod__th { grid-row: span 2; height: 63px; background: var(--stone); overflow: hidden; }
.prod__th img { width: 100%; height: 100%; object-fit: cover; }
.prod__name { text-align: left; background: none; border: 0; padding: 0; display: block; }
.prod__name b { font-weight: 600; font-size: 16px; line-height: 1.3; display: block; }
.prod__name span { display: block; color: var(--grey); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.prod__name:hover b { color: var(--red); }
.prod__name::after { content: "Детали +"; display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.prod__name[aria-expanded="true"]::after { content: "Затвори −"; }
.prod__specs { grid-column: 2; display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; font-size: 13.5px; }
.prod__specs > div { display: contents; }
.prod__specs dt { color: var(--grey); }
.prod__specs dd { font-weight: 500; }
.prod__specs--none { display: none; }
.prod__q { grid-column: 2; justify-self: start; font-size: 14px; font-weight: 600; border: 1px solid var(--ink); padding: 8px 14px; border-radius: 3px; text-decoration: none; white-space: nowrap; margin-top: 4px; }
.prod__q:hover { background: var(--ink); color: #fff; }
.prod__more { padding: 4px 16px 22px; display: grid; gap: 18px; }
.prod__img { aspect-ratio: 4 / 3; background: var(--stone); overflow: hidden; max-width: 420px; }
.prod__img img { width: 100%; height: 100%; object-fit: cover; }
.prod__text { font-size: 15px; color: var(--ink-2); }
.prod__text p + p { margin-top: 10px; }
.prod__text .btn { margin-top: 18px; white-space: normal; text-align: left; }
.prod:target { background: #fbfbfa; box-shadow: inset 3px 0 0 var(--red); }
@media (min-width: 900px) {
  .tbl__hs { display: grid; grid-template-columns: 1fr 1fr 1.1fr 1.1fr; gap: 20px; }
  .tbl__h { display: grid; grid-template-columns: 104px 2.1fr 4.3fr 150px; gap: 20px; padding: 13px 24px; font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); }
  .prod__row { grid-template-columns: 104px 2.1fr 4.3fr 150px; gap: 20px; padding: 14px 24px; align-items: center; }
  .prod__th { grid-row: auto; height: 62px; }
  .prod__name::after { display: none; }
  .prod__name { cursor: pointer; }
  .prod__specs { grid-column: auto; grid-template-columns: 1fr 1fr 1.1fr 1.1fr; gap: 20px; font-size: 15px; }
  .prod__specs > div { display: block; }
  .prod__specs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prod__specs dd { font-weight: 400; white-space: nowrap; }
  .prod__specs--none { display: block; }
  .prod__q { grid-column: auto; justify-self: end; margin: 0; }
  .prod__more { grid-template-columns: 360px 1fr; gap: 32px; padding: 6px 24px 28px 148px; }
  .prod__row:hover { background: #fcfcfb; }
}

/* search results page */
.results__count { color: var(--grey); margin-top: 20px; font-size: 15px; }
.results { margin-top: 12px; max-width: 820px; }
.results .res a { grid-template-columns: 84px 1fr auto; padding: 14px 6px; }
.results .res__th { width: 84px; height: 63px; }

/* contact */
.contact { display: grid; gap: 40px; margin-top: 32px; }
.contact__big { display: block; font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -.03em; text-decoration: none; line-height: 1.05; }
.contact__mail { display: inline-block; font-size: 19px; margin-top: 8px; font-weight: 500; }
.contact dl { margin: 28px 0 20px; display: grid; gap: 16px; }
.contact dt { font-size: 13px; color: var(--grey); text-transform: uppercase; letter-spacing: .08em; }
.contact dd { font-size: 17px; margin-top: 2px; }
.form { background: var(--stone); padding: 24px 20px 28px; display: grid; gap: 14px; }
.form__note { color: var(--ink-2); font-size: 15px; margin-top: -4px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.form input, .form textarea { width: 100%; border: 1px solid var(--line-2); background: #fff; border-radius: 3px; padding: 12px 14px; font-size: 16px; font-weight: 400; }
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--ink); }
.form__2 { display: grid; gap: 14px; }
.form__legal { font-size: 13px; color: var(--grey); }
.form .btn { justify-self: start; }
.form__status { font-size: 15px; font-weight: 500; }
.form__status.is-ok { color: #1d6b3a; } .form__status.is-err { color: var(--red); }
.hp { position: absolute; left: -9999px; }
@media (min-width: 900px) {
  .contact { grid-template-columns: 1fr 1.15fr; gap: 72px; margin-top: 40px; align-items: start; }
  .form { padding: 36px 36px 40px; }
  .form__2 { grid-template-columns: 1fr 1fr; }
}