@import url('fonts.css');

/* Язык бренда снят с действующего сайта клиента: кремовый фон, песочные градиенты,
   крупные скругления, чёрные кнопки-пилюли, гротеск, коралловый акцент. */
:root{
  --cream:#fff6f0;
  --cream-2:#fdece1;
  --sand-1:#f6e6d5;
  --sand-2:#dfc0a2;
  --ink:#111111;
  --ink-2:#4a423d;
  --muted:#8b7f76;
  --line:#ece0d6;
  --coral:#f95d51;
  --white:#ffffff;
  --shadow-soft:0 20px 50px -30px rgba(70,45,25,.45);
  --shadow-card:0 14px 34px -24px rgba(70,45,25,.5);
  --r-xl:40px;
  --r-lg:28px;
  --r:20px;
  --r-sm:14px;
  --pill:999px;
  --sans:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap:1280px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--cream); color:var(--ink);
  font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-weight:600; letter-spacing:-.02em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* шапка */
.top{position:sticky; top:0; z-index:30; background:rgba(255,246,240,.92); backdrop-filter:blur(12px)}
.top__in{display:flex; align-items:center; gap:26px; height:78px}
.top__logo{height:32px; width:auto}
.nav{display:flex; gap:6px; margin-left:auto; font-size:15px; font-weight:500}
.nav a{color:var(--ink-2); padding:9px 14px; border-radius:var(--pill); transition:background .25s, color .25s}
.nav a:hover{background:var(--cream-2); color:var(--ink)}
.nav a.accent{background:var(--ink); color:var(--cream)}
.nav a.accent:hover{background:#2a2523}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border:0; border-radius:var(--pill); background:var(--ink); color:var(--cream);
  font:600 15px/1 var(--sans); cursor:pointer; transition:transform .2s, background .25s, box-shadow .25s}
.btn:hover{background:#2a2523; transform:translateY(-1px); box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}
.btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.18)}
.btn--ghost:hover{background:rgba(17,17,17,.06); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.4)}
.btn--light{background:var(--white); color:var(--ink)}

/* первый экран */
.hero{padding:18px 0 6px}
.hero__card::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('../img/brand/texture-kraft.webp') center/cover; opacity:.22; mix-blend-mode:multiply}
.hero__card{position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(118deg, var(--sand-1) 0%, #efd7be 46%, var(--sand-2) 100%);
  box-shadow:var(--shadow-soft);
  display:grid; grid-template-columns:1.02fr .98fr; align-items:end; min-height:560px}
.hero__text{padding:66px 20px 66px 60px; position:relative; z-index:2}
.hero__eyebrow{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.62);
  border-radius:var(--pill); padding:9px 18px; font-size:13px; font-weight:600; color:#6b4f33; margin:0 0 24px}
.hero h1{font-size:clamp(36px,4.8vw,62px); line-height:1.03; margin:0 0 18px; color:#231a12}
.hero__lead{font-size:18px; line-height:1.55; color:#54402f; max-width:30em; margin:0 0 30px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__model{position:relative; align-self:end; padding:0 40px 0 0; z-index:2}
.hero__model img{width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 30px 45px rgba(60,35,15,.35))}
.hero__mark{position:absolute; right:-40px; top:-70px; width:min(46%,420px); opacity:.14; z-index:1;
  mix-blend-mode:multiply; pointer-events:none}

/* цифры */
.facts{margin-top:14px}
.facts__in{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.fact{background:var(--white); border-radius:var(--r); padding:24px; box-shadow:var(--shadow-card)}
.fact b{display:block; font-size:32px; font-weight:700; letter-spacing:-.03em; margin-bottom:4px}
.fact span{font-size:14px; color:var(--muted)}

/* секции */
.sec{padding-top:44px; padding-bottom:44px}   /* было 66: между соседними секциями получалось 132 px пустоты */
/* ⛔ Только вертикальные поля, НЕ сокращённый padding: `.sec` висит вместе с `.wrap`, и «padding:44px 0»
   обнулял её боковые поля. На десктопе это прятал max-width, на телефоне текст и баннеры упирались в край (24.09). */
.sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px}
.sec h2{font-size:clamp(28px,3.4vw,42px); line-height:1.08; margin:0}
.sec__note{color:var(--muted); font-size:15px; max-width:42ch}

.cats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.cat{position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-lg);
  background:var(--white); box-shadow:var(--shadow-card)}
.cat img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cat:hover img{transform:scale(1.05)}
.cat__label{position:absolute; inset:auto 14px 14px 14px; padding:15px 18px; border-radius:var(--r);
  background:rgba(255,246,240,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.cat__label b{font-size:18px; font-weight:600}
.cat__label span{font-size:13px; color:var(--muted); white-space:nowrap}

/* товары */
.goods{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.goods > *{min-width:0}
.card{display:block; background:var(--white); border-radius:var(--r-lg); padding:14px 14px 18px;
  box-shadow:var(--shadow-card); transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(70,45,25,.6)}
.card__ph{position:relative; aspect-ratio:3/4; background:var(--cream); border-radius:var(--r-sm);
  overflow:hidden; margin-bottom:14px}
.card__img{position:absolute; inset:0; display:block}
.card__ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__ph img{transform:scale(1.04)}
/* вторая фотография проявляется при наведении, если она у товара есть */
.card__img--alt{opacity:0; transition:opacity .45s ease}
.card:hover .card__img--alt{opacity:1}
.card__dot{position:absolute; left:10px; top:10px; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(70,45,25,.35)}
.card__sizes{color:var(--ink-2); font-weight:500}
.card__name{font-size:15px; font-weight:600; line-height:1.3; margin:0 0 5px; padding:0 4px}
.card__meta{font-size:13px; color:var(--muted); padding:0 4px; margin:0}
.card__price{margin:9px 4px 0; font-size:13px; font-weight:600; color:var(--coral)}

/* полоса про опт */
.band{padding:0 0 46px}
.band__in{border-radius:var(--r-xl); overflow:hidden; background:var(--ink); color:#f3ece6;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center}
.band__text{padding:54px 50px}
.band h2{font-size:clamp(26px,3.2vw,38px); margin:0 0 14px; color:#fff}
.band p{margin:0 0 20px; color:#c6b8ad; font-size:16px}
.band ul{margin:0 0 24px; padding:0; list-style:none; display:grid; gap:12px}
.band li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#ddd2c8}
.band li::before{content:''; width:8px; height:8px; margin-top:7px; border-radius:50%; background:var(--coral); flex:0 0 auto}
.band__ph{height:100%; min-height:300px;
  background:url('../img/brand/texture-kraft.webp') center/cover; opacity:.85}

/* подвал */
.foot{padding:30px 0 44px; color:var(--muted); font-size:14px}
.foot__in{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}

/* заголовок раздела */
.lead{padding:28px 0 20px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:14px}
.crumbs a:hover{color:var(--ink)}
.lead h1{font-size:clamp(30px,4.2vw,50px); line-height:1.05; margin:0 0 10px}
.lead__note{color:var(--muted); font-size:15px; margin:0 0 10px}

/* каталог */
.layout{display:grid; grid-template-columns:262px minmax(0,1fr); gap:32px; align-items:start; padding-bottom:70px}
.listing{min-width:0}
.filters-toggle{display:none; margin-bottom:16px}
.filters{position:sticky; top:100px; display:grid; gap:14px}
.filters__box{background:var(--white); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow-card)}
.filters__box h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:600}
.filters__list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.filters__list a{display:flex; justify-content:space-between; gap:10px; font-size:15px; color:var(--ink-2)}
.filters__list a i{font-style:normal; font-size:12px; color:var(--muted)}
.filters__list a:hover{color:var(--ink)}
.filters__list a.on{color:var(--coral); font-weight:600}
.filters__list--chips{display:flex; flex-wrap:wrap; gap:8px}
.filters__list--chips a{border-radius:var(--pill); background:var(--cream); padding:9px 15px; font-size:14px}
.filters__list--chips a.on{background:var(--ink); color:var(--cream)}
.filters__reset{font-size:14px; color:var(--coral); justify-self:start; padding:0 4px}
.listing .goods{grid-template-columns:repeat(3,1fr)}
.empty{color:var(--muted); padding:40px 0}
.pager{display:flex; gap:8px; margin-top:44px; align-items:center; flex-wrap:wrap}
.pager a, .pager span{min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--pill); background:var(--white); font-size:15px; box-shadow:var(--shadow-card)}
.pager a.on{background:var(--ink); color:var(--cream)}

/* карточка товара */
.product{padding-top:24px; padding-bottom:66px}   /* ⛔ не сокращённым: висит вместе с .wrap и обнулял её боковые поля */
.product__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
.product__big{background:var(--white); border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-card)}
.product__big img{width:100%; height:100%; object-fit:contain; background:var(--white)}
.product__strip{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.shot{width:82px; height:100px; padding:0; border:0; background:var(--white); border-radius:var(--r-sm);
  overflow:hidden; cursor:pointer; box-shadow:var(--shadow-card); opacity:.72; transition:opacity .25s}
.shot img{width:100%; height:100%; object-fit:contain; background:var(--white)}
.shot.on{opacity:1; outline:2px solid var(--ink); outline-offset:-2px}
.product__info h1{font-size:clamp(26px,3.2vw,40px); line-height:1.08; margin:0 0 8px}
.product__art{color:var(--muted); font-size:14px; margin:0 0 22px}
.specs{display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:0 0 26px; font-size:15px;
  background:var(--white); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow-card)}
.specs dt{color:var(--muted)}
.specs dd{margin:0}
.sizes h2{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:600}
.sizes__grid{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.sizes__grid span{display:inline-flex; align-items:center; justify-content:center; min-width:56px; height:46px;
  border-radius:var(--pill); background:var(--white); font-size:15px; font-weight:600; box-shadow:var(--shadow-card)}
.sizes__note{color:var(--muted); font-size:14px; margin:0 0 24px}
.product__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.product__full{color:var(--muted); font-size:13px; line-height:1.5; margin:0}

/* появление при прокрутке */

@media (max-width:1100px){
  .hero__card{grid-template-columns:1fr; min-height:0}
  .hero__text{padding:44px 30px 10px}
  .hero__model{padding:0 30px; max-width:520px; margin:0 auto}
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .goods{grid-template-columns:repeat(3,1fr)}
  .band__in{grid-template-columns:1fr}
  .band__text{padding:38px 30px}
  .band__ph{min-height:260px}
  .layout{grid-template-columns:minmax(0,1fr); gap:16px}
  .filters{position:static; display:none}
  .filters.open{display:grid}
  .filters-toggle{display:inline-flex}
  .product__grid{grid-template-columns:1fr; gap:26px}
}
@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 14px}
  .hero__card{border-radius:var(--r-lg)}
  .hero__text{padding:34px 20px 6px}
  .hero__model{padding:0 12px}
  .cats{grid-template-columns:1fr; gap:12px}
  .goods, .listing .goods{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .sec{padding-top:30px; padding-bottom:30px}
  .sec__head{flex-direction:column; align-items:flex-start; gap:8px}
  .nav{display:none}
  .shot{width:64px; height:80px}
}
@media (prefers-reduced-motion:reduce){
  .cat img, .card__ph img, .card{transition:none}
}

/* ---------- шапка раздела ---------- */
.pagehead{
  position:relative; overflow:hidden; border-radius:var(--r-xl); margin-top:18px;
  background:linear-gradient(118deg, var(--sand-1) 0%, #f0dac3 55%, var(--sand-2) 100%);
  box-shadow:var(--shadow-soft);
}
.pagehead::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/texture-kraft.webp') center/cover; opacity:.2; mix-blend-mode:multiply}
.pagehead__text{position:relative; z-index:2; padding:46px 48px 48px; max-width:760px}
.pagehead h1{font-size:clamp(30px,4vw,50px); line-height:1.05; margin:0 0 12px; color:#231a12}
.pagehead p{color:#54402f; font-size:17px; margin:0 0 22px; max-width:56ch}
.pagehead .crumbs{color:#7a6046}
.pagehead .crumbs a:hover{color:#231a12}

/* ---------- плитки входа ---------- */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.tiles--small{grid-template-columns:repeat(4,1fr)}
.tile{
  position:relative; display:flex; align-items:stretch; justify-content:space-between; gap:10px;
  min-height:210px; padding:26px 0 26px 28px; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(120deg,#fff9f4 0%, #f7e7d6 70%, #eed6bd 100%);
  box-shadow:var(--shadow-card); transition:transform .3s, box-shadow .3s;
}
.tile:hover{transform:translateY(-3px); box-shadow:0 24px 44px -26px rgba(70,45,25,.6)}
.tile__text{display:flex; flex-direction:column; gap:6px; z-index:2; max-width:62%}
.tile__text b{font-size:21px; font-weight:600; line-height:1.15; color:#231a12}
.tile__text span{font-size:14px; color:#7a6046}
.tile__go{margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start; padding:11px 22px; border-radius:var(--pill); background:var(--ink);
  color:var(--cream); font-size:14px; font-weight:600}
.tile__ph{width:44%; flex:0 0 44%; align-self:stretch; margin:-26px 0}
.tile__ph img{width:100%; height:100%; object-fit:cover}
.tiles--small .tile{min-height:172px; padding:20px 0 20px 22px}
.tiles--small .tile__text b{font-size:17px}
.tiles--small .tile__go{padding:9px 18px; font-size:13px}

.listing__count{color:var(--muted); font-size:14px; margin:0 0 14px}

/* ---------- карточка товара: цена и доверие ---------- */
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0}
.chips li{background:var(--white); border-radius:var(--pill); padding:9px 16px; font-size:14px; box-shadow:var(--shadow-card)}
.pricebox{background:linear-gradient(120deg,#fff9f4 0%, #f7e7d6 100%); border-radius:var(--r-lg);
  padding:26px 28px; margin:0 0 26px; box-shadow:var(--shadow-card)}
.pricebox__label{margin:0 0 4px; font-size:13px; color:#7a6046}
.pricebox__val{margin:0 0 10px; font-size:26px; font-weight:700; letter-spacing:-.02em; color:#231a12}
.pricebox__note{margin:0 0 20px; font-size:14px; color:#6b5341; max-width:44ch}
.trust{list-style:none; margin:26px 0 22px; padding:0; display:grid; gap:12px}
.trust li{display:flex; gap:14px; align-items:baseline; font-size:14px; color:var(--muted)}
.trust b{flex:0 0 96px; font-size:15px; color:var(--ink); font-weight:600}

@media (max-width:1100px){
  .tiles--small{grid-template-columns:repeat(2,1fr)}
  .pagehead__text{padding:34px 28px 36px}
}
@media (max-width:760px){
  .tiles, .tiles--small{grid-template-columns:1fr}
  .tile{min-height:168px; padding:20px 0 20px 20px}
  .trust b{flex-basis:84px}
}

/* ---------- розница и маркетплейсы ---------- */
.retail{margin-top:34px}
.retail__in{background:var(--white); border-radius:var(--r-lg); padding:26px 30px; box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.retail h2{font-size:21px; margin:0 0 4px}
.retail p{margin:0; color:var(--muted); font-size:15px}
.retail__links{display:flex; gap:10px; flex-wrap:wrap}
.chip-link{padding:12px 20px; border-radius:var(--pill); background:var(--cream); font-size:15px; font-weight:600;
  transition:background .25s}
.chip-link:hover{background:var(--cream-2)}

/* ---------- большая плашка каталога ---------- */
.bigcard{position:relative; display:flex; align-items:stretch; justify-content:space-between; gap:16px;
  min-height:280px; padding:36px 0 36px 40px; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(120deg,#fff9f4 0%, #f5e2cd 60%, #e7cbae 100%);
  box-shadow:var(--shadow-soft); transition:transform .3s, box-shadow .3s}
.bigcard:hover{transform:translateY(-3px)}
.bigcard__text{display:flex; flex-direction:column; gap:8px; z-index:2; max-width:56%}
.bigcard__eyebrow{margin:0; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8a6a3b}
.bigcard__text b{font-size:clamp(28px,3.4vw,44px); font-weight:600; line-height:1.05; color:#231a12}
.bigcard__text span{font-size:15px; color:#6b5341}
.bigcard__ph{width:42%; flex:0 0 42%; margin:-36px 0}
.bigcard__ph img{width:100%; height:100%; object-fit:cover}

.hero__hint{margin:18px 0 0; font-size:14px; color:#7a6046}

/* ---------- заявка оптовика ---------- */
.offer{display:grid; grid-template-columns:.95fr 1.05fr; gap:0; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-soft)}
.offer__text{background:var(--ink); color:#e9e0d8; padding:46px 44px}
.offer__text h2{color:#fff; margin:0 0 12px; font-size:clamp(26px,3vw,36px)}
.offer__text p{color:#c6b8ad; margin:0 0 20px}
.offer__list{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:15px; color:#ddd2c8}
.offer__list li{display:flex; gap:12px; align-items:center}
.offer__list li::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--coral)}
.offer__form{background:var(--white); padding:38px 40px; display:grid; gap:14px}
.offer__form label{display:grid; gap:6px; font-size:13px; color:var(--muted)}
.offer__form input[type=text], .offer__form textarea{
  font:400 16px/1.4 var(--sans); color:var(--ink); background:var(--cream); border:0; border-radius:var(--r-sm);
  padding:14px 16px; outline:none; resize:vertical}
.offer__form input:focus, .offer__form textarea:focus{box-shadow:inset 0 0 0 2px rgba(249,93,81,.35)}
.offer__agree{display:flex !important; flex-direction:row; align-items:flex-start; gap:10px; font-size:13px; color:var(--muted)}
.offer__agree input{margin-top:2px}
.offer__status{margin:0; font-size:14px; min-height:20px; color:var(--coral)}

/* ---------- преимущества ---------- */
.adv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}   /* пунктов шесть: в пяти колонках последний висел один */
.adv__item{background:var(--white); border-radius:var(--r); padding:24px 22px; box-shadow:var(--shadow-card)}
.adv__item b{display:block; font-size:19px; margin-bottom:8px}
.adv__item span{font-size:14px; color:var(--muted); line-height:1.5}

@media (max-width:1100px){
  .offer{grid-template-columns:1fr}
  .adv{grid-template-columns:repeat(2,1fr)}
  .bigcard{min-height:230px; padding:26px 0 26px 26px}
}
@media (max-width:760px){
  .adv{grid-template-columns:1fr}
  .bigcard__text{max-width:60%}
  .offer__text, .offer__form{padding:28px 22px}
}

/* ================= моторика ================= */
html{scroll-behavior:smooth}

/* появление блоков со сдвигом по очереди */
.js [data-rv]{opacity:0; transform:translateY(26px); will-change:transform,opacity}
.js [data-rv].in{opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms)}
.js [data-rv="scale"]{transform:scale(.965)}
.js [data-rv="scale"].in{transform:none}
.js [data-rv="right"]{transform:translateX(34px)}
.js [data-rv="right"].in{transform:none}

/* заголовок по словам */
.js .hero h1 .w{display:inline-block; opacity:0; transform:translateY(38px) rotate(1.2deg)}
.js .hero h1.in .w{opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 90ms)}
.hero h1 .accent{color:var(--coral)}

/* модель на первом экране: въезд и лёгкий параллакс */
.js .hero__model{opacity:0; transform:translateY(40px) scale(1.02)}
.js .hero__model.in{opacity:1; transform:none; transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero__model, .hero__mark, .bigcard__ph img, .tile__ph img{will-change:transform}

/* счётчик */
.count{font-variant-numeric:tabular-nums}

/* мягкая подсветка кнопки «перейти» на плитке */
.tile__go, .bigcard .tile__go{transition:background .25s, transform .25s}
.tile:hover .tile__go, .bigcard:hover .tile__go{background:var(--coral); transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rv], .js .hero h1 .w, .js .hero__model{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ---------- подвал ---------- */
.foot{padding:56px 0 34px; margin-top:20px; background:var(--white); border-radius:var(--r-xl) var(--r-xl) 0 0}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.foot__logo{height:30px; width:auto; margin-bottom:14px; opacity:.9}
.foot__col p{margin:0; color:var(--muted); font-size:14px; max-width:30ch}
.foot__col h4{margin:0 0 12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.foot__phone{display:block; font-size:19px; font-weight:600; margin-bottom:10px}
.foot__links{display:flex; flex-wrap:wrap; gap:8px}
.foot__links--col{flex-direction:column; gap:7px}
.foot__links a{font-size:14px; color:var(--ink-2); background:var(--cream); border-radius:var(--pill); padding:8px 14px; transition:background .25s}
.foot__links--col a{background:transparent; padding:0}
.foot__links a:hover{background:var(--cream-2); color:var(--ink)}
.foot__links--col a:hover{background:transparent; color:var(--coral)}
.foot__bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:34px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
@media (max-width:1100px){ .foot__grid{grid-template-columns:1fr 1fr; gap:26px} }
@media (max-width:620px){ .foot__grid{grid-template-columns:1fr} }

/* ================= приёмы из редакционных шаблонов ================= */
:root{ --serif:'Cormorant Garamond', Georgia, serif; }

/* курсивный серифный акцент внутри гротескной фразы */
.hero h1 .accent, .kino h1 .accent{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--coral);
  letter-spacing:0; padding-right:.06em}

/* мелкая служебная типографика по углам кадра */
.hero__meta{position:absolute; z-index:3; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#7a6046; opacity:.9}
.hero__meta--tl{left:60px; top:34px}
.hero__meta--tr{right:40px; top:34px; text-align:right}
.hero__meta--br{right:40px; bottom:30px; text-align:right}

/* бегущая строка с манифестом */
.ticker{position:relative; z-index:3; margin-top:18px; overflow:hidden;
  border-top:1px solid rgba(35,26,18,.12); border-bottom:1px solid rgba(35,26,18,.12); padding:12px 0}
.ticker__track{display:flex; gap:44px; width:max-content; animation:ticker 34s linear infinite}
.ticker span{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#6b5341; white-space:nowrap}
.ticker span::after{content:'·'; margin-left:44px; opacity:.5}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* нумерация кадров в карточке товара */
.shotcount{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:14px 0 0}
.label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}

@media (max-width:760px){
  .hero__meta--tl{left:22px; top:18px}
  .hero__meta--tr, .hero__meta--br{display:none}
  .ticker span{font-size:11px; letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){ .ticker__track{animation:none} }

/* ⛔ В предметной съёмке перчатка надета на бежевую подставку, и в крупной плашке
   эта подставка занимает половину кадра. Кадрируем по верху: в кадре остаётся кисть. */
.bigcard__ph img, .tile--big .tile__ph img{object-position:50% 16%}
.cat img{object-position:50% 18%}

/* плашка «Все модели»: меньше пустого поля, текст по центру, фото шире */
.bigcard{min-height:300px; align-items:center; padding:34px 0 34px 40px}
.bigcard__ph{width:50%; flex:0 0 50%; margin:0; align-self:stretch; border-radius:0}
.bigcard__text{max-width:46%}
.tile--big{min-height:230px; align-items:center}
.tile--big .tile__ph{width:46%; flex:0 0 46%; margin:0; align-self:stretch}

/* ⛔ Фото внутри плашки не должно задавать высоту: картинка 1050×1400 растягивала
   карточку на 800 px и оставляла пустое поле. Держим высоту карточкой, фото кроем внутри. */
.bigcard{height:340px; min-height:0; padding:34px 0 34px 40px}
.bigcard__ph{position:relative; height:100%; width:50%; flex:0 0 50%; margin:0; overflow:hidden}
.bigcard__ph picture, .bigcard__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

.tile{height:230px; min-height:0}
.tile--big{height:280px}
.tile__ph{position:relative; height:100%; margin:0; overflow:hidden}
.tile__ph picture, .tile__ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tiles--small .tile{height:200px}

@media (max-width:1100px){
  .bigcard{height:300px}
  .tile--big{height:250px}
}
@media (max-width:760px){
  .bigcard{height:250px; padding:22px 0 22px 20px}
  .tile, .tile--big, .tiles--small .tile{height:190px}
}

/* ================= главная без предметной съёмки =================
   ⛔ Предметка на белом фоне на главной не место: она живёт в каталоге.
   Плашки разделов держатся на типографике, фактуре и крупной цифре. */
.bigcard{overflow:hidden; position:relative}
.bigcard::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/texture-kraft.webp') center/cover; opacity:.18; mix-blend-mode:multiply}
.bigcard__num{position:absolute; right:-10px; bottom:-56px; z-index:1;
  font-size:clamp(150px,18vw,280px); font-weight:700; line-height:.8; letter-spacing:-.05em;
  color:#231a12; opacity:.07; pointer-events:none}
.bigcard__text{position:relative; z-index:2; max-width:64%}

.tile--type{position:relative; overflow:hidden; align-items:flex-end; padding:26px 28px}
.tile--type::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/texture-kraft.webp') center/cover; opacity:.14; mix-blend-mode:multiply}
.tile--type .tile__text{position:relative; z-index:2; max-width:76%}
.tile__num{position:absolute; right:-6px; bottom:-34px; z-index:1;
  font-size:clamp(96px,11vw,170px); font-weight:700; line-height:.8; letter-spacing:-.05em;
  color:#231a12; opacity:.08; pointer-events:none}
.tile__arrow{position:absolute; right:24px; bottom:24px; z-index:2; font-size:22px; color:#231a12;
  transition:transform .3s}
.tile--type:hover .tile__arrow{transform:translateX(6px)}
.tiles--small .tile--type{height:150px; padding:22px 24px; background:var(--white)}
.tiles--small .tile--type::after{opacity:.07}
.tiles--small .tile__text b{font-size:17px; line-height:1.2}


/* ================= сцена: липкий первый экран на три кадра ================= */
.stage{height:300vh; position:relative}
.stage__sticky{position:sticky; top:0; height:100vh; overflow:hidden; border-radius:0 0 var(--r-xl) var(--r-xl)}
.stage__shots{position:absolute; inset:0}
.stage__shot{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1s ease}
.stage__shot.is-on{opacity:1}
.stage__shot img{width:100%; height:100%; object-fit:cover; transform:scale(1.06)}
.stage__scrim{position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(255,246,240,.96) 0%, rgba(255,246,240,.86) 34%, rgba(255,246,240,.25) 58%, rgba(255,246,240,0) 78%)}
.stage__ui{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center}
.stage__meta{position:absolute; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6b5341}
.stage__meta--tl{left:24px; top:28px}
.stage__meta--tr{right:24px; top:28px}
.stage__texts{position:relative; max-width:560px; min-height:330px}
.stage__text{position:absolute; inset:0; opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.stage__text.is-on{opacity:1; transform:none; pointer-events:auto}
.stage__h2{font-size:clamp(34px,4.4vw,58px); line-height:1.03; margin:0 0 18px; color:#231a12}
.stage__h2 .accent{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--coral)}
.stage__lead{font-size:18px; line-height:1.55; color:#54402f; max-width:30em; margin:0 0 30px}
.stage__dots{position:absolute; left:24px; bottom:34px; display:flex; gap:8px}
.stage__dots span{width:26px; height:3px; border-radius:2px; background:rgba(35,26,18,.2); transition:background .4s}
.stage__dots span.is-on{background:var(--coral)}
.ticker .wrap{padding:0 24px}

@media (max-width:900px){
  .stage{height:260vh}
  .stage__scrim{background:linear-gradient(180deg, rgba(255,246,240,.95) 0%, rgba(255,246,240,.8) 42%, rgba(255,246,240,.35) 100%)}
  .stage__ui{justify-content:flex-start; padding-top:110px}
  .stage__texts{min-height:400px; max-width:100%}
  .stage__meta--tr{display:none}
}
@media (prefers-reduced-motion:reduce){
  .stage{height:auto}
  .stage__sticky{position:static; height:auto; min-height:82vh}
  .stage__shot{transition:none}
  .stage__text{position:relative; opacity:1; transform:none; margin-bottom:34px}
  .stage__texts{min-height:0}
}


/* ================= шапка в два ряда, как у клиента ================= */
.top{position:sticky; top:0; z-index:40; background:rgba(255,246,240,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(35,26,18,.07)}
.top__row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px 10px}
@media (max-width:520px){ .top__row{gap:10px; padding-left:14px; padding-right:14px} }
.top__side{display:flex; align-items:center; gap:14px}
.top__phone{font-size:17px; font-weight:600; letter-spacing:.01em}
.btn--sm{padding:11px 22px; font-size:14px}
.top__nav{display:flex; gap:26px; padding:0 24px 12px; font-size:15px; font-weight:500}
.top__nav a{color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent; transition:color .25s, border-color .25s}
.top__nav a:hover{color:var(--ink); border-color:var(--coral)}
.top.is-small .top__brand img{height:34px}
.top.is-small .top__row{padding:8px 24px 6px}
.top.is-small .top__nav{padding-bottom:8px}

@media (max-width:900px){
  .top__phone{display:none}   /* значки мессенджеров остаются: это главный канал связи опта */
  .top__brand img{height:36px}
  /* меню уезжает вбок: даём подсказку затуханием, иначе последний пункт выглядит обрезанным */
  .top__nav{gap:16px; font-size:14px; overflow-x:auto; white-space:nowrap; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 0 84%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0 84%,transparent 100%)}
  .top__nav::-webkit-scrollbar{display:none}
}


/* логотип в шапке: знак плюс широкий вордмарк, как на её сайте */
.top__brand{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.top__brand img{flex:none; max-width:none}
.top__brand .top__mark{width:38px; height:38px; object-fit:contain; transition:width .3s, height .3s}
.top__brand .top__word{height:20px; width:auto; transition:height .3s}
.top.is-small .top__brand .top__mark{width:30px; height:30px}
.top.is-small .top__brand .top__word{height:16px}
@media (max-width:900px){
  .top__brand .top__mark{width:32px; height:32px}
  .top__brand .top__word{height:16px}
}


/* один логотип в шапке: широкий вордмарк, знак внутри него */
.top__brand .top__word{height:26px}
.top.is-small .top__brand .top__word{height:20px}
.top__row{padding:16px 24px 10px}
.top__nav{gap:30px; font-size:16px; padding-bottom:14px}
@media (max-width:900px){
  .top__brand .top__word{height:18px}
}


/* ---------- акции (правятся клиентом из панели) ---------- */
.promos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.promo{position:relative; background:var(--white); border-radius:var(--r-lg); padding:28px 28px 24px;
  box-shadow:var(--shadow-card); overflow:hidden; transition:transform .3s, box-shadow .3s}
.promo::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/texture-kraft.webp') center/cover; opacity:.06; mix-blend-mode:multiply}
.promo:hover{transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(70,45,25,.6)}
.promo__label{position:relative; z-index:2; display:inline-block; margin-bottom:14px; padding:7px 14px;
  border-radius:var(--pill); background:var(--cream); font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#8a6a3b}
.promo h3{position:relative; z-index:2; font-size:21px; line-height:1.15; margin:0 0 10px}
.promo p{position:relative; z-index:2; margin:0 0 16px; color:var(--muted); font-size:15px; line-height:1.5}
.promo__until{color:var(--coral) !important; font-weight:600; font-size:14px !important}
.promo__go{position:relative; z-index:2; font-size:14px; font-weight:600; color:var(--ink);
  border-bottom:2px solid var(--coral); padding-bottom:2px}
.promo__go:hover{color:var(--coral)}
@media (max-width:1100px){ .promos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .promos{grid-template-columns:1fr} }


/* ================= кино-сцена первого экрана ================= */
/* ⛔ Высоту считаем от окна за вычетом шапки (117 px): при жёстких 610 px на любом мониторе
   снизу оставалась полоса, куда заглядывал следующий блок. Потолок 1000 px, чтобы на больших
   экранах экран не превращался в бесконечный баннер. На узком экране своя высота, ниже. */
.kino{position:relative; height:clamp(520px, calc(100vh - 118px), 1000px); height:clamp(520px, calc(100svh - 118px), 1000px);
  overflow:hidden; isolation:isolate;
  background:#efe3d6; border-radius:0 0 var(--r-xl) var(--r-xl)}
/* постер = тот же нулевой кадр, что у клипов: экран не пустует, пока они грузятся */
.kino__media{position:absolute; inset:0; z-index:0;
  background:#efe3d6 url(../img/kino-poster.jpg) center/cover no-repeat}
.kino__v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none}
.kino__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,246,240,.95) 0%, rgba(255,246,240,.8) 32%, rgba(255,246,240,.2) 56%, rgba(255,246,240,0) 76%)}
.kino__ui{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center;
  pointer-events:none}
.kino__ui > *{pointer-events:auto}
.kino__copy{max-width:560px; transition:opacity .8s var(--ease,cubic-bezier(.2,.7,.2,1)), filter .8s, transform .8s}
.kino__copy h1{font-size:clamp(34px,4.1vw,52px); line-height:1.04; margin:0 0 14px; color:#231a12}
.kino__copy .stage__lead{margin:0 0 18px}

.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (max-width:900px){
  /* на узком экране текст сверху, кадр обязан остаться видимым снизу */
  .kino__scrim{background:linear-gradient(180deg, rgba(255,246,240,.96) 0%, rgba(255,246,240,.62) 38%, rgba(255,246,240,.12) 74%, rgba(255,246,240,0) 100%)}
  .kino{height:clamp(516px, 76vh, 624px); height:clamp(516px, 76svh, 624px)}
  .kino__ui{justify-content:flex-start; padding-top:54px}
  .kino__copy h1{font-size:clamp(30px,8.4vw,38px); margin:0 0 10px}
  .kino__copy .stage__lead{font-size:15px; line-height:1.45; margin:0 0 14px}
  .kino__copy .hero__cta{gap:8px}
  .kino__copy .hero__cta .btn{padding:12px 16px; font-size:14px}
}
@media (prefers-reduced-motion:reduce){
}

/* ================= каталог: шапка раздела, снятие фильтров, обложки ================= */
.cathead{padding:26px 24px 8px}
.cathead__row{display:flex; align-items:flex-end; gap:24px; justify-content:space-between}
.cathead__text{max-width:640px}
.cathead h1{font-size:clamp(30px,3.6vw,46px); margin:6px 0 10px; line-height:1.05}
.cathead p{margin:0; color:var(--ink-2); font-size:16px}
.cathead__cab{flex:0 0 auto; display:grid; gap:2px; padding:14px 22px; border-radius:var(--r);
  background:var(--white); box-shadow:var(--shadow-card); text-align:right; transition:transform .25s}
.cathead__cab:hover{transform:translateY(-2px)}
.cathead__cab span{font-size:13px; color:var(--muted)}
.cathead__cab b{font-size:16px}

.picked{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0}
.picked__one{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--pill);
  background:var(--white); box-shadow:var(--shadow-card); font-size:14px; transition:background .25s, color .25s}
.picked__one i{font-style:normal; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.picked__one span{color:var(--coral); font-size:16px; line-height:1}
.picked__one:hover{background:var(--ink); color:var(--cream)}
.picked__one:hover i{color:#b9aca2}
.picked__all{align-self:center; font-size:14px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:2px}
.picked__all:hover{color:var(--coral); border-color:var(--coral)}

/* обложки разделов: фотография держит плитку, текст лежит на ней */
.covers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.covers--sm{grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.covers--duo{grid-template-columns:repeat(2,1fr); margin-top:16px}
.covers--duo .cover{aspect-ratio:16/10}
.cover{position:relative; display:block; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
  background:var(--sand-1); box-shadow:var(--shadow-card)}
.covers--sm .cover{aspect-ratio:1/1; border-radius:var(--r)}
.cover img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.cover:hover img{transform:scale(1.05)}
.cover__veil{position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,16,10,0) 38%, rgba(23,16,10,.62) 100%)}
/* ⛔ каталожный кадр снят на белом фоне и рядом с её съёмкой выглядит чужим:
   притемняем и утепляем, чтобы плитки читались одной серией */
.cover--plain{background:#171310}
.cover--plain img{filter:brightness(.88) contrast(1.06) sepia(.10) saturate(.96)}
.cover--plain .cover__veil{background:linear-gradient(180deg, rgba(23,16,10,.18) 0%, rgba(23,16,10,.34) 46%, rgba(23,16,10,.78) 100%)}
.cover__text{position:absolute; left:20px; right:20px; bottom:18px; display:grid; gap:3px; color:#fff}
.cover__text b{font-size:19px; font-weight:600; letter-spacing:-.01em}
.cover__text i{font-style:normal; font-size:14px; color:rgba(255,255,255,.82)}
.covers--sm .cover__text{left:14px; right:14px; bottom:13px}
.covers--sm .cover__text b{font-size:16px}
.covers--sm .cover__text i{font-size:13px}

.listing__bar{display:flex; align-items:center; justify-content:space-between; margin:0 0 16px}
.listing__count span{color:var(--muted); font-weight:400}

@media (max-width:1100px){
  .covers{grid-template-columns:repeat(2,1fr)}
  .covers--sm{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .cathead__row{flex-direction:column; align-items:flex-start; gap:14px}
  .cathead__cab{text-align:left}
  .covers--sm{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  /* «Женские» и «Мужские» в две колонки на телефоне сжимались до 175 px: подпись ломалась на две строки */
  .covers--duo{grid-template-columns:1fr}
  .covers--duo .cover{aspect-ratio:16/9}
}

/* ================= карточка товара: цвета модели, характеристики, лупа ================= */
.product__big{position:relative; display:block; width:100%; padding:0; border:0; background:var(--white);
  border-radius:var(--r-lg); overflow:hidden; cursor:zoom-in}
.product__zoom{position:absolute; right:16px; bottom:16px; padding:8px 16px; border-radius:var(--pill);
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:13px; color:var(--ink-2); opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease}
.product__big:hover .product__zoom{opacity:1; transform:none}

.colors{margin:26px 0 0}
.colors__row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.colors__one{display:grid; gap:6px; width:84px; text-align:center}
.colors__one picture{display:block; border-radius:var(--r-sm); overflow:hidden; background:var(--cream);
  box-shadow:var(--shadow-card); transition:transform .25s}
.colors__one img{width:84px; height:104px; object-fit:cover}
.colors__one:hover picture{transform:translateY(-3px)}
.colors__dot{display:block; width:84px; height:104px; border-radius:var(--r-sm); box-shadow:var(--shadow-card)}
.colors__one b{font-size:12px; font-weight:500; color:var(--ink-2); line-height:1.25}

.specs{width:100%; border-collapse:collapse; margin:26px 0 0; font-size:15px}
.specs th{width:38%; text-align:left; font-weight:400; color:var(--muted); padding:10px 0;
  border-bottom:1px solid var(--line); vertical-align:top}
.specs td{padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink-2)}
.specs tr:last-child th, .specs tr:last-child td{border-bottom:0}

.lightbox{position:fixed; inset:0; z-index:90; background:rgba(22,15,10,.9);
  display:flex; align-items:center; justify-content:center; padding:32px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px, 92vw); max-height:88vh; width:auto; height:auto;
  border-radius:var(--r); box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.lightbox__close{position:absolute; right:22px; top:18px; width:44px; height:44px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1}
.lightbox__close:hover{background:rgba(255,255,255,.26)}

@media (max-width:760px){
  .colors__one{width:72px}
  .colors__one img, .colors__dot{width:72px; height:90px}
  .lightbox{padding:14px}
}

/* ================= статические страницы ================= */
.article{padding-top:8px}
.article__grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr); gap:34px; align-items:start}
.article__body{background:var(--white); border-radius:var(--r-lg); padding:38px 42px; box-shadow:var(--shadow-card)}
.article__body--wide{max-width:none}
.article__body h2{font-size:22px; margin:34px 0 12px; letter-spacing:-.01em}
.article__body h2:first-child{margin-top:0}
.article__body p{margin:0 0 14px; color:var(--ink-2); font-size:16px; line-height:1.65}
.article__body p:last-child{margin-bottom:0}
.marks{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px}
.marks li{position:relative; padding-left:24px; color:var(--ink-2); font-size:16px}
.marks li::before{content:''; position:absolute; left:4px; top:10px; width:7px; height:7px;
  border-radius:50%; background:var(--coral)}
.muted{color:var(--muted); font-size:14px}
.specs--wide th{width:44%}
/* ⛔ На телефоне подпись над значением. В две колонки 20-значные счета не помещались и вылезали за карточку
   до края экрана, а переносить номер счёта нельзя: его копируют в платёжку (24.09). Кабинет, контакты, оферта. */
@media (max-width:560px){
  .specs--wide, .specs--wide tbody, .specs--wide tr, .specs--wide th, .specs--wide td{display:block; width:auto}
  .specs--wide th{padding:12px 0 2px; border-bottom:0; font-size:13px}
  .specs--wide td{padding:0 0 12px; overflow-wrap:anywhere}
}

.article__side{display:grid; gap:14px; position:sticky; top:104px}
.sidecard{background:var(--cream-2); border-radius:var(--r); padding:24px 26px; display:grid; gap:10px;
  justify-items:start}
.sidecard h3{margin:0; font-size:17px}
.sidecard p{margin:0; font-size:15px; color:var(--ink-2)}
.sidecard__phone{font-size:20px; font-weight:600}
.sidecard__mail{font-size:15px; color:var(--ink-2); border-bottom:1px solid var(--line)}
.sidecard__go{font-size:15px; color:var(--ink-2); border-bottom:2px solid var(--coral); padding-bottom:2px}
.sidecard__go:hover, .sidecard__mail:hover{color:var(--coral)}

.contacts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.contacts__card{display:grid; gap:7px; align-content:start; background:var(--white); border-radius:var(--r);
  padding:24px 26px; box-shadow:var(--shadow-card); transition:transform .25s}
a.contacts__card:hover{transform:translateY(-3px)}
.contacts__card span{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.contacts__card b{font-size:19px; letter-spacing:-.01em}
.contacts__card i{font-style:normal; font-size:13px; color:var(--muted)}

.foot__docs{display:flex; flex-wrap:wrap; gap:16px}
.foot__docs a{color:inherit; opacity:.8}
.foot__docs a:hover{opacity:1; color:var(--coral)}

@media (max-width:1100px){
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article__grid{grid-template-columns:minmax(0,1fr); gap:18px}
  .article__side{position:static; grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .article__body{padding:26px 20px; border-radius:var(--r)}
  .article__side{grid-template-columns:minmax(0,1fr)}
  .contacts{grid-template-columns:minmax(0,1fr)}
  .foot__docs{gap:10px}
}

/* согласие на cookie */
.cookie{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60;
  width:min(760px, calc(100vw - 28px)); display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:rgba(255,252,248,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r); padding:16px 20px;
  box-shadow:0 18px 44px -24px rgba(70,45,25,.6)}
.cookie[hidden]{display:none}
.cookie p{margin:0; flex:1 1 320px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.cookie a{border-bottom:1px solid var(--line)}
.cookie a:hover{color:var(--coral); border-color:var(--coral)}
.cookie__btns{display:flex; gap:8px; flex-wrap:wrap}
@media (max-width:640px){
  /* на телефоне баннер занимал треть первого экрана: тот же текст, но плотнее */
  .cookie{bottom:10px; padding:12px 14px; gap:10px}
  .cookie p{font-size:13px; line-height:1.42}
  .cookie__btns{width:100%}
  .cookie__btns .btn{flex:1 1 auto; justify-content:center; padding:10px 14px; font-size:13px}
}

/* ================= кабинет и цены ================= */
.note{margin:0 0 18px; padding:14px 20px; border-radius:var(--r-sm); font-size:15px}
.note--ok{background:#e9f5ea; color:#2f5d36}
.note--bad{background:#fdeceb; color:#8d2f2f}
.tabs{display:flex; gap:8px; margin:0 0 22px}
.tabs a{padding:10px 18px; border-radius:var(--pill); background:var(--cream); font-size:15px; color:var(--ink-2)}
.tabs a.on{background:var(--ink); color:var(--cream)}
.form{display:grid; gap:14px; justify-items:start}
.form label{display:grid; gap:6px; width:100%; font-size:14px; color:var(--muted)}
.form__two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:100%}
.form input[type=text], .form input[type=email], .form input[type=password]{font:inherit; font-size:16px;
  color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:13px 16px; width:100%}
.form input:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent}
/* label.form__agree: иначе .form label{display:grid} (специфичнее) ставил галочку НАД текстом (15.10.2026) */
.form label.form__agree, .form__agree{display:flex; flex-direction:row; align-items:center; gap:10px; font-size:14px; color:var(--ink-2)}
.form__agree a{border-bottom:1px solid var(--line)}
.ok-mark{color:#2f6b3a}
.wait-mark{color:#9a6a1e}

.card__stock{margin:4px 4px 0; font-size:13px; color:#2f6b3a}
.card__stock--no{color:var(--muted)}
.sizes__grid--stock{gap:8px}
.sizes__grid--stock li{display:grid; gap:2px; justify-items:center; min-width:62px; padding:9px 10px;
  border-radius:var(--r-sm); background:var(--white)}
.sizes__grid--stock li i{font-style:normal; font-size:11px; color:var(--muted)}
.sizes__grid--stock li.off{opacity:.45}
@media (max-width:640px){ .form__two{grid-template-columns:minmax(0,1fr)} }

/* ================= корзина ================= */
.top__cart{position:relative; display:inline-flex; align-items:center; white-space:nowrap; font-size:15px;
  color:var(--ink-2); padding:8px 14px; border-radius:var(--pill); background:var(--cream-2);
  transition:background .25s, color .25s}
.top__cart__i{display:none}
.top__cart:hover{background:var(--ink); color:var(--cream)}
.top__cart.on{background:var(--ink); color:var(--cream)}
.top__cart i{font-style:normal; margin-left:7px; font-weight:600}

/* набор размеров в карточке товара */
.sizes__grid--buy{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0}
.sizes__grid--buy li{display:grid; gap:4px; justify-items:center; padding:10px 12px; min-width:92px;
  background:var(--white); border-radius:var(--r-sm); border:1px solid transparent; transition:border-color .25s}
.sizes__grid--buy li.taken{border-color:var(--coral)}
.sizes__grid--buy li.off{opacity:.45}
.sizes__grid--buy li > span{font-size:17px; font-weight:600}
.sizes__grid--buy li > i{font-style:normal; font-size:11px; color:var(--muted)}
/* цвет размера у «ассорти» из СБИСа (06.10.2026): «бежевый» над «7,5» */
.sizes__grid li > small{font-size:12px; line-height:1.15; color:var(--ink, #1a1714); text-align:center; max-width:112px}
.sizes__grid li:has(> small){display:grid; justify-items:center; gap:3px}
.qty{display:flex; align-items:center; gap:2px; margin-top:4px}
.qty button{width:28px; height:28px; border:0; border-radius:50%; background:var(--cream); cursor:pointer;
  font:600 16px/1 var(--sans); color:var(--ink)}
.qty button:hover{background:var(--cream-2)}
.qty input{width:44px; height:28px; text-align:center; font:600 14px/1 var(--sans); color:var(--ink);
  border:1px solid var(--line); border-radius:9px; background:var(--white)}
.sizes__cart{margin:16px 0 0}

/* страница корзины */
.cart{width:100%; border-collapse:collapse}
.cart tr{border-bottom:1px solid var(--line)}
.cart tr:last-child{border-bottom:0}
.cart td{padding:14px 8px; vertical-align:middle}
.cart__ph{width:74px}
.cart__ph img{width:66px; height:82px; object-fit:cover; border-radius:10px; background:var(--cream)}
.cart__name a{font-weight:600; font-size:16px}
.cart__name span{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.cart__qty{width:150px}
/* ⛔ кнопки и поле обязаны стоять в строку: без этого они падают друг под друга */
.cart__qty{display:flex; align-items:center; gap:4px}
.cart__qty button{width:30px; height:30px; flex:0 0 auto; border:0; border-radius:50%;
  background:var(--cream); cursor:pointer; font:600 16px/1 var(--sans); color:var(--ink)}
.cart__qty button:hover{background:var(--cream-2)}
.cart__qty input{width:52px; height:30px; text-align:center; font:600 14px/1 var(--sans); color:var(--ink);
  border:1px solid var(--line); border-radius:9px; background:var(--white)}
.cart__qty input:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent}
.cart__sum{width:110px; text-align:right; font-weight:600; white-space:nowrap}
.cart__del{width:40px; text-align:right}
.cart__del button{width:32px; height:32px; border:0; border-radius:50%; background:transparent; cursor:pointer;
  font-size:20px; line-height:1; color:var(--muted)}
.cart__del button:hover{background:var(--cream-2); color:var(--coral)}
.cart__note{margin:16px 0 0; font-size:14px; color:var(--muted)}
.sidecard--total{background:var(--ink); color:#f3ece6}
.sidecard--total h3{color:#fff}
.sidecard--total .muted{color:#b9aca2}
.sidecard--total .total{margin:0; font-size:30px; font-weight:600; letter-spacing:-.02em; color:#fff}
.sidecard--total .minorder{margin:6px 0 0; font-size:13px; color:#f0a79f}
.sidecard--total .minorder--ok{color:#9fd3a8}
.form select{font:inherit; font-size:16px; color:var(--ink); background:var(--cream);
  border:1px solid var(--line); border-radius:14px; padding:13px 16px; width:100%}
.form textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--cream);
  border:1px solid var(--line); border-radius:14px; padding:13px 16px; width:100%; resize:vertical}
.btn[disabled]{opacity:.45; pointer-events:none}

@media (max-width:760px){
  /* ⛔ На узком экране таблица зажимала название в столбик по слову.
     Строка заказа становится карточкой: имя, под ним количество и сумма. */
  .cart, .cart tbody, .cart tr, .cart td{display:block; width:auto}
  .cart tr{position:relative; padding:16px 0}
  .cart__ph{display:none}
  .cart td{padding:0}
  .cart__name{padding-right:44px}
  .cart__name a{font-size:17px; line-height:1.3}
  .cart__qty{width:auto; margin-top:12px}
  .cart__sum{text-align:left; margin-top:8px; font-size:17px}
  .cart__del{position:absolute; right:0; top:12px; text-align:right}
  .sizes__grid--buy li{min-width:84px}
}

/* заказы в кабинете */
.orders{display:grid; gap:12px}
.order{border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.order__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.order__head b{font-size:17px}
.order__head i{font-style:normal; font-size:13px; color:var(--muted); margin-left:auto}
.order__st{font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--pill); background:var(--cream-2); color:var(--ink-2)}
.order__st--paid, .order__st--shipped{background:#e9f5ea; color:#2f6b3a}
.order__st--cancelled{background:#fdeceb; color:#8d2f2f}
.order__body p{margin:0 0 4px; font-size:14px; color:var(--ink-2)}
.order__foot{display:flex; justify-content:space-between; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line); font-size:15px}

@media (max-width:760px){
  /* в узкой шапке «Корзина» с числом ломалась на две строки и наезжала на логотип */
  .top__cart{font-size:14px; padding:7px 12px}
  .top__cart i{margin-left:5px}
}
@media (max-width:520px){
  /* ⛔ Слово «Корзина» съедало ширину, и вордмарк сплющивался по горизонтали.
     На узком экране оставляем значок, слово прячем. */
  .top__cart__t{display:none}
  .top__cart__i{display:block}
  .top__cart{padding:7px 11px; gap:0}
  .top__cart i{margin-left:6px; font-size:13px}
}

/* ⛔ Ниже правила шапки из медиазапроса на 900px, поэтому размер знака задаём В КОНЦЕ файла:
   иначе он проигрывает по порядку и знак съёживается до 18 пикселей. */
@media (max-width:520px){
  .top__brand .top__word{height:36px; width:36px}
  .top.is-small .top__brand .top__word{height:30px; width:30px}
}

/* ================= меню на телефоне ================= */
.top__burger{display:none; width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  background:var(--cream-2); padding:0; align-items:center; justify-content:center; flex-direction:column; gap:4px}
.top__burger span{display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease}
.top__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.top__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu{position:fixed; inset:0; z-index:50; background:rgba(23,16,10,.45);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.menu[hidden]{display:none}
.menu__in{position:absolute; left:0; right:0; top:0; max-height:100%; overflow-y:auto;
  background:var(--cream); border-radius:0 0 var(--r-lg) var(--r-lg); padding:86px 20px 26px;
  display:grid; gap:2px; box-shadow:0 26px 60px -30px rgba(70,45,25,.7)}
.menu__in a{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 12px; border-radius:var(--r-sm); font-size:17px; color:var(--ink)}
.menu__in a:hover, .menu__in a:focus-visible{background:var(--cream-2)}
.menu__in a i{font-style:normal; font-size:13px; color:var(--muted)}
.menu__sep{height:1px; background:var(--line); margin:10px 12px}
.menu__phone{font-weight:600}
html.menu-on, html.menu-on body{overflow:hidden}

@media (max-width:760px){
  .top__nav{display:none}          /* полосу с прокруткой заменяет обычное меню */
  .top__burger{display:flex}
}

/* ⛔ Лист меню перекрывал шапку, и крестик было не нажать: держим шапку выше листа. */
html.menu-on .top{z-index:60}
.menu__in{padding-top:92px}

/* ================= поиск по каталогу ================= */
.findbar{display:flex; align-items:center; gap:8px; flex:1 1 320px; max-width:460px}
.findbar input{flex:1 1 auto; min-width:0; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:var(--pill); padding:12px 18px}
.findbar input:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent}
.findbar button{flex:0 0 auto; border:0; cursor:pointer; border-radius:var(--pill); padding:12px 20px;
  background:var(--ink); color:var(--cream); font:600 15px/1 var(--sans)}
.findbar button:hover{background:#2a2523}
.findbar__off{font-size:13px; color:var(--muted); border-bottom:1px solid var(--line)}
.findbar__off:hover{color:var(--coral); border-color:var(--coral)}
.menu__find{display:flex; gap:8px; padding:0 12px 10px}
.menu__find input{flex:1 1 auto; min-width:0; font:inherit; font-size:16px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--pill); padding:12px 16px}
.menu__find button{border:0; cursor:pointer; border-radius:var(--pill); padding:12px 18px;
  background:var(--ink); color:var(--cream); font:600 15px/1 var(--sans)}
@media (max-width:760px){
  .findbar{order:3; flex:1 1 100%; max-width:none; margin-top:12px}
}


/* ================= значки мессенджеров =================
   Знаки те же, что на её сайте: круг с вырезанным глифом, одна фигура на иконку.
   Цвет идёт из currentColor, поэтому одна разметка работает и в светлой шапке, и в подвале.
   ⛔ Наведение красит в фирменный цвет канала — так значок читается без подписи. */
.soc{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.soc__a{display:inline-flex; align-items:center; gap:9px; color:var(--ink-2);
  transition:color .25s, background .25s, transform .25s}
.soc__i{display:block; flex:none}
.soc__a:hover .soc__i{transform:translateY(-1px)}
.soc__a--telegram:hover{color:#2aabee}
.soc__a--whatsapp:hover{color:#25d366}
.soc__a--vk:hover{color:#07f}

/* шапка: только знаки, без подписей */
.soc--head{gap:10px}
.soc--head .soc__a{color:#39322c}
.soc--head .soc__a:hover .soc__i{transform:translateY(-2px)}

/* меню на телефоне и подвал: знак с подписью в пилюле */
.soc--menu{padding:6px 12px 0; gap:8px}
.soc--menu .soc__a{padding:9px 14px; border-radius:var(--pill); background:var(--white); font-size:14px}
.soc--menu .soc__a:hover{background:var(--cream-2)}
/* подвал: только знаки, в одном ряду со ссылкой «Контакты»; обёртка не должна ломать flex */
.soc--foot{display:contents}
.foot__links .soc__a{padding:0; background:none; color:#39322c}
.foot__links .soc__a:hover{background:none}
.foot__links .soc__a--telegram:hover{color:#2aabee}
.foot__links .soc__a--whatsapp:hover{color:#1da851}
.foot__links .soc__a--vk:hover{color:#07f}
.foot__links:not(.foot__links--col){align-items:center; gap:10px}
/* карточка «Мессенджеры» в контактах.
   ⛔ Подпись — обычный span, а в карточке span уже размечен капсом-меткой: возвращаем ему нормальный вид. */
.soc--card{gap:14px}
.soc--card .soc__a{font-size:15px}
/* магазины в карточке «Купить в розницу»: та же пилюля, что в подвале.
   ⛔ Подпись ловило правило .contacts__card span и печатало капсом. */
.contacts__card .shops{gap:8px}
.contacts__card .shop{padding:6px 14px 6px 6px}
.contacts__card .shop img{width:26px; height:26px}
.contacts__card .shop span{font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink-2)}
.contacts__card .soc__a span{font-size:15px; text-transform:none; letter-spacing:0; color:var(--ink-2)}
.contacts__card .soc__a:hover span{color:inherit}

@media (max-width:520px){
  /* рядом с «Кабинетом» и бургером знаки должны быть заметно меньше кнопки */
  .soc--head{gap:7px}
  .soc--head .soc__i{width:26px; height:26px}
}


/* ================= первый экран: лента манифеста по низу кадра =================
   Полоса лежит внутри кадра, поэтому у экрана есть нижняя граница, а не пустое поле.
   ⛔ Подложка обязана тушить кадр под текстом: на светлом фоне буквы иначе пропадают. */
.kino__ticker{position:absolute; left:0; right:0; bottom:0; z-index:3; margin:0; padding:13px 0 14px;
  border-bottom:0; border-top:1px solid rgba(35,26,18,.10);
  background:linear-gradient(0deg, rgba(255,246,240,.96) 0%, rgba(255,246,240,.86) 62%, rgba(255,246,240,0) 100%)}
.kino__ui{padding-bottom:58px}          /* текст не должен подлезать под ленту */
.kino__copy .hero__cta{margin-bottom:0}

@media (max-width:900px){
  /* действие в ролике идёт справа: на узком кадре сдвигаем окно, иначе полэкрана занимает стена */
  .kino__v{object-position:66% center}
  .kino__ui{padding-top:30px; padding-bottom:64px}
  .kino__ticker{padding:11px 0 12px}
  .kino__ticker span{font-size:11px; letter-spacing:.14em}
}
@media (max-width:520px){
  /* кнопки в столбик разной ширины смотрятся как обрубки: тянем обе по ширине текста экрана */
  .kino__copy .hero__cta{display:grid; grid-template-columns:1fr; gap:9px; max-width:320px}
  .kino__copy .hero__cta .btn{width:100%; text-align:center; justify-content:center}
}


/* первый экран: строки выезжают по очереди.
   ⛔ Делаем только средствами CSS с animation-fill-mode:both — при мёртвом JS текст обязан
   остаться на месте и видимым, иначе экран окажется пустым. */
@media (prefers-reduced-motion:no-preference){
  .kino__copy > *{animation:kinoIn .85s cubic-bezier(.2,.7,.2,1) both}
  .kino__copy > *:nth-child(1){animation-delay:.05s}
  .kino__copy > *:nth-child(2){animation-delay:.14s}
  .kino__copy > *:nth-child(3){animation-delay:.23s}
  .kino__copy > *:nth-child(4){animation-delay:.32s}
  .kino__ticker{animation:kinoIn .9s cubic-bezier(.2,.7,.2,1) .45s both}
}
@keyframes kinoIn{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }


/* ---------- акция с картинкой ----------
   Клиент грузит кадр из панели. Карточка без картинки выглядит как раньше, поэтому
   блок не разваливается, пока фотографий нет. */
.promo__body{position:relative; z-index:2}
.promo--pic{padding:0; display:flex; flex-direction:column}
.promo--pic .promo__body{display:flex; flex-direction:column; flex:1 1 auto; padding:22px 26px 24px}
.promo__ph{position:relative; z-index:2; aspect-ratio:16/9; overflow:hidden; background:var(--sand-1)}
.promo__ph img{width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.promo--pic:hover .promo__ph img{transform:scale(1.04)}
/* заглушка вместо фото: та же фактура кожи, что в остальных блоках, притушенная */
.promo__ph--plain{background:linear-gradient(135deg,var(--sand-1),var(--cream-2))}
.promo__ph--plain img{opacity:.55; filter:saturate(.7) brightness(1.06)}
.promo--pic .promo__go{margin-top:auto; align-self:flex-start}
@media (max-width:760px){
  .promo--pic .promo__body{padding:18px 20px 20px}
}


/* ---------- полоса «Все модели» ----------
   Была карточкой в 340 px и на две трети пустой: правая половина рисовалась под фотографию,
   которой в этом блоке нет. Делаем невысокую полосу: текст слева, кнопка справа. */
.bigcard{min-height:0; height:auto; align-items:center; gap:26px;
  padding:22px 28px 22px 34px; border-radius:var(--r-lg)}
.bigcard__text{max-width:none; flex:1 1 auto; gap:4px}
.bigcard__text b{font-size:clamp(23px,2.4vw,32px)}
.bigcard__text span{font-size:14px}
.bigcard__go{flex:0 0 auto; margin-top:0; align-self:center}
/* крупная цифра на фоне жила в карточке высотой 340 px; в узкой полосе она режется краем и лезет под кнопку */
.bigcard__num{display:none}
@media (max-width:640px){
  .bigcard{flex-direction:column; align-items:flex-start; gap:16px; padding:20px 20px 22px}
  .bigcard__go{width:100%; align-self:stretch}
}


/* ---------- страховка появления ----------
   Если основной скрипт не отработал, через 2,5 с всё показывается без анимации. */
.rv-off [data-rv]{opacity:1 !important; transform:none !important}

/* ---------- подбор по подкладке и длине: оживляем сетку ----------
   Фото въезжает из лёгкого приближения, подпись приподнимается,
   при наведении на плитку соседи притухают, чтобы взгляд держался на выбранной. */
.js .covers--sm .cover img{transform:scale(1.07)}
.js .covers--sm .cover.in img{transform:none; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.covers--sm .cover__text{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.covers--sm .cover__veil{transition:background .45s}
.covers--sm .cover::after{content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 0 rgba(249,93,81,0); transition:box-shadow .35s; pointer-events:none}
@media (hover:hover){
  .covers--sm:hover .cover{opacity:.76; transition:opacity .45s, transform .45s}
  .covers--sm:hover .cover:hover{opacity:1; transform:translateY(-4px)}
  .covers--sm .cover:hover .cover__text{transform:translateY(-5px)}
  .covers--sm .cover:hover .cover__veil{background:linear-gradient(180deg, rgba(23,16,10,.10) 30%, rgba(23,16,10,.78) 100%)}
  .covers--sm .cover:hover::after{box-shadow:inset 0 0 0 2px rgba(249,93,81,.55)}
}
@media (prefers-reduced-motion:reduce){
  .js .covers--sm .cover img, .js .covers--sm .cover.in img{transform:none; transition:none}
  .covers--sm:hover .cover{opacity:1}
}


/* ---------- блок заявки: левая панель была наполовину пустой ----------
   Вместо списка, дублировавшего акции, ставим условия цифрами. Фактура кожи убирает
   ощущение плоской чёрной плашки. */
.offer__text{position:relative; overflow:hidden}
.offer__text::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../img/brand/gen-leather-texture.webp') center/cover; opacity:.10; mix-blend-mode:screen}
.offer__text::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(17,17,17,.92) 0%, rgba(17,17,17,.72) 58%, rgba(17,17,17,.42) 100%)}
.offer__text > *{position:relative; z-index:2}
.offer__nums{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 24px; margin:30px 0 0;
  align-items:start}
.offer__num b{display:block; font-size:clamp(22px,2.2vw,29px); font-weight:600; letter-spacing:-.02em;
  line-height:1.1; color:#fff; margin-bottom:6px}
.offer__num span{font-size:14px; line-height:1.45; color:#bcaea4}
.offer__hint{margin:30px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  font-size:14px; line-height:1.5; color:#9a8d84}
/* подписи полей были почти неразличимы на белом */
.offer__form label{color:#6f6259; font-size:13.5px}
@media (max-width:760px){
  .offer__nums{grid-template-columns:1fr; gap:16px; margin-top:22px}
  .offer__hint{margin-top:20px}
}

/* прямой контакт в тёмной панели заявки */
.offer__direct{margin-top:auto; padding-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.offer__direct > span{font-size:14px; color:#9a8d84; flex:1 1 100%}
.offer__tel{font-size:20px; font-weight:600; color:#fff; letter-spacing:.01em}
.offer__tel:hover{color:var(--coral)}
.soc--dark .soc__a{color:#e4d9d0}
.offer__text{display:flex; flex-direction:column}
@media (max-width:760px){
  .offer__direct{padding-top:22px; gap:12px}
  .offer__tel{font-size:19px}
}


/* ---------- подвал: порядок в колонках ----------
   Логотип был мелким и приглушённым, документы жили только в нижней строке,
   а колонка «в розницу» держала всю ширину ради двух ссылок. */
.foot__logo{height:22px; width:auto; opacity:.95; margin-bottom:18px}
.foot__col--brand p{max-width:34ch; font-size:14px; line-height:1.55}
.foot__mail{display:block; margin:-4px 0 12px; font-size:15px; color:var(--ink-2)}
.foot__mail:hover{color:var(--coral)}
.foot__h4--gap{margin-top:22px !important}
.foot__bottom span:first-child{max-width:46ch}
@media (max-width:620px){
  /* в одну колонку вордмарк растягивался во всю ширину экрана */
  .foot__logo{height:20px; max-width:210px; object-fit:contain; object-position:left center}
  .foot__bottom{gap:10px}
}


/* ---------- подвал: ровные колонки и настоящие логотипы магазинов ----------
   Первая колонка забирала 1,4 доли и сдвигала остальные к середине, справа оставалось поле. */
.foot__grid{grid-template-columns:1.15fr repeat(3, minmax(0,1fr)); gap:36px; align-items:start}
.foot__col--brand h4{margin-top:26px}
.shops{display:flex; flex-wrap:wrap; gap:10px}
.shop{display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px;
  border-radius:var(--pill); background:var(--cream); font-size:14px; color:var(--ink-2);
  transition:background .25s, transform .25s}
.shop img{width:30px; height:30px; border-radius:8px; flex:none}
.shop:hover{background:var(--cream-2); color:var(--ink); transform:translateY(-2px)}
@media (max-width:1100px){ .foot__grid{grid-template-columns:1fr 1fr; gap:28px} }
@media (max-width:620px){ .foot__grid{grid-template-columns:1fr} }


/* ---------- каталог: путь до первого товара ----------
   Крупные плитки разделов плюс блок фасетов отодвигали товар почти на три экрана.
   Разделы теперь одной компактной полосой, фасеты живут в фильтрах слева и на главной. */
.covers--row{grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.covers--row .cover{aspect-ratio:4/3; border-radius:var(--r)}
.covers--row .cover__text{left:14px; right:14px; bottom:12px}
.covers--row .cover__text b{font-size:16px}
.covers--row .cover__text i{font-size:13px}
@media (max-width:1100px){ .covers--row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .covers--row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} }


/* ---------- карточка товара в сетке ----------
   Название бывает в одну или две строки, и строка с размерами съезжала:
   в ряду карточек низ получался рваным. Прижимаем её к нижнему краю карточки. */
.card{display:flex; flex-direction:column}
.card__ph{flex:0 0 auto}
.card__price{margin-top:auto; padding-top:9px}


/* ---------- корзина: что дальше ----------
   Список позиций короче формы оформления, и слева оставалось пустое поле.
   Ставим туда порядок работы и подсказку, сколько добрать до оптовой суммы. */
/* блок лежит внутри белой карточки заказа, поэтому фон кремовый: иначе белое на белом */
.cartnext{margin-top:22px; background:var(--cream); border-radius:var(--r); padding:22px 24px 24px}
.cartnext h3{margin:0 0 16px; font-size:17px}
.cartnext__left{margin:0 0 18px; padding:13px 16px; border-radius:var(--r-sm); background:var(--white);
  font-size:15px; color:var(--ink-2)}
.cartnext__left[hidden]{display:none}
.cartnext__left b{color:var(--coral)}
.cartnext__left a{margin-left:6px; border-bottom:1px solid var(--line)}
.cartnext__left a:hover{color:var(--coral); border-color:var(--coral)}
.cartnext__steps{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:step}
.cartnext__steps li{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline}
.cartnext__steps li::before{counter-increment:step; content:counter(step);
  grid-row:1 / span 2; width:28px; height:28px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#8a6a3b}
.cartnext__steps b{font-size:15px}
.cartnext__steps span{font-size:14px; color:var(--muted); line-height:1.45}
@media (max-width:760px){ .cartnext{padding:20px 18px 22px; margin-top:16px} }


/* простой список с точками в текстовых страницах */
.dotlist{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:9px}
.dotlist li{display:flex; gap:11px; align-items:baseline; font-size:16px; color:var(--ink-2)}
.dotlist li::before{content:''; width:7px; height:7px; flex:none; border-radius:50%; background:var(--coral)}
.dotlist a{border-bottom:1px solid var(--line)}
.dotlist a:hover{color:var(--coral); border-color:var(--coral)}


/* ---------- пальцу нужно 44 пикселя ----------
   На тач-экранах поднимаем область нажатия, не трогая внешний вид: у ссылок подвала,
   значков мессенджеров и мелких кнопок она была 22–30 px по высоте. */
@media (hover:none){
  .btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
  .foot__links a, .foot__links--col a, .dotlist a{min-height:44px; display:inline-flex; align-items:center}
  .foot__phone, .foot__mail, .offer__tel, .sidecard__phone, .sidecard__mail{min-height:44px;
    display:inline-flex; align-items:center}
  .soc__a{padding:9px; margin:-9px}          /* область нажатия 44, значок прежний */
  .top__burger{width:44px; height:44px}
  .filters-toggle{min-height:44px}
  .soc--menu .soc__a, .foot__links .soc__a{padding:9px 14px; margin:0}
  .promo__go, .findbar__off, .picked__all{padding-block:12px}
  .top__brand{min-height:44px; display:inline-flex; align-items:center}
  .crumbs a, .foot__docs a{min-height:44px; display:inline-flex; align-items:center}
}


/* ⛔ Поиск в шапке каталога не сжимался ниже своей базовой ширины: на 320–375 px строка
   вылезала за экран и страница ездила вбок. Кнопку ужимаем, полю разрешаем сжиматься. */
@media (max-width:420px){
  .findbar{gap:6px}
  .findbar input{min-width:0; flex:1 1 auto; padding-inline:14px}
  .findbar button{padding:12px 14px; white-space:nowrap}
}


/* ⛔ Длинные названия («Перчатки женские, чёрный+серебро») не переносились и распирали
   карточку, а через неё и страницу: на 320 px каталог ездил вбок на 30 px. */
.card__name, .cover__text b, .promo h3, .cart__name a{overflow-wrap:anywhere}
.cathead__row{flex-wrap:wrap}

/* «Повторить заказ» (24.09): кнопка под заказом и отчёт о том, что легло в корзину */
.order__repeat{margin-top:12px}
.note.repeat p{margin:0}
.note.repeat ul{margin:8px 0 0; padding-left:18px}
.note.repeat li{margin:2px 0}
.note.repeat a{color:inherit; font-weight:600}

/* «Как определить размер» (24.09): иллюстрация рядом с текстом и таблица обхвата */
.measure{display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:24px; align-items:center; margin-bottom:8px}
.measure__pic img{display:block; width:100%; height:auto}
.label__more{margin-left:10px; font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}
.sizetab{width:100%; max-width:440px; border-collapse:collapse; margin:0 0 26px; font-size:15px}
.sizetab th{text-align:left; font-weight:400; color:var(--muted); padding:10px 0; border-bottom:1px solid var(--line)}
.sizetab td{padding:10px 0; border-bottom:1px solid var(--line); color:var(--ink)}
.sizetab td:first-child{font-weight:600; width:55%}
@media (max-width:560px){ .measure{grid-template-columns:minmax(0,1fr); justify-items:center} .measure__pic{max-width:180px} }