/*
Theme Name: Plant Shop
Author: AGINE
Description: Кастомная тема для премиального магазина растений на WooCommerce.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: plant-shop
*/

/* ============ DESIGN TOKENS ============ */
:root {
  /* Explicit light-only design — without this, Chrome/Android's forced-dark
     mode repaints warm light backgrounds into a muddy olive/brown instead of
     the real Butter/Green (seen live 2026-07-15: site looked nothing like
     the verified screenshots on a phone with system dark mode on). */
  color-scheme: light;

  /* Site palette v2 — Cream/Deep-Green/Gold. Replaces the earlier Butter/Green
     "LOCKED" palette on the owner's explicit instruction (new design handoff,
     2026-07-31: "вот дизайн новый, поставь его"), superseding the prior
     lock-in. Same role-names kept (glasshouse = dark field, herbarium =
     light field, clay = primary accent) so every component referencing these
     tokens recolors automatically — nothing else needs touching. */
  --color-glasshouse: #123324;
  --color-glasshouse-dark: #0f2a1e;
  --color-glasshouse-light: #16362a;
  --color-herbarium: #faf6ec;
  --color-herbarium-dim: #e6dfc9;
  --color-soil: #1c2620;
  --color-sage: #8a9188;
  --color-sage-dim: #b9c2ac;
  /* Gold — primary CTA/accent (was terracotta-clay in the old palette). */
  --color-clay: #e2a13f;
  --color-clay-dark: #cf8f2e;
  /* Terracotta — secondary accent for prices/badges/sale, new token. */
  --color-terracotta: #c0563a;
  --color-terracotta-dark: #9c452e;
  /* --color-sage on its own fails WCAG AA as text — these two darker variants
     exist specifically to keep "success/in-stock" green messaging readable
     without borrowing glasshouse or inventing an unrelated color. */
  --color-success-text: #4c5a3e;
  --color-success-icon: #6b7a58;

  --font-display: "Unbounded", "Segoe UI", sans-serif;
  /* Accent-only serif for editorial moments (quotes, callouts). */
  --font-accent: "Playfair Display", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container-width: 1180px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 140px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  --shadow-card: 0 1px 2px rgba(1, 62, 55, 0.06), 0 8px 24px rgba(1, 62, 55, 0.08);
  --shadow-lift: 0 4px 8px rgba(1, 62, 55, 0.08), 0 24px 48px rgba(1, 62, 55, 0.16);
  --shadow-clay: 0 8px 20px rgba(181, 80, 46, 0.24);

}

/* ============ RESET ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--color-herbarium);
  color: var(--color-soil);
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font-family: inherit;
}

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

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--space-2);
  }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-clay);
}

/* ============ HEADER ============ */
.site-header {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 239, 179, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-3);
  gap: var(--space-3);
}

.site-logo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--color-herbarium);
}

.site-logo__line {
  white-space: nowrap;
}

.site-logo__line--accent {
  color: var(--color-clay);
}

.primary-nav ul {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
}

.primary-nav a {
  text-decoration: none;
  /* All eight items stay in the header (trimming them to five was my call and
     the owner wanted them back). Eight at 19px overflow 1440px, so 17px +
     a tighter gap is the size that keeps every tab on one clean row. */
  font-size: 19px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-herbarium-dim);
  transition: color 0.15s ease;
  position: relative;
}

.primary-nav a:hover {
  color: var(--color-herbarium);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-cart {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  text-decoration: none;
  color: var(--color-herbarium);
  font-family: var(--font-mono);
  font-size: 18px;
  white-space: nowrap;
  border: 1px solid rgba(255, 239, 179, 0.35);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  background: none;
}

.header-cart svg {
  color: var(--color-clay);
  flex-shrink: 0;
}

.header-cart:hover {
  border-color: var(--color-herbarium);
  background: rgba(255, 239, 179, 0.06);
}

.header-account {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--color-herbarium-dim);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.header-account:hover {
  color: var(--color-herbarium);
}

@media (max-width: 560px) {
  .header-account {
    display: none;
  }
}

.nav-toggle-input {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-herbarium);
  border-radius: 2px;
}

@media (max-width: 1280px) {
  /* Raised from 780px: eight nav items at 19px + logo + cart measured live
     as needing ~1260px to fit on one row without wrapping — anything
     narrower produced a page-wide horizontal scrollbar (nav ran off the
     right edge instead of wrapping). 1280px matches the Hero's own
     breakpoint below so the two never disagree on what counts as "mobile". */
  .site-header__inner {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  .header-actions {
    order: 3;
  }

  .primary-nav {
    order: 4;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }

  .nav-toggle-input:checked ~ .primary-nav {
    max-height: 480px;
  }

  .primary-nav ul {
    flex-direction: column;
    row-gap: 14px;
    padding: var(--space-3) 0;
  }

  .primary-nav a {
    font-size: 19px;
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  /* transition lives in the single ".btn" rule under PREMIUM
     MICRO-INTERACTIONS below — two competing transition declarations on the
     same selector meant whichever came later in the cascade silently won. */
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-clay {
  background: var(--color-clay);
  color: var(--color-herbarium);
  box-shadow: var(--shadow-clay);
}

.btn-clay:hover {
  background: var(--color-clay-dark);
  box-shadow: 0 12px 28px rgba(181, 80, 46, 0.32);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-glasshouse);
}

.btn-outline:hover {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
}

.btn-outline-light {
  /* Only used on the Hero's dark full-bleed photo — text/border must read
     light-on-dark here, not the herbarium-background assumption of
     .btn-outline. Was dark green (var(--color-glasshouse)) on the same dark
     photo, making the label nearly invisible (confirmed live at 1440px). */
  background: transparent;
  border-color: rgba(255, 239, 179, 0.4);
  color: var(--color-herbarium);
}

.btn-outline-light:hover {
  background: var(--color-herbarium);
  color: var(--color-glasshouse);
  border-color: var(--color-herbarium);
}

/* ============ TRUST BAR — sits above the Hero ============ */
/* ============ TRUST STRIP — 4 cards row above the Hero ============ */
.trust-strip {
  background: var(--color-glasshouse);
  border-bottom: 1px solid rgba(255, 239, 179, 0.12);
  padding: var(--space-3) var(--space-4);
}

.trust-strip__inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@keyframes trust-card-pop {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.trust-strip__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  animation: trust-card-pop 0.5s ease both;
  animation-delay: var(--pop-delay, 0s);
}

.trust-strip__icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.trust-strip__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-herbarium);
}

.trust-strip__value {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-herbarium);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .trust-strip__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .trust-strip__inner {
    grid-template-columns: 1fr;
  }
}

/* ============ HERO v6 — ported 1:1 from the 2026-08-01 design handoff
   (ChromaFlora Home.dc.html): full-bleed photo, dark diagonal gradient,
   snake-in badge column pinned to the right edge. Values below (clamp(),
   colors, delays) are copied verbatim from that file, not eyeballed. ==== */
@keyframes cfSnakeIn {
  0% { opacity: 0; transform: translateY(50px) translateX(-40px); }
  45% { opacity: 1; transform: translateY(10px) translateX(24px); }
  100% { opacity: 1; transform: translateY(0) translateX(0); }
}

@keyframes cfSnakeSway {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-16px); }
  65% { transform: translateX(12px); }
}

.hero-v6 {
  position: relative;
  background: #123324;
  overflow: hidden;
  min-height: calc(100vh - 76px);
  max-height: calc(100vh - 76px);
}

.hero-v6__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 0;
}

.hero-v6__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(10, 26, 18, 0.94) 0%,
    rgba(10, 26, 18, 0.78) 32%,
    rgba(10, 26, 18, 0.35) 56%,
    rgba(10, 26, 18, 0.15) 100%
  );
}

.hero-v6__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(10px, 2.5vh, 24px) 56px;
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: 1fr min(340px, 44vw);
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
}

.hero-v6__copy {
  animation: cfFadeUp 0.9s ease-out;
  /* Grid column already caps the width — no calc() subtraction needed, so
     this can never overflow into the badge column regardless of viewport
     width (the bug the calc()-based version hit on narrower windows). */
  min-width: 0;
}

.hero-v6__eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--color-clay);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: clamp(18px, 3vh, 32px);
  font-size: clamp(26px, 3.8vh, 36px);
  font-weight: 900;
}

.hero-v6__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-clay);
  display: inline-block;
  flex: none;
  margin-top: 5px;
}

.hero-v6__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.6vh, 76px);
  line-height: 1.14;
  font-weight: 800;
  color: var(--color-herbarium);
  margin: 0 0 clamp(20px, 3vh, 34px);
  letter-spacing: -0.5px;
}

.hero-v6__title em {
  font-style: normal;
  background: linear-gradient(90deg, #c9862f 0%, #f3cd85 25%, var(--color-clay) 50%, #f3cd85 75%, #c9862f 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cfShimmer 4s linear infinite;
}

.hero-v6__lede {
  font-family: var(--font-body);
  font-size: clamp(24px, 3.4vh, 32px);
  font-weight: 800;
  line-height: 1.4;
  color: #f3f7f4;
  margin: 0 0 clamp(26px, 3.6vh, 40px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.hero-v6__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-v6__btn-primary,
.hero-v6__btn-secondary {
  text-decoration: none;
  font-size: clamp(18px, 2.4vh, 22px);
  border-radius: 14px;
  display: inline-block;
}

.hero-v6__btn-primary {
  background: var(--color-clay);
  color: var(--color-glasshouse-dark);
  font-weight: 800;
  padding: clamp(16px, 2.2vh, 22px) 34px;
  box-shadow: 0 14px 30px -10px rgba(226, 161, 63, 0.55);
}

.hero-v6__btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--color-herbarium);
  font-weight: 700;
  padding: clamp(15px, 2.1vh, 21px) 32px;
}

.hero-v6__badges {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(9px, 1.6vh, 18px);
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}

.hero-v6__badge {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
  background: rgba(250, 246, 236, 0.97);
  backdrop-filter: blur(10px);
  border-radius: 26px;
  padding: clamp(13px, 2.1vh, 19px) clamp(15px, 2.2vh, 21px);
  box-shadow: 0 22px 46px -16px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  opacity: 0;
  animation:
    cfSnakeIn 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) calc(350ms + var(--i) * 260ms) both,
    cfSnakeSway 6s ease-in-out calc(2.4s + var(--i) * 0.15s) infinite;
}

.hero-v6__badge-icon {
  width: clamp(42px, 6vh, 56px);
  height: clamp(42px, 6vh, 56px);
  flex: none;
  border-radius: 50%;
  background: #f3ead2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-v6__badge-icon svg {
  width: 20px;
  height: 20px;
}

.hero-v6__badge-text {
  min-width: 0;
  flex: 1;
}

.hero-v6__badge-label {
  display: block;
  overflow-wrap: break-word;
  font-weight: 900;
  font-size: clamp(16px, 2.3vh, 21px);
  color: var(--color-glasshouse);
  line-height: 1.2;
}

.hero-v6__badge-sub {
  display: block;
  margin-top: 4px;
  font-weight: 900;
  font-size: clamp(12px, 1.7vh, 15px);
  color: var(--color-clay-dark);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .hero-v6 {
    min-height: 0;
    max-height: none;
  }

  .hero-v6__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 28px 20px;
  }

  .hero-v6__badges {
    margin-top: 20px;
  }

  .hero-v6__title {
    font-size: 40px;
  }

  .hero-v6__eyebrow {
    font-size: 19px;
  }

  .hero-v6__lede {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v6__badge {
    animation: none;
    opacity: 1;
  }
}

/* ============ FEATURED PRODUCTS STRIP ============ */
.product-grid.product-grid--six {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1200px) {
  .product-grid.product-grid--six {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .product-grid.product-grid--six {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .product-grid.product-grid--six {
    grid-template-columns: 1fr;
  }
}

.featured-strip__badge {
  color: var(--color-terracotta);
}

.product-grid.product-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .product-grid.product-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-grid.product-grid--four {
    grid-template-columns: 1fr;
  }
}

/* ============ CATEGORY PILLS ============ */
.category-pills__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28.5px;
  color: var(--color-glasshouse);
  margin: 0;
}

.category-pills__hint {
  font-size: 15px;
  color: var(--color-sage);
}

.category-pills__grid {
  display: grid;
  /* Driven by the real category count (set inline) so the row always spans
     the full width — it was pinned at 6 while only 4 categories exist, which
     left them bunched against the left edge. */
  grid-template-columns: repeat(var(--cat-cols, 4), 1fr);
  gap: 18px;
}

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

/* No color fills and no icons, per the owner's call — just large bold type
   on white, same visual language as the catalog sidebar. */
.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  text-align: center;
  text-decoration: none;
  color: var(--color-glasshouse);
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px;
  border: 2px solid var(--color-herbarium-dim);
  box-shadow: 0 6px 16px -12px rgba(15, 42, 30, 0.18);
  transition: transform 0.25s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.25s ease, border-color 0.2s ease;
  animation: cfCategoryPopUp 0.55s cubic-bezier(0.16, 0.84, 0.44, 1) both;
  animation-delay: var(--pop-delay, 0s);
}

.category-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-glasshouse);
  box-shadow: 0 20px 34px -16px rgba(15, 42, 30, 0.3);
}

.category-card__label {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.category-card__count {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-clay-dark);
}

@media (max-width: 1024px) {
  .category-pills__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .category-pills__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ FAQ PREVIEW ============ */
.faq-preview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.faq-preview__item {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  min-height: 88px;
}

.faq-preview__item summary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-glasshouse);
  cursor: pointer;
  list-style: none;
}

.faq-preview__item summary::-webkit-details-marker {
  display: none;
}

.faq-preview__item summary::after {
  content: "+";
  float: right;
  color: var(--color-clay);
  font-weight: 700;
}

.faq-preview__item[open] summary::after {
  content: "−";
}

.faq-preview__item p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-soil);
  margin: 12px 0 0;
}

@media (max-width: 780px) {
  .faq-preview__grid {
    grid-template-columns: 1fr;
  }
}

/* ============ NEWSLETTER BAR ============ */
.newsletter-bar {
  background: var(--color-glasshouse);
  padding: var(--space-4) 0;
}

.newsletter-bar__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.newsletter-bar__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-herbarium);
  margin: 0 0 8px;
}

.newsletter-bar__text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-herbarium);
  opacity: 0.7;
  margin: 0;
  max-width: 46ch;
}

.newsletter-bar__form {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.newsletter-bar__form input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 239, 179, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-herbarium);
  min-width: 220px;
}

.newsletter-bar__form input::placeholder {
  color: rgba(255, 239, 179, 0.5);
}

@media (max-width: 780px) {
  .newsletter-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsletter-bar__form {
    width: 100%;
  }

  .newsletter-bar__form input {
    flex: 1;
    min-width: 0;
  }
}

/* Reads as the Hero continuing, not a new section: same background, no
   card/border/icon chrome, just quieter typography once the visitor scrolls
   past the fold. */
.hero-intro {
  background: var(--color-herbarium);
  background-image: linear-gradient(90deg, rgba(142, 155, 124, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(142, 155, 124, 0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  padding-top: 56px;
  padding-bottom: 96px;
  position: relative;
}

.hero-intro__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.25;
  color: var(--color-glasshouse);
  max-width: 20ch;
  margin: 0 0 40px;
  position: relative;
}

.hero-intro__blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.hero-intro__block {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-glasshouse);
  margin: 0;
}

@media (max-width: 900px) {
  .hero-intro {
    padding-bottom: 56px;
  }

  .hero-intro__title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .hero-intro__blocks {
    grid-template-columns: 1fr;
  }

  .hero-intro__block {
    font-size: 18px;
    padding: var(--space-3);
  }
}

/* ============ PICKUP BAND ============ */
.pickup-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 50px -22px rgba(15, 42, 30, 0.2);
  border: 1px solid var(--color-herbarium-dim);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  overflow: hidden;
}

.pickup-card__info {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: var(--color-soil);
}

.pickup-card__cta {
  background: #f3ead2;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.pickup-card__address {
  font-weight: 700;
  font-size: 17px;
}

.pickup-card__route {
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-glasshouse);
}

@media (max-width: 700px) {
  .pickup-card {
    grid-template-columns: 1fr;
  }
}

/* ============ DELIVERY BAND — real СДЭК point count, same card style ============ */
.delivery-band {
  padding: 0 0 var(--space-5);
}

.delivery-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid rgba(1, 62, 55, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.delivery-band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--color-glasshouse);
  margin: 8px 0 12px;
}

.delivery-band__text {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  color: var(--color-soil);
  max-width: 52ch;
  margin: 0;
}

.delivery-band .btn-outline {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .delivery-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============ HERO (v1 — inactive, kept only until hero-v3 composition is approved) ============ */
.hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(142, 155, 124, 0.16) 1px, transparent 1px),
    linear-gradient(rgba(142, 155, 124, 0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 8%, rgba(181, 80, 46, 0.1) 0%, rgba(181, 80, 46, 0) 42%),
    radial-gradient(circle at 68% 55%, rgba(142, 155, 124, 0.22) 0%, rgba(142, 155, 124, 0) 50%),
    radial-gradient(circle at 78% 15%, rgba(255, 239, 179, 0.9) 0%, rgba(255, 239, 179, 0) 55%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-7) var(--space-3) var(--space-6);
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-2) var(--space-4);
    gap: var(--space-4);
  }
}

.hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  color: var(--color-glasshouse);
  margin: var(--space-2) 0 var(--space-3);
  max-width: 15ch;
}

.hero__title i {
  font-style: italic;
  color: var(--color-clay);
}

.hero__lede {
  font-size: 20px;
  line-height: 1.65;
  color: var(--color-soil);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* One deliberate entrance moment — headline, lede and actions rise in, tags follow. */
@keyframes plant-shop-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes plant-shop-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero__copy > * {
  opacity: 0;
  animation: plant-shop-rise 0.7s ease forwards;
}

.hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero__copy > *:nth-child(2) { animation-delay: 0.16s; }
.hero__copy > *:nth-child(3) { animation-delay: 0.3s; }
.hero__copy > *:nth-child(4) { animation-delay: 0.44s; }

/* Signature element: specimen tags */
.specimen-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.specimen-tag {
  background: var(--color-herbarium);
  border: 1px dashed var(--color-sage);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  box-shadow: 6px 8px 0 rgba(1, 62, 55, 0.06);
  max-width: 340px;
  opacity: 0;
  animation: plant-shop-fade 0.6s ease forwards;
}

.specimen-tag:nth-child(1) { animation-delay: 0.5s; }
.specimen-tag:nth-child(2) { animation-delay: 0.62s; }
.specimen-tag:nth-child(3) { animation-delay: 0.74s; }

.specimen-tag:nth-child(1) { transform: rotate(-1.4deg); }
.specimen-tag:nth-child(2) { transform: rotate(1deg); margin-left: var(--space-4); }
.specimen-tag:nth-child(3) { transform: rotate(-0.6deg); }

.specimen-tag__label {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-clay);
  margin-bottom: 6px;
}

.specimen-tag__value {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--color-glasshouse);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .specimen-tag:nth-child(2) {
    margin-left: 0;
  }
}

/* ============ SECTION SCAFFOLD ============ */
.section {
  padding: var(--space-6) 0;
}

.section--tight {
  padding: var(--space-5) 0;
}

.section--dark {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.section__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: inherit;
  margin-top: 6px;
  max-width: 20ch;
}

.section__link {
  font-family: var(--font-mono);
  font-size: 18px;
  text-decoration: none;
  color: var(--color-clay);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.section__link:hover {
  border-color: var(--color-clay);
}

/* ============ PRODUCT GRID ============ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@media (max-width: 980px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.product-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(1, 62, 55, 0.05);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.product-card__media {
  aspect-ratio: 4 / 5;
  background: var(--color-herbarium);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--color-herbarium-dim);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__discount {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--color-clay);
  color: var(--color-herbarium);
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
}

.product-card__soldout {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(58, 54, 46, 0.86);
  color: var(--color-herbarium);
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}

/* Dim the whole media box, NOT the images inside it. Dimming the images
   individually (`.product-card--out .product-card__media img`, written back
   when a card had exactly one photo) outranks the photo stack's own
   `.product-card__photo.is-active` on specificity, so it forced all four
   photos to opacity 0.5 at once — including the three meant to be hidden.
   They rendered on top of each other as a translucent smear (caught live
   2026-07-17 on «Алоказия Ниндзя»). Fading the container keeps the stack's
   show/hide intact underneath. */
.product-card--out .product-card__media,
.product-card--out .product-card__sketch {
  opacity: 0.5;
}

/* Photo stack — every photo sits on top of the others; only .is-active is
   visible. reveal.js moves .is-active as the pointer crosses the card, so a
   single-photo product simply never changes (nothing to step to) instead of
   fading into an empty card. */
.product-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.product-card__photo.is-active {
  opacity: 1;
}

/* Progress dots — which of the photos you're on, WB/Ozon-style. Only drawn
   when the card actually has more than one (see data-gallery in the card). */
.product-card__dots {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 4px;
  /* Plain white dots vanished against the light-background photos (caught
     2026-07-16). The scrim keeps them readable on any photo, light or dark,
     without having to know what's underneath. */
  padding: 5px 7px;
  border-radius: 99px;
  background: rgba(1, 62, 55, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-card:hover .product-card__dots {
  opacity: 1;
}

.product-card__dot {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.2s ease;
}

.product-card__dot.is-active {
  background: #fff;
}

.product-card__order {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  text-align: center;
  background: var(--color-clay);
  color: var(--color-herbarium);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  padding: 10px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card:hover .product-card__order {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  /* Touch devices have no hover -- always show the order badge, skip the
     photo-swap interaction (nothing to trigger it without a pointer). */
  .product-card__order {
    opacity: 1;
    transform: none;
    position: static;
    margin-top: 8px;
  }
}

.plant-sketch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.product-card__sketch {
  width: 56%;
  color: var(--color-sage);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.product-card:hover .product-card__sketch {
  transform: translateY(-3px) scale(1.03);
}

.plant-sketch__caption {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--color-sage);
  opacity: 0.75;
}

.product-card__body {
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.product-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 4px;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-glasshouse);
  margin-bottom: 4px;
}

.product-card__spec {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-sage);
  margin-bottom: 14px;
  /* Height and pot diameter each on their own line, per the owner. */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-card__spec-line {
  display: block;
}

.product-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.product-card__badge {
  font-size: 15px;
  font-weight: 700;
  background: #f3ead2;
  color: #6b5b2e;
  padding: 5px 11px;
  border-radius: 8px;
}

.product-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.product-card__price {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--color-clay);
}

.product-card__add {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-herbarium-dim);
  background: var(--color-herbarium);
  color: var(--color-soil);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.product-card__add:hover {
  background: var(--color-clay);
  border-color: var(--color-clay);
  color: var(--color-glasshouse-dark);
}

.product-card__add.loading {
  opacity: 0.6;
  pointer-events: none;
}

.product-card__stock {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--color-sage);
  margin-top: 4px;
}

/* ============ STORY SECTION ============ */
.story {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 900px) {
  .story {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.story__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.35;
  color: var(--color-glasshouse);
}

.story__body p {
  margin-bottom: var(--space-2);
  color: var(--color-soil);
  max-width: 56ch;
}

.story__signature {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-sage);
  margin-top: var(--space-3);
}

/* ============ CTA BAND ============ */
.cta-band {
  text-align: center;
  background: var(--color-glasshouse);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

.cta-band::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--color-glasshouse-light);
  opacity: 0.5;
  z-index: 0;
}

.cta-band > * {
  position: relative;
  z-index: 1;
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  color: var(--color-herbarium);
  max-width: 18ch;
  margin: 0 auto var(--space-3);
}

.cta-band .eyebrow {
  font-size: 20px;
  font-weight: 600;
}

.cta-band .btn-clay {
  background: var(--color-herbarium);
  color: var(--color-glasshouse);
}

.cta-band .btn-clay:hover {
  background: #fff;
}

/* ============ FOOTER ============ */
.site-footer {
  background: var(--color-glasshouse);
  color: var(--color-sage-dim);
  border-top: 1px solid rgba(255, 239, 179, 0.12);
  padding: var(--space-5) 0 var(--space-3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

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

.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-herbarium-dim);
  margin-bottom: var(--space-2);
}

.footer-grid a {
  text-decoration: none;
  color: var(--color-sage-dim);
  display: block;
  padding: 4px 0;
  font-size: 18px;
  transition: color 0.15s ease;
}

.footer-grid a:hover {
  color: var(--color-herbarium);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--color-herbarium);
  margin-bottom: var(--space-2);
}

.footer-tagline {
  font-size: 20px;
  font-weight: 600;
  max-width: 34ch;
  line-height: 1.5;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 239, 179, 0.1);
  padding-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 19px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-bottom__links a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom__links a:hover {
  color: var(--color-clay);
}

/* ============ WOOCOMMERCE MINIMAL BASE (structural only, refined per-page later) ============ */
.woocommerce {
  font-family: var(--font-body);
  color: var(--color-soil);
}

.woocommerce ul.products {
  padding-left: 0;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
  background: var(--color-clay) !important;
  color: var(--color-herbarium) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-clay-dark) !important;
}

main.site-main {
  min-height: 40vh;
}

.page-wrap {
  padding: var(--space-5) 0;
}

/* ============ SHOP / CATALOG ============ */
.woocommerce-breadcrumb {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--color-sage);
  padding: var(--space-2) 0 0;
  margin: 0;
}

.woocommerce-breadcrumb a {
  color: var(--color-sage);
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: var(--color-clay);
}

.shop-page {
  padding-bottom: var(--space-6);
}

.shop-header {
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--color-herbarium-dim);
  margin-bottom: var(--space-3);
}

.shop-header .section__title {
  color: var(--color-glasshouse);
  margin-top: 6px;
}

.shop-header__lede {
  margin-top: var(--space-1);
  color: var(--color-soil);
  max-width: 52ch;
}

/* ============ SHOP v2 — banner + sidebar filters (real data only) ============ */
.shop-page-v2 {
  padding-bottom: var(--space-6);
}

.shop-banner {
  background: #f3ead2;
  padding: 52px 0;
  position: relative;
  overflow: hidden;
}

.shop-banner__leaf {
  display: none;
}

.shop-banner__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 54px;
  color: var(--color-glasshouse);
  margin: 0 0 14px;
  letter-spacing: -0.5px;
}

.shop-banner__lede {
  font-family: var(--font-body);
  font-size: 19.5px;
  color: #5b6459;
  margin: 0;
  max-width: 600px;
}

.shop-layout {
  display: grid;
  /* 340px, not the old 260px — the category labels are now 21px/800 and
     need the room to stay on one or two lines instead of wrapping raggedly. */
  grid-template-columns: 340px 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  align-items: start;
}

.shop-sidebar {
  position: sticky;
  top: calc(var(--header-height, 84px) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.shop-sidebar__card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

.shop-sidebar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-glasshouse);
  margin: 0 0 var(--space-2);
}

.shop-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shop-sidebar__subtitle {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-glasshouse);
  margin: var(--space-3) 0 10px;
}

/* Category list — left sidebar, stacked, no color fills, large bold type
   per the owner's site-wide "no small text anywhere" rule. */
.shop-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-filter-bar__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.25;
  color: var(--color-glasshouse);
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--color-herbarium-dim);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.shop-filter-bar__link:hover {
  border-color: var(--color-glasshouse);
  transform: translateX(3px);
}

.shop-filter-bar__link.is-active {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
  border-color: var(--color-glasshouse);
}

.shop-filter-bar__count {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-clay-dark);
  flex-shrink: 0;
}

.shop-filter-bar__link.is-active .shop-filter-bar__count {
  color: var(--color-clay);
}

/* Size filter — Саженцы / Крупные are the primary, most prominent choice
   in the sidebar (bold, white text on the brand dark green), same visual
   weight the old top-level category list had. The 4 product_tag categories
   below are demoted to secondary "Подкатегории". */
.shop-filter-bar--size {
  flex-direction: row;
  gap: 8px;
}

.shop-filter-bar__link--size {
  flex: 1;
  justify-content: center;
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
  border-color: var(--color-glasshouse);
}

.shop-filter-bar__link--size:hover {
  transform: none;
  opacity: 0.9;
}

.shop-filter-bar__link--size .shop-filter-bar__count {
  color: var(--color-herbarium);
}

.shop-filter-bar__link--size.is-active {
  outline: 3px solid var(--color-clay);
  outline-offset: 2px;
}

/* Subcategories — same size and text color as before (never yellow text
   per the owner's rule); the yellow marks the block itself, not the type. */
.shop-filter-bar__link--sub {
  background: var(--color-butter, #ffefb3);
  border-color: transparent;
}

.shop-filter-bar__link--sub.is-active {
  background: var(--color-clay-dark);
  color: #fff;
  border-color: var(--color-clay-dark);
}

.shop-filter-bar__link--sub.is-active .shop-filter-bar__count {
  color: #fff;
}

@media (max-width: 700px) {
  .shop-filter-bar__link {
    font-size: 19px;
    padding: 13px 16px;
  }
}

.shop-sidebar__help {
  background: var(--color-glasshouse);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.shop-sidebar__help h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-herbarium);
  margin: 0 0 10px;
}

.shop-sidebar__help p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-herbarium);
  opacity: 0.85;
  margin: 0 0 12px;
}

.shop-sidebar__help a {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-clay);
  text-decoration: none;
}

.shop-sidebar__help a:hover {
  text-decoration: underline;
}

.shop-main__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.shop-main__count {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  color: var(--color-soil);
}

@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .shop-sidebar__card,
  .shop-sidebar__help {
    flex: 1 1 260px;
  }

  .shop-banner__title {
    font-size: 32px;
  }
}

.shop-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.woocommerce-result-count {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-sage);
  margin: 0 auto 0 0;
}

.shop-filter-toggle {
  font-family: var(--font-mono);
  font-size: 18px;
  text-decoration: none;
  color: var(--color-soil);
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.shop-filter-toggle:hover {
  border-color: var(--color-clay);
  color: var(--color-clay);
}

.shop-filter-toggle.is-active {
  background: var(--color-clay);
  border-color: var(--color-clay);
  color: var(--color-herbarium);
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-soil);
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.product-grid--catalog {
  margin-bottom: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {
  .product-grid--catalog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .product-grid--catalog {
    grid-template-columns: 1fr;
  }
}

.woocommerce-pagination {
  display: flex;
  justify-content: center;
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  gap: var(--space-1);
}

.woocommerce-pagination .page-numbers li {
  display: block;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  font-family: var(--font-mono);
  font-size: 18px;
  text-decoration: none;
  color: var(--color-soil);
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
}

.woocommerce-pagination .page-numbers a:hover {
  border-color: var(--color-clay);
  color: var(--color-clay);
}

.woocommerce-pagination .page-numbers .current {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
  border-color: var(--color-glasshouse);
}

.woocommerce-info {
  font-family: var(--font-body);
  background: #fff;
  border: 1px dashed var(--color-sage);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  color: var(--color-soil);
  list-style: none;
}

/* ============ INFO PAGES (page.php) ============ */
.page-hero {
  background: #f3ead2;
  padding: 52px 0;
}

.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  color: var(--color-glasshouse);
  letter-spacing: -0.5px;
}

.page-hero__lede {
  margin-top: var(--space-2);
  font-size: 20px;
  color: var(--color-soil);
  max-width: 56ch;
}

/* The container itself is full width so the design's 4-up grids (perk row,
   trust row, payment split, 7-step route) can actually span it. Readability
   is preserved by capping the prose elements at 72ch instead — capping the
   wrapper, as before, silently squeezed every wide block into a text column. */
.entry-content {
  padding: var(--space-5) 0 var(--space-6);
  color: var(--color-soil);
  line-height: 1.7;
}

.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
  max-width: 72ch;
}

.entry-content > * + * {
  margin-top: var(--space-3);
}

.entry-content .wp-block-heading,
.entry-content h2,
.entry-content h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-glasshouse);
  line-height: 1.25;
}

.entry-content h2,
.entry-content .wp-block-heading:not(h3):not(h4) {
  font-size: 30px;
  margin-top: var(--space-5);
}

.entry-content h3 {
  font-size: 20px;
  margin-top: var(--space-4);
}

.entry-content p {
  margin: 0;
}

.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list {
  padding-left: 1.4em;
}

.entry-content ul.wp-block-list li,
.entry-content ol.wp-block-list li {
  margin-bottom: 8px;
}

.entry-content blockquote.wp-block-quote {
  border-left: 3px solid var(--color-clay);
  padding-left: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-glasshouse);
}

.entry-content hr.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-herbarium-dim);
  margin: var(--space-4) 0;
}

.entry-content .wp-block-buttons {
  margin-top: var(--space-4);
}

.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  background: var(--color-clay);
  color: var(--color-herbarium) !important;
  transition: background 0.15s ease;
}

.entry-content .wp-block-button__link:hover {
  background: var(--color-clay-dark);
}

.entry-content .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 680px) {
  .entry-content .wp-block-columns {
    grid-template-columns: 1fr;
  }
}

/* Native "Details" block doubles as our FAQ accordion — no plugin needed */
.entry-content details.wp-block-details {
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}

.entry-content details.wp-block-details summary {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-glasshouse);
  cursor: pointer;
}

.entry-content details.wp-block-details[open] summary {
  margin-bottom: var(--space-2);
}

.entry-content details.wp-block-details p {
  margin: 0;
}

/* ============ SINGLE PRODUCT ============ */
.product-page {
  padding-bottom: var(--space-6);
}

.product-single {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-top: var(--space-3);
}

.product-single__info {
  /* Grid items default to min-width:auto, so wide intrinsic content (the
     add-to-cart form, trust-list text) was blowing the column past its 1fr
     track — measured live: the column's own right edge sat 110px past the
     grid's actual boundary, producing a real page-wide horizontal scrollbar
     on desktop. */
  min-width: 0;
}

@media (max-width: 900px) {
  .product-single {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.product-single__media {
  aspect-ratio: 4 / 5;
  background: var(--color-herbarium);
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-single__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-single__media .product-card__sketch {
  width: 58%;
  color: var(--color-sage);
}

.product-single__title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--color-glasshouse);
  margin: var(--space-1) 0 var(--space-2);
}

.product-single__price {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--color-clay);
  margin-bottom: var(--space-2);
}

.product-single__stock {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.product-single__stock.is-in-stock {
  background: rgba(142, 155, 124, 0.18);
  color: var(--color-success-text);
}

.product-single__stock.is-out-of-stock {
  background: rgba(181, 80, 46, 0.12);
  color: var(--color-clay-dark);
}

.product-single__cart {
  margin-bottom: var(--space-4);
}

.product-single .cart {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.product-single .quantity {
  margin: 0;
}

.product-single .quantity .qty {
  width: 70px;
  height: 52px;
  font-family: var(--font-mono);
  font-size: 19px;
  text-align: center;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-soil);
}

.product-single .single_add_to_cart_button {
  padding: 15px 28px !important;
  font-size: 19px !important;
}

.product-single__specimen {
  max-width: 100%;
}

/* Trust row under the add-to-cart form */
.product-trust {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-herbarium-dim);
}

.product-trust li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-trust__title {
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-clay);
}

.product-trust__text {
  font-size: 18px;
  color: var(--color-soil);
}

.product-trust__text a {
  color: var(--color-clay);
  text-decoration: underline;
}

.product-restock {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(1, 62, 55, 0.05);
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-md);
}

.product-restock__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-glasshouse);
  margin-bottom: 6px;
}

.product-restock__text {
  font-size: 18px;
  color: var(--color-soil);
  margin-bottom: var(--space-2);
}

.chromaflora-tariff-hint {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: var(--color-soil);
  opacity: 0.75;
  margin-top: 2px;
}

/* Care + logistics, side by side on desktop */
.product-details {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  border-top: 1px solid var(--color-herbarium-dim);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
}

@media (max-width: 900px) {
  .product-details {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.product-care {
  max-width: 68ch;
}

.care-growth {
  display: block;
  width: 160px;
  height: 110px;
  margin: 8px 0 4px;
}

.care-growth__stem {
  fill: none;
  stroke: var(--color-glasshouse);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s ease;
}

.care-growth__leaf {
  fill: var(--color-sage);
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.care-growth__dot {
  fill: var(--color-clay);
  opacity: 0;
  transition: opacity 0.6s ease 1.6s, transform 2.4s ease-in-out 1.6s;
  animation: care-dot-float 3.5s ease-in-out infinite;
  animation-play-state: paused;
}

/* Reuses the page's own scroll-reveal (.reveal--visible), not a second
   observer — three stems draw in staggered (outer pair first, center last),
   then one leaf pair fades in per stem, then two small dots settle nearby.
   Kept deliberately spare after the first version ("вышла каша") crowded
   6+ leaves and 4 dots onto 5 stems. */
.product-care.reveal--visible .care-growth__stem {
  stroke-dashoffset: 0;
}

.product-care.reveal--visible .care-growth__stem:nth-child(1) { transition-delay: 0s; }
.product-care.reveal--visible .care-growth__stem:nth-child(2) { transition-delay: 0.2s; }
.product-care.reveal--visible .care-growth__stem:nth-child(3) { transition-delay: 0.1s; }

.product-care.reveal--visible .care-growth__leaf {
  opacity: 1;
  transition-delay: 0.9s;
}

.product-care.reveal--visible .care-growth__dot {
  opacity: 0.7;
  animation-play-state: running;
}

@keyframes care-dot-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .care-growth__stem {
    stroke-dashoffset: 0;
    transition: none;
  }
  .care-growth__leaf,
  .care-growth__dot {
    opacity: 1;
    animation: none;
    transition: none;
  }
}

.product-care__body {
  color: var(--color-soil);
  line-height: 1.7;
  margin-top: var(--space-1);
}

.product-care__body p {
  margin-bottom: var(--space-2);
}

.product-care__body a,
.product-logistics a {
  color: var(--color-clay);
}

.product-logistics {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  align-self: start;
}

.product-logistics__item p {
  margin-top: 6px;
  font-size: 18px;
  color: var(--color-soil);
  line-height: 1.6;
}

/* Related products — reuse the section/product-grid rhythm from the homepage */
.related.products {
  padding: var(--space-6) 0 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-herbarium-dim);
}

.related.products > h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  color: var(--color-glasshouse);
  margin-bottom: var(--space-3);
}

.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@media (max-width: 980px) {
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .related.products ul.products {
    grid-template-columns: 1fr;
  }
}

/* ============ WOOCOMMERCE CART & CHECKOUT BLOCKS ============ */
/* Cart and Checkout share the same @woocommerce/blocks component classes,
   so this one pass styles both consistently with the rest of the theme. */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-checkout__form select,
.wc-block-components-address-form select {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  border-color: var(--color-herbarium-dim) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-checkout__form select:focus {
  border-color: var(--color-clay) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--color-clay) !important;
}

.wc-block-checkout__create-account {
  flex-wrap: wrap;
}

.chromaflora-account-note {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-soil);
  margin: 4px 0 0 34px;
  opacity: 0.8;
  /* .wc-block-components-checkbox sets line-height:0 on itself (to keep the
     checkbox+label row tight) and this note inherits it, collapsing its own
     box to zero height and overlapping whatever sits below — hence the
     explicit line-height above. flex-basis/width force it onto its own line
     instead of sitting as a third item in the checkbox's flex row. */
  flex-basis: 100%;
  width: 100%;
}

.wc-block-components-text-input label {
  font-family: var(--font-body) !important;
}

.wc-block-components-checkbox svg,
.wc-block-components-radio-control__input {
  accent-color: var(--color-clay);
}

.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
  border-color: var(--color-clay) !important;
}

/* Cart & product-page quantity stepper (+/-) */
.wc-block-components-quantity-selector {
  border: 1px solid var(--color-herbarium-dim) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.wc-block-components-quantity-selector__button {
  font-family: var(--font-mono) !important;
  color: var(--color-soil) !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: var(--color-herbarium) !important;
  color: var(--color-clay) !important;
}

.wc-block-components-quantity-selector__input {
  font-family: var(--font-mono) !important;
  color: var(--color-soil) !important;
}

/* Disabled state, used across the site (out-of-stock add-to-cart, place-order while processing) */
.btn:disabled,
.btn[aria-disabled="true"],
button:disabled,
.wc-block-components-button:disabled,
.single_add_to_cart_button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* Order summary panel (Детали заказа) */
.wc-block-components-sidebar,
.wc-block-checkout__sidebar {
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  padding: var(--space-3) !important;
}

.wc-block-components-order-summary-item {
  padding: 12px 0 !important;
  flex-wrap: wrap;
}

/* Sidebar is narrow (~260px); name+prices+total competing in one row
   forced the product name to break mid-word. Give the total price its
   own full-width row below the name instead of squeezing three columns. */
.wc-block-components-order-summary-item__description {
  flex: 1 1 auto;
  min-width: 120px;
}

.wc-block-components-order-summary-item__total-price {
  flex: 1 1 100%;
  margin-top: 6px;
  padding-left: 60px;
}

.wc-block-components-order-summary-item__image {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-herbarium);
}

.wc-block-components-order-summary-item__image img {
  object-fit: contain !important;
  padding: 6px;
  box-sizing: border-box;
}

.wc-block-components-product-name {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  color: var(--color-glasshouse);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--font-body);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  /* Not var(--font-mono) here on purpose — IBM Plex Mono's slashed zero,
     repeated four times in a price like 5,000.00, reads as a strikethrough
     at this size. Plain numerals avoid the ambiguity on the one figure that
     must never look crossed out. */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--color-clay);
}

/* Notices (added-to-cart, no-payment-methods, coupon errors, etc.) */
.wc-block-components-notice-banner {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  border-width: 1px !important;
  align-items: flex-start !important;
}

.wc-block-components-notice-banner.is-error {
  background: rgba(181, 80, 46, 0.08) !important;
  border-color: var(--color-clay) !important;
  color: var(--color-clay-dark) !important;
}

.wc-block-components-notice-banner.is-error svg {
  fill: var(--color-clay) !important;
}

.wc-block-components-notice-banner.is-success {
  background: rgba(142, 155, 124, 0.14) !important;
  border-color: var(--color-sage) !important;
  color: var(--color-success-text) !important;
}

.wc-block-components-notice-banner.is-success svg {
  fill: var(--color-success-icon) !important;
}

.wc-block-components-notice-banner .wc-block-components-button {
  background: var(--color-clay) !important;
  color: var(--color-herbarium) !important;
  border-radius: var(--radius-sm) !important;
}

/* Place-order / checkout buttons already inherit .wp-element-button styling
   from the entry-content rules; this just guarantees full width looks right */
.wc-block-components-checkout-place-order-button--full-width {
  padding: 16px 28px !important;
  font-size: 18px !important;
}

/* Empty cart state */
.wc-block-cart__empty-cart__title {
  font-family: var(--font-display) !important;
  color: var(--color-glasshouse) !important;
}

.wc-block-cart-items th {
  font-family: var(--font-mono);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-sage);
}

/* ============ 404 / SEARCH ============ */
.not-found-search {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
}

.not-found-search__input {
  flex: 1;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 19px;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-soil);
}

.not-found-search__input:focus {
  outline: none;
  border-color: var(--color-clay);
  box-shadow: 0 0 0 1px var(--color-clay);
}

/* ============ MY ACCOUNT ============ */
.woocommerce-MyAccount-navigation {
  float: left;
  width: 220px;
  margin-right: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--color-herbarium-dim);
}

.woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-soil);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--color-clay-dark);
}

.woocommerce-MyAccount-content {
  overflow: hidden;
}

@media (max-width: 780px) {
  .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--space-3);
  }
}

.woocommerce form .form-row label {
  display: block;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-soil);
  margin-bottom: 6px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 19px;
  background: #fff;
  color: var(--color-soil);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--color-clay);
  box-shadow: 0 0 0 1px var(--color-clay);
}

.woocommerce-orders-table,
.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.woocommerce-orders-table th,
.woocommerce-table th {
  font-family: var(--font-mono);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-sage);
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-herbarium-dim);
}

.woocommerce-orders-table td,
.woocommerce-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-herbarium-dim);
}

.woocommerce-message,
.woocommerce-notice--success {
  background: rgba(142, 155, 124, 0.14) !important;
  border-top-color: var(--color-sage) !important;
  color: var(--color-success-text) !important;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.woocommerce-error,
.woocommerce-notice--error {
  background: rgba(181, 80, 46, 0.08) !important;
  border-top-color: var(--color-clay) !important;
  color: var(--color-clay-dark) !important;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.woocommerce-info,
.woocommerce-notice--info {
  border-top-color: var(--color-sage) !important;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-notice--success::before,
.woocommerce-notice--error::before,
.woocommerce-notice--info::before {
  color: inherit !important;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--font-display) !important;
  color: var(--color-glasshouse) !important;
}

.woocommerce-order-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  margin: var(--space-3) 0;
}

.woocommerce-order-overview li {
  font-family: var(--font-body);
  font-size: 18px;
}

.woocommerce-order-overview strong {
  display: block;
  font-family: var(--font-mono);
  color: var(--color-clay);
  margin-top: 2px;
}

/* ============ SCROLL REVEAL ============ */
/* JS adds .reveal on load and .reveal--visible when a block scrolls into
   view (see assets/reveal.js). Everything is already visible without JS —
   this only ever adds motion, never hides content. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ PREMIUM MICRO-INTERACTIONS ============ */
.btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:hover:not(.btn-clay) {
  box-shadow: 0 10px 24px rgba(1, 62, 55, 0.14);
}

.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

.product-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.product-card:hover {
  box-shadow: var(--shadow-lift);
}

.product-card__media img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover .product-card__media img {
  transform: scale(1.045);
}

.product-card__media {
  overflow: hidden;
}

.specimen-tag {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.specimen-tag:hover {
  box-shadow: 10px 12px 0 rgba(1, 62, 55, 0.08);
}

.site-logo,
.header-cart,
.primary-nav a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn,
  .product-card,
  .product-card__media img,
  .specimen-tag {
    transition: none !important;
  }
}

/* ============ CONTACT FORM ============ */
.contact-form {
  max-width: 480px;
  margin-top: var(--space-3);
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__notice {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
}

.contact-form__notice--ok {
  background: rgba(142, 155, 124, 0.18);
  color: var(--color-glasshouse);
}

.contact-form__notice--error {
  background: rgba(181, 80, 46, 0.12);
  color: var(--color-clay-dark);
}

.contact-form__row {
  margin-bottom: var(--space-2);
}

.contact-form__row label {
  display: block;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-soil);
  margin-bottom: 6px;
}

.contact-form__row input,
.contact-form__row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-glasshouse);
}

.contact-form__row input:focus,
.contact-form__row textarea:focus {
  outline: none;
  border-color: var(--color-clay);
  box-shadow: 0 0 0 1px var(--color-clay);
}

/* ============ "ЕСТЬ ВОПРОСЫ" CTA — fills thin info pages with a real,
   working channel instead of leaving a bare page under a short paragraph. */
.info-page-cta {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-herbarium);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-herbarium-dim);
}

.info-page-cta h2 {
  margin-top: 0;
}

/* ============ TYPE SCALE — FIXED, TWO STEPS ============
   Every display size above is a fixed px value, not a fluid clamp against
   the viewport: the owner wants the type and the rhythm between elements
   to read the same on any laptop, rather than resizing as the window
   changes. This block is the single mobile step for those same headings —
   one constant for phones, one for everything else. Nothing in between. */
@media (max-width: 900px) {
  .section__title {
    font-size: 30px;
  }

  .cta-band__title {
    font-size: 32px;
  }

  .page-hero__title {
    font-size: 34px;
  }

  .product-single__title {
    font-size: 30px;
  }

  .story__quote {
    font-size: 24px;
  }

  .related.products > h2 {
    font-size: 26px;
  }

  .entry-content .wp-block-heading:not(h3):not(h4) {
    font-size: 24px;
  }
}

/* ============ СДЭК PVZ MAP (Delivery page) ============ */
.pvz-map {
  margin: var(--space-4) 0;
}

.pvz-map__count {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-glasshouse);
  margin-bottom: var(--space-2);
}

.pvz-map__selected {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-glasshouse);
  background: var(--color-herbarium-dim);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pvz-map__selected-hint {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-soil);
  opacity: 0.85;
}

.pvz-map__pick {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 600;
  color: #fff;
  background: var(--color-clay);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
}

.pvz-map__pick:disabled {
  opacity: 0.6;
  cursor: default;
}

.pvz-map__canvas {
  height: 460px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-herbarium-dim);
  /* Leaflet panes sit at z-index 400-700 and would otherwise punch through
     the sticky header when the page is scrolled. */
  z-index: 1;
}

@media (max-width: 780px) {
  .pvz-map__canvas {
    height: 340px;
  }
}

.pvz-map__cluster {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
}

.pvz-map__cluster::before {
  display: none;
}

.pvz-map__fallback {
  padding: var(--space-3);
  border: 1px dashed var(--color-sage);
  border-radius: var(--radius-sm);
  color: var(--color-glasshouse);
}

/* ============ DELIVERY ROUTE (Delivery page step-by-step) ============ */
.delivery-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--color-glasshouse);
  max-width: 52ch;
}

.delivery-route {
  margin: var(--space-6) 0;
}

.delivery-route__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-glasshouse);
  margin-bottom: var(--space-5);
}

/* Seven steps in one horizontal run, per the design handoff — the dashed
   connector behind the circles is what makes them read as one path. */
.delivery-route__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  position: relative;
}

.delivery-route__list::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  border-top: 2px dashed var(--color-herbarium-dim);
  z-index: 0;
}

.delivery-route__step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 4px;
}

.delivery-route__num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-glasshouse);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-clay);
  border-radius: 50%;
  background: #f3ead2;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.delivery-route__body h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-glasshouse);
  margin-bottom: 8px;
}

.delivery-route__body p {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: #5b6459;
}

@media (max-width: 1100px) {
  .delivery-route__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .delivery-route__list::before {
    display: none;
  }
}

@media (max-width: 780px) {
  .delivery-route__title {
    font-size: 30px;
  }

  .delivery-route__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .delivery-route__num {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

/* ============ ORDER TRACKING (/order-tracking/) ============ */
.track-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--color-glasshouse);
  max-width: 52ch;
  margin-bottom: var(--space-4);
}

/* WooCommerce's own tracking form — unstyled by default, so it arrived
   looking like a bare browser form next to the rest of the site. */
form.woocommerce-form-track-order,
form.track_order {
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 620px;
  margin-bottom: var(--space-5);
}

form.track_order p:first-child {
  color: var(--color-glasshouse);
  opacity: 0.75;
  margin-bottom: var(--space-3);
}

form.track_order .form-row {
  margin-bottom: var(--space-3);
}

form.track_order label {
  display: block;
  font-family: var(--font-mono);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin-bottom: 6px;
}

form.track_order input[type="text"],
form.track_order input[type="email"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-glasshouse);
  background: var(--color-herbarium);
  border: 1px solid var(--color-herbarium-dim);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}

form.track_order input:focus {
  outline: 2px solid var(--color-clay);
  outline-offset: 1px;
}

form.track_order button {
  background: var(--color-clay);
  color: var(--color-herbarium);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: var(--shadow-clay);
  transition: background 0.15s ease, transform 0.15s ease;
}

form.track_order button:hover {
  background: var(--color-clay-dark);
  transform: translateY(-1px);
}

.track-help {
  background: rgba(1, 62, 55, 0.04);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 620px;
}

.track-help h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--color-glasshouse);
  margin-bottom: var(--space-3);
}

.track-help__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.track-help__list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-herbarium-dim);
  color: var(--color-glasshouse);
  opacity: 0.85;
  font-size: 18px;
}

.track-help__list li:last-child {
  border-bottom: 0;
}

.track-help__list b {
  color: var(--color-glasshouse);
  opacity: 1;
}

.track-help__note {
  font-size: 19px;
  color: var(--color-glasshouse);
  opacity: 0.7;
  margin-bottom: var(--space-3);
}

/* ============ CONTACTS: facts + socials ============ */
.contacts-lede {
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-glasshouse);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}

.contacts-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.contacts-fact {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.contacts-fact h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--color-glasshouse);
  margin-bottom: 14px;
}

.contacts-fact--accent {
  background: var(--color-glasshouse);
  border: 2px solid var(--color-clay);
}

.contacts-fact--accent h3,
.contacts-fact--accent p {
  color: var(--color-herbarium) !important;
  opacity: 1;
}

.contacts-fact p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-glasshouse);
  opacity: 0.8;
}

.contacts-social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: var(--space-3) 0 var(--space-6);
}

.contacts-social__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  color: var(--color-glasshouse);
  background: #fff;
  border: 2px solid var(--color-glasshouse);
  border-radius: 999px;
  padding: 12px 26px;
  transition: background 0.15s ease, color 0.15s ease;
}

.contacts-social__link:hover {
  background: var(--color-glasshouse);
  color: var(--color-herbarium);
}

/* Socials in the footer — same links, present on every page */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.footer-social a {
  font-size: 18px;
  text-decoration: none;
  color: var(--color-herbarium-dim);
  border: 1px solid rgba(255, 239, 179, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.footer-social a:hover {
  color: var(--color-herbarium);
  border-color: var(--color-herbarium);
}

/* ============ FEATURED STRIP — bigger title, per 2026-08 design handoff ==== */
.featured-strip .section__title {
  font-size: 48px;
  font-weight: 800;
  max-width: none;
}

/* The four cards run edge to edge rather than sitting inside the 1180px
   text container, so each one is as large as the page allows. */
.featured-strip > .container {
  max-width: none;
  padding-left: clamp(20px, 3vw, 56px);
  padding-right: clamp(20px, 3vw, 56px);
}

.featured-strip .product-grid--four {
  gap: 24px;
}

.featured-strip .product-card__title {
  font-size: 26px;
}

.featured-strip .product-card__price {
  font-size: 24px;
}

/* ============ CART DRAWER ============ */
.cf-cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 20, 0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cf-cart-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cf-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  max-width: 92vw;
  background: var(--color-herbarium);
  z-index: 201;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.cf-cart-drawer.is-open {
  transform: translateX(0);
}

.cf-cart-drawer__head {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-herbarium-dim);
  flex-shrink: 0;
}

.cf-cart-drawer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-glasshouse);
}

.cf-cart-drawer__close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-sage);
  line-height: 1;
}

.cf-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

/* Reskin WooCommerce's default mini-cart markup (ul.woocommerce-mini-cart
   etc.) to match the site — real WC template/behavior, cosmetic override only. */
.cf-cart-drawer__body .widget_shopping_cart_content > p.woocommerce-mini-cart__empty-message {
  text-align: center;
  color: var(--color-sage);
  font-size: 14px;
  padding: 60px 0;
}

.cf-cart-drawer__body ul.woocommerce-mini-cart {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-cart-drawer__body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-herbarium-dim);
  position: relative;
}

.cf-cart-drawer__body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.cf-cart-drawer__body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a:not(.remove) {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-glasshouse);
  text-decoration: none;
  display: block;
}

.cf-cart-drawer__body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item .quantity {
  font-size: 13px;
  color: var(--color-sage);
  display: block;
  margin-top: 2px;
}

.cf-cart-drawer__body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 14px;
  right: 0;
  color: var(--color-terracotta) !important;
  font-size: 18px;
  text-decoration: none;
  background: none;
  line-height: 1;
}

.cf-cart-drawer__body .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-herbarium-dim);
  margin-top: 8px;
}

.cf-cart-drawer__body .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-cart-drawer__body .woocommerce-mini-cart__buttons a {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  border-radius: 10px;
}

.cf-cart-drawer__body .woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
  background: transparent;
  border: 1px solid var(--color-herbarium-dim);
  color: var(--color-glasshouse);
}

.cf-cart-drawer__body .woocommerce-mini-cart__buttons a.checkout {
  background: var(--color-clay);
  color: var(--color-glasshouse-dark);
}

/* ============ DELIVERY / PAYMENT page blocks — ported 1:1 from the
   CodeDesign handoff (perk row, care band, payment split, trust row).
   Type sizes raised over the mockup's 13-15px per the owner's standing
   "no small text anywhere on the site" rule. ==================== */
.perk-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: var(--space-4) 0 var(--space-5);
}

.perk-card {
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: 0 8px 22px -16px rgba(15, 42, 30, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.perk-card__icon {
  width: 34px;
  height: 34px;
  display: block;
}

.perk-card__icon svg {
  width: 100%;
  height: 100%;
}

.perk-card__label {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-glasshouse);
}

.care-band {
  background: var(--color-glasshouse);
  border-radius: 18px;
  padding: 34px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: var(--space-5) 0;
  box-shadow: 0 20px 44px -20px rgba(18, 51, 36, 0.5);
}

.care-band__title {
  color: var(--color-herbarium);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 21px;
}

.care-band__items {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.care-band__items span {
  color: #dbe6de;
  font-size: 17px;
  font-weight: 700;
}

.pay-split {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(15, 42, 30, 0.2);
  border: 1px solid var(--color-herbarium-dim);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  margin: var(--space-4) 0;
}

.pay-split__aside {
  background: var(--color-glasshouse);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 34px 30px;
}

.pay-split__badge {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pay-split__badge-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-clay);
  color: var(--color-glasshouse);
  font-weight: 800;
  font-size: 22px;
  display: grid;
  place-items: center;
}

.pay-split__badge-text {
  color: var(--color-herbarium);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.3;
}

.pay-split__aside-note {
  color: #b9c6bc;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.pay-split__main {
  padding: 34px;
}

.pay-split__main h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--color-glasshouse);
}

.pay-split__main > p {
  font-size: 17px;
  font-weight: 600;
  color: #5b6459;
  line-height: 1.6;
  margin: 0 0 24px;
}

.pay-secure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pay-secure__item {
  text-align: center;
}

.pay-secure__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f3ead2;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}

.pay-secure__icon svg {
  width: 22px;
  height: 22px;
}

.pay-secure__label {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-glasshouse);
}

.pay-help {
  background: var(--color-glasshouse);
  border-radius: 18px;
  padding: 34px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: var(--space-4) 0;
}

.pay-help__title {
  color: var(--color-herbarium);
  font-weight: 800;
  font-size: 21px;
  margin-bottom: 4px;
}

.pay-help__sub {
  color: #b9c6bc;
  font-size: 17px;
  font-weight: 600;
}

.pay-help__contacts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.pay-help__contacts a {
  color: var(--color-herbarium);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 246, 236, 0.4);
}

.pay-help__contacts a:hover {
  color: var(--color-clay);
  border-color: var(--color-clay);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
  margin: var(--space-5) 0;
}

.trust-row__title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 8px;
  color: var(--color-glasshouse);
}

.trust-row__desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #5b6459;
}

@media (max-width: 900px) {
  .perk-row,
  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .pay-split {
    grid-template-columns: 1fr;
  }

  .pay-secure {
    grid-template-columns: repeat(2, 1fr);
  }

  .care-band,
  .pay-help {
    padding: 26px 24px;
  }
}

@media (max-width: 520px) {
  .perk-row,
  .trust-row {
    grid-template-columns: 1fr;
  }
}

/* ============ HOME — "О нас" teaser, real copy from /about/, large bold
   storytelling per the owner's "no small text" rule ==================== */
.about-teaser__head {
  max-width: 900px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.about-teaser__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-clay-dark);
  margin-bottom: 14px;
}

.about-teaser__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.2;
  color: var(--color-glasshouse);
  margin: 0;
}

.about-teaser__title em {
  font-style: normal;
  color: var(--color-clay-dark);
}

.about-teaser__head {
  max-width: 900px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.about-teaser__head .about-teaser__eyebrow {
  text-align: center;
}

.about-teaser__head .about-teaser__title {
  font-size: clamp(36px, 4.4vw, 56px);
  margin: 0;
}

.about-teaser__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-5);
  align-items: center;
}

.about-teaser__photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(15, 42, 30, 0.35);
  aspect-ratio: 4 / 5;
}

.about-teaser__photo img,
.about-carousel__slide {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel: all slides stacked, only .is-active visible — crossfade on
   class swap (assets/about-carousel.js), not a full-page reflow. */
.about-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.about-carousel__slide.is-active {
  opacity: 1;
}

.about-teaser__points {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: var(--space-4);
}

/* Point rows are now real cards (white, radius, shadow) instead of plain
   text with a left rule — reads as three distinct claims, not one paragraph. */
.about-teaser__point {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-herbarium-dim);
  border-radius: 16px;
  padding: 22px 26px;
  border-left: 4px solid var(--color-clay);
  box-shadow: 0 10px 26px -18px rgba(15, 42, 30, 0.25);
}

.about-teaser__point-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  color: var(--color-glasshouse);
}

.about-teaser__point-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-soil);
}

@media (max-width: 900px) {
  .about-teaser__grid {
    grid-template-columns: 1fr;
  }

  .about-teaser__photo {
    max-width: 420px;
    margin: 0 auto;
  }
}