/* ══════════════════════════════════════════════════════
   САЛТЕКС — общий слой: токены, сетка, шапка, кнопки,
   корзина, модальное окно, подвал, движение.
   Подключается на всех страницах. Специфика страницы
   живёт в её собственном <style> или в catalog.css.
   ══════════════════════════════════════════════════════ */

:root{
  /* — фирменная палитра — */
  --ink:        #111010;
  --paper:      #FFFFFF;
  --ochre:      #B78741;

  /* — производные — */
  --ink-70:     #111010b3;
  --ink-45:     #11101073;
  --ink-25:     #11101040;
  --rule:       #1110101f;
  --rule-hard:  #111010;
  --shade:      #F4F3F1;
  --ochre-dim:  #B8874126;
  --stock:      #7FA650;

  /* — типографика — */
  --display: 'Unbounded', Georgia, serif;
  --text:    'Golos Text', 'Helvetica Neue', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* — модульная шкала — */
  --t-2xs: .6875rem;
  --t-xs:  .75rem;
  --t-sm:  .8125rem;
  --t-base:.9375rem;
  --t-md:  clamp(1.05rem, .9rem + .7vw, 1.5rem);
  --t-lg:  clamp(1.6rem, 1.1rem + 2.2vw, 3.1rem);
  --t-xl:  clamp(2.5rem, .9rem + 7.4vw, 8rem);

  /* — ритм — */
  --gutter: clamp(.75rem, 1.6vw, 1.65rem);
  --margin: clamp(1rem, 4.4vw, 4.5rem);
  --bay:    clamp(4rem, 10vh, 8.5rem);

  --ease: cubic-bezier(.22,1,.36,1);
  --line: 1px solid var(--rule);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7rem; }

/* Здесь НЕЛЬЗЯ ставить overflow-x:hidden. Это превращает body
   в контейнер прокрутки, и sticky-шапка начинает липнуть к нему,
   а не к окну: на телефоне она перестаёт держаться верха и над ней
   видно страницу. Если что-то вылезает вбок — обрезать надо тот
   элемент, который вылезает, а не весь документ. */
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-base);
  line-height:1.6;
}

img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }

/* Неразрывные пробелы в разметке снимают висячие предлоги, но не спасают
   от одинокого слова на последней строке: длину строк считает браузер.
   text-wrap:pretty просит его перебросить слово наверх. */
p,dd,li,figcaption,label{ text-wrap:pretty; }
h1,h2,h3,.card__name,.row__title{ text-wrap:balance; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; }

/* ── ЖЁСТКОЕ ПРАВИЛО: ни одного скругления ── */
*{ border-radius:0 !important; }

/* Атрибут hidden должен побеждать раскладку. Ниже полно правил
   вида display:grid/flex на элементах, которые скрипт прячет
   через hidden, а авторский display перебивает стиль браузера. */
[hidden]{ display:none !important; }

/* ══════════════ 12-КОЛОНОЧНАЯ СЕТКА ══════════════ */
.bay{
  padding-inline:var(--margin);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  position:relative;
}
@media (max-width:900px){ .bay{ grid-template-columns:repeat(6,1fr) } }

/* ── Слой сетки (клавиша G) ── */
.grid-overlay{
  position:fixed; inset:0; z-index:9500; pointer-events:none;
  padding-inline:var(--margin);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  opacity:0; transition:opacity .3s var(--ease);
}
.grid-overlay.is-on{ opacity:1; }
.grid-overlay i{ background:var(--ochre); opacity:.1; }
@media (max-width:900px){ .grid-overlay{ grid-template-columns:repeat(6,1fr) } .grid-overlay i:nth-child(n+7){ display:none } }

/* ══════════════ ПРЕЛОАДЕР ══════════════ */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--margin) var(--margin) calc(var(--margin) * .75);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader.is-skipped{ display:none; }

.preloader__logo{ color:var(--ink); width:clamp(130px,15vw,180px); }
.preloader__logo svg{ width:100%; height:auto; }

.preloader__caption{
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:.7rem;
}
.preloader__num{
  font-family:var(--display); font-weight:600;
  font-size:clamp(4.5rem,20vw,15rem); line-height:.76;
  letter-spacing:-.06em; font-variant-numeric:tabular-nums;
}
.preloader__num sup{ font-size:.15em; vertical-align:super; color:var(--ochre); letter-spacing:0; }

.preloader__bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--rule); }
.preloader__bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--ochre); }

html.is-loading{ overflow:hidden; }

/* ══════════════ ШАПКА ══════════════
   Пять блоков в одном ряду — логотип с дескриптором, меню,
   курс доллара, мессенджеры, телефон. Сетка из 12 колонок
   на таком составе разъезжается, поэтому здесь flex.
   ═══════════════════════════════════════════════════════ */
.masthead{
  position:sticky; top:0; z-index:800;
  padding:.85rem var(--margin);
  display:flex; align-items:center; gap:clamp(.8rem,2vw,2rem);
  /* Плотный белый, без прозрачности: под шапкой не должно
     просвечивать содержимое страницы. */
  background:var(--paper);
  border-bottom:1px solid var(--rule-hard);
}

/* ── Логотип с дескриптором ──
   Дескриптор уже логотипа, поэтому выключен по центру знака,
   а не по левому краю: иначе строка висит со сдвигом влево.
   Ширину задаём блоку, а не svg — тогда центрировать есть от чего. */
.masthead__logo{
  flex:0 0 auto; color:var(--ink); text-decoration:none;
  display:flex; flex-direction:column; align-items:center;
  width:clamp(112px,11vw,158px);
}
.masthead__logo svg{ width:100%; height:auto; }
.masthead__descriptor{
  display:block; margin-top:.34rem;
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45); white-space:nowrap;
  /* letter-spacing добавляет пробел после последней буквы —
     без компенсации строка кажется смещённой влево */
  text-indent:.2em;
}

/* ── Меню ── */
.masthead__nav{
  display:flex; align-items:center; gap:clamp(.9rem,2.2vw,2.2rem);
  font-size:var(--t-sm); font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  margin-right:auto;
}
.masthead__nav a{ text-decoration:none; position:relative; padding-block:.3rem; white-space:nowrap; }
.masthead__nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--ochre); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.masthead__nav a:hover::after,
.masthead__nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
/* текущий раздел подчёркнут постоянно */
.masthead__nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.masthead__actions{
  flex:0 0 auto; display:flex; align-items:stretch; gap:.4rem;
}

/* ── Курс доллара ──
   Моноширинный набор и tabular-nums: при обновлении курса
   блок не должен дёргать соседние кнопки сменой ширины. */
.fx{
  flex:0 0 auto; align-self:center;
  display:flex; flex-direction:column; align-items:flex-end;
  padding-right:.75rem; margin-right:.2rem;
  border-right:1px solid var(--rule);
  line-height:1.15; white-space:nowrap;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.fx__value{
  font-size:var(--t-sm); font-weight:500; color:var(--ink);
  letter-spacing:-.01em;
}
.fx__note{
  font-size:var(--t-2xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-45);
}
.fx.is-stale .fx__value{ color:var(--ink-45); }
.fx.is-fresh .fx__value{ animation:fx-blink .9s var(--ease); }
@keyframes fx-blink{ from{ color:var(--ochre) } to{ color:var(--ink) } }

/* квадратные кнопки — тот же язык, что и остальные кнопки */
.btn-icon{
  width:3rem; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  position:relative; overflow:hidden; text-decoration:none;
  font-family:var(--text); cursor:pointer; padding:0;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn-icon::before{
  content:""; position:absolute; inset:0; background:var(--ochre);
  transform:translateY(101%); transition:transform .42s var(--ease);
}
.btn-icon:hover::before,.btn-icon:focus-visible::before{ transform:translateY(0); }
.btn-icon:hover,.btn-icon:focus-visible{ color:var(--paper); border-color:var(--ochre); }
.btn-icon svg{ width:1.15rem; height:1.15rem; position:relative; z-index:1; fill:currentColor; flex:0 0 auto; }

/* ── Телефон быстрого набора ── */
.btn-icon--tel{
  width:auto; padding-inline:.95rem;
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.btn-icon--tel .btn-icon__num{
  position:relative; z-index:1;
  font-family:var(--mono); font-size:var(--t-sm); font-weight:500;
  letter-spacing:.01em; white-space:nowrap;
}
@media (max-width:1180px){
  .btn-icon--tel{ width:3rem; padding-inline:0 }
  .btn-icon--tel .btn-icon__num{ display:none }
}

/* ── Корзина ── */
.btn-icon--cart{ position:relative; }
.btn-icon--cart.is-filled{ border-color:var(--ochre); color:var(--ochre); }
.btn-icon--cart.is-filled:hover,
.btn-icon--cart.is-filled:focus-visible{ color:var(--paper); }
.btn-icon__badge{
  position:absolute; top:-1px; right:-1px; z-index:2;
  min-width:1.15rem; height:1.15rem; padding:0 .22rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ochre); color:var(--paper);
  font-family:var(--mono); font-size:.625rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.btn-icon__badge[hidden]{ display:none; }

/* ── Бургер ── */
.masthead__burger{
  display:none; width:3rem; flex:0 0 auto;
  align-items:center; justify-content:center;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; padding:0;
}
.masthead__burger i{
  display:block; width:1.05rem; height:1px; background:currentColor;
  position:relative; transition:background .2s var(--ease);
}
.masthead__burger i::before,
.masthead__burger i::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:currentColor;
  transition:transform .35s var(--ease);
}
.masthead__burger i::before{ top:-6px; }
.masthead__burger i::after{ top:6px; }
.masthead__burger[aria-expanded="true"] i{ background:transparent; }
.masthead__burger[aria-expanded="true"] i::before{ transform:translateY(6px) rotate(45deg); }
.masthead__burger[aria-expanded="true"] i::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1024px){
  .masthead{ flex-wrap:wrap; }
  .masthead__nav{
    order:3; width:100%; margin-right:0;
    display:none; flex-direction:column; align-items:flex-start; gap:0;
    border-top:1px solid var(--rule); margin-top:.85rem; padding-top:.35rem;
  }
  .masthead__nav.is-open{ display:flex; }
  .masthead__nav a{ width:100%; padding-block:.85rem; border-bottom:1px solid var(--rule); }
  .masthead__nav a::after{ display:none; }
  .masthead__actions{ margin-left:auto; }
  .masthead__burger{ display:inline-flex; }
}
@media (max-width:560px){
  /* Логотип с дескриптором встаёт по центру экрана; строка
     с курсом и иконками остаётся прижатой вправо, как была. */
  .masthead__logo{ margin-inline:auto }
  .masthead{ padding-inline:var(--margin); gap:.6rem }
  .masthead__logo svg{ width:104px }
  .masthead__descriptor{ font-size:.625rem; letter-spacing:.14em }
  .fx{ padding-right:.55rem }
  .btn-icon{ width:2.6rem }
  .masthead__burger{ width:2.6rem }
  /* МАКС уходит — на узкой шапке хватает Telegram, телефона и бургера,
     оба канала всё равно есть в панели приветствия */
  .btn-icon--max{ display:none }
}

/* ══════════════ КНОПКИ ══════════════ */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  appearance:none; border:1px solid var(--bd);
  background:var(--bg); color:var(--fg);
  font-family:var(--text); font-weight:600;
  font-size:var(--t-sm); letter-spacing:.05em; text-transform:uppercase;
  padding:.95rem 1.6rem; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  position:relative; overflow:hidden; text-align:center;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn > span{ position:relative; z-index:1; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ochre);
  transform:translateY(101%); transition:transform .42s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover,.btn:focus-visible{ color:var(--paper); border-color:var(--ochre); }
.btn--ochre{ --bg:var(--ochre); --bd:var(--ochre); }
.btn--ochre::before{ background:var(--ink); }
.btn--ochre:hover,.btn--ochre:focus-visible{ border-color:var(--ink); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); }
.btn--wide{ width:100%; }
.btn--sm{ padding:.72rem 1rem; font-size:var(--t-2xs); }

/* ══════════════ ЗАГОЛОВОК СЕКЦИИ ══════════════ */
.rule{
  grid-column:1 / 13;
  border-top:1px solid var(--rule-hard);
  padding-top:.65rem; margin-bottom:clamp(1.8rem,5vh,3.4rem);
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:var(--t-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45);
}
.rule b{ color:var(--ink); font-weight:500; }
@media (max-width:900px){ .rule{ grid-column:1 / 7 } }

/* ══════════════ МОДАЛЬНОЕ ОКНО ══════════════ */
.modal{
  border:1px solid var(--rule-hard); background:var(--paper); color:var(--ink);
  padding:0; width:min(30rem, calc(100vw - 2rem));
  box-shadow:16px 16px 0 var(--ink);
}
.modal::backdrop{ background:#11101099; backdrop-filter:blur(3px); }
.modal__inner{ padding:clamp(1.4rem,3.5vw,2.2rem); display:flex; flex-direction:column; gap:1rem; }
.modal__kicker{
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ochre);
}
.modal__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.35rem,3vw,1.9rem); line-height:1.05; letter-spacing:-.04em;
}
.modal__text{ font-size:var(--t-sm); line-height:1.55; color:var(--ink-70); }
.modal__subject{
  font-family:var(--mono); font-size:var(--t-xs); color:var(--ink);
  border-left:2px solid var(--ochre); padding-left:.7rem;
}
.modal__subject[hidden]{ display:none; }
.modal__close{
  position:absolute; top:.55rem; right:.55rem;
  width:2.4rem; height:2.4rem; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--ink-45); cursor:pointer;
  font-size:1.4rem; line-height:1; transition:color .3s var(--ease);
}
.modal__close:hover{ color:var(--ink); }

/* Поля модалки — светлые: форма заказа на главной стоит на чёрном
   и красит поля в белый, здесь фон бумажный. */
.modal form{ display:flex; flex-direction:column; gap:.9rem; }
.modal .mfield{ display:flex; flex-direction:column; gap:.35rem; }
.modal .mfield label{
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-45);
}
.modal .mfield label span{ color:var(--ochre); }
/* пометка необязательного поля — тише, чем звёздочка обязательного */
.modal .mfield label .mfield__opt{
  color:var(--ink-25); letter-spacing:.04em; text-transform:none;
}
.modal .mfield input{
  appearance:none; width:100%; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--ink-25);
  font-family:var(--text); font-size:var(--t-base); padding:.6rem 0;
  transition:border-color .3s var(--ease);
}
.modal .mfield input:focus{ outline:0; border-bottom-color:var(--ochre); }
.modal .mfield input::placeholder{ color:var(--ink-25); }
.modal .mfield.is-bad input{ border-bottom-color:#C0392B; }

.modal__agree{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:var(--t-xs); line-height:1.5; color:var(--ink-70); cursor:pointer;
}
.modal__agree input{
  appearance:none; width:1.05rem; height:1.05rem; flex:0 0 auto; margin-top:.15rem;
  border:1px solid var(--ink-25); background:transparent; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.modal__agree input:checked{ background:var(--ochre); border-color:var(--ochre); }
.modal__agree.is-bad input{ border-color:#C0392B; }
.modal__agree a{ color:var(--ochre); }

.modal__status{
  border:1px solid var(--ochre); background:var(--ochre-dim);
  padding:.9rem 1.05rem; font-size:var(--t-sm); line-height:1.5; display:none;
}
.modal__status.is-on{ display:block; }
.modal.is-sent form{ display:none; }

/* ══════════════ СОГЛАСИЕ НА COOKIE ══════════════ */
.cookies{
  position:fixed; z-index:9000;
  left:var(--margin); bottom:var(--margin);
  width:min(400px, calc(100vw - var(--margin) * 2));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule-hard);
  box-shadow:12px 12px 0 var(--ink);
  padding:1.35rem;
  display:flex; flex-direction:column; gap:.85rem;
  /* уезжает вниз за край экрана вместе с собственной тенью */
  transform:translateY(calc(100% + var(--margin) + 14px));
  opacity:0;
  transition:transform .75s var(--ease), opacity .5s var(--ease);
}
.cookies.is-in{ transform:none; opacity:1; }
.cookies[hidden]{ display:none; }
.cookies__title{
  font-family:var(--display); font-weight:600;
  font-size:1.02rem; letter-spacing:-.025em;
}
.cookies__text{ font-size:var(--t-sm); line-height:1.55; color:var(--ink-70); }
.cookies__actions{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.15rem; }
.cookies__actions .btn{ flex:1 1 auto; padding:.72rem 1rem; font-size:var(--t-2xs); }
@media (max-width:560px){
  .cookies{
    left:0; right:0; bottom:0; width:auto;
    border-left:0; border-right:0; border-bottom:0; box-shadow:none;
    transform:translateY(105%);
  }
}

/* ══════════════ СЕРТИФИКАТЫ ══════════════ */
.certs{
  grid-column:1 / 13;
  border-bottom:1px solid var(--rule);
  padding-bottom:clamp(1.6rem,4vh,2.6rem);
  margin-bottom:clamp(1.8rem,4vh,2.8rem);
}
.certs__label{
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-45);
  margin-bottom:1.4rem;
}
.certs__row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.5rem,4vw,3.4rem);
}
.certs__row img{
  /* Высота задана явно, а не auto: у большинства файлов нет
     атрибутов width/height, только viewBox. При height:auto
     браузеру не от чего считать размер и картинка схлопывается. */
  height:clamp(40px,4.4vw,54px);
  width:auto; max-width:150px;
  object-fit:contain;
  filter:grayscale(1) brightness(0); opacity:.42;
  transition:filter .4s var(--ease), opacity .4s var(--ease);
}
.certs__row li:hover img,
.certs__row a:focus-visible img{ filter:none; opacity:1; }
@media (max-width:900px){
  .certs{ grid-column:1 / 7 }
  .certs__row img{ height:38px; max-width:112px }
}

/* ══════════════ ПОДВАЛ ══════════════ */
.colophon{
  padding-block:clamp(2.5rem,6vh,4rem) 2rem;
  border-top:1px solid var(--rule-hard); align-items:end;
}
.colophon__logo{ grid-column:1 / 4; }
.colophon__logo svg{ width:clamp(110px,11vw,150px); height:auto; }
.colophon p{ grid-column:6 / 9; font-size:var(--t-xs); color:var(--ink-45); line-height:1.9; }
.colophon a{ color:var(--ink-70); }
.colophon a:hover{ color:var(--ochre); }
.colophon .fine{ grid-column:11 / 13; text-align:right; font-family:var(--mono); font-size:var(--t-2xs); color:var(--ink-25); }
@media (max-width:900px){
  .colophon__logo,.colophon p,.colophon .fine{ grid-column:1 / 7; text-align:left }
  .colophon p,.colophon .fine{ margin-top:1.4rem }
}

/* ══════════════ РАЗРЕЗАЕМЫЕ ЛИНИИ ══════════════ */
.is-cutting{ position:relative; }
.cutline{
  position:absolute; left:0; width:100%; height:60px;
  overflow:visible; pointer-events:none; z-index:6;
}

/* ══════════════ ДВИЖЕНИЕ ══════════════ */
.rise{
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto }
  .rise{ opacity:1; transform:none }
  .ticker ul{ animation:none }
  /* Лента изделий тоже замирает: полоса, ползущая сама по себе,
     для этой настройки — ровно то, от чего человек отказался.
     Кадры остаются на месте, их можно листать колесом. */
  .clothes__track{ animation:none }
  .clothes__strip{ overflow-x:auto }
}

/* ══════════════ КУРСОР-НОЖНИЦЫ ══════════════ */
.cursor{ display:none; }

@media (pointer:fine){
  html.has-cursor,
  html.has-cursor *{ cursor:none !important; }

  /* Поля и списки — исключение. Нативный <select> раскрывается
     средствами системы поверх страницы, и наши ножницы туда
     не дотягиваются: получалось, что курсора нет вообще.
     Здесь возвращаем системный, а ножницы прячет скрипт. */
  html.has-cursor select,
  html.has-cursor option,
  html.has-cursor input,
  html.has-cursor textarea{ cursor:revert !important; }
  html.has-cursor select{ cursor:pointer !important; }

  /* То же самое с модалкой: <dialog> открывается в top layer,
     а он лежит выше любого z-index — ножницы оказываются под ним.
     Пока окно открыто, работает системный курсор. */
  html.has-cursor.is-modal,
  html.has-cursor.is-modal *{ cursor:revert !important; }
  html.has-cursor.is-modal a,
  html.has-cursor.is-modal button,
  html.has-cursor.is-modal label,
  html.has-cursor.is-modal select{ cursor:pointer !important; }
  html.is-modal .cursor{ opacity:0; }

  .cursor{
    display:block;
    position:fixed; top:0; left:0; z-index:10000;
    width:34px; height:34px; margin:-17px 0 0 -17px;
    pointer-events:none; color:var(--ink);
    transform:translate3d(-120px,-120px,0);
    transition:opacity .25s var(--ease);
  }
  /* наклон живёт на внутреннем svg: на самом .cursor его нельзя —
     там лежит transform позиционирования, который пишет скрипт */
  .cursor svg{
    display:block; width:100%; height:100%; overflow:visible;
    transform:rotate(-32deg);
  }
  .cursor__blade{
    transform-origin:16px 19px;
    transition:transform .14s cubic-bezier(.34,1.56,.64,1);
  }
  .cursor.is-cut .cursor__blade--a{ transform:rotate(11deg); }
  .cursor.is-cut .cursor__blade--b{ transform:rotate(-11deg); }
  .cursor.is-light{ color:var(--paper); }
  .cursor.is-hidden{ opacity:0; }

  .cursor__blade path,
  .cursor__blade circle{
    stroke-dasharray:1; stroke-dashoffset:1;
    transition:stroke-dashoffset .85s var(--ease);
  }
  .cursor.is-drawn .cursor__blade path,
  .cursor.is-drawn .cursor__blade circle{ stroke-dashoffset:0; }
  .cursor__blade--b path,
  .cursor__blade--b circle{ transition-delay:.14s; }
  .cursor__blade circle{ transition-delay:.34s; }
  .cursor__blade--b circle{ transition-delay:.46s; }

  .cursor svg > circle{
    opacity:0; transform:scale(0); transform-origin:16px 19px;
    transition:opacity .3s var(--ease) .8s, transform .4s var(--ease) .8s;
  }
  .cursor.is-drawn svg > circle{ opacity:1; transform:none; }
}

::selection{ background:var(--ochre); color:var(--paper); }
:focus-visible{ outline:2px solid var(--ochre); outline-offset:3px; }
.skip{
  position:absolute; left:var(--margin); top:-5rem; z-index:1000;
  background:var(--ink); color:var(--paper); padding:.85rem 1.3rem;
  font-size:var(--t-sm); text-decoration:none; transition:top .3s var(--ease);
}
.skip:focus{ top:1rem; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ══════════════ ЧТО ШЬЮТ ИЗ НАШЕГО ПОЛОТНА ══════════════
   Раздел витринный: показывает применение ткани, но не продаёт
   изделия. Пометка об этом обязательна — иначе пойдут запросы
   цен на готовую одежду (ТЗ 5.3). */
/* Снизу отступ короче: лента идёт сразу за текстом и добирает
   воздух собственными полями. */
.clothes{ padding-block:var(--bay) clamp(1.4rem,4vh,2.4rem); }
.clothes__intro{ grid-column:1 / 5; }
.clothes__intro h2{
  font-family:var(--display); font-weight:600;
  font-size:var(--t-md); line-height:1.1; letter-spacing:-.03em; margin-bottom:.9rem;
}
.clothes__intro p{ font-size:var(--t-sm); color:var(--ink-70); max-width:32ch; }
.clothes__note{
  margin-top:1.1rem; border-left:2px solid var(--ochre); padding-left:.8rem;
  font-size:var(--t-xs); color:var(--ink-45);
}
.clothes__shot{
  aspect-ratio:3/4; background:var(--shade);
  box-shadow:inset 0 0 0 1px var(--rule);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-25);
}
.clothes__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.clothes__cap{ font-size:var(--t-2xs); color:var(--ink-45); }
@media (max-width:900px){
  .clothes__intro{ grid-column:1 / 7; margin-bottom:2.2rem }
}

/* ══════════════ ЦВЕТОВАЯ КАРТА ══════════════
   Вёрстка перенесена из итерации 2 без изменений (ТЗ 3.3). */
.colors{ padding-block:var(--bay); border-top:1px solid var(--rule-hard); }
/* Лента уже закрыта своей нижней линией — вторая рядом лишняя */
.clothes__strip + .colors{ border-top:0; }
.colors__intro{ grid-column:1 / 4; }
.colors__intro h3{
  font-family:var(--display); font-weight:600;
  font-size:var(--t-md); line-height:1.1; letter-spacing:-.03em; margin-bottom:.9rem;
}
/* Заголовок над сеткой оттенков (правка 30.09). Текст слева занимает
   оба ряда — заголовка и сетки, иначе его высота отодвинула бы
   футболки вниз от заголовка. */
.colors__title{
  grid-column:5 / 13;
  font-family:var(--display); font-weight:600;
  font-size:var(--t-lg); line-height:1.02; letter-spacing:-.04em;
  margin-bottom:clamp(1.2rem,3vh,2rem);
}
@media (min-width:901px){
  .colors .rule{ grid-row:1; }
  .colors__intro{ grid-row:2 / span 2; align-self:start; }
  .colors__title{ grid-row:2; }
  .swatches{ grid-row:3; }
}
.colors__intro p{ font-size:var(--t-sm); color:var(--ink-70); max-width:30ch; }
.colors__intro .warn{
  margin-top:1.1rem; border-left:2px solid var(--ochre); padding-left:.8rem;
  font-size:var(--t-xs); color:var(--ink-45);
}

.swatches{
  grid-column:5 / 13;
  display:grid; grid-template-columns:repeat(7,1fr); gap:var(--gutter);
}
@media (max-width:1280px){ .swatches{ grid-template-columns:repeat(6,1fr) } }
@media (max-width:900px){
  .colors__intro{ grid-column:1 / 7; margin-bottom:2.2rem }
  .colors__title{ grid-column:1 / 7; }
  .swatches{ grid-column:1 / 7; grid-template-columns:repeat(4,1fr) }
}
@media (max-width:520px){ .swatches{ grid-template-columns:repeat(3,1fr) } }

/* Раскрытие карты на телефоне (правка 29.09): в свёрнутом виде
   видно 12 оттенков — три ряда по четыре или четыре по три. */
.swatches__more{ display:none; }
@media (max-width:900px){
  .swatches:not(.is-open) .swatch:nth-child(n+13){ display:none; }
  .swatches__more{
    display:block; grid-column:1 / 7; justify-self:start; margin-top:1.6rem;
    appearance:none; background:none; border:0; padding:0 0 2px; cursor:pointer;
    font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.06em;
    color:var(--ink); border-bottom:1px solid var(--ochre);
  }
}

.swatch{
  appearance:none; border:0; padding:0; background:none;
  cursor:pointer; text-align:left; font-family:inherit;
  display:flex; flex-direction:column; gap:.45rem;
}
.swatch i{
  display:block; aspect-ratio:1/1; width:100%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px var(--rule);
  position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* галочка выбора — квадратная, охра */
.swatch i::before{
  content:""; position:absolute; z-index:2;
  right:0; top:0; width:0; height:0;
  border-style:solid; border-width:0 0 1.15rem 1.15rem;
  border-color:transparent transparent var(--ochre) transparent;
  transform:scale(0); transform-origin:bottom right;
  transition:transform .28s var(--ease);
}
.swatch[aria-pressed="true"] i::before{ transform:scale(1); }
.swatch[aria-pressed="true"] i{ box-shadow:inset 0 0 0 2px var(--ink); transform:scale(.94); }
.swatch:hover i{ transform:scale(.94); }

/* Образец цвета — футболка, а не квадрат (правка 28.09).
   Маска стоит постоянно, прежняя смена формы по наведению убрана:
   форма одна и та же и на компьютере, и на телефоне. */
.swatch{ touch-action:manipulation; }
.swatch i{
  -webkit-mask-image:url(../img/tshirt.svg); mask-image:url(../img/tshirt.svg);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-size:contain;      mask-size:contain;
  /* рамка и уголок выбора маской всё равно срезаются */
  box-shadow:none;
}
.swatch i::before{ display:none; }
.swatch:focus-visible i{ outline:2px solid var(--ochre); outline-offset:3px; }
.swatch em{
  font-family:var(--mono); font-size:var(--t-2xs); font-style:normal;
  letter-spacing:.04em; color:var(--ink);
}
/* Пантон под номером — тоже код, поэтому моноширинный.
   Приглушён: первым читается номер палитры, по нему заказывают. */
.swatch b{
  font-family:var(--mono); font-size:var(--t-2xs); font-weight:400;
  line-height:1.2; letter-spacing:.02em; color:var(--ink-45);
  margin-top:-.2rem;
}

.colors__bar{
  grid-column:5 / 13; margin-top:clamp(1.6rem,4vh,2.6rem);
  border-top:1px solid var(--rule-hard); padding-top:1rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.colors__bar p{ font-family:var(--mono); font-size:var(--t-xs); color:var(--ink-45); }
.colors__bar p b{ color:var(--ink); font-weight:500; }
@media (max-width:900px){ .colors__bar{ grid-column:1 / 7 } }
/* ══════════════ ВЫБОР ПОЛОТНА ПОД ЦВЕТ ══════════════
   Открывается кликом по оттенку в цветовой карте. Цвет к ткани
   не привязан, поэтому сначала спрашиваем полотно, а потом уводим
   в его карточку с уже выбранным номером. */
.pick__list{
  margin-top:1.1rem; max-height:52vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:1.1rem;
}
.pick__group{ display:flex; flex-direction:column; gap:.2rem; }
.pick__type{
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:.25rem;
}
.pick__item{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.55rem .7rem; text-decoration:none; color:var(--ink);
  font-size:var(--t-sm); border:1px solid transparent;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.pick__item span{ font-family:var(--mono); font-size:var(--t-2xs); color:var(--ink-45); white-space:nowrap; }
.pick__item:hover,
.pick__item:focus-visible{ border-color:var(--ochre); background:var(--ochre-dim); }
.pick__fail{ font-size:var(--t-sm); color:var(--ink-70); margin-top:1rem; }

/* Кружок выбранного цвета в шапке диалога */
#pick-code{ font-family:var(--mono); color:var(--ink); }
/* ── Лента изделий ──
   Во всю ширину экрана, поэтому живёт вне сетки .bay.
   Шаг --step и длительность --dur ставит скрипт: он меряет
   фактическую ширину одного набора и доклеивает копии, пока
   ленты не хватит на экран плюс шаг. */
.clothes__strip{
  overflow:hidden;
  border-block:1px solid var(--rule-hard);
  padding-block:clamp(1.2rem,3vh,2rem);
}
.clothes__track{
  display:flex; width:max-content; margin:0; padding:0; list-style:none;
  animation:slide var(--dur,70s) linear infinite;
}
/* Пауза при наведении: на ходу кадр не рассмотреть */
.clothes__strip:hover .clothes__track,
.clothes__strip:focus-within .clothes__track{ animation-play-state:paused; }

.clothes__track li{
  flex:0 0 auto;
  width:clamp(15rem, 22vw, 22rem);
  padding-right:var(--gutter);
  display:flex; flex-direction:column; gap:.6rem;
}
.clothes__shot{
  aspect-ratio:3/4; background:var(--shade);
  box-shadow:inset 0 0 0 1px var(--rule);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-25);
}
.clothes__shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.clothes__cap{ font-size:var(--t-2xs); color:var(--ink-45); }

/* Блок с текстом перестал делить строку с плитками — тексту
   можно отдать нормальную колонку, а не четверть сетки. */
.clothes__intro{ grid-column:1 / 7; }
@media (max-width:900px){ .clothes__intro{ grid-column:1 / 7 } }
/* Номер телефона не разрывается посреди строки: «+7 (985)»
   на одной строке, а «028-90-43» на другой читается как два
   разных номера. */
a[href^="tel:"]{ white-space:nowrap; }

/* ══════════════ ЛОГОТИП-ЭМБЛЕМА ══════════════
   Новый знак круглый и растровый (PNG с прозрачным фоном,
   вектора у заказчика нет). В шапке эмблема и дескриптор
   стоят в строку: под круглым знаком подпись висит криво. */
.masthead__logo{ flex-direction:row; align-items:center; gap:.7rem; width:auto; }
.masthead__logo img{ width:56px; height:56px; display:block; flex:0 0 auto; }
.masthead__descriptor{ margin-top:0; text-indent:0; }
.preloader__logo{ width:clamp(120px,14vw,160px); }
.preloader__logo img{ width:100%; height:auto; display:block; }
.colophon__logo img{ width:clamp(88px,9vw,120px); height:auto; display:block; }
@media (max-width:560px){
  .masthead__logo img{ width:46px; height:46px; }
}

/* ══════════════ ПРАВКИ 24.09 ══════════════
   Шрифты, тёмная шапка и подвал. Собраны одним блоком в конце
   файла: видно, что изменилось в этом раунде, и правки снимаются
   целиком, не задевая исходных правил. */
/* Шапка и подвал чёрные (правка заказчика 25.09): берём тот же
   чёрный, что и в тексте сайта, а не отдельный оттенок. */
:root{ --graphite:#111010; }

/* ── Информационный текст жирнее (ТЗ главная 1) ──
   Golos Text подключён с весами 400–700, поэтому 500 и 600
   настоящие, а не синтетические. Заголовки не трогаем. */
body{ font-weight:500; }
.hero__lede,
.about__text p,
.colors__intro p,
.clothes__intro p,
.perk p,
.offer__text,
.cat__note-text{ font-weight:500; }
.pcard__spec dd,
.prod__spec dd,
.contacts__list dd,
.crow__spec{ font-weight:600; }

/* ── Тёмно-графитовая шапка, логотип крупнее (ТЗ главная 2) ── */
.masthead{
  background:var(--graphite); color:var(--paper);
  border-bottom-color:var(--graphite);
  padding-block:1.1rem;
}
.masthead__logo{ color:var(--paper); }
.masthead__logo img{ width:84px; height:84px; }

/* Кнопкам в шапке не хватало высоты: строка растягивалась по
   содержимому, и квадрат превращался в узкую полоску, из которой
   значок вылезал (правка 28.09). Задаём высоту явно. */
.masthead__actions{ align-items:center; }
.btn-icon{ height:3rem; }
.masthead__burger{ height:3rem; }
/* Значки Telegram и MAX крупнее (правка 29.09): их рамки подрезаны
   по самим знакам, и размер чуть больше, чем у телефона и корзины. */
.btn-icon[data-chat] svg{ width:1.4rem; height:1.4rem; }

/* Счётчик корзины срезался краем кнопки: он висел на −1 px,
   а у кнопки включено обрезание ради заливки при наведении.
   Уводим его внутрь и уменьшаем, чтобы не закрывал значок. */
/* Счётчик корзины вынесен за угол кнопки, иначе он ложился прямо
   на значок. Обрезка кнопке больше не нужна: заливка при наведении
   теперь растёт снизу вверх (scaleY) и за края не выходит. */
.btn-icon{ overflow:visible; }
.btn-icon::before{ transform:scaleY(0); transform-origin:bottom; }
.btn-icon:hover::before,
.btn-icon:focus-visible::before{ transform:scaleY(1); }
.btn-icon__badge{
  top:-5px; right:-5px;
  min-width:.95rem; height:.95rem; padding:0 .16rem;
  font-size:.52rem; letter-spacing:0;
  /* кольцо цветом шапки отделяет счётчик от рамки кнопки */
  box-shadow:0 0 0 2px var(--graphite);
}
.masthead__nav a{ color:var(--paper); }
.masthead__burger{ border-color:#ffffff4d; color:var(--paper); }
.btn-icon{ border-color:#ffffff4d; color:var(--paper); }
.btn-icon:hover,
.btn-icon:focus-visible{ color:var(--paper); border-color:var(--ochre); }
.btn-icon--tel{ background:var(--ochre); border-color:var(--ochre); color:var(--ink); }
.btn-icon--tel:hover,
.btn-icon--tel:focus-visible{ color:var(--paper); }
@media (max-width:1024px){
  .masthead__nav{ border-top-color:#ffffff26; }
  .masthead__nav a{ border-bottom-color:#ffffff26; }
}
@media (max-width:560px){
  /* Значок MAX на телефоне возвращён (ТЗ главная 3) */
  .btn-icon--max{ display:inline-flex; }
  /* Логотип на телефоне крупнее (правка 28.09). Центрирование
     автоотступами снято: с крупным знаком оно съедало место,
     и корзина с бургером уходили за правый край экрана. */
  .masthead__logo{ margin-inline:0; }
  .masthead__logo img{ width:76px; height:76px; }
  .btn-icon,
  .masthead__burger{ height:2.6rem; }
}

/* Подвал прижат к низу экрана на коротких страницах (правка 25.09):
   в списке запроса с одной позицией он подлетал к содержимому,
   а под ним оставалось пустое поле. */
body{ min-height:100svh; display:flex; flex-direction:column; }
body > main{ flex:1 0 auto; }
body > footer{ flex:0 0 auto; }

/* ── Тёмно-графитовый подвал (ТЗ каталог 10) ── */
.colophon{
  background:var(--graphite); color:var(--paper);
  border-top-color:var(--graphite);
}
.colophon p{ color:#ffffffb3; }
.colophon a{ color:var(--paper); }
.colophon a:hover{ color:var(--ochre); }
.colophon .fine{ color:#ffffff73; }
.certs{ border-bottom-color:#ffffff26; }
.certs__label{ color:#ffffff8c; }
/* Логотипы сертификатов лежат чёрными файлами: на тёмном фоне их
   нужно вывернуть в белое, иначе они просто исчезнут. */
.certs__row img{ filter:grayscale(1) brightness(0) invert(1); opacity:.6; }
.certs__row li:hover img,
.certs__row a:focus-visible img{ filter:grayscale(1) brightness(0) invert(1); opacity:1; }

/* ══════════════ ДОСТАВКА И ОПЛАТА ══════════════
   Подача по референсу заказчика, переложенная на наш стиль
   (правка 29.09): у каждой группы подзаголовок с охристой планкой
   слева и чертой снизу, условия — карточками в две колонки,
   номер стоит в тёмной квадратной плашке. Скругления и красный
   цвет образца заменены на наши прямые углы и охру. */
.delivery{ padding-block:var(--bay); }

.delivery__intro{ grid-column:1 / 13; }
.delivery__intro h2{
  font-family:var(--display); font-weight:600;
  font-size:var(--t-lg); line-height:1.02; letter-spacing:-.04em;
  margin-bottom:.9rem;
}
.delivery__intro h2 em{ font-style:normal; color:var(--ochre); }
.delivery__intro p{ font-size:var(--t-base); line-height:1.6; color:var(--ink-70); max-width:52ch; }

.dgroup{ grid-column:1 / 13; margin-top:clamp(2.2rem,5vh,3.2rem); }
.dgroup__title{
  position:relative; display:inline-block;
  padding:0 0 .7rem .9rem; margin-bottom:1.4rem;
  font-family:var(--display); font-weight:600;
  font-size:var(--t-md); line-height:1.1; letter-spacing:-.03em;
}
/* планка слева от слова */
.dgroup__title::before{
  content:""; position:absolute; left:0; top:.12em;
  width:3px; height:1em; background:var(--ochre);
}
/* короткая черта под заголовком */
.dgroup__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:4.5rem; height:2px; background:var(--ochre);
}

.dgroup__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter);
}
.ditem{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  background:var(--shade); padding:clamp(1.1rem,2vw,1.6rem);
  border:1px solid var(--rule);
}
.ditem__no{
  width:2.4rem; height:2.4rem; display:grid; place-items:center;
  background:var(--ink); color:var(--ochre);
  font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.02em;
}
.ditem__title{
  font-family:var(--display); font-weight:600; font-size:var(--t-base);
  line-height:1.25; letter-spacing:-.02em; margin:.15rem 0 .45rem;
}
.ditem__text{ font-size:var(--t-sm); line-height:1.6; color:var(--ink-70); }

@media (max-width:900px){
  .delivery__intro,
  .dgroup{ grid-column:1 / 7; }
  .dgroup__list{ grid-template-columns:1fr; }
}

/* ══════════════ ФОТО СКЛАДА ══════════════
   ТЗ главная 19: снимок под блоком с адресом. Пока стоит заглушка
   в том же виде, что и плитки «что шьют» — когда придёт фотография,
   внутрь figure кладётся <img> и заглушка удаляется. */
.contacts__photo{ grid-column:1 / -1; margin:1.6rem 0 0; }
/* Фотография склада и карта стоят в одну строку (правка 25.09):
   обе во втором ряду, высоту задаёт квадрат карты. */
@media (min-width:901px){
  /* Ряды закреплены явно: иначе карта с фотографией поднимались
     над списком контактов, а заголовок раздела уезжал под них. */
  .contacts .rule{ grid-row:1; }
  .contacts__list{ grid-row:2; }
  .contacts__photo{ grid-column:1 / 9; grid-row:3; align-self:stretch; margin-top:2.2rem; }
  .contacts__map{ grid-row:3; margin-top:2.2rem; }
  .contacts__photo-ph{ aspect-ratio:auto; height:100%; }
  .contacts__photo img{ height:100%; object-fit:cover; }
}
.contacts__photo-ph{
  aspect-ratio:16/7; background:var(--shade);
  box-shadow:inset 0 0 0 1px var(--rule);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:var(--t-2xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-25);
}
.contacts__photo img{ width:100%; height:auto; display:block; }

/* ══════════════════════════════════════════════════════
   HERO — COMMERCIAL PROOF STRIP
   500+ тонн / 25+ лет / 88 цветов / 0 посредников
   ══════════════════════════════════════════════════════ */

.hero__proof{
  display:flex;
  align-items:stretch;

  width:max-content;
  max-width:100%;
  margin-top:.25rem;

  border-top:1px solid rgba(17,16,16,.30);
  border-bottom:1px solid rgba(17,16,16,.30);

  opacity:0;
  transform:translateY(18px);

  animation:proofEnter .8s .75s cubic-bezier(.16,1,.3,1) forwards;
}


/* ── Her istatistik kutusu ── */

.hero__proof-item{
  position:relative;

  display:flex;
  align-items:center;
  gap:.65rem;

  padding:.9rem 1.25rem;

  border-right:1px solid rgba(17,16,16,.20);

  cursor:default;

  transition:
    background .3s ease,
    transform .3s cubic-bezier(.16,1,.3,1);
}

.hero__proof-item:first-child{
  padding-left:0;
}

.hero__proof-item:last-child{
  border-right:0;
}


/* ── Büyük rakamlar ── */

.hero__proof strong{
  position:relative;

  font-family:var(--display);
  font-weight:600;

  font-size:clamp(1.35rem,1.8vw,1.8rem);
  line-height:.9;

  letter-spacing:-.045em;

  color:var(--ochre);

  font-variant-numeric:tabular-nums;

  transition:
    transform .3s cubic-bezier(.16,1,.3,1),
    color .3s ease;

  animation:proofNumber .65s cubic-bezier(.16,1,.3,1) both;
}


/* ── + işareti ── */

.hero__proof strong sup{
  position:relative;
  top:-.3em;

  margin-left:.05em;

  font-family:var(--mono);
  font-size:.42em;
  font-weight:500;

  color:var(--ink);
}


/* ── Açıklamalar ── */

.hero__proof span{
  font-family:var(--mono);

  font-size:clamp(.52rem,.6vw,.62rem);
  font-weight:500;

  line-height:1.35;

  letter-spacing:.075em;
  text-transform:uppercase;

  color:var(--ink-70);

  white-space:nowrap;
}


/* ── Hover efekti ── */

.hero__proof-item:hover{
  background:rgba(183,135,65,.09);
}

.hero__proof-item:hover strong{
  transform:translateY(-3px) scale(1.07);
}


/* ── Hover sırasında alttan çıkan altın çizgi ── */

.hero__proof-item::after{
  content:"";

  position:absolute;

  left:1.25rem;
  right:1.25rem;
  bottom:-1px;

  height:2px;

  background:var(--ochre);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .45s cubic-bezier(.16,1,.3,1);
}

.hero__proof-item:first-child::after{
  left:0;
}

.hero__proof-item:hover::after{
  transform:scaleX(1);
}


/* ── Strip giriş animasyonu ── */

@keyframes proofEnter{
  0%{
    opacity:0;
    transform:translateY(20px);
    filter:blur(5px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}


/* ── Rakamların sırayla gelişi ── */

.hero__proof-item:nth-child(1) strong{
  animation-delay:.95s;
}

.hero__proof-item:nth-child(2) strong{
  animation-delay:1.05s;
}

.hero__proof-item:nth-child(3) strong{
  animation-delay:1.15s;
}

.hero__proof-item:nth-child(4) strong{
  animation-delay:1.25s;
}

@keyframes proofNumber{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.88);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


/* ══════════════════════════════════════════════
   TABLET
   ══════════════════════════════════════════════ */

@media(max-width:1100px){

  .hero__proof-item{
    padding:.8rem .85rem;
    gap:.45rem;
  }

  .hero__proof span{
    font-size:.5rem;
  }

}


/* ══════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════ */

@media(max-width:650px){

  .hero__proof{
    display:grid;
    grid-template-columns:1fr 1fr;

    width:100%;

    border-bottom:0;
  }

  .hero__proof-item{
    min-height:68px;

    padding:.8rem .7rem;

    border-right:1px solid rgba(17,16,16,.18);
    border-bottom:1px solid rgba(17,16,16,.25);
  }

  .hero__proof-item:nth-child(2n){
    border-right:0;
  }

  .hero__proof-item:first-child{
    padding-left:.7rem;
  }

  .hero__proof-item::after{
    left:.7rem;
    right:.7rem;
  }

  .hero__proof-item:first-child::after{
    left:.7rem;
  }

  .hero__proof strong{
    font-size:1.35rem;
  }

  .hero__proof span{
    font-size:.48rem;
  }

}


/* ══════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════ */

@media(prefers-reduced-motion:reduce){

  .hero__proof{
    opacity:1;
    transform:none;
    animation:none;
  }

  .hero__proof-item strong{
    opacity:1;
    transform:none;
    animation:none;
  }

  .hero__proof-item,
  .hero__proof strong,
  .hero__proof-item::after{
    transition:none;
  }

}

/* ════════════════════════════════════════════════════════════
   SALTEKS — PREMIUM GLOBAL B2B SALES STRIP
   DESKTOP + TABLET + MOBILE
   ════════════════════════════════════════════════════════════ */

.sales-strip{

  --ss-gold:#b78741;
  --ss-gold-light:#e5bd78;
  --ss-black:#111010;

  position:relative;
  z-index:20;

  width:100%;

  background:
    linear-gradient(
      115deg,
      #111010 0%,
      #1b1814 48%,
      #111010 100%
    );

  color:#fff;

  border-top:1px solid rgba(183,135,65,.25);
  border-bottom:1px solid rgba(183,135,65,.45);

  overflow:hidden;

  box-sizing:border-box;

}


/* INNER LAYOUT */

.sales-strip__inner{

  position:relative;
  z-index:2;

  width:100%;

  min-height:72px;

  padding:12px clamp(18px,3.5vw,65px);

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:24px;

  box-sizing:border-box;

}


/* LEFT SIDE */

.sales-strip__info{

  display:flex;
  align-items:center;

  gap:22px;

  min-width:0;

  flex-shrink:1;

}


/* STOCK INDICATOR */

.sales-strip__stock{

  display:flex;
  align-items:center;

  gap:13px;

  white-space:nowrap;

}


/* ANIMATED STOCK DOT */

.sales-strip__pulse{

  position:relative;

  display:block;

  width:10px;
  height:10px;

  flex:0 0 10px;

  border-radius:50%;

  background:#d5a65c;

  box-shadow:0 0 12px rgba(213,166,92,.8);

}


.sales-strip__pulse::after{

  content:"";

  position:absolute;
  inset:-7px;

  border:1px solid rgba(213,166,92,.8);

  border-radius:50%;

  animation:saltexStockPulse 2.2s ease-out infinite;

}


@keyframes saltexStockPulse{

  0%{
    transform:scale(.5);
    opacity:1;
  }

  70%{
    transform:scale(1.45);
    opacity:0;
  }

  100%{
    transform:scale(1.45);
    opacity:0;
  }

}


/* STOCK TEXT */

.sales-strip__stock-text{

  display:flex;
  flex-direction:column;

  gap:3px;

  font-family:var(--mono,monospace);

  font-size:10px;

  font-weight:600;

  letter-spacing:.12em;

  line-height:1.2;

}


.sales-strip__stock-text strong{

  color:var(--ss-gold-light);

  font-family:var(--display,sans-serif);

  font-size:17px;

  font-weight:700;

  letter-spacing:-.02em;

}


.sales-strip__stock-text > span{

  color:#d2c9bb;

}


/* DIVIDER */

.sales-strip__divider{

  display:block;

  width:1px;
  height:32px;

  flex:0 0 1px;

  background:linear-gradient(
    to bottom,
    transparent,
    rgba(183,135,65,.6),
    transparent
  );

}


/* MANUFACTURER MESSAGE */

.sales-strip__manufacturer{

  display:flex;
  align-items:center;

  gap:10px;

  color:#d7d0c5;

  font-family:var(--mono,monospace);

  font-size:10px;

  font-weight:600;

  letter-spacing:.08em;

  line-height:1.5;

  white-space:nowrap;

}


.sales-strip__star{

  color:var(--ss-gold-light);

  font-size:20px;

  animation:saltexStar 5s ease-in-out infinite;

}


@keyframes saltexStar{

  0%,100%{
    transform:rotate(0deg);
    opacity:.65;
  }

  50%{
    transform:rotate(90deg);
    opacity:1;
  }

}


/* ACTIONS */

.sales-strip__actions{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:9px;

  flex-wrap:wrap;

}


/* BUTTON BASE */

.sales-strip__btn{

  position:relative;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:14px;

  min-height:42px;

  padding:0 18px;

  border-radius:0;

  font-family:var(--mono,monospace);

  font-size:10px;

  font-weight:700;

  letter-spacing:.04em;

  line-height:1.3;

  white-space:nowrap;

  cursor:pointer;

  overflow:hidden;

  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;

}


/* GOLD PRIMARY CTA */

.sales-strip__btn--gold{

  background:var(--ss-gold);

  color:#111010;

  border:1px solid var(--ss-gold);

  box-shadow:0 4px 18px rgba(183,135,65,.18);

}


.sales-strip__btn--gold:hover{

  background:var(--ss-gold-light);

  border-color:var(--ss-gold-light);

  transform:translateY(-2px);

  box-shadow:0 7px 25px rgba(183,135,65,.35);

}


/* LIGHT SWEEP */

.sales-strip__btn--gold::before{

  content:"";

  position:absolute;

  top:-50%;
  left:-90%;

  width:55%;
  height:200%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.42),
    transparent
  );

  transform:skewX(-25deg);

  animation:saltexButtonShine 6s ease-in-out infinite;

  pointer-events:none;

}


@keyframes saltexButtonShine{

  0%,65%{
    left:-90%;
  }

  90%,100%{
    left:150%;
  }

}


/* SAMPLE REQUEST */

.sales-strip__btn--outline{

  background:transparent;

  color:var(--ss-gold-light);

  border:1px solid rgba(183,135,65,.75);

}


.sales-strip__btn--outline:hover{

  background:var(--ss-gold);

  color:#111010;

  border-color:var(--ss-gold);

  transform:translateY(-2px);

}


/* ARROWS */

.sales-strip__arrow{

  display:inline-block;

  font-size:15px;

  font-weight:700;

  transition:transform .25s ease;

}


.sales-strip__btn:hover .sales-strip__arrow,
.sales-strip__route:hover .sales-strip__arrow{

  transform:translate(3px,-3px);

}


/* ROUTE BUTTON */

.sales-strip__route{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:9px;

  min-height:42px;

  padding:0 12px;

  color:#eee7db;

  background:transparent;

  border:1px solid transparent;

  text-decoration:none;

  font-family:var(--mono,monospace);

  font-size:10px;

  font-weight:600;

  letter-spacing:.04em;

  white-space:nowrap;

  transition:color .3s ease,background .3s ease;

}


.sales-strip__route svg{

  width:16px;
  height:16px;

  flex:0 0 16px;

  color:var(--ss-gold-light);

}


.sales-strip__route:hover{

  color:var(--ss-gold-light);

  background:rgba(183,135,65,.08);

}


/* BACKGROUND LIGHT EFFECT */

.sales-strip__shine{

  position:absolute;

  top:0;
  bottom:0;

  left:-35%;

  width:35%;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(183,135,65,.055),
    transparent
  );

  transform:skewX(-20deg);

  animation:saltexStripShine 12s linear infinite;

  pointer-events:none;

}


@keyframes saltexStripShine{

  from{
    left:-35%;
  }

  to{
    left:135%;
  }

}


/* ═══════════════════════════════
   LAPTOP
   ═══════════════════════════════ */

@media(max-width:1350px){

  .sales-strip__inner{
    gap:15px;
    padding:12px 24px;
  }

  .sales-strip__info{
    gap:13px;
  }

  .sales-strip__manufacturer{
    font-size:9px;
  }

  .sales-strip__btn{
    padding:0 12px;
    font-size:9px;
  }

  .sales-strip__route{
    font-size:9px;
  }

}


/* ═══════════════════════════════
   TABLET
   ═══════════════════════════════ */

@media(max-width:1100px){

  .sales-strip__inner{

    flex-direction:column;

    align-items:stretch;

    gap:13px;

    padding:14px 20px;

  }

  .sales-strip__info{

    justify-content:center;

  }

  .sales-strip__actions{

    justify-content:center;

  }

}


/* ═══════════════════════════════
   MOBILE
   ═══════════════════════════════ */

@media(max-width:650px){

  .sales-strip__inner{

    padding:14px 12px;

    gap:13px;

  }

  .sales-strip__info{

    gap:12px;

    justify-content:center;

  }

  .sales-strip__stock{

    gap:9px;

  }

  .sales-strip__stock-text strong{

    font-size:15px;

  }

  .sales-strip__stock-text{

    font-size:8px;

  }

  .sales-strip__manufacturer{

    font-size:8px;

    white-space:normal;

    max-width:150px;

  }

  .sales-strip__star{

    font-size:16px;

  }

  .sales-strip__divider{

    height:26px;

  }

  .sales-strip__actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    width:100%;

  }

  .sales-strip__btn--gold{

    grid-column:1 / -1;

  }

  .sales-strip__btn{

    min-height:43px;

    padding:0 8px;

    font-size:9px;

    gap:6px;

  }

  .sales-strip__route{

    min-height:43px;

    padding:0 5px;

    font-size:9px;

    gap:5px;

    border:1px solid rgba(183,135,65,.3);

  }

  .sales-strip__route svg{

    width:13px;
    height:13px;

    flex-basis:13px;

  }

  .sales-strip__arrow{

    font-size:12px;

  }

}


/* ═══════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════ */

@media(prefers-reduced-motion:reduce){

  .sales-strip *,
  .sales-strip *::before,
  .sales-strip *::after{

    animation:none!important;

    transition:none!important;

  }

}

/* SALTEKS — FOOTER METRIKA */

.salteks-metrika {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    padding: 20px;

    background: #0d0d0d;
    border-top: 1px solid rgba(183,135,65,.25);
}

.salteks-metrika__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #b78741;
}

.salteks-metrika img {
    display: block;
    width: 88px;
    height: 31px;
    object-fit: contain;
    opacity: .85;
    transition: opacity .3s ease;
}

.salteks-metrika img:hover {
    opacity: 1;
}

@media(max-width:600px) {
    .salteks-metrika {
        gap: 10px;
        padding: 15px;
    }

    .salteks-metrika__label {
        font-size: 8px;
        letter-spacing: 1px;
    }
}