/* ==========================================================================
   VIINATAKSO — визуальная система v3 «тёмный редакционный премиум»

   Тёмная схема целиком. Основа — ТЁПЛОЕ ЭСПРЕССО (коричнево-чёрное),
   сознательно не сине-чёрное: холодный navy принадлежит другому проекту
   и здесь не используется ни в одном оттенке. Акцент — алый, второй — зелёный.
   Золота нет.

   Против «таблицы»: ни одной обводки-клетки. Плоскости разделяются
   перепадом светлоты, волосяными линиями и воздухом.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --d0:#FBF8F2;           /* фон страницы            */
  --d1:#F4EDE1;           /* подложка блока          */
  --d2:#FFFFFF;           /* карточка                */
  --d3:#F7F1E6;           /* карточка под курсором   */

  --tx:#232019;
  --ink:#232019;
  --ink2:#6E6455;
  --mist:#6E6455;

  /* --white держит цвет ЗАГОЛОВКОВ; на светлом это самый тёмный тон */
  --white:#14110C;
  --paper:#FBF8F2;

  /* --red — имя роли «основной акцент», а не цвета. Здесь он зелёный. */
  --red:#14664A;
  --red2:#0F4F39;
  --teal:#B4761A;
  --amber:#B4761A;
  --amber2:#8A5A12;

  --hair:rgba(35,32,25,.16);
  --hair2:rgba(35,32,25,.30);

  --max:1060px;
  --lift:none;
  --lift-sm:none;

  /* Гротеск везде: антиква была главной приметой основного сайта */
  --serif:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  color-scheme:light;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--d0)}

body{
  margin:0;background:var(--d0);color:var(--tx);
  font:17px/1.62 var(--sans);overflow-x:hidden;padding-bottom:80px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

h1,h2,h3{margin:0 0 .48em;font-weight:400;color:var(--white)}
h1{font-family:var(--serif);font-size:clamp(38px,7.4vw,76px);line-height:1.02;
  letter-spacing:-.025em}
h2{font-family:var(--serif);font-size:clamp(28px,4.6vw,46px);line-height:1.06;
  letter-spacing:-.022em;margin-top:0}
h3{font-family:var(--sans);font-size:17px;font-weight:700;line-height:1.3;
  letter-spacing:-.005em}
p{margin:0 0 1em}

/* чередование плоскостей вместо рамок */
section{padding:clamp(56px,9vw,110px) 0;border:0;background:var(--d0)}
section:nth-of-type(even){background:var(--d1)}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(19,16,16,.82);
  backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap}
.brand{font-family:var(--sans);font-weight:800;font-size:17px;color:var(--white);
  text-decoration:none;letter-spacing:.13em;text-transform:uppercase}
.brand span{color:var(--red)}
.langs{margin-left:auto;display:flex;gap:2px;background:rgba(246,241,236,.07);
  border-radius:999px;padding:3px}
.langs a{font-size:12px;font-weight:800;letter-spacing:.09em;text-decoration:none;
  color:var(--ink2);border-radius:999px;padding:7px 14px;transition:.18s}
.langs a:hover{color:var(--white)}
.langs a[aria-current]{color:var(--white);background:var(--red)}

/* ---------- бегущая строка ---------- */
.ticker{background:var(--red);color:var(--white);overflow:hidden;padding:9px 0}
.ticker-in{display:flex;width:max-content;animation:slide 26s linear infinite}
.ticker-in span{font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;padding:0 26px;white-space:nowrap;position:relative}
.ticker-in span::after{content:"";position:absolute;right:-3px;top:50%;
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);
  transform:translateY(-50%)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- герой ---------- */
.hero{position:relative;background:var(--d0);overflow:hidden;
  padding:clamp(64px,10vw,132px) 0 clamp(56px,9vw,116px)}
.hero::before{content:"";position:absolute;inset:-45% -12% auto -12%;height:130%;
  background:
    radial-gradient(46% 58% at 80% 8%,rgba(255,68,54,.40) 0,transparent 66%),
    radial-gradient(40% 50% at 4% 92%,rgba(49,162,131,.28) 0,transparent 70%);
  filter:blur(26px);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair2) 22%,var(--hair2) 78%,transparent)}
.hero .wrap{position:relative;z-index:1;max-width:900px}
.hero h1{margin-bottom:.34em}
.hero h1 em{font-style:italic;color:var(--red)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:11.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:26px}
.kicker::before{content:"";width:34px;height:1px;background:var(--red)}
.lead{font-size:clamp(17px,2.3vw,21px);line-height:1.55;color:var(--ink2);
  max-width:54ch;margin:0 0 38px}

.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:0 32px;border:1px solid transparent;border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s}
.btn-p{background:var(--red);color:var(--white);
  box-shadow:0 14px 34px -12px rgba(255,68,54,.75)}
.btn-p:hover{background:var(--red2);transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(255,68,54,.9)}
.btn-s{background:rgba(246,241,236,.05);color:var(--tx);border-color:var(--hair2)}
.btn-s:hover{background:rgba(246,241,236,.11);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.trust{display:flex;flex-wrap:wrap;margin-top:46px;padding-top:28px;
  border-top:1px solid var(--hair)}
.trust span{font-size:14px;color:var(--ink2);padding-right:30px;margin-right:30px;
  border-right:1px solid var(--hair);line-height:1.4}
.trust span:last-child{border-right:0;margin-right:0;padding-right:0}
.trust b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;
  color:var(--white);letter-spacing:-.02em;margin-bottom:2px}

/* ---------- карточки шагов ---------- */
.grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  background:var(--hair);border-radius:18px;overflow:hidden;box-shadow:var(--lift-sm)}
.card{position:relative;background:var(--d2);padding:38px 32px 34px;transition:.22s}
.card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--red);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.card:hover{background:var(--d3)}
.card:hover::before{width:100%}
.card h3{margin-bottom:9px}
.card p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.6}
.num{font-family:var(--serif);font-size:52px;line-height:1;color:var(--red);
  margin-bottom:18px;letter-spacing:-.04em}

/* ---------- районы ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:26px 0 0}
.areas li{background:var(--d2);border-radius:999px;padding:10px 20px;
  font-size:14.5px;font-weight:600;color:var(--tx);
  transition:transform .18s,background .18s,color .18s,box-shadow .18s}
.areas li:hover{background:var(--red);color:var(--white);transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(255,68,54,.7)}

/* ---------- вопросы ---------- */
details{border-bottom:1px solid var(--hair);padding:6px 0}
details summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;
  font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);line-height:1.3;
  letter-spacing:-.015em;color:var(--white);position:relative;transition:color .18s}
details summary:hover{color:var(--red)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
  transform:rotate(45deg);transition:transform .22s}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 26px;color:var(--ink2);font-size:16px;max-width:70ch}

/* ---------- сноска и подвал ---------- */
.note{position:relative;background:var(--d2);color:var(--ink2);border-radius:18px;
  padding:30px 34px 30px 40px;font-size:14.5px;line-height:1.65;
  box-shadow:var(--lift);overflow:hidden}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red)}
.note strong{color:var(--white)}

footer{background:var(--d1);color:var(--ink2);padding:64px 0 56px;font-size:15px;
  border-top:1px solid var(--hair)}
footer strong{color:var(--white);font-family:var(--serif);font-size:19px;
  font-weight:400;letter-spacing:-.01em}
footer a{color:var(--tx);text-decoration:none;font-weight:600}
footer a:hover{color:var(--red)}
footer p{margin:0 0 .6em}

/* ---------- нижняя панель звонка (телефон) ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(19,16,16,.95);backdrop-filter:blur(16px);
  border-top:1px solid var(--hair)}
.bar a{flex:1;min-height:54px;font-size:16px;padding:0 18px}

@media(min-width:860px){.bar{display:none}body{padding-bottom:0}}

@media(max-width:560px){
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .trust span{border-right:0;margin:0;padding:0}
  .cta .btn{width:100%}
  /* В липкой панели три кнопки: звонок, Telegram, WhatsApp. На 360 px
     штатных padding:0 18px не хватает — «WhatsApp» упирается в края. */
  .bar{gap:8px;padding-left:10px;padding-right:10px}
  .bar a{padding:0 10px;font-size:15px}
}

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


/* ==========================================================================
   КАТАЛОГ — списки товаров, категории, карточка товара
   Генерируется build.py из products.json. Палитра та же, тёплая тёмная.
   ========================================================================== */

.navlink{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;transition:.18s}
.navlink:hover{color:var(--white);border-bottom-color:var(--red)}

/* шапка раздела */
.phead{padding-top:clamp(38px,6vw,64px)!important}
.crumb{font-size:13px;color:var(--ink2);margin-bottom:22px;letter-spacing:.02em}
.crumb a{color:var(--ink2);text-decoration:none}
.crumb a:hover{color:var(--red)}
.crumb span{opacity:.4;margin:0 7px}
.phead h1{font-size:clamp(32px,5.6vw,58px)}
.phead .lead{margin-bottom:0}

/* карточки категорий */
.ccards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:40px}
.ccard{display:flex;flex-direction:column;gap:5px;padding:22px 24px;border-radius:14px;
  background:var(--d2);text-decoration:none;transition:.2s;position:relative;overflow:hidden}
.ccard::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--red);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.ccard:hover{background:var(--d3);transform:translateY(-3px);box-shadow:var(--lift-sm)}
.ccard:hover::after{width:100%}
.cname{font-family:var(--serif);font-size:21px;color:var(--white);letter-spacing:-.015em;
  line-height:1.2}
.cnum{font-size:13px;color:var(--ink2);letter-spacing:.03em}

/* сетка товаров */
.plist{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pitem{display:flex;flex-direction:column;padding:22px 20px 24px;border-radius:14px;
  background:var(--d2);text-decoration:none;color:var(--tx);transition:.2s;
  position:relative;overflow:hidden}
.pitem::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--red);transition:width .3s cubic-bezier(.2,.8,.3,1)}
.pitem:hover{background:var(--d3);transform:translateY(-3px);box-shadow:var(--lift-sm)}
.pitem:hover::after{width:100%}
.pimg{width:100%;max-width:104px;height:auto;margin:0 auto 18px;display:block}
.pcat{font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:7px}
.pname{font-family:var(--serif);font-size:19px;line-height:1.22;color:var(--white);
  letter-spacing:-.015em;margin-bottom:6px}
.pmeta{font-size:13px;color:var(--ink2);margin-bottom:14px}
.pprice{margin-top:auto;font-size:13px;font-weight:700;color:var(--red);
  letter-spacing:.07em;text-transform:uppercase}

/* карточка одного товара */
.pdetail{display:grid;gap:clamp(28px,5vw,64px);align-items:start;margin-top:8px;
  grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.pdetail-img{background:var(--d2);border-radius:20px;padding:44px 32px;
  box-shadow:var(--lift-sm);display:flex;justify-content:center}
.pdetail-img .pimg{max-width:180px;margin:0}
.pdetail-body h1{margin:6px 0 .3em}
.pdetail-body .lead{margin-bottom:26px;max-width:52ch}
/* FOUNDER DECISION: цена на публичной поверхности не отображается.
   Место крупной цены занимает строка-формула «цену называем по телефону». */
.askprice{position:relative;margin:0 0 30px;padding:16px 22px 16px 20px;
  background:var(--d2);border-radius:12px;font-size:15.5px;line-height:1.55;
  color:var(--tx);max-width:52ch;overflow:hidden}
.askprice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red)}
.spec{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0 0 32px;
  border-top:1px solid var(--hair)}
.spec dt{padding:13px 26px 13px 0;font-size:13.5px;color:var(--ink2);
  border-bottom:1px solid var(--hair);letter-spacing:.02em}
.spec dd{margin:0;padding:13px 0;font-size:15px;font-weight:600;color:var(--tx);
  border-bottom:1px solid var(--hair)}
.spec dd a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--red)}
.spec dd a:hover{color:var(--red)}

@media(max-width:760px){
  .pdetail{grid-template-columns:1fr}
  .pdetail-img{padding:32px;max-width:260px}
  .pdetail-img .pimg{max-width:130px}
}
@media(max-width:520px){
  .plist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pitem{padding:16px 14px 18px}
  .pname{font-size:16px}
  .pimg{max-width:76px;margin-bottom:12px}
  .navlink{display:none}
}


/* Пометка о бесплатных безалкогольных напитках — на каталоге и карточке товара */
.freeline{position:relative;display:block;margin:22px 0 0;padding:14px 20px 14px 46px;
  background:rgba(49,162,131,.10);border-radius:12px;color:var(--tx);
  font-size:15px;line-height:1.5;max-width:56ch}
.freeline::before{content:"+";position:absolute;left:18px;top:12px;
  font-family:var(--serif);font-size:22px;line-height:1;color:var(--teal);font-weight:400}
.askprice + .freeline{margin:0 0 30px}


/* Настоящее фото товара вместо силуэта. Вписывается в тот же слот,
   пропорции не искажаются, тёмный фон сайта не спорит с белым фоном снимка. */
.pimg-photo{width:100%;max-width:104px;height:120px;object-fit:contain;
  margin:0 auto 18px;display:block;mix-blend-mode:normal}
.pdetail-img .pimg-photo{max-width:200px;height:230px;margin:0}
@media(max-width:520px){.pimg-photo{max-width:76px;height:92px;margin-bottom:12px}}
@media(max-width:760px){.pdetail-img .pimg-photo{max-width:150px;height:180px}}


/* ---------- базовый ритм: секции не чередуются, а разделены линией ---- */
body{font-size:16px;line-height:1.6}
section,section:nth-of-type(even){background:var(--d0);
  padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--hair)}
section:first-of-type{border-top:0}
.wrap{padding:0 20px}

/* ---------- типографика ---------- */
h1,h2{font-weight:800;letter-spacing:-.028em}
h1{font-size:clamp(30px,5.2vw,50px);line-height:1.08}
h2{font-size:clamp(19px,2.4vw,25px);line-height:1.2;letter-spacing:.02em;
  text-transform:uppercase;padding-bottom:12px;margin-bottom:26px;
  border-bottom:2px solid var(--white)}
h3{font-weight:800;font-size:15px;letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--red);box-shadow:none;
  border-bottom:4px solid var(--amber)}

/* ---------- шапка: строгая строка, язык — текстом, без капсулы ------- */
.top{background:var(--d0);backdrop-filter:none;
  border-bottom:2px solid var(--white)}
.top .wrap{min-height:56px}
.brand{letter-spacing:.06em;text-transform:uppercase;font-weight:800;
  font-size:16px}
.brand span{color:var(--amber)}
.langs{background:none;border:0;border-radius:0;padding:0;gap:0}
.langs a{border-radius:0;padding:4px 10px;font-size:11.5px;letter-spacing:.14em;
  border-left:1px solid var(--hair)}
.langs a:first-child{border-left:0}
.langs a[aria-current]{background:none;color:var(--red);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px}
.navlink{font-size:11.5px;letter-spacing:.16em}
.navlink:hover{border-bottom-color:var(--amber)}

/* ---------- бегущая строка убрана ----------
   Анимированная лента — самая узнаваемая примета основного сайта.
   На посадочных её нет в разметке; правило гасит её и на тех страницах,
   что генерируются общим шаблоном. */
.ticker{display:none}

/* ---------- полоса фактов: статичная замена бегущей строке ---------- */
.facts{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--hair);
  background:var(--d1)}
.facts span{flex:1 1 auto;padding:11px 20px;font-size:11.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber2);
  border-left:1px solid var(--hair);white-space:nowrap}
.facts span:first-child{border-left:0}

/* ---------- герой: две колонки вместо полосы во всю ширину ---------- */
.hero{background:var(--d0);padding:clamp(40px,6vw,76px) 0}
.hero::before,.hero::after{display:none}
.hero .wrap{max-width:var(--max)}
.heroflex{display:grid;gap:clamp(24px,4vw,52px);align-items:start;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr)}
.kicker{color:var(--amber2);letter-spacing:.2em;margin-bottom:18px;font-size:11px}
.kicker::before{background:var(--amber);width:26px}
.lead{font-size:clamp(15.5px,1.7vw,17.5px);color:var(--ink2);max-width:46ch;
  margin-bottom:0}

/* панель заказа — блок, которого на основном сайте нет вовсе */
.panel{border:2px solid var(--white);background:var(--d2);padding:22px 22px 20px}
.panel .plabel{font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 6px}
.panel .pnum{display:block;font-size:clamp(21px,2.6vw,27px);font-weight:800;
  letter-spacing:-.02em;color:var(--white);text-decoration:none;
  margin:0 0 16px;white-space:nowrap}
.panel .pnum:hover{color:var(--red)}
.panel .btn{width:100%;margin-bottom:8px}
.panel .prow{display:flex;gap:8px;margin-bottom:8px}
.panel .prow .btn{margin:0}
.panel .phours{margin:14px 0 0;padding-top:12px;font-size:13px;color:var(--ink2);
  border-top:1px solid var(--hair)}

/* ---------- кнопки: прямоугольные, капитель ---------- */
.btn{border-radius:0;min-height:46px;font-weight:800;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;padding:0 20px}
.btn-p{background:var(--red);color:#FFFFFF;box-shadow:none}
.btn-p:hover{background:var(--red2);transform:none;box-shadow:none}
.btn-s{background:var(--d2);color:var(--tx);border-color:var(--hair2);
  box-shadow:none}
.btn-s:hover{background:var(--d3);transform:none}
.cta{gap:8px}

/* ---------- шаги: нумерованный список вместо четырёх карточек -------- */
.steps{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 18px;
  padding:20px 0;border-bottom:1px solid var(--hair)}
.steps .sn{font-size:26px;font-weight:800;color:var(--amber);
  letter-spacing:-.04em;line-height:1.1}
.steps h3{margin:0 0 5px}
.steps p{margin:0;color:var(--ink2);font-size:15px;max-width:62ch}

/* ---------- районы: колонки-указатель вместо пилюль ---------- */
.areas{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--hair);margin-top:22px}
.areas li{background:none;border:0;border-bottom:1px solid var(--hair);
  border-radius:0;padding:9px 4px;font-size:14px;font-weight:600;
  color:var(--tx)}
.areas li:hover{background:none;color:var(--red);transform:none;
  box-shadow:none;border-color:var(--hair)}

/* ---------- карточки общего шаблона: рамка, без скруглений ---------- */
.grid{gap:0;background:transparent;border-radius:0;box-shadow:none;
  border:1px solid var(--hair)}
.card{background:var(--d2);border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding:24px 22px}
.card:hover{background:var(--d3)}
.card::before{top:0;bottom:0;left:0;height:auto;width:0;background:var(--red)}
.card:hover::before{width:3px}
.num{font-weight:800;font-size:26px;color:var(--amber);letter-spacing:-.04em;
  margin-bottom:12px}
.trust{border-top:1px solid var(--hair);margin-top:28px;padding-top:18px}
.trust b{font-weight:800;font-size:19px;letter-spacing:-.02em}

/* ---------- вопросы ---------- */
details{border-bottom:1px solid var(--hair);padding:0}
details summary{font-weight:700;letter-spacing:0;font-size:16px;
  padding:16px 40px 16px 0}
details summary:hover{color:var(--red)}
summary::after{border-right-color:var(--amber);border-bottom-color:var(--amber);
  width:10px;height:10px}
details p{font-size:15px;margin:0 0 18px}

/* ---------- сноска и подвал ---------- */
.note{background:var(--d1);border:0;border-left:4px solid var(--amber);
  border-radius:0;box-shadow:none;padding:18px 22px}
.note::before{display:none}
footer{background:var(--d1);border-top:2px solid var(--white);padding:36px 0 32px;
  font-size:14px}
footer strong{font-weight:800;font-size:15px;letter-spacing:.02em}
footer a:hover{color:var(--red)}

/* ---------- липкая панель звонка ---------- */
.bar{background:var(--d0);backdrop-filter:none;border-top:2px solid var(--white)}
.bar a{min-height:46px}

/* ---------- каталог ---------- */
.ccards{gap:0;border:1px solid var(--hair);margin-top:26px}
.ccard{border-radius:0;border:0;border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);background:var(--d2);padding:18px 20px}
.ccard::after{background:var(--red);height:3px}
.ccard:hover{background:var(--d3);transform:none;box-shadow:none}
.cname{font-weight:800;font-size:17px;letter-spacing:-.01em}
.cnum{color:var(--amber2);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase}

.plist{gap:0;border:1px solid var(--hair)}
.pitem{border-radius:0;border:0;border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);background:var(--d2);padding:18px 16px 20px}
.pitem::after{background:var(--red);height:3px}
.pitem:hover{background:var(--d3);transform:none;box-shadow:none}
.pname{font-weight:700;font-size:16px;letter-spacing:-.01em}
.pcat{color:var(--amber2);letter-spacing:.14em;font-size:10px}
.pprice{color:var(--red);letter-spacing:.1em;font-size:11.5px}

.pdetail-img{background:var(--d2);border:1px solid var(--hair);border-radius:0;
  box-shadow:none}
.askprice{background:var(--d1);border:0;border-left:4px solid var(--amber);
  border-radius:0}
.askprice::before{display:none}
.spec dd a{border-bottom-color:var(--amber)}
.freeline{background:var(--d1);border-radius:0;border-left:4px solid var(--amber);
  padding-left:44px}
.freeline::before{color:var(--amber2);font-weight:800;font-size:20px;left:16px}

@media(max-width:820px){
  .heroflex{grid-template-columns:1fr}
  .panel{margin-top:4px}
}
@media(max-width:560px){
  .steps li{grid-template-columns:44px minmax(0,1fr);gap:0 12px}
  .steps .sn{font-size:21px}
  .facts span{flex:1 1 50%;white-space:normal}
}