/* СГЕНЕРИРОВАН из style.css — не редактировать. */
/* ============================================================
   AMA LABEL — общая таблица стилей
   Блок 1: дизайн-система эталона (главная). Не менять значения.
   Блок 2: компоненты внутренних страниц.
   ============================================================ */

/* ---------------------------------------------------------------
   ФИРМЕННЫЙ ШРИФТ. Venetian 301 — из брендбука AMA.
   ⚠ В присланных файлах КИРИЛЛИЦЫ НЕТ (0 из 64 букв, нет «ё» и «№»),
   хотя в брендбуке русские образцы показаны. Поэтому подключаем его
   через unicode-range только для латиницы: витринные надписи вроде
   «Family Collection» набираются фирменным шрифтом, а русский текст
   браузер сам берёт следующим в стеке — Cormorant Garamond, близким
   по рисунку. Как только придёт кириллическая версия — снять
   unicode-range, и весь сайт перейдёт на фирменный шрифт.
   --------------------------------------------------------------- */
@font-face{
  font-family:'Venetian 301';
  src:url('/assets/fonts/venetian-301.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-007F,U+0080-00FF,U+2000-206F,U+2190-21BB;
}
@font-face{
  font-family:'Venetian 301';
  src:url('/assets/fonts/venetian-301-demi.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-007F,U+0080-00FF,U+2000-206F,U+2190-21BB;
}

/* ---------------------------------------------------------------
   ФИРМЕННАЯ ПАЛИТРА. Единственный источник цвета на сайте:
   любой новый оттенок сначала заводится здесь, а потом используется.
   Каналы *-rgb нужны для полупрозрачных наложений: rgba() не умеет
   брать альфу от готового hex, а из-за этого по файлу расползались
   десятки «rgba(44,33,29,…)» — тех же самых цветов, записанных вручную.
   --------------------------------------------------------------- */
:root{
  /* основные */
  --espresso:#2C211D;        /* тёмный: шапка, футер, основной текст */
  --espresso-deep:#241B17;   /* самый тёмный: подложки, затемнения */
  --taupe:#7E705D;           /* акцент: ссылки, обводка фокуса */
  --cream:#F1EEE3;           /* фон страницы */
  --sand:#EAE7DC;            /* фон карточек и полей */
  /* Второстепенный текст. Оттенок один, светлот — две, и это не прихоть:
     прежний #A39B8C давал на кремовом фоне контраст 2.37:1 при норме 4.5:1
     (подписи под товарами, артикулы, состав корзины читались с трудом).
     Тёмный вариант — для светлых фонов, светлый — для шапки и футера,
     где тёмный, наоборот, провалился бы. */
  --muted:#6E6659;           /* на светлом фоне: cream 4.88:1, sand 4.57:1 */
  --muted-on-dark:#A39B8C;   /* на espresso: 5.68:1 */
  /* taupe остаётся фирменным акцентом в графике и обводке фокуса, но для
     текстовых ссылок он давал 4.14:1 — ниже нормы, поэтому у текста свой,
     чуть более тёмный вариант того же оттенка. */
  --taupe-ink:#726554;       /* ссылки: cream 4.88:1, sand 4.58:1 */
  --ink:#4A3D36;             /* текст абзацев: мягче espresso, но контрастный */

  /* Цвета мессенджеров — единственные «чужие» оттенки в палитре, заведены
     осознанно: узнаваемость кнопок связи важнее монохромности.
     Взяты тёмные тона из фирменных палитр (у WhatsApp это цвет шапки
     приложения), а не самые светлые: на светло-зелёном #25D366 белый значок
     давал 1.98:1 при норме 3:1 для графики, и сам круг почти сливался
     с кремовым фоном страницы — 1.71:1. */
  --wa:#128C7E;              /* WhatsApp: белый значок 4.14:1, круг на фоне 3.56:1 */
  --wa-deep:#0F7C6F;
  --tg:#1B87BA;              /* Telegram: белый значок 4.02:1, круг на фоне 3.46:1 */
  --tg-deep:#0F6E9C;

  /* служебные состояния */
  --alert:#A8443A;           /* ошибка поля, предупреждение */
  --alert-deep:#8D3A31;      /* тот же красный, темнее — для текста на плашке */

  /* каналы для rgba() */
  --espresso-rgb:44,33,29;
  --espresso-deep-rgb:36,27,23;
  --cream-rgb:241,238,227;

  --serif:'Venetian 301', 'Cormorant Garamond', Georgia, serif;
  --sans:'Mulish', system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--espresso);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* .field { display:flex } иначе перебивает атрибут hidden, и поле адреса
   оставалось на экране при выборе ПВЗ. */
[hidden]{display:none!important}
/* safe-area: учитываем «чёлку» и скруглённые углы iPhone (viewport-fit=cover) */
.wrap{
  max-width:1440px;margin:0 auto;
  padding-left:max(48px, env(safe-area-inset-left));
  padding-right:max(48px, env(safe-area-inset-right));
}
.float{padding-bottom:env(safe-area-inset-bottom)}

:focus-visible{outline:2px solid var(--taupe);outline-offset:3px}


/* ---------------------------------------------------------------
   МОНОГРАММА. Официальный знак из брендбука лежит отдельным файлом
   и рисуется маской: один закэшированный запрос вместо 33 КБ инлайна
   на каждой странице, а заливка берётся из currentColor — знак сам
   подстраивается под тёмную шапку и светлую страницу.
   --------------------------------------------------------------- */
.brand__mark,.cover__mono,.philo__mono,.feat__mono,.quote__mono,
.ftr__mono,.empty__mono,.done__mono,.e404__mono,.cat__mono{
  background:currentColor;
  /* Официальный знак горизонтальный (166×145), прежний самодельный был
     вертикальным. Держим пропорцию явно, иначе высота берётся из умолчания
     для <svg> и знак теряется в пустом боксе. */
  aspect-ratio:166/145;height:auto;
  -webkit-mask:url('/assets/img/monogram.svg') center/contain no-repeat;
          mask:url('/assets/img/monogram.svg') center/contain no-repeat;
}

/* shared label/eyebrow */
.eyebrow{font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.7rem}

/* pill buttons */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;
  padding:18px 46px;border-radius:999px;border:1px solid currentColor;
  cursor:pointer;background:transparent;color:inherit;
  transition:background .45s var(--ease), color .45s var(--ease);
}
/* Состояния кнопки. Наведение отделено от нажатия: :active даёт короткий
   отклик на касание — на телефоне hover не существует в принципе, и без
   него кнопка кажется «мёртвой». Все состояния описаны одним набором,
   чтобы не расходились между страницами. */
.pill:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.pill--light:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream)}
.pill--solid{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.pill--solid:hover{background:var(--espresso-deep);border-color:var(--espresso-deep)}
.pill--wide{width:100%}

.pill:active{transform:translateY(1px);background:var(--espresso-deep);color:var(--cream);border-color:var(--espresso-deep)}
.pill--light:active{background:var(--sand);color:var(--espresso);border-color:var(--sand)}

/* Недоступная кнопка не должна реагировать ни на наведение, ни на нажатие:
   иначе она выглядит рабочей и человек жмёт её впустую. */
.pill:disabled,.pill[disabled],.pill[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

/* На устройствах без курсора ховер «залипает» после тапа — гасим его. */
@media(hover:none){
  .pill:hover{background:transparent;color:inherit;border-color:currentColor}
  .pill--solid:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
}


/* «Задать вопрос» в подвале — по просьбе клиента заметный вход в мессенджеры. */
.ftr__ask{margin:0 0 16px}
.ftr__ask-t{display:block;font-family:var(--sans);font-weight:700;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:12px}
.ftr__ask-row{display:flex;flex-wrap:wrap;gap:10px}
.msgbtn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:10px 18px;border-radius:999px;
  border:1px solid rgba(var(--cream-rgb),.34);
  font-size:.78rem;letter-spacing:.04em;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.msgbtn svg{width:17px;height:17px;flex:0 0 auto}
/* Значок цветной, сама кнопка остаётся в фирменной оболочке:
   так WhatsApp и Telegram узнаются, а подвал не пестрит. */
.msgbtn[href*="wa.me"] svg{fill:var(--wa)}
.msgbtn[href*="t.me"] svg{fill:var(--tg)}
.msgbtn:hover{background:rgba(var(--cream-rgb),.1);border-color:rgba(var(--cream-rgb),.6)}
.msgbtn:active{background:rgba(var(--cream-rgb),.18)}
/* тот же элемент на светлом фоне — страница контактов */
.msgbtn--light{border-color:rgba(var(--espresso-rgb),.3);color:var(--espresso)}
.msgbtn--light:hover{background:rgba(var(--espresso-rgb),.06);border-color:var(--espresso)}
.msgbtn--light:active{background:rgba(var(--espresso-rgb),.12)}


/* ---------- сворачиваемые разделы подвала ----------
   На десктопе колонки раскрыты и кнопка выглядит как обычный заголовок.
   На узком экране подвал занимал почти два экрана прокрутки, поэтому
   разделы схлопываются: видны только названия, содержимое — по тапу. */
.ftr__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:none;border:none;padding:0;cursor:default;color:inherit;text-align:left;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.74rem;margin-bottom:16px;
}
.ftr__h svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
  flex:0 0 auto;display:none;transition:transform .35s var(--ease)}

@media(max-width:900px){
  .ftr__h{cursor:pointer;min-height:48px;margin-bottom:0}
  .ftr__h svg{display:block}
  .ftr__col.open .ftr__h svg{transform:rotate(180deg)}
  /* Приём с grid-template-rows:0fr тут не годится — он схлопывает только
     первую строку, а ссылок в разделе несколько. Скрываем содержимое
     целиком: надёжно и не зависит от их количества. */
  .ftr__col .ftr__links{display:none}
  .ftr__col.open .ftr__links{display:block;padding:4px 0 12px;animation:ftrIn .3s var(--ease)}
  @keyframes ftrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .ftr__col + .ftr__col{border-top:1px solid rgba(var(--cream-rgb),.12)}
}

/* ---------- promo bar ---------- */
.promo{
  background:var(--espresso-deep);color:var(--cream);
  text-align:center;padding:11px 16px;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.32em;font-weight:600;
  position:relative;z-index:60;
  white-space:nowrap;
  overflow:hidden;
}
@media(max-width:900px){
  .promo{letter-spacing:.14em;padding:11px 12px}
}
@media(max-width:480px){
  .promo{letter-spacing:.06em;padding:11px 10px}
}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:35px;left:0;right:0;z-index:50;
  transition:background .5s var(--ease), padding .5s var(--ease), color .5s var(--ease);
  color:var(--cream);padding:38px 0 26px;
}
.hdr.scrolled{background:var(--espresso);padding:16px 0;box-shadow:0 1px 0 rgba(var(--cream-rgb),.08)}
.hdr:not(.scrolled) .hdr__row{text-shadow:0 1px 16px rgba(var(--espresso-deep-rgb),.45)}
.hdr__row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;gap:42px}
.nav a{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;opacity:.92;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;line-height:1}
.brand__mark{width:34px;height:30px;color:currentColor;display:block;margin:0 auto 9px;opacity:.95;transition:opacity .4s var(--ease),height .4s var(--ease),margin .4s var(--ease)}
.hdr.scrolled .brand__mark{opacity:0;height:0;margin-bottom:0}
.brand__name{font-family:var(--serif);font-weight:500;font-size:1.55rem;letter-spacing:.42em;padding-left:.42em}
.tools{display:flex;align-items:center;gap:22px}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4;cursor:pointer;opacity:.92;transition:opacity .3s}
.ico:hover{opacity:1}
.tool{position:relative;display:flex;align-items:center;color:inherit}
.tool__n{
  position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--cream);color:var(--espresso);
  font-size:.58rem;font-weight:700;line-height:16px;text-align:center;
  font-style:normal;display:none;
}
.tool__n.on{display:block}
.hdr.scrolled .tool__n{background:var(--cream)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;width:26px;background:none;border:none;padding:0;color:inherit}
.burger span{height:1.5px;background:currentColor;width:100%;transition:.4s var(--ease)}

/* тёмная «сплошная» шапка для внутренних страниц.
   padding рассчитан так, чтобы абсолютно центрированный логотип
   (монограмма + название + подпись) помещался целиком. */
.hdr--solid{background:var(--espresso);padding:30px 0}
.hdr--solid .hdr__row{text-shadow:none}
.hdr--solid .brand__mark{width:30px;height:26px;margin-bottom:6px}

/* ---------- hero: полноэкранный слайдер ----------
   Слайды — фоновые слои с кросс-фейдом, а не горизонтальная лента: при
   полноэкранном герое лента даёт рывок на слабых телефонах, а наплыв ровный.
   Текст лежит внизу на мягкой подложке: клиент просил, чтобы заголовок
   не ложился на лица, а снизу у всех трёх кадров — трава, пол и низ костюмов. */
.hero{
  position:relative;height:100svh;min-height:520px;
  display:flex;align-items:flex-end;justify-content:center;
  /* низ отдан точкам слайдера — контент поднимаем, чтобы они не
     упирались в край экрана и не попадали под safe-area iPhone. */
  padding-bottom:calc(clamp(84px,12vh,128px) + env(safe-area-inset-bottom));
  color:var(--cream);text-align:center;overflow:hidden;isolation:isolate;
  background:var(--espresso-deep);
}
.hero__slides{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;
  background-position:center 30%;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.1s var(--ease);
  will-change:opacity;
}
.hero__slide.is-on{opacity:1}
.hero__slide[data-img="family"]{background-image:url('/assets/img/brand/hero-family-1200.jpg');background-position:center 62%}
@media(min-width:900px){
  /* На широком экране — горизонтальный кадр: семья видна целиком,
     по краям нет пустой стены, обрезать почти нечего. */
  .hero__slide[data-img="family"]{background-image:url('/assets/img/brand/hero-family-wide-2400.jpg');background-position:center 46%}
}
/* Подложка только снизу и сверху, серединой не трогаем кадр:
   сплошное затемнение съедало цвет костюмов. */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--espresso-deep-rgb),.42) 0%,
    rgba(var(--espresso-deep-rgb),.10) 18%,
    rgba(var(--espresso-deep-rgb),0) 42%,
    rgba(var(--espresso-deep-rgb),.30) 74%,
    rgba(var(--espresso-deep-rgb),.62) 100%);
}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3.2vh,34px)}
.hero__title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:1.06;letter-spacing:.01em;
  text-shadow:0 2px 28px rgba(var(--espresso-deep-rgb),.4);
  max-width:16em;
}
.hero__title span{display:block}
.hero__kicker{
  font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:clamp(.64rem,1.15vw,.78rem);letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:.7em;
}
.hero__brand{
  white-space:nowrap;
  font-style:normal;
  font-weight:600;
  font-size:clamp(2.2rem,5.6vw,4.4rem);
  letter-spacing:.14em;
  margin-bottom:.02em;
}
.hero__living{
  white-space:nowrap;
  font-style:normal;
  font-weight:600;
  font-size:clamp(2.55rem,6.6vw,5.35rem);
  letter-spacing:.14em;
  line-height:.92;
}
.hero__line{
  font-size:clamp(1.2rem,2.5vw,1.75rem);margin-top:.4em;letter-spacing:.03em;
}
@media(max-width:560px){
  .hero__title{font-size:clamp(1.45rem,7.4vw,2.05rem);max-width:none}
  .hero__brand{font-size:clamp(1.55rem,7.6vw,2.15rem)}
  .hero__living{font-size:clamp(2.05rem,11vw,2.85rem)}
  .hero__kicker{font-size:.62rem;letter-spacing:.16em;margin-bottom:.55em}
}
.hero__dots{
  position:absolute;left:50%;bottom:calc(clamp(30px,4.4vh,42px) + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:3;display:flex;gap:10px;
}
.hero__dot{
  width:34px;height:3px;border:none;padding:0;cursor:pointer;border-radius:2px;
  background:rgba(var(--cream-rgb),.36);transition:background .35s var(--ease);
}
.hero__dot.is-on{background:var(--cream)}
.hero__dot:hover{background:rgba(var(--cream-rgb),.7)}
@media(max-width:560px){ .hero__dot{width:24px} }
}

/* ---------- categories ---------- */
.cats__track{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.cats__track::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;width:148px;text-align:center}
.cat__box{
  height:172px;border-radius:18px;background:var(--sand) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cat:hover .cat__box{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(var(--espresso-rgb),.5)}
.cat__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cat:hover .cat__img{transform:scale(1.06)}
.cat--all .cat__box{border:1px solid rgba(var(--espresso-rgb),.18)}
.cat__mono{width:62px;color:var(--espresso)}
.cat__label{margin-top:16px;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso)}
.cat--all .cat__label{display:inline-flex;align-items:center;gap:6px}

/* ---------- collection banner ---------- */
.banner{padding:30px 0 100px}
.banner__frame{
  background:var(--espresso-deep);border-radius:6px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1.15fr;min-height:560px;
}
.banner__copy{color:var(--cream);padding:74px;display:flex;flex-direction:column;justify-content:center;gap:30px}
.banner__kicker{font-family:var(--serif);font-size:clamp(2.4rem,4.4vw,4rem);line-height:.95;letter-spacing:.04em}
.banner__kicker b{font-weight:500;text-transform:uppercase;letter-spacing:.12em;display:block}
.banner__kicker i{font-style:italic;font-weight:300;display:block;margin-top:6px;font-size:1.15em}
.banner__text{max-width:340px;color:var(--muted-on-dark);font-size:.92rem;line-height:1.7}
.banner__media{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.banner__media div{background:var(--taupe) center/cover no-repeat}
.banner__dots{display:flex;gap:8px;margin-top:8px}
.banner__dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--cream);opacity:.5;display:block}
.banner__dots i:first-child{background:var(--cream);opacity:1}

/* ---------- catalog rail (главная) ---------- */
/* Отступ сверху: без него точки слайдера упирались в первый ряд карточек. */
.catalog{padding:clamp(48px,7vh,86px) 0 88px}
.catalog__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;gap:24px}
.catalog__title{font-family:var(--serif);font-size:clamp(3rem,7vw,5.6rem);font-weight:400;line-height:.9}
.catalog__rail{position:relative}
.catalog__track{display:flex;gap:26px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px}
.catalog__track::-webkit-scrollbar{display:none}
.prod{flex:0 0 auto;width:clamp(260px,28vw,330px);position:relative}
.prod__img{height:clamp(360px,40vw,480px);border-radius:8px;background:var(--sand) center/cover no-repeat;overflow:hidden;position:relative}
.prod__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.04)}
.prod__meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:18px}
/* Подписи под товаром были мелкими и бледными: название .74rem,
   цена — тонким серифом в приглушённом taupe. Укрупняем и делаем
   контрастнее, цена теперь тёмная — это главное число на карточке. */
.prod__name{font-size:.86rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--espresso)}
.prod__price{font-size:1.02rem;color:var(--espresso);white-space:nowrap;font-family:var(--serif);font-weight:500;letter-spacing:.02em}
.arrow{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(var(--espresso-rgb),.25);
  background:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s;
}
.arrow:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.catalog__nav{display:flex;gap:12px}

/* ---------- philosophy ---------- */
.philo{background:var(--sand);padding:110px 0}
.philo__grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:48px;align-items:center}
.philo__ph{height:560px;border-radius:14px;background:var(--taupe) center/cover no-repeat;filter:grayscale(.25) contrast(1.02)}
.philo__center{text-align:left}
.philo__head{display:flex;align-items:center;gap:18px;margin-bottom:40px}
.philo__title{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--espresso);font-weight:400}
.philo__title em{font-style:italic;display:block}
.philo__mono{width:78px;color:var(--espresso);flex:0 0 auto}
.philo__body p{font-size:.98rem;line-height:1.85;margin-bottom:20px;max-width:430px;color:var(--ink)}
.philo__body p.lead{font-family:var(--serif);font-size:1.35rem;line-height:1.5;color:var(--espresso)}
.philo__body p.sign{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--taupe-ink)}
.philo__center .pill{margin-top:14px}

/* ---------- footer ---------- */
.ftr{background:var(--espresso-deep);color:var(--cream);padding:40px 0 24px}
.ftr__top{display:grid;grid-template-columns:1.1fr .8fr .9fr 1.4fr 1fr;gap:32px}
.ftr__contacts li{list-style:none;display:flex;align-items:center;gap:11px;margin-bottom:10px;font-size:.92rem}
.ftr__contacts svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4;flex:0 0 auto}
.ftr__addr{margin-top:6px;font-size:.95rem;letter-spacing:.02em}
.ftr__note{margin-top:16px;font-size:.66rem;line-height:1.6;color:var(--muted-on-dark);max-width:300px}
.ftr h2{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;margin-bottom:16px}
.ftr__links a{display:block;margin-bottom:8px;font-size:.92rem;opacity:.88;transition:opacity .3s, letter-spacing .3s;overflow-wrap:anywhere}
.ftr__links a:hover{opacity:1;letter-spacing:.03em}
.ftr__news .ftr__mono{width:58px;color:var(--cream);opacity:.85;margin-bottom:14px}
.ftr__news p{font-size:.82rem;line-height:1.6;color:var(--muted-on-dark);margin-bottom:14px;max-width:330px}
.news__field{display:flex;align-items:center;border:1px solid rgba(var(--cream-rgb),.35);border-radius:999px;padding:6px 6px 6px 24px;max-width:380px}
.news__field input{flex:1;background:none;border:none;outline:none;color:var(--cream);font-family:var(--sans);font-size:.9rem;letter-spacing:.04em}
.news__field input::placeholder{color:var(--muted-on-dark)}
.news__btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--cream-rgb),.4);background:none;color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .4s,color .4s}
.news__btn:hover{background:var(--cream);color:var(--espresso)}
.news__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.news__consent{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.78rem;color:var(--muted-on-dark)}
.news__consent i{width:16px;height:16px;border-radius:50%;border:1px solid var(--muted-on-dark);flex:0 0 auto}
.news__consent span{line-height:1.5}
.news__consent u{cursor:pointer}
.ftr__div{height:1px;background:rgba(var(--cream-rgb),.16);margin:24px 0 16px}
.ftr__bottom{display:flex;justify-content:space-between;gap:24px;font-size:.74rem;color:var(--muted-on-dark);flex-wrap:wrap}
.ftr__bottom span{line-height:1.7}

/* ---------- floating ---------- */
.float{position:fixed;right:30px;bottom:30px;z-index:40;display:flex;flex-direction:column;gap:14px;align-items:center;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.float--hide{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
/* Плавающие кнопки мессенджеров. Цвета фирменные, а не «ватсаповский»
   зелёный и «телеграмный» синий: палитра сайта сведена к одной системе,
   и два чужих ярких оттенка выбивались бы из неё. Узнаваемость держится
   на силуэтах значков. */
.msg{
  width:52px;height:52px;border-radius:50%;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -14px rgba(var(--espresso-deep-rgb),.6);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.msg svg{width:24px;height:24px;fill:currentColor}
.msg--wa{background:var(--wa)}
.msg--tg{background:var(--tg)}
.msg--wa:hover{background:var(--wa-deep)}
.msg--tg:hover{background:var(--tg-deep)}
.msg:hover{transform:scale(1.07)}
.msg:active{transform:scale(.97)}
/* Кнопка «наверх» была скруглённым квадратом и рядом с круглыми
   мессенджерами выглядела из другого набора. Приводим к одной форме,
   но оставляем нейтральной и меньше — это служебное действие. */
.totop{width:44px;height:44px;border-radius:50%;background:rgba(var(--espresso-rgb),.9);color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s,background .35s;border:none;box-shadow:0 10px 24px -12px rgba(var(--espresso-deep-rgb),.5)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px);background:var(--espresso-deep)}
.totop:active{transform:translateY(0)}
.totop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* mobile menu */
.mobile{position:fixed;inset:0;background:var(--espresso);color:var(--cream);z-index:55;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;padding:70px 22px 40px;transform:translateY(-100%);transition:transform .6s var(--ease);overflow-y:auto}
.mobile.open{transform:none}
.mobile a{font-family:var(--serif);font-size:clamp(1.5rem,7vw,2rem);letter-spacing:.08em;text-align:center}
.mobile .close{position:absolute;top:24px;right:24px;font-size:2rem;cursor:pointer;background:none;border:none;color:inherit;line-height:1}
.mobile__sub{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;opacity:.7;margin-top:6px;max-width:100%}
.mobile__sub a{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em}

/* ============================================================
   БЛОК 2 — компоненты внутренних страниц
   ============================================================ */

/* отступ под фиксированную шапку */
.page{padding-top:132px}

/* хлебные крошки */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe-ink);padding:26px 0 0}
.crumbs a{opacity:.85;transition:opacity .3s}
.crumbs a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.crumbs span{opacity:.55}

/* заголовок страницы */
.phead{padding:34px 0 46px}
.phead__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;letter-spacing:.01em}
.phead__title em{font-style:italic}
.phead__sub{margin-top:18px;max-width:620px;font-size:.95rem;line-height:1.8;color:var(--ink)}
.phead--center{text-align:center}
.phead--center .phead__sub{margin-left:auto;margin-right:auto}

/* тёмная обложка раздела */
.cover{background:var(--espresso-deep);color:var(--cream);padding:88px 0;position:relative;overflow:hidden}
.cover--img{background-size:cover;background-position:center}
.cover--img::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(var(--espresso-deep-rgb),.92) 0%,rgba(var(--espresso-deep-rgb),.78) 42%,rgba(var(--espresso-deep-rgb),.45) 100%),
  linear-gradient(180deg,rgba(var(--espresso-deep-rgb),.35),rgba(var(--espresso-deep-rgb),.5))}
.cover .wrap{position:relative;z-index:2}
.cover__mono{width:54px;color:var(--cream);opacity:.9;margin-bottom:22px}
.cover__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98}
.cover__title em{font-style:italic;display:block}
.cover__text{margin-top:20px;max-width:560px;color:rgba(var(--cream-rgb),.88);font-size:.95rem;line-height:1.8}

/* Грид-треки `1fr` имеют автоминимум = min-content, поэтому длинный текст
   внутри способен распереть колонку шире контейнера. Везде, где колонка
   должна уметь сжиматься, используем minmax(0,1fr) + min-width:0 у детей. */
.shop > *,.cart > *,.pdp > *,.contacts > *,.grid > *,
.nlist > *,.feats > *,.form__grid > *,.banner__frame > *,.philo__grid > *{min-width:0}

/* ---------- сетка товаров ---------- */
.shop{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start;padding-bottom:110px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
.grid .prod{width:auto;flex:none}
/*
  Пропорция блока = пропорция снимка (4:5).
  Была фиксированная высота, и блок получался почти квадратным: object-fit
  срезал 14% высоты кадра — сверху и снизу заходя в саму вещь, у взрослых
  костюмов обрезались плечи и низ брюк. Теперь вещь видна во весь рост,
  и карточка заодно стала крупнее при той же ширине.
*/
.grid .prod__img{aspect-ratio:4/5;height:auto}

/* карточка: бейджи и «в избранное» */
.prod__badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--cream);color:var(--espresso);font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.prod__badge--sale{background:var(--espresso);color:var(--cream)}
.prod__fav{
  position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(var(--cream-rgb),.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(-4px);transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s;
}
.prod:hover .prod__fav,.prod__fav.on{opacity:1;transform:none}
.prod__fav svg{width:17px;height:17px;stroke:var(--espresso);fill:none;stroke-width:1.5}
.prod__fav.on svg{fill:var(--espresso)}
.prod__old{font-size:.72rem;color:var(--muted);text-decoration:line-through;margin-right:7px;font-family:var(--serif)}
.prod__cat{display:block;margin-top:7px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- фильтры ---------- */
.filters{position:sticky;top:120px}
.filters__close{display:none}
.filters__group{border-bottom:1px solid rgba(var(--espresso-rgb),.14);padding:20px 0}
.filters__group:first-child{padding-top:0}
.filters__h{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:0;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--espresso)}
.filters__h svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;transition:transform .4s var(--ease)}
.filters__group.closed .filters__h svg{transform:rotate(-90deg)}
.filters__body{padding-top:18px}
.filters__group.closed .filters__body{display:none}
.check{display:flex;align-items:center;gap:10px;margin-bottom:13px;cursor:pointer;font-size:.88rem;color:var(--ink)}
.check input{position:absolute;opacity:0;pointer-events:none}
.check i{width:15px;height:15px;border:1px solid rgba(var(--espresso-rgb),.4);border-radius:3px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:.3s}
.check input:checked + i{background:var(--espresso);border-color:var(--espresso)}
.check input:checked + i::after{content:"";width:7px;height:4px;border-left:1.5px solid var(--cream);border-bottom:1.5px solid var(--cream);transform:rotate(-45deg) translate(1px,-1px)}
.check input:focus-visible + i{outline:2px solid var(--taupe);outline-offset:2px}
.check b{margin-left:auto;font-weight:400;font-size:.76rem;color:var(--muted)}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size-btn{
  min-width:44px;padding:10px 12px;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:6px;background:none;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.1em;cursor:pointer;color:var(--espresso);
  transition:background .3s,color .3s,border-color .3s;
}
.size-btn:hover{border-color:var(--espresso)}
.size-btn.on{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.size-btn[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{width:30px;height:30px;border-radius:50%;border:1px solid rgba(var(--espresso-rgb),.25);cursor:pointer;position:relative;padding:0;transition:transform .3s}
.swatch:hover{transform:scale(1.08)}
.swatch.on::after{content:"";position:absolute;inset:-5px;border:1px solid var(--espresso);border-radius:50%}
.price-row{display:flex;align-items:center;gap:10px}
.price-row input{width:100%;padding:11px 12px;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:6px;background:none;font-family:var(--sans);font-size:.84rem;color:var(--espresso)}
.price-row span{color:var(--muted)}
.filters__reset{margin-top:22px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe-ink);background:none;border:none;cursor:pointer;border-bottom:1px solid currentColor;padding:0 0 2px}

/* панель сортировки */
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.bar__count{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.select{position:relative}
.select select{
  appearance:none;background:none;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:999px;
  padding:12px 42px 12px 20px;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--espresso);cursor:pointer;
}
.select svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:13px;height:13px;stroke:var(--espresso);fill:none;stroke-width:1.6;pointer-events:none}
.filters-toggle{display:none}

/* пустое состояние */
.empty{text-align:center;padding:90px 20px;grid-column:1/-1}
.empty__mono{width:64px;color:var(--taupe);margin:0 auto 26px;opacity:.75}
.empty h3{font-family:var(--serif);font-size:1.9rem;font-weight:400;margin-bottom:14px}
.empty p{color:var(--muted);font-size:.92rem;margin-bottom:30px;line-height:1.7}

.more{display:flex;justify-content:center;margin-top:64px}

/* ---------- карточка товара ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:start;padding:28px 0 96px}
.gal{display:grid;grid-template-columns:84px 1fr;gap:16px}
.gal__thumbs{display:flex;flex-direction:column;gap:12px}
.gal__thumb{height:104px;border-radius:6px;background:var(--sand) center/cover no-repeat;cursor:pointer;border:1px solid transparent;transition:border-color .3s,opacity .3s;opacity:.72}
.gal__thumb:hover{opacity:1}
.gal__thumb.on{border-color:var(--espresso);opacity:1}
.gal__main{height:clamp(460px,62vw,760px);border-radius:10px;background:var(--sand) center/cover no-repeat;cursor:zoom-in;position:relative}
.pdp__art{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.pdp__title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.4vw,3rem);line-height:1.05;margin-bottom:16px}
.pdp__price{display:flex;align-items:baseline;gap:12px;margin-bottom:32px}
.pdp__price b{font-family:var(--serif);font-size:1.7rem;font-weight:500}
.pdp__price s{color:var(--muted);font-family:var(--serif);font-size:1.1rem}
.pdp__row{margin-bottom:26px}
.pdp__label{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:13px}
.pdp__label a{color:var(--taupe-ink);font-weight:600;border-bottom:1px solid currentColor;padding-bottom:1px}
.pdp__label span{color:var(--muted);font-weight:400;letter-spacing:.06em;text-transform:none;font-size:.78rem}
.pdp__buy{display:flex;gap:12px;margin:34px 0 12px}
.pdp__buy .pill{flex:1}
.btn-fav{
  width:58px;flex:0 0 auto;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:999px;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;
}
.btn-fav:hover{border-color:var(--espresso)}
.btn-fav svg{width:20px;height:20px;stroke:var(--espresso);fill:none;stroke-width:1.4}
.btn-fav.on svg{fill:var(--espresso)}
.pdp__note{font-size:.78rem;color:var(--muted);line-height:1.7;margin-bottom:12px}
.pdp__spec{font-size:.88rem;color:var(--espresso);line-height:1.65;margin-bottom:34px}
.pdp__fit{font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:10px}
.pdp__model{font-size:.8rem;color:var(--muted);line-height:1.7;padding:16px 0 0;border-top:1px solid rgba(var(--espresso-rgb),.14)}

/* аккордеон */
.acc__item{border-bottom:1px solid rgba(var(--espresso-rgb),.16)}
.acc__h{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;cursor:pointer;padding:22px 0;text-align:left;
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso);
}
.acc__h svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;flex:0 0 auto;transition:transform .4s var(--ease)}
.acc__item.open .acc__h svg{transform:rotate(45deg)}
.acc__body{display:none;padding:0 0 24px;font-size:.9rem;line-height:1.85;color:var(--ink);max-width:560px}
.acc__item.open .acc__body{display:block}
.acc__body ul{padding-left:18px;margin:10px 0}
.acc__body li{margin-bottom:8px}

/* лайтбокс */
.lb{position:fixed;inset:0;background:rgba(var(--espresso-deep-rgb),.94);z-index:80;display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;border-radius:6px}
.lb__close{position:absolute;top:26px;right:32px;background:none;border:none;color:var(--cream);font-size:2.2rem;cursor:pointer;line-height:1}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(var(--cream-rgb),.4);color:var(--cream);width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.lb__nav--prev{left:34px}
.lb__nav--next{right:34px}

/* секция «похожие» */
.rel{padding:0 0 110px}
.rel__title{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:400;margin-bottom:38px}

/* ---------- корзина / чек-аут ---------- */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;padding-bottom:110px}
.citem{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:22px;padding:26px 0;border-bottom:1px solid rgba(var(--espresso-rgb),.14);align-items:center}
/* без min-width:0 длинные значения («Слоновая кость») распирают колонку грида */
.citem > *{min-width:0}
.citem__opts,.citem__name{overflow-wrap:anywhere}
.citem:first-child{border-top:1px solid rgba(var(--espresso-rgb),.14)}
.citem__img{height:160px;border-radius:6px;background:var(--sand) center/cover no-repeat}
.citem__name{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.citem__opts{font-size:.82rem;color:var(--muted);line-height:1.7;margin-bottom:14px}
.citem__price{font-family:var(--serif);font-size:1.15rem;white-space:nowrap;text-align:right}
.citem__rm{background:none;border:none;cursor:pointer;color:var(--muted);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid currentColor;padding:0 0 2px;transition:color .3s}
.citem__rm:hover{color:var(--espresso)}
.citem__side{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.qty{display:flex;align-items:center;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:999px;overflow:hidden}
.qty button{width:38px;height:38px;background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--espresso);transition:background .3s}
.qty button:hover{background:var(--sand)}
.qty span{min-width:36px;text-align:center;font-size:.88rem;font-weight:600}
.summary{background:var(--sand);border-radius:10px;padding:34px;position:sticky;top:130px}
.summary h3{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin-bottom:26px}
.summary__row{display:flex;justify-content:space-between;gap:16px;font-size:.9rem;margin-bottom:15px;color:var(--ink)}
.summary__row--total{border-top:1px solid rgba(var(--espresso-rgb),.18);padding-top:18px;margin-top:22px;font-size:1.05rem;color:var(--espresso)}
.summary__row--total b{font-family:var(--serif);font-size:1.5rem;font-weight:500}
.summary .pill{margin-top:26px}
.summary__note{font-size:.74rem;color:var(--muted);line-height:1.65;margin-top:16px;text-align:center}
.promo-field{display:flex;gap:10px;margin:22px 0}
.promo-field input{flex:1;min-width:0;padding:13px 18px;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:999px;background:none;font-family:var(--sans);font-size:.84rem;color:var(--espresso)}
.promo-field button{flex:0 0 auto;padding:13px 22px;border-radius:999px;border:1px solid var(--espresso);background:var(--espresso);color:var(--cream);font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* формы */
.form__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.field{display:flex;flex-direction:column;gap:9px}
.field--full{grid-column:1/-1}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-ink)}
.field input,.field textarea,.field select{
  padding:15px 18px;border:1px solid rgba(var(--espresso-rgb),.28);border-radius:8px;background:none;
  font-family:var(--sans);font-size:.92rem;color:var(--espresso);width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--espresso)}
.field input.err,.field textarea.err{border-color:var(--alert)}
.field .msg{font-size:.72rem;color:var(--alert);display:none}
.field input.err ~ .msg,.field textarea.err ~ .msg{display:block}
.fset{margin-bottom:46px}
.fset__h{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.fset__n{width:30px;height:30px;border-radius:50%;border:1px solid var(--taupe);color:var(--taupe);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-family:var(--serif);flex:0 0 auto}
.fset__h h3{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.radio-list{display:flex;flex-direction:column;gap:12px}
.radio{display:flex;align-items:flex-start;gap:13px;padding:18px 20px;border:1px solid rgba(var(--espresso-rgb),.24);border-radius:8px;cursor:pointer;transition:border-color .3s,background .3s}
.radio:hover{border-color:var(--taupe)}
.radio input{position:absolute;opacity:0;pointer-events:none}
.radio i{width:17px;height:17px;border:1px solid rgba(var(--espresso-rgb),.4);border-radius:50%;flex:0 0 auto;margin-top:2px;position:relative;transition:.3s}
.radio input:checked + i{border-color:var(--espresso)}
.radio input:checked + i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--espresso)}
.radio:has(input:checked){border-color:var(--espresso);background:rgba(234,231,220,.55)}
.radio div{flex:1}
.radio b{display:block;font-size:.86rem;font-weight:600;margin-bottom:4px}
.radio small{color:var(--muted);font-size:.78rem;line-height:1.6}
.radio em{font-style:normal;font-family:var(--serif);font-size:1rem;white-space:nowrap}

/* ---------- контент / текстовые страницы ---------- */
.prose{max-width:760px;padding-bottom:100px}
[data-page="sizes"] .prose{max-width:920px}
.prose h2{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:400;margin:52px 0 20px;line-height:1.2}
.prose h3{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:38px 0 16px}
.prose p{font-size:.97rem;line-height:1.9;margin-bottom:18px;color:var(--ink)}
.prose ul,.prose ol{padding-left:22px;margin:0 0 22px}
.prose li{font-size:.97rem;line-height:1.85;margin-bottom:11px;color:var(--ink)}
/* Ссылка в тексте: подчёркивание проявляется при наведении, при нажатии
   уходит в акцентный taupe — единое поведение для всех текстовых ссылок. */
.prose a{color:var(--espresso);border-bottom:1px solid rgba(var(--espresso-rgb),.35);
         transition:color .3s var(--ease), border-color .3s var(--ease)}
.prose a:hover{border-bottom-color:var(--espresso)}
.prose a:active{color:var(--taupe);border-bottom-color:var(--taupe)}
.prose a.pill{border-bottom:none}
.prose a.pill:hover,.prose a.pill:active{border-bottom:none}
.prose strong{font-weight:600;color:var(--espresso)}
.prose > p:first-child{font-family:var(--serif);font-size:1.28rem;line-height:1.6;color:var(--espresso)}
.callout{background:var(--sand);border-radius:10px;padding:28px 32px;margin:32px 0}
.callout p{margin-bottom:0;font-size:.92rem}
.callout--draft{background:rgba(168,68,58,.07);border:1px solid rgba(168,68,58,.25)}
.callout--draft p{color:var(--alert-deep);font-size:.85rem;line-height:1.7}

/* таблицы */
.table-wrap{overflow-x:auto;margin:26px 0 34px}
.table{width:100%;border-collapse:collapse;min-width:520px}
.table th,.table td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(var(--espresso-rgb),.16);font-size:.89rem}
.table th{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-ink);background:var(--sand)}
.table td{color:var(--ink)}
.table tr:hover td{background:rgba(234,231,220,.4)}
.table td:nth-child(n+2){font-variant-numeric:tabular-nums;white-space:nowrap}
.size-file{display:inline-block;margin:-6px 0 22px;font-size:.78rem}
.todo{color:var(--alert);font-size:.8rem}

/* принципы / фичи */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;padding:14px 0 96px}
.feat__mono{width:44px;color:var(--taupe);margin-bottom:20px}
.feat h3{font-family:var(--serif);font-size:1.45rem;font-weight:400;margin-bottom:13px}
.feat p{font-size:.92rem;line-height:1.8;color:var(--ink)}

/* фото-полоса */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:96px}
.strip div{height:420px;border-radius:10px;background:var(--taupe) center/cover no-repeat}
.strip div:nth-child(2){margin-top:44px}

/* цитата */
.quote{background:var(--sand);padding:96px 0;text-align:center}
.quote__mono{width:56px;color:var(--taupe);margin:0 auto 26px}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.4;max-width:820px;margin:0 auto;color:var(--espresso)}

/* новости */
.nlist{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;padding-bottom:100px}
.ncard__img{height:300px;border-radius:8px;background:var(--sand) center/cover no-repeat;overflow:hidden;margin-bottom:20px}
.ncard__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ncard:hover .ncard__img img{transform:scale(1.04)}
.ncard__date{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ncard__title{font-family:var(--serif);font-size:1.5rem;font-weight:400;line-height:1.25;margin-bottom:11px}
.ncard__text{font-size:.88rem;line-height:1.75;color:var(--ink)}
.ncard--big{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.ncard--big .ncard__img{height:460px;margin-bottom:0}
.ncard--big .ncard__title{font-size:clamp(1.9rem,3.4vw,2.8rem)}

/* статья */
.article{max-width:760px;padding-bottom:60px}
.article__cover{height:clamp(320px,42vw,540px);border-radius:12px;background:var(--sand) center/cover no-repeat;margin-bottom:44px}
.article__meta{display:flex;gap:20px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.article figure{margin:36px 0}
.article figure div{height:400px;border-radius:10px;background:var(--sand) center/cover no-repeat}
.article figcaption{margin-top:12px;font-size:.78rem;color:var(--muted);font-style:italic}

/* контакты */
.contacts{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:start;padding-bottom:100px}
.cblock{margin-bottom:36px}
.cblock h3{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-ink);margin-bottom:14px}
.cblock p,.cblock a{font-size:1.05rem;line-height:1.75;color:var(--espresso);display:block}
.cblock a:hover{text-decoration:underline;text-underline-offset:4px}
.cblock small{font-size:.82rem;color:var(--muted);line-height:1.7;display:block;margin-top:6px}
.map{height:440px;border-radius:12px;overflow:hidden;background:var(--sand);margin-bottom:100px}
.map iframe{width:100%;height:100%;border:0;display:block}

/* аккаунт */
.auth{max-width:440px;margin:0 auto;padding-bottom:110px}
.auth__tabs{display:flex;gap:8px;margin-bottom:34px;background:var(--sand);padding:6px;border-radius:999px}
.auth__tab{flex:1;padding:13px;border:none;background:none;border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-ink);transition:background .35s,color .35s}
.auth__tab.on{background:var(--espresso);color:var(--cream)}
.auth__pane{display:none}
.auth__pane.on{display:block}
.auth__resend{display:block;margin:18px auto 0;padding:8px;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:.82rem;color:var(--taupe-ink);text-decoration:underline;text-underline-offset:3px}

.cabinet{max-width:760px;margin:0 auto;padding-bottom:110px}
.cabinet__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:36px;padding-bottom:22px;border-bottom:1px solid rgba(var(--espresso-rgb),.08)}
.cabinet__hello{font-family:var(--serif);font-size:1.7rem;font-weight:400;color:var(--espresso)}
.cabinet__mail{margin-top:4px;font-size:.88rem;color:var(--muted)}
.cabinet__h{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-ink);margin-bottom:18px}
.cabinet__note{font-size:.95rem;line-height:1.7;color:var(--ink);margin-bottom:22px}
.cabinet__cta{margin-top:36px}
.olist{display:flex;flex-direction:column;gap:16px}
.ocard{background:var(--sand);border-radius:14px;padding:22px 24px}
.ocard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.ocard__num{font-family:var(--serif);font-size:1.25rem;color:var(--espresso)}
.ocard__when{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.ocard__items{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ocard__items li{display:flex;justify-content:space-between;gap:16px;font-size:.92rem;line-height:1.5}
.ocard__items i{font-style:normal;color:var(--muted)}
.ocard__sum{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--espresso-rgb),.1);font-weight:600}
.ostatus{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ostatus--paid{background:var(--espresso);color:var(--cream)}
.ostatus--pending{background:#d9cbb6;color:var(--espresso)}
.ostatus--new{background:#d9cbb6;color:var(--espresso)}
.ostatus--canceled{background:#ead5d0;color:#7A3B32}

/* успех заказа */
.done{text-align:center;max-width:620px;margin:0 auto;padding:40px 0 130px}
.done__mono{width:76px;color:var(--taupe);margin:0 auto 32px}
.done h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:400;margin-bottom:20px}
.done p{font-size:.98rem;line-height:1.85;color:var(--ink);margin-bottom:16px}
.done__num{display:inline-block;background:var(--sand);border-radius:999px;padding:12px 28px;font-family:var(--serif);font-size:1.2rem;margin:14px 0 30px}

/* 404 */
.e404{text-align:center;padding:120px 0 150px}
.e404__mono{width:88px;color:var(--taupe);margin:0 auto 34px;opacity:.8}
.e404 h1{font-family:var(--serif);font-size:clamp(4rem,12vw,9rem);font-weight:300;font-style:italic;line-height:1;margin-bottom:18px}
.e404 p{font-size:1rem;color:var(--ink);margin-bottom:36px}
.e404__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* тост */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,120%);z-index:90;
  background:var(--espresso-deep);color:var(--cream);padding:16px 30px;border-radius:999px;
  font-size:.8rem;letter-spacing:.06em;box-shadow:0 18px 40px -18px rgba(var(--espresso-deep-rgb),.7);
  transition:transform .5s var(--ease);max-width:calc(100vw - 40px);text-align:center;
}
.toast.show{transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .ftr__top{grid-template-columns:1fr 1fr 1fr}
  .ftr__news{grid-column:1/-1}
  .shop{grid-template-columns:minmax(0,1fr);gap:0}
  .filters{position:fixed;inset:0;z-index:70;background:var(--cream);padding:28px;overflow-y:auto;transform:translateX(-100%);transition:transform .5s var(--ease);top:0}
  .filters.open{transform:none}
  .filters__close{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
  .filters-toggle{display:inline-flex}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp{grid-template-columns:minmax(0,1fr);gap:40px}
  .gal__main{height:clamp(420px,80vw,620px)}
  .cart{grid-template-columns:minmax(0,1fr);gap:40px}
  .summary{position:static}
  .contacts{grid-template-columns:minmax(0,1fr);gap:40px}
  .feats,.nlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ncard--big{grid-template-columns:minmax(0,1fr);gap:24px}
  .ncard--big .ncard__img{height:320px}
}
@media(max-width:900px){
  .wrap{padding-left:max(26px, env(safe-area-inset-left));padding-right:max(26px, env(safe-area-inset-right))}
  .nav,.tools .tool{display:none}
  .tools .tool--cart{display:flex}
  .burger{display:flex}
  .banner__frame{grid-template-columns:minmax(0,1fr)}
  .banner__copy{padding:48px 32px}
  .banner__media{height:360px}
  .philo__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .philo__ph{height:420px}
  .philo__center{text-align:center}
  .philo__head{justify-content:center}
  .philo__body p{margin-left:auto;margin-right:auto}
  .catalog__head{flex-direction:column;align-items:flex-start;gap:20px}
  .float{right:18px;bottom:18px}
  .msg{width:48px;height:48px}
  .page{padding-top:104px}
  /* iOS Safari зумит страницу при фокусе на поле мельче 16px — фиксируем 16px */
  .field input,.field textarea,.field select,
  .price-row input,.promo-field input,.news__field input,
  input[type="search"],input[type="email"],input[type="tel"],input[type="text"],input[type="password"]{font-size:16px}
  /* nav скрыт, поэтому .tools осталась единственным flex-элементом —
     прижимаем её вправо, иначе space-between уводит иконки влево */
  .tools{margin-left:auto;gap:6px;margin-right:-10px}

  /* ---- ЗОНЫ НАЖАТИЯ ----
     Палец — это примерно 44×44 px, а не курсор мыши. Иконка корзины была
     20×20, кнопка меню — 26×15: по таким целям промахиваешься постоянно.
     Увеличиваем именно область нажатия, размер самой иконки не трогаем. */
  .tools .tool{min-width:44px;min-height:44px;justify-content:center}
  .burger{width:44px;height:44px;align-items:center;justify-content:center}
  .burger span{width:26px}
  .mobile .close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;top:14px;right:14px}
  /* пункты меню, футера и хлебных крошек: добираем высоту до пальца */
  .mobile a{min-height:44px;display:flex;align-items:center;justify-content:center}
  .mobile__sub a{min-height:44px;display:inline-flex;align-items:center}
  .ftr__links a{min-height:44px;display:flex;align-items:center;margin-bottom:2px}
  .ftr__contacts a{min-height:40px;display:inline-flex;align-items:center}
  .crumbs a{min-height:34px;display:inline-flex;align-items:center}
  /* логотип должен помещаться в одну строку на узком экране */
  .brand__name{font-size:1.05rem;letter-spacing:.26em;padding-left:.26em;white-space:nowrap}
  .brand__mark{width:27px;height:24px;margin-bottom:6px}
  .hdr--solid{padding:24px 0}
  /* на узком экране крупное фото идёт первым, миниатюры — лентой под ним */
  .gal{grid-template-columns:minmax(0,1fr);gap:14px}
  .gal__main{order:1}
  .gal__thumbs{order:2;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:10px}
  .gal__thumbs::-webkit-scrollbar{display:none}
  .gal__thumb{width:74px;height:92px;flex:0 0 auto}
  .form__grid{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(3){display:none}
  .lb__nav{width:44px;height:44px}
  .lb__nav--prev{left:12px}
  .lb__nav--next{right:12px}
}
@media(max-width:560px){
  .ftr__top{grid-template-columns:1fr 1fr}
  .pill{padding:16px 34px}
  .grid{gap:26px 14px}
  .grid .prod__img{aspect-ratio:4/5;height:auto}
  .prod__name{font-size:.8rem;letter-spacing:.06em}
  .feats,.nlist{grid-template-columns:minmax(0,1fr)}
  .citem{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .citem__img{height:118px}
  .citem__side{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .citem__price{text-align:left}
  .strip{grid-template-columns:1fr}
  .strip div:nth-child(2){margin-top:0}
  .strip div{height:320px}
  .pdp__buy{flex-direction:column}
  .btn-fav{width:100%;height:52px}
  .summary{padding:26px 22px}
  .auth__tabs{margin-bottom:26px}
}
/* очень узкие экраны (iPhone SE / 320px) */
@media(max-width:430px){
  .wrap{padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right))}
  .ftr__top{grid-template-columns:minmax(0,1fr);gap:34px}
  .ftr{padding:60px 0 30px}
  .ftr__bottom{flex-direction:column;gap:14px}
  .ftr__bottom span{text-align:left!important}
  .news__field{max-width:100%}
  .phead__title{font-size:clamp(2rem,10vw,2.6rem)}
  .cabinet__bar{flex-direction:column;align-items:flex-start}
  .bar{gap:12px}
  .bar__count{width:100%}
  .select select{padding:11px 38px 11px 16px;font-size:.68rem}
  .grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .grid .prod__img{height:auto;aspect-ratio:3/4}
  .crumbs{font-size:.62rem;gap:6px}
  .table th,.table td{padding:12px 12px;font-size:.82rem}
  .float{right:12px;bottom:12px;gap:10px}
  .msg{width:44px;height:44px}
  .msg svg{width:21px;height:21px}
  .totop{width:40px;height:40px}
  .lb{padding:16px}
  .done__num{font-size:1rem;padding:10px 20px}
  /* поле промокода: кнопка не сжимается, поэтому в узком блоке ставим её под ввод */
  .promo-field{flex-direction:column}
  .promo-field button{width:100%}
  .summary{padding:24px 18px}
}
/* ---- сенсорные устройства ----
   hover не срабатывает: элементы, которые появлялись по наведению,
   должны быть видны сразу, а тап-цели — не меньше 44px. */
@media(hover:none){
  .prod__fav{opacity:1;transform:none}
  .qty button{width:44px;height:44px}
  .size-btn{min-width:48px;padding:13px 14px}
  .swatch{width:34px;height:34px}
  .nav a::after,.prod:hover .prod__img i,.cat:hover .cat__box{transition:none}
  .ftr__links a{padding:3px 0}
}

/* ---- телефон в альбомной ориентации ----
   экран низкий: полноэкранный герой и меню не помещаются. */
@media(max-height:560px) and (orientation:landscape){
  .hero{height:auto;min-height:0;padding:100px 0 34px}
  .hero__inner{gap:16px}
  .hero__title{font-size:clamp(1.7rem,6.5vw,2.6rem)}
  .hero__sub{font-size:.66rem;letter-spacing:.3em}
  .hero .pill{padding:13px 30px}
  .mobile{gap:16px;padding:60px 22px 26px;justify-content:flex-start}
  .mobile a{font-size:1.35rem}
  .cover{padding:56px 0}
  .page{padding-top:92px}
}

/* очень узкие экраны (iPhone SE / 320px) */

/* Состав заказа на странице возврата с оплаты. */
.done__order{font-family:var(--serif);font-size:1.05rem;color:var(--taupe-ink);margin-top:-6px}
.done__items{max-width:440px;margin:26px auto 0;text-align:left}
.done__item{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(var(--espresso-rgb),.18);font-size:.9rem;color:var(--ink)}
.done__item i{font-style:normal;color:var(--muted);font-size:.82rem}
.done__item--total{border-bottom:0;padding-top:15px;font-weight:600;color:var(--espresso)}

/* ---------- карточка «добавлено в корзину» ---------- */
/* Всплывает справа сверху, под шапкой — рядом со значком корзины,
   чтобы взгляд шёл от товара к счётчику. top задаётся из JS по
   реальной высоте шапки: она фиксированная и сжимается при прокрутке. */
.pill--sm{padding:12px 26px;font-size:.66rem;letter-spacing:.13em}

.addpop{
  position:fixed;right:22px;z-index:85;width:330px;max-width:calc(100vw - 32px);
  background:var(--cream);color:var(--espresso);
  border:1px solid rgba(var(--espresso-rgb),.14);border-radius:4px;
  padding:20px 22px 22px;
  box-shadow:0 26px 60px -26px rgba(var(--espresso-deep-rgb),.55);
  transform:translateX(calc(100% + 32px));opacity:0;pointer-events:none;
  transition:transform .55s var(--ease), opacity .35s var(--ease);
}
.addpop.show{transform:translateX(0);opacity:1;pointer-events:auto}

.addpop__x{
  position:absolute;top:8px;right:8px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--muted);
}
.addpop__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.addpop__x:hover{color:var(--espresso)}

.addpop__head{
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-ink);
  margin:0 0 14px;padding-right:26px;
}
.addpop__body{display:flex;gap:14px;align-items:flex-start}
.addpop__img{
  width:66px;flex:none;aspect-ratio:3/4;object-fit:cover;
  background:var(--sand);border-radius:2px;
}
.addpop__info{display:flex;flex-direction:column;gap:4px;min-width:0}
.addpop__name{font-family:var(--serif);font-size:1rem;line-height:1.3;color:var(--espresso)}
.addpop__spec{font-size:.76rem;color:var(--muted)}
.addpop__price{font-size:.92rem;color:var(--espresso);margin-top:2px}
.addpop__btns{display:flex;gap:9px;margin-top:18px}
/* nowrap обязателен: «В корзину» содержит пробел, и в узкой кнопке
   браузер рвёт надпись на две строки, а «Продолжить» — одно слово
   и не рвётся. Кнопки получались разной высоты. */
.addpop__btns .pill{flex:1;padding:12px 10px;white-space:nowrap}

/* На узком экране карточка растягивается на всю ширину и выезжает
   сверху: сбоку ей просто некуда поместиться, не перекрыв контент. */
@media(max-width:560px){
  .addpop{right:16px;left:16px;width:auto;transform:translateY(-18px)}
  .addpop.show{transform:translateY(0)}
}

/* Уважаем системную настройку: без движения, только проявление. */
@media(prefers-reduced-motion:reduce){
  .addpop{transition:opacity .2s linear;transform:none}
  .addpop.show{transform:none}
}

/* ---------- согласие на обработку данных ---------- */
/* Раньше здесь стоял <i> — просто кружок из CSS. Выглядел как галочка,
   но отметить его было нельзя, состояния у него нет и прочитать его
   неоткуда. То есть согласие не бралось и не фиксировалось вовсе,
   а документ на /consent/ при этом ссылался на «отметку в форме».
   Теперь это настоящий input, обязательный к отметке. */
.agree{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:.82rem;line-height:1.55;color:var(--muted);margin:18px 0 16px}
.agree input{position:absolute;opacity:0;width:0;height:0}
.agree i{width:18px;height:18px;flex:0 0 auto;margin-top:1px;border-radius:50%;
  border:1px solid var(--taupe-ink);position:relative;transition:background .2s var(--ease)}
.agree i::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--espresso);transform:scale(0);transition:transform .2s var(--ease)}
.agree input:checked + i::after{transform:scale(.55)}
/* Обводка при переходе клавиатурой: без неё галочку не найти табом. */
.agree input:focus-visible + i{outline:2px solid var(--taupe);outline-offset:3px}
.agree a{color:var(--taupe-ink);text-decoration:underline}
.agree.err i{border-color:var(--alert)}
/* Подпись об отказе. Класс СВОЙ, не .msg — тот в проекте занят под круглые
   кнопки мессенджеров (52px, белый текст), а стиль ошибки поля работает
   только внутри .field. Чужой класс дал белую надпись поверх кнопки
   оплаты, видимую всегда. */
.agree__msg{display:none;font-size:.74rem;color:var(--alert);margin:-8px 0 14px}
.agree.err ~ .agree__msg{display:block}
.agree--dark{color:var(--muted-on-dark)}
.agree--dark i{border-color:var(--muted-on-dark)}
.agree--dark i::after{background:var(--cream)}
.agree--dark a{color:var(--cream)}

/* Заголовок для поисковика и озвучки экрана, скрытый от глаз.
   Нужен там, где видимая надпись декоративная: на странице бренда —
   «about the brand». Латиница и слоганы не содержат запросов, по которым
   нас ищут, а H1 у страницы должен быть один и осмысленный.
   display:none не годится — такой текст не читают ни поисковик,
   ни программы чтения с экрана. */
.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;
}

/* ---------- выпадающая подсказка города ---------- */
.suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;
  background:var(--cream);border:1px solid rgba(var(--espresso-rgb),.16);
  border-radius:4px;overflow:hidden;max-height:260px;overflow-y:auto;
  box-shadow:0 18px 40px -20px rgba(var(--espresso-deep-rgb),.5);
}
.suggest__item{
  display:block;width:100%;text-align:left;padding:11px 14px;border:0;
  background:none;cursor:pointer;font-family:var(--sans);font-size:.88rem;
  color:var(--espresso);line-height:1.35;
}
.suggest__item i{display:block;font-style:normal;font-size:.74rem;color:var(--muted);margin-top:2px}
.suggest__item:hover,.suggest__item.on{background:var(--sand)}

/* ---------- выбор ПВЗ на чек-ауте ---------- */
.pvz{margin-top:4px}
.pvz__status{margin:10px 0 0;font-size:.78rem;color:var(--muted);line-height:1.55}
.pvz__list{
  margin-top:10px;max-height:min(320px,46vh);overflow-y:auto;
  border:1px solid rgba(var(--espresso-rgb),.16);border-radius:8px;
  background:var(--cream);
}
.pvz__item{
  display:block;width:100%;text-align:left;padding:12px 14px;border:0;
  border-bottom:1px solid rgba(var(--espresso-rgb),.08);
  background:none;cursor:pointer;font-family:var(--sans);color:var(--espresso);
}
.pvz__item:last-child{border-bottom:0}
.pvz__item:hover,.pvz__item:focus-visible{background:var(--sand)}
.pvz__item b{display:block;font-size:.86rem;font-weight:600;line-height:1.35;margin-bottom:3px}
.pvz__item small{display:block;color:var(--muted);font-size:.74rem;line-height:1.45}
.pvz__item em{display:block;margin-top:4px;font-style:normal;font-size:.72rem;letter-spacing:.06em;color:var(--taupe-ink)}
.pvz__picked{
  padding:16px 18px;border:1px solid var(--espresso);border-radius:8px;
  background:rgba(234,231,220,.55);
}
.pvz__picked-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pvz__kicker{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe-ink)}
.pvz__change{
  border:0;background:none;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:.78rem;color:var(--taupe-ink);text-decoration:underline;text-underline-offset:3px;
}
.pvz__picked b{display:block;font-size:.95rem;font-weight:600;margin-bottom:6px}
.pvz__picked p{margin:0 0 6px;font-size:.88rem;line-height:1.5}
.pvz__picked small{display:block;color:var(--muted);font-size:.78rem;line-height:1.45}
.pvz__map{display:inline-block;margin-top:10px;font-size:.78rem;color:var(--taupe-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- телефон с выбором страны ---------- */
.phone__row{display:flex;gap:8px;align-items:stretch}
.phone__cc{flex:0 0 auto;max-width:44%;padding:11px 28px 11px 12px;
  border:1px solid rgba(var(--espresso-rgb),.2);border-radius:4px;background:var(--cream);
  font-family:var(--sans);font-size:.85rem;color:var(--espresso);cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.phone__box{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  border:1px solid rgba(var(--espresso-rgb),.2);border-radius:4px;background:var(--cream);padding-left:12px}
.phone__pfx{flex:0 0 auto;font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.phone__box input{flex:1 1 auto;min-width:0;border:0!important;background:none!important;
  padding-left:0!important;border-radius:0!important}
.phone__box input:focus{outline:none;box-shadow:none}
.phone__box:focus-within{border-color:rgba(var(--espresso-rgb),.5)}
@media (max-width:420px){
  .phone__cc{max-width:40%;font-size:.78rem;padding-right:24px}
}
/* --------------------------------------------------- промокод на чек-ауте */
.summary__promo{display:flex;gap:8px;margin-bottom:13px}
.summary__promo input{
  flex:1;min-width:0;padding:11px 12px;font:inherit;font-size:.9rem;
  color:var(--ink);background:transparent;text-transform:uppercase;
  border:1px solid rgba(var(--espresso-rgb),.22);border-radius:10px;
}
.summary__promo input::placeholder{text-transform:none;opacity:.55}
.summary__promo button{flex:0 0 auto;padding:11px 16px;font-size:.82rem;white-space:nowrap}
.summary__msg{display:block;font-size:.82rem;line-height:1.4;margin:-4px 0 14px;color:var(--ink);opacity:.8}
.summary__msg.err{color:#b3261e;opacity:1}
@media(max-width:480px){
  .summary__promo{flex-wrap:wrap}
  .summary__promo button{width:100%}
}