/* SortBase — Organic Tech redesign */

:root {
  --bg: #FAF3DC;
  --bg-tint: #F2E8C2;
  --paper: #FFFCF1;
  --ink: #1B2316;
  --ink-2: #3B4632;
  --muted: #6E7763;
  --line: #E5DBB6;
  --line-soft: #EFE8C9;

  --leaf: #4E8B2E;
  --leaf-deep: #25401A;
  --leaf-soft: #C7DD93;
  --leaf-tint: #DFEAB6;
  --leaf-bright: #8FBE2E;
  --leaf-meadow: #6FA73A;

  --sun: #F2C24A;
  --sun-soft: #F8DF92;
  --sun-deep: #C98B1C;

  --tomato: #C84A2E;
  --carrot: #E08433;
  --berry: #8E3B5C;
  --root: #6F4A2E;
  --sky: #7FA4B8;
  --sky-soft: #C9DDE2;

  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -12px rgba(40,52,30,0.18);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.02), 0 24px 60px -28px rgba(40,52,30,0.28);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(242,194,74,0.32), transparent 60%),
    linear-gradient(180deg, #FCEFBC 0%, #FAF3DC 22%, #FAF3DC 60%, #E7E5B6 92%, #C7DD93 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
}
.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf-deep);
}
.label { font-size: 13px; color: var(--muted); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; }

/* ---------- layout ---------- */
.shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
}
.row { display: flex; gap: 16px; align-items: center; }
.col { display: flex; flex-direction: column; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0; z-index: 50;
  background: rgba(252, 239, 188, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand .dot {
  display: inline-block;
  width: 11px; height: 11px;
  background: var(--sun);
  border-radius: 50%;
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgba(242,194,74,0.25);
}

/* live pulse on hero meta */
.grow-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--leaf-deep);
  background: rgba(143,190,46,0.18);
  border: 1px solid rgba(78,139,46,0.25);
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.fresh-head .eyebrow { text-transform: none; letter-spacing: 0; }
.grow-pill .live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--leaf);
  box-shadow: 0 0 0 0 rgba(78,139,46,0.5);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78,139,46,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(78,139,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,139,46,0); }
}
.hero-meta .num .plus { color: var(--leaf); font-size: 0.6em; vertical-align: 0.15em; }
.brand small {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav {
  display: flex; gap: 28px; align-items: center;
  margin-left: auto;
  font-size: 14px; font-weight: 500;
}
.nav a {
  position: relative;
  padding: 8px 0;
  color: var(--ink-2);
  transition: color .15s;
}
.nav a:hover { color: var(--leaf-deep); }
.nav a.is-active { color: var(--leaf-deep); }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--leaf-bright);
}
.search-mini {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: 280px;
  color: var(--muted); font-size: 13px;
  cursor: text;
  transition: border-color .15s;
}
.search-mini:hover { border-color: var(--leaf); }
.search-mini kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-tint);
  border-radius: 4px;
  color: var(--muted);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 44px;
  border-radius: var(--r-pill);
  font-weight: 500; font-size: 14px;
  border: 1px solid transparent;
  transition: transform .12s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--leaf-deep); color: #F7F2E8;
}
.btn-primary:hover { background: #233a1f; }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-leaf {
  background: var(--sun); color: var(--ink);
}
.btn-leaf:hover { background: #f5cf5d; }
.btn-sun {
  background: var(--sun); color: var(--ink);
  box-shadow: 0 6px 20px -8px rgba(201,139,28,0.6);
}
.btn-sun:hover { background: #f5cf5d; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 40px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(242,194,74,0.55) 0%, rgba(242,194,74,0.25) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: stretch;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 116px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  color: var(--leaf-deep);
  background: linear-gradient(180deg, var(--leaf-meadow) 0%, var(--leaf-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lede {
  margin-top: 28px;
  max-width: 480px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  max-width: 540px;
}
.hero-meta .num {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
}
.hero-meta .lbl {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* hero search */
.hero-search {
  margin-top: 36px;
  display: flex; align-items: center; gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow-soft);
  max-width: 540px;
}
.hero-search input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-ui); font-size: 16px;
  color: var(--ink); padding: 14px 6px;
  outline: none;
}
.hero-search input::placeholder { color: var(--muted); }
.hero-search .btn { height: 44px; }
.hero-search-tags {
  display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;
  font-size: 12px;
}
.hero-search-tags .tag {
  padding: 6px 10px;
  background: rgba(255,252,241,0.7);
  color: var(--leaf-deep);
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.hero-search-tags .tag:nth-child(2n) { background: rgba(248,223,146,0.5); border-color: rgba(201,139,28,0.2); }
.hero-search-tags .tag:hover { border-color: var(--leaf); }

/* hero right — collage */
.hero-collage {
  position: relative;
  min-height: 560px;
}
.hero-collage .tile {
  position: absolute;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
}
.hero-collage .tile .vphoto { width: 100%; height: 100%; display: block; }
.hero-collage .tile .badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: rgba(255,255,255,0.94);
  padding: 6px 10px; border-radius: var(--r-pill);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--leaf-deep); font-weight: 600;
}
.hero-collage .tile img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-collage .t1 { top: 0; right: 0; width: 62%; height: 360px; }
.hero-collage .t2 { top: 280px; left: 0; width: 46%; height: 240px; transform: rotate(-3deg); }
.hero-collage .t3 { top: 420px; right: 30px; width: 38%; height: 140px; transform: rotate(2deg); }

.hero-vine { position: absolute; pointer-events: none; opacity: 0.5; }
.hero-vine.left  { top: 80px; left: -60px; width: 220px; }
.hero-vine.right { bottom: -40px; right: -40px; width: 240px; transform: scaleX(-1); }

/* ---------- ticker ---------- */
.ticker {
  margin-top: 48px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--sun-soft) 0%, var(--leaf-soft) 100%);
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  gap: 56px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  animation: ticker 60s linear infinite;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 10px; }
.ticker-track .pip { color: var(--sun-deep); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- section ---------- */
.section { padding: 96px 0; }
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 48px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 8px 0 0;
}
.section-head h2 em { font-style: italic; color: var(--leaf-deep); }
.section-head .sub { color: var(--muted); max-width: 420px; }
.section-head .right { text-align: right; color: var(--muted); }

/* ---------- seasonal card ---------- */
.season {
  position: relative;
  background: linear-gradient(160deg, #2F4A24 0%, #1B2C12 100%);
  color: #F1ECDB;
  border-radius: var(--r-lg);
  padding: 56px 64px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.season::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 92% 8%, rgba(242,194,74,0.45), transparent 35%),
    radial-gradient(circle at 8% 95%, rgba(143,190,46,0.25), transparent 50%);
  pointer-events: none;
}
.season h3 {
  font-family: var(--font-display);
  font-size: 72px; line-height: 1; margin: 0;
  font-weight: 400; letter-spacing: -0.02em;
}
.season h3 em { font-style: italic; color: var(--leaf-bright); }
.season .moon-card {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r);
  padding: 24px;
}
.season .moon-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-top: 16px;
}
.season .moon-grid .d {
  aspect-ratio: 1;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-mono);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  position: relative;
}
.season .moon-grid .d.good {
  background: rgba(149,193,31,0.22);
  color: #DCEDA8;
}
.season .moon-grid .d.bad {
  color: rgba(255,255,255,0.25);
  text-decoration: line-through;
}
.season .moon-grid .d.today {
  outline: 1.5px solid var(--leaf-bright);
  color: #fff;
}
.season .moon-legend {
  display: flex; gap: 16px; margin-top: 14px;
  font-size: 11px; color: rgba(255,255,255,0.6);
}
.season .moon-legend .sw {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}

/* ---------- culture chips grid ---------- */
/* Заголовок витринной секции (подзаголовок, визуально второстепенный — не конкурирует с H1/H2) */
.cat-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 32px 0 14px;
}
.cat-head:first-of-type { margin-top: 8px; }
.cat-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.cat-head h3 a { color: inherit; text-decoration: none; }
.cat-head h3 a:hover { color: var(--leaf-deep); text-decoration: underline; }
.cat-head .label { color: var(--muted); font-size: 13px; }
.cultures {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.culture-chip {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  min-height: 152px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .18s, border-color .15s, box-shadow .18s, background .18s;
  cursor: pointer;
  overflow: hidden;
}
.culture-chip:nth-child(7n+1) { background: linear-gradient(165deg, #FFFCF1 0%, #FBEAB2 100%); }
.culture-chip:nth-child(7n+3) { background: linear-gradient(165deg, #FFFCF1 0%, #E0EFC0 100%); }
.culture-chip:nth-child(7n+5) { background: linear-gradient(165deg, #FFFCF1 0%, #F8DCC4 100%); }
/* Сквозная тонировка по всем секциям (как на утренней плоской сетке) — те же 3 тона, без перезапуска на секциях. Перебивает nth-child. */
.culture-chip.ct0 { background: var(--paper); }
.culture-chip.ct1 { background: linear-gradient(165deg, #FFFCF1 0%, #FBEAB2 100%); }
.culture-chip.ct3 { background: linear-gradient(165deg, #FFFCF1 0%, #E0EFC0 100%); }
.culture-chip.ct5 { background: linear-gradient(165deg, #FFFCF1 0%, #F8DCC4 100%); }
.culture-chip:hover {
  transform: translateY(-3px);
  border-color: var(--leaf);
  box-shadow: var(--shadow-soft);
}
.culture-chip .illus {
  width: 56px; height: 56px;
  color: var(--leaf-deep);
}
.culture-chip .name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.culture-chip .count {
  font-size: 12px; color: var(--muted);
  font-family: var(--font-mono);
}
.culture-chip.is-season::after {
  content: "сезон";
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--sun); color: var(--ink);
  padding: 3px 8px; border-radius: var(--r-pill);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(242,194,74,0.5);
}

/* ---------- sort cards ---------- */
.sorts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sort-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .15s;
  cursor: pointer;
  display: flex; flex-direction: column;
}
.sort-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--leaf);
}
.sort-card .photo {
  position: relative;
  aspect-ratio: 1.2;
  height: auto;   /* перебить .vphoto{height:100%}: иначе в grid-stretch ряду фото тянется на остаток высоты карточки → разная высота. Высоту задаёт только aspect-ratio */
  overflow: hidden;
}
/* Иконка-плейсхолдер — вне потока (центр), иначе её %-высота ломает aspect-ratio → разная высота карточек */
.sort-card .photo svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.sort-card .photo .badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  padding: 4px 8px; border-radius: var(--r-pill);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--leaf-deep); font-weight: 600;
}
.sort-card .photo .save {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.88);
  border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background .15s;
}
.sort-card .photo .save:hover { background: #fff; color: var(--tomato); }
.sort-card .photo .save.saved { color: var(--tomato); background: #fff; }
.sort-card .body { padding: 16px 18px 18px; }
.sort-card .culture { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sort-card h4 {
  margin: 6px 0 12px;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400; line-height: 1.05;
  letter-spacing: -0.01em;
}
.sort-card .specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  font-size: 12px; color: var(--ink-2);
  margin-top: 6px; padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.sort-card .specs .k { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; }
.sort-card .specs .v { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

/* ---------- veg photo placeholder ---------- */
.vphoto {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 84px;
  position: relative;
  overflow: hidden;
}
.vphoto::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), transparent 60%);
}
.vphoto::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.4;
}
.vphoto-tomato   { background: linear-gradient(135deg, #E0735A 0%, #C84A2E 100%); }
.vphoto-cucumber { background: linear-gradient(135deg, #D6E8B6 0%, #6B9D3A 100%); }
.vphoto-pepper   { background: linear-gradient(135deg, #FFD8A8 0%, #E08436 100%); }
.vphoto-potato   { background: linear-gradient(135deg, #E9D4A6 0%, #A07B4A 100%); }
.vphoto-eggplant { background: linear-gradient(135deg, #C8B0D2 0%, #5B3A6E 100%); }
.vphoto-cabbage  { background: linear-gradient(135deg, #D8E5C0 0%, #7A9D5E 100%); }
.vphoto-carrot   { background: linear-gradient(135deg, #F8C290 0%, #D67226 100%); }
.vphoto-beet     { background: linear-gradient(135deg, #D9A3B3 0%, #7E2645 100%); }
.vphoto-radish   { background: linear-gradient(135deg, #F4B8B0 0%, #C4423A 100%); }
.vphoto-onion    { background: linear-gradient(135deg, #F0DEB8 0%, #C49B58 100%); }
.vphoto-garlic   { background: linear-gradient(135deg, #F0E8D2 0%, #C9B888 100%); }
.vphoto-dill     { background: linear-gradient(135deg, #D8E8AE 0%, #5B8C3E 100%); }
.vphoto-parsley  { background: linear-gradient(135deg, #C8E0A6 0%, #3F7A30 100%); }
.vphoto-salad    { background: linear-gradient(135deg, #DEEBC0 0%, #84A852 100%); }
.vphoto-berry    { background: linear-gradient(135deg, #F5B8B8 0%, #C4313E 100%); }
.vphoto-pumpkin  { background: linear-gradient(135deg, #F9C589 0%, #D27619 100%); }
.vphoto-zucchini { background: linear-gradient(135deg, #DDE8B6 0%, #7BA541 100%); }
.vphoto-pear        { background: linear-gradient(135deg, #F2E89A 0%, #A8A52A 100%); }
.vphoto-apple       { background: linear-gradient(135deg, #F2856E 0%, #C8102E 100%); }
.vphoto-cherry      { background: linear-gradient(135deg, #A33A57 0%, #5C0F2A 100%); }
.vphoto-sweetcherry { background: linear-gradient(135deg, #F58A6E 0%, #E03A4E 100%); }
.vphoto-plum        { background: linear-gradient(135deg, #9A92C8 0%, #3B2E6E 100%); }
.vphoto-blueberry   { background: linear-gradient(135deg, #86A2D6 0%, #36529A 100%); }
.vphoto-honeyberry  { background: linear-gradient(135deg, #6E78B8 0%, #2A2E66 100%); }
.vphoto-gooseberry  { background: linear-gradient(135deg, #D8DE7C 0%, #7E9A30 100%); }
.vphoto-blackberry  { background: linear-gradient(135deg, #5B5270 0%, #1F1A2E 100%); }
.vphoto-grape       { background: linear-gradient(135deg, #A06FB0 0%, #5B2080 100%); }
.vphoto-apricot     { background: linear-gradient(135deg, #FAC9A0 0%, #E97B4E 100%); }
.vphoto-peach       { background: linear-gradient(135deg, #FBD4C0 0%, #F0856E 100%); }
/* Цветы (Tier 4) — пастельно-насыщенные, светлее ягод/плодов */
.vphoto-rose          { background: linear-gradient(135deg, #F2A0C0 0%, #C41E63 100%); }
.vphoto-hydrangea     { background: linear-gradient(135deg, #BFD0F0 0%, #6E84C8 100%); }
.vphoto-tulip         { background: linear-gradient(135deg, #F4907A 0%, #D81E3F 100%); }
.vphoto-lily          { background: linear-gradient(135deg, #FBB07A 0%, #F2624E 100%); }
.vphoto-iris          { background: linear-gradient(135deg, #9D8FD6 0%, #4332A0 100%); }
.vphoto-clematis      { background: linear-gradient(135deg, #B98FD8 0%, #7322A8 100%); }
.vphoto-peony         { background: linear-gradient(135deg, #FAD0DC 0%, #E87FA6 100%); }
.vphoto-chrysanthemum { background: linear-gradient(135deg, #F0C266 0%, #9A5A1E 100%); }
.vphoto-dahlia        { background: linear-gradient(135deg, #D86A86 0%, #8E123C 100%); }
.vphoto-phlox         { background: linear-gradient(135deg, #D6B8E6 0%, #8E5AB8 100%); }
.vphoto-hosta         { background: linear-gradient(135deg, #A6CABE 0%, #2A6E5C 100%); }
.vphoto-lilac         { background: linear-gradient(135deg, #9A7FCB 0%, #B57EDC 55%, #6C5CA6 100%); }
/* хвойные / декор-кустарники / орехоплодные / ягодная лиана (новый набор 24.07; финальные тона — по conifer-decor-icons-brief.md) */
.vphoto-thuja         { background: linear-gradient(135deg, #A7CBB0 0%, #2E6B45 100%); }
.vphoto-spruce        { background: linear-gradient(135deg, #9FC0D2 0%, #2C5A7A 100%); }
.vphoto-juniper       { background: linear-gradient(135deg, #AEC2A6 0%, #47664F 100%); }
.vphoto-spirea        { background: linear-gradient(135deg, #F4C2D4 0%, #C4527E 100%); }
.vphoto-barberry      { background: linear-gradient(135deg, #C98C9E 0%, #7E2438 100%); }
.vphoto-hazelnut      { background: linear-gradient(135deg, #DCC59E 0%, #8A6A3A 100%); }
.vphoto-actinidia     { background: linear-gradient(135deg, #CDE89C 0%, #6B9D3A 100%); }
.vphoto-cornel        { background: linear-gradient(135deg, #EE9078 0%, #C43A2E 100%); }

/* ---------- pill bar ---------- */
.pill-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pill:hover { border-color: var(--leaf); }
.pill.is-active {
  background: var(--leaf-deep);
  color: #F1ECDB;
  border-color: var(--leaf-deep);
}
.pill .count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.55;
  margin-left: 2px;
}

/* ---------- articles ---------- */
.articles {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
}
.article-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.article-card .cover { aspect-ratio: 16/10; }
.article-card.is-feature .cover { aspect-ratio: 16/11; }
.article-card .body { padding: 20px 22px 24px; }
.article-card .cat {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--leaf-deep); font-weight: 600;
}
.article-card h4 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400; margin: 8px 0 10px;
  letter-spacing: -0.01em; line-height: 1.05;
}
.article-card.is-feature h4 { font-size: 36px; }
.article-card p { color: var(--muted); font-size: 14px; margin: 0; }
.article-card .meta {
  margin-top: 14px; font-size: 12px; color: var(--muted);
  display: flex; gap: 10px; align-items: center;
}

/* ---------- glossary / Article-лендинг (clematis-gruppy-obrezki, vidy-gortenzii) ---------- */
.article-body { max-width: 860px; line-height: 1.7; font-size: 17px; color: var(--ink); }
.article-body .lead { font-size: 19px; line-height: 1.6; color: var(--ink); }
.article-body h2 {
  margin: 38px 0 12px; font-size: 25px; line-height: 1.25; color: var(--leaf-deep);
  letter-spacing: -0.01em;
}
.article-body h3 { margin: 22px 0 8px; font-size: 19px; color: var(--ink); }
.article-body p { margin: 0 0 14px; }
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 16px; }
.article-body li { margin: 6px 0; }
.article-body a { color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--leaf); }
.article-body .eeat { color: var(--muted); }

.article-body table {
  border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px;
}
.article-body th, .article-body td {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.article-body th { background: var(--leaf-tint); font-weight: 600; color: var(--leaf-deep); }
.article-body tbody tr:nth-child(even) td { background: var(--line-soft); }

/* навигация по хабам видов/групп */
.group-nav { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0; }
.group-nav-card {
  flex: 1 1 200px; min-width: 180px;
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card, #fff); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.group-nav-card:hover {
  transform: translateY(-2px); border-color: var(--leaf-soft);
  box-shadow: var(--shadow-soft); text-decoration: none;
}
.group-nav-card b { color: var(--leaf-deep); font-size: 16px; }
.group-nav-card span { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* FAQ */
.article-body .faq { margin-top: 36px; }
.faq-item {
  padding: 16px 0; border-top: 1px solid var(--line-soft);
}
.faq-item h3 { margin: 0 0 6px; font-size: 17px; color: var(--leaf-deep); }
.faq-item p { margin: 0; color: var(--ink-2); }

/* ---------- footer / newsletter ---------- */
.fresh-band {
  margin-top: 96px;
  padding: 72px 0 80px;
  background:
    linear-gradient(180deg, rgba(143,190,46,0.16) 0%, rgba(111,167,58,0.30) 100%),
    #E7EFC2;
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.fresh-band::after {
  content: "";
  position: absolute;
  left: -100px; top: -120px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,194,74,0.5), transparent 70%);
  pointer-events: none;
}
.fresh-head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  margin-bottom: 36px; position: relative; z-index: 1;
}
.fresh-head h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 56px; line-height: 1; margin: 8px 0 0;
  letter-spacing: -0.02em;
}
.fresh-head h3 em { font-style: italic; color: var(--leaf-deep); }
.fresh-head .sub { color: var(--ink-2); max-width: 380px; margin-top: 6px; }
.fresh-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative; z-index: 1;
}
.fresh-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .15s;
}
.fresh-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--leaf); }
.fresh-card .ava {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
}
.fresh-card .ava .vphoto { font-size: 0; }
.fresh-card .culture { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fresh-card h5 {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  margin: 2px 0 0; letter-spacing: -0.01em; line-height: 1.05;
}
.fresh-card .when { font-family: var(--font-mono); font-size: 11px; color: var(--leaf); margin-top: 4px; }
.fresh-card .new-dot {
  position: absolute; top: 12px; right: 12px;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--leaf-deep); background: var(--sun);
  padding: 3px 7px; border-radius: var(--r-pill);
}
.newsletter .inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
}
.newsletter h3 {
  font-family: var(--font-display);
  font-size: 60px; line-height: 1; margin: 0;
  font-weight: 400; letter-spacing: -0.02em;
}
.newsletter h3 em { font-style: italic; color: var(--leaf-deep); }
.newsletter .sub { color: var(--ink-2); margin-top: 16px; max-width: 420px; }
.nl-input {
  display: flex; gap: 6px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-top: 24px; max-width: 440px;
}
.nl-input input { flex: 1; border: 0; outline: none; padding: 12px 18px; background: transparent; font-size: 15px; }

footer.foot {
  background: var(--ink);
  color: #BFC2B6;
  padding: 64px 0 40px;
}
footer.foot .brand { color: #F2EBD7; }
footer.foot .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
footer.foot h5 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8A8C82; margin: 0 0 16px;
}
footer.foot h5 a { color: inherit; text-decoration: none; }
footer.foot h5 a:hover { color: var(--leaf-bright); text-decoration: underline; }
footer.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
footer.foot ul a { color: #D8DBCE; }
footer.foot ul a:hover { color: var(--leaf-bright); }
footer.foot .legal {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between;
  font-size: 12px; color: #8A8C82;
}
/* footer — мобильная раскладка (фикс горизонтального переполнения, 20.06) */
@media (max-width: 860px) {
  footer.foot .grid { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
}
@media (max-width: 560px) {
  footer.foot .grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
  footer.foot .legal { flex-direction: column; gap: 6px; }
}

/* ===========================================================
   CULTURE PAGE
   =========================================================== */
.culture-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--line);
}
.crumbs {
  font-size: 12px; color: var(--muted); letter-spacing: 0.06em;
  display: flex; gap: 8px; align-items: center;
}
.crumbs a:hover { color: var(--leaf-deep); }
.culture-title {
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
}
.culture-title h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 96px; line-height: 0.95; margin: 0;
  letter-spacing: -0.02em;
}
.culture-title h1 em { font-style: italic; color: var(--leaf-deep); }
.culture-title .count {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--leaf-tint); color: var(--leaf-deep);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.culture-title .lede {
  max-width: 460px; color: var(--muted); margin-top: 8px;
}
.culture-care { max-width: 760px; }
.culture-care > :first-child { margin-top: 0; }
.culture-care h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.15; letter-spacing: -0.01em;
  margin: 30px 0 10px; color: var(--ink);
}
.culture-care p { color: var(--ink); line-height: 1.7; margin: 0 0 14px; }
.culture-care ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.7; }
.culture-care li { margin-bottom: 6px; }

.culture-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  padding: 40px 0 96px;
}

.filters {
  position: sticky; top: 80px; align-self: start;
}
.filter-group {
  padding: 20px 0;
  border-bottom: 1px dashed var(--line);
}
.filter-group:first-child { padding-top: 0; }
.filter-group h5 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.filter-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px; color: var(--ink-2);
  cursor: pointer;
}
.filter-row:hover { color: var(--leaf-deep); }
.filter-row .cnt { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.filter-row.is-checked { color: var(--leaf-deep); font-weight: 500; }
.filter-row .cx {
  width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--line);
  margin-right: 10px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.filter-row.is-checked .cx { background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff; }

.filter-range {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px;
}
.filter-range .track {
  height: 4px; background: var(--line); border-radius: 2px;
  position: relative;
}
.filter-range .fill {
  position: absolute; left: 18%; right: 22%; top: 0; bottom: 0;
  background: var(--leaf); border-radius: 2px;
}
.filter-range .knob {
  position: absolute; top: 50%; width: 14px; height: 14px;
  background: var(--paper); border: 2px solid var(--leaf-deep);
  border-radius: 50%; transform: translate(-50%, -50%);
}

.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.results-bar .applied {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.applied .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--leaf-tint);
  color: var(--leaf-deep);
  padding: 4px 8px 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
}
.applied .chip button { all: unset; cursor: pointer; opacity: 0.6; padding: 0 4px; }
.applied .chip button:hover { opacity: 1; }

.results-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* ===========================================================
   SORT DETAIL
   =========================================================== */
.sort-hero {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
  padding: 48px 0;
}
.sort-hero .gallery {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sort-hero .gallery .thumbs {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; gap: 8px;
}
.sort-hero .gallery .thumbs .th {
  width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--paper);
}
.sort-hero .gallery .thumbs .th.is-active { border-color: #fff; box-shadow: 0 0 0 2px var(--leaf-deep); }

.sort-info .crumbs { margin-bottom: 16px; }
.sort-info .culture-tag {
  display: inline-block;
  background: var(--leaf-tint); color: var(--leaf-deep);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-weight: 600;
}
.sort-info h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 88px; line-height: 0.95; margin: 14px 0 12px;
  letter-spacing: -0.02em;
}
.sort-info h1 em { font-style: italic; color: var(--leaf-deep); }
.sort-info .lede {
  font-size: 17px; color: var(--ink-2); max-width: 520px;
}

.kv-row {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; margin-top: 28px;
  border-top: 1px solid var(--line);
}
.kv {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 16px;
}
.kv:nth-child(odd) { padding-right: 16px; }
.kv:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.kv .k {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); flex-shrink: 0; min-width: 110px;
}
.kv .v {
  font-family: var(--font-display); font-size: 22px;
  line-height: 1; color: var(--ink);
}

.actions-row { margin-top: 28px; display: flex; gap: 12px; }

.tabs {
  display: flex; gap: 24px; border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.tabs button {
  all: unset; cursor: pointer; padding: 14px 0;
  font-size: 14px; font-weight: 500; color: var(--muted);
  position: relative;
}
.tabs button.is-active { color: var(--ink); }
.tabs button.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--leaf-bright);
}

/* timeline / calendar */
.calendar {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
}
.cal-months {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: 16px;
}
.cal-months .m {
  position: relative;
  padding: 12px 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--bg-tint);
}
.cal-months .m .bars {
  position: absolute; left: 6px; right: 6px; top: 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-months .m .bar { height: 3px; border-radius: 2px; background: var(--line); }
.cal-months .m .bar.seed   { background: #C49B58; }
.cal-months .m .bar.sprout { background: var(--leaf-bright); }
.cal-months .m .bar.plant  { background: var(--leaf); }
.cal-months .m .bar.harvest { background: var(--tomato); }
.cal-legend {
  display: flex; gap: 20px; font-size: 12px; color: var(--muted);
  margin-top: 16px; flex-wrap: wrap;
}
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg .sw { width: 14px; height: 4px; border-radius: 2px; }

.agro-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.agro-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 24px;
}
.agro-card .num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.12em;
}
.agro-card h5 {
  font-family: var(--font-display); font-size: 28px; font-weight: 400;
  margin: 6px 0 12px; letter-spacing: -0.01em;
}
.agro-card p { color: var(--ink-2); margin: 0; font-size: 14px; }
.agro-card .icon { color: var(--leaf-deep); margin-bottom: 14px; }

/* botanical illustration container */
.illus-svg { display: block; }

/* utility */
.divider { height: 1px; background: var(--line); margin: 64px 0; }

@media (max-width: 1100px) {
  .shell { padding: 0 24px; }
  .cultures { grid-template-columns: repeat(4, 1fr); }
  .sorts-grid, .results-grid, .articles { grid-template-columns: repeat(2, 1fr); }
  .hero-grid, .season, .sort-hero, .newsletter .inner, .culture-body, .culture-title { grid-template-columns: 1fr; gap: 32px; }
  .hero h1, .sort-info h1, .culture-title h1 { font-size: 64px; }
}


/* ============================================================
   FLASK PORT ADDITIONS — real photos, tabs, accordion, mobile
   ============================================================ */

/* real photo over gradient placeholder */
.photo, .gallery, .ava { position: relative; }
.vphoto svg { width: 46%; height: 46%; color: rgba(255,255,255,0.9); stroke-width: 1.1; position: relative; z-index: 0; }
.photo img.real, .gallery img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fresh-card .ava img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; z-index: 1; }
.photo .badge, .photo .save { z-index: 2; }
.gallery .thumbs { z-index: 2; }
.gallery .thumbs .th { position: relative; }
.gallery .thumbs .th img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* sort tabs — project class names */
.sort-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; flex-wrap: wrap; }
.sort-tabs__btn { all: unset; cursor: pointer; padding: 14px 0; font-size: 14px; font-weight: 500; color: var(--muted); position: relative; }
.sort-tabs__btn:hover { color: var(--ink-2); }
.sort-tabs__btn.is-active { color: var(--ink); }
.sort-tabs__btn.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--leaf-bright); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* SEO description + accordion */
.desc-content { max-width: 780px; }
.desc-content > p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 18px; }
.desc-content > p:first-child { font-size: 19px; line-height: 1.6; color: var(--ink); }
.desc-content h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.01em; margin: 28px 0 12px; }
.desc-content ul, .desc-content ol { padding-left: 20px; line-height: 1.7; color: var(--ink-2); }
.acc-tools { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.acc-tools button { all: unset; cursor: pointer; font-size: 13px; color: var(--leaf-deep); border-bottom: 1px dashed var(--leaf); }
details.acc { border-top: 1px solid var(--line); }
details.acc:last-of-type { border-bottom: 1px solid var(--line); }
details.acc > summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-display); font-size: 26px; letter-spacing: -0.01em; color: var(--ink); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "+"; font-family: var(--font-ui); font-size: 26px; line-height: 1; color: var(--leaf); transition: transform .2s; }
details.acc[open] > summary::after { content: "\2013"; }
details.acc > *:not(summary) { margin: 0 0 16px; line-height: 1.7; color: var(--ink-2); font-size: 16px; }
details.acc > *:last-child { margin-bottom: 22px; }

/* attrs tables */
.attrs-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; max-width: 880px; }
.attrs-group h5 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.attrs-table { width: 100%; border-collapse: collapse; }
.attrs-table tr { border-bottom: 1px solid var(--line); }
.attrs-table tr:first-child { border-top: 1px solid var(--line); }
.attrs-table td { padding: 11px 0; font-size: 14px; vertical-align: top; }
.attrs-table td.k { color: var(--ink-2); font-weight: 500; width: 48%; padding-right: 16px; }
.attrs-table td.v { color: var(--ink); }

/* reviews */
.review-stub { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 32px; }
.review-score { text-align: center; }
.review-score .n { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--ink); }
.review-score .stars { color: var(--leaf-bright); letter-spacing: 0.1em; margin-top: 6px; }
.review-score .cnt { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* burger + mobile nav */
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); align-items: center; justify-content: center; flex-direction: column; gap: 4px; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .attrs-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav { position: fixed; inset: 64px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 18px; display: none; z-index: 60; }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .nav a.is-active::after { display: none; }
  .burger { display: flex; }
  .search-mini { display: none; }
}
@media (max-width: 640px) {
  .hero-collage { min-height: 300px; margin-top: 8px; }
  .hero-collage .t2, .hero-collage .t3 { display: none; }
  .hero-collage .t1 { width: 100%; height: 260px; position: relative; }
  .hero-vine { display: none; }
  .cultures { grid-template-columns: repeat(2, 1fr); }
  .sorts-grid, .results-grid, .fresh-grid, .articles, .agro-grid { grid-template-columns: 1fr; }
  .culture-body { grid-template-columns: 1fr; }
  .filters { position: static; }
  .fresh-head { grid-template-columns: 1fr; }
  .hero h1, .sort-info h1, .culture-title h1, .season h3, .fresh-head h3 { font-size: 44px; }
  .section-head h2 { font-size: 40px; }
  .section { padding: 56px 0; }
  .shell { padding: 0 18px; }
  .season, .sort-hero, .culture-title { padding-left: 0; padding-right: 0; }
  .season { padding: 32px 24px; }
  .kv-row { grid-template-columns: 1fr; }
  .kv:nth-child(even) { padding-left: 0; border-left: 0; }
  .review-stub { grid-template-columns: 1fr; gap: 16px; }
}

/* === landing + hub compat (этап 2 редизайна, 16.06) === */
.article { max-width: 820px; margin: 0 auto; }
.article h2 { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--ink); margin: 40px 0 14px; letter-spacing: -0.01em; }
.article h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--ink); margin: 28px 0 10px; }
.article p { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin: 0 0 14px; }
.article ul, .article ol { font-size: 16px; line-height: 1.7; color: var(--ink-2); padding-left: 22px; margin: 0 0 16px; }
.article li { margin: 6px 0; }
.article a { color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 2px; }
.article .lead, .article-head .lead, .lead { font-size: 19px; line-height: 1.55; color: var(--ink); margin: 0 0 24px; }
.crumbs, .breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; letter-spacing: 0.04em; }
.crumbs a, .breadcrumbs a { color: var(--leaf-deep); }
.article-head { margin-bottom: 24px; }
.article-meta { font-size: 13px; color: var(--muted); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.quick-answer { background: var(--leaf-tint); border-radius: var(--r); padding: 16px 18px; margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.lunar-table-wrap { overflow-x: auto; margin: 18px 0; }
.lunar-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lunar-table th, .lunar-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.lunar-table th { background: var(--leaf-tint); font-weight: 500; }
.lunar-key-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin: 18px 0; }
.lunar-key-dates > * { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
/* интерактивный лунный календарь-грид */
.lc-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 12px; }
.lc-btn { border:1px solid var(--line); background:var(--paper); color:var(--leaf-deep); border-radius:var(--r); padding:7px 13px; font-size:14px; cursor:pointer; }
.lc-btn[aria-pressed=true] { border-color:var(--leaf); background:var(--leaf-tint); }
.lc-dows, .lc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.lc-dow { font-size:12px; color:var(--ink-soft,#7a724f); text-align:center; padding-bottom:3px; }
.lc-cell { border:1px solid var(--line); border-radius:10px; min-height:66px; padding:5px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:space-between; position:relative; transition:opacity .15s; }
.lc-cell .d { position:absolute; top:4px; left:7px; font-size:12px; color:var(--leaf-deep); }
.lc-cell .ev { font-size:10px; line-height:1.15; text-align:center; }
.lc-cell.dim { opacity:.25; }
.lc-cell.lc-today { box-shadow:0 0 0 2px var(--leaf); }
.lc-cell.lc-sel { box-shadow:0 0 0 2px var(--sun-deep); }
.lc-empty { border:none; background:none; cursor:default; min-height:0; }
.lc-wax { background:#EAF3D6; }
.lc-wane { background:#F5ECCF; }
.lc-rest { background:#F0DEE4; }
.lc-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:13px; color:var(--leaf-deep); }
.lc-legend i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid var(--line); }
.lc-detail { margin-top:14px; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:var(--paper); min-height:62px; }
.lc-detail .dt { font-size:16px; color:var(--leaf-deep); margin-bottom:3px; }
.lc-detail .ph { font-size:13px; color:var(--sun-deep); margin-bottom:6px; }
.lc-detail .tip { font-size:15px; line-height:1.55; }
/* галерея фото-карточек «что посадить» */
.posadit-filters { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 14px; }
.pc-btn { border:1px solid var(--line); background:var(--paper); color:var(--leaf-deep); border-radius:var(--r); padding:7px 13px; font-size:14px; cursor:pointer; }
.pc-btn[aria-pressed=true] { border-color:var(--leaf); background:var(--leaf-tint); }
.posadit-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin:14px 0 8px; }
.pc-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); text-decoration:none; transition:border-color .15s,transform .15s; }
.pc-card:hover { border-color:var(--leaf); transform:translateY(-2px); }
.pc-card.dim { display:none; }
.pc-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--leaf-tint); }
.pc-name { padding:8px 10px 2px; font-size:14px; color:var(--leaf-deep); line-height:1.25; }
.pc-cult { padding:0 10px 9px; font-size:12px; color:var(--sun-deep); }
/* чипы перелинковки карточки сорта на хабы-оси */
.card-axes { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px 0 4px; }
.card-axes .axes-label { font-size:13px; color:var(--ink-soft,#7a724f); }
.card-axes .chip { display:inline-block; border:1px solid var(--line); background:var(--paper); color:var(--leaf-deep); border-radius:999px; padding:6px 14px; font-size:14px; text-decoration:none; transition:border-color .15s,background .15s; }
.card-axes .chip:hover { border-color:var(--leaf); background:var(--leaf-tint); }
.related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.related-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.related-list a, .chips-row a, .hub-chip { display: inline-block; padding: 7px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 14px; color: var(--leaf-deep); }
.related-list a:hover, .hub-chip:hover { border-color: var(--leaf); background: var(--leaf-tint); }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.seo-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; margin: 32px 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.articles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; }
.article .sorts-grid { grid-template-columns: 1fr; gap: 16px; }
.top-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 240px 1fr; }
.top-card-img { background: var(--leaf-tint); position: relative; overflow: hidden; min-height: 190px; }
.top-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-card-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.top-card-body h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin: 0; color: var(--ink); }
.top-card-body h3 a { color: var(--ink); text-decoration: none; }
.top-card-meta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-size: 14px; color: var(--ink-2); }
.top-card-meta li { padding: 0; }
.top-card-meta b { color: var(--muted); font-weight: 500; }
.top-card-cta { margin: 8px 0 0; }
.cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--leaf-deep); color: #F7F2E8 !important; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; text-decoration: none; }
.cta-btn:hover { background: #233a1f; }
@media (max-width: 720px) { .top-card { grid-template-columns: 1fr; } .top-card-meta { grid-template-columns: 1fr; } }

/* cookie-бар */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; max-width: 760px; margin: 0 auto; background: var(--leaf-deep); color: #EDEAD9; border-radius: var(--r-lg); padding: 14px 18px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; line-height: 1.5; }
.cookie-bar.is-hidden { display: none; }
.cookie-bar p { margin: 0; flex: 1; min-width: 220px; }
.cookie-bar a { color: var(--leaf-bright); text-decoration: underline; }
.cookie-bar .ck-accept { background: var(--sun); color: var(--ink); border: none; padding: 9px 22px; border-radius: var(--r-pill); font-weight: 500; font-size: 14px; cursor: pointer; }
.cookie-bar .ck-accept:hover { background: #f5cf5d; }
.cookie-bar .ck-more { color: #C8CDBA; font-size: 13px; white-space: nowrap; }

/* === /articles — сетка карточек === */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.articles-grid .article-card { display: flex; flex-direction: column; gap: 9px; padding: 22px 24px; }
.articles-grid .article-card h3 { font-family: var(--font-display); font-size: 23px; font-weight: 500; margin: 0; color: var(--ink); }
.articles-grid .article-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.articles-grid .article-card .tag-season { align-self: flex-start; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--leaf-deep); background: var(--leaf-tint); padding: 3px 10px; border-radius: var(--r-pill); }

/* === /katalog/ — алфавитный указатель === */
.index-list { list-style: none; margin: 0 0 6px; padding: 0; columns: 4 210px; column-gap: 28px; }
.index-list li { break-inside: avoid; padding: 3px 0; font-size: 14.5px; line-height: 1.45; }
.index-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.index-list a:hover { color: var(--leaf-deep); border-bottom-color: var(--leaf); }
.index-list .ic { color: var(--muted); font-size: 12px; }
.index-list--cult { columns: 3 190px; }

/* хаб культуры без панели фильтров (ни одна группа не делит выборку) — грид на всю ширину */
.culture-body.no-filters { grid-template-columns: 1fr; }