/* ============================================================
   ПРОГАЗ — дизайн-система
   Направление: инженерный каталог. Графит и сигнальный жёлтый —
   цвет, которым в России красят газовые трубы. Никаких градиентов:
   плотные цвета, тонкие линии, почти прямые углы, моноширинные
   цифры как в паспорте оборудования.
   ============================================================ */

:root{
  --graphite:#141F2B;
  --steel-900:#1C2D3D;
  --steel-700:#324A5E;
  --steel-500:#5C7186;
  --steel-300:#8FA0AF;

  --paper:#FFFFFF;        /* фон страницы — белый, совпадает с фоном большинства товарных фото */
  --panel:#FFFFFF;
  --panel-dim:#F3F5F7;
  --line:#D3D9DF;
  --line-dark:#2A3D4F;

  --blue:#1C5688;         /* фирменный синий из логотипа ПРОГАЗ */
  --blue-deep:#123F66;
  --blue-wash:#E8F1F8;
  --blue-bright:#4098D7;  /* яркий синий для акцентов на тёмном фоне */
  --blue-bright-deep:#2C7CB8;
  --yellow:#F5B301;       /* точечный жёлтый — полоска шапки и акцент "в день покупки" */

  --gas:#4098D7;          /* фирменный синий вместо жёлтого — акцентный цвет сайта */
  --gas-deep:#1C5688;
  --gas-wash:#E8F1F8;

  --stock:#2E7D4F;
  --stock-wash:#E7F3EC;

  --r:16px;
  --r-sm:10px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Golos Text','Inter','IBM Plex Sans',-apple-system,sans-serif;
  background:var(--paper);
  color:var(--graphite);
  line-height:1.55;
  font-size:15px;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select,textarea{font-family:inherit;}

.mono{font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-variant-numeric:tabular-nums;}

h1,h2,h3,.cond{
  font-family:'Roboto Condensed','Golos Text',sans-serif;
  font-weight:700;
  letter-spacing:-0.005em;
  line-height:1.12;
}

.container{max-width:1240px; margin:0 auto; padding:0 24px;}

*:focus-visible{outline:2px solid var(--gas); outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- Верхняя строка ---------- */
.topbar{
  background:var(--graphite); color:var(--steel-300);
  font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--line-dark);
}
.topbar .container{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.topbar a{color:#fff; font-weight:700; font-size:13.5px;}
.topbar a:hover{color:var(--gas);}

/* ---------- Шапка ---------- */
.header{
  background:var(--steel-900); position:sticky; top:0; z-index:60;
  border-bottom:3px solid var(--blue);
  border-image:linear-gradient(90deg, var(--blue), var(--yellow)) 1;
}
.header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:14px; padding-bottom:14px; position:relative;
}
.logo{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.logo-img{height:34px; width:auto; flex-shrink:0;}
.footer .logo-img{height:30px;}

.nav{display:flex; gap:26px; font-size:15px; font-weight:800;}
.nav a{color:#fff; padding:4px 0; border-bottom:2px solid transparent;}
.nav a.active{border-bottom-color:var(--gas);}

.header-actions{display:flex; align-items:center; gap:18px; flex-shrink:0;}
.cart-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:2px 4px; background:none;
}
.cart-btn-icon{position:relative; display:flex; align-items:center; justify-content:center;}
.cart-btn:hover svg{stroke:var(--gas);}
.cart-btn svg{width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.6; transition:stroke .12s;}
.cart-btn-label{font-size:12px; font-weight:700; color:#fff; line-height:1; white-space:nowrap;}
.cart-count{
  position:absolute; top:-6px; right:-9px; min-width:16px; height:16px;
  background:var(--gas); color:#fff; font-family:'JetBrains Mono',monospace;
  font-size:9.5px; font-weight:700; border-radius:8px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}
.nav-toggle{display:none; width:40px; height:40px; align-items:center; justify-content:center;}
.nav-toggle svg{width:22px; height:22px; stroke:#fff; stroke-width:2; fill:none;}

/* Всплывающее мини-превью корзины/сравнения при наведении на значок в шапке. */
.cart-btn-wrap{position:relative;}
.cart-preview{
  position:absolute; top:100%; right:-8px; margin-top:12px; width:280px;
  background:var(--panel); color:var(--graphite); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:0 16px 40px -8px rgba(20,31,43,.28);
  padding:14px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s, transform .15s, visibility .15s; z-index:70;
}
/* Невидимый мостик над зазором, чтобы курсор не терял :hover при движении
   от иконки вниз к панели. */
.cart-btn-wrap::after{
  content:''; position:absolute; top:100%; right:-8px; left:-40px; height:12px;
}
.cart-btn-wrap:hover .cart-preview{opacity:1; visibility:visible; transform:translateY(0);}
.cart-preview-empty{font-size:13px; color:var(--steel-500); text-align:center; padding:10px 0;}
.cart-preview-list{display:flex; flex-direction:column; gap:10px; margin-bottom:12px; max-height:280px; overflow-y:auto;}
.cart-preview-row{display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center;}
.cart-preview-thumb{
  width:40px; height:40px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cart-preview-thumb img{width:100%; height:100%; object-fit:contain; padding:4px;}
.cart-preview-thumb svg{width:55%; height:55%; stroke:var(--steel-300); fill:none; stroke-width:1.4;}
.cart-preview-name{
  grid-column:2; font-size:12.5px; line-height:1.3; color:var(--graphite);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cart-preview-price{grid-column:2; font-size:12px; color:var(--steel-500); margin-top:2px;}
.cart-preview-remove{
  grid-column:3; grid-row:1 / 3; width:22px; height:22px; flex:none;
  display:flex; align-items:center; justify-content:center; border:none; background:none;
  color:var(--steel-300); font-size:17px; line-height:1; cursor:pointer; border-radius:var(--r-sm);
}
.cart-preview-remove:hover{color:var(--graphite); background:var(--paper);}
.cart-preview-more{font-size:12px; color:var(--steel-500); text-align:center; margin:-2px 0 10px;}
.cart-preview-total{
  display:flex; justify-content:space-between; align-items:center; font-size:13px;
  color:var(--steel-700); padding-top:10px; margin-top:2px; border-top:1px solid var(--line);
  margin-bottom:12px;
}
.cart-preview-total b{font-size:16px; color:var(--graphite);}
@media (max-width:980px){.cart-preview{display:none;}}

@media (max-width:980px){
  .nav{display:none;}
  .nav-toggle{display:flex;}
  .nav.open{
    display:flex; flex-direction:column; gap:2px; position:absolute; top:100%; left:0; right:0;
    background:var(--steel-900); padding:12px 24px 18px; border-top:1px solid var(--line-dark);
  }
  .nav.open a{padding:9px 0;}
}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--r-sm); font-weight:600; font-size:14px;
  border:1.5px solid transparent; transition:background .12s, color .12s, border-color .12s;
}
.btn-gas{background:var(--gas); color:#fff; border-color:var(--gas);}
.btn-gas:hover{background:var(--blue-bright-deep); border-color:var(--blue-bright-deep);}
.btn-blue{background:var(--blue-bright); color:#fff; border-color:var(--blue-bright);}
.btn-blue:hover{background:var(--blue-bright-deep); border-color:var(--blue-bright-deep);}
.btn-dark{background:var(--graphite); color:#fff; border-color:var(--graphite);}
.btn-dark:hover{background:var(--steel-700); border-color:var(--steel-700);}
.btn-ghost{border-color:var(--line); color:var(--graphite); background:var(--panel);}
.btn-ghost:hover{border-color:var(--graphite);}
.btn-outline-light{border-color:rgba(255,255,255,.35); color:#fff;}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-sm{padding:8px 15px; font-size:13px;}
.btn-block{width:100%;}

/* ---------- Хлебные крошки ---------- */
.crumbs{font-size:12.5px; color:var(--steel-500); padding:16px 0; font-family:'JetBrains Mono',monospace;}
.crumbs a:hover{color:var(--graphite);}
.crumbs span{margin:0 7px; color:var(--steel-300);}

/* ---------- Титул страницы ---------- */
.page-head{padding:6px 0 24px;}
.page-head h1{font-size:clamp(27px,3.4vw,38px); text-transform:uppercase; letter-spacing:0.01em;}
.page-head .sub{color:var(--steel-500); margin-top:8px; font-size:15px;}

/* ---------- Главный экран ---------- */
.hero{background:var(--graphite); color:#fff; padding:64px 0 60px; position:relative; overflow:hidden;}
.hero-bg{
  position:absolute; inset:-40px; z-index:0; pointer-events:none;
  /* Картинка встроена как data-URI: этот блок — LCP-элемент (Lighthouse
     подтвердил), а для CSS background-image браузер не умеет ни
     fetchpriority, ни раннее обнаружение в HTML. Раз результат всё
     равно смазан blur(28px) до неузнаваемости, инлайним крошечную
     версию (60×7px) прямо в CSS — так рендер не ждёт лишний сетевой
     запрос вообще. */
  background-image:linear-gradient(100deg, rgba(20,49,77,.82) 0%, rgba(20,31,43,.90) 55%, rgba(20,31,43,.94) 100%), url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAHADwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDtrxpxr9sgD/MCUYNhVUY3AjvnP6CnxW16HYl3CjceZCc57df/ANVFFHQL6kjRXfyFN5w2WHmYJXGMfqfyqxbfaI7KIMu+UDnc+P15ooqIxsXKV1YZsvP75Gf9peP/AB2jZegj5yfX5l/+JooqyB0f2xWJZVcY4BcD+S1aGcDIwe9FFAH/2Q==');
  background-size:180% cover; background-position:left center;
  filter:blur(28px); transform:scale(1.08);
}
.hero-mark{
  position:absolute; z-index:0; right:40px; bottom:-30px; height:82%; width:auto;
  opacity:.9; pointer-events:none;
  filter:blur(3px);
}
@media (max-width:860px){.hero-mark{display:none;}}
.hero .container{position:relative; z-index:1;}
.hero-inner{display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center;}
.hero .tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--blue-bright);
  border:1px solid var(--blue-bright); padding:5px 11px; border-radius:999px; margin-bottom:20px;
}
.hero h1{
  font-size:clamp(32px,4.4vw,52px); text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.hero h1 em{font-style:normal; color:var(--blue-bright);}
.hero .lede{color:#B9C3CC; font-size:16px; max-width:470px; margin-bottom:26px;}
.hero-actions{display:flex; gap:11px; flex-wrap:wrap;}

/* Паспортная табличка — сигнатура страницы */
.spec-plate{background:var(--steel-900); border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden;}
.spec-plate-head{
  background:var(--blue); color:#fff;
  font-family:'Roboto Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; font-size:12.5px; padding:9px 16px;
  display:flex; justify-content:space-between; align-items:center;
}
.spec-plate-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 16px; border-bottom:1px solid var(--line-dark);
}
.spec-plate-row:last-child{border-bottom:none;}
.spec-plate-row .k{color:var(--steel-300); font-size:13px;}
.spec-plate-row .v{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px; color:#fff; text-align:right;}
.spec-plate-row .v em{font-style:normal; color:var(--yellow);}

@media (max-width:860px){.hero-inner{grid-template-columns:1fr; gap:32px;}}

/* ---------- Полоса преимуществ ---------- */
.strip{position:relative; z-index:2; margin-top:-6px; padding-bottom:2px;}
.strip-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  width:100%;
  background:var(--panel);
  box-shadow:0 24px 48px -16px rgba(20,31,43,.32), 0 2px 10px rgba(20,31,43,.10);
}
.strip-item{padding:18px clamp(18px,2vw,28px); border-right:1px solid var(--line); display:flex; gap:12px; align-items:flex-start;}
.strip-item:first-child{padding-left:clamp(20px,calc((100vw - 1240px)/2 + 20px),200px);}
.strip-item:last-child{border-right:none; padding-right:clamp(20px,calc((100vw - 1240px)/2 + 20px),200px);}
.strip-item svg{width:21px; height:21px; stroke:var(--gas-deep); fill:none; stroke-width:1.7; flex-shrink:0; margin-top:1px;}
.strip-item h3{font-size:14.5px; font-weight:700; margin-bottom:3px;}
.strip-item p{font-size:12.5px; font-weight:500; color:var(--steel-700); line-height:1.4;}
@media (max-width:900px){
  .strip{margin-top:-6px;}
  .strip-grid{grid-template-columns:repeat(2,1fr);}
  .strip-item:nth-child(2){border-right:none;}
  .strip-item:nth-child(1),.strip-item:nth-child(2){border-bottom:1px solid var(--line);}
}
@media (max-width:540px){
  .strip{margin-top:-6px;}
  .strip-grid{grid-template-columns:1fr;}
  .strip-item{border-right:none; border-bottom:1px solid var(--line);}
  .strip-item:last-child{border-bottom:none;}
}

/* ---------- Секции ---------- */
.section{padding:50px 0;}
.section-tight{padding:34px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(21px,2.6vw,29px); text-transform:uppercase;}
.section-head .link{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--steel-500);
  border-bottom:1px solid var(--line); padding-bottom:2px;
}
.section-head .link:hover{color:var(--graphite); border-bottom-color:var(--gas);}

/* ---------- Каталог: две колонки ---------- */
.catalog-layout{display:grid; grid-template-columns:262px 1fr; gap:26px; align-items:start; padding-bottom:56px;}
@media (max-width:900px){.catalog-layout{grid-template-columns:1fr;}}

/* ---------- Фильтры ---------- */
.filters{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); position:sticky; top:96px;}
.filters-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 15px; border-bottom:1px solid var(--line); background:var(--panel-dim);
}
.filters-head h2{font-size:13px; text-transform:uppercase; letter-spacing:0.09em;}
.filters-reset{font-size:12px; color:var(--steel-500); border-bottom:1px dashed var(--line);}
.filters-reset:hover{color:var(--gas-deep); border-bottom-color:var(--gas-deep);}

.fgroup{border-bottom:1px solid var(--line); padding:14px 15px;}
.fgroup:last-child{border-bottom:none;}
.fgroup-title{
  font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--steel-700);
  margin-bottom:10px; display:flex; align-items:center; gap:7px;
}
.fgroup-title::before{content:''; width:3px; height:12px; background:var(--gas); flex-shrink:0;}

.fopt{display:flex; align-items:center; gap:9px; padding:5px 0; cursor:pointer; font-size:13.5px; color:var(--steel-700);}
.fopt:hover{color:var(--graphite);}
.fopt input{
  appearance:none; width:16px; height:16px; border:1.5px solid var(--line);
  border-radius:5px; flex-shrink:0; position:relative; cursor:pointer; background:var(--panel);
}
.fopt input:checked{background:var(--gas); border-color:var(--gas);}
.fopt input:checked::after{
  content:''; position:absolute; left:4.5px; top:1px; width:4px; height:9px;
  border:solid var(--graphite); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.fopt .cnt{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--steel-300);}

.cat-block{border-bottom:1px dashed var(--line);}
.cat-block:last-child{border-bottom:none;}
.cat-fopt{padding:7px 0;}
.cat-brands{
  margin:0 0 10px 25px; padding:8px 0 8px 11px; border-left:2px solid var(--gas);
  animation:catBrandsIn .15s ease;
}
.cat-brands-title{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--steel-500); margin-bottom:6px;
}
.cat-brands-list .fopt{font-size:12.5px; padding:4px 0;}
.cat-brands-list .fopt input{width:14px; height:14px;}
@keyframes catBrandsIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);}}

.price-row{display:flex; align-items:center; gap:8px;}
.price-row input{
  width:100%; padding:8px 10px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-family:'JetBrains Mono',monospace; font-size:13px; background:var(--panel); color:var(--graphite);
}
.price-row input:focus{border-color:var(--gas); outline:none;}
.price-row span{color:var(--steel-300);}

.filters-toggle{display:none;}
@media (max-width:900px){
  .filters{position:static; border:none; background:transparent;}
  .filters-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:13px 15px; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--r); font-weight:600; font-size:14px;
  }
  .filters-toggle svg{width:16px; height:16px; stroke:var(--graphite); fill:none; stroke-width:2;}
  .filters-head{display:none;}
  .filters-body{display:none; background:var(--panel); border:1px solid var(--line); border-top:none; border-radius:0 0 var(--r) var(--r);}
  .filters.open .filters-body{display:block;}
  .filters.open .filters-toggle{border-radius:var(--r) var(--r) 0 0;}
}

/* ---------- Строка результатов ---------- */
.results-bar{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap;}
.results-count{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--steel-500);}
.results-count b{color:var(--graphite); font-weight:700;}
.sort-select{
  padding:8px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); font-size:13.5px; color:var(--graphite); cursor:pointer;
}
.sort-select:focus{border-color:var(--gas); outline:none;}

.chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px;}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 11px;
  background:var(--gas-wash); border:1px solid var(--gas); border-radius:999px;
  font-size:12.5px; color:var(--graphite);
}
.chip button{font-size:14px; line-height:1; color:var(--gas-deep);}
.chip button:hover{color:var(--graphite);}

/* ---------- Сетка и карточка ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px){.grid,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.grid,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .13s, transform .13s;
}
.card:hover{border-color:var(--steel-300); transform:translateY(-1px);}
.card-media{
  aspect-ratio:4/5; background:var(--paper); position:relative; overflow:hidden; min-height:0;
  display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);
}
.card-media img{width:100%; height:100%; object-fit:contain; padding:16px; box-sizing:border-box;}
.card-media svg{width:34%; height:34%; stroke:var(--steel-300); fill:none; stroke-width:1.2;}
.card-art{
  display:block; font-size:11px; color:var(--steel-300);
  margin:2px 0 4px;
}
.card-body{padding:13px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-brand{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--gas-deep);
}
.card-title{
  font-size:14px; font-weight:600; line-height:1.35; font-family:'Golos Text',sans-serif;
  min-height:calc(1.35em * 2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
}
.card-title a:hover{color:var(--gas-deep);}
.card-spec{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--steel-500); padding-top:2px;}
.card-foot{
  margin-top:auto; padding-top:11px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; border-top:1px solid var(--line);
}
.card-price{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:17px;}
.add-btn{
  width:36px; height:36px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .12s, border-color .12s;
}
.add-btn svg{width:15px; height:15px; stroke:var(--graphite); stroke-width:2.2; fill:none;}
.add-btn:hover{background:var(--gas); border-color:var(--gas);}
.add-btn:hover svg{stroke:#fff;}
.add-btn.in-cart{background:var(--stock-wash); border-color:var(--stock);}
.add-btn.in-cart svg{stroke:var(--stock);}
.add-btn.in-cart:hover{background:var(--stock); border-color:var(--stock);}
.add-btn.in-cart:hover svg{stroke:#fff;}

.product-add-btn.in-cart{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--stock); border-color:var(--stock); background:var(--stock-wash);
}
.product-add-btn.in-cart svg{width:16px; height:16px; stroke:var(--stock); stroke-width:2.4; fill:none;}
.product-add-btn.in-cart:hover{background:var(--stock); color:#fff;}
.product-add-btn.in-cart:hover svg{stroke:#fff;}

.qty-stepper{
  display:flex; align-items:center; height:36px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); flex-shrink:0; overflow:hidden;
}
.qty-stepper button{
  width:28px; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--graphite); flex-shrink:0;
}
.qty-stepper button:hover{background:var(--panel-dim);}
.qty-stepper-count{
  min-width:20px; text-align:center; font-family:'JetBrains Mono',monospace;
  font-size:13px; font-weight:700;
}

.compare-btn{
  position:absolute; top:9px; right:9px; z-index:1;
  width:28px; height:28px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  transition:background .12s, border-color .12s;
}
.compare-btn svg{width:14px; height:14px; stroke:var(--steel-500); stroke-width:1.8; fill:none;}
.compare-btn:hover{border-color:var(--gas-deep);}
.compare-btn:hover svg{stroke:var(--gas-deep);}
.compare-btn.active{background:var(--gas); border-color:var(--gas);}
.compare-btn.active svg{stroke:#fff;}

.compare-toggle-btn svg{width:16px; height:16px; stroke-width:1.9; fill:none; margin-right:2px; vertical-align:-3px;}
.compare-toggle-btn.active{background:var(--gas-wash); border-color:var(--gas-deep); color:var(--gas-deep);}
.compare-toggle-btn.active svg{stroke:var(--gas-deep);}

.empty-state{
  grid-column:1/-1; text-align:center; padding:54px 20px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
}
.empty-state p{color:var(--steel-500); margin-bottom:16px;}

/* ---------- Страница товара ---------- */
.product-detail{display:grid; grid-template-columns:1fr 1fr; gap:42px; padding:8px 0;}
.product-media{
  aspect-ratio:4/5; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.product-media img{width:100%; height:100%; object-fit:contain; padding:38px; box-sizing:border-box;}
.product-media svg{width:42%; height:42%; stroke:var(--steel-300); fill:none; stroke-width:1;}
.product-media-wrap{position:relative;}
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.85); color:var(--graphite); font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 0.15s, transform 0.15s;
}
.gallery-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.06);}
.gallery-arrow-prev{left:12px;}
.gallery-arrow-next{right:12px;}
.product-gallery{display:flex; flex-direction:column; gap:11px;}
.product-thumbs{display:flex; gap:9px; flex-wrap:wrap;}
.product-thumb{
  width:68px; height:68px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); overflow:hidden; padding:0;
}
.product-thumb img{width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box;}
.product-thumb:hover{border-color:var(--steel-300);}
.product-thumb.active{border-color:var(--gas); border-width:2px;}

.product-media.zoomable{cursor:zoom-in;}

/* ---------- Просмотр фото на весь экран ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(10,15,20,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:64px 16px 24px;
}
.lightbox-stage{
  flex:1; width:100%; max-width:1100px; display:flex; align-items:center;
  justify-content:center; min-height:0; overflow:hidden;
}
.lightbox-img{
  max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in;
  transition:transform .18s ease-out;
}
.lightbox-img.zoomed{transform:scale(2.4); cursor:zoom-out;}
.lightbox-close{
  position:absolute; top:16px; right:20px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff;
  font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s;
}
.lightbox-close:hover{background:rgba(255,255,255,.18);}
.lightbox-count{
  position:absolute; top:26px; left:24px; color:#B9C3CC;
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.04em;
}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .15s, transform .15s;
}
.lightbox-arrow:hover{background:rgba(255,255,255,.18); transform:translateY(-50%) scale(1.06);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
.lightbox-thumbs{
  display:flex; gap:9px; margin-top:18px; max-width:100%; overflow-x:auto; padding:2px;
}
.lightbox-thumb{
  flex-shrink:0; width:60px; height:60px; border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm); background:rgba(255,255,255,.06); overflow:hidden; padding:0; cursor:pointer;
}
.lightbox-thumb img{width:100%; height:100%; object-fit:contain; padding:5px; box-sizing:border-box;}
.lightbox-thumb.active{border-color:var(--gas); border-width:2px;}
@media (max-width:640px){
  .lightbox{padding:56px 8px 16px;}
  .lightbox-arrow{width:38px; height:38px; font-size:20px;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
  .lightbox-thumbs{display:none;}
}

.product-info h1{font-size:clamp(21px,2.5vw,29px); margin:9px 0 14px;}
.product-art{
  font-size:13px; color:var(--steel-300); display:block; margin-top:4px;
}
.color-picker{margin-top:16px;}
.color-picker-label{font-size:13px; color:var(--steel-500); margin-bottom:8px;}
.color-picker-label b{color:var(--graphite); font-weight:600;}
.color-swatches{display:flex; gap:10px;}
.color-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--line);
  cursor:pointer; padding:0; box-shadow:inset 0 0 0 2px var(--panel);
}
.color-swatch:hover{border-color:var(--steel-500);}
.color-swatch.active{border-color:var(--gas); box-shadow:inset 0 0 0 2px var(--panel), 0 0 0 2px var(--gas);}

.volume-picker{margin-top:16px;}
.volume-picker-label{font-size:13px; color:var(--steel-500); margin-bottom:8px;}
.volume-pills{display:flex; gap:10px; flex-wrap:wrap;}
.volume-pill{
  min-width:52px; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--panel); color:var(--graphite); font-size:14px; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.volume-pill:hover{border-color:var(--steel-500);}
.volume-pill.active{border-color:var(--graphite); border-width:2px; font-weight:600;}
.product-price-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
.product-price{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:31px;}
.stock-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--stock); background:var(--stock-wash); border:1px solid #BEDFCC;
  padding:5px 11px; border-radius:var(--r-sm);
}
.stock-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--stock);}
.stock-badge.out{color:var(--steel-500); background:var(--panel-dim); border-color:var(--line);}
.stock-badge.out .dot{background:var(--steel-300);}

.card-stock-out{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  color:var(--steel-500); background:var(--panel-dim); border:1px solid var(--line);
  padding:2px 8px; border-radius:var(--r-sm); margin-bottom:4px;
}
.card.out-of-stock .card-media{opacity:.6;}
.card.out-of-stock .add-btn{opacity:.4; pointer-events:none;}
.product-desc{color:var(--steel-700); font-size:14.5px; line-height:1.65; margin-bottom:22px;}

.spec-table-wrap{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:24px;}
.spec-table{width:100%; border-collapse:collapse;}
.spec-table caption{
  text-align:left; font-family:'Roboto Condensed',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; font-size:12px; color:var(--steel-700);
  padding:9px 12px; background:var(--panel-dim); border-bottom:1px solid var(--line);
}
.spec-table tr{background:var(--panel);}
.spec-table td{padding:10px 12px; font-size:13.5px; border-bottom:1px solid var(--line);}
.spec-table tr:last-child td{border-bottom:none;}
.spec-table td:first-child{color:var(--steel-500); width:52%; border-right:1px solid var(--line);}
.spec-table td:last-child{font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13px;}
.spec-table-wrap:has(.spec-toggle) .spec-table tr:last-child td{border-bottom:1px solid var(--line);}
.spec-toggle{
  display:block; width:100%; text-align:center; margin:0;
  padding:10px 12px; background:var(--panel-dim); border:none; border-top:none;
  border-radius:0 0 var(--r-sm) var(--r-sm); font-size:13px; font-weight:600; color:var(--gas-deep);
}
.spec-toggle:hover{background:var(--line);}

.qty-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.qty-control{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--panel);}
.qty-control button{width:36px; height:40px; font-size:17px; color:var(--steel-700);}
.qty-control button:hover{color:var(--graphite); background:var(--panel-dim);}
.qty-control input{
  width:46px; text-align:center; border:none; background:transparent;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; color:var(--graphite);
}
@media (max-width:820px){.product-detail{grid-template-columns:1fr; gap:24px;}}

/* ---------- Информационные карточки ---------- */
.info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.info-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px;}
.info-card .icon{
  width:34px; height:34px; background:var(--gas-wash); border:1px solid var(--gas);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; margin-bottom:13px;
}
.info-card .icon svg{width:17px; height:17px; stroke:var(--gas-deep); fill:none; stroke-width:1.7;}
.info-card h3{font-size:14.5px; margin-bottom:5px;}
.info-card p{font-size:13px; color:var(--steel-500); line-height:1.5;}
@media (max-width:900px){.info-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.info-grid{grid-template-columns:1fr;}}

.brands-title{
  margin-top:40px; margin-bottom:24px; text-align:center;
  font-size:clamp(22px,2.8vw,30px); text-transform:uppercase; letter-spacing:0.02em;
  position:relative; padding-bottom:14px;
}
.brands-title::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:3px; background:var(--gas); border-radius:2px;
}

/* ---------- Бегущая лента брендов ---------- */
.brand-marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brand-marquee-track{
  display:flex; align-items:center; gap:64px; width:max-content;
  animation:brandScroll 70s linear infinite;
}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused;}
.brand-item{display:flex; align-items:center; flex-shrink:0; height:64px;}
.brand-item img{
  height:100%; width:auto; max-width:200px; object-fit:contain;
  filter:grayscale(1) opacity(.55); transition:filter .18s;
}
.brand-item img:hover{filter:none;}
.brand-item-text{
  font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:30px;
  color:var(--steel-300); letter-spacing:0.02em; white-space:nowrap; transition:color .18s;
}
.brand-item-text:hover{color:var(--steel-700);}
@keyframes brandScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.brand-marquee-track{animation:none;}}

.about-grid{display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start; margin-bottom:8px;}
.about-logo{display:flex; justify-content:center; align-items:flex-start; padding:10px;}
.about-logo img{width:100%; max-width:130px; height:auto;}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
  .about-logo{max-width:150px; margin:0 auto;}
}
.prose{max-width:720px;}
.prose p{color:var(--steel-700); font-size:15px; line-height:1.7; margin-bottom:14px;}
.prose h3{font-size:17px; margin:26px 0 12px;}
.prose ul{margin:0 0 14px 20px; list-style:disc;}
.prose li{color:var(--steel-700); font-size:15px; line-height:1.7; margin-bottom:6px;}

/* ---------- Статьи ---------- */
.articles-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.article-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; display:flex; flex-direction:column; gap:10px;
}
.article-card h3{font-size:18px; line-height:1.3;}
.article-card h3 a:hover{color:var(--gas-deep);}
.article-card p{color:var(--steel-500); font-size:14px; line-height:1.6; flex-grow:1;}
.article-card .link{font-weight:600; color:var(--gas-deep); font-size:14px;}
@media (max-width:700px){.articles-grid{grid-template-columns:1fr;}}

.article-cta{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; margin-top:30px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.article-cta p{margin:0; color:var(--steel-700); font-size:14.5px; max-width:420px;}

/* ---------- Контакты ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.contact-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px;}
.contact-row{display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line);}
.contact-row:last-of-type{border-bottom:none;}
.contact-row .icon{
  width:34px; height:34px; background:var(--panel-dim); border:1px solid var(--line);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-row .icon svg{width:16px; height:16px; stroke:var(--gas-deep); fill:none; stroke-width:1.7;}
.contact-row .lbl{font-size:11.5px; color:var(--steel-500); text-transform:uppercase; letter-spacing:0.06em;}
.contact-row .val{font-weight:600; font-size:14.5px; margin-top:2px;}
.map-embed{width:100%; aspect-ratio:4/3; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- Вопросы ---------- */
.faq-item{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px;}
.faq-q{
  width:100%; text-align:left; padding:15px 18px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; font-weight:600; font-size:15px;
}
.faq-q svg{width:15px; height:15px; stroke:var(--gas-deep); stroke-width:2.4; fill:none; flex-shrink:0; transition:transform .18s;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .22s ease;}
.faq-a p{padding:0 18px 16px; color:var(--steel-500); font-size:14px; line-height:1.6;}
.faq-item.open .faq-a{max-height:420px;}

/* ---------- Корзина ---------- */
.cart-layout{display:grid; grid-template-columns:1fr 330px; gap:28px; align-items:start;}
@media (max-width:820px){.cart-layout{grid-template-columns:1fr;}}
.cart-row{
  display:grid; grid-template-columns:62px 1fr auto auto; gap:15px; align-items:center;
  padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px;
}
.cart-row .thumb{
  width:62px; height:62px; background:var(--panel-dim); border:1px solid var(--line);
  border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.cart-row .thumb img{width:100%; height:100%; object-fit:contain; padding:6px;}
.cart-row .name{font-weight:600; font-size:14px;}
.cart-row .name .brand{
  display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--gas-deep); text-transform:uppercase; margin-bottom:3px;
}
.cart-row .remove{color:var(--steel-300); font-size:17px; line-height:1;}
.cart-row .remove:hover{color:var(--graphite);}
.cart-summary{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px;}
.summary-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px;}
.summary-row.total{
  font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:19px;
  border-top:1px solid var(--line); margin-top:8px; padding-top:14px; text-transform:uppercase;
}
.cart-empty{text-align:center; padding:54px 20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);}
.cart-empty p{color:var(--steel-500); margin-bottom:18px;}

/* ---------- Сравнение товаров ---------- */
.compare-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);}
.compare-table{width:100%; border-collapse:collapse; min-width:640px;}
.compare-table th, .compare-table td{
  padding:12px 16px; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  text-align:left; font-size:13.5px; vertical-align:top;
}
.compare-table th:last-child, .compare-table td:last-child{border-right:none;}
.compare-table thead th{
  position:relative; padding:20px 16px 16px; text-align:center; min-width:200px;
  vertical-align:top; font-weight:400;
}
.compare-row-label{
  position:sticky; left:0; background:var(--panel-dim); font-weight:600; font-size:13px;
  color:var(--steel-700); white-space:nowrap; z-index:1;
}
.compare-remove{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--steel-500);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.compare-remove:hover{color:var(--graphite); border-color:var(--steel-300);}
.compare-thumb{
  display:block; width:100%; aspect-ratio:4/5; max-width:160px; margin:0 auto 10px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden;
}
.compare-thumb img{width:100%; height:100%; object-fit:contain; padding:12px; box-sizing:border-box;}
.compare-name{display:block; font-weight:600; font-size:14px; line-height:1.35; margin:4px 0 8px;}
.compare-name:hover{color:var(--gas-deep);}
.compare-price{font-weight:700; font-size:16px; margin-bottom:10px;}
.compare-corner{text-align:center; vertical-align:middle;}
.compare-add-link{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--steel-500); font-size:12.5px; font-weight:600; padding:10px 4px;
  border:1.5px dashed var(--line); border-radius:var(--r-sm); white-space:nowrap;
}
.compare-add-link svg{width:20px; height:20px; stroke:var(--steel-300); stroke-width:1.8; fill:none;}
.compare-add-link:hover{color:var(--gas-deep); border-color:var(--gas-deep);}
.compare-add-link:hover svg{stroke:var(--gas-deep);}

.form-group{margin-bottom:15px;}
.form-group label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--steel-700);}
.form-group input,.form-group textarea,.form-group select{
  width:100%; padding:10px 13px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:14px; background:var(--panel); color:var(--graphite);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--gas); outline:none;}
.pay-note{
  background:var(--gas-wash); border:1px solid var(--gas); border-radius:var(--r-sm);
  padding:13px 15px; font-size:13px; color:var(--steel-700); margin-top:16px;
}

/* ---------- Подвал ---------- */
.footer{background:var(--graphite); color:#9BA7B2; padding:40px 0 22px; margin-top:54px; border-top:3px solid var(--blue); border-image:linear-gradient(90deg, var(--blue), var(--yellow)) 1;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:26px;}
.footer .logo{margin-bottom:12px;}
.footer p{font-size:13px; line-height:1.6; max-width:290px; color:#7C8894;}
.footer h4{
  font-family:'Roboto Condensed',sans-serif; font-size:12px; text-transform:uppercase;
  letter-spacing:0.09em; color:#fff; margin-bottom:12px;
}
.footer ul li{margin-bottom:8px; font-size:13.5px;}
.footer a:hover{color:var(--gas);}
.footer-bottom{
  border-top:1px solid var(--line-dark); padding-top:18px; font-size:12px; color:#69737D;
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; justify-content:space-between;
}
.footer-legal{display:flex; flex-wrap:wrap; gap:6px 18px;}
.footer-legal a{color:#69737D;}
.footer-legal a:hover{color:#fff;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Уведомление ---------- */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(16px); opacity:0;
  background:var(--graphite); color:#fff; padding:13px 20px; border-radius:var(--r-sm);
  border-left:3px solid var(--gas); font-size:14px; font-weight:500;
  display:flex; align-items:flex-start; gap:9px; transition:opacity .2s, transform .2s;
  z-index:200; pointer-events:none; max-width:90vw;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast svg{width:15px; height:15px; stroke:var(--gas); fill:none; stroke-width:2.6; flex-shrink:0; margin-top:2px;}
.toast-body{display:flex; flex-direction:column; gap:4px;}
.toast-link{
  color:var(--gas); font-size:12.5px; font-weight:600; text-decoration:underline;
  text-underline-offset:2px; width:fit-content;
}
.toast-link:hover{color:#fff;}

/* ---------- Уведомление о cookie ---------- */
.cookie-banner{
  position:fixed; left:16px; bottom:16px; z-index:500; max-width:390px;
  background:var(--graphite); color:#fff; border-radius:var(--r); padding:16px 18px;
  display:flex; gap:12px; align-items:flex-start; box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0; transform:translateY(12px); transition:opacity .25s, transform .25s;
}
.cookie-banner.show{opacity:1; transform:translateY(0);}
/* Печенье нарисовано заливками, поэтому здесь не должно остаться ни
   stroke, ни fill:none от прежней контурной иконки — иначе оно пропадёт. */
.cookie-icon{
  width:28px; height:28px; flex-shrink:0; margin-top:1px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.cookie-banner-body{flex:1; min-width:0;}
.cookie-banner p{margin:0; font-size:13.5px; line-height:1.5; color:#fff;}
.cookie-banner-title{font-size:15px; font-weight:700; margin-bottom:6px !important; letter-spacing:.01em;}
.cookie-banner a{color:var(--yellow); text-decoration:underline;}
.cookie-banner-ok{
  margin-top:12px; background:#fff; color:var(--graphite); border:none; border-radius:var(--r-sm);
  padding:8px 18px; font-size:13.5px; font-weight:600; cursor:pointer; transition:opacity .15s;
}
.cookie-banner-ok:hover{opacity:.85;}
@media (max-width:480px){
  .cookie-banner{left:10px; right:10px; bottom:10px; max-width:none;}
}

/* Подсказка в блоке фильтров, когда список ещё не доступен */
.fhint{
  font-size:12.5px; color:var(--steel-500); line-height:1.5;
  padding:2px 0 2px 10px; border-left:2px solid var(--line);
}

/* ---------- Форма оформления заказа ---------- */
.form-block{
  border:1px solid var(--line); border-radius:var(--r); padding:18px 20px 6px;
  margin-bottom:14px; background:var(--panel);
}
.form-block legend{
  font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--steel-700);
  padding:0 8px; margin-left:-8px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }

.req{color:var(--gas-deep);}
.form-hint{display:block; font-size:12px; color:var(--steel-500); margin-top:5px;}
.form-error{display:block; font-size:12.5px; color:#C4342B; margin-top:5px; min-height:1px;}
.form-group input.is-invalid,
.form-group textarea.is-invalid{border-color:#C4342B; background:#FDF5F4;}

/* Согласие на обработку данных */
.consent{
  border:1px solid var(--line); border-left:3px solid var(--gas);
  border-radius:var(--r); padding:14px 16px; background:var(--panel);
}
.consent-check{display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:13px; line-height:1.5; color:var(--steel-700);}
.consent-check input{
  appearance:none; width:18px; height:18px; border:1.5px solid var(--line);
  border-radius:5px; flex-shrink:0; margin-top:1px; position:relative;
  background:var(--panel); cursor:pointer;
}
.consent-check input:checked{background:var(--gas); border-color:var(--gas);}
.consent-check input:checked::after{
  content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--graphite); border-width:0 2px 2px 0; transform:rotate(42deg);
}
.consent-check input.is-invalid{border-color:#C4342B;}
.consent-check a{color:var(--gas-deep); text-decoration:underline;}

.summary-note{font-size:12px; color:var(--steel-500); line-height:1.45; margin-top:12px;}
.summary-note b{color:var(--graphite); font-weight:700;}

/* Экран после отправки */
.order-done{
  text-align:center; max-width:520px; margin:0 auto; padding:48px 24px 60px;
}
.order-done-mark{
  width:56px; height:56px; margin:0 auto 20px; border-radius:50%;
  background:var(--stock-wash); border:1px solid #BEDFCC; color:var(--stock);
  font-size:26px; display:flex; align-items:center; justify-content:center;
}
.order-done h2{font-size:26px; text-transform:uppercase; margin-bottom:12px;}
.order-done p{color:var(--steel-700); font-size:15px; line-height:1.6; margin-bottom:10px;}
.order-done-sum{font-size:16px !important; margin:18px 0 24px !important;}
.order-done-id{
  display:inline-block; font-size:13px !important; color:var(--steel-500);
  background:var(--panel-dim); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:5px 12px; margin-bottom:16px !important;
}
.order-done-id .mono{color:var(--graphite); font-weight:700;}

/* ---------- Юридический текст ---------- */
.legal{max-width:760px;}
.legal h2{font-size:19px; margin:28px 0 10px; text-transform:none;}
.legal h2:first-child{margin-top:0;}
.legal p{color:var(--steel-700); font-size:14.5px; line-height:1.7; margin-bottom:12px;}
.legal ul{margin:0 0 14px 0;}
.legal li{
  color:var(--steel-700); font-size:14.5px; line-height:1.6; margin-bottom:7px;
  padding-left:16px; position:relative;
}
.legal li::before{content:'—'; position:absolute; left:0; color:var(--steel-300);}
.legal .updated{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--steel-500); margin-bottom:24px;}
.legal .fill{background:var(--gas-wash); border-bottom:1px dashed var(--gas-deep); padding:0 3px;}

/* Приманка для ботов: убираем из потока и от глаз, но не через
   display:none — часть ботов такие поля игнорирует. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* Пальцем труднее попасть, чем мышью: на сенсорных экранах доводим
   мелкие кнопки до 44px — рекомендованного минимума. Расширяем область
   нажатия через padding и невидимую зону ::after, чтобы не раздувать
   саму вёрстку карточек. */
@media (hover:none) and (pointer:coarse){
  .add-btn{width:44px; height:44px;}
  .compare-btn{width:40px; height:40px;}
  .sort-select{min-height:44px;}
  .cookie-banner-ok{min-height:44px; padding-left:20px; padding-right:20px;}

  .chip button,
  .cart-row .remove,
  .compare-remove,
  .cart-preview-remove{position:relative;}
  .chip button::after,
  .cart-row .remove::after,
  .compare-remove::after,
  .cart-preview-remove::after{
    content:''; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
}

/* Реквизиты продавца: строка в подвале и блок на странице контактов */
.footer-req{display:inline-block; margin-top:4px; font-size:12px; color:var(--steel-500); line-height:1.5;}
.requisites{
  margin-top:28px; padding:22px 24px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r);
}
.requisites h2{font-size:16px; margin-bottom:14px;}
.requisites dl{display:grid; grid-template-columns:210px 1fr; gap:8px 18px; font-size:14px;}
.requisites dt{color:var(--steel-500);}
.requisites dd{margin:0; color:var(--graphite);}
@media (max-width:640px){
  .requisites{padding:18px;}
  .requisites dl{grid-template-columns:1fr; gap:2px 0;}
  .requisites dd{margin-bottom:10px;}
}