/* Светлый сайт: логотип нарисован для белого, на белом и живёт. Товар виден
   с первого экрана. Синий работает точечно — полоса цифр, подвал, акценты. */
:root{
  --navy:#0A2E6B; --navy-2:#0B3B8C; --sky:#0471BC; --grass:#6FA32C; --red:#E30016;
  --bg:#FFFFFF; --bg-2:#F3F6FA; --surface:#FFFFFF; --tint:#EEF3FA;
  --ink:#0B1018; --ink-2:#4A5261; --ink-3:#626B79;
  --line:#E4E9F0;
  --shadow-s:0 1px 2px rgba(11,16,24,.05),0 4px 12px rgba(11,16,24,.05);
  --shadow-l:0 2px 6px rgba(11,16,24,.06),0 18px 48px rgba(11,16,24,.10);
  --display:'Onest','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  /* Плашка под логотипами и фото: они нарисованы под белое, поэтому
     в тёмной теме не чернеем, а чуть гасим — иначе экран светится. */
  --plate:#fff; --ink-accent:#0A2E6B;
  /* Чернила НА плашке. Плашка в тёмной теме намеренно остаётся светлой
     (см. выше), а --ink в тёмной теме становится светлым — поэтому текст
     на плашке не может брать цвет из темы. Эти два значения одинаковы в
     обеих темах: 15,9:1 и 6,6:1 на #E7EBF1.
     Без них строка фасовки на 422 страницах товаров давала 1,91:1, а
     врезка о законе в политике — 1,02:1, то есть была не видна вовсе. */
  --on-plate:#0B1018; --on-plate-2:#4A5261;
  /* --muted использовался в пяти местах, но нигде не был объявлен: цвет
     молча падал на наследуемый. В светлой теме текст выходил чернее, чем
     задумано, в тёмной — светлым на светлой плашке. */
  --muted:var(--ink-2);
  /* Мера колонки на странице истории: 68ch при кегле 15,5 px. */
  --мера-истории:41.5rem;
  /* Крестик для кнопки «стереть» в поле поиска: своя картинка вместо
     встроенной, чтобы цвет шёл от темы. */
  --крестик:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' stroke='%23000' stroke-width='2.1' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");

  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#0B2F6E; --navy-2:#13457F; --sky:#58AFEE; --grass:#8CC24F; --red:#FF5A5A;
  --bg:#0B0E14; --bg-2:#10151D; --surface:#141A23; --tint:#18202B;
  --ink:#EAEDF3; --ink-2:#A3ACBA; --ink-3:#8C94A3;
  --line:#2A3240; --plate:#E7EBF1; --ink-accent:#A9C8F0;
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --shadow-l:0 2px 6px rgba(0,0,0,.5),0 18px 48px rgba(0,0,0,.45);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --navy:#0B2F6E; --navy-2:#13457F; --sky:#58AFEE; --grass:#8CC24F; --red:#FF5A5A;
  --bg:#0B0E14; --bg-2:#10151D; --surface:#141A23; --tint:#18202B;
  --ink:#EAEDF3; --ink-2:#A3ACBA; --ink-3:#8C94A3;
  --line:#2A3240; --plate:#E7EBF1; --ink-accent:#A9C8F0;
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3);
  --shadow-l:0 2px 6px rgba(0,0,0,.5),0 18px 48px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* margin:0 — браузерное поле в 8 px не было сброшено, и ни одна цветная
   полоса не доходила до края: у шапки, синей полосы цифр, тонированных
   секций и подвала по бокам оставались белые кромки, а .bar и body::before
   с их left:0;right:0 оказывались ШИРЕ всего, что под ними.
   min-height + flex — чтобы подвал не висел посреди экрана на коротких
   страницах: на 404 при окне 1200 под ним оставалось 352 px белого. */
body{margin:0;min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased}
footer{margin-top:auto}
/* Якорь не должен уезжать под липкую шапку сверху и под полосу связи снизу.
   Проход табом по главной показывал пять остановок, закрытых полосой,
   и нажатие в центр ссылки «info@afzuni.com» попадало в кнопку Telegram. */
html{scroll-padding-top:190px;scroll-padding-bottom:80px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
  z-index:60;background:var(--bg)}
.w{max-width:1280px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.08;
  letter-spacing:-.018em;text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sky)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* ===== шапка ===== */
/* Липнет ТОЛЬКО шапка. Селектор по тегу цеплял и <nav class="cjump">, и
   <nav class="bjump"> — в каталоге три липкие полосы с одним z-index
   садились друг на друга у верхнего края, и при прокрутке логотип, меню,
   телефон и переключатель языка закрывало рядом брендов целиком:
   elementFromPoint в точке логотипа возвращал NAV.bjump. */
nav:not([class]){position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line)}
.nv{display:flex;align-items:center;gap:14px;padding-block:12px}
.nv .mk{height:42px;width:auto;flex:none}
.nv .tt{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:.015em;
  color:var(--red);line-height:1;margin-left:-2px}
@media(max-width:420px){.nv .tt{font-size:20px}}
.nv .sp{flex:1}
/* Меню видно на любой ширине. На узком экране оно переносится на вторую
   строку и прокручивается вбок — иначе с телефона не попасть никуда. */
.nv{flex-wrap:wrap}
/* На узком экране меню переносится СТРОКАМИ. Раньше оно уезжало вбок,
   и «Контакты» оказывались за краем экрана на любом телефоне — попасть
   туда было нельзя, а подсказки, что строку можно прокрутить, не было. */
.nv .lk{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14.5px;color:var(--ink-2);
  font-weight:500;order:3;width:100%;padding-block:0 6px;margin-top:2px;
  border-top:1px solid var(--line)}
.nv .lk a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
@media(min-width:960px){
  .nv{flex-wrap:nowrap}
  .nv .lk{order:0;width:auto;flex-wrap:nowrap;gap:26px;border-top:0;padding-block:0;margin-top:0}
  .nv .lk a{min-height:24px}
}
.nv .lk button:hover{color:var(--sky)}
.nv .ph{font-family:var(--display);font-size:16px;font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:var(--ink-accent)}
@media(max-width:600px){.nv .ph{font-size:14px}}
@media(max-width:959px){.nv .ph{display:none}}
.nv{padding-block:10px}
@media(min-width:960px){.nv{padding-block:12px}}

/* ===== первый экран ===== */
.hero{position:relative;overflow:hidden;background:
  linear-gradient(180deg, var(--tint), transparent 58%),
  radial-gradient(900px 460px at 94% 0%, color-mix(in srgb, var(--sky) 12%, transparent), transparent 66%);
  padding-block:clamp(30px,5vw,60px) clamp(34px,5vw,58px)}
.hero::before{content:"";position:absolute;left:-13%;top:-34%;width:min(64%,720px);aspect-ratio:1/1;
  background:url(../afzuni-mark.svg) center/contain no-repeat;opacity:.055;pointer-events:none;z-index:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero::before{opacity:.09}}
:root[data-theme="dark"] .hero::before{opacity:.09}
.hero .w{position:relative;z-index:1}
.hin{display:grid;gap:34px;align-items:center}
@media(min-width:1100px){.hin{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px}}
/* Заголовок всегда в одну строку: размер подобран так, чтобы строка
   укладывалась в свою колонку на любой ширине, от телефона до монитора. */
.hero h1{margin-top:14px;white-space:nowrap;max-width:none;font-size:min(5.25vw,38px)}
@media(min-width:1100px){.hero h1{font-size:min(2.75vw,38px)}}
.hero .motto{margin-top:16px;font-size:clamp(16px,2.3vw,20px);color:var(--ink-2);font-weight:600;
  font-family:var(--display);letter-spacing:-.008em}
.hero .sub{margin-top:14px;max-width:48ch;color:var(--ink-2);font-size:15.5px}
.acts{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:13px 22px;
  font-size:14.5px;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-pri{background:var(--navy-2);color:#fff;box-shadow:var(--shadow-s)}
.btn-pri:hover{background:var(--navy)}
.btn-gho{border:1.5px solid var(--ink-3);color:var(--ink);background:var(--surface)}
.btn-gho:hover{border-color:var(--sky);color:var(--sky)}

/* Полка. Заголовок обещает полку — значит её и рисуем: ряд упаковок,
   стоящих на доске. Ряд едет справа налево без конца; на краях растворяется.
   Лента собрана из одной и той же последовательности дважды, поэтому сдвиг
   ровно на половину длины замыкает круг без шва. */
.shelfwrap{position:relative;margin-top:clamp(26px,4vw,44px);z-index:1;overflow:hidden}
/* Высота ленты известна заранее — резервируем её, иначе при появлении
   полки всё, что ниже, прыгает вниз. Ровно та же формула, что у плитки. */
.shelf{overflow:hidden;min-height:clamp(80px,9vw,128px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
/* Одна сплошная лента: плитки сомкнуты, белый фон и тень — у всей полосы,
   а не у каждой упаковки по отдельности. */
.track{display:flex;align-items:flex-end;width:max-content;gap:0;
  background:#fff;box-shadow:0 1px 1px rgba(11,16,24,.10),0 14px 22px -9px rgba(11,16,24,.24);
  will-change:transform;animation:shelfrun 120s linear infinite}
@keyframes shelfrun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.track figure{margin:0;flex:0 0 clamp(80px,9vw,128px);aspect-ratio:1/1;position:relative;
  background:none;border-radius:0;box-shadow:none}
.track img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  padding:9px 9px 11px;opacity:0;transition:opacity .7s ease}
.track img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.track{animation-duration:150s}}
/* доска, на которой стоит ряд, и мягкая тень под ней */
.board{height:3px;border-radius:2px;background:linear-gradient(to right,transparent,
  color-mix(in srgb,var(--navy) 40%,transparent) 13%,
  color-mix(in srgb,var(--navy) 40%,transparent) 87%,transparent)}
.board::after{content:"";display:block;height:26px;
  background:linear-gradient(to bottom,rgba(11,16,24,.09),transparent 72%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}

/* ===== цифры: синяя полоса ===== */
.figs{background:var(--navy);color:#fff}
.figs .in{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;
  padding-block:clamp(26px,4vw,38px)}
@media(min-width:620px){.figs .in{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.figs .in{grid-template-columns:repeat(6,1fr);gap:16px}}
.fig{text-align:center}
.fig b{display:block;font-family:var(--display);font-size:clamp(26px,4vw,38px);font-weight:700;
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fig span{display:block;margin-top:6px;font-size:12.5px;color:#A8C0E4;line-height:1.3}

/* ===== секции ===== */
.sec{padding-block:clamp(40px,6vw,72px)}
.sec h2{font-size:clamp(25px,3.8vw,38px)}
.sechd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sechd .eyebrow{display:block;margin-bottom:9px}
.lnk{font-size:14px;font-weight:600;color:var(--sky);white-space:nowrap}
.tintbg{background:var(--bg-2)}

/* ===== стена брендов ===== */
.bgrid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:540px){.bgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.bgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1140px){.bgrid{grid-template-columns:repeat(6,1fr)}}
.btile{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;text-align:left;
  transition:transform .16s,box-shadow .16s,border-color .16s}
.btile:hover{transform:translateY(-3px);box-shadow:var(--shadow-l);border-color:var(--sky)}
.btile:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.btile .lw{background:var(--plate);height:clamp(106px,15vw,126px);flex:none;display:flex;
  align-items:center;justify-content:center;padding:6px;border-bottom:1px solid var(--line)}
.btile .lw img{max-width:100%;max-height:100%}
/* Плитка, в которой лежит не знак, а прямоугольный кусок упаковки.
   Таких четырнадцать из двадцати пяти: у поставщиков ещё не запрошены
   настоящие логотипы. Кусок, растянутый во всю плитку, спорит с
   соседним знаком на прозрачном — стена выглядит пёстрой. Показываем
   его меньше и со скруглением, как ярлык: тогда все плитки читаются
   одинаково. Признак «кусок» считает знаки.js по доле закрашенных
   точек, вручную ничего не перечисляется. */
/* Почти во всю коробку. Ограничение держим не ради «поменьше», а ради
   одного: у этих картинок свой фон, и без зазора он сливался бы с рамкой
   плитки в сплошное пятно. Четырёх процентов хватает. */
.btile .lw img.pack{max-height:96%;max-width:98%;border-radius:7px;
  box-shadow:0 0 0 1px rgba(11,16,24,.06)}
/* Та же мера, что на стене брендов: зазор нужен лишь затем, чтобы
   собственный фон картинки не слился с рамкой плашки. */
.bhd .lw img.pack{max-height:94%;max-width:96%;border-radius:6px}
/* Знак есть не у каждого бренда: «Омина» пока без логотипа. Одна буква
   посреди пустой плитки читается как недогрузившаяся картинка, поэтому
   даём ей вид монограммы — мягкая плашка, как у аватара. Цвет из темы:
   прежний #5B6678 был вписан числом и в тёмной теме тонул. */
.ini{display:grid;place-items:center;font-family:var(--display);font-weight:700;
  line-height:1;border-radius:14px;color:var(--navy);
  background:color-mix(in srgb,var(--navy) 9%,transparent)}
.btile .ini{width:62px;height:62px;font-size:27px}
.btile .bt{padding:11px 13px 13px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.btile .bn{font-size:14px;font-weight:600}
.btile .bc{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== сетка товаров ===== */
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr);gap:13px}}
@media(min-width:880px){.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1140px){.pgrid{grid-template-columns:repeat(5,1fr)}}
/* В каталоге блок бренда показывает четыре карточки-превью, а сетка от
   1140 px даёт пять колонок — и каждый из 25 блоков получал мёртвую
   четверть справа, из-за которой логотип и кнопка «Показать все»,
   центрированные по блоку, уезжали на 125 точек относительно ряда
   товаров. В полосе 560–879 px три колонки давали 3 + 1: у 19 блоков из
   25 последний ряд стоял одинокой карточкой.
   Внутри блока держим две колонки или четыре — числа, на которые четыре
   превью делятся нацело. На странице бренда товар показан весь, там
   пятая колонка законна и остаётся. */
.bblock .pgrid{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.bblock .pgrid{grid-template-columns:repeat(4,1fr)}}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;text-align:left;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.pc:hover{transform:translateY(-2px);border-color:var(--sky);box-shadow:var(--shadow-l)}
.pc:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.pc .im{aspect-ratio:1/1;width:100%;max-width:100%;object-fit:contain;background:var(--plate);display:block}
.pc .bd{padding:10px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.pc .br{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sky)}
/* Четыре строки, а не три. На трёх у длинных названий отрезалось
   окончание, а у «Мартина» именно оно и различает товары: «…PREMIUM без
   соли» и «…PREMIUM с солью» на узком экране обрывались одинаково —
   «PREMIUM без…». Карточка от четвёртой строки подрастает только там, где
   название правда длинное. */
.pc .nm{font-size:13.5px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:4;
  -webkit-box-orient:vertical;overflow:hidden}
/* Фасовка — той же гарнитурой, что и название над ней. Моноширинный шрифт
   здесь выглядел чужим: это не таблица и не код, а строка под названием,
   и на Windows он к тому же подменялся Consolas — буквы «мл» и «шт»
   расползались, между числом и единицей зияла дыра. Цифры оставляем
   табличными: в сетке плиток числа так стоят столбиком. */
.pc .pk{font-family:var(--body);font-size:11.5px;font-weight:500;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:0;
  display:flex;align-items:baseline;gap:2px 10px;flex-wrap:wrap}
/* Артикул прижат к правому краю плитки. В узкой колонке, где фасовка и
   код вместе не помещаются, он переносится на свою строку, а не режет
   фасовку: flex-wrap дешевле любого многоточия. */
.pc .pka{margin-left:auto;white-space:nowrap;letter-spacing:.02em;opacity:.75}
.pc .pkf{white-space:nowrap}
.pc .pr{margin-top:auto;padding-top:5px;font-family:var(--display);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pc .pr i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-left:4px;
  font-family:var(--body);letter-spacing:0}
/* Без ключа прайса гнездо под цену пустое — его не должно быть видно вовсе,
   иначе в карточке остаётся полоса отступа там, где раньше стояла цена. */
.pc .pr:empty{display:none}

/* ===== поиск ===== */
.srch{position:relative;max-width:520px;display:block}
.srch input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:13px 14px 13px 40px;outline:none}
.srch input:focus-visible{border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 16%,transparent)}
.srch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
/* Крестик «стереть запрос» браузер рисует сам, но рисует его чёрным: на
   тёмной теме он сливался с полем, и стереть набранное можно было только
   по одной букве. Перекрашиваем своей картинкой и даём ему площадь под
   палец — у встроенного она 12 px. */
.srch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-right:-2px;cursor:pointer;border-radius:50%;
  background:currentColor;opacity:.42;
  -webkit-mask:var(--крестик) center/13px 13px no-repeat;
  mask:var(--крестик) center/13px 13px no-repeat}
.srch input::-webkit-search-cancel-button:hover{opacity:.75}
.cnt{margin-top:11px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ===== внутренние шапки ===== */
.ihead{background:var(--bg-2);border-bottom:1px solid var(--line)}
.ihead .in{padding-block:20px 28px}
.back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-3);
  margin-bottom:16px;font-weight:500}
.back:hover{color:var(--sky)}
.bhd{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bhd .lw{width:152px;height:108px;background:var(--plate);border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;padding:11px;flex:none}
.bhd .lw img{max-width:100%;max-height:100%}
.bhd h1{font-size:clamp(26px,4.6vw,42px)}
.bhd .mt{margin-top:6px;font-size:13.5px;color:var(--ink-3)}
.bstory{margin-top:18px;max-width:68ch;color:var(--ink-2);font-size:15px}
.bstory.none{font-size:13.5px;color:var(--ink-3)}

/* ===== карточка товара ===== */
.pvin{display:grid;gap:0;padding-block:26px 56px}
/* Колонка со снимком не должна быть шире самого снимка. Было
   «minmax(0,1fr) minmax(0,440px)»: на 1280 снимок растягивался до 762 px, на
   1440 — до 842, а файл приходит шириной 560. Картинку растягивало на треть,
   и она на карточке — там, где товар и разглядывают, — выходила мыльной.
   Текстовой колонке при этом доставалось 440 px: состав и пищевая ценность
   шли в четыре строки там, где хватило бы двух.
   Теперь снимок не больше своих 560, остальное — тексту, но не шире 620 px:
   строка длиннее примерно 75 знаков читается хуже. Пара колонок встаёт по
   середине полосы. */
@media(min-width:880px){.pvin{grid-template-columns:minmax(0,clamp(320px,44vw,560px)) minmax(0,1fr);
  gap:46px;align-items:start}
  .pvtx{max-width:620px}}
.pvim{background:var(--plate);border:1px solid var(--line);border-radius:20px;width:100%;max-width:100%;
  aspect-ratio:1/1;object-fit:contain;padding:20px;display:block;box-shadow:var(--shadow-s)}
.pvtx{display:flex;flex-direction:column;gap:15px;min-width:0;padding-top:4px}
@media(max-width:879px){.pvtx{padding-top:22px}}
.pvtx h1{font-size:clamp(22px,3.8vw,32px)}
.pvbr{display:inline-flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:11px;padding:6px 12px 6px 7px;align-self:flex-start}
.pvbr .lw{width:40px;height:28px;background:var(--plate);border-radius:6px;display:flex;
  align-items:center;justify-content:center;overflow:hidden;flex:none}
.pvbr .lw img{max-width:100%;max-height:100%}
.pvbr b{font-size:13px;font-weight:600}
.pvpr{font-family:var(--display);font-size:clamp(32px,5.4vw,44px);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--navy-2);letter-spacing:-.025em}
.pvpr i{font-style:normal;font-size:15px;font-weight:500;color:var(--ink-3);margin-left:8px;
  font-family:var(--body);letter-spacing:0}
/* Пусто бывает, когда нет ни цены (нет ключа прайса), ни фасовки. */
.pvpr:empty{display:none}
/* «Цена по запросу» — для того, кто пришёл из поиска, а не из бота.
   Кегль меньше настоящей цены: это не цена, и выдавать её за цену нельзя. */
.prreq{display:block;font-family:var(--display);font-size:22px;font-weight:600;
  line-height:1.2;color:var(--ink-2);letter-spacing:-.01em}
.prask{display:inline-flex;align-items:center;width:fit-content;margin-top:9px;
  padding:9px 16px;border-radius:11px;
  background:var(--navy);color:#fff;font-family:var(--body);font-size:14.5px;
  font-weight:600;letter-spacing:0;text-decoration:none;min-height:44px}
.prask:hover{background:var(--navy-2)}
.spx{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;
  overflow:hidden}
.spr{display:flex;justify-content:space-between;gap:14px;background:var(--surface);padding:11px 14px;
  font-size:13.5px}
.spr dt{color:var(--ink-3);flex:none}
.spr dd{margin:0;text-align:right;font-family:var(--body);font-size:13px;
  font-variant-numeric:tabular-nums;min-width:0;word-break:break-word}
.hint{font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--line);padding-left:12px}
.pvlead{font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:62ch}
.sect{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.sect:first-child{border-top:0;padding-top:0;margin-top:0}
.sect h3{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sect p{margin-top:7px;font-size:13.8px;line-height:1.6;color:var(--ink-2);max-width:62ch}


.sgal{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.sgal{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px}}
.sgal figure{margin:0;background:var(--plate);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-s)}
.sgal img{display:block;width:100%;height:auto}
.sgal figcaption{padding:12px 15px 14px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.stx p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-top:16px;max-width:64ch;
  margin-inline:auto;text-align:start;hyphens:auto}
.tl{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:640px){.tl{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tl{grid-template-columns:repeat(4,1fr)}}
.tl li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px 16px;
  border-top:3px solid var(--sky);box-shadow:var(--shadow-s)}
.tl li:nth-child(2){border-top-color:var(--grass)}
.tl li:nth-child(3){border-top-color:#F2A50C}
.tl li:nth-child(4){border-top-color:var(--red)}
.tl b{display:block;font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--ink-accent)}
.tl span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.bstory.none{color:var(--ink-3);font-style:italic}

/* ===== о компании и контакты ===== */
.cgrid{display:grid;gap:26px;padding-block:clamp(34px,5vw,56px)}
@media(min-width:760px){.cgrid{grid-template-columns:repeat(2,1fr)}}
.cc h3{font-family:var(--body);font-size:12px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:10px}
.cc .big{font-family:var(--display);font-size:clamp(20px,3vw,26px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cc p{margin:0;color:var(--ink-2);font-size:14.5px}
.cities{display:flex;flex-wrap:wrap;gap:6px}
.city{font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;color:var(--ink-2)}
footer{background:var(--navy);color:#A8C0E4}
.ft{padding-block:26px 32px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:8px 20px;
  justify-content:space-between}
/* Строка, по которой нас находят. Настоящий видимый текст, не спрятанный:
   скрытые ключевые слова поисковики считают спамом и понижают сайт. */
.fseo{flex-basis:100%;margin:4px 0 0;max-width:72ch;font-size:12px;line-height:1.55;
  color:#8FA8CF}   /* подвал синий в обеих темах, поэтому цвет свой, не токен */
.empty{padding:60px 0 80px;text-align:center;color:var(--ink-3)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Многостраничность: плитки и пункты меню — настоящие ссылки */
a.pc, a.btile, .nv .lk a, a.back, a.lnk{color:inherit;text-decoration:none}
.nv .lk a{font:inherit;color:var(--ink-2)}
.nv .lk a:hover{color:var(--sky)}
.nv .lk a[aria-current="page"]{color:var(--ink-accent);font-weight:600}
.nv .brandlink{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}

a.btn{text-decoration:none}
a.lnk{text-decoration:none}

/* ===== первый экран: одна центральная колонка, под ней полка ===== */
.hin{display:block;text-align:center;max-width:900px;margin-inline:auto}
.hin .eyebrow{display:block}
.hero{padding-block:clamp(30px,5vw,60px) clamp(24px,3.6vw,42px)}
/* На узком экране заголовок переносится, а не схлопывается. Строка «в
   одну строку любой ценой» давала на 320 точках кегль 16.8 px — мельче
   подзаголовка раздела (25 px) и почти вровень с основным текстом (15 px):
   главное обещание сайта было набрано как подпись. Две сбалансированные
   строки по 26–28 читаются несравнимо сильнее одной по 17.
   text-wrap:balance у заголовков уже стоит глобально. */
.hero h1{font-size:clamp(26px,7vw,46px)}
@media(max-width:620px){.hero h1{white-space:normal}}
@media(min-width:1100px){.hero h1{font-size:46px;white-space:nowrap}}
.hero .motto{margin-top:14px}

/* ===== заголовки разделов: по центру, ссылка — отдельной строкой снизу ===== */
.sechd{display:block;text-align:center;margin-bottom:clamp(22px,3vw,34px)}
.sechd .eyebrow{display:block;margin-bottom:10px}
.sechd h2{margin:0 auto;max-width:30ch}
.secfoot{margin:clamp(24px,3.4vw,36px) 0 0;text-align:center}

/* ===== о компании: короткий зачин и три опоры ===== */
/* Тот же отступ, что у .sec: это две соседние секции одной роли, и шкалы
   у них расходились — 78 против 72 на широком экране. Между «О компании»
   и «Куда мы возим» фон не меняется, поэтому их отступы складывались в
   148 точек сплошной тонированной пустоты посреди того, что выглядит
   одним блоком. */
.abin{display:block;padding-block:clamp(40px,6vw,72px)}
/* Шов между двумя тонированными секциями подряд: половинный отступ снизу
   у первой и тонкая линия, иначе читается как дыра. */
#about + #geo{border-top:1px solid color-mix(in srgb,var(--ink-3) 18%,transparent)}
#about .abin{padding-bottom:clamp(28px,4vw,48px)}
.abtx{max-width:64ch;margin:0 auto;text-align:center}
.abtx h2{margin:12px auto 0;max-width:26ch;font-size:clamp(25px,3.6vw,36px)}
.ablead{margin:22px auto 0;max-width:58ch;font-size:16px;line-height:1.66;color:var(--ink-2)}
.pills{display:grid;gap:14px;margin-top:clamp(30px,4vw,46px)}
@media(min-width:820px){.pills{grid-template-columns:repeat(3,1fr);gap:18px}}
.pil{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--grass);
  border-radius:16px;padding:21px 22px 24px;box-shadow:var(--shadow-s)}
.pil:nth-child(2){border-top-color:var(--sky)}
.pil:nth-child(3){border-top-color:var(--red)}
.pk{display:block;font-family:var(--display);font-size:15.5px;font-weight:700;
  color:var(--ink-accent);letter-spacing:-.012em}
.pil p{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ===== контакты ===== */
.cgrid{padding-block:0}
.cc{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 24px}
.cc-hi{background:var(--tint);border-color:color-mix(in srgb,var(--sky) 26%,var(--line))}
.cc .big{margin:0;color:var(--ink-accent)}
.cc .big a:hover{color:var(--sky)}
.cc .cs{margin-top:8px;font-size:13.5px;color:var(--ink-3)}
.cc a:hover{color:var(--sky)}
.cities{margin-top:2px}

/* Каталог по брендам */
.bblock{padding-block:34px 10px;border-top:1px solid var(--line)}
.bblock:first-child{border-top:0;padding-top:18px}
.bhead{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;margin-bottom:22px}
/* Заголовок группы в каталоге. Плашка была 92 px с полями 12×18, и знак
   в ней занимал 68 px по высоте — у квадратных логотипов вроде «Мартина»
   вокруг оставалось втрое больше белого, чем самого знака. Плашка выше,
   поля меньше, и min-width убавлен: он держал её широкой под узкий знак,
   отчего по бокам зияло. */
.blogo{display:flex;align-items:center;justify-content:center;background:var(--plate);
  border:1px solid var(--line);border-radius:14px;height:118px;padding:7px 10px;
  box-shadow:var(--shadow-s);min-width:116px}
/* Высоту задаём определённо, ширину браузер считает из width/height в теге.
   С двумя auto и только max-* коробка картинки до загрузки нулевая, плашка
   ужимается до min-width и, когда знак приходит, прыгает вбок. */
.blogo img{height:100%;width:auto;max-width:220px;object-fit:contain}
.blogo .ini{width:56px;height:56px;font-size:25px}
/* Те же монограммы на странице бренда и в плашке бренда на карточке
   товара: без размеров буква терялась посреди пустой белой плашки. */
.bhd .lw .ini{width:72px;height:72px;font-size:32px}
.pvbr .lw .ini{width:100%;height:100%;border-radius:6px;font-size:14px}
.bhead h2,.bhead h3{font-size:clamp(20px,2.6vw,27px)}
.bhead h2 a,.bhead h3 a{color:inherit;text-decoration:none}
.bhead h2 a:hover,.bhead h3 a:hover{color:var(--sky)}
.bhead .mt{margin-top:0}

/* Заголовок каталога и поиск — по центру */
.ihead.center{text-align:center}
.ihead.center .back{margin-left:auto;margin-right:auto}
.srch{margin-left:auto;margin-right:auto;max-width:560px}
.cnt{text-align:center}

/* ===== История: тёплая полоса, портрет растворяется в фоне справа ===== */
:root{--warm:#F3E9DC; --warm-2:#FBF6EF}
.sban{position:relative;overflow:hidden;
  background:linear-gradient(105deg,var(--warm-2) 0%,var(--warm) 58%,#E7D7C2 100%)}
.sbin{position:relative;z-index:2;padding-block:clamp(38px,6vw,78px)}
.stext{max-width:52ch;text-align:center}
.sban .eyebrow{color:#9A6B3A}
.sban h1{font-size:clamp(28px,4.4vw,46px);margin-top:0;color:#0A2E6B}
.sq{margin:20px auto 0;padding:22px 0 0;border:0;position:relative;
  font-family:var(--display);font-size:clamp(19px,2.7vw,28px);line-height:1.4;
  font-weight:700;color:#0A2E6B;max-width:40ch;letter-spacing:-.012em}
.sq::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:46px;height:3px;border-radius:2px;background:var(--grass)}
.sl{margin:22px auto 0;font-size:15.5px;line-height:1.68;color:#6B5540;max-width:50ch;
  text-align:start;hyphens:auto}
.sname{margin:0 0 16px}
/* имя стало единственным заголовком страницы: сбрасываем размеры h1,
   их задают b и span внутри */
/* Имя — отдельный заголовок, годы и должность — подпись под ним. Раньше всё
   три сидело в одном h1 и читалось как «Фирдавс Исмоилов1998 – 2026Основатель». */
h1.sname{font-family:var(--display);font-size:17px;font-weight:700;color:#0A2E6B;
  line-height:1.2;letter-spacing:normal}
.smeta{margin:4px 0 0}
.smeta span{display:block;margin-top:2px;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:#7A5226;font-weight:600}
/* фотография: прижата к правому краю, слева и снизу уходит в фон */
.sfoto{margin:0;position:absolute;right:0;bottom:0;top:0;width:min(46%,560px);z-index:1;
  pointer-events:none}
/* Портрет показываем целиком. Было object-fit:cover — он подгонял снимок
   под высоту полосы и срезал макушку, а нижняя растушёвка при этом
   приходилась на рот и подбородок: на экране 929 px от лица оставалась
   полоса от бровей до носа. Здесь contain: снимок вписывается в полосу
   целиком, прижат к правому краю, а слева растворяется маской, как и было. */
.sfoto img{width:100%;height:100%;object-fit:contain;object-position:100% 50%;display:block;
  -webkit-mask-image:linear-gradient(to left,#000 42%,transparent 97%),
                     linear-gradient(to top,transparent 2%,#000 18%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left,#000 42%,transparent 97%),
             linear-gradient(to top,transparent 2%,#000 18%);
  mask-composite:intersect}
@media(max-width:1000px){
  .sban{display:flex;flex-direction:column-reverse}
  /* Во всю ширину снимок растягивался до нелепого — на 929 px лицо было
     почти метровым и всё равно обрезанным. Держим его собственные
     пропорции и ставим по центру: фон полосы и фон снимка одного тона,
     поэтому поля по бокам не читаются как пустота. */
  .sfoto{position:relative;width:100%;overflow:hidden;line-height:0;
    display:flex;justify-content:center;align-items:flex-end}
  /* Края растворяем со всех сторон: иначе снимок лежит на тёплой полосе
     прямоугольной заплатой со швом. На широком экране это уже сделано
     слева, здесь — так же, только по кругу. */
  /* Ширину задаём определённо, высоту браузер берёт из width/height в теге.
     Если обе стороны auto, считать не от чего: пока снимок в пути, коробка
     нулевая, а когда доедет — страница прыгает на 460 точек вниз. */
  .sfoto img{width:min(100%,370px);height:auto;
    object-fit:contain;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),
                       linear-gradient(to bottom,transparent 0,#000 6%,#000 84%,transparent 98%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),
               linear-gradient(to bottom,transparent 0,#000 6%,#000 84%,transparent 98%);
    mask-composite:intersect}
  .sbin{padding-block:clamp(26px,5vw,44px)}
  .stext{max-width:none}
}

/* ===== страница бренда: шапка по центру, как в каталоге ===== */
.ihead .in{text-align:center}
.ihead .back{margin-bottom:18px}
.bhd{flex-direction:column;align-items:center;text-align:center;gap:13px}
.bhd .lw{width:auto;min-width:124px;height:clamp(112px,14vw,132px);padding:7px 11px;
  box-shadow:var(--shadow-s)}
.bhd .lw img{height:100%;width:auto;max-width:230px;object-fit:contain}
.bhd .mt{margin-top:7px}
.bstory{margin:20px auto 0;max-width:68ch;text-align:left;line-height:1.66}

/* ===== реквизиты: как на бланке — слева таджикский, справа русский ===== */
.req{margin-top:clamp(22px,3vw,30px);background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;padding:clamp(20px,2.6vw,28px);display:grid;gap:20px}

.req p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.req .rn{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.005em;
  line-height:1.4;color:var(--ink)}
.req .ra{margin-top:9px}
.req .rc{margin-top:9px;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}

/* ===== указатель брендов в каталоге ===== */
.bjump{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0 4px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.bjump a,.bjump button{font-size:13px;font-weight:500;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:5px 12px 5px 5px;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.bjump button.all{padding-inline:14px}
.bjump a:hover,.bjump button:hover{border-color:var(--sky);color:var(--sky)}
.bjump button{display:inline-flex;align-items:center;gap:8px;min-height:40px;line-height:1}
/* знак бренда в ярлыке: подложка белая всегда — логотипы нарисованы под белое */
.bjump button img{width:30px;height:30px;object-fit:contain;border-radius:7px;
  background:var(--plate);padding:3px;flex:none}
.bjump button .ini{width:30px;height:30px;border-radius:7px;flex:none;font-style:normal;
  font-family:var(--display);font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--navy) 9%,#fff);color:var(--navy-2)}
/* на телефоне ярлыки и так занимают треть экрана — ужимаем знак и шрифт */
@media(max-width:620px){
  .bjump{gap:6px}
  .bjump a,.bjump button{font-size:12.5px;padding:4px 10px 4px 4px;border-radius:9px}
  .bjump button{min-height:34px;gap:6px}
  .bjump button.all{padding-inline:12px}
  .bjump button img,.bjump button .ini{width:26px;height:26px;border-radius:6px}
  .bjump button img{padding:2px}
  .bjump button .ini{font-size:13px}
}
.bjump:empty{display:none}
/* чтобы якорь не уезжал под прилипшую шапку */
.bblock{scroll-margin-top:92px}
@media(min-width:960px){.bblock{scroll-margin-top:78px}}

/* ===== карта доставки ===== */
.mapwrap{margin:0}
.tjmap{display:block;width:100%;height:auto;max-width:900px;margin-inline:auto;overflow:visible}
.tjland{fill:color-mix(in srgb,var(--navy) 9%,transparent);
  stroke:color-mix(in srgb,var(--navy) 34%,transparent);stroke-width:9}
.tjline{stroke:var(--sky);stroke-width:2;stroke-opacity:.42;stroke-dasharray:7 7;fill:none}
.tjdot{fill:var(--sky);stroke:var(--bg-2);stroke-width:3}
.tjdot.base{fill:var(--red)}          /* склад */
.tjdot.mid{fill:var(--navy-2)}        /* крупный город */
.tjname{fill:var(--ink-2);font-family:var(--body);font-weight:500}
.tjname.base,.tjname.mid{fill:var(--navy);font-weight:700}
.mapwrap figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--ink-3)}
@media(max-width:620px){.tjname{font-size:26px}.tjname.big{font-size:29px}}

/* ===== переключатель языка ===== */
/* Три цели по 24,5 px, поставленные встык, — самый вероятный промах на
   телефоне: сайт трёхъязычный и открывают его из Телеграма. Вид оставляем
   почти прежним, а область касания доводим до 44 px невидимым
   расширением вверх и вниз. Поэтому у полоски снято overflow:hidden —
   иначе оно обрезало бы и расширение; скругление теперь на крайних
   кнопках. */
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:9px;
  flex:none;margin-left:auto;background:var(--surface)}
.langsw button{position:relative;font-family:var(--display);font-size:12.5px;
  font-weight:700;letter-spacing:.03em;min-height:30px;
  padding:6px 10px;color:var(--ink-3);line-height:1;transition:background .15s,color .15s}
.langsw button::after{content:"";position:absolute;inset:-7px 0;z-index:1}
.langsw button:first-child{border-radius:8px 0 0 8px}
.langsw button:last-child{border-radius:0 8px 8px 0}
.langsw button + button{border-left:1px solid var(--line)}
.langsw button[aria-pressed="true"]{background:var(--navy);color:#fff}
.langsw button:hover[aria-pressed="false"]{color:var(--sky)}
.nv .sp + .lk{margin-left:0}
@media(min-width:960px){.langsw{margin-left:14px}}
@media(max-width:380px){.nv .langsw{margin-left:auto}}

/* ===== форма заявки ===== */
.lead{grid-column:1/-1;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:24px 22px 26px;margin-top:14px}
.lead h3{font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink-accent)}
.lh{margin:7px 0 18px;font-size:14px;color:var(--ink-3)}
/* Поле формы = подпись + ввод, одной парой. Сетка раскладывает пары, а не
   отдельные элементы: иначе на широком экране подпись уезжала в одну
   колонку, а поле — в другую. */
.lf{display:grid;gap:10px}
.lfd{margin:0;display:grid;gap:4px}
.lfd label{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.lfd label b{color:var(--red);font-weight:700}
.lfd-w{margin-top:10px}
/* Поле, на которое указала ошибка. Цветом и тенью, а не только текстом
   рядом с кнопкой: иначе непонятно, что именно исправлять. */
.lead [aria-invalid="true"]{border-color:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 16%,transparent)}
@media(min-width:620px){.lf{grid-template-columns:1fr 1fr}}
.lead input,.lead textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg-2);border:1px solid color-mix(in srgb,var(--ink-3) 42%,transparent);
  border-radius:11px;padding:12px 13px;
  outline:none;transition:border-color .15s,box-shadow .15s}
.lead textarea{resize:vertical;min-height:86px;line-height:1.5}
.lead input:focus-visible,.lead textarea:focus-visible{border-color:var(--sky);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 16%,transparent)}
.lrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
/* Ответ формы стоит перед кнопкой и держит свою строку: пустой он места
   не занимает, но когда появляется — кнопка не прыгает под пальцем. */
.lmsg{display:block;margin:14px 0 0;font-size:14px;color:var(--ink-3)}
.lmsg:empty{display:none}
.lmsg:focus{outline:none}
.lmsg.ok{color:var(--grass);font-weight:600}
.lmsg.bad{color:var(--red)}
.lmsg a{color:var(--sky);font-weight:600}

/* ===== Текст во всю ширину и по ширине (по просьбе владельца) =====
   Абзацы больше не ограничены удобной для чтения колонкой: занимают всю
   ширину контейнера и выключены по ширине. */
.bstory{max-width:none;text-align:start;hyphens:auto}
.stx p{max-width:none;text-align:start;hyphens:auto}
.ablead{max-width:none;text-align:start;hyphens:auto}
.pvlead,.sect p{max-width:none;text-align:start;hyphens:auto}
.sl{text-align:start;hyphens:auto}

/* ===== баннер «История»: текст во всю ширину =====
   Колонка больше не сужена до удобной для чтения ширины. Чтобы строки не
   уезжали под фотографию, справа оставляем ровно её полосу: она лежит
   абсолютом поверх баннера и шириной min(46%,560px). */
.stext{max-width:none}
.sq,.sl{max-width:none}
@media(min-width:1001px){ .sbin{padding-right:min(46%,560px)} }
/* годы жизни: тише имени и должности, цифры моноширинные */
.smeta .syr{display:block;font-style:normal;font-size:13.5px;
  color:#7A5226;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.smeta .syr + span{margin-top:7px}

/* ===== Если логотип сам содержит название, не повторяем его текстом =====
   Название не удаляем, а прячем визуально: оно остаётся в разметке для
   поиска и для программ чтения с экрана. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btile.bare .lw{border-bottom:0;height:clamp(96px,14vw,116px)}
.bhead .mt:empty{display:none}
.bblock .bhead h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.018em}

/* ===== описание бренда в каталоге: между логотипом и товарами ===== */
.bdesc{margin:0 0 24px}
.bdesc p{margin:0 0 11px;font-size:15px;line-height:1.66;color:var(--ink-2);
  text-align:start;hyphens:auto}
.bdesc p:last-child{margin-bottom:0}
.bblock .bhead{margin-bottom:18px}

/* ===== каталог: уровень завода над брендами ===== */
.mblock{padding-block:38px 6px;border-top:2px solid var(--navy)}
.mblock:first-child{padding-top:22px}
.mhead{text-align:center;margin-bottom:16px}
.mhead h2{font-size:clamp(24px,3.4vw,34px);margin-top:8px;color:var(--ink-accent)}
.mdesc{max-width:none;margin-bottom:6px}
.minner{margin-top:4px}
/* внутри завода бренды идут мельче и с отступом слева, чтобы была видна
   вложенность: завод — общий, бренды — его части */
.minner .bblock{border-top:1px solid var(--line);padding-block:26px 8px}
.minner .bblock:first-child{border-top:0}
.minner .blogo{height:76px;min-width:130px}
@media(min-width:880px){.minner{padding-left:28px;border-left:2px solid var(--tint)}}

/* ===== завод, который сам и есть бренд =====
   «ОГО!» — один знак на все линейки. Тогда логотип стоит один раз наверху,
   а внутри идут не бренды с повтором той же картинки, а линейки: подпись
   «Линейка» и название. */
.mbrand .mhead{margin-bottom:20px}
.mlogo{display:inline-flex;align-items:center;justify-content:center;background:var(--plate);
  border:1px solid var(--line);border-radius:16px;height:104px;padding:12px 22px;
  box-shadow:var(--shadow-s);min-width:170px}
.mlogo img{max-height:100%;max-width:240px}
.lhead{gap:5px;margin-bottom:16px}
.lhead h2,.lhead h3{font-size:clamp(17px,2.1vw,21px);color:var(--ink-2)}
.minner .lblock{padding-block:22px 8px}
/* Под заголовком бренда (а теперь ещё и завода) подпись бренда на каждой
   карточке повторяет то же слово третий раз. В каталоге и на странице
   бренда она не нужна — товар и так стоит под своим брендом. */
.bblock .pc .br{display:none}
.bmaker{order:-1;width:100%;text-align:center;margin:0 0 2px;font-size:11.5px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}

/* ===== Нижняя полоса действий на телефоне =====
   Сайт открывают из Телеграма, с телефона, и чаще всего затем, чтобы
   связаться. Поэтому связь не должна зависеть от того, докрутит ли
   человек до низа: две кнопки всегда под рукой. На широком экране
   полоса не нужна — там телефон виден в шапке. */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:8px;
  padding:8px var(--gr) max(8px,env(safe-area-inset-bottom,0px)) var(--gl);
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.bar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;border-radius:12px;font-size:14.5px;font-weight:600}
.bar .b1{background:var(--navy-2);color:#fff}
.bar .b2{background:#25D366;color:#06281A}
.bar .b3{background:#1A7CAD;color:#fff}
@media(max-width:400px){.bar a{font-size:13px;gap:5px}}
.bar svg{flex:none}
@media(min-width:960px){.bar{display:none}}
@media(max-width:959px){body{padding-bottom:70px}}

/* ===== Блок «что дальше» в конце страницы бренда и товара =====
   Обе страницы раньше кончались подвалом: человек уже выбрал, а сделать
   ничего не мог. */
.next{margin-top:34px;border:1px solid var(--line);border-radius:18px;
  background:var(--bg-2);padding:clamp(20px,3vw,30px)}
.next h2{font-size:clamp(19px,2.4vw,24px);color:var(--ink-accent)}
.next p{margin:10px 0 0;color:var(--ink-2);font-size:15px;max-width:60ch}
.next .acts{margin-top:18px}
/* Цвета мессенджеров сняты с «.next»: теми же кнопками пользуется карточка
   контактов. Раньше правила были привязаны к одному блоку, и повторить их
   в другом месте значило бы завести второй набор цветов. */
.wa{background:#25D366;color:#06281A}
/* Телеграм своим цветом, как в нижней полосе. Раньше он был такой же
   бледной кнопкой, что и «Оставить заявку», — два совсем разных действия
   выглядели одинаково. Теперь все четыре различаются: звонок тёмно-синий,
   WhatsApp зелёный, Телеграм голубой, заявка — обводкой. */
.tg-btn{background:#1A7CAD;color:#fff}
.tg-btn:hover{background:#15688f}
.wa:hover{background:#1fbb59}

/* ===== Кнопки связи в карточке контактов =====
   Строка «Звонок, WhatsApp и Telegram» говорила, что номер работает в трёх
   каналах, но нажать на неё было нельзя. На настольном экране это особенно
   мешало: нижняя полоса связи там скрыта от 960 px, и во всём разделе
   «Контакты» не оставалось ни одного действия, кроме самого номера.
   На телефоне полоса есть, но она уезжает вниз, как только на экране
   появляется форма заявки, — то есть ровно когда человек дочитал до
   контактов. Так что дубль получается не постоянный, а на несколько
   строк прокрутки. */
.cc .acts{margin-top:12px;gap:8px}
.cc .acts .btn{padding:9px 14px;font-size:14px;min-height:40px}
/* На телефоне три кнопки в строку не умещаются и переносятся как
   «две и одна» — вид неряшливый. Звонок главный, он и занимает строку
   целиком; мессенджеры делят вторую пополам. */
@media(max-width:620px){
  .cc .acts .btn{flex:1 1 calc(50% - 4px);justify-content:center}
  .cc .acts .btn:first-child{flex:1 1 100%}
}

/* ===== Подпись к цене ===== */
.pricenote{display:block;margin-top:6px;font-size:12.5px;font-weight:500;
  color:var(--ink-3);max-width:40ch;letter-spacing:0}
/* Фасовка рядом с ценой. Цена указана за штуку, а магазин берёт коробкой:
   без этой строки главная для покупателя цифра лежала ниже, в таблице
   характеристик, и в первый экран телефона не попадала. */
.packnote{display:inline-block;margin-top:10px;padding:5px 11px;border-radius:9px;
  background:var(--plate);border:1px solid var(--line);color:var(--on-plate-2);
  font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:0}
/* Цена слева, артикул справа, одной строкой: справа от цены пустое место
   во всю ширину блока, и отдавать плашке собственный ряд значит отодвинуть
   описание вниз ради кода из шести знаков. На узком экране ряд
   переносится сам, цена при этом не сжимается. */
.pvtop{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:14px;row-gap:8px}
.pvtop .pvnum{line-height:1}
/* Подпись к цене — третий участник ряда, но всегда на своей строке: ей
   задана целая ширина. Сетка из двух колонок тут не годилась: цена
   сжиматься не умеет, и на экране в 360 точек «245,00 смн» налезала на
   «Артикул ISTIQLOL39». Перенос честнее — на узком экране плашка уходит
   под цену, подпись остаётся последней. */
.pvtop .pricenote{flex:0 0 100%;margin-top:0}
/* Артикул — простой текст, без рамки и заливки.
   Рамка тут была ошибкой, и Фаридун указал на неё верно: в плитке каталога
   код набран обычным текстом, а в карточке получил обводку — один и тот же
   факт в двух видах. Хуже того, рамка рядом с ценой читается как кнопка:
   обведённое на странице принято нажимать, а нажимать тут нечего.
   Цифры табличные: код списывают глазами, иногда диктуют по телефону. */
.artnote{display:inline-flex;align-items:baseline;gap:6px;
  color:var(--ink-2);font-family:var(--body);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.artnote b{font-weight:500;color:var(--ink-3);letter-spacing:0}
.pgrid .pc .pr i{font-style:normal}

/* ===== Ярлыки брендов работают фильтром, а не прыжком =====
   Каталог — пятьдесят тысяч пикселей одной лентой. Прыжок по якорю
   оставлял человека внутри той же бесконечной страницы; фильтр
   сокращает её до одного бренда. */
.bjump a.on,.bjump button.on{background:var(--navy-2);border-color:var(--navy-2);color:#fff}
.bjump button.on .ini{background:#fff;color:var(--navy-2)}

/* ===== Наверх ===== */
/* Кнопка плавает над текстом — на узком экране ей негде встать иначе,
   полей у страницы нет. Значит она обязана читаться как предмет НАД
   страницей, а не как вырубленная в ней дырка: слабая тень давала ровно
   второе, белый круг садился на слово и выглядел браком печати. */
.up{position:fixed;right:var(--gr);bottom:84px;z-index:54;width:46px;height:46px;
  border-radius:50%;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(11,16,24,.16),0 2px 5px rgba(11,16,24,.10);
  display:none;align-items:center;justify-content:center;
  color:var(--ink-2)}
.up.on{display:flex}
@media(min-width:960px){.up{bottom:28px}}

/* ===== «Показать все» внутри блока бренда ===== */
.more{margin:16px 0 0;text-align:center}
.more button{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:0 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font-size:14px;font-weight:600;color:var(--ink-2)}
.more button:hover{border-color:var(--sky);color:var(--sky)}

/* на странице бренда подпись бренда на каждой плитке — третий повтор имени */
#bpGrid .pc .br{display:none}

/* ===== правки после разбора ===== */
/* Первый экран выключен по центру — кнопки тоже, и одной ширины:
   иначе ось композиции ломается ровно там, где надо нажать. */
.hero .acts{justify-content:center}
.hero .acts .btn{min-width:210px;justify-content:center}
@media(max-width:430px){.hero .acts .btn{min-width:0;flex:1 1 100%}}
/* Рамка фокуса. Своя была описана у плиток, карточек и галереи, а меню,
   переключатель языка, телефон в шапке, «назад», ярлыки полок и логотип
   бренда получали браузерную — тёмно-серую в один пиксель, которая на
   тёмно-синей кнопке и на синем подвале почти не видна. */
/* Ссылка «к содержимому». В каталоге табуляция идёт сквозь весь товар:
   до подвала больше ста шестидесяти остановок. Видна только под фокусом. */
.skip{position:absolute;left:-9999px;top:0;z-index:70;
  padding:10px 16px;background:var(--navy);color:#fff;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
summary:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:4px}
.bar a:focus-visible,footer a:focus-visible,.btn-pri:focus-visible{outline-color:#fff}

/* Ссылка «назад» — полноценная цель нажатия, а не строка в 16 px */
a.back{display:inline-flex;align-items:center;min-height:44px}

/* Меню на телефоне: пять пунктов в одну строку. Раньше «Контакты»
   переносились на третью строку в одиночку и шапка занимала четверть
   экрана. Цель нажатия остаётся 44 px по высоте. */
@media(max-width:620px){
  .nv .lk{gap:2px 13px;font-size:13.5px;justify-content:space-between}
}
/* Пять пунктов в строку на телефон не помещаются никак: им нужно 377 px
   при 342 доступных. Прокрутка вбок тут не годится — «Каталог» и
   «Контакты» ушли бы за край, и попасть в них было бы нельзя.
   Значит два ряда. Сетка по три их давала, но третья клетка второго ряда
   оставалась пустой, и ряд читался как сбой вёрстки, а не как замысел.
   Перенос с выравниванием по центру даёт те же 3 + 2, но оба ряда стоят
   по оси страницы — и держится это на любом языке: таджикские пункты
   длиннее русских и ложатся 2 + 3, что при центровке выглядит так же
   намеренно. */
@media(max-width:429px){
  .nv .lk{justify-content:center;gap:2px 14px}
  .nv .lk a{padding-inline:4px}
}

/* Полоса связи уезжает вниз, когда на экране уже есть форма или блок
   «что дальше»: иначе она перекрывает их последние строки. */
/* ===== Внутри Телеграма =====
   Признак tg ставит app.js, когда страница открыта из бота кнопкой
   web_app. Внутри Телеграма экран дороже: точка пришла за товарами, а два
   первых экрана занимали меню сайта и полоса связи — с кнопкой «Telegram»
   в Телеграме.

   Полосу убираем целиком. Связаться точке есть как: она уже в боте, и там
   для этого есть «Моя точка → Связаться с агентом». Остаются логотип и
   переключатель языка. На обычном сайте не меняется ничего. */
html.tg nav .ph,
html.tg .bar{display:none}
/* Менеджеру не нужен блок «Заказать» и форма заявки: он и есть тот, кому
   по ним звонят. Клиенту из бота бонусов они нужны по-прежнему, поэтому
   прячем по роли, а не «внутри Телеграма». */
html.r-m .next,
html.r-m form.lead{display:none}

/* Меню сайта и плашки категорий внутри Телеграма — одной прокручиваемой
   строкой вбок, а не блоком в три ряда. Меню в прошлой правке я убрал
   совсем, и выяснилось, что выйти с каталога стало некуда: из бота
   открывается сразу он, а «Истории» и «О компании» будто и нет. Плашки
   занимали почти целый экран до первого товара.

   Строкой сохраняется и то и другое: навигация на месте, категории
   работают, а по высоте каждая отнимает один ряд вместо трёх. */
html.tg nav .lk,
html.tg .cjump,
html.tg .bjump{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.tg nav .lk::-webkit-scrollbar,
html.tg .cjump::-webkit-scrollbar,
html.tg .bjump::-webkit-scrollbar{display:none}
html.tg nav .lk{gap:18px;padding-block:0 2px}
html.tg nav .lk a{min-height:38px;justify-content:flex-start;padding-inline:0}
/* Строка прокручивается до края экрана, а не обрывается по полю страницы:
   иначе последняя плашка выглядит обрезанной случайно. */
html.tg .cjump,
html.tg .bjump{margin-inline:calc(var(--gr) * -1);padding-inline:var(--gr);
  padding-bottom:2px}
/* Кнопка «наверх» стояла на 84 px от низа — ровно над полосой связи.
   Полосы внутри Телеграма нет, и кнопка висела бы в пустоте. */
html.tg .up{bottom:24px}
/* Заголовок каталога внутри Телеграма не показываем: своё название окно
   уже написало сверху, а «← На главную» и крупное «Каталог» занимали
   целый экран до первого товара. Размер заголовка задан прямо в разметке,
   ужать его стилем нельзя — только спрятать блок.

   Только каталога: у него .ihead.center. На странице бренда в этом же
   блоке лежат логотип, название и ссылка «← Все бренды» — спрятав его
   целиком, я оставил точку без пути назад. */
html.tg .ihead.center{display:none}
/* Описание бренда внутри Телеграма прячем: логотип группы остаётся и сам
   ведёт на страницу бренда, так что «О бренде →» ничего не добавляет, а
   вместе с фразой занимает ещё треть экрана до первого товара. */
html.tg .bdesc{display:none}

.bar{transition:transform .22s ease}
/* visibility — чтобы в спрятанную полосу не проваливался фокус. Мышь
   мимо неё проходила (pointer-events:none), а табуляция давала три
   остановки в пустоту: «Позвонить», «WhatsApp» и «Telegram» лежали на
   662 px при окне 640. Задержка перехода — чтобы уход полосы оставался
   плавным, а не обрывался. */
.bar.off{transform:translateY(120%);pointer-events:none;visibility:hidden;
  transition:transform .2s,visibility 0s .2s}
.bar.off ~ .up{bottom:28px}
/* Страница памяти живёт без полосы — и без отступа под неё. */
body[data-bar="off"]{padding-bottom:0}

.bmore{margin-top:8px;text-align:center}
.bmore .lnk{display:inline-flex;align-items:center;min-height:36px;font-size:13.5px;font-weight:600;color:var(--sky)}

/* ===== полки каталога ===== */
/* Владелец магазина собирает заявку по полкам, а не по маркам, поэтому
   категории стоят первым рядом, а бренды — вторым, внутри выбранной полки. */
.cjump{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0 0}
.cjump button{font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:0 15px;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:38px;line-height:1;
  transition:border-color .15s,color .15s,background .15s}
.cjump button:hover{border-color:var(--sky);color:var(--sky)}
.cjump button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.cjump:empty{display:none}
.cjump + .bjump{margin-top:10px}
@media(max-width:620px){
  .cjump{gap:6px;margin-top:14px}
  .cjump button{font-size:12.5px;padding:0 12px;min-height:34px}
}
/* Плашка ростом 34 px, а палец требует 44. Растить саму плашку нельзя:
   на телефоне это десять точек, отнятых у товаров в каждой строке ряда.
   Поэтому зону нажатия расширяем псевдоэлементом — приём уже работает у
   переключателя языка. Промаха между соседними плашками не будет: по
   горизонтали зона не растёт, только по вертикали. */
.cjump button,
.bjump button{position:relative}
.cjump button::after,
.bjump button::after{content:"";position:absolute;inset:-5px 0;border-radius:inherit}

/* ===== фотографии на странице памяти ===== */
/* Три кадра рядом, без таймера. Карусель здесь не к месту: движение на
   такой странице читается как реклама, а всё кроме первого кадра видит
   меньшинство. Нажатие открывает крупно — человек смотрит сам. */
/* Мера та же, что у абзацев над ними: при 64ch полоса снимков была уже
   текста на 29 px, и два блока, стоящие друг под другом, начинались с
   разных мест — на 1280 это видно глазом. Мера задана в rem, а не в ch:
   «ch» считается от кегля самого блока, а у абзаца он 15,5 px, у полосы
   снимков — 15, и одинаковые «68ch» давали разную ширину. */
.falb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:30px auto 0;max-width:var(--мера-истории)}
@media(min-width:640px){.falb{gap:14px}}
.falb button{padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--plate);box-shadow:var(--shadow-s);cursor:zoom-in;display:block;
  transition:transform .16s,box-shadow .16s,border-color .16s}
.falb button:hover{transform:translateY(-2px);box-shadow:var(--shadow-l);border-color:var(--sky)}
.falb button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.falb img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

/* окно просмотра */
.lb{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top,0px)) 16px;
  background:rgba(8,11,16,.92);backdrop-filter:blur(3px)}
.lb[hidden]{display:none}
.lb img{max-width:min(100%,560px);max-height:88vh;width:auto;height:auto;
  border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lb button{position:absolute;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lbx{top:max(14px,env(safe-area-inset-top,0px));right:14px}
.lbp{left:14px;top:50%;transform:translateY(-50%)}
.lbn{right:14px;top:50%;transform:translateY(-50%)}
@media(max-width:520px){
  .lbp{left:10px}.lbn{right:10px}
  .lb button{width:42px;height:42px}
}

/* Галочка согласия под формой заявки. Мелкая, но обязательная: без неё
   согласие на обработку данных нечем подтвердить. */
.lok{display:flex;gap:9px;align-items:flex-start;margin-top:12px;
  font-size:13.5px;line-height:1.45;color:var(--muted);cursor:pointer}
.lok input{margin:2px 0 0;flex:none;width:17px;height:17px;accent-color:var(--navy);cursor:pointer}
.lok a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Пропорции логотипов. Размер в атрибутах тега нужен, чтобы браузер знал
   пропорции заранее и не дёргал вёрстку, — но он задаёт И ширину, И высоту,
   а когда заданы обе, браузер перестаёт беречь соотношение сторон и просто
   растягивает картинку под коробку. «За Родину» 338×180 и «Мартин» 174×180
   оказывались в одном прямоугольнике 174×88 и выглядели уродливо.
   От растягивания спасает object-fit:contain — он и держит пропорции.
   А вот height:auto вместе с width:auto оказался ошибкой: пока знак в пути,
   браузеру не от чего считать коробку, она нулевая, и плашка ужимается до
   min-width. Когда знак приходит, плашка прыгает вбок на 5–9 точек —
   измерено на каталоге и на страницах брендов. Поэтому высоту задаём
   определённо: contain по-прежнему не даёт растянуть, а место под знак
   занято с первого кадра. */
.lw img, .blogo img, .mlogo img{
  width:auto; height:auto; max-width:100%; object-fit:contain}

/* Определённая высота нужна не всем, а только плашкам, которые тянутся по
   ширине под размер знака: .blogo в заголовке раздела каталога и .lw на
   странице бренда. У плиток стены брендов ширина фиксирована — там
   подросшая картинка никого не двигает, и высоту им задавать нельзя:
   у кусков упаковки коробка раздулась бы и вылезла рамка. */
.blogo img{height:100%}

/* Телефон в шапке стал ссылкой — по нему теперь можно позвонить с телефона.
   Внешний вид при этом остаётся прежним: подчёркивание и цвет ссылки здесь
   лишние, строка должна читаться как подпись, а не как ссылка. */
a.ph{color:inherit;text-decoration:none}
a.ph:hover{color:var(--navy)}

/* ===== первый экран каталога на телефоне =====================================
   Померено на 390×844: до первой плитки товара было 942 px, то есть
   больше экрана. Складывалось так: шапка 174, заголовок «Каталог» 180,
   поиск 51, тринадцать кнопок категорий 235 в пять рядов, дальше шапка
   марки. Человек, зашедший в каталог, не видел ни одного товара и должен
   был поверить, что они там есть.

   Режем два самых тяжёлых куска, не трогая меню: его двухрядная сетка
   сделана осознанно — пять пунктов в строку не помещаются, а прокрутка
   спрятала бы «Каталог» и «Контакты» за краем экрана.

   Приём тот же, что уже работает внутри Телеграма: ряд категорий
   прокручивается вбок и занимает один ряд вместо пяти. */
@media(max-width:620px){
  .cjump,
  .bjump{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gr) * -1);padding-inline:var(--gr);padding-bottom:2px}
  .cjump::-webkit-scrollbar,
  .bjump::-webkit-scrollbar{display:none}
  /* Что ряд прокручивается, видно только по обрезанной плашке у края —
     а обрезанная плашка читается как брак вёрстки. Растворяем правый
     край: тогда обрыв выглядит как продолжение, а не как ошибка.
     Маска снимается, когда прокручено до конца. */
  .cjump,
  .bjump{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .cjump.end,
  .bjump.end{-webkit-mask-image:none;mask-image:none}
  /* Заголовок страницы на телефоне не нуждается в таких полях: место
     дороже воздуха, когда за него борются товары. */
  .ihead .in{padding-block:14px 16px}
  .ihead .back{margin-bottom:10px}
}

/* ===== Мера строки на широком экране =====
   На сайте мера ограничена почти везде: .pvlead 62ch, .ablead 58ch,
   .sl 50ch, .sect p 62ch, .stx p 64ch, .bstory 68ch, .fseo 72ch. Эти два
   места выпали, и на 1280 px и шире строка доходила до 154–164 знаков при
   комфортных 45–75. Ограничение ставим только мерой: на телефоне она не
   задевается вовсе. */
.bdesc p{max-width:68ch}
.stxonly p{max-width:var(--мера-истории)}

/* ===== Отклик на нажатие =====
   Правил :active на сайте не было ни одного. На телефоне между касанием и
   переходом человек не получал никакого подтверждения, что палец попал, —
   а при медленной сети это секунда-две тишины. Только там, где нет
   наведения: на настольном браузере отклик даёт :hover. */
@media (hover:none){
  .btn:active,.pc:active,.btile:active,.prask:active,.bar a:active,
  .cjump button:active,.bjump button:active,.langsw button:active,
  .lnk:active,.back:active{opacity:.72}
}

/* ===== Поле поиска на страницах «ничего не нашлось» =====
   Разметку этих страниц собирает скрипт (нетТовара в item.html,
   нетМарки в brand.html), обёртки .srch у поля нет — и оно оставалось
   голым браузерным полем 21 px высотой, единственным элементом на сайте,
   который выглядел чужим. У нарисованной 404.html свои правила в самой
   странице, они идут после этих и останутся в силе. */
.nf form{display:flex;flex-wrap:wrap;gap:8px;max-width:420px;margin:22px 0 0}
.nf form .btn{flex:0 0 auto}
.nf input{flex:1 1 170px;min-width:0;min-height:44px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:15px}
.nf input:focus-visible{border-color:var(--sky);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 16%,transparent)}

/* ===== Первый экран карточки товара на телефоне =====
   Замер до правки (390×844): шапка 174 px, строка «← марка» до 244,
   фотография до 631, плашка марки до 695, название товара 710–781 —
   то есть последняя строка названия упиралась в нижнюю полосу, а на
   360×640 и 320×568 названия не было видно вовсе. Человек, пришедший по
   ссылке на конкретный товар, видел фотографию и кнопку «назад».
   Квадрат фотографии ограничиваем долей экрана: object-fit:contain
   оставляет снимок целым, по бокам видна та же плашка. */
@media(max-width:879px){
  /* Название — выше фотографии. Порядок на телефоне: марка, название,
     снимок, цена, описание. Снимок остаётся крупным, но уже не один
     занимает весь первый экран.
     Сделано без правки разметки: .pvtx растворяется (display:contents),
     его дети становятся ячейками той же сетки, и порядок задаётся order.
     Отступы, которые держал flex-gap внутри .pvtx, переносим на сетку. */
  .pvin{grid-template-columns:minmax(0,1fr);gap:14px}
  .pvtx{display:contents}
  .pvbr{order:1;justify-self:start}
  #pvName{order:2}
  .pvim{order:3;max-height:46svh}
  .pvpr{order:4}
  .pvlead{order:5}
  .spx{order:6}
  #pvAbout{order:7}
}

/* ===== Пустой результат поиска =====
   Человек только что назвал вслух, что ему нужно, — это лучший момент
   разговора. Раньше здесь была одна строка на 305 px пустоты. */
.empty{padding:48px 0 64px;text-align:center}
.empty .eh{margin:0;font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink)}
.empty .es{margin:8px auto 0;max-width:46ch;color:var(--ink-2);font-size:14.5px}
.empty .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

/* ===== Якорь формы заявки =====
   Шапка на телефоне занимает 174 px и висит сверху. Переход по #lead
   останавливал экран так, что заголовок «Оставить заявку», пояснение и
   поле «Имя» оказывались выше края: человек видел безымянную стопку
   полей, начинающуюся с «Магазин или компания», и не понимал, куда
   попал. Сюда ведут все кнопки «Стать нашим клиентом», «Оставить
   заявку» и «Запросить прайс».

   Высоту шапки меряет скрипт и кладёт в --navh: на телефоне меню
   разворачивается в две строки и высота меняется от ширины экрана,
   поэтому зашить её числом нельзя. */
#lead,#contacts,#brands,#about{scroll-margin-top:calc(var(--navh, 80px) + 14px)}

/* ===== Печать =====
   Правил печати не было вовсе, а карточку товара распечатывают: лист
   уносят на склад и к нему возвращаются. Что получалось на бумаге:
   поверх строки «Штрихкод» ложилась фиксированная полоса связи, печаталось
   меню и переключатель РУ/ТҶ, половину первой страницы занимала пустая
   плашка фотографии, — и при этом на листе не было ни телефона, ни почты:
   телефон в шапке скрыт правилом до 960 px, а лист A4 — это 794 px.
   То есть распечатанный лист товара нечем было связать с компанией. */
@media print{
  .skip,nav .lk,.langsw,.bar,.up,.next,a.back,form.lead,.prask,
  .srch,.cjump,.bjump,.bmore,.falb,#lb{display:none !important}
  nav:not([class]){position:static;border-bottom:1px solid #999}
  body{min-height:auto}
  /* Телефон и почта — единственное, ради чего лист потом ищут. */
  .nv .ph{display:inline-block !important;color:#000}
  /* Строка контактов встаёт по той же оси, что и всё остальное на листе:
     без поля она прижималась к самому краю бумаги. */
  /* .nv — флекс-ряд, поэтому строка контактов становится его участником
     и уходит на свою строку целой шириной. Так она держит ту же ось, что
     логотип, и не садится на разделительную линию шапки. */
  nav:not([class]) .nv{flex-wrap:wrap}
  nav:not([class]) .nv::after{content:"info@afzuni.com · www.afzuni.com";
    flex:0 0 100%;margin-top:4px;font-size:9.5pt;color:#000}
  /* Квадрат плашки на бумаге — это просто белое поле: снимок садится по
     своей высоте. */
  .pvim{aspect-ratio:auto;max-height:70mm;width:auto}
  .spr,.sect,.fig,.pc{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  a[href]{text-decoration:none;color:#000}
  .tintbg,.figs,footer{background:#fff !important;color:#000 !important}
  footer *{color:#000 !important}
}