/* ============================================================
   ДОМСОН — HTML mockup (static preview, not production code)
   Design system driven by DomSon-brand-guidelines.md §14
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Mak";
  src: url("./fonts/Mak/MakLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mak";
  src: url("./fonts/Mak/MakBold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Ivy Presto Headline Thin — headings experiment (logo stays Mak via --font-logo).
   The 300–700 range maps every heading weight to this single Thin face. */
@font-face {
  font-family: "Ivy Presto";
  src: url("./fonts/Ivy Presto/fonnts.com-Ivy-Presto-Headline-Thin.otf") format("opentype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* TT Norms Pro — body experiment (replaces Montserrat via --font-body).
   Body only uses 400/500; Montserrat stays in the chain as fallback. */
@font-face {
  font-family: "TT Norms Pro";
  src: url("./fonts/TT Norms Pro/TTNormsPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms Pro";
  src: url("./fonts/TT Norms Pro/TTNormsPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TT Norms Pro";
  src: url("./fonts/TT Norms Pro/TTNormsPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg-cream:      #F5EFE3;   /* default page background */
  --bg-cream-alt:  #EAE0CC;   /* alternating sections */
  --text-primary:  #1F1814;   /* near-black text */
  --accent-wine:   #5E1F2C;   /* link hover, small accents only (on cream) */
  --accent-wine-on-photo: #A93F57;   /* wine hue, deepened/muted — legible over photos but still reads wine, not red */
  --dark-footer:   #1F1814;   /* footer background */
  /* Legacy logo — still blue, to be recolored later via AI */
  --logo-legacy:   #2F3E53;

  --line-color: rgba(31, 31, 29, 0.35);   /* divider lines: near-black, low opacity */
  --line-weight: 0.6px;

  --content-max: 1280px;
  --section-gap: 128px;
  --gutter: 56px;      /* content side gutter — desktop (mobile override at bottom) */
  --map-height: 66vh;  /* partners-map element; the statement band matches it 1:1 (desktop) */

  --radius: 10px;

  --font-head: "Ivy Presto", "Montserrat", sans-serif;
  --font-logo: "Mak", "Montserrat", sans-serif;   /* logo wordmark only — keep Mak, do not swap */
  --font-body: "TT Norms Pro", "Montserrat", system-ui, sans-serif;
  --font-slogan: "Montserrat Alternates", "Montserrat", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Typography ---------- */
.h-section {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);   /* Vispring-restrained: ~28→36px */
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.h-statement {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2.7rem, 5.2vw, 3.9rem);     /* accent block: ~44→62px (1.3× larger) */
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.subhead {
  font-size: 0.95rem;       /* Vispring-quiet: ~15px */
  color: rgba(31, 31, 29, 0.65);   /* text-primary, softened for hierarchy */
  max-width: 56ch;
  text-wrap: balance;       /* even out multi-line subheads instead of dropping one word */
}
.body-text {
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 720px;     /* readability cap; stays left-aligned to the gutter */
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-gap);
}
.section--tight { padding-block: calc(var(--section-gap) * 0.75); }

.bg-cream { background: var(--bg-cream); color: var(--text-primary); }
.bg-sand  { background: var(--bg-cream-alt);  color: var(--text-primary); }
/* Footer — dark zone, cream text inside */
.bg-footer { background: var(--dark-footer); color: var(--bg-cream); }

/* Horizontal divider line between sections */
.rule {
  height: 0;
  border: none;
  border-top: var(--line-weight) solid var(--line-color);
  width: 100%;          /* full-bleed: edge to edge of the viewport */
  margin: 0;
}

/* Text link: underline + graphite→wine on hover */
.link {
  position: relative;
  display: inline-block;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.link:hover { color: var(--accent-wine); border-color: var(--accent-wine); }

/* ---------- Placeholder media ---------- */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(31,31,29,0.06), rgba(31,31,29,0.03)),
    var(--bg-cream-alt);
  color: rgba(31, 31, 29, 0.45);
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: var(--line-weight) dashed rgba(31,31,29,0.3);
  border-radius: 6px;
  pointer-events: none;
}
.ph__label {
  position: relative;
  z-index: 1;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 31, 29, 0.45);
  padding: 0 16px;
  line-height: 1.6;
}
.ph--rounded { border-radius: var(--radius); }
.ph--ai { /* slot intended to receive an AI-generated image later */ }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* burger · centered logo · empty */
  align-items: center;
  padding: 22px var(--gutter);
  color: var(--bg-cream);
  transition: background-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, padding 0.3s ease;
}
/* subtle top gradient for legibility over bright video frames */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(31,31,29,0.45), rgba(31,31,29,0));
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.header.scrolled,
.header--solid {              /* --solid: pages without a hero start solid */
  background: rgba(245,237,217,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(31,31,29,0.35);
  padding-block: 16px;
}
.header.scrolled::before,
.header--solid::before { opacity: 0; }

.logo {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-logo);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Burger button — Vispring-style (☰ Меню on the left, both desktop & mobile) */
.menu-btn {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  transition: color 0.25s ease;
}
.menu-btn:hover { color: var(--accent-wine); }
.menu-btn__icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 22px;
}
.menu-btn__icon span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

/* Burger overlay (basic placeholder — full design comes later) */
/* Left slide-in drawer: a full-screen scrim catches outside clicks (JS closes on
   click of .menu-overlay itself); the nav panel slides in from the left.
   --panel-w is shared so the close button slides in perfectly synced with it. */
.menu-overlay {
  --panel-w: min(380px, 82vw);
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(31, 31, 29, 0.3);       /* soft graphite scrim */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s ease, visibility 0.42s ease;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.menu-overlay__nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--panel-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  padding: 96px 56px;
  background: rgba(245, 237, 217, 0.97);   /* cream glass panel */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: var(--line-weight) solid var(--line-color);
  transform: translateX(calc(-1 * var(--panel-w)));
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-overlay.open .menu-overlay__nav { transform: translateX(0); }
.menu-overlay__nav a {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  transition: color 0.25s ease;
}
.menu-overlay__nav a:hover { color: var(--accent-wine); }
.menu-overlay__close {
  position: absolute;
  top: 30px;
  left: 56px;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: var(--text-primary);
  transform: translateX(calc(-1 * var(--panel-w)));
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-overlay.open .menu-overlay__close { transform: translateX(0); }

/* ============================================================
   HERO (block 1) — full-screen workshop video, no overlays
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  width: 100%;
}
.hero .ph {
  width: 100%;
  height: 100%;
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* hero CTA — text link at the lower-centre of the photo (cream for legibility over footage) */
.hero__cta {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--bg-cream);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
/* keep the text light on hover — only the underline turns wine */
.hero__cta:hover { color: var(--bg-cream); border-color: var(--accent-wine-on-photo); }
/* subtle bottom scrim so the cream CTA stays legible over light footage */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
  z-index: 1;
  pointer-events: none;
}
.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* placeholder visual for the workshop video frame */
.hero__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(245,237,217,0.10), transparent 60%),
    linear-gradient(160deg, #1F1F1D 0%, #2A2926 45%, #34322D 100%);   /* warm near-black video-frame stand-in (no grey graphite) */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__placeholder .ph__label {
  color: rgba(245,237,217,0.65);
  font-size: 0.82rem;
}

/* ============================================================
   CATALOG GRID — static 2×2, flush (gap 0), full-bleed.
   Vispring-style. Shared by Home blocks 2 & 3 and the
   /mattresses & /toppers catalog pages. The grid runs edge to
   edge of the viewport — the 56px gutter does NOT apply to it.
   ============================================================ */
/* heading pulled down close to the imagery below (Vispring-style): generous air
   above comes from the section's top padding, tight gap below hugs the grid */
.section-head { margin-bottom: 48px; text-align: center; }
.section-head .subhead { margin-top: 18px; margin-inline: auto; }
/* small overline above the section heading (e.g. "Модельный ряд" on series pages) */
.section-head__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 31, 29, 0.5);
  margin-bottom: 14px;
}
/* intro paragraph under a centered catalog heading (centers with the heading) */
.catalog-intro {
  margin-top: 20px;
  margin-inline: auto;
  max-width: 640px;
  font-size: 0.95rem;       /* Vispring-quiet: ~15px */
  line-height: 1.6;
  color: var(--text-primary);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;                /* cards sit flush against each other */
  width: 100%;           /* full-bleed; lives outside .container */
}
/* When a section ENDS in the full-bleed grid, the grid touches the section's
   bottom edge — no 128px of empty cream under the photos (Home blocks 2 & 3).
   Catalog pages keep their padding: there the grid is followed by a cross-link,
   so it isn't the section's last child and this rule doesn't apply. */
.section:has(> .catalog-grid:last-child) { padding-bottom: 0; }
.catalog-card {
  display: block;
  color: inherit;
}
.catalog-card__media {
  position: relative;
  aspect-ratio: 3 / 2;   /* landscape interior shot */
  overflow: hidden;      /* contain the hover zoom */
}
.catalog-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the card without distortion (real <img>) */
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.catalog-card:hover .catalog-card__img { transform: scale(1.04); }
/* static +10% zoom on selected cards (hover adds a touch more) */
.catalog-card__img--zoom { transform: scale(1.1); }
.catalog-card:hover .catalog-card__img--zoom { transform: scale(1.14); }
/* real photo: fill the card; light ~10% blur (slight upscale hides blurred edges) */
.catalog-card__img--blur {
  object-fit: cover;
  filter: blur(3px);
  transform: scale(1.06);
}
.catalog-card:hover .catalog-card__img--blur { transform: scale(1.10); }

/* caption overlaid ON the photo (centered) — not a separate element below.
   A gentle dark scrim keeps text legible over bright interior shots. */
.catalog-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--bg-cream);
  pointer-events: none;     /* clicks pass through to the card link */
  background: linear-gradient(180deg,
    rgba(31, 31, 29, 0.28) 0%,
    rgba(31, 31, 29, 0.30) 55%,
    rgba(31, 31, 29, 0.48) 100%);
}
/* text pinned to the top of the card instead of centered */
.catalog-card__overlay--top { justify-content: flex-start; }
.catalog-card__name {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.6vw, 1.625rem);  /* +2 деления */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg-cream);
  text-shadow: 0 1px 14px rgba(31, 31, 29, 0.45);
}
/* heading above a card description — uses the heading font (Mak) */
.catalog-card__title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.875rem, 2.4vw, 2.5rem);  /* +3 деления */
  letter-spacing: 0.06em;
  color: var(--bg-cream);
  text-shadow: 0 1px 14px rgba(31, 31, 29, 0.45);
  margin-bottom: 10px;
}
/* catalog pages only — descriptor + spec, also on the photo */
.catalog-card__descriptor {
  max-width: 40ch;
  font-size: 1.23rem;  /* +2 деления */
  line-height: 1.5;
  color: rgba(245, 237, 217, 0.92);
  text-shadow: 0 1px 12px rgba(31, 31, 29, 0.45);
}
.catalog-card__specs {
  font-size: 1.17rem;  /* +2 деления */
  letter-spacing: 0.04em;
  color: rgba(245, 237, 217, 0.82);
  text-shadow: 0 1px 12px rgba(31, 31, 29, 0.45);
}
/* always-visible "Смотреть" affordance — signals the tile is clickable; underline turns wine on card hover */
.catalog-card__cta {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bg-cream);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-shadow: 0 1px 12px rgba(31, 31, 29, 0.45);
  transition: border-color 0.25s ease;
}
.catalog-card:hover .catalog-card__cta { border-color: var(--accent-wine-on-photo); }
/* placeholder asset-slot note moves to the top so it won't collide with the name */
.catalog-card__media .ph__label {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 0;
  right: 0;
  margin-inline: auto;
}
/* frameless: the grid is just flush image tiles — no placeholder frame/border */
.catalog-card__media .ph::after { display: none; }

/* ---- Topper-line strip on /mattresses ----
   The topper catalogue shown below the mattress grid as 4 SQUARE photos in ONE
   flush, full-bleed row. Reuses .catalog-card; only the column count, the square
   ratio, and the section-gap above the heading differ. */
.section-head--strip { margin-top: var(--section-gap); }   /* full section break from the grid above */
.h-section__meta {                 /* "— Линейка из четырёх моделей" inline after the title, quiet */
  font-size: 0.5em;
  letter-spacing: 0;
  color: rgba(31, 31, 29, 0.65);
  margin-left: 0.4em;
}
.catalog-grid--row4 { grid-template-columns: repeat(4, 1fr); }
.catalog-card__media--square { aspect-ratio: 1 / 1; }
.catalog-card__media--portrait { aspect-ratio: 2 / 3; }   /* vertical 2:3 product shot */
/* 5-card series grid: 4 portrait (2:3) in a row + 1 full-width accent (16:9) below */
.catalog-grid--4plus1 { grid-template-columns: repeat(4, 1fr); }
.catalog-grid--4plus1 > .catalog-card:nth-child(5) { grid-column: 1 / -1; }

/* 3 collection cards (mattresses page): full-bleed flush row of portrait 2:3 cards */
.catalog-grid--m3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
}
@media (max-width: 768px) {
  .catalog-grid--m3 { grid-template-columns: 1fr; }
}
.catalog-card__media--wide { aspect-ratio: 21 / 9; }   /* ultra-wide cinematic accent shot */

/* cross-link between catalog pages (text link, no arrow per brand §9) */
.cross-link {
  margin-top: 72px;
  text-align: center;
  font-size: 1.05rem;
}
/* underline + wine-on-hover so the back-link reads as a button (brand §9) */
.cross-link a {
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.cross-link a:hover { color: var(--accent-wine); border-color: var(--accent-wine); }
.cross-link__meta { color: rgba(31, 31, 29, 0.55); margin-left: 6px; }

/* ============================================================
   SPLIT BLOCK (production, custom-branding)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* exact 50 / 50, divider at center */
  align-items: stretch;
  min-height: 60vh;
}
.split--full { min-height: 100vh; }   /* full-screen split (block 4 — production) */
/* production media constrained to a fixed 4:3 frame (matches custom-branding proportion).
   Keeps the default 60vh split height so its top spacing matches the branding block;
   text half stretches to keep the divider full-height, media is centered at 4:3. */
.split--media43 .split__media { align-self: center; aspect-ratio: 4 / 3; }
.split--media43 .split__media img { min-height: 0; }
.split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  padding-left: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + 0px));
}
.split__media { position: relative; }
.split__media .ph { width: 100%; height: 100%; min-height: 420px; }
.split__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.split__media .ph::after { display: none; }   /* frameless — placeholder fills the whole half */
/* vertical divider line between halves */
.split--line .split__text {
  border-right: var(--line-weight) solid var(--line-color);
}
.split--reverse .split__text { order: 2; border-right: none; border-left: var(--line-weight) solid var(--line-color); }
.split--reverse .split__media { order: 1; }

.split__text .h-section { margin-bottom: 24px; }
.split__text .body-text { margin-bottom: 40px; }

/* figures row (production) */
.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.figure__num {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--accent-wine);
}
.figure__label {
  font-size: 0.92rem;
  color: inherit;
  opacity: 0.85;
  margin-top: 8px;
  max-width: 14ch;
}

/* ============================================================
   MATERIALS (block 5) — full-bleed row of 4 flush macro photos
   ============================================================ */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                /* photos sit flush — no edges between them */
  width: 100%;           /* full-bleed; lives outside .container */
}
.feature {
  position: relative;
  aspect-ratio: 2 / 3;   /* portrait columns (2:3) — four across */
  overflow: hidden;
}
.feature__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* real <img> fills the column without distortion */
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.feature:hover .feature__img { transform: scale(1.06); }
.feature__img.ph::after { display: none; }   /* seamless wall — no placeholder frame */
.feature .ph__label {                         /* asset-slot note pinned to the top */
  position: absolute;
  z-index: 1;
  top: 14px; left: 0; right: 0;
  margin-inline: auto;
}
/* title + one-line desc overlaid at the bottom, dark scrim for legibility */
.feature__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 28px 24px;
  color: var(--bg-cream);
  background: linear-gradient(180deg,
    rgba(31, 31, 29, 0) 45%,
    rgba(31, 31, 29, 0.55) 100%);
}
.feature__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(31, 31, 29, 0.45);
}
.feature__desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(245, 237, 217, 0.9);
  text-shadow: 0 1px 12px rgba(31, 31, 29, 0.45);
}
/* materials block ends on the full-bleed feature strip — zero its bottom gap so the production split sits flush below (no cream band between blocks 3 & 4) */
.section:has(> .feature-strip:last-child) { padding-bottom: 0; }
/* ============================================================
   CUSTOM-BRANDING slider (block 6)
   ============================================================ */
.cb-list { margin: 28px 0 0; }   /* no trailing bottom margin — keeps the centered text column symmetric top/bottom */
.cb-list__intro { margin-bottom: 12px; color: inherit; opacity: 0.85; }
.cb-list li {
  font-size: 1.05rem;
  padding: 10px 0;
  border-top: var(--line-weight) solid var(--line-color);
}
.cb-soft {
  font-size: 0.98rem;
  color: var(--accent-wine);
}

.slider { position: relative; width: 100%; height: 100%; min-height: 480px; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder mattress with a brand label tag */
.mattress-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(31,31,29,0.07), rgba(31,31,29,0.04)),
    var(--bg-cream-alt);
}
.mattress-ph__body {
  width: 70%;
  height: 36%;
  border-radius: 14px;
  background: linear-gradient(180deg, #FBF7EC, #E7DCC2);
  box-shadow: 0 18px 40px -24px rgba(31,31,29,0.4);
  position: relative;
}
.mattress-ph__tag {
  position: absolute;
  right: 8%;
  bottom: -14px;
  background: var(--accent-wine);
  color: var(--bg-cream);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 6px;
}
.slider__dots {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: flex; gap: 9px;
  z-index: 2;
}
.slider__dots button {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none; cursor: pointer;
  background: rgba(31,31,29,0.25);
  transition: background 0.3s ease;
}
.slider__dots button.active { background: var(--accent-wine); }

/* ============================================================
   PARTNERS MAP (block 7)
   ============================================================ */
/* tight section: match its top padding (0.75 × gap) for the same centered effect */
.map-head { margin-bottom: 48px; text-align: center; }
.map-head .subhead { margin-inline: auto; }
/* the full-bleed map sits flush against the dark statement block below —
   no empty cream gap between "География поставок" and the statement. */
.section--tight:has(> .map-wrap:last-child) { padding-bottom: 0; }
.map-wrap {
  width: 100%;
  height: var(--map-height);
  min-height: 460px;
  position: relative;
}
.map-wrap .ph { width: 100%; height: 100%; }
.map-wrap .ph::after { display: none; }   /* full-bleed map — no placeholder frame */
.map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-pin {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--accent-wine);
  border: 2px solid var(--bg-cream);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px -3px rgba(31,31,29,0.5);
}
.map-pin::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: rgba(245,237,217,0.7);
  border-radius: 50%;
}

/* ============================================================
   STATEMENT (block 8)
   ============================================================ */
/* dark band height matched 1:1 to the map element (.map-wrap) above; text centered */
.section:has(.statement) {
  height: var(--map-height);
  min-height: 460px;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.statement {
  text-align: center;
}
.statement .h-statement { max-width: none; margin-inline: auto; } /* line breaks are explicit in markup */

/* ============================================================
   FOOTER (block 9)
   ============================================================ */
.footer { padding-block: 88px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.footer .logo { color: var(--bg-cream); margin-bottom: 16px; margin-left: -290px; }
.footer__slogan {
  font-family: var(--font-slogan);
  font-weight: 300;
  text-transform: lowercase;
  font-size: 1.05rem;
  color: rgba(245,239,227,0.7);
  letter-spacing: 0.02em;
}
.footer__menu li { padding: 6px 0; }
.footer__menu a { color: rgba(245,239,227,0.8); transition: color 0.25s ease; }
.footer__menu a:hover { color: var(--bg-cream); }
.footer__legal { font-size: 0.9rem; color: rgba(245,239,227,0.7); line-height: 1.9; }
.footer__legal a { border-bottom: 1px solid rgba(245,239,227,0.4); transition: color 0.25s, border-color 0.25s; }
.footer__legal a:hover { color: var(--bg-cream); border-color: var(--bg-cream); }
.footer__col-title {
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,239,227,0.6); margin-bottom: 16px;
}

/* ============================================================
   MATTRESS MODEL CARD  (mirella / grand / galaxy / memori)
   5 blocks: Hero (collage + sticky text) · Fill · Spec · Other · Footer
   One template, reused 1:1 across all four mattress pages.
   ============================================================ */

/* ---- Block 1 — Hero: tall interior collage (left), sticky text (right) ----
   The collage is a 2-col column of portrait shots, taller than the viewport,
   so the right text can stay pinned and the photos scroll past it. */
.m-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 50 / 50, divider at center */
  align-items: start;               /* don't stretch the sticky column */
}
/* Hero sits flush under the solid header — no empty cream band above the collage.
   Top padding = header height (≈68px); bottom flush so the Fill block butts
   directly against the bottom of the collage (no inter-block gap). */
.section:has(> .m-hero) { padding-top: 68px; padding-bottom: 0; }
/* Fill block: drop the 60vh floor so its top isn't inflated by vertical centering —
   keeps a hard 64px top/bottom, matching the spec block. Scoped via the layer list. */
.split:has(.layer-list) { min-height: 0; }
/* Fill block: the cross-section render is a square (1:1) infographic — give the media
   a 1:1 frame and show the whole image (no crop). */
.split:has(.layer-list) .split__media { aspect-ratio: 1 / 1; align-self: center; }
.split:has(.layer-list) .split__media img { min-height: 0; object-fit: contain; }
.m-hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columns × 3 rows = 6 photos */
  gap: 2px;                         /* uniform black lines between tiles (shows the bg through the gaps) */
  background: var(--text-primary);  /* near-black — clearly visible lines */
  border-right: 2px solid var(--text-primary);   /* center divider, full height — same weight/colour */
  border-top: 2px solid var(--text-primary);     /* frame the collage top … */
  border-bottom: 2px solid var(--text-primary);  /* … and bottom, matching the side line */
}
.m-hero__cell {
  position: relative;
  aspect-ratio: 3 / 4;              /* portrait interior shot */
  overflow: hidden;
}
.m-hero__cell .ph { width: 100%; height: 100%; }
.m-hero__cell .ph::after { display: none; }   /* frameless flush collage */
/* photos have a thin black frame baked into the PNGs; the cell is overflow:hidden,
   so a slight scale crops that frame off the edges (no seams between flush tiles) */
.m-hero__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); }

.m-hero__text {
  position: sticky;
  top: 0;
  min-height: 100vh;                /* centers the text in the viewport while pinned */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 0 96px 64px;
  padding-right: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
}
.m-hero__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 31, 29, 0.5);
  margin-bottom: 24px;
}
/* breadcrumb path: ancestor links wine + clickable on sight (no hover needed),
   separators and the current page stay muted so «you are here» reads clearly. */
.m-hero__eyebrow a { color: var(--accent-wine); transition: color 0.25s ease; }
.m-hero__eyebrow a:hover { text-decoration: underline; }
.m-hero__eyebrow-current { color: inherit; }
.m-hero__name {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.m-hero__positioning {
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.m-hero__summary {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(31, 31, 29, 0.78);
  max-width: 44ch;
  margin-bottom: 28px;
}
.m-hero__specs {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: rgba(31, 31, 29, 0.6);
  padding-top: 22px;
  border-top: var(--line-weight) solid var(--line-color);
}

/* ---- Block 2 — Fill: layer list (left) + AI exploded render (right) ----
   Reuses the shared .split / .split--line; only the layer list is new. */
.fill__heading { margin-bottom: 30px; }
/* list reset: no browser indent / marker, so each layer sits flush under the heading */
.layer-list { margin: 0 0 34px; padding: 0; list-style: none; }
.layer-list li {
  padding: 13px 0;
  border-top: var(--line-weight) solid var(--line-color);
  font-size: 1.02rem;
  line-height: 1.5;
}
.layer-list li:last-child { border-bottom: var(--line-weight) solid var(--line-color); }
.fill__closing {
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(31, 31, 29, 0.7);
  max-width: 46ch;
}

/* ---- Block 3 — Specification: full-width data table, thin row lines ---- */
/* Align the spec block's left edge to the Fill block's text (the 1280-content-box
   edge), not the gutter-inset .container, so the two stacked blocks share one margin. */
.spec-wrap {
  padding-inline: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
}
/* half the standard section padding — tighter vertical rhythm for the spec block */
.section:has(> .spec-wrap) { padding-block: 64px; }
.spec__title { margin-bottom: 40px; }
.spec-table {
  width: 100%;
  max-width: 860px;
  border-collapse: collapse;
}
.spec-table tr { border-top: var(--line-weight) solid var(--line-color); }
.spec-table tr:last-child { border-bottom: var(--line-weight) solid var(--line-color); }
.spec-table th {
  width: 38%;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  font-size: 0.98rem;
  color: rgba(31, 31, 29, 0.55);
  padding: 17px 24px 17px 0;
}
.spec-table td {
  vertical-align: top;
  font-size: 1.02rem;
  padding: 17px 0;
}

/* ---- Block 4 — Other models: 3 interior thumbnails (reuses catalog cards) ---- */
.catalog-grid--row3 { grid-template-columns: repeat(3, 1fr); }

/* Spec → Other seam: cream side is the spec block's 64px bottom; cut the sand
   band hard (32px) so it hugs the «Другие модели» heading above the cards. */
.section:has(> .catalog-grid--row3) { padding-top: 32px; }
/* center «Другие модели» in the sand band: equal space above (32px padding) and below */
.section:has(> .catalog-grid--row3) .section-head { margin-bottom: 32px; }
/* same seam for the 4-up «Другие модели» variant on model pages; scoped via the
   cross-link so the S500 catalogue & mattresses page (also --row4) keep full rhythm.
   symmetric 32px band: equal space above the heading and below the «вернуться» link. */
.section:has(> .catalog-grid--row4):has(> .cross-link) { padding-top: 32px; padding-bottom: 32px; }
.section:has(> .catalog-grid--row4):has(> .cross-link) .section-head { margin-bottom: 32px; }
/* center «вернуться» in the beige strip below the photos: equal 32px above and below */
.section:has(> .catalog-grid--row4):has(> .cross-link) .cross-link { margin-top: 32px; }

/* ============================================================
   ENTRANCE ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.52s ease, transform 0.52s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE — desktop-only mockup for now.
   Mobile/tablet adaptation deliberately omitted; will be added
   in a later pass once the desktop layout is approved.
   Only the content gutter is set for mobile here, per spec.
   ============================================================ */
@media (max-width: 768px) {
  :root { --gutter: 20px; --section-gap: 64px; }   /* halve the section rhythm on mobile */

  .hide-mobile { display: none; }                  /* utility: drop an element on mobile only */

  /* catalog grid stacks to a single full-bleed column, gap 0 */
  .catalog-grid { grid-template-columns: 1fr; }
  /* statement band reverts to natural height on mobile (1:1 match is desktop-only) */
  .section:has(.statement) { height: auto; min-height: 0; padding-block: var(--section-gap); }

  /* ---- split blocks (production, custom-branding, fill) stack to one column ---- */
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__text { padding: 48px var(--gutter); }
  .split--line .split__text { border-right: none; }            /* drop the vertical divider */
  .split--reverse .split__text,
  .split--reverse .split__media { order: 0; }                  /* follow DOM order: text, then media */
  .split--reverse .split__text { border-left: none; }

  /* ---- model-page hero: collage on top, text below (un-stick the text) ---- */
  .m-hero { grid-template-columns: 1fr; }
  .m-hero__text { position: static; min-height: 0; padding: 36px var(--gutter); }
  .m-hero__media { border-right: none; }                       /* no stray right-edge line when full-width */

  /* ---- materials strip: 4-across → 2×2 ---- */
  .feature-strip { grid-template-columns: repeat(2, 1fr); }

  /* ---- catalog cards: taller frame + smaller caption so the overlay text fits ---- */
  .catalog-card__media { aspect-ratio: 4 / 5; }
  .catalog-card__title { font-size: 1.7rem; margin-bottom: 8px; }
  .catalog-card__descriptor { font-size: 1rem; max-width: none; }
  .catalog-card__specs { font-size: 1rem; }

  /* ---- hero CTA a touch higher on small screens ---- */
  .hero__cta { bottom: 32px; }

  /* ---- footer stacks to one column ---- */
  .footer { padding-block: 56px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer .logo { margin-left: 0; justify-self: start; }       /* reset the desktop offset + left-align */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .catalog-card:hover .catalog-card__img { transform: none; }
  .slide { transition: none; }
  * { scroll-behavior: auto !important; }
}