/* ---------- buttons ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  /* Transparent rather than none: .btn-secondary and .btn-ghost add a 1px border, so without a
     placeholder here they come out 2px taller than .btn-primary. Side by side that is invisible;
     stacked full-width on a phone it reads as sloppy alignment. */
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.btn-pill:active { transform: scale(0.98); }

.btn-primary { background: var(--green-surface); color: #fff; }
.btn-primary:hover { background: var(--green-surface-hover); }

.btn-secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--ink-faint); }

.btn-rust { background: var(--rust-surface); color: #fff; }
.btn-rust:hover { background: var(--rust-surface-hover); }

.btn-ghost { background: transparent; color: var(--green); border: 1px solid var(--green); }
.btn-ghost:hover { background: var(--green-tint); }

/* A full-width button has no room to grow sideways, so it wraps instead: under nowrap one long
   label widened the whole lot page past a 390px screen. */
.btn-block { width: 100%; white-space: normal; text-align: center; }
.btn-sm { padding: 10px 18px; font-size: 12px; }

.btn-pill[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--green);
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav-links {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
}
.nav-links a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .nav-links { display: flex; }
}
.nav-right { display: flex; align-items: center; gap: 12px; }
/* «Заказы» is a word, not another icon - the header has icons enough already. Below 900px it
   steps aside into the menu, where the cart has an entry too. */
.nav-orders { display: none; }
@media (min-width: 900px) { .nav-orders { display: inline-flex; } }
/* Four controls plus the logo need 362px; on a 360px phone the brand was squeezed until its word
   ran under the menu button. The logo already carries the letters, so the word goes first. */
@media (max-width: 400px) {
  .site-header .brand-word { display: none; }
  .nav-right { gap: 10px; }
}
/* At 320px even the bare logo was squeezed to 22px wide by the 16px header gap. The logo never
   shrinks now; the spacing and the round buttons give up the 12px instead. */
.site-header .brand, .site-header .brand img { flex-shrink: 0; }
@media (max-width: 360px) {
  .site-header .container { gap: 10px; }
  .nav-right { gap: 8px; }
  .site-header .icon-btn, .site-header .mobile-menu-btn { width: 40px; height: 40px; }
}
.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  cursor: pointer;
}
.avatar-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green-surface); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  border: none; cursor: pointer;
}
.lang-switch {
  display: flex; gap: 4px; font-size: 12px; font-weight: 700;
  color: var(--ink-faint); letter-spacing: 0.04em;
}
.lang-switch button {
  background: none; border: none; cursor: pointer; color: inherit; padding: 4px 6px;
}
.lang-switch button.active { color: var(--green); }
@media (max-width: 899px) { .site-header > .container > .nav-right > .lang-switch { display: none; } }

.mobile-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; font-size: 18px; order: -1;
}
@media (min-width: 900px) { .mobile-menu-btn { display: none; } }

.search-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: flex; gap: 10px; padding: 14px var(--gutter); align-items: center;
  z-index: 41;
}
.search-panel input {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}

/* ---------- reviews ---------- */
.star-pick { display: flex; gap: 6px; }
.star-pick button {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 1;
  font-size: 30px; color: var(--line-strong, var(--line));
}
.star-pick button.on { color: #e9a23b; }
.review-card { padding: 14px 0; border-bottom: 1px solid var(--line); }
.review-card:last-child { border-bottom: none; }
.review-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.review-card__stars { color: #e9a23b; letter-spacing: 1px; }
.review-card p { font-size: 14px; margin: 6px 0 0; }
.review-card time { font-size: 12px; color: var(--muted); }

/* ---------- notifications (the bell) ---------- */
.notif-btn { position: relative; }
.notif-dot {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--surface-2);
}
.notif-panel {
  position: absolute; top: 100%; right: var(--gutter); left: auto;
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden; z-index: 42;
  max-height: min(70vh, 520px); overflow-y: auto;
}
.notif-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.notif-item {
  display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface); }
.notif-item.unread { background: var(--green-tint); }
.notif-item__icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--green);
}
.notif-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item__text strong { font-size: 14px; }
.notif-item__text span { font-size: 13px; color: var(--muted); }
.notif-item__text time { font-size: 12px; color: var(--muted); }
.notif-empty { padding: 18px 16px; font-size: 13px; color: var(--muted); margin: 0; }

.mobile-nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; padding: 8px var(--gutter) 16px;
}
.mobile-nav-panel a {
  padding: 14px 4px; font-size: 15px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-nav-panel a:last-child { border-bottom: none; }
@media (min-width: 900px) { .mobile-nav-panel { display: none !important; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,18,15,0.15), rgba(20,18,15,0.55)), var(--hero-base);
  color: #fff;
}
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
}
.hero-inner { padding-block: 90px 70px; max-width: 720px; }  /* keeps .container's gutter - see base.css */
.hero h1 { color: #fff; }
/* The hero stays dark in both themes, so its secondary button can't use the themed surface -
   in dark mode that would be dark-on-dark. Glass treatment reads on the photo either way. */
.hero .btn-secondary {
  /* Dark glass, not light: over the sunset glow a white tint left white text at about 3.9:1. */
  background: rgba(12, 24, 19, 0.38);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}
.hero .btn-secondary:hover { background: rgba(12, 24, 19, 0.55); border-color: #fff; }
/* align-items: center, not the default stretch - otherwise any height difference
   between the two buttons silently grows the shorter box instead of showing. */
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero p.lede { color: rgba(255,255,255,0.86); font-size: 17px; max-width: 560px; }

/* ---------- trust cards ---------- */
.trust-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px;
}
.trust-card .icon { font-size: 28px; margin-bottom: 12px; display: block; }
.trust-card h3 { margin-bottom: 6px; }
.trust-card p { margin: 0; font-size: 14px; }

/* ---------- cards (lots / farmers) ---------- */
.card-photo {
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* modifier for a compact horizontal list row (e.g. the orders list) instead of a photo card */
.card-photo.card-row {
  flex-direction: row;
  align-items: center;
  padding: 16px;
  gap: 16px;
  height: auto;
}
.card-photo .photo-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--fill-track);
}
.card-photo .photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-photo .content { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-photo h3 { margin: 0; font-size: 20px; }
.card-photo .desc { font-size: 14px; margin: 0; }
.card-photo .cta-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  color: var(--ink-on-light);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
}
.badge-pill.on-photo { position: absolute; top: 14px; left: 14px; }
.badge-verified { background: var(--green-tint); color: var(--green); }
.badge-status { background: var(--fill-track); color: var(--ink-dim); }

/* ---------- progress ---------- */
.progress-row .progress-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 8px;
}
.progress-row .progress-labels .value { color: var(--green); }
.progress-track {
  height: 8px; border-radius: var(--r-pill); background: var(--fill-track); overflow: hidden;
}
.progress-fill { height: 100%; background: var(--green); border-radius: var(--r-pill); }
.progress-caption { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }

/* ---------- filter chips ---------- */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-filter {
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.chip-filter.active { background: var(--green-surface); border-color: var(--green-surface); color: #fff; }

/* ---------- catalogue: meat switch and horizontal filter bar ---------- */
.meat-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin-top: 18px;
  border-radius: var(--r-pill); background: var(--fill-track); max-width: 100%;
}
.meat-switch button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 10px 18px; border-radius: var(--r-pill);
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-dim);
}
.meat-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.filter-bar {
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
}
@media (min-width: 900px) {
  .filter-bar { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.4fr); }
  /* Only phones collapse the bar. On a wide screen there is no button to reopen it, so a `hidden`
     left over from a narrower window must not win - the bar is always there. */
  .filter-bar[hidden] { display: grid !important; }
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-field > span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim);
}
.filter-field select, .filter-field input {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14px; background: var(--surface-2); color: var(--ink);
}
.filter-field--wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .filter-field--wide { grid-column: auto; } }
.filter-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 14px; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--green);
}
.link-btn:hover { text-decoration: underline; }
.card-photo .price-from { font-size: 14px; margin: 0; color: var(--ink); }
.card-photo .price-from strong { font-family: var(--font-display); font-size: 18px; }

/* ---------- filter sidebar (desktop) ---------- */
/* Same guard as the filter bar: from 900px there is no toggle, so the sidebar always shows. */
@media (min-width: 900px) { .filters-panel[hidden] { display: block !important; } }
.filters-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
}
.filters-panel h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); }
.filters-panel .filter-group { margin-bottom: 22px; }
.filters-panel .filter-group:last-child { margin-bottom: 0; }
.filters-panel input[type="text"], .filters-panel select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14px; background: var(--surface-2); color: var(--ink);
}
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; color: var(--ink); }

/* ---------- timeline / tracker ---------- */
.timeline { position: relative; }
.timeline-step { position: relative; padding-left: 46px; padding-bottom: 28px; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
  content: ''; position: absolute; left: 14px; top: 30px; bottom: -2px; width: 2px; background: var(--line);
}
.timeline-step:last-child::before { display: none; }
.timeline-dot {
  position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--ink-faint); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.timeline-step.completed .timeline-dot { border-color: var(--green-surface); background: var(--green-surface); color: #fff; }
.timeline-step.current .timeline-dot { border-color: var(--rust); color: var(--rust); }
.timeline-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 18px;
}
.timeline-card .row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.timeline-card h4 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.timeline-card time { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.timeline-card p { margin: 6px 0 0; font-size: 13px; }
.timeline-step.pending .timeline-card { opacity: 0.55; }

/* ---------- panels / cards generic ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
}

/* ---------- wallet-style visual card ---------- */
.wallet-card {
  border-radius: var(--r-card);
  padding: 26px;
  background: linear-gradient(135deg, var(--green) 0%, var(--rust) 100%);
  color: #fff;
}
.wallet-card .row-top { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.wallet-card .amount { font-family: var(--font-display); font-size: 34px; margin: 18px 0 4px; }
.wallet-card .sub { font-size: 12px; opacity: 0.85; }

/* ---------- partner cabinet ---------- */
.cabinet-nav {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 26px;
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
}
.cabinet-nav a {
  padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line);
}
.cabinet-nav a:hover { color: var(--ink); }
.cabinet-nav a.active { background: var(--green-surface); border-color: var(--green-surface); color: #fff; }

.status-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700;
  background: var(--fill-track); color: var(--ink-dim);
}
.status-chip.open { background: var(--green-tint); color: var(--green); }
.status-chip.draft { background: var(--fill-track); color: var(--ink-dim); }
.status-chip.booked { background: var(--rust-tint); color: var(--rust); }
.status-chip.danger { background: var(--danger-tint, rgba(179,57,42,0.12)); color: var(--danger); }

/* ---------- veterinary documents ---------- */
.doc-panel {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--surface);
  padding: 14px 16px 16px;
  margin: -8px 0 14px;
}
.doc-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.doc-row:last-of-type { border-bottom: none; }
.doc-row .grow { flex: 1 1 180px; min-width: 0; }
.doc-row strong { font-size: 14px; }
.doc-glyph { font-size: 22px; line-height: 1; }
.doc-file { margin: 2px 0 0; font-size: 12px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-note { margin: 4px 0 0; font-size: 12px; color: var(--danger); }
.doc-empty { margin: 0 0 12px; font-size: 13px; color: var(--ink-dim); }
.doc-upload { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.doc-upload select, .doc-upload input[type=file] {
  flex: 1 1 200px; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink); font-family: var(--font-body); font-size: 14px;
}
.doc-hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }
.doc-error { margin: 8px 0 0; font-size: 13px; color: var(--danger); }

/* On a phone the row wraps, so the controls need to be full width rather than three stubs. */
@media (max-width: 719px) {
  .doc-upload select, .doc-upload input[type=file], .doc-upload button { flex: 1 1 100%; }
  .doc-row .btn-pill { flex: 1 1 auto; }
}

.data-row {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  margin-bottom: 12px;
}
.data-row .thumb {
  width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover;
  background: var(--fill-track); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.data-row .grow { flex: 1; min-width: 0; }
.data-row h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; }
.data-row p { margin: 0; font-size: 13px; }

/* ---------- role picker (registration) ---------- */
.role-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
  padding: 22px; border-radius: var(--r-card); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--font-body); transition: border-color .15s ease, transform .15s ease;
}
.role-card:hover { border-color: var(--green); transform: translateY(-2px); }
.role-card.selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.role-card .role-icon { font-size: 28px; }
.role-card strong { font-family: var(--font-display); font-size: 20px; }
.role-card .role-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

/* ---------- forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.field textarea { resize: vertical; min-height: 100px; }
/* A quiet line under a field: what the value is for and who will see it. */
.field-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); }
.notice-box {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; font-size: 14px; color: var(--ink-dim); margin-bottom: 18px;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,0.7);
  padding: 48px 0 28px;
  margin-top: 60px;
  border-top: 1px solid var(--line); /* in dark mode the footer is close to --bg; keep the seam visible */
}
.site-footer a { color: rgba(255,255,255,0.7); }
.site-footer a:hover { color: #fff; }
/* A colour rather than opacity: opacity: 0.6 on top of the links 0.7 left this line at 4.1:1. */
.footer-bottom { font-size: 12px; color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,18,15,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal-box {
  background: var(--surface-2); border-radius: var(--r-card); padding: 28px;
  max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal-box .row-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-dim); }
.modal-box--video { max-width: 760px; padding: 20px; }
.modal-box--video video { display: block; width: 100%; max-height: 70vh; margin-top: 12px; border-radius: var(--r-sm); background: #000; }

/* ---------- step galleries (js/media.js) ---------- */
.media-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); margin-top: 10px; }
.media-item { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--fill-track); }
.media-item img, .media-item video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.media-item--doc a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%;
  padding: 8px; text-align: center; font-size: 12px; color: var(--ink); overflow-wrap: anywhere;
}
.media-remove {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.doc-links { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.doc-links a { color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.doc-links__state { color: var(--ink-faint); font-size: 12px; margin-left: 6px; }

/* ---------- order cards on the farm's desk and in the buyer's orders ---------- */
.order-card { align-items: flex-start; flex-wrap: wrap; text-decoration: none; color: inherit; cursor: pointer; }
.order-card:hover { border-color: var(--green); }
.order-card__side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.order-card__next { font-size: 13px; font-weight: 700; color: var(--green); }

/* ---------- order steps: the farm's card and the buyer's tracker ---------- */
.step-panel { border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; background: var(--surface); }
.step-panel + .step-panel { margin-top: 12px; }
.step-panel h3 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step-panel.is-done { border-color: var(--green); }
.step-panel.is-locked { opacity: 0.6; }
.step-panel .step-hint { font-size: 14px; color: var(--ink-dim); margin: 0 0 12px; }
.step-panel .step-when { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.step-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.money-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.money-row span:last-child { text-align: right; white-space: nowrap; }
.money-row small { display: block; color: var(--ink-faint); font-size: 12px; }

/* ---------- order configurator (js/configurator.js) ---------- */
.cfg-step { margin-bottom: 18px; }
.cfg-step h4 { margin: 0 0 10px; }
.cfg-options { display: grid; gap: 8px; }
.cfg-option {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.cfg-option input { margin-top: 3px; accent-color: var(--green); }
.cfg-option:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.cfg-option.is-off { opacity: 0.55; cursor: not-allowed; }
.cfg-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-option__title { font-weight: 700; font-size: 15px; color: var(--ink); }
.cfg-kz { font-weight: 500; color: var(--ink-faint); }
.cfg-option__meta { font-size: 14px; color: var(--ink); }
.cfg-option__note { font-size: 13px; color: var(--ink-faint); overflow-wrap: anywhere; }
.cfg-select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14px; background: var(--surface-2); color: var(--ink);
}
.cfg-total { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 14px; }
.cfg-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.cfg-row span:last-child { white-space: nowrap; }
.cfg-row--total { margin-top: 10px; align-items: baseline; }
.cfg-row--total strong { font-family: var(--font-display); font-size: 26px; white-space: nowrap; }
.cfg-hint { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; }

/* A card whose title link covers the whole card ("stretched link"), so the card can also hold its
   own button - the farm card's video - without nesting a button inside a link. */
.card-stretch { position: relative; }
.card-stretch .stretched-link { color: inherit; text-decoration: none; }
.card-stretch .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-stretch .stretched-link:focus-visible { outline: none; }
.card-stretch:has(.stretched-link:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.video-play {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(10, 16, 13, 0.78); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
}
.video-play:hover { background: rgba(10, 16, 13, 0.92); }
.video-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.card-stretch .card-action { position: relative; z-index: 2; }
.modal-box--cfg { max-width: 560px; }

/* ---------- maps (js/map.js: Leaflet + OpenStreetMap) ---------- */
.hub-map {
  position: relative;
  height: 440px;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  isolation: isolate;  /* Leaflet panes use z-index up to 1000; keep them under the sticky header */
}
.hub-map-skeleton { height: 100%; border-radius: 0; }
@media (max-width: 719px) { .hub-map { height: 360px; } }

.leaflet-container { font-family: var(--font-body); background: var(--surface); }
/* OSM tiles are light. In dark mode they are inverted into a dark map rather than left glaring;
   hue-rotate puts water and parks back to roughly their own colours after the inversion. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.55); }
}
:root[data-theme="dark"] .map-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.55); }

/* Controls and popups follow the theme instead of Leaflet's fixed white. */
.leaflet-bar { border: 1px solid var(--line) !important; box-shadow: var(--shadow-soft) !important; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--surface-2); color: var(--ink); border-bottom-color: var(--line); }
.leaflet-bar a:hover { background: var(--surface); }
.leaflet-control-attribution { background: var(--surface-2) !important; color: var(--ink-dim) !important; font-size: 11px; }
.leaflet-control-attribution a { color: var(--green) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-card); }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.45; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-dim); }

.map-popup__farm + .map-popup__farm { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.map-popup__farm a { font-weight: 700; color: var(--green); }
.map-popup__where { color: var(--ink-dim); font-size: 13px; }
.map-popup__note { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }

/* Markers: HTML, not Leaflet's image pins. A filled dot is a real (rounded) position; a ring is
   "only the region is known" - it must never pass for a position. */
.map-marker span { display: block; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; }
.map-marker--public span { background: var(--green-surface); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.map-marker--exact span { background: var(--rust); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.map-marker--region span { background: rgba(255,255,255,0.7); border: 4px solid var(--green-surface); box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.map-marker--group span {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-surface); color: #fff; border: 3px solid #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* "two fingers" hint for touch screens, where one finger scrolls the page */
.map-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1000;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(20, 18, 15, 0.86); color: #fff; font-size: 13px; font-weight: 600; text-align: center;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.map-hint.show { opacity: 1; }

/* ---------- misc ---------- */
.stat-inline { display: flex; gap: 22px; }
.stat-inline .stat { text-align: left; }
.stat-inline .stat .num { font-family: var(--font-display); font-size: 24px; }
.stat-inline .stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }

/* ---------- phones ---------- */
@media (max-width: 719px) {
  /* 160px of vertical padding ate most of the first screen on a phone. */
  .hero-inner { padding-block: 52px 44px; }

  /* Stacked, the two hero buttons were 218px and 230px wide with an 18px offset on one of
     them, which read as a misalignment rather than a choice. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-pill { width: 100%; margin-top: 0; }

  /* 13x13 default checkboxes are below any usable touch target. */
  .filter-group input[type="checkbox"] {
    width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--green);
  }
  .filter-group label { min-height: 44px; }

  /* Footer links sat 20px apart; thumbs need room between them. */
  .site-footer a { display: inline-block; padding-block: 6px; }
}

/* Only phones collapse the filters; from 900px the panel is a permanent sidebar. */
.filters-toggle { display: none; }
@media (max-width: 899px) {
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 48px; padding: 12px 18px; margin-bottom: 14px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    font-family: var(--font-body); font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  }
  .filters-toggle::after { content: "▾"; font-size: 13px; transition: transform .2s ease; }
  .filters-toggle[aria-expanded="false"]::after { transform: rotate(-90deg); }
}

/* ---------- icons (js/icons.js - Lucide, inline SVG) ---------- */
.icon { display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.with-icon { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn .icon, .mobile-menu-btn .icon { vertical-align: middle; }
/* The green square the trust cards and registration roles sit their icon in. */
.icon-tile {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-tint); color: var(--green); margin-bottom: 14px;
}
.notice-icon { display: flex; gap: 10px; align-items: flex-start; }
.notice-icon > .icon { margin-top: 2px; color: var(--green); }

/* ---------- typographic photo placeholders (js/tiles.js) ---------- */
.meat-tile {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 20px; color: #F6F1E7; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 11px),
    linear-gradient(160deg, var(--tile-a), var(--tile-b));
}
.meat-tile--cattle { --tile-a: #2E2019; --tile-b: #6E3B22; }
.meat-tile--horse  { --tile-a: #1B2620; --tile-b: #3F5238; }
.meat-tile--sheep  { --tile-a: #1E2228; --tile-b: #4A5460; }
.meat-tile--mixed  { --tile-a: #241F1A; --tile-b: #4E4030; }
/* HoReCa — не вид мяса, а витрина, поэтому и цвет из другой части круга: рядом с коричневой
   говядиной, зелёной кониной и серой бараниной винный читается как «это что-то другое». */
.meat-tile--horeca { --tile-a: #231820; --tile-b: #5A2E42; }
.meat-tile__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.meat-tile__word { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; margin-top: 4px; }
.meat-tile--mono {
  padding: 0; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; border-radius: inherit;
}
.avatar-initial {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 40px;
  background: var(--green-tint); color: var(--green);
}

/* ---------- card grids ---------- */
/* Lot and farm cards used .grid-3, a fixed three columns from 720px up. Next to the 280px filter
   sidebar that left ~620px, so at a common laptop width every card shrank to 187px, the price
   broke across lines and the "Подробнее" button stuck out of the card. auto-fill lets the grid
   drop to two columns (or one) instead of squeezing; min() keeps a narrow phone from overflowing. */
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* Safety net inside the card: if price and button still cannot share a row, stack them rather
   than let the button overflow, and never split a price from its currency sign. */
.card-photo .cta-row { flex-wrap: wrap; row-gap: 12px; }
.card-photo .cta-row strong { white-space: nowrap; }

/* A notice about something that went wrong for the reader (e.g. a farm that failed review). */
.notice-danger { border-color: var(--danger); }
.notice-danger > .icon { color: var(--danger); }

/* The farm's name on a lot card (js/lot-card.js). */
.card-photo .card-farm { color: var(--green); font-weight: 600; }

/* ---------- homepage: hero landscape ----------
   Layered steppe at dusk (the SVG in index.html) under a CSS sky. The drawing sits in a band at
   the bottom of the hero; --band is its height, and the sky's warm horizon is placed from the
   bottom in the same unit, so the two stay lined up whatever height the text makes the hero.
   Dark in both themes, like every hero, so white type keeps its contrast. */
.hero--steppe {
  --band: 190px;
  isolation: isolate;
  background:
    radial-gradient(60% calc(var(--band) * 1.1) at 72% calc(100% - var(--band) * 0.5), rgba(214, 140, 78, 0.30), rgba(214, 140, 78, 0) 72%),
    linear-gradient(to top,
      #A87448 0, #A87448 calc(var(--band) * 0.55), #6E5139 calc(var(--band) * 0.8),
      #33362A calc(var(--band) * 1.15), #152A22 calc(var(--band) * 1.6), #0B1D18 100%);
}
.hero-steppe {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: var(--band);
  /* The top of the drawing is sky; fading it in means no edge can ever show there. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  pointer-events: none;
}
.hero-steppe__art { display: block; width: 100%; height: 100%; }
/* Film grain: breaks up banding in the long dark gradients and gives flat colour some tooth. */
.hero--steppe::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.14;
  mix-blend-mode: overlay;
}
.hero--steppe .hero-inner { position: relative; z-index: 1; padding-block: 56px 132px; }
.hero--steppe h1, .hero--steppe .lede { text-shadow: 0 1px 18px rgba(6, 16, 12, 0.45); }
.hero-eyebrow { color: #E9DFC9; }
@media (min-width: 720px) {
  .hero--steppe { --band: clamp(190px, 22vw, 420px); }
  .hero--steppe .hero-inner { padding-block: 96px clamp(150px, 16vw, 300px); }
}

/* The hero now carries the choice itself, so it needs the width of two tiles instead of the
   reading width of a paragraph - and less air underneath, because the tiles already fill it. */
.hero-inner--choose { max-width: 960px; }
.hero--steppe .hero-inner--choose { padding-block: 44px 96px; }
@media (min-width: 720px) {
  .hero--steppe .hero-inner--choose { padding-block: 64px clamp(110px, 11vw, 200px); }
}

/* ---------- homepage: the start choice, Говядина / Конина ----------
   Two big typographic tiles in the same dark grounds as the photo placeholders, so the choice
   reads as the site's own design rather than as a pair of stock photos. */
.choose-section { scroll-margin-top: 84px; }
.choose-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 720px) { .choose-grid { grid-template-columns: 1fr 1fr; gap: 22px; } }
.choose-card {
  min-height: 190px; gap: 4px; border-radius: var(--r-card); text-decoration: none;
  box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 720px) { .choose-card { min-height: 250px; padding: 28px 30px; } }
.choose-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10, 20, 16, 0.22); }
.choose-card:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.choose-card__word { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; }
.choose-card__meta { font-size: 14px; opacity: 0.85; min-height: 1.45em; }
.choose-card__go { margin-top: 10px; font-size: 14px; font-weight: 700; color: #F4DDB8; }
@media (prefers-reduced-motion: reduce) { .choose-card, .choose-card:hover { transition: none; transform: none; } }

/* ---------- homepage: section heads, fresh lots ---------- */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.section-head h2 { margin-bottom: 0; }
.section-link { font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* A swipeable rail on phones and tablets - the next card peeking in is the cue that it scrolls -
   and a plain row of three from 900px. The rail runs edge to edge of the screen while its first
   card lines up with the text above. */
.fresh-rail {
  display: grid; gap: 16px;
  grid-auto-flow: column; grid-auto-columns: min(82%, 320px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px;
}
.fresh-rail > * { scroll-snap-align: start; }
.fresh-skeleton { height: 470px; border-radius: var(--r-card); }
@media (hover: none) {
  .fresh-rail { scrollbar-width: none; }
  .fresh-rail::-webkit-scrollbar { display: none; }
}
@media (min-width: 900px) {
  .fresh-rail {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
    overflow: visible; margin-inline: 0; padding: 0;
  }
}

/* ---------- homepage: how it works ---------- */
.how-section { background: var(--surface); border-block: 1px solid var(--line); }
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 26px; }
.step { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.step .icon-tile { margin-bottom: 0; }
.step h3 { font-size: 19px; margin: 4px 0 6px; }
.step p { margin: 0; font-size: 14px; }
.step-num {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* The thread joining the steps: down past the icons on a phone, across them on a wide screen. */
.step:not(:last-child)::before {
  content: ""; position: absolute; background: var(--line);
  left: 22px; top: 54px; bottom: -20px; width: 2px;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .step { flex-direction: column; gap: 14px; }
  .step:not(:last-child)::before { left: 58px; right: -16px; top: 22px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- footer ---------- */
.footer-grid { display: grid; gap: 28px; margin-bottom: 28px; }
/* inline-flex beats the phone rule that makes every footer link an inline-block - under it the
   logo, a block image, pushed the word onto its own line. */
.footer-brand .brand { display: inline-flex; color: #fff; }
.footer-brand p { color: rgba(255, 255, 255, 0.66); font-size: 14px; max-width: 360px; margin: 12px 0 0; }
/* Строка о способах оплаты: мельче описания, но читаемая. Её ищут глазами внизу страницы —
   и покупатель перед вводом карты, и проверяющий из банка. */
.footer-brand .footer-pay { font-size: 13px; color: rgba(255, 255, 255, 0.55); margin-top: 10px; }
.footer-brand .footer-pay a { color: rgba(255, 255, 255, 0.8); }
.footer-title {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 14px; }
@media (min-width: 720px) {
  /* Четыре колонки: описание и три набора документов — покупка на сайте, ET, ET Partners. */
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
}

/* ---------- hub point picker on the farm profile (js/location-picker.js) ---------- */
.loc-map {
  height: 300px; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); isolation: isolate;
}
@media (max-width: 719px) { .loc-map { height: 260px; } }
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }