/* ===== Fonts (self-hosted) ===== */
@font-face {
  font-family: "El Messiri";
  src: url("assets/fonts/ElMessiri-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kurenaido";
  src: url("assets/fonts/ZenKurenaido-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Italic.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ===== Tokens ===== */
:root {
  --bg-dark: #10140c;
  --bg-forest: #232c1c;
  --bg-cream: #efe8d8;
  --text-light: #f4efe2;
  --text-light-dim: rgba(244, 239, 226, 0.62);
  --text-dark: #1b1e14;
  --text-dark-dim: rgba(27, 30, 20, 0.62);
  --accent-bark: #a66b3d;
  --accent-moss: #7c8c5c;
  --line-on-dark: rgba(244, 239, 226, 0.16);
  --line-on-cream: rgba(27, 30, 20, 0.14);

  --font-display: "El Messiri", serif;
  --font-body: "Zen Kurenaido", sans-serif;
  --font-mono: "Zen Kurenaido", sans-serif;

  /* One horizontal gutter for every section, so nothing sits a few px off from its
     neighbour. Overridden once in the mobile block below rather than per-section. */
  --pad-x: clamp(24px, 5vw, 56px);
  --section-pad: clamp(64px, 9vw, 128px);
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light-dim);
  margin: 0 0 18px;
}
.eyebrow-dark { color: var(--text-dark-dim); }

/* faint grain overlay for texture, kept very subtle */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Equal 1fr gutters, not space-between: they keep .main-nav on the page's centre line
     however wide the logo and the actions group happen to be. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 24px var(--pad-x);
  color: var(--text-light);
  background: transparent;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-solid {
  background: rgba(16, 20, 12, 0.92);
  backdrop-filter: blur(10px);
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--line-on-dark);
}

/* Pages that open on a cream .page-head (catalog, checkout) rather than the dark hero.
   Unscrolled, the transparent bar's cream-on-dark treatment would be cream on cream — the
   same token remap the phone breakpoint uses flips the logo, links, cart, lang pill and
   burger to dark. .is-solid brings back the dark bar and takes over from here. */
.page-cream-head .site-header:not(.is-solid) {
  --text-light: #1b1e14;
  --text-light-dim: rgba(27, 30, 20, 0.62);
  --line-on-dark: rgba(27, 30, 20, 0.14);
  --bg-dark: #efe8d8;
  color: var(--text-dark);
}
/* brightness(0) blacks out the cream logo artwork while keeping its alpha. */
.page-cream-head .site-header:not(.is-solid) .logo-img { filter: brightness(0); opacity: 0.9; }

.logo-link { display: inline-flex; justify-self: start; }

.logo-img { height: 34px; width: auto; display: block; }

.footer-top .logo-img { height: 34px; }
/* big tree symbol at the bottom of the site */
.footer-symbol { height: 180px; width: auto; display: block; }
@media (max-width: 720px) { .footer-symbol { height: 120px; } }

/* Аллея wordmark — geometric rounded green logo (Forest-inspired) */
.logo-mark { height: 26px; width: auto; display: block; }
.footer-top .logo-mark { height: 34px; }
@media (max-width: 720px) { .logo-mark { height: 22px; } }

/* Elegant italic wordmark, inspired by high-contrast Didone script logos */
.wordmark {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--text-light);
  transform: skewX(-4deg);
  display: inline-block;
  transform-origin: left bottom;
}

.footer-top .wordmark { font-size: 38px; }

.main-nav {
  display: flex;
  justify-self: center;
  gap: 36px;
  font-size: 18px;
}
.main-nav a { opacity: 0.85; transition: opacity 0.2s ease; }
.main-nav a:hover { opacity: 1; }

/* Hamburger — mobile only, revealed in the mobile block at the end of this file */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
/* the two bars cross into an X, both rotating about the button's centre */
.site-header.nav-open .nav-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.site-header.nav-open .nav-toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  background: var(--bg-dark);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 20, 12, 0.35) 0%,
    rgba(16, 20, 12, 0.1) 32%,
    rgba(16, 20, 12, 0.55) 78%,
    rgba(16, 20, 12, 0.88) 100%
  );
}

.hero-content {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(64px, 11vh, 120px);
  right: var(--pad-x);
  max-width: 720px;
  color: var(--text-light);
}

/* hidden until tree intro video triggers the reveal */
.hero-content .eyebrow,
.hero-headline,
.hero-sub,
.hero-content .hero-actions,
.scroll-cue {
  opacity: 0;
  transform: translateY(18px);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

.hero-sub {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.55;
  max-width: 480px;
  color: var(--text-light-dim);
  margin: 0 0 36px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;              /* bold text, same size */
  padding: 15px 26px;
  border-radius: 2px;            /* stays rectangular */
  border: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.25s ease, border-color 0.25s ease;
}

/* Primary — solid at rest, terracotta bubble rises to fill on hover (Uiverse "button2") */
.btn-primary {
  background: var(--text-light);
  color: var(--bg-dark);
  border-color: var(--text-light);
}
.btn-dark.btn-primary {
  background: var(--bg-dark);
  color: var(--text-light);
  border-color: var(--bg-dark);
}
.btn-primary::before,
.btn-primary::after {
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  border-radius: 50%;
  background-color: var(--accent-bark);
  z-index: -1;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
}
.btn-primary::before { top: 100%; width: 140%; height: 180%; transform: translateX(-50%) scaleX(1.25); }
.btn-primary::after  { left: 55%; top: 180%; width: 160%; height: 190%; transform: translateX(-50%) scaleX(1.45); }
.btn-primary:hover { color: var(--text-light); border-color: var(--accent-bark); }
.btn-primary:hover::before { top: -35%; transform: translateX(-50%) scaleY(1.3) scaleX(0.8); }
.btn-primary:hover::after  { top: -45%; transform: translateX(-50%) scaleY(1.3) scaleX(0.8); }

/* Secondary (ghost) — transparent, fills cream from the left on hover (Uiverse "btn") */
.btn-ghost {
  background-color: transparent;
  border-color: var(--text-light);
  color: var(--text-light);
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--text-light);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: -1;
}
.btn-ghost:hover { border-color: var(--text-light); color: var(--bg-dark); }
.btn-ghost:hover::before { transform: translateX(0); }

/* Ghost on light backgrounds (dark outline) — plain hover, no fill (unused for now) */
.btn-ghost-dark { border-color: var(--line-on-cream); color: var(--text-dark); }
.btn-ghost-dark:hover { border-color: var(--text-dark); }

.scroll-cue {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(64px, 11vh, 120px);
  color: var(--text-light-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  writing-mode: vertical-rl;
}
.scroll-cue span {
  width: 1px;
  height: 46px;
  background: var(--text-light-dim);
  display: block;
}

@media (max-width: 720px) {
  .scroll-cue { display: none; }
}

/* ===== Intro ===== */
.intro {
  background: var(--bg-cream);
  padding: var(--section-pad) var(--pad-x);
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
}

.intro-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.25;
  margin: 0;
  max-width: 420px;
}

.intro-right p {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-dark-dim);
  max-width: 480px;
  margin: 0 0 20px;
}

.text-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--text-dark);
  padding-bottom: 2px;
}

@media (max-width: 820px) {
  .intro-grid { grid-template-columns: 1fr; }
}

/* ===== Stats ===== */
.stats {
  position: relative;
  background: var(--bg-forest);
  color: var(--text-light);
  padding: var(--section-pad) var(--pad-x);
  overflow: hidden;
}

.ring-motif {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  fill: none;
  stroke: var(--text-light);
  stroke-opacity: 0.06;
  stroke-width: 1;
  pointer-events: none;
}

.stats > .eyebrow { position: relative; max-width: 1280px; margin: 0 auto 40px; }

.stats-grid {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.stat {
  border-top: 1px solid var(--line-on-dark);
  padding-top: 24px;
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing: -0.01em;
}
.stat-suffix {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
}

.stat-label {
  font-size: 13.5px;
  color: var(--text-light-dim);
  margin: 10px 0 0;
  max-width: 200px;
}

/* Two across rather than a single stacked column — three full-width rows made this
   section far taller than it needs to be on a phone. */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
}

/* ===== Catalog ===== */
.catalog {
  background: var(--bg-cream);
  padding: var(--section-pad) var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
}

.catalog-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  max-width: 640px;
  margin: 0 0 48px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.catalog-grid[hidden] { display: none; }

/* clean product card */
.catalog-card {
  display: flex;
  flex-direction: column;
  background: #fbfaf7;
  border: 1px solid var(--line-on-cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 30, 20, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.catalog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -26px rgba(27, 30, 20, 0.4);
}

.catalog-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-forest);
}
.catalog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.catalog-card:hover .catalog-media img { transform: scale(1.04); }

/* pulsing Sale / Best-seller badge */
.catalog-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(27, 30, 20, 0.28);
  --badge-glow: rgba(63, 155, 52, 0.6);
  animation: badge-pulse 2.1s ease-in-out infinite;
}
.catalog-badge--hit { background: #3f9b34; --badge-glow: rgba(63, 155, 52, 0.55); }
.catalog-badge--sale { background: #c0563a; --badge-glow: rgba(192, 86, 58, 0.55); }
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 var(--badge-glow); transform: scale(1); }
  60% { box-shadow: 0 0 0 9px rgba(0, 0, 0, 0); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transform: scale(1); }
}

.catalog-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 14px 16px 16px;
}
.catalog-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin: 0;
}
.catalog-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  margin: 0;
}
.catalog-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.catalog-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-dark);
}
.catalog-buy {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-dark);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.catalog-buy:hover { background: var(--accent-bark); transform: scale(1.08); }

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

@media (max-width: 1000px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
/* Stays two-up all the way down: one card per row made each photo fill most of the
   screen, so the section read as a stack of posters rather than a catalogue. */
@media (max-width: 760px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .catalog-card:hover .catalog-media img { transform: none; }
  .catalog-badge { animation: none; }
}

/* ===== Full catalog page header ===== */
/* Cream, not the near-black --bg-dark it used to be. The header sits over this section
   unscrolled, and its logo and icons are black on phones — on the dark panel the whole bar
   disappeared. Cream also makes the head continuous with the catalog body below it. */
.page-head {
  background: var(--bg-cream);
  color: var(--text-dark);
  padding: 150px var(--pad-x) 60px;
}
.page-head .eyebrow { color: var(--text-dark-dim); }
.page-head-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  margin: 10px 0 16px;
}
.page-head-sub {
  color: var(--text-dark-dim);
  font-size: 19px;
  max-width: 520px;
  margin: 0;
}
.catalog-page { padding-top: clamp(44px, 5vw, 72px); }

/* ===== Catalog: filter layout (e-commerce listing) ===== */
.catalog-layout {
  background: var(--bg-cream);
  max-width: 1720px;
  margin: 0 auto;
  /* small left padding so the filters hug the left edge; the breathing room lives
     in the column gap between the filters and the grid instead */
  padding: clamp(36px, 4vw, 60px) clamp(24px, 3vw, 48px) var(--section-pad) clamp(18px, 2vw, 32px);
  display: grid;
  grid-template-columns: 258px 1fr;
  gap: clamp(56px, 8vw, 150px);
  align-items: start;
}
/* three big cards per row, dropping to two then one on smaller screens */
.catalog-layout .catalog-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2vw, 34px);
}

/* --- Sidebar --- */
.filters { position: sticky; top: 92px; }
/* Sheet chrome — only ever visible on phones, see the max-width: 860px block below. */
.filters-head { display: flex; align-items: center; justify-content: space-between; }
.filters-close, .filters-apply, .cat-mobilebar, .filters-scrim { display: none; }
.filters-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 22px;
}
.filter-group {
  padding: 24px 0;
  border-top: 1px solid var(--line-on-cream);
}
.filter-group[hidden] { display: none; }
.filter-group:first-of-type { border-top: none; padding-top: 0; }
.filter-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin: 0 0 15px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-on-cream);
  background: #fbfaf7;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.chip:hover { border-color: var(--text-dark); }
.chip.is-active {
  background: var(--bg-dark);
  color: var(--text-light);
  border-color: var(--bg-dark);
}
.filters-reset {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--text-dark-dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filters-reset:hover { color: var(--text-dark); }

/* --- Dual price range --- */
.price-vals {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin-bottom: 16px;
}
.range { position: relative; height: 30px; margin: 0 4px 18px; }
.range::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--line-on-cream);
  border-radius: 3px;
}
.range-fill {
  position: absolute;
  top: 13px;
  height: 5px;
  background: var(--bg-dark);
  border-radius: 3px;
}
.range input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 2px solid #fbfaf7;
  box-shadow: 0 1px 4px rgba(27, 30, 20, 0.35);
  cursor: pointer;
}
.range input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 2px solid #fbfaf7;
  box-shadow: 0 1px 4px rgba(27, 30, 20, 0.35);
  cursor: pointer;
}
.range input[type="range"]::-moz-range-track { background: none; }

/* --- Main column toolbar --- */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.result-count {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dark-dim);
  margin: 0;
}
.sort {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
}
.sort select {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dark);
  background: #fbfaf7;
  border: 1px solid var(--line-on-cream);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
}
.sort select:hover { border-color: var(--text-dark); }

.catalog-empty {
  padding: 56px 0;
  text-align: center;
  color: var(--text-dark-dim);
  font-size: 18px;
}

/* --- Bigger cards on the catalog page (landing catalog is untouched) --- */
.catalog-layout .catalog-body { padding: 18px 20px 20px; gap: 6px; }
.catalog-layout .catalog-cat { font-size: 12.5px; }
.catalog-layout .catalog-name { font-size: 23px; }
.catalog-layout .catalog-price { font-size: 21px; }
.catalog-layout .catalog-foot { padding-top: 16px; }
.catalog-layout .catalog-buy { width: 46px; height: 46px; }

/* --- Add-to-cart button (cart -> check) --- */
.catalog-buy { position: relative; }
.catalog-buy svg { position: absolute; width: 20px; height: 20px; transition: opacity 0.2s ease, transform 0.2s ease; }
.catalog-buy .i-check { opacity: 0; transform: scale(0.5); }
.catalog-buy.is-added { background: #3f9b34; }
.catalog-buy.is-added .i-cart { opacity: 0; transform: scale(0.5); }
.catalog-buy.is-added .i-check { opacity: 1; transform: scale(1); }

@media (max-width: 1160px) {
  .catalog-layout .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .catalog-layout { grid-template-columns: 1fr; gap: 18px; }
  /* 150px of head above a phone-sized title left half a screen of empty cream. */
  .page-head { padding: 96px var(--pad-x) 30px; }

  /* Sticky strip carrying the root-system tabs and the filter button. */
  .cat-mobilebar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 56px;              /* clears the fixed header */
    z-index: 40;
    margin: 0 calc(var(--pad-x) * -1) 4px;
    padding: 10px var(--pad-x);
    background: var(--bg-cream);
    border-bottom: 1px solid var(--line-on-cream);
  }
  .cat-segwrap { flex: 1; min-width: 0; }
  .cat-segwrap .filter-group { border: 0; padding: 0; margin: 0; }
  .cat-segwrap .filter-label { display: none; }   /* the two chips speak for themselves */
  .cat-segwrap .chip-row { flex-wrap: nowrap; gap: 8px; }
  .cat-segwrap .chip { font-size: 12.5px; padding: 8px 14px; white-space: nowrap; }
  .cat-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 9px 14px;
    border: 1px solid var(--text-dark);
    border-radius: 999px;
    background: var(--text-dark);
    color: var(--bg-cream);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .cat-filter-btn svg { width: 15px; height: 15px; }
  .cat-filter-count {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bg-cream);
    color: var(--text-dark);
    font-size: 10.5px;
    line-height: 17px;
    text-align: center;
  }

  /* The sidebar becomes a bottom sheet. */
  .filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 210;
    max-height: 86dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 18px var(--pad-x) calc(18px + env(safe-area-inset-bottom));
    background: var(--bg-cream);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 50px rgba(16, 20, 12, 0.3);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
  }
  .filters.is-open { transform: none; visibility: visible; }
  /* As with .pm-overlay: [hidden] must beat this display, or the invisible scrim covers
     the page and eats every tap. */
  .filters-scrim[hidden] { display: none; }
  .filters-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 205;
    background: rgba(16, 20, 12, 0.5);
    backdrop-filter: blur(3px);
  }
  body.filters-open { overflow: hidden; }

  .filters-head {
    position: sticky;
    top: -18px;             /* cancels the sheet's own top padding */
    z-index: 2;
    margin: -18px calc(var(--pad-x) * -1) 6px;
    padding: 16px var(--pad-x) 12px;
    background: var(--bg-cream);
    border-bottom: 1px solid var(--line-on-cream);
  }
  .filters-title { margin: 0; font-size: 20px; }
  .filters-close {
    display: block;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(27, 30, 20, 0.06);
    color: var(--text-dark);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  /* The segment group lives in the sticky bar at this width, so the sheet starts at Тип. */
  .filters .filter-group:first-of-type { border-top: 0; padding-top: 0; }
  .filters-apply {
    display: block;
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: 18px;
    padding: 15px 18px;
    border: 0;
    border-radius: 12px;
    background: var(--text-dark);
    color: var(--bg-cream);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .filters-reset { margin-top: 6px; }
}
/* Two-up all the way down, matching the landing page. One card per row turned every
   photo into a full screen, so finding a species meant scrolling through posters. */
@media (max-width: 560px) {
  .catalog-layout .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .catalog-layout .catalog-body { padding: 12px 13px 14px; }
  .catalog-layout .catalog-cat { font-size: 10px; }
  .catalog-layout .catalog-name { font-size: 16px; line-height: 1.2; }
  .catalog-layout .catalog-price { font-size: 15px; }
  .catalog-layout .catalog-foot { padding-top: 10px; }
  .catalog-layout .catalog-buy { width: 36px; height: 36px; }
  .catalog-layout .catalog-buy svg { width: 16px; height: 16px; }
  /* Two-class selector: the base .catalog-discount rule sits later in the file and would
     otherwise win on source order at equal specificity. */
  .catalog-main .catalog-discount { font-size: 12px; margin-bottom: 14px; }
}
.catalog-card { cursor: pointer; }

/* ===== Single-product modal ===== */
.pm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  background: rgba(16, 20, 12, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pm-overlay.is-open { opacity: 1; }
/* hidden must beat the .pm-overlay display:flex, or the invisible overlay eats every click */
.pm-overlay[hidden] { display: none; }
body.pm-open { overflow: hidden; }

.pm-dialog {
  position: relative;
  width: min(1360px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-cream);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  transform: translateY(16px) scale(0.99);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pm-overlay.is-open .pm-dialog { transform: none; }

.pm-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(27, 30, 20, 0.06);
  color: var(--text-dark);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.pm-close:hover { background: rgba(27, 30, 20, 0.14); }

/* --- Media (thumbnails + main image) --- */
/* pinned so the (potentially long) options list scrolls without the photo clipping */
.pm-media { display: flex; gap: 14px; position: sticky; top: 0; align-self: start; }
.pm-thumbs { display: flex; flex-direction: column; gap: 12px; flex: none; }
.pm-thumb {
  width: 72px;
  height: 88px;
  padding: 0;
  border: 1px solid var(--line-on-cream);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-forest);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-thumb:hover { opacity: 1; }
.pm-thumb.is-active { opacity: 1; border-color: var(--text-dark); }
.pm-main {
  position: relative;
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-forest);
  aspect-ratio: 4 / 5;
}
.pm-main img { width: 100%; height: 100%; object-fit: cover; }
.pm-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
}
.pm-badge--hit { background: #3f9b34; }
.pm-badge--sale { background: #c0563a; }

/* --- Info column --- */
.pm-info { display: flex; flex-direction: column; padding-top: 6px; }
.pm-cat {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin: 0 0 8px;
}
.pm-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  margin: 0 0 10px;
}
.pm-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}
.pm-divider {
  height: 1px;
  background: var(--line-on-cream);
  margin: 22px 0;
}
.pm-desc {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 0 0 28px;
  max-width: 460px;
}

/* --- Quantity + add to cart --- */
.pm-buy { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.pm-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-on-cream);
  border-radius: 999px;
  background: #fbfaf7;
  padding: 4px;
}
.pm-step {
  width: 42px;
  height: 42px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-dark);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.18s ease;
}
.pm-step:hover { background: rgba(27, 30, 20, 0.08); }
.pm-step:disabled { opacity: 0.3; cursor: default; }
.pm-qty-val {
  min-width: 34px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
}
.pm-add {
  flex: 1;
  min-width: 180px;
  border: none;
  border-radius: 999px;
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 16.5px;
  cursor: pointer;
  padding: 0 28px;
  transition: background 0.2s ease;
}
.pm-add:hover { background: var(--accent-bark); }
.pm-add.is-added { background: #3f9b34; }

.pm-stock {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--text-dark-dim);
  margin: 20px 0 0;
}
.pm-dot { width: 9px; height: 9px; border-radius: 50%; background: #3f9b34; }
.pm-ship {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-dark-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
}
.pm-ship:hover { color: var(--text-dark); }

/* Phones: the dialog was a poster you were trapped inside. The photo was sticky, so it
   stayed pinned over half the screen no matter how far you scrolled; the close button was
   absolutely positioned inside the scroll container, so it scrolled away; and "В корзину"
   sat ~200px below the viewport. Now the photo scrolls with the content, the close button
   and the buy row are pinned to the top and bottom edges, and everything between them
   scrolls. */
@media (max-width: 760px) {
  .pm-overlay { padding: 0; align-items: flex-end; }
  .pm-dialog {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: 92dvh;
    padding: 0 16px 0;
    gap: 16px;
    border-radius: 20px 20px 0 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .pm-close {
    position: sticky;
    top: 10px;
    justify-self: end;
    /* Negative bottom margin collapses the row it would otherwise occupy, so the photo
       starts at the top of the sheet and the button floats over its corner. */
    margin: 10px -2px -44px 0;
    background: rgba(239, 232, 216, 0.92);
    backdrop-filter: blur(6px);
    z-index: 3;
  }
  .pm-media { flex-direction: column-reverse; position: static; }
  .pm-thumbs { flex-direction: row; }
  .pm-thumb { width: 56px; height: 56px; }
  .pm-main { aspect-ratio: 4 / 3; max-height: 32dvh; }
  .pm-name { font-size: 26px; }
  .pm-desc { font-size: 15px; }
  /* Pushed last in the flex column so it can stay pinned to the bottom edge for the whole
     scroll, with the stock line and shipping link above it. */
  .pm-buy {
    order: 10;
    position: sticky;
    bottom: 0;
    margin-top: 14px;
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
    background: var(--bg-cream);
    border-top: 1px solid var(--line-on-cream);
    flex-wrap: nowrap;
  }
  .pm-add { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-overlay, .pm-dialog { transition: none; }
}

/* --- Placeholder media for species without a photo yet --- */
.catalog-media--ph, .pm-main--ph { background: var(--bg-forest); }
.ph-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(244, 239, 226, 0.5);
}
.ph-leaf { width: clamp(40px, 8vw, 60px); height: auto; }
.ph-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Discount banner on the catalog --- */
.catalog-discount {
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 23px;
  line-height: 1.3;
  color: #d42323;
  margin: 0 0 26px;
}

/* --- Landing tab-style segment switch (big underlined tabs) --- */
.cat-tabs {
  display: flex;
  gap: clamp(30px, 5vw, 68px);
  margin: -14px 0 38px;
  border-bottom: 1px solid var(--line-on-cream);
}
.cat-tab {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.1;
  color: var(--text-dark-dim);
  background: none;
  border: none;
  padding: 0 2px 18px;
  cursor: pointer;
  transition: color 0.22s ease;
}
.cat-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--accent-bark);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.cat-tab:hover { color: var(--text-dark); }
.cat-tab.is-active { color: var(--text-dark); }
.cat-tab.is-active::after { transform: scaleX(1); }

/* --- Configurator fields (variety + size) --- */
.pm-config { display: flex; flex-direction: column; gap: 20px; margin: 2px 0 28px; }
.pm-field-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin: 0 0 10px;
}
.pm-opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* sizes pack into a compact grid so even 15+ options fit without an inner scrollbar */
.pm-field-size .pm-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.pm-field-size .pm-opt { text-align: center; padding-left: 8px; padding-right: 8px; }
.pm-opt {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-on-cream);
  background: #fbfaf7;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pm-opt:hover { border-color: var(--text-dark); }
.pm-opt.is-active { background: var(--bg-dark); color: var(--text-light); border-color: var(--bg-dark); }

/* ===== Geography ===== */
.geography {
  background: var(--bg-forest);
  color: var(--text-light);
  /* trimmed vertical padding so the title + map read together in one frame */
  padding: clamp(44px, 6vh, 80px) var(--pad-x);
}

.geography-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  max-width: 1280px;
  margin: 0 auto 12px;
}

.geography-sub {
  max-width: 1280px;
  margin: 0 auto 36px;
  color: var(--text-light-dim);
  font-size: 19px;
  max-width: 560px;
}

.geography-map {
  /* Almost full width, but sized so height stays low enough that the title + whole map
     fit in one viewport. Width is capped by the height available after the heading. */
  width: min(92vw, 1200px, calc((100svh - 340px) * 1.894));
  margin: 16px auto 0;
}
.geo-credit {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-light-dim);
}

/* interactive sales map: full-bleed relief image + hover-labelled pins + saturation reveal */
.geo-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1121 / 592;
  --x: 50%;
  --y: 50%;
  --r: 0px;
}
.geo-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
}

/* connector line drawn from the Rostov HQ to a hovered city pin */
.geo-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.geo-lines.is-on { opacity: 1; }
.geo-line {
  fill: none;
  stroke: #d23b26;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s ease;
}
/* the fan of lines shown when hovering Rostov — still lighter than a single hovered
   route, but red enough to read as one confident network */
.geo-line--all { stroke-width: 2; opacity: 0.7; }
.geo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cheap saturation reveal: a desaturated copy sits on top of the full-colour base and
   is masked away in a soft circle at the cursor, revealing full colour underneath.
   Filtering a static image (cached) + moving a mask is far lighter than backdrop-filter. */
.geo-mute {
  filter: saturate(0.5);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),
    transparent 0%, transparent 55%, #000 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y),
    transparent 0%, transparent 55%, #000 100%);
}

.geo-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
}
/* delivery pin: vivid dot + soft coloured halo so sold locations stand out */
.geo-dot {
  display: block;
  width: 13px;
  height: 13px;
  margin: auto;
  border-radius: 50%;
  background: #1f9c3f;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(31, 156, 63, 0.28), 0 2px 7px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.geo-pin:hover .geo-dot,
.geo-pin:focus-visible .geo-dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(31, 156, 63, 0.32), 0 3px 10px rgba(0, 0, 0, 0.55);
}

.geo-pin-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #1b1e14;
  color: #f4efe2;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.geo-pin:hover .geo-pin-label,
.geo-pin:focus .geo-pin-label { opacity: 1; }

/* HQ (Rostov-on-Don): bolder red dot, always-on label, pulsing ring */
.geo-pin--hq { z-index: 4; }
.geo-pin--hq .geo-dot {
  width: 17px;
  height: 17px;
  background: #d23b26;
  box-shadow: 0 0 0 5px rgba(210, 59, 38, 0.3), 0 2px 9px rgba(0, 0, 0, 0.55);
}
.geo-pin--hq .geo-pin-label { opacity: 1; font-weight: 600; }
.geo-pin--hq::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(210, 59, 38, 0.75);
  transform: translate(-50%, -50%);
  animation: geo-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes geo-pulse {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}
/* touch / reduced-motion: no reveal, show the map in full colour */
@media (hover: none) {
  .geo-mute { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-pin--hq::after { animation: none; }
  .geo-mute { display: none; }
}

/* ===== Partners ===== */
.partners {
  background: var(--bg-cream);
  padding: var(--section-pad) var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
}

.partners-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 12px;
  max-width: 640px;
}

.partners-sub {
  color: var(--text-dark-dim);
  font-size: 19px;
  max-width: 540px;
  margin: 0 0 48px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-on-cream);
  border: 1px solid var(--line-on-cream);
}

.partner-card {
  background: var(--bg-cream);
  padding: 36px;
}

.partner-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  margin: 0 0 4px;
}

.partner-role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-bark);
  margin: 0 0 16px;
}

.partner-desc {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-dark-dim);
  margin: 0 0 16px;
  max-width: 460px;
}

.partner-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dark);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-on-cream);
}

/* partner photo carousel */
.partner-gallery {
  position: relative;
  max-width: 460px;
  margin: 0 0 20px;
}
.pg-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-forest);
}
.pg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pg-slide.is-active { opacity: 1; }
.pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(16, 20, 12, 0.5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.25s ease, background 0.2s ease;
}
.partner-gallery:hover .pg-arrow,
.pg-arrow:focus-visible { opacity: 1; }
.pg-arrow:hover { background: rgba(16, 20, 12, 0.85); }
.pg-prev { left: 10px; }
.pg-next { right: 10px; }
.pg-dots {
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.pg-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.2s ease;
}
.pg-dot.is-on { background: #fff; }
@media (hover: none) {
  .pg-arrow { opacity: 0.9; }
}

@media (max-width: 760px) {
  .partners-grid { grid-template-columns: 1fr; }
}

/* ===== Gallery (dome) ===== */
.gallery {
  background: var(--bg-forest);
  color: var(--text-light);
  padding: clamp(52px, 7vw, 92px) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
}
.gallery-head {
  max-width: 1280px;
  margin: 0 auto 8px;
  padding: 0 var(--pad-x);
  text-align: center;
}
.gallery-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  margin: 10px 0 12px;
}
.gallery-sub {
  color: var(--text-light-dim);
  font-size: 15px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin: 0;
}
/* higher specificity than dome-gallery.css's `.sphere-root { height:100% }` so the
   container keeps a real height (that element also gets the .sphere-root class) */
.gallery .dome-wrap {
  position: relative;
  width: 100%;
  height: min(72vh, 780px);
}

/* ===== Video testimonials ===== */
.vtestimonials {
  background: var(--bg-forest);
  color: var(--text-light);
  padding: var(--section-pad) var(--pad-x);
}
.vt-head {
  max-width: 1128px;
  margin: 0 auto 44px;
  text-align: center;
}
.vt-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  margin: 10px auto 0;
  max-width: 720px;
}
.vt-sub {
  color: var(--text-light-dim);
  font-size: 15px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin: 14px 0 0;
}
.vt-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 3vw, 32px);
}
.vt-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line-on-dark);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}
.vt-frame:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 239, 226, 0.4);
}
.vt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.vt-frame:hover .vt-thumb { transform: scale(1.04); }
.vt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(16, 20, 12, 0.55);
  border: 1px solid rgba(244, 239, 226, 0.5);
  color: var(--text-light);
  backdrop-filter: blur(4px);
  padding-left: 3px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.vt-frame:hover .vt-play {
  background: var(--accent-bark);
  border-color: var(--accent-bark);
  transform: translate(-50%, -50%) scale(1.08);
}
.vt-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 720px) {
  .vt-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* ===== Testimonials (centered paged slider) ===== */
.testimonials {
  background: var(--bg-cream);
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
}
.tm-head {
  max-width: 1128px;
  margin: 0 auto 36px;
  padding: 0 var(--pad-x);
  text-align: center;
}
.tm-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  margin: 10px auto 0;
  max-width: 720px;
}
/* the viewport shows three columns, centred; the track is a row of columns that the
   JS recycles for an endless loop (no idle animation, so nothing glitches) */
.tm-viewport {
  position: relative;
  /* 3 columns (3×400 + 2×30 = 1260) + side padding that gives the card shadows room.
     overflow clips at the padding box, so shadows show inside the padding while the
     next (off-screen) column is still hidden just beyond it. */
  width: min(100%, 1308px);
  margin: 0 auto;
  overflow: hidden;
  padding: 36px 24px 60px;
}
.tm-track {
  display: flex;
  gap: 30px;
  align-items: stretch;
  width: max-content;
  transform: translateX(0);
  user-select: none;
  -webkit-user-select: none;
}
.tm-col {
  flex: none;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tm-card {
  flex: 1;
  display: flex;
  min-height: 196px;
}
.tm-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 10px 28px -14px rgba(27, 30, 20, 0.2), 0 1px 2px rgba(27, 30, 20, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
/* stationary now, so the hover lift is safe */
.tm-card:hover .tm-inner {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(27, 30, 20, 0.32), 0 3px 8px rgba(27, 30, 20, 0.09);
}
.tm-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tm-stars {
  color: #e0a11f;
  letter-spacing: 3px;
  font-size: 15px;
}
.tm-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  line-height: 0.5;
  color: rgba(63, 155, 52, 0.3);
}
.tm-text {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-dark);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tm-divider {
  height: 1px;
  background: var(--line-on-cream);
  margin: auto 0 16px; /* margin-top:auto pins the divider + author to the bottom */
}
.tm-author {
  display: flex;
  align-items: center;
  gap: 11px;
}
.tm-av {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.tm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
}
.tm-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
}
.tm-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
.tm-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-on-cream);
  background: #fff;
  color: var(--text-dark);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.tm-arrow:hover:not(:disabled) {
  background: var(--bg-dark);
  color: var(--text-light);
  border-color: var(--bg-dark);
}
.tm-arrow:disabled { opacity: 0.3; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .tm-grid { transition: none; }
}

/* ===== CTA ===== */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--bg-forest);
  color: var(--text-light);
  text-align: center;
  padding: clamp(88px, 12vw, 148px) var(--pad-x);
}

/* Aurora fills the section as a full-width background layer, faded only at the
   left/right edges so it spans the viewport without a hard rectangle. It sits
   behind the copy (z-index 0); the shader positions the glow lower than centre so
   it reads as a band beneath the slogan. pointer-events off so clicks pass through. */
.cta-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.cta-aurora canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  margin: 0 0 44px;
  color: var(--text-light);
  text-shadow: 0 2px 30px rgba(16, 20, 12, 0.55);
}

.cta .hero-actions { justify-content: center; }

/* ===== Footer ===== */
.site-footer {
  background: var(--bg-forest);
  color: var(--text-light);
  padding: clamp(40px, 5vw, 60px) var(--pad-x) 32px;
}

.footer-top {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-on-dark);
}

.footer-cols {
  display: flex;
  gap: clamp(32px, 6vw, 80px);
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light-dim);
  margin: 0 0 16px;
}

.footer-col a, .footer-col p {
  display: block;
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--text-light-dim);
}
.footer-col a:hover { color: var(--text-light); }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--text-light-dim);
}

/* ===== Lead-capture popup (pros) ===== */
.lead-pop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;         /* non-blocking: the page keeps scrolling behind it */
  background: rgba(16, 20, 12, 0.18);   /* very light darkening */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);           /* blur the page so you can't read through it */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lead-pop.is-open { opacity: 1; }
.lead-pop[hidden] { display: none; }

.lead-pop-dialog {
  position: relative;
  pointer-events: auto;         /* the card itself stays interactive */
  display: flex;
  width: min(940px, 100%);
  max-height: calc(100dvh - 48px);
  background: #fbfaf7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(16, 20, 12, 0.5), 0 0 0 1px rgba(16, 20, 12, 0.06);
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.lead-pop.is-open .lead-pop-dialog { transform: none; opacity: 1; }

.lead-pop-media { width: 45%; flex-shrink: 0; }
.lead-pop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lead-pop-body {
  position: relative;
  flex: 1;
  padding: clamp(32px, 4.5vw, 54px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lead-pop-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 25px;
  line-height: 1;
  color: var(--text-dark-dim);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.lead-pop-close:hover { color: var(--text-dark); background: rgba(27, 30, 20, 0.07); }

.lead-pop-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bark);
  margin: 0 0 13px;
}
.lead-pop-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.1vw, 33px);
  line-height: 1.12;
  color: var(--text-dark);
  margin: 0 0 15px;
}
.lead-pop-sub {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--text-dark-dim);
  margin: 0 0 24px;
}
.lead-pop-sub strong { font-weight: 700; color: var(--text-dark); }
.lead-pop-sub .lead-pop-hl { color: var(--accent-bark); font-size: 1.08em; }
.lead-pop-form { display: flex; flex-direction: column; gap: 12px; }
.lead-pop-input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-on-cream);
  border-radius: 8px;
  background: #fff;
  color: var(--text-dark);
  width: 100%;
}
.lead-pop-input::placeholder { color: var(--text-dark-dim); }
.lead-pop-input:focus { outline: none; border-color: var(--accent-bark); }
.lead-pop-input.is-invalid { border-color: #d42323; }
.lead-pop-submit { width: 100%; justify-content: center; }

.lead-pop-dismiss {
  margin-top: 16px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dark-dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lead-pop-dismiss:hover { color: var(--text-dark); }
.lead-pop-fine {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dark-dim);
}

.lead-pop-check {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-moss);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
}
.lead-pop-check svg { width: 28px; height: 28px; }

.lead-pop-form-view[hidden],
.lead-pop-done-view[hidden] { display: none; }

@media (max-width: 640px) {
  .lead-pop-media { display: none; }
  .lead-pop-dialog { width: 100%; }
}

/* ===== Header actions: language switch + cart ===== */
.header-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
}

.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-on-dark);
  border-radius: 999px;
  overflow: hidden;
}
.lang-opt {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 8px 11px;
  background: none;
  border: none;
  color: var(--text-light);
  opacity: 0.55;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.lang-opt:hover { opacity: 0.85; }
.lang-opt.is-active {
  background: var(--text-light);
  color: var(--bg-dark);
  opacity: 1;
}

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  background: none;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cart-btn svg { width: 21px; height: 21px; }
.cart-btn:hover { background: rgba(244, 239, 226, 0.1); border-color: var(--text-light); }
.cart-btn.has-items { border-color: var(--accent-bark); }
.cart-btn-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-bark);
  color: var(--text-light);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 19px;
  text-align: center;
}
.cart-btn-count[hidden] { display: none; }

/* ===== Cart drawer ===== */
body.cart-open { overflow: hidden; }

.cart-drawer { position: fixed; inset: 0; z-index: 400; }
.cart-drawer[hidden] { display: none; }
.cart-scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 20, 12, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cart-drawer.is-open .cart-scrim { opacity: 1; }

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg-cream);
  color: var(--text-dark);
  box-shadow: -30px 0 70px rgba(16, 20, 12, 0.3);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-drawer.is-open .cart-panel { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px clamp(20px, 3vw, 30px) 18px;
  border-bottom: 1px solid var(--line-on-cream);
}
.cart-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  margin: 0;
}
.cart-close {
  font-size: 30px;
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-on-cream);
  background: none;
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cart-close:hover { background: rgba(27, 30, 20, 0.06); }

.cart-scroll { flex: 1; overflow-y: auto; padding: 0 clamp(20px, 3vw, 30px); }
.cart-items { list-style: none; margin: 0; padding: 0; }
.cart-items[hidden] { display: none; }

.cart-item {
  display: grid;
  grid-template-columns: 84px 1fr 24px;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-on-cream);
}
.cart-item-media {
  width: 84px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: #e3ddcd;
}
.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-dark-dim);
}
.cart-item-ph svg { width: 30px; height: 30px; }
.cart-item-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 3px;
}
.cart-item-meta {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dark-dim);
  margin: 0 0 2px;
}
.cart-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line-on-cream);
  border-radius: 999px;
  padding: 2px;
}
.cart-step {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}
.cart-step:hover { background: rgba(27, 30, 20, 0.07); }
.cart-qty-val {
  font-family: var(--font-mono);
  font-size: 15px;
  min-width: 18px;
  text-align: center;
}
.cart-item-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}
.cart-del {
  align-self: start;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-dark-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}
.cart-del svg { width: 16px; height: 16px; }
.cart-del:hover { color: var(--text-dark); }

.cart-blank { padding: 70px 0; text-align: center; color: var(--text-dark-dim); }
.cart-blank[hidden] { display: none; }
.cart-blank svg { width: 46px; height: 46px; margin: 0 auto 18px; opacity: 0.5; }
.cart-blank-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.cart-blank-sub { font-size: 17px; margin: 0 0 26px; }

.cart-foot {
  padding: 20px clamp(20px, 3vw, 30px) 26px;
  border-top: 1px solid var(--line-on-cream);
  background: #f6f2e6;
}
.cart-foot[hidden] { display: none; }
.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-dark-dim);
  margin-bottom: 8px;
}
.cart-line--disc { color: #d42323; }
.cart-line--disc[hidden] { display: none; }
.cart-line--total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 25px;
  color: var(--text-dark);
  margin: 14px 0 6px;
}
.cart-next {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-bark);
  margin: 0 0 10px;
}
.cart-next[hidden] { display: none; }
.cart-hint {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dark-dim);
  margin: 0 0 16px;
}
.cart-checkout { display: block; text-align: center; width: 100%; }
.cart-continue {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dark-dim);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-continue:hover { color: var(--text-dark); }

/* ===== Checkout ===== */
.page-head--slim { padding-bottom: 44px; }

.checkout {
  background: var(--bg-cream);
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--pad-x) var(--section-pad);
}
.co-grid {
  display: grid;
  grid-template-columns: 1fr 388px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.co-grid[hidden] { display: none; }

/* --- Step rail --- */
.co-steps {
  list-style: none;
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  margin: 0 0 38px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line-on-cream);
}
.co-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-dark-dim);
  opacity: 0.65;
}
.co-step.is-active { opacity: 1; color: var(--text-dark); }
.co-step.is-done { opacity: 1; cursor: pointer; }
.co-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-on-cream);
  font-size: 14px;
}
.co-step.is-active .co-step-n {
  background: var(--bg-dark);
  color: var(--text-light);
  border-color: var(--bg-dark);
}
.co-step.is-done .co-step-n { background: var(--accent-moss); color: #fff; border-color: var(--accent-moss); }

/* --- Panels --- */
.co-panel { display: none; border: none; margin: 0; padding: 0; }
.co-panel.is-active { display: block; }
.co-panel-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  padding: 0;
  margin: 0 0 26px;
}

.co-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
  margin-bottom: 28px;
}
.co-fields[hidden] { display: none; }
.co-field { display: flex; flex-direction: column; }
.co-field--wide { grid-column: 1 / -1; }
.co-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dark-dim);
  margin-bottom: 9px;
}
.co-label em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.co-field input,
.co-field textarea {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text-dark);
  background: #fbfaf7;
  border: 1px solid var(--line-on-cream);
  border-radius: 4px;
  padding: 13px 15px;
  transition: border-color 0.2s ease;
}
.co-field textarea { resize: vertical; }
.co-field input:focus,
.co-field textarea:focus { outline: none; border-color: var(--text-dark); }
.co-field input::placeholder,
.co-field textarea::placeholder { color: rgba(27, 30, 20, 0.34); }
.co-err {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #d42323;
  margin-top: 7px;
  display: none;
}
.co-field.is-bad input,
.co-field.is-bad textarea { border-color: #d42323; }
.co-field.is-bad .co-err { display: block; }

/* --- Radio choices --- */
.co-choices { display: grid; gap: 12px; margin-bottom: 28px; }
.co-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line-on-cream);
  border-radius: 6px;
  background: #fbfaf7;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.co-choice:hover { border-color: var(--text-dark-dim); }
.co-choice:has(input:checked) { border-color: var(--bg-dark); background: #fff; }
.co-choice input { accent-color: var(--bg-dark); width: 18px; height: 18px; }
.co-choice-body { display: flex; flex-direction: column; flex: 1; }
.co-choice-name { font-size: 19px; }
.co-choice-sub {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dark-dim);
  margin-top: 3px;
}
.co-choice-price { font-family: var(--font-mono); font-size: 15px; color: var(--text-dark-dim); }

.co-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
}
.co-back {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dark-dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.co-back:hover { color: var(--text-dark); }

/* --- Payment --- */
.co-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 6px;
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.co-pay:hover { background: var(--accent-bark); }
.co-note {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent-bark);
  text-align: center;
  margin: 14px 0 0;
}
.co-note[hidden] { display: none; }
.co-note.is-flash { animation: co-flash 0.45s ease; }
@keyframes co-flash {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.co-fine {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dark-dim);
  text-align: center;
  margin: 16px 0 30px;
}

/* --- Summary --- */
.co-summary {
  position: sticky;
  top: 100px;
  background: #f6f2e6;
  border: 1px solid var(--line-on-cream);
  border-radius: 8px;
  padding: 26px;
}
.co-summary-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 20px;
}
.co-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line-on-cream);
  max-height: 340px;
  overflow-y: auto;
}
.co-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; margin-bottom: 18px; }
.co-item-media { position: relative; width: 56px; height: 64px; border-radius: 4px; overflow: hidden; background: #e3ddcd; }
.co-item-media img { width: 100%; height: 100%; object-fit: cover; }
.co-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.co-item-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 2px; }
.co-item-meta { font-family: var(--font-mono); font-size: 13px; color: var(--text-dark-dim); margin: 0; }
.co-item-price { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
.co-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-dark-dim);
  margin-bottom: 9px;
}
.co-line--disc { color: #d42323; }
.co-line--disc[hidden] { display: none; }
.co-line--total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--text-dark);
  padding-top: 14px;
  border-top: 1px solid var(--line-on-cream);
}
.co-hint { font-family: var(--font-mono); font-size: 13px; color: var(--text-dark-dim); margin: 14px 0 16px; }
.co-edit {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dark-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.co-edit:hover { color: var(--text-dark); }

.co-empty { text-align: center; padding: 60px 0 100px; }
.co-empty[hidden] { display: none; }
.co-empty-title { font-family: var(--font-display); font-weight: 600; font-size: 30px; margin: 0 0 10px; }
.co-empty-sub { font-size: 18px; color: var(--text-dark-dim); margin: 0 0 28px; }

@media (max-width: 980px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 600px) {
  .co-fields { grid-template-columns: 1fr; }
  .co-steps { gap: 14px; font-size: 14px; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Mobile / phone layout
   Kept in one block at the end of the file so it reliably wins over the
   section rules above, and so there is a single place to tune the phone view.
   ========================================================================== */
@media (max-width: 720px) {

  :root {
    --pad-x: 20px;
    --section-pad: clamp(48px, 8vw, 66px);
  }

  /* ---------- Header: logo | actions, with the nav as a dropdown panel ---------- */
  .site-header {
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .site-header.is-solid { padding-top: 10px; padding-bottom: 10px; }
  .logo-img { height: 27px; }
  /* Unscrolled, the bar now sits on the cream hero, so the same token remap flips the
     logo, cart, lang pill and burger to dark. .is-solid restores the dark bar untouched.
     brightness(0) blacks out the cream logo artwork while keeping its alpha. */
  .site-header:not(.is-solid) {
    --text-light: #1b1e14;
    --text-light-dim: rgba(27, 30, 20, 0.62);
    --line-on-dark: rgba(27, 30, 20, 0.14);
    --bg-dark: #efe8d8;
    color: var(--text-dark);
  }
  .site-header:not(.is-solid) .logo-img { filter: brightness(0); opacity: 0.9; }
  .nav-toggle { display: flex; }
  .header-actions { gap: 8px; }
  .lang-switch { flex: none; }

  /* The nav keeps its markup (so i18n and the anchors keep working) and becomes a
     panel under the bar. Absolute, so it is out of the header's grid flow. */
  .main-nav {
    display: flex;
    position: absolute;
    /* Out of flow, so its containing block is the header's padding box — which already
       spans the full bar, insets included. So 0/0/100% lands flush under the header and
       edge to edge, and the panel's own --pad-x lines the links up with the logo.
       justify-self must be reset: the desktop `center` makes an abspos grid child
       shrink-to-fit, which collapsed this panel to the width of its longest link. */
    justify-self: end;
    top: 100%;
    left: auto;
    right: var(--pad-x);   /* lines the panel's edge up with the toggle above it */
    /* A panel under the toggle rather than a full-width curtain — the logo and the bar
       stay visible beside it. Capped so it never becomes a thin strip on a wide phone. */
    width: min(64vw, 250px);
    flex-direction: column;
    gap: 0;
    padding: 4px 16px 12px;
    border-radius: 0 0 12px 12px;
    /* Panel stays dark whatever the bar is doing, so its text is pinned to cream —
       it must not inherit the dark-on-cream remap above. */
    color: #f4efe2;
    background: rgba(16, 20, 12, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(16, 20, 12, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  }
  .site-header.nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .main-nav a {
    padding: 15px 2px;
    font-size: 17px;
    opacity: 1;
    border-bottom: 1px solid rgba(244, 239, 226, 0.1);
  }
  .main-nav a:last-child { border-bottom: 0; }

  /* ---------- Hero ---------- */
  /* Cream, matching the About section below it, so the two read as one surface. Rather
     than restate every rule, the four palette tokens this section's descendants already
     reference are remapped here — that flips the headline, sub and both buttons at once. */
  .hero {
    --text-light: #1b1e14;
    --text-light-dim: rgba(27, 30, 20, 0.62);
    --line-on-dark: rgba(27, 30, 20, 0.14);
    --bg-dark: #efe8d8;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 44px;   /* no side padding: the video runs edge to edge */
    text-align: center;
    color: var(--text-dark);
  }
  /* A real background again: the clip fills the top of the screen edge to edge, starting
     under the header, cropped by `cover` rather than letterboxed into a strip. Only the
     bottom is feathered — the sides run into the viewport and the top has nothing above it
     to blend with. The fade is where the copy sits, so image and text read as one block. */
  .hero-video {
    position: relative;
    inset: auto;
    width: 100%;
    height: 54vh;
    min-height: 340px;
    max-height: 500px;
    object-fit: cover;
    flex: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 46%, transparent 100%);
  }
  .hero-scrim { display: none; }
  .hero-content {
    position: relative;
    z-index: 2;
    inset: auto;
    max-width: 400px;
    /* Rides up into the faded bottom of the clip so the headline sits on the image. */
    margin-top: -17vh;
    padding: 0 var(--pad-x);
  }
  /* The eyebrow now lands on foliage instead of flat cream, where dim grey disappears. */
  .hero-content .eyebrow {
    color: rgba(27, 30, 20, 0.88);
    margin-bottom: 14px;
  }
  .hero-headline {
    font-size: clamp(38px, 11vw, 50px);
    margin-bottom: 14px;
  }
  .hero-sub {
    font-size: 16px;
    line-height: 1.5;
    max-width: 330px;
    margin: 0 auto 24px;
  }
  .hero-actions { justify-content: center; gap: 10px; }
  .hero .btn { padding: 13px 18px; font-size: 11.5px; }

  /* ---------- Intro / stats ---------- */
  .intro-grid { gap: 26px; }
  /* Full-width rows, number left and label right, rather than a grid of half-width
     cells: with three stats the odd one sat alone and its rule floated under nothing.
     One rule per row spans the section, so the lines read as dividers again. */
  .stats-grid { grid-template-columns: 1fr; gap: 0; }
  .stat {
    display: flex;
    align-items: baseline;
    padding: 13px 0;
  }
  .stat-number, .stat-suffix { font-size: 29px; }
  /* The suffix's leading space is stripped once it is a flex item, so "57 га" ran
     together. Space it back out. */
  .stat-suffix { margin-left: 0.16em; }
  .stat-label {
    margin: 0 0 0 auto;      /* pushed to the right edge, number stays left */
    padding-left: 18px;
    max-width: 190px;
    text-align: right;
    font-size: 12.5px;
  }
  .ring-motif { width: 320px; height: 320px; right: -140px; }

  /* ---------- Catalog cards ---------- */
  /* Squarer photos and tighter type so two cards per row stay legible. */
  .catalog-media { aspect-ratio: 1 / 1; }
  .catalog-card { border-radius: 14px; }
  .catalog-body { padding: 11px 12px 13px; }
  .catalog-name { font-size: 16px; }
  .catalog-cat { font-size: 10px; }
  .catalog-price { font-size: 15px; }
  .catalog-foot { padding-top: 10px; }
  .catalog-buy { width: 32px; height: 32px; font-size: 15px; }
  .catalog-more { margin-top: 30px; }

  /* ---------- Geography ---------- */
  /* Full width inside the section gutter: 92vw was wider than the padded content box,
     which pushed the map off-centre and past the right-hand gutter. */
  /* Full-bleed, and the map is then scaled past those edges and clipped. The box has to
     keep the image's own 1121:592 ratio — the pins are positioned as percentages of
     .geo-map, so a taller box crops the artwork out from under them and every pin drifts
     off its city. Scaling enlarges both axes together and keeps them registered. */
  .geography-map {
    width: 100vw;
    margin: 14px 0 0 calc(var(--pad-x) * -1);
    overflow: hidden;
  }
  .geo-map { width: 125%; margin-left: -12.5%; }
  .geography-heading, .geography-sub { text-align: center; }
  .geography-sub { margin-left: auto; margin-right: auto; margin-bottom: 20px; font-size: 16px; }
  .geography > .eyebrow { text-align: center; }
  .geo-media { border-radius: 0; }
  .geo-pin { width: 30px; height: 30px; }  /* easier tap target than the 20px desktop pin */
  .geo-pin-label { font-size: 10px; }
  .geo-credit { font-size: 10px; padding: 0 var(--pad-x); }

  /* ---------- Testimonials ---------- */
  .vtestimonials { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
  .vt-head { margin-bottom: 26px; }
  .tm-head { margin-bottom: 22px; }
  .tm-viewport { padding: 18px 14px 30px; }
  /* The column is a fixed 400px, which overhangs a 390px screen and was clipping the
     right edge of every card. Match it to the viewport instead. */
  .tm-col { width: calc(100vw - 28px); gap: 16px; }
  .tm-card { min-height: 0; }
  .tm-inner { padding: 16px 17px; border-radius: 13px; }
  /* No line clamp: long quotes were being truncated mid-sentence. Cards grow instead. */
  .tm-text {
    font-size: 15.5px;
    line-height: 1.45;
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
  }
  .tm-top { margin-bottom: 9px; }
  .tm-quote { font-size: 40px; }
  .tm-stars { font-size: 13px; }
  .tm-divider { margin-bottom: 12px; }
  .tm-av { width: 32px; height: 32px; font-size: 14px; }
  .tm-name { font-size: 14.5px; }
  .tm-source { font-size: 10px; }
  .tm-nav { margin-top: 18px; gap: 12px; }
  .tm-arrow { width: 40px; height: 40px; font-size: 16px; }

  /* ---------- Gallery ---------- */
  /* Sized so the eyebrow, heading, sub and the whole sphere land in one screen.
     The sphere's own radius is reduced in the initDomeGallery options in index.html —
     without that the tiles are laid out on a sphere far larger than the viewport. */
  .gallery { padding: 44px 0 34px; }
  .gallery-heading { font-size: clamp(26px, 7vw, 34px); margin: 8px 0 8px; }
  .gallery-sub { font-size: 12.5px; }
  .gallery .dome-wrap { height: min(52vh, 380px); }

  /* ---------- CTA / footer ---------- */
  .cta { padding: 64px var(--pad-x); }
  .cta .btn { padding: 13px 18px; font-size: 11.5px; }
  .site-footer { padding: 36px var(--pad-x) 24px; }
  /* Symbol centred over all three columns, which stay side by side across the width. The
     previous 2x2 arrangement (logo beside the nursery details, nav and contacts beneath)
     read as four loose blocks rather than one footer. */
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-bottom: 22px;
  }
  .footer-symbol { height: 96px; }
  .footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
  }
  .footer-col p:last-child, .footer-col a:last-child { margin-bottom: 0; }
  .footer-col-title { font-size: 9px; letter-spacing: 0.07em; margin-bottom: 9px; }
  .footer-col a, .footer-col p {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 6px;
    /* The email is wider than a third of a phone screen — let it break rather than
       push the grid out of the viewport. */
    overflow-wrap: anywhere;
  }
  .footer-bottom { padding-top: 16px; font-size: 11px; text-align: center; }
}

/* Touch devices: the map's saturation reveal follows a cursor that does not exist here,
   so the desaturated overlay would just sit on top permanently. Show full colour. */
@media (hover: none) {
  .geo-mute { display: none; }
  .geo-pin.is-on .geo-pin-label { opacity: 1; }
}

/* ==========================================================================
   Interaction lock
   No pinch/double-tap zoom, no text selection or copy, no image dragging, and
   no horizontal panning past the page edges. Deliberately narrow: anything that
   needs to receive gestures (form fields, the draggable gallery) opts back in.
   ========================================================================== */

/* pan-y allows vertical scrolling and nothing else — this is what actually stops
   pinch-zoom and sideways drift on iOS, since the viewport meta's user-scalable
   has been ignored there since iOS 10.
   overflow-x: clip rather than hidden — hidden would make these a scroll container
   and break position: sticky (the catalogue filter rail). */
html, body {
  touch-action: pan-y;
  overscroll-behavior-x: none;
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* no long-press "save/copy image" sheet */
}

/* Anything the user is meant to type into keeps normal selection and callout. */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* The dome gallery needs raw pointer control to spin, so it opts out of pan-y.
   Without this the sphere would only scroll the page instead of rotating. */
.sphere-root, .sphere-root * { touch-action: none; }