/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 80px; /* fixed-header offset for anchor jumps */
}

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
em { font-style: normal; }

:root {
  /* PREMIUM OUTDOOR / MOUNTAIN LAKE palette (per customer TZ) */
  --cream: #F5F1E8;          /* LIGHT CREAM — основной фон сайта */
  --cream-2: #E8D6C2;        /* WARM SAND — repair sections, beige overlays */
  --cream-3: #D9E2E8;        /* SOFT GREY */
  --ink: #0B2239;            /* PRIMARY NAVY — header, footer, кнопки, иконки */
  --ink-2: #132F4A;          /* DEEP BLUE GRAPHITE — hover, overlays */
  --ink-deep: #08131F;       /* DARK SHADOW — footer, тени */
  --sea: #6FA9C4;            /* OCEAN BLUE — акценты, ссылки, secondary */
  --sea-soft: #CFE6EE;       /* ICE BLUE — backgrounds, light sections */
  --sea-deep: #132F4A;
  --sun: #6FA9C4;            /* legacy alias → ocean blue */
  --sun-2: #CFE6EE;
  --coral: #E8D6C2;          /* legacy alias → warm sand */
  --line: #E5EDF2;           /* Light Border */
  --line-soft: rgba(11, 34, 57, 0.14);
  --muted: #5E7385;          /* Secondary Text */
  --muted-soft: #8EA2B1;     /* Muted Text */
  --grey-blue: #AABBC7;      /* MOUNTAIN GREY BLUE — borders, muted UI */
  --rust: var(--sea);
  /* RADII per TZ */
  --r-sm: 12px;
  --r-md: 14px;              /* inputs */
  --r-lg: 16px;              /* buttons */
  --r-xl: 20px;              /* mini cards */
  --r-card: 24px;            /* cards */
  /* SHADOWS per TZ — rgba(11,34,57,*) */
  --shadow-sm: 0 8px 24px rgba(11, 34, 57, 0.06);
  --shadow-md: 0 16px 40px rgba(11, 34, 57, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 34, 57, 0.14);
  /* GRADIENTS per TZ */
  --grad-hero: linear-gradient(135deg, #F5F1E8 0%, #CFE6EE 40%, #6FA9C4 100%);
  --grad-ocean: linear-gradient(180deg, #CFE6EE 0%, #6FA9C4 100%);
  --grad-navy: linear-gradient(135deg, #132F4A 0%, #0B2239 100%);
  --grad-sand: linear-gradient(135deg, #F5F1E8 0%, #E8D6C2 100%);
  --grad-repair: linear-gradient(135deg, #E8D6C2 0%, #F5F1E8 100%);
  --grad-footer: linear-gradient(180deg, #132F4A 0%, #08131F 100%);

  --display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --body: 'Manrope', -apple-system, sans-serif;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}


::selection {
  background: var(--ink);
  color: var(--cream);
}

/* === LIQUID RIPPLE TRAIL === */
.ripple-pool {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.ripple-filter {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ripple {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: url(#liquid-trail) blur(1.2px);
  backdrop-filter: url(#liquid-trail) blur(1.2px);
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.22),
    0 0 18px rgba(59, 180, 193, 0.32),
    0 0 30px rgba(245, 179, 36, 0.14);
  will-change: transform, opacity, width, height, left, top;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .ripple-pool { display: none; }
}

/* === BUTTONS === */
.btn[hidden] { display: none !important; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-lg); /* TZ: 16px */
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.2s;
}
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 10px 25px rgba(11,34,57,0.18); }
.btn--primary:hover { background: var(--ink-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--grey-blue); }
.btn--outline:hover { background: var(--cream); color: var(--ink); border-color: var(--ink); }
.btn--cream { background: #fff; color: var(--ink); border-color: var(--grey-blue); }
.btn--cream:hover { background: var(--cream); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 18px 32px; font-size: 15px; }
.btn--sm { padding: 10px 18px; font-size: 13px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  width: max-content;
  transition: gap 0.25s, color 0.25s;
}
.link-arrow::after {
  content: '→';
  transition: transform 0.25s;
}
.link-arrow:hover { color: var(--rust); }
.link-arrow:hover::after { transform: translateX(3px); }

/* === EYEBROW LABELS === */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow__num {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: var(--rust);
  text-transform: none;
  letter-spacing: 0;
}

/* === HEADER === */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--cream);
  transition: background 0.25s ease, color 0.25s ease;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: background-color;
}
.site-header.is-scrolled {
  background: #ffffff;
  border-bottom-color: rgba(170, 187, 199, 0.18);
  color: var(--ink);
  will-change: background-color;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding-top: env(safe-area-inset-top, 0);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.logo__mark {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.logo__type {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}
.logo__line1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
}
.logo__line2 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--rust);
}

.nav {
  display: flex;
  gap: 4px;
}
.nav__link {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.nav__link:hover { background: rgba(255, 250, 235, 0.12); }
.site-header.is-scrolled .nav__link:hover { background: var(--cream-2); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header__address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  opacity: 0.85;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.header__address svg { opacity: 0.7; flex-shrink: 0; }
.header__msgs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.msg-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.msg-btn--tg { background: #2AABEE; }
/* У MAX логотип идёт со своим градиентным фоном — оставляем кнопку прозрачной, чтоб не дублировать. */
.msg-btn--max { background: transparent; padding: 0; }
.msg-btn--max img { width: 100%; height: 100%; border-radius: 10px; display: block; object-fit: cover; }
.msg-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(11,34,57,0.2); filter: brightness(1.05); }
.phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
}
.phone span { white-space: nowrap; }
.phone__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sea);
  box-shadow: 0 0 0 4px rgba(111, 169, 196, 0.22);
  display: inline-block;
}
.phone:hover { color: var(--sea); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
}
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  margin: 0 auto;
  transition: transform 0.25s, opacity 0.25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* === HERO — cinematic intro === */
.hero--cinematic {
  position: relative;
  min-height: 100vh;           /* fallback */
  min-height: 100lvh;          /* iOS: pre-size to LARGEST viewport so address bar collapse doesn't grow it */
  overflow: hidden;
  background: var(--ink-deep);         /* dark navy behind hero video */
  color: #fff;
  isolation: isolate;
}
/* JS locks hero to pixel height on load — neutralizes ALL viewport-unit recalculation during scroll */
.hero--cinematic.is-locked {
  min-height: var(--hero-locked-h, 100lvh);
  height: var(--hero-locked-h, 100lvh);
}
.hero--cinematic.is-locked .hero__inner {
  min-height: var(--hero-locked-h, 100lvh);
}

/* hero media container — holds the hero video + veil + grain (own background, not site-wide) */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink-deep);
  pointer-events: none;
  opacity: 0;
  animation: heroMediaFadeIn 1.4s 0.4s ease-out forwards;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchor right side — keeps the girl visible when viewport is narrower than the video aspect */
  object-position: 75% 50%;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* never let user tap the video → no native controls / context-menu on Android */
  pointer-events: none;
  -webkit-touch-callout: none;
}
/* hide native media controls UI on every browser (Android Chrome's "click to play"
   panel, iOS Safari's centered play arrow, etc.) */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-play-button,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-timeline,
.hero__video::-webkit-media-controls-current-time-display,
.hero__video::-webkit-media-controls-time-remaining-display,
.hero__video::-webkit-media-controls-mute-button,
.hero__video::-webkit-media-controls-toggle-closed-captions-button,
.hero__video::-webkit-media-controls-volume-slider,
.hero__video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (max-width: 1400px) {
  .hero__video { object-position: 82% 50%; }
}
@media (max-width: 1100px) {
  .hero__video { object-position: 90% 50%; }
}
@media (max-width: 820px) {
  /* mobile portrait video — center is fine */
  .hero__video { object-position: 70% 50%; }
}
/* background carousel slides — cross-fade every 5s via JS */
@keyframes heroMediaFadeIn { to { opacity: 1; } }

/* veil — darkens video for text readability (cinematic gradient) */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(5, 22, 38, 0.72) 0%,
      rgba(5, 22, 38, 0.5) 28%,
      rgba(5, 22, 38, 0.22) 55%,
      rgba(5, 22, 38, 0.05) 78%),
    linear-gradient(180deg,
      rgba(5, 22, 38, 0.35) 0%,
      rgba(5, 22, 38, 0) 18%,
      rgba(5, 22, 38, 0) 60%,
      rgba(5, 22, 38, 0.6) 100%);
  pointer-events: none;
}

/* film grain — opacity-only, no mix-blend-mode (iOS scroll killer) */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* letterbox bars — cinematic intro */
.hero__letterbox {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  background: #020c14;
  pointer-events: none;
  height: 64px;
}
.hero__letterbox--top    { top: 0;    transform: translateY(0); animation: letterboxOut 1.4s 0.3s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
.hero__letterbox--bottom { bottom: 0; transform: translateY(0); animation: letterboxOutBottom 1.4s 0.3s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes letterboxOut       { to { transform: translateY(-100%); } }
@keyframes letterboxOutBottom { to { transform: translateY(100%);  } }

/* rotating seal */
.hero__badge {
  position: absolute;
  top: 110px;
  right: 36px;
  z-index: 3;
  width: 118px;
  height: 118px;
  color: var(--cream);
  border-radius: 50%;
  background: rgba(7, 62, 90, 0.78);
  border: 1px solid rgba(255, 250, 235, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 28s linear infinite, fadeIn 0.9s 1.6s both;
  opacity: 0;
}
.hero__badge-text {
  font-family: var(--display);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: currentColor;
}
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }

/* Avid-style frame counter */
.hero__counter {
  position: absolute;
  bottom: 100px;
  right: 36px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--body);
  color: var(--cream);
  opacity: 0;
  animation: fadeIn 0.9s 2.4s both;
}
.hero__counter-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__counter-num span {
  font-size: 14px;
  opacity: 0.55;
  margin-left: 2px;
}
.hero__counter-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* content overlay — horizontal padding inherited from .container so the
   hero text always starts at the same X as the logo in the header */
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100lvh;
  padding-top: 110px;
  padding-bottom: 120px;
}
.hero__content {
  max-width: min(640px, 56vw);
  padding-right: 32px;
}

/* eyebrow — light on dark video */
.eyebrow--light {
  color: rgba(255, 250, 235, 0.78);
  opacity: 0;
  animation: rise 0.9s 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.eyebrow--light .eyebrow__num { color: var(--sun-2); }

/* hero title — line-by-line reveal */
.hero__title {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-bottom: 30px;
  color: var(--cream);
  text-shadow: 0 1px 28px rgba(5, 22, 38, 0.45);
  text-wrap: balance;
  max-width: 12ch;
  hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
}
.hero__title em {
  font-style: normal;
  font-weight: 400;
  color: var(--sun-2);
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.hero__line > span {
  display: inline-block;
  transform: translateY(120%);
  animation: lineUp 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero__line:nth-child(1) > span { animation-delay: 0.9s; }
.hero__line:nth-child(2) > span { animation-delay: 1.05s; }
.hero__line:nth-child(3) > span { animation-delay: 1.2s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero__subtitle {
  font-size: 18px;
  color: rgba(255, 250, 235, 0.85);
  text-shadow: 0 1px 14px rgba(5, 22, 38, 0.5);
  max-width: 460px;
  margin: 0 0 36px;
  line-height: 1.55;
  opacity: 0;
  animation: rise 0.9s 1.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  opacity: 0;
  animation: rise 0.9s 1.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.btn--ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255, 250, 235, 0.55);
}
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.hero__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 28px;
  max-width: 600px;
  border-top: 1px solid rgba(255, 250, 235, 0.22);
  opacity: 0;
  animation: rise 0.9s 2.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero__trust--light .trust strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: block;
}
.hero__trust--light .trust small {
  display: block;
  font-size: 12px;
  color: rgba(255, 250, 235, 0.7);
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* scroll cue — placed over video area on the right */
.hero__scroll {
  position: absolute;
  right: 36px;
  bottom: 36px;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 250, 235, 0.78);
  opacity: 0;
  animation: fadeIn 0.9s 2.6s both;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 250, 235, 0.8), rgba(255, 250, 235, 0));
  transform-origin: top;
  animation: scrollPulse 2.2s 3.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.4); opacity: 0.45; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__badge, .hero__letterbox,
  .hero__counter, .hero__scroll,
  .hero__scroll-line,
  .eyebrow--light, .hero__subtitle, .hero__cta, .hero__trust { animation: none; }
  .hero__letterbox { display: none; }
  .hero__line > span { transform: none; }
  .hero__badge, .hero__counter, .hero__scroll, .eyebrow--light,
  .hero__subtitle, .hero__cta, .hero__trust { opacity: 1; }
}

/* (tagline marquee removed — only brand-marquee remains, see below) */

/* === SECTION HEAD === */
.section-head {
  margin-bottom: 36px;
}
.section-head--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-head__num {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: var(--rust);
  text-transform: none;
  letter-spacing: 0;
}
.section-head__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 18ch;
}
.section-head__title em {
  font-style: normal;
  font-weight: 400;
  color: var(--rust);
}
.section-head__link {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.25s;
}
.section-head__link:hover { color: var(--rust); }

/* === SERVICES === */
/* === SERVICES — scroll-pinned image accordion (Meteor-style) === */
.programs { padding: 80px 0 40px; }
/* Pin container creates the scroll-space — its height drives panel progress.
   One viewport per panel, plus 0.5 for entry/exit comfort. */
.programs__pin {
  position: relative;
  /* fallback height for browsers without JS; JS sets this precisely too */
  min-height: calc(var(--pin-panels, 4) * 100vh);
}
.programs__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 24px;
}
.programs__sticky > .container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.section-head--compact {
  margin-bottom: 0;
}
.section-head--compact .section-head__title {
  font-size: clamp(36px, 5vw, 64px);
  margin: 0;
}
.programs__row {
  display: flex;
  gap: 14px;
  width: 100%;
  height: clamp(380px, 64vh, 560px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.program {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-2);
  transition: flex-grow 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: flex-grow;
}
.program.is-active { flex-grow: 4; }
/* Hover-swap отключён по запросу — активная плашка меняется ТОЛЬКО скроллом. */

.program__link {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  text-decoration: none;
}
.program__bg {
  position: absolute;
  inset: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.program.is-active .program__bg { transform: scale(1.04); }
.program__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 19, 31, 0.45) 0%, rgba(8, 19, 31, 0) 30%, rgba(8, 19, 31, 0) 50%, rgba(8, 19, 31, 0.85) 100%);
}
.program__num {
  position: absolute;
  top: 22px;
  left: 26px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

/* body content — only visible when expanded */
.program__body {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s 0.1s, transform 0.6s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.program.is-active .program__body { opacity: 1; transform: translateY(0); pointer-events: auto; }

.program__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 60px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fff;
  margin: 0;
}
.program__lead {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 4px 0 0;
  line-height: 1.3;
}
.program__text {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 4px 0 18px;
  max-width: 40ch;
}
.program__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--sea);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: background 0.25s, transform 0.25s, gap 0.25s;
}
.program__cta svg { transition: transform 0.25s; }
.program__link:hover .program__cta { background: #fff; color: var(--ink); }
.program__link:hover .program__cta svg { transform: translateX(3px); }

/* vertical label shown when collapsed */
.program__label {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s;
  pointer-events: none;
}
.program.is-active .program__label { opacity: 0; }

/* === CATALOG === */
.catalog { padding: 80px 0 40px; }
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s;
}
.product:hover { transform: translateY(-4px); }
.product__image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: 16px;
}
.product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product:hover .product__image img { transform: scale(1.05); }
.product__fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: var(--cream);
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.25s, color 0.25s;
}
.product__fav:hover { background: var(--ink); color: var(--cream); }
.product__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
  flex: 1;
}
.product__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
  /* reserve 2 lines so 1- and 2-line titles take same vertical space across the grid row */
  min-height: 2.3em;
}
.product__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.product__meta li {
  position: relative;
  padding-right: 10px;
}
.product__meta li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: 1px;
  color: var(--line);
}
.product__meta--single li::after { display: none; }
.product__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.product__price {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
/* при скидке: старая цена мелким сверху, текущая крупным снизу — блок компактнее,
   не наезжает на кнопку «Добавить» в .product__foot. align-items: flex-end в
   .product__foot выравнивает все цены (со скидкой и без) по одной нижней линии. */
.product__price:has(.product__price-old) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.1;
}
.product__price:has(.product__price-old) .product__price-old {
  order: -1;
  font-size: 13px;
  line-height: 1.4;
}

/* === ADVANTAGES — clean cream cards === */
.advantages {
  position: relative;
  padding: 96px 0 80px;
  background:
    linear-gradient(180deg, rgba(245, 236, 214, 0.85) 0%, rgba(245, 236, 214, 0.35) 35%, rgba(245, 236, 214, 0.35) 65%, rgba(245, 236, 214, 0.85) 100%),
    url("../images/photos/bg-mountain-dawn.webp") center center / cover no-repeat;
  overflow: hidden;
}
.advantages > .container { position: relative; z-index: 1; }
.advantages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.advantage {
  position: relative;
  padding: 30px 26px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 14px 36px rgba(11, 34, 57, 0.10), 0 2px 8px rgba(11, 34, 57, 0.04);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.advantage:hover {
  border-color: var(--sea);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.advantage__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--sea-soft);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.advantage h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  margin-bottom: 10px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.advantage p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* === DUAL CTA === */
.dual-cta { padding: 60px 0 40px; }
.dual-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cta-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  padding: 36px;
}
.cta-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cta-card__image--side {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  z-index: 0;
}
.cta-card--rent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 62, 90, 0.05) 0%, rgba(7, 62, 90, 0.78) 80%);
  z-index: 1;
}
.cta-card--rent .cta-card__content { color: var(--cream); max-width: 80%; }

.cta-card--repair {
  background: var(--cream);
  color: var(--ink);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--line);
}
.cta-card--repair .cta-card__image--side {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.cta-card--repair .cta-card__content {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-card__content { position: relative; z-index: 2; }
.cta-card__eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cta-card--repair .cta-card__eyebrow {
  background: var(--ink);
  color: var(--cream);
}
.cta-card h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.cta-card h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--rust);
}
.cta-card--rent p {
  margin: 0 0 26px;
  max-width: 38ch;
  opacity: 0.9;
}
.cta-card__list {
  margin: 0 0 26px;
  font-size: 15px;
  display: grid;
  gap: 8px;
}
.cta-card__list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--body);
}
.cta-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}
.cta-card__note {
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 0;
  max-width: 32ch;
}

/* === BLOG === */
.blog { padding: 80px 0 40px; }
.blog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.post {
  display: flex;
  flex-direction: column;
  transition: transform 0.35s;
}
.post:hover { transform: translateY(-4px); }
.post__image {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-2);
  margin-bottom: 16px;
}
.post__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post:hover .post__image img { transform: scale(1.05); }
.post__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 13px;
  background: var(--cream);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.post h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
  max-width: 22ch;
  padding: 0 4px;
}
.post__link {
  padding: 0 4px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}

/* === FOOTER === */
.site-footer {
  background: var(--grad-footer);
  color: var(--sea-soft);
  padding: 96px 0 0;
  margin-top: 64px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(247, 241, 227, 0.12);
}
.footer__heading {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  color: var(--cream);
}
.footer__heading em {
  font-style: normal;
  font-weight: 400;
  color: var(--sun-2);
}
.footer__lead p {
  max-width: 38ch;
  color: rgba(247, 241, 227, 0.7);
  margin: 0 0 30px;
}
.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 32px;
}
.footer__col h4 {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 241, 227, 0.55);
  margin-bottom: 18px;
}
.footer__col ul li {
  margin-bottom: 10px;
  font-size: 14px;
}
.footer__col ul a {
  color: rgba(247, 241, 227, 0.85);
  transition: color 0.2s;
}
.footer__col ul a:hover { color: var(--cream); }
.footer__col--contacts ul li { color: rgba(247, 241, 227, 0.7); word-break: normal; overflow-wrap: normal; hyphens: none; }
.footer__col--contacts ul a { white-space: nowrap; }
.footer__socials {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.footer__socials a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, opacity 0.2s;
}
.footer__socials a img { width: 100%; height: 100%; object-fit: cover; display: block; }
.footer__socials a:hover { opacity: 0.85; transform: translateY(-1px); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  font-size: 12px;
  color: rgba(247, 241, 227, 0.55);
  gap: 16px;
  flex-wrap: wrap;
}
.footer__bottom p { margin: 0; }
.footer__bottom strong { color: var(--cream); font-weight: 700; }
.footer__bottom a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 241, 227, 0.25);
  transition: color 0.2s, border-color 0.2s;
}
.footer__bottom a:hover {
  color: var(--cream);
  border-bottom-color: var(--cream);
}


/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .hero__content { max-width: 100%; padding-right: 0; }
  .hero__trust { max-width: 100%; }
  .hero__badge { width: 92px; height: 92px; top: 100px; right: 24px; }
  .hero__counter { bottom: 88px; right: 24px; }
  .hero__counter-num { font-size: 28px; }
  .catalog__grid, .blog__grid { grid-template-columns: 1fr 1fr; }
  .advantages__grid { grid-template-columns: 1fr 1fr; }
  .advantage { border-bottom: 1px solid var(--line); }
  .advantage:nth-child(2) { border-right: 0; }
  .advantage:nth-last-child(-n+2) { border-bottom: 0; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  /* prevent Android Chrome from inflating header text size and pushing icons
     off-screen. Also disable horizontal overflow on the row. */
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { overflow-x: hidden; }
  /* honour the device safe-area gutter (Android edge-display / iPhone notch)
     so the rightmost icon never sits flush against the bezel. */
  .container {
    padding-left: max(28px, env(safe-area-inset-left, 0px));
    padding-right: max(28px, env(safe-area-inset-right, 0px));
  }
  .header__inner { flex-wrap: nowrap; gap: 12px; }
  .header__actions {
    flex-shrink: 0;
    min-width: 0;
    gap: 10px;
  }
  /* on mobile only cart + burger remain — kill everything else in the row
     so the two visible icons can never be pushed off-screen by a stale CTA. */
  .header__actions .btn,
  .header__actions .btn--primary,
  .header__address,
  .header__msgs,
  .phone { display: none !important; }
  .logo { min-width: 0; flex-shrink: 1; }
  .logo__type { min-width: 0; }
  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: 80px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 20px 28px 28px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 32px -16px rgba(5, 22, 38, 0.25);
    z-index: 60; /* above site-header (50) so taps always hit links */
  }
  .nav.is-open .nav__link {
    padding: 14px 12px;
    font-size: 16px;
    border-radius: 12px;
    color: var(--ink); /* force dark text — without this, inherited cream is invisible on cream bg */
  }
  .nav.is-open .nav__link:hover,
  .nav.is-open .nav__link:active { background: var(--cream-2); color: var(--ink); }
  /* Force burger + cart visible on mobile no matter what. Defensive: in
     addition to display, also lock visibility, opacity, and z-index. */
  .burger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 5;
    background: rgba(11, 34, 57, 0.5);
    border: 1.5px solid rgba(247, 241, 227, 0.85) !important;
    color: var(--cream) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-shrink: 0;
  }
  .burger span { background: var(--cream) !important; }
  .cart-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 5;
    width: 44px !important;
    height: 44px !important;
    background: rgba(11, 34, 57, 0.82);
    border: 1.5px solid rgba(247, 241, 227, 0.95) !important;
    color: var(--cream) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  }
  .cart-btn__count {
    min-width: 24px !important;
    height: 24px !important;
    font-size: 12.5px !important;
    border-width: 2.5px !important;
    background: #d6453d !important;
    color: #fff !important;
  }
  /* Mobile: header is ALWAYS opaque white on every page/state — no transparent bleed-through */
  .site-header {
    background: var(--cream) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .site-header.is-scrolled {
    background: #ffffff !important;
    border-bottom-color: rgba(11, 34, 57, 0.1) !important;
    box-shadow: 0 6px 18px -12px rgba(11, 34, 57, 0.25) !important;
  }
  .site-header .logo__line1 { color: var(--ink) !important; }
  .site-header .logo__line2 { color: var(--sea) !important; }
  .site-header .nav__link { color: var(--ink); }
  .site-header.is-scrolled .burger,
  .site-header.is-scrolled .cart-btn {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(11, 34, 57, 0.25) !important;
    color: var(--ink) !important;
  }
  .site-header.is-scrolled .burger span { background: var(--ink) !important; }
  /* Subpages — fixed at top, fully opaque cream → fully opaque white on scroll */
  .site-header.is-subpage {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--cream) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 1px 0 rgba(11, 34, 57, 0.04) !important;
  }
  .site-header.is-subpage.is-scrolled {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: rgba(11, 34, 57, 0.1) !important;
    box-shadow: 0 8px 24px -12px rgba(11, 34, 57, 0.3) !important;
  }
  .subhero { padding-top: 180px !important; }
  .article__hero { padding-top: 190px !important; }
  /* Subpages — solid filled cart for max visibility on cream bg */
  .site-header.is-subpage .cart-btn {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--cream) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 14px rgba(10, 44, 71, 0.3);
  }
  .site-header.is-subpage .burger {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--cream) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Burger lines always cream/white on subpages — override the .is-scrolled global rule that would paint them navy on navy bg */
  .site-header.is-subpage .burger span,
  .site-header.is-subpage.is-scrolled .burger span {
    background: var(--cream) !important;
  }
  .phone { display: none; }
  .hero--cinematic { min-height: 100vh; min-height: 100lvh; background: transparent; }
  /* mobile: anchor content to TOP of hero so the title sits high on screen */
  /* horizontal padding inherited from .container so hero text aligns with the logo */
  .hero__inner {
    padding-top: 110px;
    padding-bottom: 155px;
    min-height: 100vh;
    min-height: 100lvh;
    align-items: flex-end;
  }
  .hero__content {
    margin-top: 0;
    display: block;
    width: 100%;
  }
  .hero__badge { display: none; }
  .hero__counter { display: none; }
  .hero__scroll { display: none; }
  .hero__letterbox { display: none; }
  .hero__grain { display: none; }
  .hero__video { object-position: 50% 50%; }
  .hero__poster-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
  /* mobile veil — stronger dark top + bottom so cream text reads cleanly over the video */
  .hero__veil {
    background:
      linear-gradient(180deg,
        rgba(5, 22, 38, 0.88) 0%,
        rgba(5, 22, 38, 0.35) 16%,
        rgba(5, 22, 38, 0.15) 40%,
        rgba(5, 22, 38, 0.55) 68%,
        rgba(5, 22, 38, 0.94) 100%);
  }
  .hero__title,
  .hero__subtitle,
  .hero__trust--light .trust strong,
  .hero__trust--light .trust small {
    text-shadow: 0 1px 2px rgba(5, 22, 38, 0.85), 0 2px 18px rgba(5, 22, 38, 0.7);
  }
  .hero__title { font-size: clamp(30px, 7vw, 46px); margin-bottom: 8px; max-width: none; line-height: 1.0; color: #FFF8E6; }
  .hero__subtitle { font-size: 14px; max-width: 100%; margin-bottom: 14px; line-height: 1.42; color: rgba(255, 250, 235, 0.98); }
  .hero__cta { gap: 8px; margin-bottom: 0; }
  .hero__cta .btn { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-size: 13px; }
  .hero__trust {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    max-width: 100%;
    padding-top: 14px;
    margin-top: 15px;
    border-top: 1px solid rgba(255, 250, 235, 0.32);
  }
  .hero__trust--light .trust strong { font-size: 15px; color: #FFF8E6; }
  .hero__trust--light .trust small { font-size: 10.5px; line-height: 1.25; color: rgba(255, 250, 235, 0.9); }
  .services { padding: 60px 0 24px; }
  .catalog { padding: 60px 0 24px; }
  .advantages { padding: 60px 0 24px; }
  .blog { padding: 60px 0 24px; }
  .dual-cta { padding: 40px 0; }
  .dual-cta__grid { grid-template-columns: 1fr; }
  .cta-card--repair { grid-template-columns: 1fr; }
  /* На мобильной версии картинку в блоке ремонта не показываем */
  .cta-card--repair .cta-card__image--side {
    display: none;
  }
  .cta-card { min-height: 380px; }
  .site-footer { padding-top: 64px; margin-top: 32px; }
}
@media (max-width: 560px) {
  .container {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .header__inner { min-height: 64px; gap: 10px; }
  .header__actions { gap: 8px; }
  .header__actions .btn { display: none; }
  .header__msgs .msg-btn { width: 30px; height: 30px; }
  .nav.is-open { inset-block-start: 64px; }
  /* horizontal padding inherited from .container (18px) so hero text aligns with the logo */
  .hero__inner { padding-top: 100px; padding-bottom: 155px; }
  .hero__title {
    font-size: clamp(30px, 8.6vw, 44px);
    margin-bottom: 10px;
    line-height: 1.0;
    max-width: none;
  }
  .hero__title em { letter-spacing: -0.01em; }
  .hero__subtitle { font-size: 14px; margin-bottom: 14px; max-width: 100%; }
  .hero__cta { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
  .hero__cta .btn { flex: 1 1 auto; width: auto; padding: 12px 14px; font-size: 13px; }
  .hero__trust { gap: 10px 14px; padding-top: 14px; margin-top: 15px; }
  .hero__trust--light .trust strong { font-size: 15px; }
  .hero__trust--light .trust small { font-size: 10.5px; line-height: 1.25; }
  .eyebrow--light {
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-bottom: 20px;
    gap: 10px;
  }
  .eyebrow--light .eyebrow__num { font-size: 12px; }
  .eyebrow--light > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
    display: inline-block;
  }
  .hero__subtitle { font-size: 15px; max-width: 100%; margin-bottom: 24px; }
  .marquee__track { font-size: 18px; gap: 22px; }
  /* even tighter on very small phones */
  .catalog__grid { gap: 6px; }
  .blog__grid, .advantages__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .advantage { padding: 22px 16px; }
  .advantage h3 { font-size: 18px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .cta-card { padding: 26px; }
  .cta-card--repair .cta-card__content { padding: 26px; }
  .cta-card h2 { font-size: 30px; }
}

/* narrow phones: stack footer to 1 column so contacts don't wrap mid-token */
@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ultra-narrow safety: iPhone SE 1st gen / Galaxy Fold cover screen */
@media (max-width: 380px) {
  .container {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .hero__title { font-size: clamp(26px, 8.5vw, 34px); margin-bottom: 18px; }
  .hero__subtitle { font-size: 14px; margin-bottom: 22px; }
  .hero__cta .btn { padding: 13px 16px; font-size: 13px; }
  .header__inner { gap: 8px; }
  .logo__type { font-size: 13px; }
  .footer__col--contacts ul a { white-space: normal; overflow-wrap: anywhere; }
}

/* === PROGRAMS ACCORDION — fallback stacked layout below scroll-pin breakpoint ===
   JS отключает pin при window.innerWidth < 900px → CSS должен синхронно
   переключать раскладку, иначе на средних окнах плашки горизонтальные без анимации. */
@media (max-width: 899px) {
  .programs__pin {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 24px;
  }
  .programs__sticky {
    position: static;
    height: auto;
    display: block;
    padding: 0;
  }
  .programs__sticky > .container { gap: 18px; padding: 0 24px; }
  .section-head--compact .section-head__title { font-size: clamp(30px, 6vw, 48px); }
  .programs__row {
    flex-direction: column;
    height: auto;
    gap: 14px;
  }
  .program, .program.is-active { flex: 0 0 auto; }
  .program { height: 360px; border-radius: 22px; }
  .program__body {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    left: 22px;
    right: 22px;
    bottom: 22px;
    gap: 8px;
  }
  .program__label { opacity: 0 !important; }
  .program__title { font-size: 32px; line-height: 1; }
  .program__lead { font-size: 15px; }
  .program__text { max-width: 100%; font-size: 13.5px; margin-bottom: 12px; }
  .program__num { top: 16px; left: 18px; font-size: 14px; }
  .program__cta { padding: 11px 18px; font-size: 13px; }
  /* Текст на карточках лежит прямо на фото — даём ту же тень-обводку, что и у
     hero-заголовка на мобильном, чтобы читался так же чисто. */
  .program__title,
  .program__lead,
  .program__text {
    text-shadow: 0 1px 2px rgba(5, 22, 38, 0.85), 0 2px 18px rgba(5, 22, 38, 0.7);
  }
  .program__num { text-shadow: 0 1px 2px rgba(5, 22, 38, 0.85), 0 2px 18px rgba(5, 22, 38, 0.7); }
  /* Затемнение оставляем только у карточки «Ремонт» (светлый низ фото),
     и делаем его мягким. Остальные карточки — базовая вуаль, фото ярче. */
  .program[data-idx="2"] .program__veil {
    background:
      linear-gradient(180deg, rgba(5, 22, 38, 0.45) 0%, rgba(5, 22, 38, 0.05) 34%, rgba(5, 22, 38, 0.38) 66%, rgba(5, 22, 38, 0.85) 100%);
  }
}

/* ==========================================================================
   CART BUTTON IN HEADER + CART DRAWER
   ========================================================================== */

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10, 44, 71, 0.25);
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cart-btn:hover {
  background: var(--sea);
  color: #fff;
  border-color: var(--sea);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(106, 167, 209, 0.35);
}
.cart-btn svg { width: 22px; height: 22px; }
.cart-btn__count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: #d6453d;
  color: #fff;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--cream);
  box-shadow: 0 3px 10px rgba(214, 69, 61, 0.45);
  transition: transform 0.2s ease-out;
}
.cart-btn__count.is-empty { opacity: 0; transform: scale(0.6); }
.cart-btn__count.bump { animation: cartBump 0.45s cubic-bezier(.36,1.6,.5,1) 1; }
@keyframes cartBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* DRAWER */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.cart-drawer[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}
.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 24, 42, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.cart-drawer[aria-hidden="false"] .cart-drawer__overlay { opacity: 1; }
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, 100%);
  height: 100%;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  box-shadow: -32px 0 60px -20px rgba(4, 24, 42, 0.35);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.cart-drawer[aria-hidden="false"] .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer__head h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-drawer__count-pill {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.cart-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-drawer__close:hover { background: var(--cream-2); }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 26px 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.cart-drawer__empty-icon { color: var(--ink); opacity: 0.25; margin-bottom: 16px; }
.cart-drawer__empty p {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink);
}
.cart-drawer__empty span { font-size: 14px; margin-bottom: 22px; max-width: 260px; }
.cart-drawer.is-not-empty .cart-drawer__empty { display: none; }

.cart-drawer__list { display: flex; flex-direction: column; gap: 14px; padding: 16px 0; }
.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.cart-item__img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-2);
}
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
}
.cart-item__price {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cart-item__price-old {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-weight: 500;
}
.cart-item__price-now {
  color: var(--ink);
  font-weight: 600;
}
.cart-item__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.cart-item__qty button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
}
.cart-item__qty button:hover { background: var(--cream-2); }
.cart-item__qty span {
  display: inline-flex;
  min-width: 24px;
  height: 28px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.cart-item__remove {
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.cart-item__remove:hover { color: var(--coral); }

.cart-drawer__foot {
  padding: 18px 26px 28px;
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cart-drawer__total span {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cart-drawer__total strong {
  font-family: var(--display);
  font-size: 28px;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cart-total__old {
  font-size: 15px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-weight: 500;
}
.cart-total__now {
  color: var(--ink);
  font-weight: 700;
}
.cart-drawer__checkout { width: 100%; justify-content: center; }
.cart-drawer__checkout[disabled] { opacity: 0.7; cursor: progress; }
.cart-drawer__note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* === CART CHECKOUT FORM === */
.cart-checkout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-checkout__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-checkout__field > span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.cart-checkout__field input,
.cart-checkout__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.cart-checkout__field textarea { resize: vertical; min-height: 60px; }
.cart-checkout__field input::placeholder,
.cart-checkout__field textarea::placeholder { color: rgba(11, 34, 57, 0.35); }
.cart-checkout__field input:focus,
.cart-checkout__field textarea:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(106, 167, 209, 0.18);
}
.cart-checkout__field input:invalid:not(:placeholder-shown) {
  border-color: rgba(204, 85, 68, 0.6);
}
.cart-checkout .cart-drawer__checkout { margin-top: 4px; }

/* === ORDER TOAST === */
.order-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 32px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
  width: min(440px, calc(100vw - 32px));
}
.order-toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.order-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 18px;
  box-shadow: 0 24px 48px -16px rgba(5, 22, 38, 0.45), 0 4px 14px rgba(5, 22, 38, 0.3);
}
.order-toast__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--sea);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-toast__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.order-toast__title {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.order-toast__subtitle {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(247, 241, 227, 0.78);
}
.order-toast__close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(247, 241, 227, 0.12);
  color: var(--cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.order-toast__close:hover { background: rgba(247, 241, 227, 0.22); }
@media (max-width: 560px) {
  .order-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .order-toast__inner { padding: 14px 14px; border-radius: 14px; gap: 12px; }
  .order-toast__title { font-size: 15px; }
  .order-toast__subtitle { font-size: 13px; }
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews { padding: 80px 0 40px; }
.reviews__summary { display: flex; align-items: center; }
.reviews__rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.reviews__rating:hover {
  border-color: var(--sea);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.reviews__rating svg { color: var(--sun); }
.reviews__rating strong {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ink);
}
.reviews__rating > span { color: var(--muted); white-space: nowrap; }
.reviews__source {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 9px;
  background: #ffdb4d;
  color: #1a1a1a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.reviews__cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}
.reviews__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.reviews__all:hover {
  border-color: var(--sea);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.reviews__all svg { color: var(--sea); }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.review {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s, box-shadow 0.3s;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.review__stars {
  color: var(--sun);
  letter-spacing: 2px;
  font-size: 14px;
}
.review__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.review__avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink), var(--sea-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(11, 34, 57, 0.18), inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  overflow: hidden;
}
.review__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 50%;
  background: #0b2239;
}
.review__avatar span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.review__avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 55%);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
/* 8 цветовых гаммат — как реальные аватары в маркетплейсах */
.review__avatar--g1 { background: linear-gradient(135deg, #6FA9C4 0%, #132F4A 100%); }
.review__avatar--g2 { background: linear-gradient(135deg, #0B2239 0%, #08131F 100%); }
.review__avatar--g3 { background: linear-gradient(135deg, #E8D6C2 0%, #B89980 100%); }
.review__avatar--g4 { background: linear-gradient(135deg, #5E7385 0%, #0B2239 100%); }
.review__avatar--g5 { background: linear-gradient(135deg, #AABBC7 0%, #6FA9C4 100%); }
.review__avatar--g6 { background: linear-gradient(135deg, #2B5478 0%, #6FA9C4 100%); }
.review__avatar--g7 { background: linear-gradient(135deg, #132F4A 0%, #6FA9C4 100%); }
.review__avatar--g8 { background: linear-gradient(135deg, #C49A7E 0%, #6F4E37 100%); }
.review__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.review__date {
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================================
   CONTACT FORM + MAP
   ========================================================================== */
.contact { padding: 80px 0 80px; background: linear-gradient(180deg, var(--cream), #fff 60%); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 14px;
}
.contact__title { margin-bottom: 14px; }
.contact__lead {
  font-size: 15px;
  color: var(--muted);
  max-width: 460px;
  margin: 0 0 28px;
}

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10, 44, 71, 0.12);
}

.contact-form__channels {
  border: 0;
  padding: 0;
  margin: 4px 0 8px;
}
.contact-form__channels legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.contact-form__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-form__channels legend { flex-basis: 100%; }
.channel input { position: absolute; opacity: 0; pointer-events: none; }
.channel__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.channel__chip:hover { background: var(--cream-2); transform: translateY(-1px); }
.channel input:checked + .channel__chip {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.channel input:focus-visible + .channel__chip {
  box-shadow: 0 0 0 3px rgba(10, 44, 71, 0.18);
}
.channel__chip-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}

.contact-form__legal {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.contact-form__legal a { color: var(--ink); text-decoration: underline; }
.contact-form__success {
  margin-top: 8px;
  padding: 14px 18px;
  background: var(--sea-soft);
  color: var(--sea-deep);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
}

.contact__map { display: flex; flex-direction: column; gap: 20px; }
.contact__map-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-2);
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-md);
}
.contact__map-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.contact__map-card[data-map-status="ready"] iframe { opacity: 1; }
.contact__map-card[data-map-status="failed"] iframe { display: none; }
.contact__map-card[data-map-status="ready"] .map-fallback__loader { opacity: 0; }

/* --- MAP FALLBACK (always rendered behind iframe) --- */
.map-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 40%, #e7f0f4 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, #f0e8d8 0%, transparent 60%),
    linear-gradient(135deg, #eef2f4 0%, #f5f1e8 50%, #ecdfc8 100%);
}
.map-fallback__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 34, 57, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 34, 57, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.7;
}
.map-fallback__roads { position: absolute; inset: 0; }
.map-fallback__road {
  position: absolute;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(11, 34, 57, 0.06);
}
.map-fallback__road--h1 { left: -5%; right: -5%; top: 28%; height: 14px; }
.map-fallback__road--h2 { left: -5%; right: -5%; top: 72%; height: 10px; }
.map-fallback__road--v1 { top: -5%; bottom: -5%; left: 24%; width: 12px; }
.map-fallback__road--v2 { top: -5%; bottom: -5%; left: 68%; width: 8px; }
.map-fallback__road--diag {
  top: 12%; left: -10%; width: 130%; height: 7px;
  transform: rotate(-22deg);
  transform-origin: left center;
  background: #ffffff;
  opacity: 0.85;
}
.map-fallback__river {
  position: absolute;
  bottom: -10%; left: -10%; right: -10%;
  height: 38%;
  background: linear-gradient(180deg, rgba(155, 200, 220, 0.4) 0%, rgba(110, 169, 196, 0.55) 100%);
  border-top: 2px solid rgba(110, 169, 196, 0.7);
  transform: rotate(-6deg) translateY(20%);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.map-fallback__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  animation: mapPinBob 2.6s ease-in-out infinite;
}
@keyframes mapPinBob {
  0%, 100% { transform: translate(-50%, -100%); }
  50%      { transform: translate(-50%, -106%); }
}
.map-fallback__card {
  position: absolute;
  top: 16px;
  left: 16px;
  right: auto;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(11, 34, 57, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(11, 34, 57, 0.12);
  max-width: 78%;
}
.map-fallback__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.map-fallback__brand svg { color: #ee4444; }
.map-fallback__addr {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.map-fallback__hours {
  font-size: 11px;
  color: var(--sea);
  font-weight: 600;
  margin-top: 4px;
}
.map-fallback__loader {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
  border: 1px solid rgba(11, 34, 57, 0.06);
  transition: opacity 0.35s ease;
}
.map-fallback__loader span {
  width: 5px;
  height: 5px;
  background: var(--sea);
  border-radius: 50%;
  animation: mapDot 1.2s infinite ease-in-out;
}
.map-fallback__loader span:nth-child(2) { animation-delay: 0.15s; }
.map-fallback__loader span:nth-child(3) { animation-delay: 0.3s; }
.map-fallback__loader em { font-style: normal; margin-left: 2px; }
@keyframes mapDot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
.contact__map-card[data-map-status="failed"] .map-fallback__loader { display: none; }

.contact__map-link {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(4, 24, 42, 0.18);
  transition: transform 0.25s, box-shadow 0.25s;
}
.contact__map-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(4, 24, 42, 0.24);
}
.contact__map-link svg { color: var(--sea); }
.contact__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.contact__details li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact__details strong {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__details span,
.contact__details a {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
}
.contact__details a:hover { color: var(--coral); }

/* ==========================================================================
   RESPONSIVE — new sections
   ========================================================================== */
@media (max-width: 980px) {
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__details { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .cart-btn { width: 42px; height: 42px; }
  .cart-btn svg { width: 20px; height: 20px; }
  .cart-drawer__panel { width: 100%; }
  .cart-drawer__head { padding: 18px 20px; }
  .cart-drawer__body { padding: 6px 20px 12px; }
  .cart-drawer__foot { padding: 16px 20px 24px; }
  .reviews { padding: 60px 0 24px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .contact { padding: 60px 0 60px; }
  .contact-form__channels { gap: 6px; }
  .channel__chip { padding: 9px 13px; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .cart-btn { display: inline-flex; }
}

/* ===== MINI BANNERS (4 vertical glass cards) ===== */
.banners { padding: 56px 0 16px; }
.banners__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  padding: 22px 22px 24px;
  border-radius: var(--r-xl);
  color: #fff;
  background: var(--grad-navy);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s, box-shadow 0.3s;
}
.banner::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
  z-index: -1;
}
.banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.banner--rent { background: linear-gradient(135deg, #6FA9C4 0%, #132F4A 100%); }
.banner--repair { background: var(--grad-repair); color: var(--ink); }
.banner--repair .banner__arrow { color: var(--ink); }
.banner--accessories { background: linear-gradient(135deg, #CFE6EE 0%, #6FA9C4 100%); color: var(--ink); }
.banner--accessories .banner__arrow { color: var(--ink); }
.banner__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
.banner__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
}
.banner__text {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.86;
  margin: 0;
}
.banner__arrow {
  position: absolute;
  bottom: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 18px;
  transition: transform 0.2s, background 0.2s;
}
.banner:hover .banner__arrow { transform: translateX(4px); background: rgba(255,255,255,0.32); }

/* ===== BRAND MARQUEE — warm sand band under hero with logo emblems ===== */
.brand-marquee {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  padding: 22px 0;
}
.brand-marquee::before,
.brand-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.brand-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--cream-2) 0%, transparent 100%);
}
.brand-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--cream-2) 0%, transparent 100%);
}
.brand-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 44px;
  white-space: nowrap;
  /* duration scaled to content length (34 brands × 2 copies) — keep speed
     comfortable on desktop, JS sync-script lengthens it on small screens */
  animation: brandScroll 110s linear infinite;
  will-change: transform;
}
.brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  flex-shrink: 0;
}
.brand-tile img {
  max-height: 100%;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.88;
  transition: opacity 0.25s, filter 0.25s;
}
.brand-tile:hover img { opacity: 1; }
/* Белые на прозрачном → инвертируем в тёмные на cream */
.brand-tile--invert img { filter: invert(1) brightness(0.18); }
.brand-tile--invert:hover img { filter: invert(1) brightness(0); }
/* Фирменные цветные квадраты — рендерим как небольшие плитки с радиусом */
.brand-tile--chip {
  height: 56px;
  width: 56px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(11,34,57,0.08);
}
.brand-tile--chip img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  opacity: 1;
}
/* Fallback-wordmark для брендов без скачанного лого */
.brand-tile--wm {
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
  opacity: 0.82;
  letter-spacing: 0.005em;
  padding: 0 4px;
}
.brand-tile--wm:hover { opacity: 1; }
@keyframes brandScroll {
  from { transform: translate3d(0, 0, 0); }
  /* JS sets --marquee-distance to the EXACT pixel width of one copy → seamless
     loop. Fallback to -50% if JS hasn't measured yet (still close enough). */
  to   { transform: translate3d(calc(-1 * var(--marquee-distance, 50%)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track { animation: none; }
}

/* ===== HOW IT WORKS — timeline / scroll-revealed steps ===== */
.howto {
  position: relative;
  padding: 110px 0 110px;
  background: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.howto__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
}
.howto__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(40%) blur(2px);
}
.howto__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0%, var(--cream) 80%),
    linear-gradient(180deg, var(--cream) 0%, transparent 25%, transparent 75%, var(--cream) 100%);
  pointer-events: none;
}
.howto > .container { position: relative; z-index: 2; }

/* timeline list */
.timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
}

/* central vertical rail */
.timeline__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: rgba(11, 34, 57, 0.12);
  border-radius: 2px;
  z-index: 0;
}
.timeline__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--ink);
  background-image: linear-gradient(180deg, var(--sea) 0%, var(--ink) 100%);
  height: calc(var(--tl-progress, 0) * 100%);
  border-radius: 2px;
  transition: height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* step row */
.tstep {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  padding: 24px 0;
  min-height: 180px;
}

/* dot + ring */
.tstep__node {
  grid-column: 2 / 3;
  display: grid;
  place-items: center;
  position: relative;
  width: 80px;
  height: 80px;
  z-index: 2;
  justify-self: center;
}
.tstep__dot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--cream);
  border: 2px solid rgba(11, 34, 57, 0.32);
  border-radius: 50%;
  transition: background 0.4s, border-color 0.4s, transform 0.4s;
}
.tstep__ring {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.tstep.is-active .tstep__dot {
  background: var(--ink);
  border-color: var(--sea);
  transform: scale(1.15);
}
.tstep.is-active .tstep__ring {
  opacity: 0.4;
  transform: scale(1);
  animation: ringPulse 2.4s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.15); opacity: 0.15; }
}

/* alternating cards */
.tstep__card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 30px 28px;
  box-shadow: 0 16px 40px rgba(11, 34, 57, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tstep:nth-child(odd of [data-tstep]) .tstep__card,
.tstep.tstep--left .tstep__card {
  grid-column: 1 / 2;
  transform: translateX(-40px);
}
.tstep:nth-child(even of [data-tstep]) .tstep__card,
.tstep.tstep--right .tstep__card {
  grid-column: 3 / 4;
  transform: translateX(40px);
}
.tstep.is-active .tstep__card {
  opacity: 1;
  transform: translateX(0);
}

.tstep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tstep__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sea-soft);
  color: var(--ink);
}
.tstep__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  color: var(--sea-soft);
  letter-spacing: -0.04em;
}
.tstep__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.tstep__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* === HOWTO STEPS — grid of step cards used on rent.html / repair.html === */
.howto__steps {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  counter-reset: none;
}
.step {
  position: relative;
  padding: 28px 26px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.9s ease, box-shadow 0.9s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step::marker { content: ""; }
.step.is-active {
  border-color: var(--sea);
  box-shadow:
    0 24px 60px rgba(111, 169, 196, 0.28),
    0 10px 24px rgba(11, 34, 57, 0.10),
    0 0 0 2px var(--sea);
  z-index: 2;
}
.step__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
}
.step__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--sea-soft);
  color: var(--ink);
}
.step__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 4px 0 0;
}
.step__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* === DESKTOP TIMELINE — horizontal cards row (boostsoftware-style) === */
@media (min-width: 821px) {
  .howto--timeline .timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 48px 0 0;
    padding: 0;
    align-items: stretch;
    position: relative;
  }
  /* rail hidden on desktop — cycle spotlight makes it redundant */
  .howto--timeline .timeline__rail { display: none; }
  /* step becomes a vertical card */
  .howto--timeline .tstep {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
    padding: 0;
    min-height: auto;
    position: relative;
  }
  /* dot/ring hidden on desktop — spotlight on the card itself is enough */
  .howto--timeline .tstep__node { display: none; }
  /* desktop card — structural reset only (matches specificity of mobile odd/even rules) */
  .howto--timeline .tstep__card,
  .howto--timeline .tstep:nth-child(odd of [data-tstep]) .tstep__card,
  .howto--timeline .tstep:nth-child(even of [data-tstep]) .tstep__card,
  .howto--timeline .tstep.tstep--left .tstep__card,
  .howto--timeline .tstep.tstep--right .tstep__card {
    grid-column: auto;
    opacity: 1;
    transform: none;
    min-height: 0;
    display: block;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* desktop card — visual style (match advantages); kept on low-spec selector so .is-active can override */
  .howto--timeline .tstep__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 30px 26px 28px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.9s ease, box-shadow 0.9s ease;
  }
  .howto--timeline .tstep.is-active .tstep__card {
    border-color: var(--sea);
    box-shadow:
      0 24px 60px rgba(111, 169, 196, 0.28),
      0 10px 24px rgba(11, 34, 57, 0.10),
      0 0 0 2px var(--sea);
    z-index: 2;
  }
  /* head: just the icon, drop the number on desktop */
  .howto--timeline .tstep__head {
    display: block;
    margin-bottom: 22px;
  }
  .howto--timeline .tstep__num { display: none; }
  .howto--timeline .tstep__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--sea-soft);
    border: 0;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .howto--timeline .tstep__title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .howto--timeline .tstep__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
  }
}

/* mobile timeline — line on left, cards on right; spotlight follows scroll */
@media (max-width: 820px) {
  .howto { padding: 72px 0; }
  .timeline { margin-top: 32px; }
  .timeline__rail { left: 28px; transform: none; }
  .tstep { grid-template-columns: 56px 1fr; min-height: auto; padding: 14px 0; }
  .tstep__node { grid-column: 1 / 2; width: 56px; height: 56px; }
  .tstep__dot { width: 14px; height: 14px; }
  .tstep__ring { width: 40px; height: 40px; }
  /* cards always visible; only one .is-active at a time (driven by scroll-spotlight JS) */
  .tstep__card,
  .tstep:nth-child(odd of [data-tstep]) .tstep__card,
  .tstep:nth-child(even of [data-tstep]) .tstep__card {
    grid-column: 2 / 3;
    opacity: 1;
    transform: none;
    padding: 20px 22px;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
  }
  .tstep.is-active .tstep__card {
    border-color: var(--sea);
    box-shadow:
      0 18px 44px rgba(111, 169, 196, 0.26),
      0 8px 18px rgba(11, 34, 57, 0.10),
      0 0 0 2px var(--sea);
    z-index: 2;
  }
  .tstep__num { font-size: 36px; }
  .tstep__title { font-size: 20px; }
  .tstep__text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tstep__card { opacity: 1 !important; transform: none !important; }
  .tstep__dot { background: var(--ink); border-color: var(--sea); }
  .tstep__ring { opacity: 0.4; transform: scale(1); animation: none; }
  .timeline__rail-fill { height: 100% !important; }
}

/* ===== CONTACT MESSENGERS chip-list ===== */
.contact__msgs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact__msgs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sea-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.contact__msgs a:hover { background: var(--sea); color: #fff; }
.contact__msgs a img { width: 18px; height: 18px; flex: none; }

/* ===== FOOTER mini map ===== */
.footer__mini-map {
  margin-top: 18px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(170,187,199,0.18);
  aspect-ratio: 16 / 9;
}
.footer__mini-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7);
}

/* ===== RESPONSIVE for new sections ===== */
@media (max-width: 1100px) {
  .banners__grid { grid-template-columns: repeat(2, 1fr); }
  .howto__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1440px) {
  .header__address { font-size: 11.5px; max-width: 180px; }
  .header__actions { gap: 10px; }
  .nav { gap: 2px; }
  .nav__link { padding: 9px 11px; font-size: 13.5px; }
}
@media (max-width: 1340px) {
  .header__address { display: none; }
  .header__actions .btn--primary { padding: 12px 18px; font-size: 13.5px; }
  .nav__link { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 1200px) {
  .header__msgs { display: none; }
  .header__actions { gap: 8px; }
  .header__actions .btn--primary { padding: 11px 16px; font-size: 13px; }
  .phone { font-size: 13px; }
  .nav__link { padding: 7px 9px; font-size: 12.5px; }
}
@media (max-width: 1080px) {
  .nav__link { padding: 7px 8px; font-size: 12px; }
  .phone { display: none; }
}
@media (max-width: 640px) {
  .banners__grid { grid-template-columns: 1fr; gap: 14px; }
  .banner { min-height: 200px; padding: 20px; }
  .banner__title { font-size: 30px; }
  .howto__steps { grid-template-columns: 1fr; }
  .brand-marquee { padding: 18px 0; }
  .brand-marquee__track { gap: 32px; }
  .brand-tile { height: 42px; }
  .brand-tile img { max-width: 120px; }
  .brand-tile--chip { width: 44px; height: 44px; }
  .brand-tile--wm { font-size: 19px; }
  .header__msgs { gap: 4px; }
  .msg-btn { width: 30px; height: 30px; }
  /* customer override: 2 compact cards per row on mobile (was 1 per row per old TZ) */
  .catalog__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ---- COMPACT MOBILE PRODUCT CARDS (kicks in on tablets + phones <=820px) ---- */
@media (max-width: 820px) {
  .catalog__grid,
  .catalog--full .catalog__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* вертикальный прямоугольник 4:5 — единый формат фото по всему сайту */
  .product__image { aspect-ratio: 4 / 5; margin-bottom: 7px; border-radius: 12px; }
  .product__body { gap: 3px; padding: 0; }
  .product__cat { font-size: 9px; letter-spacing: 0.08em; margin-bottom: 0; }
  .product__title { font-size: 12.5px; line-height: 1.18; min-height: 2.2em; }
  .product__desc { display: none; }
  .product__meta { font-size: 9.5px; gap: 2px; margin: 2px 0 0; }
  .product__meta li { padding-right: 5px; }
  .product__price { font-size: 13.5px; gap: 5px; }
  .product__price-old { font-size: 10.5px; }
  .product__foot { padding-top: 7px; gap: 5px; margin-top: auto; }
  .product__fav { width: 26px; height: 26px; top: 7px; right: 7px; }
  .product__fav svg { width: 14px; height: 14px; }
  .product__badge { padding: 3px 7px; font-size: 9.5px; top: 7px; left: 7px; }
  .product__badge--discount { padding: 3px 7px; font-size: 10px; bottom: 7px; right: 7px; }
  .product__cart-control { min-height: 32px; }
  .product__cart-control .btn--sm { height: 32px; font-size: 11.5px; padding: 0 10px; }
  .product__qty { height: 32px; padding: 3px; }
  .product__qty button { width: 26px; height: 26px; font-size: 16px; }
  .product__qty [data-card-count] { font-size: 12.5px; min-width: 18px; padding: 0 2px; }
}

/* ============================================================
   SUBPAGES (catalog.html / rent.html / repair.html / articles.html)
============================================================ */

.page-subpage { background: var(--cream); }
.page-subpage main { display: block; }

/* Subpage header — sticky, always visible like the homepage; transitions to opaque white on scroll */
.site-header.is-subpage {
  position: sticky;
  top: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(11, 34, 57, 0.04);
  color: var(--ink);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.is-subpage.is-scrolled {
  background: #ffffff;
  border-bottom-color: rgba(11, 34, 57, 0.08);
  box-shadow: 0 6px 18px -10px rgba(11, 34, 57, 0.25);
}
.site-header.is-subpage .logo__line1 { color: var(--ink); }
.site-header.is-subpage .logo__line2 { color: var(--sea); }
.site-header.is-subpage .nav__link { color: var(--ink); }
.site-header.is-subpage .nav__link.is-active {
  color: var(--ink);
  background: var(--cream-2);
}
.site-header.is-subpage .nav__link:hover { background: var(--cream-2); }
.site-header.is-subpage .phone,
.site-header.is-subpage .header__address { color: var(--ink); }

/* === SUBHERO === */
.subhero {
  padding: 140px 0 96px;
  position: relative;
  background: linear-gradient(135deg, #CFE6EE 0%, #F5F1E8 45%, #E8D6C2 100%);
  overflow: hidden;
  isolation: isolate;
}
.subhero--rent     { background: linear-gradient(135deg, #6FA9C4 0%, #CFE6EE 38%, #F5F1E8 100%); }
.subhero--repair   { background: linear-gradient(135deg, #E8D6C2 0%, #F5F1E8 50%, #CFE6EE 100%); }
.subhero--articles { background: linear-gradient(135deg, #D9E2E8 0%, #F5F1E8 50%, #CFE6EE 100%); }

/* Dot grid pattern */
.subhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(11,34,57,0.06) 1px, transparent 0);
  background-size: 28px 28px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
/* Floating blob accent */
.subhero::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 540px;
  height: 540px;
  background: radial-gradient(circle at 30% 30%, rgba(111, 169, 196, 0.32) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: blobFloat 18s ease-in-out infinite;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 60px) scale(1.08); }
}

/* Soft color fade above the wave — blends photo/gradient into cream */
.subhero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 420px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(245, 236, 214, 0) 0%,
    rgba(245, 236, 214, 0.25) 25%,
    rgba(245, 236, 214, 0.65) 50%,
    rgba(245, 236, 214, 0.92) 75%,
    rgba(245, 236, 214, 1) 100%
  );
}
@media (max-width: 768px) {
  .subhero__fade { height: 260px; }
}

/* Decorative wave at bottom of subhero — soft asymmetric transition */
.subhero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 140px;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.subhero__wave path { fill: var(--cream); }
@media (max-width: 768px) {
  .subhero__wave { height: 80px; }
}

/* Decorative floating shapes */
.subhero__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.subhero__shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  filter: blur(2px);
  animation: shapeFloat 12s ease-in-out infinite;
}
.subhero__shape--1 {
  top: 18%;
  left: 8%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 30% 30%, #6FA9C4 0%, transparent 70%);
  animation-delay: 0s;
}
.subhero__shape--2 {
  top: 60%;
  left: 18%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #E8D6C2 0%, transparent 70%);
  animation-delay: -3s;
}
.subhero__shape--3 {
  top: 30%;
  right: 22%;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at 30% 30%, #CFE6EE 0%, transparent 70%);
  animation-delay: -6s;
}
.subhero__shape--4 {
  bottom: 22%;
  right: 8%;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle at 30% 30%, rgba(111, 169, 196, 0.5) 0%, transparent 70%);
  animation-delay: -9s;
  filter: blur(8px);
}
@keyframes shapeFloat {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(15px, -20px); }
  50%      { transform: translate(-10px, -10px); }
  75%      { transform: translate(8px, 15px); }
}

.subhero__inner { position: relative; z-index: 2; }

/* Thematic top-down hero photo per subpage */
.subhero__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 22%, #000 55%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 22%, #000 55%);
}
.subhero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}
@media (max-width: 960px) {
  .subhero__photo {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 35%, #000 75%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 35%, #000 75%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .subhero::after, .subhero__shape { animation: none; }
}
.subhero__crumbs {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  text-transform: uppercase;
}
.subhero__crumbs a { color: var(--muted); border-bottom: 1px dashed currentColor; transition: color .2s; }
.subhero__crumbs a:hover { color: var(--ink); }
.subhero__crumbs span[aria-hidden] { margin: 0 8px; opacity: 0.4; }

.subhero__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}
.subhero__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  padding: 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.subhero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.96;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.subhero__title em {
  font-style: normal;
  font-weight: 600;
  color: var(--sea);
}
.subhero__lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 580px;
  margin: 0;
}

.subhero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(11, 34, 57, 0.08);
  border-radius: var(--r-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.subhero__stats > div { text-align: center; }
.subhero__stats strong {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.subhero__stats span {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subhero__tg {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  align-self: end;
}
.subhero__tg-text {
  flex: 1;
  min-width: 0;
}
.subhero__tg-text strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subhero__tg:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.subhero__tg-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #229ED9;
  color: #fff;
  flex-shrink: 0;
}
.subhero__tg-text { flex: 1; }
.subhero__tg-text > span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 2px;
}
.subhero__tg-text strong {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
}
.subhero__tg-arrow { font-size: 24px; opacity: 0.6; transition: transform .25s; }
.subhero__tg:hover .subhero__tg-arrow { transform: translateX(4px); opacity: 1; }

/* === FILTERS / CHIPS === */
.filters {
  padding: 28px 0 16px;
  background: var(--cream);
}
.filters__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.chip:hover { background: var(--cream-2); }
.chip.is-active {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 4px 12px rgba(11, 34, 57, 0.18);
}
.chip__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--cream-2);
  border-radius: 999px;
}
.chip.is-active .chip__count { background: rgba(255,255,255,0.18); color: var(--cream); }

/* === CATALOG (FULL PAGE) === */
.catalog--full { padding: 32px 0 80px; background: var(--cream); }
.catalog--full .catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.product { transition: opacity .2s, transform .25s; }
.product[hidden] { display: none !important; }

.product__cat {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sea);
  font-weight: 600;
  margin-bottom: 6px;
}
/* Описание убрано из превью карточек каталога (по просьбе клиента) — полное описание остаётся на странице товара */
.product__desc {
  display: none;
}
.product__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
}
.product__badge--new { background: var(--sea); }
.product__badge--top { background: #C77B5A; }
/* Статус наличия на карточке каталога (правый верх) */
.product__stock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: rgba(11,142,82,0.12);
  color: #0B8E52;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.product__stock::before {
  content: "";
  width: 7px; height: 7px; border-radius: 999px;
  background: currentColor;
}
.product__stock[data-state="out"] {
  background: rgba(220,160,60,0.16);
  color: #8a5a14;
}
.product__price-old {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 6px;
}
.catalog__empty {
  text-align: center;
  padding: 60px 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--grey-blue);
  border-radius: var(--r-card);
  margin-top: 32px;
}
.catalog__empty p { color: var(--muted); font-size: 16px; margin: 0 0 16px; }

/* === SCROLL-TO-FILTERS FAB (mobile only) === */
.scroll-to-filters {
  position: fixed;
  left: 18px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(11, 34, 57, 0.32), 0 2px 8px rgba(11, 34, 57, 0.18);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.scroll-to-filters[hidden] { display: none; }
.scroll-to-filters.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-to-filters svg {
  display: block;
  stroke: currentColor;
}
@media (max-width: 820px) {
  .scroll-to-filters { display: inline-flex; }
}

/* === PAGINATION === */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 56px 0 0;
  flex-wrap: wrap;
}
.pagination__btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(11, 34, 57, 0.12);
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.pagination__btn:hover:not(:disabled) {
  background: var(--cream);
  border-color: rgba(11, 34, 57, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 34, 57, 0.08);
}
.pagination__btn.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 6px 16px rgba(11, 34, 57, 0.18);
}
.pagination__btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.pagination__btn--nav { font-size: 18px; min-width: 48px; }
@media (max-width: 480px) {
  .pagination { gap: 6px; margin-top: 40px; }
  .pagination__btn { min-width: 40px; height: 40px; padding: 0 10px; font-size: 14px; }
  .pagination__btn--nav { min-width: 44px; }
}

/* === PRICING === */
.pricing { padding: 80px 0; background: var(--cream); }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 34px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card--featured {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 0 24px 60px rgba(11, 34, 57, 0.24);
  transform: scale(1.03);
}
.price-card--featured .price-card__title,
.price-card--featured .price-card__price strong,
.price-card--featured .price-card__price span { color: var(--cream); }
.price-card--featured .price-card__list li { color: rgba(245, 241, 232, 0.85); border-color: rgba(245, 241, 232, 0.12); }
.price-card--featured .price-card__tag { background: var(--sea); color: #fff; }
.price-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream-2);
  border-radius: 999px;
}
.price-card__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0;
}
.price-card__price strong {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.price-card__price span { font-size: 22px; color: var(--muted); }
.price-card__list { list-style: none; padding: 0; margin: 0; }
.price-card__list li {
  padding: 10px 0;
  font-size: 14.5px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  position: relative;
  padding-left: 22px;
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 12px;
  height: 8px;
  border-left: 1.5px solid var(--sea);
  border-bottom: 1.5px solid var(--sea);
  transform: rotate(-45deg);
}
.price-card__list li:first-child { border-top: none; }
.price-card .btn { margin-top: auto; justify-content: center; }
.pricing__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--cream-2);
  border-radius: var(--r-card);
  color: var(--ink-2);
}
.pricing__note p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pricing__note svg { color: var(--sea); flex-shrink: 0; margin-top: 2px; }

/* === RENT — горизонтальная тарифная карта + допы + условия + info-bar === */

/* HERO CARD — горизонтальный двух-колоночный navy-плакат */
.rent-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background: var(--ink);
  color: var(--cream);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 72px;
  position: relative;
  box-shadow: 0 30px 60px -28px rgba(11, 34, 57, 0.45);
}
.rent-hero-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(245,241,232,0.18) 18%, rgba(245,241,232,0.18) 82%, transparent 100%);
  transform: translateX(-0.5px);
}
.rent-hero-card__left {
  padding: 44px 44px 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  position: relative;
}
.rent-hero-card__tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 232, 0.25);
  color: rgba(245, 241, 232, 0.85);
}
.rent-hero-card__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  color: rgba(245, 241, 232, 0.92);
}
.rent-hero-card__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 6px 0 4px;
}
.rent-hero-card__price-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(72px, 9vw, 116px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--cream);
}
.rent-hero-card__price-unit {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rent-hero-card__price-unit b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  color: var(--cream);
  line-height: 1;
}
.rent-hero-card__price-unit em {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
}
.rent-hero-card__note {
  font-size: 14px;
  color: rgba(245, 241, 232, 0.72);
  line-height: 1.55;
  margin: 4px 0 8px;
  max-width: 320px;
}
.rent-hero-card__cta {
  align-self: stretch;
  max-width: 280px;
  justify-content: center;
  margin-top: auto;
}

.rent-hero-card__right {
  padding: 44px 48px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: linear-gradient(155deg, rgba(245, 241, 232, 0.03) 0%, transparent 60%);
}
.rent-hero-card__incl-label {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
}
.rent-hero-card__incl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rent-hero-card__incl li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(245, 241, 232, 0.045);
  border: 1px solid rgba(245, 241, 232, 0.08);
  border-radius: 14px;
  transition: background .25s, border-color .25s, transform .25s;
}
.rent-hero-card__incl li:hover {
  background: rgba(245, 241, 232, 0.08);
  border-color: rgba(111, 169, 196, 0.4);
  transform: translateY(-2px);
}
.rent-hero-card__incl li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.rent-hero-card__incl-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(111, 169, 196, 0.14);
  color: var(--sea);
}
.rent-hero-card__incl-name {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  color: rgba(245, 241, 232, 0.92);
  letter-spacing: -0.005em;
}

/* SECTION HEAD shared by extras and conditions */
.rent-block-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 26px;
}
.rent-block-head__eyebrow {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sea);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(111, 169, 196, 0.1);
}
.rent-block-head__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  color: var(--ink);
  margin: 4px 0 0;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.rent-block-head__sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* EXTRAS — белые карточки 3-в-ряд */
.rent-extras { margin-bottom: 72px; }
.rent-extras__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.extra-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.extra-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sea);
}
.extra-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.extra-card__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.extra-card__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  color: var(--rust);
  white-space: nowrap;
  flex-shrink: 0;
}
.extra-card__desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* CONDITIONS — 3 пронумерованные карточки */
.rent-conditions { margin-bottom: 40px; }
.rent-conditions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.rent-cond-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rent-cond-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sea);
}
.rent-cond-card__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--sea);
  align-self: flex-start;
}
.rent-cond-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  background: var(--rust);
  color: #fff;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.rent-cond-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
  max-width: calc(100% - 70px);
}
.rent-cond-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rent-cond-card__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.rent-cond-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: var(--sea);
  border-radius: 50%;
}
.rent-cond-card__list li strong {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
}
.rent-cond-card__lead {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.rent-cond-card__highlight {
  margin: 2px 0;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.rent-cond-card__highlight strong { color: var(--rust); font-weight: 700; }
.rent-cond-card__note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.rent-cond-card__note strong { color: var(--ink); font-weight: 600; }
.rent-cond-card--accent {
  background: linear-gradient(165deg, #fff 0%, #fff 55%, rgba(198, 110, 45, 0.06) 100%);
  border-color: rgba(198, 110, 45, 0.28);
}

/* PICKUP — info-bar внизу секции */
.rent-pickup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 22px 32px;
  background: var(--cream-2);
  border-radius: var(--r-card);
  border: 1px solid rgba(11, 34, 57, 0.06);
}
.rent-pickup__item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rent-pickup__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(111, 169, 196, 0.16);
  color: var(--sea);
}
.rent-pickup__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rent-pickup__text strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.rent-pickup__text span {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.rent-pickup__divider {
  width: 1px;
  height: 44px;
  background: rgba(11, 34, 57, 0.12);
}

/* RESPONSIVE */
@media (max-width: 980px) {
  .rent-hero-card { grid-template-columns: 1fr; }
  .rent-hero-card::before { display: none; }
  .rent-hero-card__left { padding: 36px 32px 32px; }
  .rent-hero-card__right { padding: 0 32px 36px; }
  .rent-hero-card__cta { max-width: 100%; }
  .rent-hero-card__incl li:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 900px) {
  .rent-extras__grid,
  .rent-conditions__grid { grid-template-columns: 1fr 1fr; }
  .rent-block-head__title { font-size: 24px; }
  .rent-pickup { grid-template-columns: 1fr; gap: 18px; }
  .rent-pickup__divider { display: none; }
}
@media (max-width: 600px) {
  .rent-hero-card { margin-bottom: 48px; border-radius: 22px; }
  .rent-hero-card__left { padding: 28px 22px 24px; gap: 14px; }
  .rent-hero-card__right { padding: 0 22px 28px; gap: 16px; }
  .rent-hero-card__title { font-size: 20px; }
  .rent-hero-card__price-num { font-size: 78px; }
  .rent-hero-card__price-unit b { font-size: 24px; }
  .rent-hero-card__incl { grid-template-columns: 1fr; gap: 10px; }
  .rent-hero-card__incl li { padding: 13px 14px; }
  .rent-extras__grid,
  .rent-conditions__grid { grid-template-columns: 1fr; }
  .rent-extras { margin-bottom: 48px; }
  .rent-conditions { margin-bottom: 32px; }
  .rent-block-head { margin-bottom: 20px; }
  .rent-block-head__title { font-size: 22px; }
  .rent-cond-card { padding: 22px 22px 20px; }
  .rent-cond-card__title { font-size: 17px; max-width: 100%; }
  .rent-cond-card__badge { position: static; align-self: flex-start; margin-bottom: 2px; }
  .rent-pickup { padding: 18px 20px; }
}

/* === CALENDAR / RENT BOOK === */
.rent-book { padding: 80px 0; background: var(--cream-2); }
.rent-book__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.rent-book__cal,
.rent-book__form {
  padding: 36px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.rent-book__cal .section-head,
.rent-book__form header { margin-bottom: 24px; }

.calendar { user-select: none; }
.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.calendar__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background .2s;
}
.calendar__nav:hover { background: var(--cream-2); }
.calendar__month {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 0;
  color: var(--ink);
}
.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.calendar__weekdays span {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar__day {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  background: var(--cream);
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--ink);
  transition: all .15s;
  position: relative;
}
.calendar__day-num { font-size: 15px; font-weight: 700; line-height: 1; }
.calendar__day-cnt { font-size: 10.5px; font-weight: 600; line-height: 1; color: #0B8E52; letter-spacing: 0; }
.calendar__day:hover { background: var(--sea-soft); border-color: var(--sea); }
.calendar__day.is-empty { background: transparent; cursor: default; }
.calendar__day.is-empty:hover { background: transparent; border-color: transparent; }
.calendar__day.is-past { color: var(--muted-soft); background: transparent; cursor: not-allowed; }
.calendar__day.is-past:hover { background: transparent; border-color: transparent; }
/* Частично занято — янтарный счётчик */
.calendar__day.is-low .calendar__day-cnt { color: #C77B5A; }
.calendar__day.is-busy {
  color: var(--muted-soft);
  background: var(--cream);
  cursor: not-allowed;
}
.calendar__day.is-busy .calendar__day-num { text-decoration: line-through; }
.calendar__day.is-busy .calendar__day-cnt { color: #c2796f; }
.calendar__day.is-busy:hover { background: var(--cream); border-color: transparent; }
.calendar__day.is-today { border-color: var(--ink); font-weight: 800; }
/* Дни внутри выбранного периода — светлая заливка, концы периода — тёмные */
.calendar__day.is-selected {
  background: var(--sea-soft);
  border-color: var(--sea);
  color: var(--ink);
}
.calendar__day.is-selected .calendar__day-cnt { color: #0B8E52; }
.calendar__day.is-range-end {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.calendar__day.is-range-end .calendar__day-cnt { color: rgba(255,255,255,0.8); }
.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.calendar__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.dot--free { background: var(--cream); border-color: var(--sea); }
.dot--busy { background: var(--cream); border-color: var(--grey-blue); }
.dot--selected { background: var(--ink); border-color: var(--ink); }

/* === FAQ === */
.faq { padding: 80px 0; background: var(--cream); }
.faq__list {
  max-width: 880px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq__item[open] { box-shadow: var(--shadow-sm); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-right: 56px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 300;
  color: var(--sea);
  transition: transform .25s;
}
.faq__item[open] summary::after { content: "−"; transform: translateY(-50%) rotate(0); }
.faq__item p {
  padding: 0 28px 22px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* === SERVICES (REPAIR PRICE LIST) === */
.services { padding: 80px 0; background: var(--cream); }
.services__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.service {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--cream-2);
  color: var(--ink);
}
.service__body h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--ink);
}
.service__body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 14px;
}
.service__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service__items li {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--cream-2);
  color: var(--ink);
  border-radius: 999px;
}
.service__price {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.service__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-size: 14.5px;
}
.service__price-row span { color: var(--muted); }
.service__price-row strong { color: var(--ink); font-size: 16px; font-weight: 700; }
.service__price-row--total { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 4px; }
.service__price-row--total span { color: var(--ink); font-weight: 600; }
.service__price-row--total strong { color: var(--sea); font-size: 18px; }

/* === REPAIR FORM SECTION === */
.repair-form { padding: 80px 0; background: var(--cream-2); }
.repair-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.repair-form__perks {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.repair-form__perks li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.5;
}
.repair-form__perks-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-weight: 800;
}
.repair-form__perks strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.repair-form__perks span { color: var(--muted); font-size: 13.5px; }

/* === ARTICLES LIST === */
.articles-list { padding: 32px 0 80px; background: var(--cream); }
.articles-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
.articles-list__grid .post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.articles-list__grid .post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.articles-list__grid .post[hidden] { display: none !important; }
.articles-list__grid .post__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.articles-list__grid .post__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.articles-list__grid .post:hover .post__image img { transform: scale(1.06); }
.articles-list__grid .post__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.articles-list__grid .post__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.articles-list__grid .post__meta {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.articles-list__grid .post__body h2,
.articles-list__grid .post__body h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}
.articles-list__grid .post__body h2 { font-size: 26px; }
.articles-list__grid .post__body h3 { font-size: 19px; }
.articles-list__grid .post__body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.articles-list__grid .post__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sea);
  text-decoration: none;
  align-self: flex-start;
}
.articles-list__grid .post__link:hover { color: var(--ink); }
.post--feat {
  grid-column: span 2;
  flex-direction: row;
}
.post--feat .post__image { aspect-ratio: auto; flex: 1; }
.post--feat .post__image img { aspect-ratio: 4/3; }
.post--feat .post__body { flex: 1; padding: 32px 36px; justify-content: center; }

/* === CTA STRIP (BOTTOM) === */
.cta-strip {
  background: var(--ink);
  color: var(--cream);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(111, 169, 196, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.cta-strip__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.cta-strip h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--cream);
  line-height: 1.1;
}
.cta-strip p { color: rgba(245, 241, 232, 0.7); font-size: 15.5px; line-height: 1.55; margin: 0; max-width: 560px; }
.cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}
.cta-strip .btn--ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245, 241, 232, 0.3);
}
.cta-strip .btn--ghost-light:hover { background: rgba(245, 241, 232, 0.1); }

/* === SUBPAGE RESPONSIVE === */
@media (max-width: 1100px) {
  .subhero__row { grid-template-columns: 1fr; gap: 32px; }
  .rent-book__grid { grid-template-columns: 1fr; gap: 28px; }
  .repair-form__grid { grid-template-columns: 1fr; gap: 32px; }
  .post--feat { grid-column: span 1; flex-direction: column; }
  .post--feat .post__image img { aspect-ratio: 16/10; }
  .price-card--featured { transform: none; }
  .cta-strip__inner { grid-template-columns: 1fr; }
  .cta-strip__actions { justify-content: flex-start; }
}

@media (max-width: 768px) {
  /* Надстрочные заголовки секций: усилить контраст на кремовом фоне */
  .section-head__eyebrow { color: var(--ink); font-weight: 700; }
  .section-head__num { color: var(--sea-deep); font-weight: 600; }
  .subhero { padding: 100px 0 40px; }
  .subhero__title { font-size: clamp(32px, 8vw, 48px); }
  .subhero__stats { padding: 18px 16px; }
  .subhero__stats strong { font-size: 22px; }
  .subhero__stats span { font-size: 10.5px; }
  .filters { padding: 18px 0 12px; }
  .filters__bar { padding: 8px; gap: 6px; border-radius: 18px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .filters__bar::-webkit-scrollbar { display: none; }
  .chip { padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
  .pricing { padding: 56px 0; }
  .pricing__grid { gap: 16px; }
  .rent-book { padding: 56px 0; }
  .rent-book__cal, .rent-book__form { padding: 24px 20px; }
  .calendar__day { font-size: 13px; }
  .calendar__weekdays span { font-size: 10.5px; }
  .faq { padding: 56px 0; }
  .faq__item summary { padding: 18px 20px; font-size: 15px; padding-right: 50px; }
  .faq__item summary::after { right: 20px; }
  .faq__item p { padding: 0 20px 18px; }
  .services { padding: 56px 0; }
  .services__list { grid-template-columns: 1fr; }
  .service { padding: 24px 22px; }
  .repair-form { padding: 56px 0; }
  .cta-strip { padding: 44px 0; }
  .cta-strip__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .articles-list__grid { grid-template-columns: 1fr; gap: 18px; }
  .catalog--full .catalog__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pricing__grid { grid-template-columns: 1fr; }
  .subhero__stats { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .subhero__stats > div { display: flex; justify-content: space-between; align-items: baseline; text-align: left; }
  .subhero__stats strong { margin-bottom: 0; }
  .subhero__tg { padding: 16px 18px; gap: 12px; }
  .subhero__tg-icon { width: 40px; height: 40px; }
  .subhero__tg-text strong { font-size: 18px; }
}

/* === INCLUDES STRIP (catalog) — single infographic image, edge-to-edge cream bg === */
.includes {
  padding: 56px 0 64px;
  /* matches the dominant background of includes-strip.webp so no seam appears on ultra-wide screens */
  background: #ece4d8;
}
.includes__heading {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}
.includes__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.includes .container {
  /* on this section the strip already has built-in padding, let it span full width */
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.includes__strip {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 820px) {
  .includes { padding: 28px 0 32px; }
  .includes__heading { margin: 0 auto 18px; padding: 0 18px; }
  .includes__title { font-size: 18px; line-height: 1.25; }
}

/* ============================================================
   CATALOG — UNIFIED FILTER PANEL (tabs + dropdowns + sort + price)
============================================================ */
.filters__panel {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px 18px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 14px rgba(11, 34, 57, 0.04);
}

/* tabs row */
.filters__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.filters__tabs .chip {
  padding: 9px 16px;
  font-size: 14px;
  gap: 7px;
  border-radius: 999px;
}
.filters__tabs .chip svg {
  width: 15px; height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.filters__reset-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.filters__reset-inline:hover { color: var(--ink); border-color: var(--ink); background: rgba(11,34,57,0.04); }
.filters__reset-inline[hidden] { display: none !important; }

/* divider between tabs and dropdown grid */
.filters__hr {
  height: 1px;
  margin: 14px -4px 14px;
  background: linear-gradient(to right, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  border: none;
}

/* responsive auto-fit grid of filter groups */
.filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
.filters__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.filters__group[hidden] { display: none !important; }
.filters__group--sort,
.filters__group--price { grid-column: span 2; }
.filters__label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.2;
}

.filters__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%230B2239' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 12px center;
  background-size: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 30px 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}
.filters__select:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
.filters__select:hover { border-color: var(--ink); }

/* price group — inline inputs row */
.filters__price-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2px 8px;
  height: 38px;
}
.filters__price-row input {
  width: 100%;
  min-width: 0;
  padding: 6px 4px;
  background: transparent;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  text-align: center;
}
.filters__price-row input::-webkit-outer-spin-button,
.filters__price-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filters__price-row input { -moz-appearance: textfield; }
.filters__price-row input:focus { outline: none; }
.filters__price-row:focus-within { border-color: var(--sea); box-shadow: 0 0 0 2px rgba(35, 92, 138, 0.15); }
.filters__price-row .filters__price-sep { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.filters__price-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 -2px 0 2px;
  background: rgba(11, 34, 57, 0.08);
  border: none;
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.filters__price-clear:hover { background: rgba(11, 34, 57, 0.16); }
.filters__price-clear[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .filters__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 820px) {
  .filters__panel {
    padding: 10px 10px 12px;
    border-radius: 18px;
  }
  .filters__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 5px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .filters__tabs::-webkit-scrollbar { display: none; }
  .filters__tabs .chip {
    padding: 7px 12px;
    font-size: 12.5px;
    flex-shrink: 0;
  }
  .filters__reset-inline {
    margin-left: 4px;
    padding: 6px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .filters__hr { margin: 10px -2px; }
  .filters__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .filters__group--sort,
  .filters__group--price { grid-column: span 2; }
  .filters__label {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .filters__select {
    padding: 8px 26px 8px 10px;
    font-size: 12.5px;
    border-radius: 10px;
  }
  .filters__price-row {
    border-radius: 10px;
    height: 36px;
    padding: 2px 6px;
  }
  .filters__price-row input { font-size: 12.5px; }
}

/* ---- sort + price filter row ---- */
.filters__row--sort {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.filters__sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.filters__sort select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%230B2239' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 12px center;
  background-size: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 32px 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  min-width: 200px;
}
.filters__sort select:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
.filters__price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.filters__price input {
  width: 92px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink);
}
.filters__price input::-webkit-outer-spin-button,
.filters__price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filters__price input { -moz-appearance: textfield; }
.filters__price input:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
.filters__price-sep { color: var(--muted); font-weight: 600; }
.filters__price-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--line);
  border: 0;
  color: var(--ink);
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.2s;
}
.filters__price-clear:hover { background: rgba(11, 34, 57, 0.18); }
.filters__price-clear[hidden] { display: none; }

/* ---- AUTO DISCOUNT BADGE on product cards (bottom-right of image to avoid heart/fav button) ---- */
.product__badge--discount {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  background: #d6453d;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(214, 69, 61, 0.32);
  width: auto;
  height: auto;
}
.product__price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product__price-old {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  order: -1;
}

/* narrow mobile: stack product foot vertically (price on top, button full-width below)
   prevents overflow when discount card shows both old + new price + qty stepper */
@media (max-width: 560px) {
  .product__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .product__price {
    width: 100%;
    flex-direction: row;
    align-items: baseline;
  }
  .product__cart-control {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }
  .product__cart-control .btn--sm,
  .product__qty {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .filters__row--sort { gap: 10px; padding: 10px 12px; }
  .filters__sort {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }
  .filters__sort select {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 65%;
    padding: 7px 28px 7px 12px;
    font-size: 13px;
  }
  .filters__price {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .filters__price .filters__label { margin-right: 4px; }
  .filters__price input {
    flex: 0 0 auto;
    width: 84px;
    padding: 7px 10px;
    font-size: 13px;
  }
  .filters__price-clear { margin-left: auto; }
}

/* product card — clickable + cursor */
.product[data-product-id] { cursor: pointer; }
.product[data-product-id] .product__foot .btn { cursor: pointer; }
.product[data-promo] .product__image::before {
  content: '−';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: auto auto 12px 12px;
  z-index: 2;
  padding: 6px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rust);
  border-radius: 999px;
}
.product[data-promo] .product__image::before { content: 'Акция'; }
.product__price-old {
  display: inline-block;
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
  margin-right: 8px;
  font-weight: 500;
}

/* ============================================================
   PRODUCT QUICK-VIEW MODAL
============================================================ */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 22, 38, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.product-modal[aria-hidden="false"] { opacity: 1; visibility: visible; }
.product-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  width: min(1100px, 100%);
  height: min(760px, 92vh);
  background: var(--cream);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(5, 22, 38, 0.4);
  transform: translateY(20px);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1);
}
.product-modal[aria-hidden="false"] .product-modal__panel { transform: translateY(0); }
.product-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  transition: background .2s, transform .2s;
}
.product-modal__close:hover { background: #fff; transform: rotate(90deg); }

.product-modal__gallery {
  position: relative;
  background: var(--cream-2);
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
.product-modal__main {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
}
.product-modal__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  z-index: 2;
  transition: background .2s, transform .2s;
}
.product-modal__nav:hover { background: #fff; }
.product-modal__nav--prev { left: 14px; }
.product-modal__nav--next { right: 14px; }
.product-modal__nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Миниатюры — плавающей панелью поверх основного фото (в левом нижнем углу). */
.product-modal__thumbs {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 0;
  background: transparent;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  scrollbar-width: thin;
}
.product-modal__thumbs[hidden] { display: none; }
.product-modal__thumbs button {
  flex: 0 0 60px;
  width: 60px; height: 60px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  background: var(--cream);
  cursor: pointer;
  padding: 0;
  transition: border-color .2s, transform .2s;
}
.product-modal__thumbs button img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-modal__thumbs button:hover { transform: translateY(-2px); }
.product-modal__thumbs button.is-active { border-color: var(--ink); }
/* video thumbnail slot (8th item when product has a video review) */
.product-modal__thumb--video { position: relative; }
.product-modal__thumb--video img { filter: brightness(0.7); }
.product-modal__thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.product-modal__thumb-play svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.product-modal__thumb--video:hover img { filter: brightness(0.85); }

.product-modal__info {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.product-modal__cat {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
  font-weight: 700;
  margin-bottom: 8px;
}
.product-modal__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--ink);
}
.product-modal__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.85;
  margin: 0 0 20px;
}
.product-modal__stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(76, 167, 110, 0.10);
  border: 1px solid rgba(76, 167, 110, 0.32);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #2d6e44;
  margin: 0 0 18px;
  align-self: flex-start;
}
.product-modal__stock[hidden] { display: none; }
.product-modal__stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ca76e;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(76, 167, 110, 0.22);
}
.product-modal__stock[data-stock-level="mid"] {
  background: rgba(220, 160, 60, 0.10);
  border-color: rgba(220, 160, 60, 0.32);
  color: #8a5a14;
}
.product-modal__stock[data-stock-level="mid"]::before {
  background: #dca03c;
  box-shadow: 0 0 0 3px rgba(220, 160, 60, 0.22);
}
.product-modal__stock[data-stock-level="low"] {
  background: rgba(199, 84, 84, 0.10);
  border-color: rgba(199, 84, 84, 0.32);
  color: #963a3a;
}
.product-modal__stock[data-stock-level="low"]::before {
  background: #c75454;
  box-shadow: 0 0 0 3px rgba(199, 84, 84, 0.22);
}
/* «Под заказ» — тёплый янтарный (не серый) */
.product-modal__stock[data-stock-level="order"] {
  background: rgba(220, 160, 60, 0.10);
  border-color: rgba(220, 160, 60, 0.32);
  color: #8a5a14;
}
.product-modal__stock[data-stock-level="order"]::before {
  background: #dca03c;
  box-shadow: 0 0 0 3px rgba(220, 160, 60, 0.22);
}

.product-modal__specs {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.product-modal__specs[hidden] { display: none; }
.product-modal__specs li[data-spec-extra] { display: none; }
.product-modal__specs.is-expanded li[data-spec-extra] { display: flex; }
.product-modal__specs-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -8px 0 22px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.product-modal__specs-toggle[hidden] { display: none; }
.product-modal__specs-toggle:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.product-modal__specs-toggle svg {
  transition: transform 0.3s ease;
}
.product-modal__specs-toggle.is-expanded svg {
  transform: rotate(180deg);
}

/* video review button */
.product-modal__video-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin: 0 0 18px;
  align-self: flex-start;
  transition: background 0.2s, transform 0.2s;
}
.product-modal__video-btn[hidden] { display: none; }
.product-modal__video-btn:hover {
  background: var(--sea);
  transform: translateY(-1px);
}
.product-modal__video-btn svg { color: currentColor; }

.product-modal__specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
}
.product-modal__specs li span { color: var(--muted); }
.product-modal__specs li strong { color: var(--ink); font-weight: 700; }

.product-modal__buy {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.product-modal__price {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.product-modal__price-now { color: var(--ink); }
.product-modal__price-old {
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 600;
  color: var(--grey-blue);
  text-decoration: line-through;
  letter-spacing: 0;
}
/* «Что в комплекте» в быстром просмотре — список с галочкой слева (как на странице товара) */
.product-modal__includes-wrap { margin-top: 2px; }
.product-modal__includes-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-modal__includes {
  columns: 2;
  column-gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-modal__includes li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  break-inside: avoid;
  margin-bottom: 6px;
}
.product-modal__includes li:last-child { margin-bottom: 0; }
.product-modal__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sea);
  font-weight: 800;
}
@media (max-width: 600px) {
  .product-modal__includes { columns: 1; }
}
.product-modal__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.product-modal__qty button {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  border-radius: 999px;
  transition: background .2s;
}
.product-modal__qty button:hover:not(:disabled) { background: var(--cream-2); }
.product-modal__qty button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}

/* CARD cart control — single "Добавить" button OR qty stepper */
.product__cart-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 124px;
  min-height: 40px;
  flex-shrink: 0;
}
.product__cart-control .btn--sm {
  height: 40px;
  width: 100%;
  padding: 0 18px;
  justify-content: center;
}
.product__qty {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px;
  width: 100%;
  background: var(--ink);
  border-radius: 999px;
  height: 40px;
  box-shadow: var(--shadow-md);
  animation: card-qty-in .25s cubic-bezier(.34,1.56,.64,1);
}
.product__qty[hidden] { display: none; }
.product__qty button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
}
.product__qty button:hover {
  background: rgba(255, 255, 255, 0.14);
}
.product__qty button:active { transform: scale(.92); }
.product__qty [data-card-count] {
  min-width: 22px;
  padding: 0 4px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
@keyframes card-qty-in {
  0% { transform: scale(.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.product-modal__qty span {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  color: var(--ink);
}
.product-modal__add {
  flex: 1;
  min-width: 140px;
  justify-content: center;
}
.product-modal__in-cart {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(106, 167, 209, 0.12), rgba(10, 44, 71, 0.08));
  border: 1px solid rgba(10, 44, 71, 0.14);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  flex-wrap: wrap;
}
.product-modal__in-cart svg { flex: 0 0 18px; color: var(--accent, #6aa7d1); }
.product-modal__in-cart strong {
  font-weight: 700;
  background: var(--ink);
  color: var(--cream);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.product-modal__open-cart {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(10, 44, 71, 0.4);
  padding-bottom: 1px;
  transition: opacity .2s;
}
.product-modal__open-cart:hover { opacity: .65; }

@media (max-width: 820px) {
  .product-modal { padding: 0; align-items: flex-end; }
  .product-modal__panel {
    display: block;            /* override desktop grid so children stack naturally */
    grid-template-columns: none;
    height: auto;              /* desktop sets fixed height; mobile uses content + max-height */
    max-height: 92dvh;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .product-modal__gallery { min-height: 0; }
  .product-modal__main {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream-2);
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
  }
  .product-modal__main img {
    width: 100%;
    height: auto;
    max-height: 65vh;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
  }
  .product-modal__nav { background: rgba(255,255,255,0.96); }
  .product-modal__thumbs {
    position: static;
    padding: 12px;
    background: var(--cream-2);
    max-width: none;
  }
  .product-modal__thumbs button { box-shadow: none; border-color: transparent; }
  .product-modal__info {
    padding: 22px 20px 28px;
    overflow: visible;
  }
  .product-modal__title { font-size: 22px; }
  .filters--tiers { gap: 8px; }
  .filters__row--primary { gap: 6px; }
  .filters__row--primary .chip {
    padding: 10px 16px;
    font-size: 13.5px;
  }
  .filters__row--brands { padding: 10px 12px; }
  .filters__row--brands .chip { font-size: 12px; padding: 7px 12px; }
  .filters__label { display: none; }
  /* keep labels in sort row visible (price/sort need them for context) */
  .filters__row--sort .filters__label { display: inline; font-size: 11px; }
}

/* ============================================================
   VIDEO REVIEW OVERLAY
============================================================ */
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(7, 17, 27, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-overlay[aria-hidden="false"] { display: flex; }
.video-overlay__video {
  max-width: 100%;
  max-height: 100%;
  width: min(900px, 100%);
  background: #000;
  border-radius: 12px;
}
.video-overlay__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.video-overlay__close:hover { background: rgba(255, 255, 255, 0.22); }
@media (max-width: 820px) {
  .video-overlay { padding: 12px; }
  .video-overlay__close { width: 44px; height: 44px; }
}

/* ============================================================
   PHOTO LIGHTBOX (fullscreen photo viewer)
============================================================ */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(7, 17, 27, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.photo-lightbox[aria-hidden="false"] { display: flex; }
.photo-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.photo-lightbox__close,
.photo-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.photo-lightbox__close:hover,
.photo-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.photo-lightbox__close { top: 18px; right: 18px; }
.photo-lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.photo-lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
.photo-lightbox__nav[hidden] { display: none; }
.photo-lightbox__count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 12px;
  border-radius: 999px;
}
.photo-lightbox__count[hidden] { display: none; }
/* zoom-in cursor hint on the modal photo */
.product-modal__main img { cursor: zoom-in; }
@media (max-width: 820px) {
  .photo-lightbox { padding: 12px; }
  .photo-lightbox__close,
  .photo-lightbox__nav { width: 44px; height: 44px; }
}

/* ============================================================
   ARTICLE PAGE — single article layout
============================================================ */
.article-page { background: var(--cream); }

.article__hero {
  position: relative;
  padding: 140px 0 200px;
  overflow: hidden;
  isolation: isolate;
}
.article__hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
.article__hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,22,38,0.35) 0%, rgba(5,22,38,0.55) 60%, rgba(245,241,232,1) 100%);
}
.article__hero-inner {
  position: relative;
  max-width: 820px;
  z-index: 2;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(11, 34, 57, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.article-back svg {
  flex-shrink: 0;
  color: var(--sea);
  transition: transform .25s ease, color .25s ease;
}
.article-back:hover {
  background: #fff;
  box-shadow: 0 12px 28px -10px rgba(11, 34, 57, 0.45);
}
.article-back:hover svg {
  transform: translateX(-3px);
  color: var(--ink);
}
.article-back:active { transform: scale(0.97); }
@media (max-width: 600px) {
  .article-back {
    padding: 8px 14px 8px 11px;
    font-size: 13px;
    margin-bottom: 16px;
  }
  .article-back svg { width: 16px; height: 16px; }
}
.article__crumbs {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 18px;
}
.article__crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  transition: color .2s;
}
.article__crumbs a:hover { color: #fff; }
.article__tag {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--cream);
  color: var(--ink);
  border-radius: 999px;
  margin-bottom: 18px;
}
.article__title {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  margin: 0 0 22px;
  text-shadow: 0 4px 28px rgba(5,22,38,0.4);
}
.article__title em {
  font-style: normal;
  font-weight: 400;
  color: #cfe6ee;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.86);
}
.article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article__meta svg { width: 14px; height: 14px; opacity: 0.85; }

.article__cover {
  position: relative;
  margin: -180px auto 0;
  max-width: 1080px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(5,22,38,0.45);
  z-index: 5;
}
.article__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.article__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 0 80px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.article__body > p:first-of-type {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 28px;
}
.article__body p {
  margin: 0 0 22px;
}
.article__body h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin: 48px 0 18px;
  color: var(--ink);
}
.article__body h2::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--sea);
  margin-bottom: 14px;
  border-radius: 2px;
}
.article__body h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--ink);
}
.article__body ul, .article__body ol {
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}
.article__body ul li {
  position: relative;
  padding: 6px 0 6px 28px;
}
.article__body ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
}
.article__body ol {
  counter-reset: ord;
}
.article__body ol li {
  counter-increment: ord;
  position: relative;
  padding: 6px 0 6px 38px;
}
.article__body ol li::before {
  content: counter(ord);
  position: absolute;
  left: 0;
  top: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--cream);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
}
.article__body blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: rgba(255,255,255,0.7);
  border-left: 4px solid var(--rust);
  border-radius: 0 14px 14px 0;
  font-style: normal;
  color: var(--ink);
}
.article__body blockquote p:last-child { margin-bottom: 0; }
.article__body strong { font-weight: 700; color: var(--ink); }
.article__body a {
  color: var(--sea);
  text-decoration: none;
  border-bottom: 1px solid var(--sea);
  transition: color .2s;
}
.article__body a:hover { color: var(--rust); border-bottom-color: var(--rust); }
.article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.article__body table th,
.article__body table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.article__body table th {
  background: rgba(255,255,255,0.5);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.article__body table tr:last-child td { border-bottom: 0; }

.article__callout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 32px 0;
  padding: 22px 26px;
  background: linear-gradient(135deg, #cfe6ee 0%, #f5f1e8 100%);
  border-radius: 18px;
}
.article__callout svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--ink); }
.article__callout strong { display: block; margin-bottom: 4px; }

.article__cta {
  margin: 56px auto 0;
  max-width: 720px;
  padding: 36px 32px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 24px;
  text-align: center;
}
.article__cta h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #fff;
}
.article__cta p {
  font-size: 15px;
  margin: 0 0 22px;
  opacity: 0.9;
}
.article__cta .btn { display: inline-flex; }

.article__related {
  background: rgba(255,255,255,0.4);
  padding: 64px 0;
  border-top: 1px solid var(--line);
}
.article__related h2 {
  font-family: var(--display);
  font-size: 28px;
  margin: 0 0 28px;
  color: var(--ink);
}
.article__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.article__related-card {
  display: block;
  background: var(--cream);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .25s, box-shadow .25s;
  border: 1px solid var(--line);
}
.article__related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -16px rgba(5,22,38,0.25);
}
.article__related-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.article__related-card-body { padding: 18px 20px 22px; }
.article__related-card-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sea);
  margin-bottom: 8px;
}
.article__related-card-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 820px) {
  .article__hero { padding: 110px 0 140px; }
  .article__cover { margin: -100px auto 0; border-radius: 18px; }
  .article__body { padding: 40px 0 60px; font-size: 16px; line-height: 1.7; }
  .article__body > p:first-of-type { font-size: 18px; }
  .article__body h2 { margin: 36px 0 14px; }
  .article__related { padding: 48px 0; }
  .article__related h2 { font-size: 22px; }
  .article__related-grid { grid-template-columns: 1fr; gap: 14px; }
  .article__cta { padding: 28px 22px; }
}

/* ============================================================
   PRODUCT DETAIL PAGE (product.html)
============================================================ */
.page-product { padding-top: 90px; }
.prod-crumbs { padding: 22px 0 12px; }
.prod-crumbs .container { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.prod-crumbs a { color: var(--muted); transition: color .2s; }
.prod-crumbs a:hover { color: var(--ink); }
.prod-crumbs span[aria-hidden] { color: var(--line); }
.prod-crumbs [data-prod-crumb] { color: var(--ink); }

.prod-state { padding: 80px 0; text-align: center; color: var(--muted); }
.prod-state h1 { font-family: var(--display); font-size: 36px; color: var(--ink); margin-bottom: 12px; }
.prod-state .btn { margin-top: 18px; }

.prod { padding: 0 0 80px; }
.prod__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  padding-top: 12px;
  padding-bottom: 56px;
}

/* Gallery */
.prod__gallery { display: flex; flex-direction: column; gap: 14px; }
.prod__main-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}
/* Фото товара — заполняет всю плашку (как в каталоге). */
.prod__main-photo img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
  transition: transform .3s;
}
.prod__main-photo:hover img { transform: scale(1.02); }
.prod__photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  border: 0; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: background .2s, transform .15s;
}
.prod__photo-nav:hover { background: #fff; transform: translateY(-50%) scale(1.04); }
.prod__photo-nav--prev { left: 14px; }
.prod__photo-nav--next { right: 14px; }
.prod__photo-counter {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(11,34,57,0.78); color: #fff;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px;
  pointer-events: none;
}
.prod__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}
.prod__thumb {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--cream-2);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s;
}
.prod__thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod__thumb:hover { border-color: rgba(11,34,57,0.3); }
.prod__thumb.is-active { border-color: var(--ink); }

/* Sidebar (info + buy) */
.prod__sidebar { display: flex; flex-direction: column; gap: 14px; }
.prod__cat {
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea);
}
.prod__title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}

/* Sidebar rating summary */
.prod__rating {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.prod__rating-link {
  color: var(--sea); text-decoration: underline; cursor: pointer;
}
.prod__rating-link:hover { color: var(--ink); }

/* Stars */
.prod__stars { display: inline-flex; gap: 2px; color: rgba(11,34,57,0.2); font-size: 16px; line-height: 1; }
.prod__stars span.is-filled { color: #F4B83D; }
.prod__stars--lg { font-size: 24px; gap: 3px; }
.prod__stars--sm { font-size: 13px; }

/* Price */
.prod__price-row {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-top: 6px; border-top: 1px solid var(--line);
}
.prod__price {
  font-family: var(--display); font-weight: 600; font-size: 32px;
  color: var(--ink); letter-spacing: -0.01em;
}
.prod__price-old {
  font-family: var(--display); font-size: 18px;
  color: var(--muted); text-decoration: line-through;
}
.prod__discount {
  background: #d6453d; color: #fff;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  padding: 4px 10px; border-radius: 999px;
}

.prod__stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  width: fit-content;
}
.prod__stock.is-ok { background: rgba(11,142,82,0.12); color: #0B8E52; }
.prod__stock.is-low { background: rgba(214,69,61,0.12); color: #d6453d; }
.prod__stock.is-out { background: rgba(220,160,60,0.14); color: #8a5a14; }

/* Buy controls */
.prod__buy { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.prod__qty {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; background: var(--ink); border-radius: 999px;
  height: 52px;
}
.prod__qty button {
  width: 40px; height: 40px; border: 0; background: transparent;
  color: #fff; font-size: 22px; font-weight: 700; line-height: 1;
  border-radius: 999px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.prod__qty button:hover { background: rgba(255,255,255,0.14); }
.prod__qty button:active { transform: scale(.92); }
.prod__qty span {
  min-width: 26px; padding: 0 6px; text-align: center;
  color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 17px;
}
.prod__add { flex: 1; min-width: 200px; }
.prod__in-cart {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: rgba(11,142,82,0.08); color: #0B8E52;
  border-radius: 12px; font-size: 13.5px; font-weight: 600;
}
.prod__in-cart a { margin-left: auto; color: #0B8E52; }

.prod__video-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-family: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; width: fit-content;
  transition: background .2s, border-color .2s;
}
.prod__video-btn:hover { background: var(--cream-2); border-color: var(--ink); }

.prod__trust {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; background: var(--cream-2); border-radius: 14px;
  font-size: 13.5px; color: var(--ink); margin-top: 8px;
}
/* Если гарантии нет — плашка скрыта через [hidden], а display:flex это перебивал.
   Явно прячем, чтобы пустая подложка не висела. */
.prod__trust[hidden] { display: none; }
.prod__trust li { display: flex; align-items: center; gap: 10px; }
.prod__trust svg { color: var(--sea); flex-shrink: 0; }

/* Tabs */
.prod__tabs-wrap { padding-top: 12px; }
.prod__tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.prod__tabs::-webkit-scrollbar { display: none; }
.prod__tab {
  background: transparent; border: 0;
  padding: 14px 22px;
  font-family: inherit; font-weight: 600; font-size: 15px; color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.prod__tab:hover { color: var(--ink); }
.prod__tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.prod__tab-count {
  background: var(--cream-2); color: var(--ink);
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700;
}

.prod__panel { padding: 8px 0 48px; }
.prod__panel-heading {
  font-family: var(--display); font-weight: 500; font-size: 24px;
  letter-spacing: -0.01em; margin: 0 0 18px;
}
.prod__desc {
  font-size: 15px; line-height: 1.65; color: var(--ink);
  max-width: 760px; margin: 0 0 28px;
}
.prod__features { max-width: 760px; }
.prod__features h3 { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 0 0 12px; }
.prod__includes { columns: 2; column-gap: 24px; padding: 0; margin: 0; list-style: none; }
.prod__includes li {
  position: relative; padding-left: 20px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
  break-inside: avoid;
  margin-bottom: 8px;
}
.prod__includes li:last-child { margin-bottom: 0; }
.prod__includes li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--sea); font-weight: 800;
}
.prod__includes-note {
  margin-top: 16px; font-size: 13px; color: var(--muted); font-style: italic;
}

/* Specs table */
.prod__specs-table { width: 100%; max-width: 720px; border-collapse: collapse; }
.prod__specs-table tr { border-bottom: 1px solid var(--line); }
.prod__specs-table th, .prod__specs-table td {
  padding: 14px 0; text-align: left; vertical-align: top; font-weight: 400;
  font-size: 14.5px;
}
.prod__specs-table th { color: var(--muted); width: 48%; font-weight: 500; }
.prod__specs-table td { color: var(--ink); font-weight: 600; }

/* Reviews */
.prod__reviews-summary {
  background: var(--cream-2); border-radius: 16px;
  padding: 20px 24px; margin-bottom: 24px;
  max-width: 760px;
}
.prod__reviews-score {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.prod__reviews-score strong {
  font-family: var(--display); font-weight: 700; font-size: 36px;
  color: var(--ink); line-height: 1;
}
.prod__reviews-score span {
  font-size: 13px; color: var(--muted); font-weight: 600;
}

.prod__reviews-list { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin: 0 0 36px; }
.prod__review {
  padding: 20px 22px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
}
.prod__review-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.prod__review-head strong { font-weight: 700; font-size: 14px; color: var(--ink); display: block; }
.prod__review-date {
  display: block; font-size: 12px; color: var(--muted); margin-top: 2px;
}
.prod__review-text {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink);
}
.prod__reviews-empty {
  max-width: 760px;
  padding: 28px 24px; background: var(--cream-2); border-radius: 14px;
  margin-bottom: 32px;
}
.prod__reviews-empty p { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.prod__reviews-empty p:last-child { margin: 0; color: var(--muted); }

/* Review form */
.prod__review-form {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 580px;
  padding: 28px 28px; background: #fff;
  border: 1px solid var(--line); border-radius: 16px;
}
.prod__review-form h3 {
  font-family: var(--display); font-weight: 500; font-size: 20px; margin: 0;
}
.prod__review-field {
  display: flex; flex-direction: column; gap: 6px;
}
.prod__review-field span {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.prod__review-field input,
.prod__review-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--cream);
  resize: vertical;
}
.prod__review-field input:focus,
.prod__review-field textarea:focus {
  outline: 2px solid var(--sea); outline-offset: 1px;
}
.prod__review-rating {
  border: 0; padding: 0; margin: 0;
  display: flex; align-items: center; gap: 14px;
}
.prod__review-rating legend {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0; float: left; margin-right: 12px;
}
.prod__review-stars { display: inline-flex; gap: 4px; }
.prod__review-stars button {
  background: transparent; border: 0; padding: 0;
  color: rgba(11,34,57,0.2); font-size: 28px; line-height: 1;
  cursor: pointer; transition: color .15s, transform .12s;
}
.prod__review-stars button:hover { transform: scale(1.12); }
.prod__review-stars button.is-filled { color: #F4B83D; }
.prod__review-submit { width: fit-content; padding: 14px 28px; }
.prod__review-note {
  font-size: 11.5px; color: var(--muted); margin: 0;
}
.prod__review-legal {
  margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.45;
}
.prod__review-legal a { color: var(--ink); text-decoration: underline; }
.prod-help-modal__legal {
  margin: 4px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.45;
}
.prod-help-modal__legal a { color: var(--ink); text-decoration: underline; }

/* Modal link → product page */
.product-modal__details-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 10px 0;
  font-family: var(--body); font-weight: 600; font-size: 13.5px;
  color: var(--sea); text-decoration: none;
  border-top: 1px solid var(--line);
  transition: color .2s, gap .2s;
}
.product-modal__details-link:hover { color: var(--ink); gap: 10px; }

/* Mobile adaptations */
@media (max-width: 900px) {
  .prod__top { grid-template-columns: 1fr; gap: 28px; }
  .prod__price { font-size: 28px; }
  .prod__includes { columns: 1; }
}
@media (max-width: 560px) {
  .page-product { padding-top: 80px; }
  .prod__top { padding-top: 4px; padding-bottom: 36px; gap: 22px; }
  .prod__title { font-size: 22px; }
  .prod__price { font-size: 24px; }
  .prod__photo-nav { width: 36px; height: 36px; }
  .prod__photo-nav--prev { left: 8px; }
  .prod__photo-nav--next { right: 8px; }
  .prod__thumbs { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
  .prod__qty { height: 46px; }
  .prod__qty button { width: 36px; height: 36px; font-size: 20px; }
  .prod__add { min-width: 0; width: 100%; }
  .prod__tab { padding: 12px 14px; font-size: 13.5px; }
  .prod__panel-heading { font-size: 19px; }
  .prod__desc { font-size: 14px; }
  .prod__specs-table th, .prod__specs-table td { padding: 11px 0; font-size: 13px; }
  .prod__review-form { padding: 20px 18px; }
  .prod__review-stars button { font-size: 26px; }
}

/* ============================================================
   PRODUCT PAGE — добавления: back btn, compact specs, highlights, overview, help modal, article promo
============================================================ */
.prod-crumbs__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.prod__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-family: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.prod__back:hover { background: #fff; border-color: var(--ink); transform: translateX(-2px); }
.prod__back svg { color: var(--ink); }
.prod-crumbs__trail { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.prod-crumbs__trail a { color: var(--muted); }
.prod-crumbs__trail a:hover { color: var(--ink); }
.prod-crumbs__trail span[aria-hidden] { color: var(--line); }
.prod-crumbs__trail [data-prod-crumb] { color: var(--ink); }

/* "Помочь с выбором" sidebar button */
.prod__help-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(111,169,196,0.18), rgba(232,214,194,0.18));
  border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); font-family: inherit; cursor: pointer;
  text-align: left;
  margin-top: 6px;
  transition: background .2s, border-color .2s, transform .15s;
}
.prod__help-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.prod__help-btn > svg:first-child { color: var(--sea); flex-shrink: 0; }
.prod__help-btn > svg:last-child { color: var(--muted); flex-shrink: 0; margin-left: auto; }
.prod__help-text { display: flex; flex-direction: column; gap: 2px; }
.prod__help-text strong { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.prod__help-text small { font-size: 12px; color: var(--muted); }

/* Section headings */
.prod__section-heading {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.01em;
  margin: 0 0 22px;
}

/* FEATURES — clean editable list (CMS-friendly) */
.prod__highlights { padding: 40px 0 24px; }
.prod__features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prod__features-list li {
  position: relative;
  padding: 12px 14px 12px 38px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s, transform .15s;
}
.prod__features-list li:hover { border-color: rgba(11, 34, 57, 0.3); }
.prod__features-list li::before {
  content: "";
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background: var(--sea);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M4 12.5l5 5L20 6.5' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M4 12.5l5 5L20 6.5' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* OVERVIEW */
.prod__overview { padding: 28px 0 48px; }
.prod__overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.prod__overview-video {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink);
  border-radius: 16px;
  overflow: hidden;
  border: 0; padding: 0;
  cursor: pointer;
  transition: transform .2s;
}
.prod__overview-video:hover { transform: translateY(-2px); }
.prod__overview-video img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.85; transition: opacity .2s;
}
.prod__overview-video:hover img { opacity: 1; }
.prod__overview-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.prod__overview-video-label {
  position: absolute; bottom: 14px; left: 14px;
  background: rgba(255,255,255,0.92); color: var(--ink);
  font-family: inherit; font-weight: 600; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px;
}
.prod__overview-video[hidden] { display: none; }
.prod__overview-text {
  display: flex; flex-direction: column; gap: 14px;
}
.prod__overview-text p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
/* if video hidden — text spans full width */
.prod__overview:has([data-prod-overview-video][hidden]) .prod__overview-grid {
  grid-template-columns: 1fr;
  max-width: 760px;
}

/* COMPACT SPECS GRID (replaces wide one-column table) */
.prod__specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  max-width: 920px;
}
.prod__spec-cell {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.prod__spec-cell:nth-child(2n) { border-right: 0; }
.prod__spec-cell:nth-last-child(-n+2) { border-bottom: 0; }
.prod__spec-cell dt {
  font-size: 13px; color: var(--muted); font-weight: 500;
  flex: 1; min-width: 0;
}
.prod__spec-cell dd {
  margin: 0;
  font-size: 13.5px; color: var(--ink); font-weight: 700;
  text-align: right; flex-shrink: 0;
}

/* ARTICLE PROMO — "Как выбрать SUP" — full-bleed editorial photo with text overlay */
.prod__article-promo { padding: 24px 0 60px; }
.prod__article-card {
  position: relative;
  display: block;
  min-height: 300px;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 8px 26px -16px rgba(11, 34, 57, 0.4);
}
.prod__article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px -18px rgba(11, 34, 57, 0.55);
}
.prod__article-card__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%; /* поднимаем кадр — сапбордистки по центру баннера */
  z-index: -2;
  transition: transform .7s ease-out;
}
.prod__article-card:hover .prod__article-card__bg { transform: scale(1.04); }
.prod__article-card__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(11, 34, 57, 0.82) 0%,
    rgba(11, 34, 57, 0.6) 35%,
    rgba(11, 34, 57, 0.2) 62%,
    rgba(11, 34, 57, 0) 100%
  );
}
.prod__article-card__body {
  position: relative;
  max-width: 540px;
  padding: 46px 44px;
}
.prod__article-card__eyebrow {
  display: inline-block;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: #B6D5E0;
  margin-bottom: 14px;
}
.prod__article-card__body h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.015em; margin: 0 0 14px; line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(11, 34, 57, 0.5);
}
.prod__article-card__body p {
  margin: 0 0 22px;
  font-size: 15px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 440px;
}
.prod__article-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-family: inherit; font-weight: 700; font-size: 13.5px;
  border-radius: 999px;
  transition: background .2s, gap .2s;
}
.prod__article-card:hover .prod__article-card__cta { gap: 14px; background: #fff; }

/* HELP MODAL */
.prod-help-modal {
  position: fixed; inset: 0; z-index: 1400;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.prod-help-modal[aria-hidden="false"] { display: flex; }
.prod-help-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(11, 34, 57, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.prod-help-modal__panel {
  position: relative;
  width: min(480px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--cream);
  border-radius: 20px;
  padding: 32px 28px 26px;
  animation: phPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes phPop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.prod-help-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: var(--cream-2); border: 0; border-radius: 999px;
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.prod-help-modal__close:hover { background: var(--line); }
.prod-help-modal h2 {
  font-family: var(--display); font-weight: 500; font-size: 24px;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.prod-help-modal > .prod-help-modal__panel > p {
  margin: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.5;
}
.prod-help-modal form { display: flex; flex-direction: column; gap: 12px; }
.prod-help-modal form label { display: flex; flex-direction: column; gap: 5px; }
.prod-help-modal form label span {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.prod-help-modal form input,
.prod-help-modal form textarea {
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: #fff;
}
.prod-help-modal form input:focus,
.prod-help-modal form textarea:focus { outline: 2px solid var(--sea); outline-offset: 1px; }
.prod-help-modal form button[type="submit"] { margin-top: 6px; }
.prod-help-modal__note {
  font-size: 11.5px; color: var(--muted); margin: 4px 0 0; text-align: center;
}
.prod-help-modal__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px;
  color: var(--muted); font-size: 12px;
}
.prod-help-modal__divider::before,
.prod-help-modal__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.prod-help-modal__msgs {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.prod-help-modal__msgs a {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, transform .15s;
}
.prod-help-modal__msgs a:hover { border-color: var(--ink); transform: translateY(-1px); }
.prod-help-modal__msgs a svg { color: var(--sea); }

/* Mobile adaptations for new sections */
@media (max-width: 820px) {
  .prod__overview-grid { grid-template-columns: 1fr; gap: 18px; }
  .prod__article-card { min-height: 240px; border-radius: 16px; }
  .prod__article-card__body { padding: 28px 24px; max-width: 100%; }
  .prod__article-card__body h3 { font-size: 22px; }
  .prod__article-card__body p { font-size: 13.5px; }
  .prod__article-card__overlay {
    background: linear-gradient(180deg, rgba(11, 34, 57, 0.85) 0%, rgba(11, 34, 57, 0.55) 60%, rgba(11, 34, 57, 0.3) 100%);
  }
  .prod__highlights { padding: 28px 0 14px; }
  .prod__features-list { gap: 8px; }
  .prod__features-list li { padding: 10px 12px 10px 34px; font-size: 13.5px; }
  .prod__features-list li::before { left: 12px; width: 14px; height: 14px; }
  .prod__specs-grid { grid-template-columns: 1fr; }
  .prod__spec-cell { border-right: 0 !important; }
  .prod__spec-cell:nth-last-child(-n+1) { border-bottom: 0; }
  .prod__spec-cell:not(:last-child) { border-bottom: 1px solid var(--line); }
  .prod-help-modal__panel { padding: 26px 20px 22px; }
  .prod-help-modal h2 { font-size: 20px; }
  .prod-help-modal__msgs { grid-template-columns: 1fr; }
  .prod-help-modal__msgs a { flex-direction: row; justify-content: center; gap: 8px; padding: 10px 14px; }
  .prod__back { padding: 7px 12px; font-size: 12px; }
}

/* === Клиентские правки: кликабельный адрес (П14) + реквизиты/Политика в футере (П17, П18) === */
.address-map-link { color: inherit; text-decoration: none; cursor: pointer; }
.address-map-link:hover { text-decoration: underline; }
.header__address .address-map-link { display: contents; } /* не ломаем flex-раскладку шапки */
/* Реквизиты + Политика — в один ряд между копирайтом и OLYMPOS.
   Порядок слева направо задаётся самим DOM (см. script.js), а space-between
   на .footer__bottom распределяет три блока: © слева, реквизиты по центру, OLYMPOS справа. */
.footer__legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: rgba(247, 241, 227, 0.55);
}
.footer__legal a { color: inherit; }

/* Нет в наличии → кнопка добавления серая и неактивная (модалка + страница товара) */
.product-modal__add:disabled,
.product-modal__add.is-out-of-stock,
.prod__add:disabled,
.prod__add.is-out-of-stock,
.product-modal__add.is-out-of-stock:hover,
.prod__add.is-out-of-stock:hover {
  background: #c2cad2 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  /* На узких экранах — столбиком по центру, чтобы не ломалось */
  .footer__bottom { justify-content: center; text-align: center; }
  .footer__bottom > p { width: 100%; }
  .footer__legal { margin: 4px 0; }
}