/* ============================================================
   ДИЗАЙН-СИСТЕМА — один набор токенов на весь сайт
   ============================================================ */
:root {
  color-scheme: light;

  /* — цвет: фирменная палитра — */
  --cream:#FFFBDC;  --paper:#FFFEFA;  --white:#FFFFFF;  --sand:#F2DDBE;
  --blush:#FBDACA;  --peach:#FDD6A6;  --peach-deep:#F7AF97;
  --orange:#FCA65D; --amber:#E0A350;  --yellow:#FCDB7C; --olive:#DCD074;
  --sage:#B2AD81;   --emerald:#4E897C; --forest:#3F472F;
  --blue:#B7CCD8;   --rose:#D19B9E;   --lilac:#D6BECB;  --lavender:#B394B3;
  --red:#C0231C;    --wine:#70060A;

  --header-bg:#FEFDF9;   /* шапка, подвал и плашки знака — один непрозрачный цвет */
  --brand-disc:clamp(128px,14.5vw,210px);   /* диаметр круга со знаком */
  --ink:#373535;
  --ink-soft:rgba(55,53,53,.66);
  --ink-faint:rgba(55,53,53,.44);
  --line:rgba(55,53,53,.18);
  --line-strong:rgba(55,53,53,.34);
  --on-dark:rgba(255,251,220,.74);
  --line-dark:rgba(255,251,220,.24);

  /* — шрифт: один дисплейный + один интерфейсный — */
  --display:"Playfair Display","Times New Roman",Georgia,serif;
  --ui:"Manrope",-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* — типографическая шкала — */
  --t-hero:clamp(46px,6.1vw,92px);
  --t-h2:clamp(34px,4.4vw,64px);
  --t-h2-sm:clamp(28px,3.4vw,46px);
  --t-h3:clamp(19px,1.9vw,27px);
  --t-lead:clamp(15px,1.15vw,18px);
  --t-body:15px;
  --t-small:13px;
  --t-label:11px;
  --t-micro:10px;

  /* — ритм и сетка — */
  --gutter:clamp(20px,4.4vw,68px);
  --band:clamp(76px,9vw,136px);
  --maxw:1440px;
  --pill:999px;
  --ease:cubic-bezier(.2,0,0,1);
  --fast:180ms;
  --slow:420ms;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.menu-open { overflow:hidden; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote { margin:0; }
ul,ol { padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--red); outline-offset:4px; }

/* — примитивы — */
.shell { width:min(var(--maxw),100%); margin-inline:auto; padding-inline:var(--gutter); }
.band  { padding-block:var(--band); }

.eyebrow {
  font-family:var(--ui); font-size:var(--t-label); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.h1 { font-family:var(--display); font-weight:400; font-size:var(--t-hero); line-height:1.03; letter-spacing:-.03em; text-wrap:balance; }
.h2 { font-family:var(--display); font-weight:400; font-size:var(--t-h2); line-height:1.06; letter-spacing:-.025em; text-wrap:balance; }
.h2-sm { font-family:var(--display); font-weight:400; font-size:var(--t-h2-sm); line-height:1.14; letter-spacing:-.02em; text-wrap:balance; }
.h3 { font-family:var(--display); font-weight:400; font-size:var(--t-h3); line-height:1.2; }
.accent { color:var(--emerald); font-style:italic; }
.accent-light { color:var(--peach); font-style:italic; }
.lead { font-size:var(--t-lead); line-height:1.7; color:var(--ink-soft); text-wrap:pretty; }

.btn {
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 24px; border:1px solid currentColor; border-radius:var(--pill);
  font-family:var(--ui); font-size:var(--t-label); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active { transform:scale(.97); }
.btn.solid { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.btn.solid:hover { background:var(--red); border-color:var(--red); }
.btn.ghost:hover { background:var(--ink); color:var(--cream); }
.btn.light { color:var(--cream); border-color:rgba(255,251,220,.7); }
.btn.light:hover { background:var(--cream); color:var(--forest); }

.link {
  min-height:40px; display:inline-flex; align-items:center; gap:9px;
  border-bottom:1px solid currentColor;
  font-size:var(--t-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.link span { transition:transform var(--fast) var(--ease); }
.link:hover span { transform:translateX(4px); }

/* ============================================================
   ШАПКА
   ============================================================ */
.header {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,48px);
  min-height:78px; padding:8px var(--gutter);
  background:var(--header-bg);
  border-bottom:1px solid var(--line);
}
/* Знак в шапке (Figma 1:2868): верхняя половина круга сливается с полосой
   шапки, нижняя выступает полукругом на первый экран.
   --p — прогресс скролла 0…1, его выставляет скрипт: круг съезжает
   от --disc-max к --disc-min, при котором вписывается в высоту шапки
   (видимая доля круга ниже его верхнего среза = 1 − 0.2759 = 0.7241). */
.brand-mark {
  --disc-max:var(--brand-disc);
  --disc-min:105px;   /* низ круга останавливается на 2px выше линии шапки,
                         чтобы не разрывать её собой */
  --p:0;
  --disc:calc(var(--disc-max) + (var(--disc-min) - var(--disc-max)) * var(--p));
  position:absolute; z-index:2; left:50%; top:calc(var(--disc) * -.2759);
  width:var(--disc); height:var(--disc); transform:translateX(-50%);
  border-radius:50%; background:var(--header-bg);
}
.brand-mark img { position:absolute; left:11.61%; top:44.52%; width:76.99%; height:auto; }

.nav-main { display:flex; align-items:center; gap:clamp(14px,2.1vw,32px); }
.nav-main a { position:relative; min-height:40px; display:inline-flex; align-items:center;
  font-size:var(--t-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.nav-main a::after { content:""; position:absolute; left:0; right:0; bottom:8px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform var(--fast) var(--ease); }
.nav-main a:hover::after { transform:scaleX(1); transform-origin:left; }

.header-actions { display:flex; align-items:center; gap:clamp(10px,1.5vw,22px); }
.header-actions button, .header-actions a {
  min-height:44px; display:inline-flex; align-items:center; gap:8px;
  font-size:var(--t-micro); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.header-actions b { min-width:20px; height:20px; display:grid; place-items:center;
  border:1px solid currentColor; border-radius:50%; font-size:9px; font-weight:600; font-variant-numeric:tabular-nums; }
.icon { width:17px; height:17px; flex:none; }
.menu-trigger { display:none; width:44px; height:44px; place-items:center; }
.social-links { display:flex; align-items:center; gap:2px; }
.header-actions .social-link { width:40px; min-height:40px; justify-content:center; padding:0;
  color:var(--ink-soft); border-radius:50%; transition:color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.header-actions .social-link:hover { color:var(--red); background:var(--blush); }
.header-actions .social-link:active { transform:scale(.96); }
.header-actions .social-link .icon { width:18px; height:18px; }
.vk-glyph { font-size:10px; font-weight:600; letter-spacing:-.08em; }

/* ============================================================
   ГЕРОЙ — макет Figma (node 1:2049), холст 1920×760.
   Все координаты заданы в долях от секции, поэтому композиция
   масштабируется целиком, а не разъезжается по частям.
   ============================================================ */
.hero {
  position:relative; overflow:hidden;
  min-height:min(760px,calc(100svh - 78px));
  background:#1e1f18; color:#fff;
}
.hero-image, .hero-wash { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; object-position:center 47%; filter:brightness(.52) saturate(.8) sepia(.14); }
.hero-wash { background:linear-gradient(180deg, rgba(16,17,13,.42) 0%, rgba(16,17,13,.24) 42%, rgba(16,17,13,.58) 100%); }

/* Три текстовых блока героя живут на общей сетке сайта: те же
   max-width и боковые поля, что у .shell, — заголовок попадает
   в одну вертикаль с остальными заголовками страницы. */
.hero-topline, .hero-copy, .hero-bottom {
  left:0; right:0; width:min(var(--maxw),100%); margin-inline:auto; padding-inline:var(--gutter);
}
.hero-topline { position:absolute; z-index:2; top:30px; }
.hero-topline .eyebrow { color:rgba(255,255,255,.9); }

.hero-copy { position:absolute; z-index:2; bottom:118px; }
.hero-copy .eyebrow { color:rgba(255,255,255,.82); }
.hero h1 { max-width:1130px; margin-top:18px; }
.hero h1 em { font-style:normal; }

.hero-bottom { position:absolute; z-index:3; bottom:30px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hero-tabs { display:flex; gap:clamp(18px,2.6vw,36px); overflow-x:auto; scrollbar-width:none; }
.hero-tabs::-webkit-scrollbar { display:none; }
.hero-tabs button { flex:none; min-height:34px; display:inline-flex; align-items:center;
  border-bottom:1px solid transparent; color:rgba(255,255,255,.6);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.hero-tabs button:hover, .hero-tabs button.active { color:#fff; border-color:currentColor; }

/* ============================================================
   О ПРОЕКТЕ
   ============================================================ */
.about {
  display:grid; place-items:center; align-content:center; gap:0;
  padding:clamp(80px,8.5vw,124px) var(--gutter); text-align:center; background:var(--white);
}
.about h2 { max-width:900px; margin-top:16px; font-family:var(--display); font-weight:400;
  font-size:clamp(30px,3.7vw,54px); line-height:1.24; letter-spacing:-.02em; text-wrap:balance; }
.about .lead { max-width:62ch; margin-top:24px; font-size:var(--t-small); }
.about .btn { margin-top:30px; }

/* ============================================================
   КАТАЛОГ
   ============================================================ */
.catalog { background:var(--cream); }
.cat-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.cat-head h2 { margin-top:12px; }
.cat-head > p { max-width:44ch; }

.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:34px; padding-block:14px; border-block:1px solid var(--line); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:9px 17px; border:1px solid var(--line-strong); border-radius:var(--pill);
  font-size:var(--t-label); letter-spacing:.05em; color:var(--ink-soft);
  transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.chip:hover { border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--cream); }
.sort { display:flex; align-items:center; gap:9px; font-size:var(--t-label); letter-spacing:.05em; color:var(--ink-soft); }
.sort select { font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line-strong); padding:4px 2px; cursor:pointer; }
.count { margin-top:18px; font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-variant-numeric:tabular-nums; }

.products { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(30px,3.4vw,54px) clamp(14px,2vw,30px); margin-top:24px; }
.products.is-loading { pointer-events:none; }
.prod { display:flex; flex-direction:column; }
.prod[hidden] { display:none; }

.prod-skeleton { min-width:0; }
.skeleton-stamp, .skeleton-foot span, .skeleton-foot i, .skeleton-button,
.product-loading-visual, .product-loading-kicker, .product-loading-title,
.product-loading-line, .product-loading-price, .product-loading-button {
  position:relative; overflow:hidden;
  background:linear-gradient(105deg, rgba(255,255,255,.04) 10%, rgba(255,255,255,.13) 26%, rgba(255,255,255,.04) 42%);
  background-color:rgba(55,55,55,.09);
  background-size:220% 100%;
  animation:skeleton-shimmer 2.2s ease-in-out infinite;
}
.skeleton-stamp { aspect-ratio:300/380; }
.skeleton-foot { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:16px; }
.skeleton-foot span { width:46%; height:22px; }
.skeleton-foot i { width:22%; height:16px; }
.skeleton-button { width:100%; height:44px; margin-top:12px; }
.product-loading-skeleton { display:none; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(36px,5vw,78px); }
#productPage.is-product-loading .product-grid { display:none; }
#productPage.is-product-loading .product-loading-skeleton { display:grid; }
.product-loading-visual { aspect-ratio:300/380; }
.product-loading-copy { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:clamp(12px,4vw,52px); }
.product-loading-kicker { width:28%; height:14px; }
.product-loading-title { width:68%; height:58px; }
.product-loading-line { width:94%; height:16px; }
.product-loading-line.short { width:72%; }
.product-loading-price { width:24%; height:24px; margin-top:18px; }
.product-loading-button { width:100%; height:46px; margin-top:12px; }
@keyframes skeleton-shimmer {
  0% { background-position:130% 0; }
  100% { background-position:-30% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-stamp, .skeleton-foot span, .skeleton-foot i, .skeleton-button,
  .product-loading-visual, .product-loading-kicker, .product-loading-title,
  .product-loading-line, .product-loading-price, .product-loading-button { animation:none; }
}

/* марка */
.flip { display:block; position:relative; aspect-ratio:300/380; -webkit-perspective:1400px; perspective:1400px; }
.flip-in { position:absolute; inset:0; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transition:transform var(--slow) cubic-bezier(.2,.75,.25,1); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip:focus-within .flip-in { -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.side { position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.side.back { -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }

/* Зубцовка марки. Один и тот же приём на товарной марке и на карточке
   символа в «Азбуке» — маска выгрызает полукружия по краям фона. */
.stamp, .aside-card {
  --notch:7px; --step:18px;
  -webkit-mask:
    radial-gradient(var(--notch) at 0 50%, #0000 98%, #000) 0 / 100% var(--step) repeat-y,
    radial-gradient(var(--notch) at 100% 50%, #0000 98%, #000) 0 / 100% var(--step) repeat-y,
    radial-gradient(var(--notch) at 50% 0, #0000 98%, #000) var(--step) 0 / var(--step) 100% repeat-x,
    radial-gradient(var(--notch) at 50% 100%, #0000 98%, #000) var(--step) 0 / var(--step) 100% repeat-x;
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(var(--notch) at 0 50%, #0000 98%, #000) 0 / 100% var(--step) repeat-y,
    radial-gradient(var(--notch) at 100% 50%, #0000 98%, #000) 0 / 100% var(--step) repeat-y,
    radial-gradient(var(--notch) at 50% 0, #0000 98%, #000) var(--step) 0 / var(--step) 100% repeat-x,
    radial-gradient(var(--notch) at 50% 100%, #0000 98%, #000) var(--step) 0 / var(--step) 100% repeat-x;
  mask-composite:intersect;
}
.stamp { height:100%; background:var(--field); padding:6%; }
.stripes { position:relative; height:100%; overflow:hidden;
  background:repeating-linear-gradient(90deg, var(--s1) 0 calc(100% / 26), var(--s2) calc(100% / 26) calc(100% / 13)); }
.window { position:absolute; inset:7% 13% 31% 13%; border-radius:var(--pill) var(--pill) 4px 4px;
  overflow:hidden; background:var(--white); }
.window img { width:100%; height:100%; object-fit:cover; border-radius:inherit;
  transform:rotate(var(--rot,0deg)) scale(var(--rot-scale,1)); }
.window > .product-lightbox { width:100%; height:100%; }
.banner { position:absolute; inset:auto -7% -1% -7%; pointer-events:none; }
.banner text { font-family:var(--display); letter-spacing:.02em; }

.backing { height:100%; background:var(--back); color:var(--backink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:10% 12%; gap:8px; }
.b-name { font-family:var(--display); font-size:clamp(13px,1.5vw,17px); letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-c); }
.b-msg { font-size:clamp(11px,1vw,13px); line-height:1.55; }
.orn { width:62%; color:var(--accent-c); margin-block:2px; }
.b-sign { font-family:var(--display); font-style:italic; font-size:12px; opacity:.92; }

.tag { position:absolute; z-index:2; top:9px; left:9px;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  padding:4px 10px; border:1px solid var(--line-strong); border-radius:var(--pill); background:var(--white);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.flip:hover .tag, .flip:focus-visible .tag, .flip:focus-within .tag { visibility:hidden; }
.tag.mirror { background:var(--blue); border-color:transparent; }
.tag.hit    { background:var(--yellow); border-color:transparent; }
.tag.new    { background:var(--blush); border-color:transparent; }

.prod-foot { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:16px; }
.prod-foot h3 { font-family:var(--display); font-size:20px; font-weight:400; }
.prod-foot .price { flex:none; font-size:var(--t-small); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.prod .add { width:100%; margin-top:12px; padding-inline:12px; }
.prod .add.added { background:var(--emerald); border-color:var(--emerald); color:var(--white); }
.more-row { display:flex; justify-content:center; margin-top:clamp(40px,4.5vw,64px); }

/* ============================================================
   ПОДАРОК — состояния
   ============================================================ */
.states { background:var(--blush); }
.states-grid { display:grid; grid-template-columns:.72fr 1fr; align-items:start; gap:clamp(48px,8vw,124px); }
.states-grid h2 { margin-top:20px; }
.states-list { border-top:1px solid var(--ink); }
.states-list a, .states-list button { width:100%; min-height:78px; display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:20px; padding:0; text-align:left;
  border-bottom:1px solid var(--ink); font-family:var(--display); font-size:clamp(24px,2.9vw,40px);
  transition:padding-left 220ms var(--ease); }
.states-list a:hover, .states-list button:hover { padding-left:14px; }
.states-list small { font-family:var(--ui); font-size:var(--t-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }

/* ============================================================
   НАС УЖЕ ВСТРЕЧАЛИ
   ============================================================ */
.proof { background:var(--cream); }
.proof-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.5fr); align-items:end;
  gap:48px; margin-bottom:clamp(44px,5.5vw,72px); }
.proof-head h2 { margin-top:12px; }
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }
.proof-item { min-height:210px; padding:34px 26px; border-right:1px solid var(--line); }
.proof-item:last-child { border-right:0; }
.proof-value { display:block; min-height:74px; font-family:var(--display); font-weight:400;
  font-size:clamp(32px,3.4vw,52px); line-height:1.15; letter-spacing:-.02em; }
.proof-item p { max-width:24ch; font-size:var(--t-small); line-height:1.6; color:var(--ink-soft); }

/* ============================================================
   АВТОРЫ
   ============================================================ */
.authors { background:var(--forest); color:var(--cream); }
.authors-in { display:grid; grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  align-items:center; gap:clamp(40px,6vw,96px); }
.arch-photo { border-radius:var(--pill) var(--pill) 8px 8px; overflow:hidden;
  aspect-ratio:4/4.7; background:var(--sage); border:1px solid var(--line-dark); }
.arch-photo img { width:100%; height:100%; object-fit:cover; }
.authors .eyebrow { color:rgba(255,251,220,.6); }
.authors h2 { margin-top:16px; }
.authors p.body { max-width:52ch; margin-top:22px; color:var(--on-dark); font-size:var(--t-small); line-height:1.8; }
.authors .sign { margin-top:22px; font-family:var(--display); font-style:italic; font-size:17px; color:var(--peach); }
.authors .btn { margin-top:28px; }

/* ============================================================
   КАК ЭТО РАБОТАЕТ
   ============================================================ */
.how { background:var(--forest); color:var(--cream); }
/* «Катя и Карина» и «Как это работает» одного цвета и читаются одним полем,
   поэтому между ними нужен один вертикальный отступ, а не два подряд */
.authors + .how { padding-top:0; }
.how-head { max-width:920px; }
.how-head h2 { margin-top:14px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(44px,5.5vw,72px); background:var(--line-dark); border:1px solid var(--line-dark); }
.step { min-height:370px; display:flex; flex-direction:column; padding:clamp(26px,3.6vw,50px); background:var(--forest); }
/* Ритм карточки задан сверху фиксированными шагами: номер → иконка → заголовок.
   Так заголовки трёх карточек стоят на одном уровне, а свободное место
   собирается внизу, под текстом, а не вокруг иконки. */
.step-no { margin-bottom:34px; color:var(--peach); font-size:var(--t-label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; }
/* Слот под иконку — 100×100, как в макете. Сами иконки — экспорт из Figma
   (те же файлы лежат в assets/icons/), стройка #FBDACA задана в самом SVG. */
.step-icon { flex:none; height:100px; display:flex; align-items:center; margin-bottom:12px; }
.step-icon svg { display:block; overflow:visible; }
.step h3 { font-family:var(--display); font-weight:400; font-size:clamp(26px,2.8vw,38px); }
.step p:not(.step-no) { max-width:30ch; margin:14px 0 auto; color:var(--on-dark); font-size:var(--t-small); line-height:1.7; }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.foot { background:var(--white); border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,52px); padding-block:clamp(48px,5.5vw,76px); }
/* Знак в подвале */
.foot-mark { position:relative; display:block; width:65px; height:65px;
  border-radius:50%; overflow:hidden; background:var(--forest); }
.foot-mark img { width:100%; height:100%; object-fit:cover; }
.foot h4 { font-size:var(--t-label); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:18px; }
.foot li { margin-bottom:10px; }
.foot li a { font-size:var(--t-small); }
.foot li a:hover { color:var(--emerald); }
.foot-note { max-width:32ch; margin-top:18px; font-size:var(--t-small); line-height:1.65; color:var(--ink-soft); }
.foot-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding-block:20px 34px; border-top:1px solid var(--line);
  font-size:var(--t-label); letter-spacing:.06em; color:var(--ink-soft); }

/* уведомление */
.toast { position:fixed; z-index:60; left:50%; bottom:28px; transform:translate(-50%,14px);
  padding:13px 24px; border-radius:var(--pill); background:var(--ink); color:var(--cream);
  font-size:var(--t-small); opacity:0; pointer-events:none;
  transition:opacity 220ms var(--ease), transform 220ms var(--ease); }
.toast.on { opacity:1; transform:translate(-50%,0); }

/* ============================================================
   КОРЗИНА — панель и оформление в три поля
   ============================================================ */
body.drawer-open { overflow:hidden; }
.drawer-backdrop { position:fixed; z-index:80; inset:0; border:0; background:rgba(31,31,27,.45);
  opacity:0; pointer-events:none; transition:opacity 230ms var(--ease); }
.drawer-backdrop.visible { opacity:1; pointer-events:auto; }
.cart-drawer { position:fixed; z-index:90; inset:0 0 0 auto; width:min(460px,100%);
  display:flex; flex-direction:column; padding:28px var(--gutter) 28px;
  background:var(--header-bg); transform:translateX(103%);
  transition:transform 260ms var(--ease); overflow-y:auto; }
.cart-drawer.visible { transform:translateX(0); }
.drawer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-bottom:20px; border-bottom:1px solid var(--line); }
.drawer-close { width:44px; height:44px; display:grid; place-items:center; margin:-8px -8px 0 0; }
.drawer-empty { flex:1; display:grid; place-items:center; align-content:center; gap:16px;
  text-align:center; color:var(--ink-soft); }
.drawer-empty p { max-width:34ch; }
.drawer-empty .h2-sm { color:var(--ink); }
.cart-lines { flex:1; min-height:0; padding-block:6px; }
.cart-line { display:grid; grid-template-columns:78px 1fr; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line); }
.cart-line img { width:78px; height:98px; object-fit:cover; }
.cart-line h3 { font-family:var(--display); font-size:19px; font-weight:400; }
.cart-line p { margin-top:4px; font-size:var(--t-small); color:var(--ink-soft); }
.qty { width:fit-content; display:grid; grid-template-columns:32px 32px 32px; align-items:center;
  margin-top:12px; border:1px solid var(--line); }
.qty button { height:32px; }
.qty span { text-align:center; font-size:var(--t-small); font-variant-numeric:tabular-nums; }
.checkout { display:grid; gap:12px; padding-top:20px; border-top:1px solid var(--line); }
.cart-total { display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--t-small); }
.cart-total b { font-family:var(--display); font-size:24px; font-weight:400; }
.checkout label, .form label { display:grid; gap:6px;
  font-size:var(--t-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.checkout input, .form input, .form textarea, .form select {
  width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--line);
  border-radius:0; background:var(--white); color:var(--ink);
  font:inherit; font-size:var(--t-body); letter-spacing:0; text-transform:none; outline:0; }
.form textarea { min-height:120px; resize:vertical; }
.checkout input:focus, .form input:focus, .form textarea:focus, .form select:focus { border-color:var(--ink); }
.checkout > small { font-size:var(--t-label); color:var(--ink-soft); text-align:center; }
.checkout .consent-check, .form .consent-check { display:flex; align-items:flex-start; gap:9px; font-size:var(--t-label); line-height:1.5; letter-spacing:0; text-transform:none; font-weight:400; color:var(--ink-soft); }
.checkout .consent-check input, .form .consent-check input { width:18px; min-width:18px; min-height:18px; margin-top:2px; padding:0; accent-color:var(--emerald); }
.consent-check a { text-decoration:underline; text-underline-offset:3px; }
.checkout-error { margin:0; padding:11px 13px; border:1px solid rgba(192,35,28,.45); color:var(--accent); font-size:var(--t-small); line-height:1.45; }

/* ============================================================
   ПОДТВЕРЖДЕНИЕ ЗАКАЗА
   ============================================================ */
.order-confirmation { max-width:760px; padding-block:clamp(70px,10vw,140px) clamp(80px,10vw,150px); }
.order-confirmation h1 { margin-top:12px; font-family:var(--display); font-weight:400; font-size:clamp(42px,6vw,78px); line-height:1.04; letter-spacing:-.03em; }
.order-confirmation .lead { max-width:52ch; margin-top:22px; }
.order-confirmation-card { max-width:430px; margin-top:42px; padding:28px; background:var(--cream); border:1px solid var(--line); }
.order-number { margin-top:7px; font-family:var(--display); font-size:clamp(32px,5vw,52px); line-height:1; }
.order-total { margin-top:14px; color:var(--ink-soft); }
.order-confirmation-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   ============================================================ */
.crumbs { display:flex; flex-wrap:wrap; gap:8px; padding-top:26px;
  font-size:var(--t-label); letter-spacing:.06em; color:var(--ink-soft); }
.crumbs a:hover { color:var(--ink); }
.crumbs span[aria-current] { color:var(--ink); }

.page-head { padding-block:clamp(34px,4vw,58px) clamp(30px,3.4vw,48px); }
.page-head h1 { margin-top:12px; font-family:var(--display); font-weight:400;
  font-size:clamp(38px,5vw,72px); line-height:1.04; letter-spacing:-.03em; text-wrap:balance; }
.page-head .lead { max-width:62ch; margin-top:20px; }
.page-head.on-cream { background:var(--cream); }

.section-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.5fr);
  align-items:end; gap:48px; margin-bottom:clamp(32px,4vw,56px); }
.section-head h2 { margin-top:12px; }

/* сетка «две колонки: текст и картинка» */
.split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  align-items:center; gap:clamp(36px,6vw,96px); }
.split.reverse > :first-child { order:2; }
.split h2 { margin-top:14px; }
.split p + p { margin-top:16px; }
.split .body { max-width:56ch; margin-top:20px; color:var(--ink-soft); line-height:1.8; }
.split .btn { margin-top:28px; }

/* плитки — разграфка линиями, без заливки и рамок-коробок */
.tiles { --cols:3; display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  border-block:1px solid var(--line); }
.tiles.four { --cols:4; }
.tiles.two  { --cols:2; }
.tile { display:flex; flex-direction:column; gap:10px;
  padding:clamp(24px,3vw,40px) clamp(18px,1.8vw,30px);
  border-left:1px solid var(--line); }
.tile h3 { font-family:var(--display); font-weight:400; font-size:23px; }
.tile p { font-size:var(--t-small); line-height:1.7; color:var(--ink-soft); }
.tile .link, .tile > a:last-child { margin-top:auto; padding-top:16px; align-self:flex-start; }
/* первая колонка без вертикальной линии, вторая строка — с горизонтальной */
.tiles > .tile:nth-child(3n+1) { border-left:0; }
.tiles > .tile:nth-child(n+4) { border-top:1px solid var(--line); }
.tiles.four > .tile:nth-child(3n+1) { border-left:1px solid var(--line); }
.tiles.four > .tile:nth-child(4n+1) { border-left:0; }
.tiles.four > .tile:nth-child(n+4) { border-top:0; }
.tiles.four > .tile:nth-child(n+5) { border-top:1px solid var(--line); }
.tiles.two > .tile:nth-child(odd) { border-left:0; }
.tiles.two > .tile:nth-child(n+3) { border-top:1px solid var(--line); }

/* нумерованные условия */
.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line); }
.facts div { padding:clamp(24px,3vw,40px) clamp(16px,1.6vw,26px); border-left:1px solid var(--line); }
.facts div:first-child { border-left:0; }
.facts h3 { font-family:var(--display); font-weight:400; font-size:20px; }
.facts p { margin-top:8px; font-size:var(--t-small); line-height:1.65; color:var(--ink-soft); }
.payment-badges { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; }
.payment-badges span { display:inline-flex; align-items:center; justify-content:center; min-height:42px;
  padding:8px 4px; font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; }
/* Логотипы платёжных систем. Если файл отсутствует, браузер покажет alt —
   он унаследует оформление плашки, поэтому вёрстка не ломается. */
.payment-badges img { display:block; height:22px; width:auto; }
.payment-badges.compact { gap:8px; margin-top:2px; justify-content:center; }
.payment-badges.compact span { min-height:34px; padding:6px 4px; }
.payment-badges.compact img { height:16px; }

/* аккордеон */
.accordion { border-top:1px solid var(--line); }
.accordion details { border-bottom:1px solid var(--line); }
.accordion summary { list-style:none; cursor:pointer; min-height:72px; display:flex;
  align-items:center; justify-content:space-between; gap:20px; padding-block:18px;
  font-family:var(--display); font-size:clamp(19px,1.9vw,25px); }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::after { content:"+"; flex:none; font-family:var(--ui); font-size:22px; color:var(--ink-soft); }
.accordion details[open] summary::after { content:"−"; }
.accordion .answer { padding-bottom:26px; max-width:74ch; color:var(--ink-soft); line-height:1.8; }
.accordion .answer p + p { margin-top:12px; }

/* форма-заявка */
.form { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label.wide, .form > .btn, .form > .form-done, .form > .form-note { grid-column:1 / -1; }
.form-note { font-size:var(--t-small); color:var(--ink-soft); }
.form-done { padding:16px 18px; background:var(--cream); border:1px solid var(--line);
  font-size:var(--t-small); }

/* карточка товара */
.product-grid { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(36px,5vw,84px); align-items:start; }
.product-stamp-wrap { position:relative; aspect-ratio:300/380; }
.product-stamp-wrap .stamp { height:100%; }
.product-shots { display:flex; flex-wrap:nowrap; gap:10px; margin-top:14px; overflow-x:auto;
  scrollbar-width:thin; }
.product-shots figure { flex:1 1 0; min-width:0; margin:0; }
.product-shots figure:only-child { flex:0 1 160px; max-width:160px; }
.product-shots a, .product-lightbox { display:block; }
.product-shots img { width:100%; aspect-ratio:1; object-fit:cover; background:var(--white); }
.product-video a { position:relative; }
.product-video img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--white); }
.product-video-play { position:absolute; right:0; bottom:0; display:block; width:21px !important;
  height:21px !important; opacity:1; }
.pswp__video { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
.product-shots figcaption { margin-top:6px; font-size:var(--t-label); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); }

.product-info h1 { margin-top:10px; font-family:var(--display); font-weight:400;
  font-size:clamp(34px,4vw,58px); line-height:1.06; letter-spacing:-.025em; }
.product-message { margin-top:20px; padding-left:18px; border-left:2px solid var(--emerald);
  font-family:var(--display); font-size:clamp(18px,1.6vw,23px); line-height:1.5; }
.product-legend { margin-top:24px; max-width:60ch; color:var(--ink-soft); line-height:1.8; }
.product-legend p + p { margin-top:12px; }
.product-buy { display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.product-buy .price { font-family:var(--display); font-size:34px; }
.product-buy .btn { flex:none; }
.product-craft { margin-top:14px; font-size:var(--t-small); color:var(--ink-soft); }
.spec { margin-top:28px; border-top:1px solid var(--line); }
.spec div { display:flex; justify-content:space-between; gap:24px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line); font-size:var(--t-small); }
.spec dt { color:var(--ink-soft); }
.spec dd { margin:0; text-align:right; }
.legal-spec dd { max-width:58%; overflow-wrap:anywhere; }
.legal-copy { max-width:860px; padding-bottom:clamp(70px,9vw,130px); }
.legal-copy h2 { margin-top:38px; font-family:var(--display); font-size:clamp(25px,3vw,36px); font-weight:400; }
.legal-copy p { max-width:74ch; margin-top:14px; color:var(--ink-soft); line-height:1.8; }

/* азбука символов */
.abc-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--line); }
.abc-card { display:flex; flex-direction:column; gap:8px; min-height:200px;
  padding:clamp(24px,3vw,40px) clamp(18px,1.8vw,30px);
  border-left:1px solid var(--line);
  transition:background-color var(--fast) var(--ease); }
.abc-card:hover { background:var(--cream); }
.abc-grid > .abc-card:nth-child(3n+1) { border-left:0; }
.abc-grid > .abc-card:nth-child(n+4) { border-top:1px solid var(--line); }
.abc-card h3 { font-family:var(--display); font-weight:400; font-size:26px; }
.abc-card p { font-size:var(--t-small); line-height:1.7; color:var(--ink-soft); }
.abc-card .eyebrow { margin-top:auto; color:var(--emerald); }

.symbol-hero { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(36px,5vw,84px); align-items:center; }
.symbol-hero h1 { margin-top:12px; font-family:var(--display); font-weight:400;
  font-size:clamp(40px,5.2vw,76px); line-height:1.02; letter-spacing:-.03em; }
.symbol-message { margin-top:22px; font-family:var(--display); font-style:italic;
  font-size:clamp(19px,1.9vw,26px); line-height:1.5; color:var(--emerald); }
.symbol-intro .lead { margin-top:26px; max-width:46ch; }

/* Шапка с иллюстрацией: весь текст слева, образ справа во всю высоту блока.
   Есть не у всех символов — см. art= в build-pages.py */
.symbol-hero.has-art { grid-template-columns:minmax(0,.86fr) minmax(0,1fr); }
.symbol-art { aspect-ratio:3/2; overflow:hidden; border-radius:12px; background:var(--sand); }
.symbol-art img { display:block; width:100%; height:100%; object-fit:cover; }

/* Текст символа: проза слева, карточка «кому подходит» справа.
   Раньше правая половина полосы пустовала на всю длину статьи. */
.symbol-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  gap:clamp(36px,5vw,84px); align-items:start; padding-bottom:clamp(48px,6vw,90px); }
.symbol-body .prose h2:first-child { margin-top:0; }
.symbol-aside { position:sticky; top:98px; }
/* Марка, а не плашка: рамки нет вовсе, форму держит зубцовка из общей маски.
   Зубцы мельче товарных: карточка крупнее, крупный шаг выглядел бы грубо. */
.aside-card { padding:clamp(30px,3.2vw,40px); background:var(--cream);
  --notch:6px; --step:16px; }
.aside-card ul { margin-top:16px; display:grid; gap:10px; }
.aside-card li { padding-left:20px; position:relative; color:var(--ink-soft); line-height:1.7; }
.aside-card li::before { content:""; position:absolute; left:0; top:11px; width:7px; height:7px;
  background:var(--peach-deep); transform:rotate(45deg); }
.aside-card .link { margin-top:24px; }
.prose { max-width:68ch; }
.prose h2 { margin-top:clamp(38px,4vw,58px); font-family:var(--display); font-weight:400;
  font-size:clamp(24px,2.4vw,34px); }
.prose p { margin-top:14px; color:var(--ink-soft); line-height:1.85; }
.prose ul { margin-top:14px; display:grid; gap:10px; }
.prose li { padding-left:20px; position:relative; color:var(--ink-soft); line-height:1.7; }
.prose li::before { content:""; position:absolute; left:0; top:11px; width:7px; height:7px;
  background:var(--peach-deep); transform:rotate(45deg); }

/* отзывы */
.quotes { columns:3; column-gap:clamp(16px,2vw,28px); }
.quote { break-inside:avoid; margin-bottom:clamp(20px,2.4vw,32px);
  padding-bottom:clamp(20px,2.4vw,32px); border-bottom:1px solid var(--line); }
.quote p { font-family:var(--display); font-size:18px; line-height:1.55; }
.quote footer { margin-top:14px; font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); }

/* полоса-призыв в Telegram (есть на каждой странице по чек-листу) */
.tg { background:var(--forest); color:var(--cream); }
.tg-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:28px; padding-block:clamp(48px,5vw,76px); }
.tg h2 { max-width:20ch; }
.tg p { max-width:44ch; margin-top:14px; color:var(--on-dark); font-size:var(--t-small); line-height:1.7; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media (max-width:1080px) {
  .products { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
  .proof-item:nth-child(2) { border-right:0; }
  .proof-item:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .header-actions span { display:none; }
  .tiles, .tiles.four { --cols:2; }
  /* :nth-child(n) — чтобы сброс был не слабее базовых правил вроде :nth-child(3n+1) */
  .tiles > .tile:nth-child(n), .tiles.four > .tile:nth-child(n) { border-left:1px solid var(--line); border-top:0; }
  .tiles > .tile:nth-child(odd), .tiles.four > .tile:nth-child(odd) { border-left:0; }
  .tiles > .tile:nth-child(n+3), .tiles.four > .tile:nth-child(n+3) { border-top:1px solid var(--line); }
  .abc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .abc-grid > .abc-card:nth-child(n) { border-left:1px solid var(--line); border-top:0; }
  .abc-grid > .abc-card:nth-child(odd) { border-left:0; }
  .abc-grid > .abc-card:nth-child(n+3) { border-top:1px solid var(--line); }
  .quotes { columns:2; }
  .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .facts div:nth-child(3) { border-left:0; }
  .facts div:nth-child(n+3) { border-top:1px solid var(--line); }
}

@media (max-width:860px) {
  .authors-in, .states-grid, .proof-head { grid-template-columns:1fr; }
  .authors-in { gap:48px; }
  .arch-photo { max-width:340px; }
  .states-grid { gap:44px; }
  .proof-head { gap:20px; }
  .steps { grid-template-columns:1fr; }
  .step { min-height:0; }
  .split, .product-grid, .product-loading-skeleton, .symbol-hero, .symbol-hero.has-art,
  .symbol-body { grid-template-columns:1fr; gap:36px; }
  .symbol-aside { position:static; }
  .split.reverse > :first-child { order:0; }
  .section-head { grid-template-columns:1fr; gap:18px; }
  .product-stamp-wrap { max-width:360px; }
  .product-loading-visual { max-width:360px; }
}

@media (max-width:780px) {
  :root { --gutter:20px; }
  .menu-trigger { display:grid; }
  .header { gap:8px; min-height:66px; }
  .brand-mark { --disc-min:88px; }
  .nav-main {
    position:fixed; inset:66px 0 0; flex-direction:column; align-items:stretch; gap:0;
    padding:24px var(--gutter); background:var(--paper);
    opacity:0; transform:translateY(-104%); pointer-events:none;
    transition:transform 240ms var(--ease), opacity 240ms var(--ease);
  }
  body.menu-open .nav-main { opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-main a { min-height:60px; border-bottom:1px solid var(--line);
    font-family:var(--display); font-size:24px; font-weight:400; letter-spacing:0; text-transform:none; }
  .nav-main a::after { display:none; }
  .social-links, .header-actions > a { display:none; }

  .hero { min-height:660px; }
  .hero-copy { bottom:120px; }
  .hero h1 { font-size:clamp(40px,11vw,60px); }
  .hero-bottom { align-items:flex-end; }
  .hero-tabs button:not(.active) { display:none; }

  .products { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolbar { gap:12px; }
  .b-msg { font-size:11px; }
  .prod-foot { display:block; }
  .prod-foot .price { display:block; margin-top:3px; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .tiles, .tiles.four, .tiles.two { --cols:1; }
  .abc-grid { grid-template-columns:1fr; }
  .abc-card { padding-inline:0; min-height:0; }
  .abc-grid > .abc-card:nth-child(n) { border-left:0; border-top:1px solid var(--line); }
  .abc-grid > .abc-card:first-child { border-top:0; }
  /* в одну колонку боковые поля не нужны — текст встаёт на сетку страницы */
  .tile { padding-inline:0; }
  .tiles > .tile:nth-child(n), .tiles.four > .tile:nth-child(n), .tiles.two > .tile:nth-child(n) { border-left:0; border-top:1px solid var(--line); }
  .tiles > .tile:first-child, .tiles.four > .tile:first-child, .tiles.two > .tile:first-child { border-top:0; }
  .quotes { columns:1; }
  .form { grid-template-columns:1fr; }
  .cart-drawer { padding-inline:20px; }
  .tg-in { flex-direction:column; align-items:flex-start; }
}

@media (max-width:480px) {
  .hero-tabs { gap:18px; }
  .products { grid-template-columns:1fr; }
  .prod { width:min(100%,340px); margin-inline:auto; }
  .proof-grid { grid-template-columns:1fr; }
  .proof-item { min-height:0; border-right:0; border-bottom:1px solid var(--line); }
  .proof-item:last-child { border-bottom:0; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; }
  .facts { grid-template-columns:1fr; }
  .facts div { border-left:0; border-top:1px solid var(--line); }
  .facts div:first-child { border-top:0; }
}

/* ============================================================
   СТРАНИЦА КОРЗИНЫ — позиции, расчёт СДЭК, карта ПВЗ
   ============================================================ */
[hidden] { display:none !important; }

.cart-page { padding-block:clamp(34px,4vw,54px) clamp(80px,10vw,140px); }
.cart-page h1 { margin-top:12px; font-family:var(--display); font-weight:400;
  font-size:var(--t-h2-sm); line-height:1.05; letter-spacing:-.03em; }
.cart-page-grid { display:grid; grid-template-columns:minmax(0,1fr) 350px;
  gap:clamp(28px,3.4vw,54px); align-items:start; margin-top:clamp(28px,3vw,44px); }
.cart-page-main { min-width:0; }

.cart-row { display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:20px;
  padding:18px 0; border-bottom:1px solid var(--line); }
.cart-row:first-child { border-top:1px solid var(--line); }
.cart-row img { width:92px; height:116px; object-fit:cover; }
.cart-row-body h3 { font-family:var(--display); font-size:21px; font-weight:400; }
.cart-row-meta { margin-top:4px; font-size:var(--t-small); color:var(--ink-soft); }
.cart-row-price { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:12px; }
.cart-row-price b { font-family:var(--display); font-size:22px; font-weight:400; white-space:nowrap; }
.cart-row-remove { font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); text-decoration:underline; text-underline-offset:3px; }
.cart-row-remove:hover { color:var(--red); }
.cart-empty { display:grid; gap:20px; justify-items:start; padding-block:40px; }

.cart-form { display:grid; gap:clamp(20px,2.2vw,30px); margin-top:34px; }
.cart-block { display:grid; gap:12px; padding:clamp(18px,2vw,26px); border:1px solid var(--line); background:var(--paper); }
.cart-block legend { padding-inline:8px; margin-left:-8px; font-family:var(--display); font-size:20px; font-weight:400; }
.cart-form label { font-size:var(--t-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); }
.cart-form input[type="text"], .cart-form input:not([type]), .cart-form input[type="tel"],
.cart-form input[type="email"] {
  width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--line);
  border-radius:0; background:var(--white); color:var(--ink);
  font:inherit; font-size:var(--t-body); letter-spacing:0; text-transform:none; outline:0; }
.cart-form input:focus { border-color:var(--ink); }
.cart-form .consent-check { display:flex; align-items:flex-start; gap:12px; font-size:14px;
  line-height:1.55; letter-spacing:0; text-transform:none; font-weight:400; color:var(--ink-soft); }
/* отступ считается от строки текста, поэтому квадрат стоит по центру первой строки при любом переносе */
.cart-form .consent-check input { width:20px; height:20px; min-width:20px; min-height:20px;
  margin:calc((1.55em - 20px) / 2) 0 0; padding:0; accent-color:var(--emerald); }

.delivery-modes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
/* Селектор с .cart-form: иначе общее правило для label в форме перекрывает его и включает капс. */
.cart-form .delivery-mode, .delivery-mode { display:flex; align-items:flex-start; gap:11px; padding:14px 16px;
  border:1px solid var(--line); background:var(--white); cursor:pointer;
  font-size:var(--t-body); letter-spacing:0; text-transform:none; font-weight:400; color:var(--ink); }
.delivery-mode:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.delivery-mode input { width:18px; min-width:18px; min-height:18px; margin-top:3px; accent-color:var(--emerald); }
.cart-form .delivery-mode b, .delivery-mode b { display:block; font-weight:600;
  font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; }
.cart-form .delivery-mode small, .delivery-mode small { display:block; margin-top:5px;
  font-size:var(--t-small); line-height:1.4; letter-spacing:0; text-transform:none; color:var(--ink-soft); }

.city-field { position:relative; display:grid; gap:6px; }
.city-suggest { position:absolute; z-index:1200; top:100%; left:0; right:0; max-height:260px; overflow-y:auto;
  margin:0; padding:0; list-style:none; border:1px solid var(--ink); border-top:0; background:var(--white); }
.city-suggest button { display:block; width:100%; padding:11px 14px; text-align:left;
  font-size:var(--t-body); color:var(--ink); }
.city-suggest button:hover, .city-suggest button:focus-visible { background:var(--paper); }

.pvz-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:14px; margin-top:6px; }
/* z-index:0 запирает слои карты внутри контейнера: иначе они перекрывают подсказку городов */
.pvz-map { position:relative; z-index:0; height:380px; border:1px solid var(--line); background:var(--sand); }
.pvz-map-wrap { position:relative; }
/* Загрузчик лежит поверх карты отдельным слоем и не мешает Яндексу строить свою разметку. */
.pvz-map-loader { position:absolute; z-index:5; inset:0; display:flex; align-items:center; justify-content:center;
  gap:10px; margin:0; background:var(--cream); color:var(--ink-soft);
  font-size:var(--t-small); letter-spacing:.02em; }
.spinner { width:18px; height:18px; border:2px solid var(--line-strong); border-top-color:var(--red);
  border-radius:50%; animation:spin 700ms linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation-duration:2s; } }
.pvz-list { max-height:380px; overflow-y:auto; margin:0; padding:0; list-style:none;
  border:1px solid var(--line); background:var(--white); }
.pvz-item { display:block; width:100%; padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.pvz-item b { display:block; font-size:var(--t-small); font-weight:600; line-height:1.35; }
.pvz-item span { display:block; margin-top:3px; font-size:var(--t-label); color:var(--ink-soft); letter-spacing:0; text-transform:none; }
.pvz-item:hover { background:var(--paper); }
.pvz-item.on { background:var(--paper); box-shadow:inset 3px 0 0 var(--red); }
.pvz-empty { padding:14px; font-size:var(--t-small); color:var(--ink-soft); }
.pvz-chosen { margin-top:10px; font-size:var(--t-small); color:var(--ink-soft); }
.pvz-chosen.on { color:var(--ink); }
.pvz-map-note { display:grid; place-items:center; height:100%; padding:20px; text-align:center;
  font-size:var(--t-small); line-height:1.5; color:var(--ink-soft); }

.delivery-status { min-height:18px; font-size:var(--t-small); color:var(--ink-soft); }
.delivery-status.warn { color:var(--red); }

.cart-summary { position:sticky; top:96px; display:grid; gap:12px;
  padding:clamp(20px,2vw,28px); border:1px solid var(--line); background:var(--paper); }
.summary-row { display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:var(--t-small); }
.summary-row b { font-weight:600; }
.summary-total { padding-top:12px; border-top:1px solid var(--line-strong); }
.summary-total b { font-family:var(--display); font-size:28px; font-weight:400; }
.summary-period { font-size:var(--t-small); color:var(--ink-soft); }
.summary-note { font-size:var(--t-label); line-height:1.5; color:var(--ink-soft); }
.cart-summary > small { font-size:var(--t-label); line-height:1.5; color:var(--ink-soft); text-align:center; }
.drawer-foot { display:grid; gap:12px; padding-top:20px; border-top:1px solid var(--line); }
.drawer-hint { font-size:var(--t-label); line-height:1.5; color:var(--ink-soft); }

@media (max-width:1080px) {
  .cart-page-grid { grid-template-columns:minmax(0,1fr); }
  .cart-summary { position:static; }
  .pvz-layout { grid-template-columns:minmax(0,1fr); }
  .pvz-list { max-height:260px; }
}
@media (max-width:560px) {
  .cart-row { grid-template-columns:72px minmax(0,1fr); }
  .cart-row img { width:72px; height:92px; }
  .cart-row-price { grid-column:1 / -1; flex-direction:row; align-items:center; }
  .pvz-map { height:300px; }
}
.pvz-map-hint { position:absolute; z-index:900; inset:0; width:100%; display:grid; place-items:center;
  padding:12px; background:rgba(255,251,220,.55); color:var(--ink);
  font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================
   БЛОГ
   Лента и страница записи собираются scripts/generate-blog.py.
   Текст поста стоит на общей .prose (та же, что у страниц символов),
   здесь — только то, чего в ней не было: подзаголовки, цитаты,
   картинки с подписью, нумерованные списки.
   ============================================================ */
.prose > :first-child { margin-top:0; }
.prose h3 { margin-top:clamp(26px,2.6vw,38px); font-family:var(--display); font-weight:400;
  font-size:clamp(20px,1.9vw,26px); }
.prose a { color:var(--ink); border-bottom:1px solid var(--line-strong);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.prose a:hover { color:var(--red); border-color:var(--red); }
.prose strong { color:var(--ink); font-weight:600; }
.prose ol { margin-top:14px; display:grid; gap:10px; counter-reset:step; }
/* Ромб из базового правила заменяем номером — иначе список останется маркированным. */
.prose ol li { padding-left:30px; }
.prose ol li::before { counter-increment:step; content:counter(step) "."; top:0; width:auto; height:auto;
  background:none; transform:none; font-family:var(--display); font-size:17px; color:var(--peach-deep); }
.prose blockquote { margin-top:clamp(26px,3vw,40px); padding-left:clamp(18px,2vw,28px);
  border-left:2px solid var(--peach-deep); }
.prose blockquote p { margin-top:0; font-family:var(--display); font-style:italic;
  font-size:clamp(18px,1.8vw,24px); line-height:1.5; color:var(--ink); }
.prose blockquote footer { margin-top:12px; font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); }
.prose figure { margin-top:clamp(28px,3vw,44px); }
.prose figure img { width:100%; border-radius:12px; background:var(--sand); }
.prose figcaption { margin-top:10px; font-size:var(--t-small); line-height:1.6; color:var(--ink-faint); }
.prose hr { margin-block:clamp(30px,3.4vw,50px); border:0; border-top:1px solid var(--line); }
.prose code { padding:2px 6px; background:var(--cream);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }

/* лента: дата слева, запись справа — разграфка линиями, как в «Азбуке» */
.blog-list { border-top:1px solid var(--line); }
.blog-item { display:grid; grid-template-columns:minmax(0,.22fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,44px); padding:clamp(24px,3vw,38px) clamp(14px,1.4vw,24px);
  border-bottom:1px solid var(--line); transition:background-color var(--fast) var(--ease); }
.blog-item:hover { background:var(--cream); }
.blog-date { padding-top:7px; font-size:var(--t-label); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); }
.blog-text h2 { font-family:var(--display); font-weight:400; font-size:clamp(24px,2.6vw,36px);
  line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
.blog-text p { max-width:62ch; margin-top:10px; color:var(--ink-soft); line-height:1.7; }
.blog-text .eyebrow { margin-top:18px; color:var(--emerald); }
.blog-empty { padding-block:clamp(40px,5vw,72px); border-block:1px solid var(--line); }
.blog-empty p { max-width:44ch; color:var(--ink-soft); line-height:1.8; }
.blog-empty .link { margin-top:22px; }

/* Запись: колонка 750 px по центру страницы. Размеры сняты с макета
   (Figma «Nepokolebima», кадр 28:3) и на широком экране совпадают с ним точно;
   clamp отвечает только за то, как всё ужимается на узких экранах.
   750 px — это ширина текста, поэтому к максимуму добавлены поля .shell. */
.post { max-width:calc(750px + var(--gutter) * 2);
  padding-block:clamp(40px,4.4vw,80px) clamp(60px,5.8vw,110px); }

/* шапка записи отбита линиями сверху и снизу, текст по центру колонки */
.post-head { padding-block:clamp(28px,2.2vw,40px) clamp(32px,2.6vw,48px);
  border-block:1px solid var(--line); text-align:center; }
.post-head h1 { margin-top:12px; font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5.6vw,56px); line-height:1.2; letter-spacing:-.039em; text-wrap:balance; }
.post-head .lead { margin-top:clamp(20px,1.8vw,32px); font-size:20px; line-height:1.5; }

/* Текст записи крупнее, чем на страницах символов: 18/1.6 на всю ширину колонки.
   Кегль фиксированный — как --t-body во всей системе; ужимается только на телефоне. */
.post-prose { max-width:none; padding-top:clamp(38px,3.3vw,60px); font-size:18px; }
.post-prose p, .post-prose li { line-height:1.6; }
.post-prose ul, .post-prose ol { margin-block:20px; gap:4px; }
.post-prose blockquote { margin-block:40px; }

.post-symbol { max-width:68ch; margin-top:clamp(36px,4vw,58px); }
.post-symbol h2 { margin-top:8px; }
.post-symbol p { max-width:44ch; margin-top:12px; color:var(--ink-soft); line-height:1.7; }
.post-symbol .link { margin-top:22px; }
.post-back { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:clamp(36px,4vw,58px); padding-top:22px; border-top:1px solid var(--line);
  font-size:var(--t-label); letter-spacing:.06em; color:var(--ink-faint); }
/* стрелка «назад» уезжает влево, а не вправо, как в остальных ссылках */
.link.back:hover span { transform:translateX(-4px); }

@media (max-width:780px) {
  .blog-item { grid-template-columns:1fr; gap:10px; padding-inline:0; }
  .blog-date { padding-top:0; }
  .post-head .lead { font-size:17px; }
  .post-prose { font-size:16px; }
}