/* ============================================================
   ТРИТОН — Main Stylesheet
   design-tokens → components → pages → responsive
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --color-bg:           #FAFAF8;
  --color-surface:      #F4F1EE;
  --color-text:         #111111;
  --color-text-mute:    #616161;
  --color-border:       #E0DDD9;
  --color-accent:       #C85E28;
  --color-accent-hover: #A84D20;
  --color-white:        #FFFFFF;
  --color-error:        #D94F3D;
  --color-success:      #3D8C5F;

  --font:        'Manrope', sans-serif;
  --fs-h1:       clamp(36px, 5.5vw, 64px);
  --fs-h2:       clamp(26px, 3.5vw, 42px);
  --fs-h3:       clamp(20px, 2.5vw, 28px);
  --fs-h4:       clamp(16px, 1.6vw, 20px);
  --fs-body:     16px;
  --fs-sm:       13px;
  --fw-reg:      400;
  --fw-med:      500;
  --fw-semi:     600;
  --fw-bold:     700;
  --lh-head:     1.08;
  --lh-body:     1.65;
  --ls-caps:     0.08em;

  --sp:          clamp(60px, 8vw, 100px);
  --container:   1200px;
  --pad:         24px;
  --r-sm:        4px;
  --r-md:        8px;
  --r-lg:        16px;

  --ease:        cubic-bezier(.25,.1,.25,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --t-fast:      .25s;
  --t-base:      .4s;
  --t-slow:      .7s;

  --hdr-h:       72px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-reg);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ── Typography ──────────────────────────────────────────── */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-head); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-head); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: 1.2; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: 1.3; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 768px) { .container { padding: 0 40px; } }

.section { padding: var(--sp) 0; }

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 18px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.section-header { margin-bottom: 56px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--color-text);
  color: var(--color-white);
  border: 1px solid var(--color-text);
}
.btn--primary:hover { background: #2a2a2a; border-color: #2a2a2a; }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn--outline:hover { border-color: var(--color-text); }

.btn--outline-white {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,.4);
}
.btn--outline-white:hover { border-color: var(--color-white); background: rgba(255,255,255,.08); }

.btn--lg { padding: 18px 48px; }
.btn--full { width: 100%; }

/* ── Header ──────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--hdr-h);
  transition:
    background var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}
.header--dark { color: var(--color-white); }
.header--light { color: var(--color-text); }
.header--sticky {
  background: rgba(250,250,248,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-border);
  color: var(--color-text) !important;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Лого: текстовый fallback (если custom-logo не задано) */
.header__logo--text {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity var(--t-fast);
}
.header__logo--text:hover { opacity: .65; }

/* Лого: custom-logo (the_custom_logo) — свои стили вместо дефолтных WP */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity var(--t-fast);
}
.custom-logo-link:hover { opacity: .65; }
.custom-logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 160px;
  transition: filter var(--t-base) var(--ease);
}
@media (min-width: 768px)  { .custom-logo { height: 42px; max-width: 200px; } }
@media (min-width: 1024px) { .custom-logo { height: 48px; max-width: 240px; } }
/* Чёрное лого на тёмном хедере → делаем белым */
.header--dark .custom-logo { filter: brightness(0) invert(1); }
/* На светлом sticky (в т.ч. при скролле главной) — возвращаем чёрный */
.header--sticky .custom-logo { filter: none; }

.header__nav { display: none; gap: 40px; }
@media (min-width: 768px) { .header__nav { display: flex; } }

.header__nav-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: .75;
  transition: opacity var(--t-fast);
}
.header__nav-link:hover,
.header__nav-link.is-active { opacity: 1; }

.header__actions { display: flex; align-items: center; gap: 20px; }

.header__cart {
  display: flex;
  align-items: center;
  transition: opacity var(--t-fast);
}
.header__cart:hover { opacity: .65; }

.header__burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  /* <button> по умолчанию НЕ наследует color → currentColor палочек
     становился чёрным. Наследуем цвет хедера (белый на тёмном, чёрный на светлом). */
  color: inherit;
}
@media (min-width: 768px) { .header__burger { display: none; } }

.header__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: var(--t-fast);
}

/* ── Mobile menu overlay ─────────────────────────────────── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
}
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.menu-overlay__close {
  position: absolute;
  top: 24px; right: 24px;
  color: var(--color-white);
  padding: 8px;
  transition: opacity var(--t-fast);
}
.menu-overlay__close:hover { opacity: .5; }

.menu-overlay__nav { display: flex; flex-direction: column; gap: 4px; }

.menu-overlay__link {
  font-size: clamp(32px, 9vw, 52px);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-white);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: opacity var(--t-fast);
}
.menu-overlay__link:hover { opacity: .5; }

.menu-overlay__footer {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-overlay__footer a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  transition: color var(--t-fast);
}
.menu-overlay__footer a:hover { color: rgba(255,255,255,.8); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
  overflow: hidden;
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 65%, rgba(200,80,20,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 65% 35%, rgba(180,60,10,.12) 0%, transparent 45%),
    linear-gradient(170deg,
      #0d0704 0%,
      #1a0c05 30%,
      #231408 55%,
      #1a0c05 80%,
      #0d0704 100%
    );
}
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Сплошной скрим: тёмный сверху (читаемость хедера) и снизу (заголовок),
     с лёгким затемнением в середине — чтобы белый текст не терялся
     на светлом фото. */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.28) 28%,
      rgba(0,0,0,.38) 60%,
      rgba(0,0,0,.72) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,.35);
}

.hero__title {
  font-size: clamp(44px, 6.5vw, 80px);
  font-weight: var(--fw-bold);
  line-height: 1.0;
  letter-spacing: -.025em;
  margin-bottom: 24px;
}

.hero__subtitle {
  font-size: var(--fs-h4);
  font-weight: var(--fw-reg);
  color: rgba(255,255,255,.7);
  line-height: 1.5;
  margin-bottom: 40px;
  max-width: 460px;
}


/* ── Catalog grid (catalog.html) ─────────────────────────── */
.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px)  { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (min-width: 1280px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Catalog section — home page rows ───────────────────── */
.catalog-section {
  background: var(--color-bg);
  padding: var(--sp) 0;
}
.catalog-section__header { margin-bottom: 48px; }
.catalog-section__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin-top: 8px;
}
.catalog-section__list { display: flex; flex-direction: column; gap: 48px; }
.catalog-section__divider { display: none; }

.catalog-row {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 480px;
}
.catalog-row__media {
  position: relative;
  overflow: hidden;
  display: block;
  transition: opacity var(--t-base) var(--ease-out);
}
.catalog-row__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background var(--t-base) var(--ease-out);
}
.catalog-row__media:hover::after { background: rgba(0,0,0,.06); }

.catalog-row__media--xl      { background: linear-gradient(145deg,#1a0e07,#2d1a0e 45%,#3d2414 75%,#1a0e07); }
.catalog-row__media--m       { background: linear-gradient(145deg,#160c06,#261508 45%,#32190c 75%,#160c06); }
.catalog-row__media--dzhentl { background: linear-gradient(145deg,#0e0d0b,#1c1b18 45%,#262420 75%,#0e0d0b); }

.catalog-row__pagination {
  position: absolute;
  bottom: 20px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.catalog-row__count {
  font-size: 13px;
  font-weight: var(--fw-semi);
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
}
.catalog-row__dots { display: flex; gap: 6px; }
.catalog-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}
.catalog-row__dot--active { background: rgba(255,255,255,.9); }

.catalog-row__body {
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
}
.catalog-row__num {
  font-size: 11px;
  color: var(--color-text-mute);
  letter-spacing: .06em;
}
.catalog-row__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
.catalog-row__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-top: -4px;
}
.catalog-row__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  line-height: var(--lh-body);
  max-width: 38ch;
}
.catalog-row__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast), border-color var(--t-fast);
  z-index: 2;
}
.catalog-row__arrow:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.4);
}
.catalog-row__arrow--prev { left: 20px; }
.catalog-row__arrow--next { right: 20px; }

.catalog-row__price-label {
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-top: 8px;
}
.catalog-row__price {
  font-size: 22px;
  font-weight: var(--fw-semi);
  color: var(--color-accent);
}
.catalog-row__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 3px;
  width: fit-content;
  margin-top: 12px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.catalog-row__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

@media (max-width: 1023px) {
  .catalog-row { grid-template-columns: 1fr 1fr; min-height: 360px; }
  .catalog-row__body { padding: 32px; }
}
@media (max-width: 767px) {
  .catalog-row { grid-template-columns: 1fr; min-height: unset; }
  .catalog-row__media { aspect-ratio: 16 / 9; }
  .catalog-row__body {
    padding: 24px var(--pad);
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

.product-card {
  display: block;
  color: var(--color-text);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--color-surface);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0,0,0,.1);
}

.product-card__image {
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
}
.product-card__image-bg {
  position: absolute;
  inset: 0;
  transition: transform var(--t-slow) var(--ease-out);
}
.product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease-out);
}
.product-card:hover .product-card__image-bg,
.product-card:hover .product-card__image img { transform: scale(1.05); }

.product-card--xl .product-card__image-bg {
  background: linear-gradient(145deg, #1a0e07 0%, #2d1a0e 45%, #3d2414 75%, #1a0e07 100%);
}
.product-card--m .product-card__image-bg {
  background: linear-gradient(145deg, #160c06 0%, #261508 45%, #32190c 75%, #160c06 100%);
}
.product-card--dzhentl .product-card__image-bg {
  background: linear-gradient(145deg, #0e0d0b 0%, #1c1b18 45%, #262420 75%, #0e0d0b 100%);
}

.product-card__num {
  position: absolute;
  top: 18px; left: 22px;
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

.product-card__body { padding: 24px; }

.product-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  margin-bottom: 4px;
}
.product-card__material {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 18px;
}
.product-card__price {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  margin-bottom: 18px;
}
.product-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  transition: gap var(--t-fast), border-color var(--t-fast);
}
.product-card:hover .product-card__cta {
  gap: 10px;
  border-color: var(--color-text);
}
.product-card__cta svg { flex-shrink: 0; }

/* ── About section ───────────────────────────────────────── */
.about { background: var(--color-surface); }

.about__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 768px) {
  .about__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.about__text p {
  color: var(--color-text-mute);
  margin-bottom: 16px;
  line-height: var(--lh-body);
}
.about__text p:last-child { margin-bottom: 0; }

.about__image {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(145deg, #1a1410, #2d2418, #1a1410);
}
.about__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about__founding {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 24px;
}

/* ── Advantages ──────────────────────────────────────────── */

.advantage {
  padding: 32px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
}
.advantage__icon {
  width: 36px;
  height: 36px;
  color: var(--color-accent);
  margin-bottom: 20px;
}
.advantage__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  margin-bottom: 6px;
}
.advantage__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  line-height: 1.55;
}

/* ── Contact mini ────────────────────────────────────────── */
.contact-mini { background: var(--color-surface); }
.contact-mini__grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .contact-mini__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.contact-mini__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 8px;
}
.contact-mini__value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
}
.contact-mini__value a { transition: color var(--t-fast); }
.contact-mini__value a:hover { color: var(--color-accent); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--color-text);
  color: var(--color-white);
  padding: 64px 0 40px;
}
.footer__grid {
  display: grid;
  gap: 48px;
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
}

.footer__logo {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
/* Лого в футере (custom-logo) — ограничиваем размер, сохраняем пропорцию,
   инвертируем чёрный логотип в белый на тёмном футере. */
.footer__logo-link {
  display: inline-block;
  line-height: 0;
  margin-bottom: 18px;
}
.footer__logo-link:hover { opacity: .7; }
.footer__logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  filter: brightness(0) invert(1);
}
.footer__desc {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.4);
  line-height: 1.6;
  max-width: 260px;
}
.footer__col-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 20px;
}
.footer__nav { display: flex; flex-direction: column; gap: 10px; }
.footer__nav a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  transition: color var(--t-fast);
}
.footer__nav a:hover { color: var(--color-white); }
.footer__contact {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.6);
  line-height: 1.8;
}
.footer__contact a { transition: color var(--t-fast); }
.footer__contact a:hover { color: var(--color-white); }

.footer__bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}
.footer__copy { font-size: var(--fs-sm); color: rgba(255,255,255,.25); }

.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer__legal a { font-size: var(--fs-sm); color: rgba(255,255,255,.25); text-decoration: none; white-space: nowrap; transition: color .25s; }
.footer__legal a:hover { color: rgba(255,255,255,.5); }

/* ── Page hero (inner pages) ─────────────────────────────── */
.page-hero {
  padding-top: calc(var(--hdr-h) + 60px);
  padding-bottom: 60px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 20px;
}
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb__sep { opacity: .35; font-size: 10px; }

/* ── Catalog filter (URL-driven) ─────────────────────────── */
.catalog-filter-active {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 10px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.catalog-filter-active__label { color: var(--color-text-mute); }
.catalog-filter-active__label strong { color: var(--color-text); font-weight: var(--fw-semi); }
.catalog-filter-active__reset {
  color: var(--color-accent);
  font-weight: var(--fw-semi);
  transition: color var(--t-fast);
}
.catalog-filter-active__reset:hover { color: var(--color-accent-hover); }

.catalog-empty {
  padding: 60px 24px;
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  margin-bottom: 32px;
}
.catalog-empty p { margin-bottom: 20px; color: var(--color-text-mute); }

/* ── Catalog page ────────────────────────────────────────── */
.catalog-materials { background: var(--color-surface); }
.catalog-materials__grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .catalog-materials__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.material-card {
  padding: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
}
.material-card__models {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.material-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  margin-bottom: 12px;
}
.material-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  line-height: 1.65;
}

/* ── Product page ────────────────────────────────────────── */
.product-page { padding-top: var(--hdr-h); }

.product-main {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .product-main { grid-template-columns: 55fr 45fr; align-items: start; }
}

.product-slider-wrap {
  position: relative;
  min-width: 0;       /* prevent CSS Grid column collapse from flex children */
  min-height: 360px;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .product-slider-wrap { height: 65vw; max-height: 600px; min-height: 300px; }
}
@media (min-width: 1024px) {
  .product-slider-wrap {
    position: sticky;
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h));
  }
}

.product-slider { height: 100%; }
.product-slider .swiper,
.stoleshniza-slider .swiper { height: 100%; }

.product-slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.product-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Swiper fallback CSS — works even when CDN is slow / unavailable */
.swiper-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 100%;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
}

/* Ensure swiper-wrapper + slides fill container before JS init */
.product-slider .swiper-wrapper,
.stoleshniza-slider .swiper-wrapper { height: 100%; }

.product-slider .swiper-slide,
.stoleshniza-slider .swiper-slide { height: 100%; }
.product-slide__bg {
  position: absolute;
  inset: 0;
}
/* Apply gradients directly on the slide (not on child) for CDN-free rendering */
.product-slide:nth-child(1) { background: linear-gradient(145deg,#1a0e07,#2d1a0e,#3d2414); }
.product-slide:nth-child(2) { background: linear-gradient(155deg,#1f1208,#321c0e,#421f10); }
.product-slide:nth-child(3) { background: linear-gradient(135deg,#150b05,#261508,#3a1c0d); }
.product-slide:nth-child(4) { background: linear-gradient(150deg,#201410,#2e1a12,#3d2418); }
.product-slide:nth-child(5) { background: linear-gradient(145deg,#1a0e07,#2a1a0a,#382210); }
.product-slide:nth-child(6) { background: linear-gradient(160deg,#160c05,#221408,#30190c); }
.product-slide:nth-child(7) { background: linear-gradient(140deg,#1e1208,#2c1a0c,#3e2412); }
.product-slide:nth-child(8) { background: linear-gradient(145deg,#181008,#281808,#381e0e); }

/* Keep child bg for extra overlay effects */
.product-slide__bg { position: absolute; inset: 0; }

/* ДЖЕНТЛТЕЙБЛ slides — darker steel tones */
.slide--dzhentl:nth-child(1) { background: linear-gradient(145deg,#0e0d0b,#1c1b18,#262420); }
.slide--dzhentl:nth-child(2) { background: linear-gradient(155deg,#0f0e0c,#1e1d1a,#282724); }
.slide--dzhentl:nth-child(3) { background: linear-gradient(135deg,#111010,#201f1c,#2a2926); }
.slide--dzhentl:nth-child(4) { background: linear-gradient(150deg,#0d0c0a,#1a1916,#242320); }
.slide--dzhentl:nth-child(5) { background: linear-gradient(145deg,#121110,#1f1e1c,#272624); }
.slide--dzhentl:nth-child(6) { background: linear-gradient(160deg,#0c0b09,#191815,#222018); }
.slide--dzhentl:nth-child(7) { background: linear-gradient(140deg,#100f0e,#1d1c1a,#262422); }
.slide--dzhentl:nth-child(8) { background: linear-gradient(145deg,#0e0e0c,#1b1b18,#252422); }

.product-slide__counter {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 12px;
  font-weight: var(--fw-med);
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  z-index: 2;
}

/* Swiper overrides */
.swiper-pagination-bullet {
  width: 6px; height: 6px;
  background: rgba(255,255,255,.35);
  opacity: 1;
  transition: width var(--t-fast), background var(--t-fast);
}
.swiper-pagination-bullet-active {
  background: var(--color-white);
  width: 22px;
  border-radius: 3px;
}
.swiper-pagination { bottom: 20px !important; }

.swiper-button-prev,
.swiper-button-next {
  color: var(--color-white);
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: background var(--t-fast);
}
.swiper-button-prev:hover,
.swiper-button-next:hover { background: rgba(0,0,0,.55); }
.swiper-button-prev::after,
.swiper-button-next::after { font-size: 13px; font-weight: 700; }

/* Product info panel */
.product-info {
  padding: 48px 44px;
  border-left: 1px solid var(--color-border);
}

.product-info .breadcrumb,
.stoleshniza-info .breadcrumb {
  margin-bottom: 28px;
}
@media (max-width: 1023px) {
  .product-info { padding: 36px var(--pad); border-left: none; border-top: 1px solid var(--color-border); }
}

.product-info__label { margin-bottom: 12px; }
.product-info__name {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.product-info__material {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 28px;
}
.product-info__stoleshniza {
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin-bottom: 8px;
}
.product-info__stoleshniza strong { color: var(--color-text-mute); font-weight: var(--fw-medium); margin-right: 4px; }
.product-info__divider {
  height: 1px;
  background: var(--color-border);
  margin: 28px 0;
}

/* Configurator */
.configurator__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 14px;
}
.configurator__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.configurator__radio { display: none; }
.configurator__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    border-color var(--t-fast),
    background var(--t-fast);
  user-select: none;
}
.configurator__option:hover { border-color: var(--color-text-mute); }
.configurator__radio:checked + .configurator__option,
.configurator__option--active {
  border-color: var(--color-accent);
  background: rgba(200,94,40,.04);
}
.configurator__option--active { cursor: default; }

.configurator__opt-left { display: flex; align-items: center; gap: 12px; }
.configurator__swatch {
  width: 22px; height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}
.swatch--none     { background: linear-gradient(135deg, #e5e0da, #d2cbc4); }
.swatch--beton    { background: linear-gradient(135deg, #8a8580, #6a6562); }
.swatch--dzhungla { background: linear-gradient(135deg, #4a6040, #38503a); }
.swatch--dub      { background: linear-gradient(135deg, #8a6040, #6a4838); }
.swatch--med      { background: linear-gradient(135deg, #b08040, #8a6030); }

.configurator__opt-name { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.configurator__opt-price { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--color-text-mute); }

/* Price display */
.price-display {
  padding: 22px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 22px;
}
.price-display__label {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 4px;
}
.price-display__value {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text);
}

.product-info__note {
  font-size: 12px;
  color: var(--color-text-mute);
  text-align: center;
  margin-top: 14px;
}

/* Product specs */
.product-specs { padding: var(--sp) 0; border-top: 1px solid var(--color-border); }

.specs-table {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (min-width: 768px) {
  .specs-table { grid-template-columns: 1fr 1fr; }
}

.specs-row {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.specs-row:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .specs-row:nth-last-child(-n+2) { border-bottom: none; }
  .specs-row:nth-child(odd) { border-right: 1px solid var(--color-border); }
}
.specs-row__name { font-size: var(--fs-sm); color: var(--color-text-mute); font-weight: var(--fw-med); }
.specs-row__val  { font-size: var(--fs-body); font-weight: var(--fw-semi); }

/* Product description */
.product-description {
  padding: var(--sp) 0;
  border-top: 1px solid var(--color-border);
}
.product-description__grid {
  display: grid;
  gap: 48px;
  align-items: start;
}
@media (min-width: 768px) {
  .product-description__grid { grid-template-columns: 5fr 7fr; gap: 72px; }
}
.product-description__body {
  color: var(--color-text-mute);
  line-height: 1.75;
}

/* Countertops preview */
.countertops-section {
  padding: var(--sp) 0;
  border-top: 1px solid var(--color-border);
}
.countertops-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 768px) {
  .countertops-grid { grid-template-columns: repeat(4, 1fr); }
}

.ct-card {
  display: block;
  color: var(--color-text);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.ct-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.ct-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.ct-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-card--beton    .ct-card__image { background: linear-gradient(135deg, #6a6560, #8a8580, #4a4540); }
.ct-card--dzhungla .ct-card__image { background: linear-gradient(135deg, #2a4030, #3d5840, #1a3020); }
.ct-card--dub      .ct-card__image { background: linear-gradient(135deg, #5a3a20, #7a5030, #3a2414); }
.ct-card--med      .ct-card__image { background: linear-gradient(135deg, #7a5020, #9a6830, #5a3a14); }
.ct-card__body { padding: 12px 14px; }
.ct-card__name { font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: 2px; }
.ct-card__surcharge { font-size: 12px; color: var(--color-text-mute); }
.ct-card__current { font-size: 12px; color: var(--color-accent); font-weight: var(--fw-semi); }
.ct-card--current { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--r-md); }

/* Related */
.related-section {
  padding: var(--sp) 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.related-grid {}

/* ── Advantages slider — arrows below cards on mobile/tablet ── */
@media (max-width: 1279px) {
  .js-advantages-slider {
    padding-bottom: 64px;
  }
  .js-advantages-slider .swiper-button-prev,
  .js-advantages-slider .swiper-button-next {
    top: auto;
    bottom: 0;
    transform: none;
  }
  .js-advantages-slider .swiper-button-prev {
    left: calc(50% - 52px);
    right: auto;
  }
  .js-advantages-slider .swiper-button-next {
    right: auto;
    left: calc(50% + 8px);
  }
}

/* ── Slider overrides — desktop grid ────────────────────── */
@media (min-width: 1280px) {
  .js-advantages-slider { overflow: visible; }
  .js-advantages-slider .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    transform: none !important;
    height: auto !important;
  }
  .js-advantages-slider .swiper-slide { width: auto !important; height: auto !important; }
  .js-advantages-slider .swiper-button-prev,
  .js-advantages-slider .swiper-button-next { display: none; }
}

/* ── Related slider — hide nav when overflow locked ─────── */
.js-related-slider .swiper-button-prev,
.js-related-slider .swiper-button-next { transition: opacity .2s; }
.js-related-slider .swiper-button-disabled { opacity: 0; pointer-events: none; }

/* ── Stoleshniza page ────────────────────────────────────── */
.stoleshniza-page { padding-top: var(--hdr-h); }

.stoleshniza-hero {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .stoleshniza-hero { grid-template-columns: 60fr 40fr; align-items: start; }
}

.stoleshniza-slider-wrap {
  min-width: 0;       /* prevent CSS Grid column collapse from flex children */
  min-height: 360px;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .stoleshniza-slider-wrap { height: 65vw; max-height: 560px; min-height: 280px; }
}
@media (min-width: 1024px) {
  .stoleshniza-slider-wrap {
    position: sticky;
    top: var(--hdr-h);
    height: calc(100vh - var(--hdr-h));
  }
}

.stoleshniza-slider { height: 100%; }

/* Stoleshniza slide colors — per page (on slide element directly) */
.st-slide--beton    { background: linear-gradient(145deg,#4a4640,#6a6560,#3a3630); }
.st-slide--dzhungla { background: linear-gradient(145deg,#1a2e18,#2a4828,#102014); }
.st-slide--dub      { background: linear-gradient(145deg,#3a2414,#5a3a24,#2a1a0e); }
.st-slide--med      { background: linear-gradient(145deg,#4a3010,#6a4820,#3a2008); }

.stoleshniza-info {
  padding: 52px 44px;
  border-left: 1px solid var(--color-border);
}
@media (max-width: 1023px) {
  .stoleshniza-info { padding: 36px var(--pad); border-left: none; border-top: 1px solid var(--color-border); }
}

.stoleshniza-info__price-label {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 4px;
}
.stoleshniza-info__price {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  margin-bottom: 32px;
  line-height: 1;
}

.st-specs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.st-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.st-spec__name { font-size: var(--fs-sm); color: var(--color-text-mute); }
.st-spec__val  { font-size: var(--fs-sm); font-weight: var(--fw-semi); text-align: right; }

.stoleshniza-info__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  line-height: 1.75;
  margin-bottom: 28px;
}
.stoleshniza-info__compat {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 32px;
  line-height: 1.6;
}
.stoleshniza-info__compat strong {
  color: var(--color-text);
  font-weight: var(--fw-semi);
}

/* Stoleshniza sections below the hero */
.stoleshniza-body { padding: var(--sp) 0; }

/* ── Delivery page ───────────────────────────────────────── */
.delivery-page { padding-top: var(--hdr-h); }

.delivery-content { max-width: 800px; }

.delivery-zones {
  display: grid;
  gap: 16px;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .delivery-zones { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.zone-card {
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
}
.zone-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-accent);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  margin-bottom: 14px;
}
.zone-card__title { font-size: var(--fs-h4); font-weight: var(--fw-semi); margin-bottom: 6px; }
.zone-card__desc  { font-size: var(--fs-sm); color: var(--color-text-mute); }

.delivery-terms { padding: var(--sp) 0; border-top: 1px solid var(--color-border); }
.delivery-terms .section-header { margin-bottom: 40px; }

.term-item {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}
.term-item:first-child { border-top: 1px solid var(--color-border); }
.term-num {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-border);
  width: 32px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.term-title { font-size: var(--fs-body); font-weight: var(--fw-semi); margin-bottom: 4px; }
.term-desc  { font-size: var(--fs-sm); color: var(--color-text-mute); }

/* ── Contacts page ───────────────────────────────────────── */
.contacts-page { padding-top: var(--hdr-h); }

.contacts-layout {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contacts-layout { grid-template-columns: 60fr 40fr; min-height: calc(100vh - var(--hdr-h)); }
}

.contacts-map {
  min-height: 400px;
  background:
    linear-gradient(135deg, #161614, #202020, #161614);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.contacts-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.contacts-map__inner { position: relative; text-align: center; }
.contacts-map__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
}
.contacts-map__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: rgba(255,255,255,.65);
  margin-bottom: 16px;
}
.contacts-map__pin {
  width: 12px; height: 12px;
  background: var(--color-accent);
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 0 4px rgba(200,94,40,.28);
  animation: pinPulse 2.4s ease-in-out infinite;
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200,94,40,.28); }
  50%       { box-shadow: 0 0 0 14px rgba(200,94,40,.08); }
}

.contacts-panel {
  padding: 60px 48px;
  background: var(--color-bg);
}
@media (max-width: 1023px) {
  .contacts-panel { padding: 48px var(--pad); }
}

.contacts-panel__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin-bottom: 40px;
}
.contacts-list { display: flex; flex-direction: column; gap: 28px; margin-bottom: 48px; }
.contacts-item__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 5px;
}
.contacts-item__value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
}
.contacts-item__value a { transition: color var(--t-fast); }
.contacts-item__value a:hover { color: var(--color-accent); }
.contacts-item__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-top: 2px;
}

/* Form */
.contact-form { padding-top: 40px; border-top: 1px solid var(--color-border); }
.contact-form__title { font-size: var(--fs-h4); font-weight: var(--fw-semi); margin-bottom: 22px; }
.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--color-text-mute);
  margin-bottom: 5px;
}
.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  color: var(--color-text);
  transition: border-color var(--t-fast);
  outline: none;
}
.form-input:focus,
.form-textarea:focus { border-color: var(--color-text); }
.form-textarea { resize: vertical; min-height: 96px; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero__scroll-line { animation: none; }
  .contacts-map__pin { animation: none; }
}

/* ── Cart badge ──────────────────────────────────────────── */
.header__cart { position: relative; }
.header__cart-count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  transition: transform var(--t-fast) var(--ease-out);
}

/* ── Cart page ───────────────────────────────────────────── */
.page-cart {
  padding-top: calc(var(--hdr-h) + 48px);
  padding-bottom: var(--sp);
  min-height: 70vh;
}
.page-cart .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.cart-heading { margin-bottom: 40px; }
.cart-heading h1 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-head); }

.cart-empty {
  text-align: center;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cart-empty__icon { opacity: .3; }
.cart-empty__text { font-size: var(--fs-body); color: var(--color-text-mute); max-width: 320px; }

.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
}

.cart-items { display: flex; flex-direction: column; }

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.cart-item:first-child { border-top: 1px solid var(--color-border); }

.cart-item__photo {
  width: 80px; height: 80px;
  background: var(--color-surface);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cart-item__photo svg { opacity: .25; }
.cart-item__photo-img { width: 100%; height: 100%; object-fit: cover; }

.cart-item__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  margin-bottom: 4px;
}
.cart-item__variation {
  font-size: var(--fs-sm);
  color: var(--color-text-mute);
  margin-bottom: 8px;
}
.cart-item__price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
}

.cart-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text-mute);
  transition: color var(--t-fast);
  line-height: 1;
}
.cart-item__remove:hover { color: var(--color-error); }

.cart-summary {
  padding: 28px;
  background: var(--color-surface);
  border-radius: var(--r-md);
}
@media (min-width: 900px) {
  .cart-summary { position: sticky; top: calc(var(--hdr-h) + 24px); }
}

.cart-summary__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-bottom: 20px;
}
.cart-summary__line {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}
.cart-summary__line:last-of-type { border-bottom: none; }
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--color-border);
}
.cart-summary__total-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.cart-summary__total-value { font-size: 22px; font-weight: var(--fw-bold); color: var(--color-accent); }
.cart-summary__note { font-size: var(--fs-sm); color: var(--color-text-mute); margin: 12px 0 20px; }

/* ── Checkout page ───────────────────────────────────────── */
.page-checkout {
  padding-top: calc(var(--hdr-h) + 48px);
  padding-bottom: var(--sp);
  min-height: 70vh;
}
.page-checkout .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }

.checkout-heading { margin-bottom: 40px; }
.checkout-heading h1 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-head); }

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .checkout-grid { grid-template-columns: 55fr 45fr; gap: 48px; }
}

.checkout-form-section h2,
.checkout-order-section h2 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-group label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-mute);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--t-fast);
  outline: none;
  appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--color-text); }
.form-group textarea { resize: vertical; min-height: 100px; }

.form-required { color: var(--color-accent); margin-left: 2px; }

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select { border-color: var(--color-error); }
.form-group.has-error label { color: var(--color-error); }
.form-error {
  font-size: 12px;
  color: var(--color-error);
  margin-top: 6px;
}

.checkout-order-section {
  background: var(--color-surface);
  padding: 28px;
  border-radius: var(--r-md);
}
@media (min-width: 900px) {
  .checkout-order-section { position: sticky; top: calc(var(--hdr-h) + 24px); }
}

.checkout-order-items { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.checkout-order-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.checkout-order-item__name { flex: 1; }
.checkout-order-item__price { font-weight: var(--fw-semi); white-space: nowrap; }
.checkout-order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 2px solid var(--color-border);
}
.checkout-order-total__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.checkout-order-total__value { font-size: 22px; font-weight: var(--fw-bold); color: var(--color-accent); }
.checkout-order-note { font-size: var(--fs-sm); color: var(--color-text-mute); margin-top: 12px; }

.form-submit-row { margin-top: 8px; }

/* ── Thank you page ──────────────────────────────────────── */
.page-thank-you {
  padding-top: var(--hdr-h);
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.page-thank-you .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); width: 100%; }

.thank-you {
  max-width: 480px;
  margin: 0 auto;
  padding: 60px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.thank-you__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(200, 94, 40, .08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.thank-you__icon svg { color: var(--color-accent); }
.thank-you__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-head); }
.thank-you__text { font-size: var(--fs-body); color: var(--color-text-mute); line-height: var(--lh-body); }
.thank-you__phone { font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--color-text); text-decoration: none; }
.thank-you__phone:hover { color: var(--color-accent); }

/* btn success state */
.btn--success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-white) !important;
}

/* ── Modal ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}
.modal__box {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--r-lg);
  padding: 40px;
  width: 100%;
  max-width: 480px;
  z-index: 1;
  transform: translateY(16px);
  transition: transform var(--t-base) var(--ease-out);
}
.modal.is-open .modal__box { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--color-text-mute);
  transition: color var(--t-fast);
}
.modal__close:hover { color: var(--color-text); }
.modal__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  margin-bottom: 8px;
}

/* ── Catalog row media background ────────────────────────── */
.catalog-row__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--t-base);
  z-index: 0;
}

/* ── WordPress body/admin adjustments ────────────────────── */
.admin-bar .header { top: var(--wp-admin--admin-bar--height, 32px); }
.wpcf7-form .form-group { margin-bottom: 16px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--t-fast);
  outline: none;
  appearance: none;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus { border-color: var(--color-text); }
.wpcf7 textarea { resize: vertical; min-height: 100px; }
.wpcf7 input[type="submit"] {
  width: 100%;
  margin-top: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.wpcf7 input[type="submit"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.wpcf7-not-valid-tip { font-size: var(--fs-sm); color: var(--color-error); margin-top: 4px; }
.wpcf7-response-output {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin-top: 16px;
}
.wpcf7-mail-sent-ok { background: rgba(61,140,95,.1); color: var(--color-success); border: 1px solid var(--color-success); }
.wpcf7-validation-errors { background: rgba(217,79,61,.08); color: var(--color-error); border: 1px solid var(--color-error); }