/* =========================================
   Зелёная грядка — общие стили
   ========================================= */

:root {
  --green-900: #1e4620;
  --green-800: #245c29;
  --green-700: #2f7a3d;
  --green-600: #3e9146;
  --green-500: #52a854;
  --green-100: #e6f2e2;
  --green-50: #f3f8ee;

  --tomato-600: #d94e2b;
  --tomato-500: #e8622f;
  --yellow-500: #e8ad2f;

  --cream: #faf7ee;
  --paper: #ffffff;
  --ink-900: #23301f;
  --ink-700: #4a5842;
  --ink-500: #74806c;
  --line: #e3ddc9;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 2px 10px rgba(35, 48, 31, 0.06);
  --shadow-md: 0 10px 30px rgba(35, 48, 31, 0.10);
  --shadow-lg: 0 20px 50px rgba(35, 48, 31, 0.16);

  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
  background: var(--cream);
  color: var(--ink-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Georgia', serif;
  font-weight: 600;
  margin: 0 0 .5em;
  color: var(--green-900);
  line-height: 1.15;
}

p { margin: 0 0 1em; color: var(--ink-700); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

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

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--muted { background: var(--green-50); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 14px;
}

.section-head { max-width: 620px; margin: 0 0 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--green-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--green-800); box-shadow: var(--shadow-md); }

.btn--accent { background: var(--tomato-600); color: #fff; }
.btn--accent:hover { background: #c2431f; }

.btn--outline { background: transparent; border-color: var(--green-700); color: var(--green-700); }
.btn--outline:hover { background: var(--green-700); color: #fff; }

.btn--ghost { background: var(--paper); color: var(--green-800); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { box-shadow: var(--shadow-md); }

.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 238, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--green-900);
}
.brand__mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(155deg, var(--green-600), var(--green-800));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
}
.brand small { display: block; font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 11px; color: var(--ink-500); }

.main-nav { display: flex; gap: 6px; }
.main-nav a {
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-700);
  transition: background .15s ease, color .15s ease;
  /* Без этого длинные пункты вроде «Ресторанам» ломаются на две строки
     и вся шапка едет по высоте */
  white-space: nowrap;
  flex-shrink: 0;
}
/* На средних экранах ужимаем, чтобы семь пунктов помещались в одну строку */
@media (max-width: 1180px) {
  .main-nav a { padding: 9px 9px; font-size: 13.5px; }
  .brand small { display: none; }
}
.main-nav a:hover, .main-nav a.is-active { background: var(--green-100); color: var(--green-800); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--green-800);
}
.icon-btn:hover { box-shadow: var(--shadow-md); }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  background: var(--tomato-600); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--cream);
}
.nav-toggle { display: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: #d9e6d5; padding: 56px 0 24px; margin-top: 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.site-footer h4 { color: #fff; font-family: 'Manrope', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px;}
.site-footer p, .site-footer a { color: #bcd1b6; font-size: 14.5px; }
.site-footer a:hover { color: #fff; }
.footer-links li { margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: #8fa889;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 76px 0 64px;
  overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 20px; }
.hero__lead { font-size: 18px; max-width: 480px; }
.hero__cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; }
.hero__stat b { display: block; font-family: 'Fraunces', serif; font-size: 26px; color: var(--green-800); }
.hero__stat span { font-size: 13px; color: var(--ink-500); }

.hero__art {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--green-500), var(--green-800));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.14), transparent 45%);
}
.hero__emoji-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 28px;
}
.hero__emoji-grid span {
  font-size: 40px;
  background: rgba(255,255,255,.14);
  border-radius: 20px;
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__badge {
  position: absolute;
  bottom: -18px; left: -18px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--green-800);
}
.hero__badge span.dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--tomato-600);
  box-shadow: 0 0 0 4px rgba(217,78,43,.15);
}
.hero__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--green-800);
}
.hero__caption .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--tomato-600);
  box-shadow: 0 0 0 4px rgba(217,78,43,.15);
  flex-shrink: 0;
}

/* ---------- Живость: покачивание иконок ---------- */
@keyframes sway {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-4px); }
}
@keyframes sway-soft {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
@keyframes drift-up {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  90% { opacity: .5; }
  100% { transform: translate(var(--drift-x, 12px), -140px) rotate(25deg); opacity: 0; }
}

.hero__emoji-grid span {
  animation: sway 3.6s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.hero__emoji-grid span:nth-child(2) { animation-duration: 4.1s; animation-delay: .3s; }
.hero__emoji-grid span:nth-child(3) { animation-duration: 3.2s; animation-delay: .6s; }
.hero__emoji-grid span:nth-child(4) { animation-duration: 4.4s; animation-delay: .15s; }
.hero__emoji-grid span:nth-child(5) { animation-duration: 3.8s; animation-delay: .5s; }
.hero__emoji-grid span:nth-child(6) { animation-duration: 3.4s; animation-delay: .8s; }


/* Покачивание — только для эмодзи-заглушки. Раньше селектор был
   `.product-card__media > span` и задевал всё подряд: плашку с бейджем,
   а теперь ещё и точки галереи. */
.product-card__media > .media-emoji {
  display: inline-block;
  animation: sway-soft 4s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.product-card:hover .product-card__media > .media-emoji { animation: sway 1.2s ease-in-out infinite; }

.icon-btn { transition: transform .2s ease, box-shadow .2s ease; }
.icon-btn:hover { transform: translateY(-2px) scale(1.06); }

.cart-count.is-bumping { animation: pop .45s ease; }

.add-btn.is-added { animation: pop .35s ease; }

/* Плавающие листья на фоне героя */
.hero__art { isolation: isolate; }
.floaters {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  overflow: hidden;
}
.floater {
  position: absolute;
  bottom: -10%;
  font-size: 22px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
  animation: drift-up linear infinite;
}
.floater:nth-child(1) { left: 12%; --drift-x: 18px; animation-duration: 9s; animation-delay: 0s; }
.floater:nth-child(2) { left: 32%; --drift-x: -14px; animation-duration: 11s; animation-delay: 2s; font-size: 18px; }
.floater:nth-child(3) { left: 55%; --drift-x: 20px; animation-duration: 8s; animation-delay: 4s; }
.floater:nth-child(4) { left: 72%; --drift-x: -18px; animation-duration: 12s; animation-delay: 1s; font-size: 16px; }
.floater:nth-child(5) { left: 88%; --drift-x: 10px; animation-duration: 10s; animation-delay: 3s; }

/* ---------- Появление элементов при скролле ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__emoji-grid span,
  .feature-card__icon,
  .product-card__media > span,
  .floater {
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- О нас: сквозной скролл роста (пока заглушка вместо видео) ---------- */
.grow-scroll {
  position: relative;
  /* Длина прокрутки анимации. Было 460vh — листать приходилось долго;
     блоки текста стоят в процентах, поэтому подстраиваются сами */
  height: 320vh;
}
.grow-scroll__decor {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.grow-scroll__decor span {
  position: absolute;
  font-size: clamp(70px, 11vw, 170px);
  opacity: .10;
  filter: grayscale(.25) brightness(.6);
  transform: rotate(var(--r, 0deg));
  line-height: 1;
}
.grow-scroll__sticky {
  position: sticky;
  top: 96px;
  height: 76vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 1;
}
.grow-scroll__visual {
  position: relative;
  width: min(46vw, 420px);
  aspect-ratio: 1/1;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--green-500), var(--green-800));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
#grow-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grow-scroll__progress {
  width: min(46vw, 420px);
  height: 4px;
  background: rgba(35,48,31,.1);
  border-radius: 999px;
  overflow: hidden;
}
.grow-scroll__progress-bar {
  height: 100%; width: 0%;
  background: var(--green-700);
  transition: width .1s linear;
}
.grow-scroll__hint { font-size: 12.5px; color: var(--ink-500); margin: 0; }

.grow-scroll__blocks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.grow-scroll__blocks-inner {
  position: relative;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.grow-block {
  position: absolute;
  width: min(300px, 30vw);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.grow-block.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.grow-block--left { left: 0; }
.grow-block--right { right: 0; }
.grow-block h3 { font-size: 18px; }
.grow-block p { font-size: 13.5px; margin: 0; }

@media (max-width: 900px) {
  .grow-scroll { height: auto; padding: 40px 0; }
  .grow-scroll__sticky { position: relative; top: 0; height: auto; padding-bottom: 24px; }
  .grow-scroll__visual { width: min(70vw, 320px); }
  .grow-scroll__progress, .grow-scroll__hint { display: none; }
  .grow-scroll__decor { display: none; }
  .grow-scroll__blocks { position: relative; inset: auto; }
  .grow-scroll__blocks-inner { height: auto; max-width: 100%; padding: 0; }
  .grow-block {
    position: relative; left: auto !important; right: auto !important; top: auto !important;
    width: 100%; max-width: 480px; margin: 0 auto 16px;
    opacity: 1; transform: none; pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grow-scroll { height: auto; padding: 40px 0; }
  .grow-scroll__sticky { position: relative; top: 0; height: auto; padding-bottom: 24px; }
  .grow-scroll__progress, .grow-scroll__hint { display: none; }
  .grow-scroll__decor { display: none; }
  .grow-scroll__blocks { position: relative; inset: auto; }
  .grow-scroll__blocks-inner { height: auto; max-width: 100%; padding: 0; }
  .grow-block {
    position: relative; left: auto !important; right: auto !important; top: auto !important;
    width: 100%; max-width: 480px; margin: 0 auto 16px;
    opacity: 1; transform: none; pointer-events: auto;
  }
}

/* ---------- Feature / value cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.feature-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-card__icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--green-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 18px;
  animation: sway-soft 4.5s ease-in-out infinite;
  transform-origin: 50% 85%;
}
.feature-card:hover .feature-card__icon:not(.feature-card__icon--row) { animation: sway 1.4s ease-in-out infinite; }
.feature-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.feature-card__head h3 { margin: 0; }
.feature-card__icon--row {
  width: auto;
  height: auto;
  max-width: 100%;
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 28px;
  line-height: 1;
  animation: none;
  margin-bottom: 0;
  flex-shrink: 0;
}
.feature-card__icon--row .icon-tile {
  width: auto;
  height: auto;
  flex-shrink: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: inline-flex;
  font-size: inherit;
}
.feature-card h3 { font-size: 18px; }
.feature-card p { font-size: 14.5px; margin: 0; }

/* ---------- Product cards ---------- */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-chip {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
  border: 2px solid transparent;
}
.filter-chip.is-active { background: var(--green-700); color: #fff; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}
.product-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.product-card__media {
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  position: relative;
}
.product-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.9);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-800);
}
/* ---------- Листание фото в карточке ----------
   Зоны — невидимые вертикальные полосы поверх фото: курсор идёт по карточке,
   фото меняется. Точки снизу показывают, сколько кадров и какой сейчас. */
.card-gallery__zones {
  position: absolute; inset: 0;
  display: flex;
  z-index: 2;
}
.card-gallery__zone { flex: 1; }

.card-gallery__dots {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 5px;
  z-index: 3;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
/* На мышке точки показываем только при наведении, чтобы сетка не рябила.
   На тач-устройствах наведения нет, поэтому там они видны всегда. */
.product-card:hover .card-gallery__dots { opacity: 1; }
@media (hover: none) {
  .card-gallery__dots { opacity: 1; }
}

.card-gallery__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: background .18s ease, transform .18s ease;
}
.card-gallery__dot.is-active {
  background: #fff;
  transform: scale(1.35);
}

/* У погашенного товара листать нечего показывать нарядно */
.product-card.is-unavailable .card-gallery__dots { display: none; }

.product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card__title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16.5px; color: var(--ink-900); }
.product-card__meta { font-size: 13px; color: var(--ink-500); }
.product-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.product-card__price { font-family: 'Fraunces', serif; font-size: 21px; color: var(--green-800); }
.product-card__price span { font-family: 'Manrope', sans-serif; font-size: 12.5px; color: var(--ink-500); font-weight: 600; }

.qty-stepper {
  display: flex; align-items: center; gap: 0;
  background: var(--green-50);
  border-radius: 999px;
  overflow: hidden;
}
.qty-stepper button {
  width: 34px; height: 34px;
  border: none; background: transparent;
  font-size: 17px; font-weight: 700; color: var(--green-800);
  cursor: pointer;
}
.qty-stepper button:hover { background: var(--green-100); }
.qty-stepper input {
  width: 32px; text-align: center; border: none; background: transparent;
  font-weight: 700; font-size: 14px; color: var(--ink-900);
}

.add-btn {
  width: 100%;
  padding: 11px;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.add-btn:hover { background: var(--green-800); }
.add-btn.is-added { background: var(--tomato-600); }
.add-btn:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Товар не в наличии ----------
   Карточку не убираем из каталога: покупателю полезно знать, что товар
   у нас бывает. Гасим цвет и убираем возможность заказать. */
.product-card.is-unavailable { box-shadow: none; border: 1.5px solid var(--line); }
.product-card.is-unavailable:hover { transform: none; box-shadow: var(--shadow-sm); }
.product-card.is-unavailable .product-card__media { filter: grayscale(1); opacity: .5; }
.product-card.is-unavailable .product-card__title,
.product-card.is-unavailable .product-card__price { color: var(--ink-500); }
.product-card.is-unavailable .product-card__badge {
  background: var(--ink-500); color: #fff;
}
.stock-note {
  font-size: 12.5px;
  color: var(--ink-500);
  margin: 0;
  padding-top: 2px;
}

/* Крупный блок на странице товара вместо кнопки покупки */
.stock-banner {
  border: 1.5px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-bottom: 26px;
}
.stock-banner strong { display: block; font-size: 15.5px; margin-bottom: 6px; color: var(--ink-900); }
.stock-banner p { font-size: 13.5px; color: var(--ink-500); margin: 0 0 14px; }

/* Предупреждение в корзине */
.stock-warning {
  background: #fff4ed;
  border: 1.5px solid #f3c894;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--ink-900);
  line-height: 1.6;
}
.stock-warning strong { color: var(--tomato-600); }
.cart-item.is-unavailable .cart-item__media { filter: grayscale(1); opacity: .5; }
.cart-item.is-unavailable .cart-item__title { color: var(--ink-500); }
.stock-flag { color: var(--tomato-600); font-weight: 700; }
.link-btn {
  border: none; background: none; padding: 0;
  color: var(--green-700); font-weight: 700; font-size: inherit;
  font-family: inherit; cursor: pointer; text-decoration: underline;
}

/* ---------- Cards palette per category ---------- */
.tone-green-a { background: linear-gradient(160deg,#dff0d3,#b9dfa2); }
.tone-green-b { background: linear-gradient(160deg,#e8f5df,#c3e6ac); }
.tone-herb-a  { background: linear-gradient(160deg,#e4f0e6,#bcdcc0); }
.tone-herb-b  { background: linear-gradient(160deg,#f0ecd8,#dccf9e); }
.tone-mix-a   { background: linear-gradient(160deg,#eef3c9,#d3e28f); }
.tone-mix-b   { background: linear-gradient(160deg,#fbe9d7,#f3c894); }
.tone-veg-a   { background: linear-gradient(160deg,#dcefdf,#a9d7ae); }
.tone-veg-b   { background: linear-gradient(160deg,#ffe1d6,#ffb199); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 26px 22px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-700); color: #fff;
  font-weight: 700; margin-bottom: 14px;
}
.step h4 { font-family: 'Manrope', sans-serif; font-size: 15.5px; margin-bottom: 6px; }
.step p { font-size: 13.5px; margin: 0; }

/* ---------- Testimonials / map / cta ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  border-radius: 28px;
  padding: 56px;
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-banner h2 { color: #fff; margin-bottom: 8px; }
.cta-banner p { color: #d3e5cd; margin: 0; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16/9;
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 7px; color: var(--ink-900); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--cream);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-900);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--green-600); background: #fff;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.radio-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.radio-tile {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--cream);
}
.radio-tile.is-selected { border-color: var(--green-700); background: var(--green-50); }
.radio-tile strong { display: block; font-size: 14px; }
.radio-tile span { font-size: 12.5px; color: var(--ink-500); }

.helper-text { font-size: 12.5px; color: var(--ink-500); margin-top: 6px; }
.field-error { font-size: 12.5px; color: var(--tomato-600); margin-top: 6px; display: none; }

/* Глазик у пароля. Обёртка добавляется скриптом вокруг каждого password-поля,
   поэтому в разметке форм ничего писать не нужно. */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 46px; }
.password-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease, background .15s ease;
}
.password-eye:hover { opacity: 1; background: var(--green-50); }
.password-eye.is-on { opacity: 1; }
.password-eye:focus-visible { outline: 2px solid var(--green-600); outline-offset: 1px; }

.tab-switch { display: flex; background: var(--green-50); border-radius: 999px; padding: 4px; margin-bottom: 26px; }
.tab-switch button {
  flex: 1; border: none; background: transparent; padding: 11px; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: var(--ink-700); cursor: pointer;
}
.tab-switch button.is-active { background: var(--green-700); color: #fff; }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: flex-start; }
.cart-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--paper); border-radius: var(--radius-md); padding: 16px;
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.cart-item__media {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0;
}
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__title { font-weight: 700; font-size: 15px; }
.cart-item__meta { font-size: 12.5px; color: var(--ink-500); }
.cart-item__remove { background: none; border: none; color: var(--ink-500); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.cart-item__price { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; color: var(--green-800); min-width: 90px; text-align: right; }

.summary-card {
  background: var(--paper); border-radius: var(--radius-lg); padding: 26px;
  box-shadow: var(--shadow-sm); position: sticky; top: 100px;
}
.summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14.5px; color: var(--ink-700); }
.summary-row.total { font-size: 18px; font-weight: 700; color: var(--ink-900); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .emoji { font-size: 54px; margin-bottom: 16px; }

/* ---------- Account ---------- */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; }
.account-nav { background: var(--paper); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); height: fit-content; }
.account-nav button {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--radius-sm);
  border: none; background: transparent; font-weight: 700; font-size: 14.5px; color: var(--ink-700);
  cursor: pointer; margin-bottom: 4px;
}
.account-nav button.is-active { background: var(--green-100); color: var(--green-800); }
/* Ссылка на панель управления в той же колонке — выглядит как остальные пункты */
.account-nav a {
  display: block; padding: 12px 14px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 14.5px; margin-bottom: 4px;
}
.account-nav a:hover { background: var(--green-50); }
.account-panel { display: none; }
.account-panel.is-active { display: block; }

.order-card { background: var(--paper); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.order-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.order-status { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--green-100); color: var(--green-800); }
.order-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}

.badge-list { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 6px 13px; background: var(--green-50); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--green-800); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink-900); color: #fff; padding: 14px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 200; display: flex; align-items: center; gap: 8px;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Page header (inner pages) ---------- */
.page-hero {
  padding: 52px 0 40px;
  background: var(--green-50);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs { font-size: 13px; color: var(--ink-500); margin-bottom: 12px; }
.breadcrumbs a:hover { color: var(--green-700); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 620px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid-2, .radio-tiles { grid-template-columns: 1fr; }
  .cta-banner { padding: 32px; flex-direction: column; align-items: flex-start; }
  .section { padding: 48px 0; }
}

/* ---------- Mobile nav drawer ---------- */
.nav-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-sm);
  align-items: center; justify-content: center; font-size: 20px;
  border: none; cursor: pointer; color: var(--green-800);
}
.mobile-nav {
  position: fixed; inset: 0; background: rgba(30,70,32,.55);
  z-index: 100; display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(78vw, 320px);
  background: var(--cream); padding: 24px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 6px;
}
.mobile-nav__panel a {
  padding: 14px 12px; border-radius: var(--radius-sm); font-weight: 700; font-size: 16px;
  color: var(--ink-900);
}
.mobile-nav__panel a:hover { background: var(--green-100); }
.mobile-nav__close {
  align-self: flex-end; background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--ink-700); margin-bottom: 10px;
}

/* =========================================
   Фото товаров, каталог-тулбар, страница товара
   ========================================= */

/* ---------- Фото поверх эмодзи-плашки ---------- */
.media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.media-emoji { display: inline-block; }

/* ---------- Мягкая загрузка фото товара ----------
   Пока фото грузится, по цветной плашке пробегает блик, потом фото плавно
   проявляется, а не выскакивает рывком. Класс --fade ставит только
   ZG.productMedia вместе с onload — у остальных картинок обработчика нет,
   и без этого ограничения они так и остались бы прозрачными. */
.media-photo--fade { opacity: 0; transition: opacity .4s ease; }
.media-photo--fade.is-loaded { opacity: 1; }

.product-card__media:has(.media-photo--fade:not(.is-loaded))::after,
.gallery__main:has(.media-photo--fade:not(.is-loaded))::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .media-photo--fade { transition: none; }
  .product-card__media::after, .gallery__main::after { animation: none; background: none; }
}

/* ---------- Фото «влетает» в корзину (ZG.flyToCart) ---------- */
.cart-flyer {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  border-radius: var(--radius-md);
  background: var(--paper) center / cover no-repeat;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  will-change: transform, opacity;
}

/* ---------- Плавные переходы между страницами ----------
   View Transitions: браузер сам перетекает со страницы на страницу, а фото
   из карточки каталога вырастает в большое фото на странице товара (имя
   product-photo ставит ZG.initProductTransitions по клику). Шапка на обеих
   страницах одна и та же — отдельное имя, чтобы она стояла на месте, а не
   мигала вместе со всем остальным. Где браузер этого не умеет, переходы
   обычные, как раньше. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
.gallery__main { view-transition-name: product-photo; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(product-photo) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

.product-card__media { overflow: hidden; text-decoration: none; }
.product-card__media .product-card__badge { z-index: 2; }
.product-card__media .media-photo { transition: transform .35s ease, opacity .4s ease; }
.product-card:hover .product-card__media .media-photo { transform: scale(1.05); }
.product-card__title { text-decoration: none; display: block; }
a.product-card__title:hover { color: var(--green-700); }

/* ---------- Панель фильтров каталога ---------- */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.catalog-toolbar .filter-bar { margin-bottom: 0; }
.catalog-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.catalog-select {
  appearance: none;
  padding: 10px 34px 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5842' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
}
#category-select { display: none; }
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.search-field input {
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  width: 180px;
  color: var(--ink-900);
}
.catalog-count { font-size: 13px; color: var(--ink-500); margin: 0 0 18px; }

/* ---------- Вступление к категории ---------- */
.category-intro {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 26px;
  align-items: center;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.category-intro__media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, #dff0d3, #b9dfa2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
}
.category-intro h2 { font-size: 26px; margin-bottom: 8px; }
.category-intro p { margin: 0; font-size: 14.5px; }

/* ---------- Страница товара ---------- */
.product-page { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px; align-items: start; }

.gallery__main {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
}
.gallery__thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gallery__thumb {
  position: relative;
  width: 88px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.gallery__thumb.is-active { border-color: var(--green-700); }

.product-detail__title { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 10px; }
.product-detail__lead { font-size: 16px; color: var(--ink-700); margin-bottom: 22px; }
.product-detail__price {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  color: var(--green-800);
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
}
.product-detail__price b { font-weight: 600; }
.product-detail__price span {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
}
.product-detail__buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.product-detail__buy .add-btn { width: auto; flex: 1; min-width: 200px; }

.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.spec-table th,
.spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
.spec-table th { width: 42%; font-weight: 600; color: var(--ink-500); }
.spec-table td { color: var(--ink-900); font-weight: 600; }

.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-500); }
.share-row a, .share-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--green-50);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-800);
  cursor: pointer;
}
.share-row a:hover, .share-row button:hover { background: var(--green-100); }

@media (max-width: 900px) {
  .product-page { grid-template-columns: 1fr; gap: 30px; }
  .category-intro { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .catalog-toolbar { flex-direction: column; align-items: stretch; }
  .catalog-toolbar .filter-bar { display: none; }
  #category-select { display: block; }
  .catalog-tools { flex-direction: column; align-items: stretch; }
  .search-field input { width: 100%; }
  .catalog-select { width: 100%; }
}

/* =========================================
   Тёмная тема
   Включается атрибутом data-theme="dark" на <html>.
   Переопределяем только переменные + те места,
   где цвета были захардкожены или меняют роль.
   ========================================= */

[data-theme="dark"] {
  /* green-900 в светлой теме — цвет заголовков и одновременно тёмный фон
     футера. В тёмной теме он становится светлым (заголовки), а футер и
     cta-баннер получают явный фон ниже. */
  --green-900: #e8f2e3;
  --green-800: #8fd48f;
  --green-700: #6cc472;
  --green-600: #58b45f;
  --green-500: #46a04d;
  --green-100: #24401f;
  --green-50:  #1a3016;

  --tomato-600: #f2704a;
  --tomato-500: #f5825c;
  --yellow-500: #f0bb4a;

  --cream: #0f1d0d;
  --paper: #172a14;
  --ink-900: #eef2e6;
  --ink-700: #c2cdb8;
  --ink-500: #93a189;
  --line: #2a4526;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Шапка и подвал */
[data-theme="dark"] .site-header { background: rgba(15, 29, 13, .92); }
[data-theme="dark"] .site-footer { background: #0a1508; }
[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer a { color: #a8bda2; }
[data-theme="dark"] .site-footer h4 { color: #eef2e6; }
[data-theme="dark"] .footer-bottom { color: #7d9077; border-top-color: rgba(255,255,255,.09); }

/* Кнопки: фон стал светло-зелёным, значит текст на нём должен быть тёмным */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .add-btn,
[data-theme="dark"] .filter-chip.is-active,
[data-theme="dark"] .tab-switch button.is-active,
[data-theme="dark"] .step::before { color: #0d1a0b; }
[data-theme="dark"] .btn--outline:hover { color: #0d1a0b; }
[data-theme="dark"] .btn--accent,
[data-theme="dark"] .add-btn.is-added { color: #1a0d07; }
[data-theme="dark"] .btn--accent:hover { background: #e05e39; }
[data-theme="dark"] .btn--ghost { background: var(--paper); }

/* Баннеры и градиентные блоки — задаём фон явно, т.к. переменные перевернулись */
[data-theme="dark"] .cta-banner { background: linear-gradient(135deg, #1d3a1a, #0d1f0c); }
[data-theme="dark"] .cta-banner h2 { color: #eef2e6; }
[data-theme="dark"] .cta-banner p { color: #a8bda2; }
[data-theme="dark"] .brand__mark { background: linear-gradient(155deg, #3e9146, #1e4620); }
[data-theme="dark"] .hero__art,
[data-theme="dark"] .grow-scroll__visual { background: linear-gradient(160deg, #2c6b32, #12280f); }
[data-theme="dark"] .hero__badge { background: var(--paper); }

/* Плашки категорий под фото — приглушаем, иначе светят на тёмном фоне */
[data-theme="dark"] .tone-green-a { background: linear-gradient(160deg,#22401c,#16301a); }
[data-theme="dark"] .tone-green-b { background: linear-gradient(160deg,#254520,#193318); }
[data-theme="dark"] .tone-herb-a  { background: linear-gradient(160deg,#1f3a24,#152b1a); }
[data-theme="dark"] .tone-herb-b  { background: linear-gradient(160deg,#3a3520,#241f12); }
[data-theme="dark"] .tone-mix-a   { background: linear-gradient(160deg,#31401c,#1e2a11); }
[data-theme="dark"] .tone-mix-b   { background: linear-gradient(160deg,#3f2f1e,#271c11); }
[data-theme="dark"] .tone-veg-a   { background: linear-gradient(160deg,#20401f,#152e16); }
[data-theme="dark"] .tone-veg-b   { background: linear-gradient(160deg,#42281f,#291711); }
[data-theme="dark"] .category-intro__media { background: linear-gradient(160deg,#22401c,#16301a); }

/* Формы */
[data-theme="dark"] .form-row input:focus,
[data-theme="dark"] .form-row select:focus,
[data-theme="dark"] .form-row textarea:focus { background: #1d3419; }
[data-theme="dark"] .form-row input::placeholder,
[data-theme="dark"] .form-row textarea::placeholder { color: #6f7d68; }
[data-theme="dark"] .radio-tile.is-selected { background: var(--green-50); }

/* Стрелка селекта — в исходном SVG цвет захардкожен, перерисовываем светлым */
[data-theme="dark"] .catalog-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c2cdb8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* Тост: фон был ink-900 (тёмный), теперь он светлый — инвертируем текст */
[data-theme="dark"] .toast { background: #e8f2e3; color: #0f1d0d; }

/* Мобильное меню */
[data-theme="dark"] .mobile-nav { background: rgba(0, 0, 0, .65); }
[data-theme="dark"] .mobile-nav__panel { background: #142310; }

/* Кнопка переключения темы */
.theme-toggle { border: none; cursor: pointer; font-family: inherit; padding: 0; }
.mobile-nav__panel .theme-toggle {
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-nav__panel .theme-toggle:hover { background: var(--green-100); }

@media (max-width: 620px) {
  .header-actions .theme-toggle { display: none; }
}

/* =========================================
   Юридические документы и согласия
   ========================================= */

.legal-doc { max-width: 760px; }
.legal-doc h2 {
  font-size: 22px;
  margin-top: 38px;
  margin-bottom: 12px;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { font-size: 15px; line-height: 1.65; }
.legal-doc__meta { font-size: 13px; color: var(--ink-500); margin-bottom: 32px; }

.legal-list { margin: 0 0 18px; padding: 0; }
.legal-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-600);
}

/* Нумерованный вариант: порядок шагов важен, кружки его не передают.
   Убираем точку из .legal-list и возвращаем обычную нумерацию списка. */
ol.legal-list { padding-left: 20px; }
ol.legal-list li { padding-left: 4px; }
ol.legal-list li::before { content: none; }

/* Пометки для мест, которые нужно дозаполнить */
.legal-note {
  background: var(--green-50);
  border-left: 3px solid var(--yellow-500);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px !important;
  color: var(--ink-500) !important;
}

.legal-callout {
  margin-top: 44px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  border: 1.5px solid var(--line);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
}
.legal-callout strong { display: block; margin-bottom: 6px; color: var(--ink-900); }

/* ---------- Чекбокс согласия в формах ---------- */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
}
.consent-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green-700);
  cursor: pointer;
}
.consent-row label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-500);
  cursor: pointer;
  font-weight: 500;
}
.consent-row a { color: var(--green-800); text-decoration: underline; }
.consent-row a:hover { color: var(--green-700); }
.consent-row.has-error input[type="checkbox"] { outline: 2px solid var(--tomato-600); outline-offset: 2px; }
.consent-row.has-error label { color: var(--tomato-600); }

/* Подпись под кнопкой оформления: принятие условий продажи. Намеренно
   не галочка — согласие на обработку данных должно оставаться отдельным
   и единственным, что покупатель отмечает вручную. */
.form-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-500);
}
.form-hint a { color: var(--green-800); text-decoration: underline; }
.form-hint a:hover { color: var(--green-700); }

/* =========================================
   Рецепты
   ========================================= */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.recipe-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.recipe-card__media {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--green-50);
  overflow: hidden;
}
.recipe-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.recipe-card:hover .recipe-card__media img { transform: scale(1.05); }
.recipe-card__tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.92);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-800);
}
.recipe-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.recipe-card__body h3 { font-size: 19px; margin: 0; }
.recipe-card__body p {
  font-size: 13.5px;
  color: var(--ink-500);
  margin: 0;
  /* Ограничиваем описание тремя строками, чтобы карточки в ряду были одной высоты */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recipe-card__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px;
}
.recipe-meta { font-size: 12.5px; color: var(--ink-500); font-weight: 600; }
.recipe-card__cost {
  margin-left: auto;
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--green-800);
}

/* ---------- Страница рецепта ---------- */
.recipe-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 56px;
}
.recipe-head h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
.recipe-lead { font-size: 16.5px; color: var(--ink-700); }
.recipe-head__media {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--green-50);
}
.recipe-head__media img { width: 100%; height: 100%; object-fit: cover; }

.recipe-facts { display: flex; gap: 30px; margin-top: 26px; flex-wrap: wrap; }
.recipe-fact b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 26px;
  color: var(--green-800);
}
.recipe-fact span { font-size: 12.5px; color: var(--ink-500); }

.recipe-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
.recipe-body h2 { font-size: 24px; margin-bottom: 22px; }

.recipe-steps { counter-reset: step; padding: 0; margin: 0; list-style: none; }
.recipe-steps li {
  position: relative;
  padding-left: 52px;
  margin-bottom: 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-700);
}
.recipe-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-800);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- Список ингредиентов ---------- */
.ingredient {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.ingredient__title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-900);
  text-decoration: none;
}
.ingredient__title:hover { color: var(--green-700); text-decoration: underline; }
.ingredient__need { grid-column: 1; font-size: 12.5px; color: var(--ink-500); }
.ingredient__price {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--green-800);
  white-space: nowrap;
}

.extra-list { padding: 0; margin: 0; list-style: none; }
.extra-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 13.5px;
  color: var(--ink-500);
}
.extra-list li::before {
  content: "";
  position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-500);
  opacity: .5;
}

/* ---------- Блок «что приготовить» на странице товара ---------- */
.recipe-strip { display: flex; flex-direction: column; gap: 12px; }
.recipe-strip__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  text-decoration: none;
  transition: background .15s ease;
}
.recipe-strip__item:hover { background: var(--green-100); }
.recipe-strip__item img {
  width: 64px; height: 52px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.recipe-strip__text strong { display: block; font-size: 14.5px; color: var(--ink-900); }
.recipe-strip__text span { font-size: 12.5px; color: var(--ink-500); }

@media (max-width: 900px) {
  .recipe-head { grid-template-columns: 1fr; gap: 28px; }
  .recipe-head__media { order: -1; }
  .recipe-body { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Тёмная тема ---------- */
[data-theme="dark"] .recipe-card__tag { background: rgba(12, 26, 10, .82); color: #9ad89b; }
[data-theme="dark"] .recipe-card__media,
[data-theme="dark"] .recipe-head__media { background: var(--green-50); }

/* Фото товара в корзине: плашка становится контейнером для картинки,
   при отсутствии фото под ней остаётся эмодзи-заглушка */
.cart-item__media { position: relative; overflow: hidden; }

/* Заглушка, если фото рецепта ещё не готово: под картинкой лежит эмодзи,
   при onerror картинка убирается и остаётся он */
.recipe-card__media::after,
.recipe-head__media::after {
  content: "🍽";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  opacity: .35;
  z-index: 0;
}
.recipe-head__media { position: relative; }
.recipe-card__media img,
.recipe-head__media img { position: relative; z-index: 1; }

/* Блок вопрос-ответ на странице для заведений */
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item h4 { font-family: 'Manrope', sans-serif; font-size: 15px; margin-bottom: 6px; color: var(--ink-900); }
.faq-item p { font-size: 14px; margin: 0; }

/* =========================================
   Страница 404 и мини-игра
   ========================================= */

.notfound { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.notfound__code {
  font-family: 'Fraunces', serif;
  font-size: clamp(90px, 16vw, 168px);
  line-height: 1;
  font-weight: 700;
  color: var(--green-700);
  opacity: .16;
  margin-bottom: -18px;
  letter-spacing: -.02em;
}
.notfound h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 14px; }
.notfound__lead { font-size: 16px; margin-bottom: 28px; }

.game {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.game__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.game__scores { display: flex; gap: 22px; }
.game__score { text-align: right; }
.game__score b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  color: var(--green-800);
  line-height: 1.1;
}
.game__score span { font-size: 12px; color: var(--ink-500); }

.game__stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--green-50);
  /* Курсор-палец подсказывает, что по полю можно кликать для прыжка */
  cursor: pointer;
  touch-action: manipulation;
}
#game-canvas { display: block; width: 100%; }

.game__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Запасной вариант для браузеров без color-mix */
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  text-align: center;
  padding: 20px;
}
.game__overlay.is-hidden { display: none; }
.game__overlay-inner p { margin: 0 0 14px; font-size: 14.5px; }
.game__emoji { font-size: 44px; margin-bottom: 8px; }

@media (max-width: 620px) {
  .game { padding: 16px; }
  .game__head { justify-content: space-between; }
  .game__score b { font-size: 20px; }
}

/* =========================================
   Панель управления (admin.html)
   ========================================= */

/* Вкладок стало четыре — прежние 420 px их уже не вмещали.
   На узком экране переносим строкой, скруглённая «таблетка» при этом
   не ломается: скругление у самого блока, а не у каждой кнопки */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--green-50);
  border-radius: 20px;
  padding: 4px;
  margin-bottom: 26px;
  max-width: 680px;
}
.admin-tabs button {
  flex: 1 1 auto; border: none; background: transparent; padding: 11px 14px;
  border-radius: 999px; font-weight: 700; font-size: 14px;
  color: var(--ink-700); cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap;
}
.admin-tabs button.is-active { background: var(--green-700); color: #fff; }

/* Счётчик непрочитанных прямо на вкладке: иначе о новом обращении
   узнаёшь, только если специально в неё заглянул */
.tab-badge {
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--tomato-600); color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 19px;
  text-align: center;
}
.tab-badge[hidden] { display: none; }

.admin-panel { display: none; }
.admin-panel.is-active { display: block; }

.admin-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.admin-toolbar__actions { display: flex; gap: 8px; }

.admin-group { margin-bottom: 30px; }
.admin-group h3 { font-size: 17px; margin-bottom: 14px; }
.admin-rows { display: flex; flex-direction: column; gap: 8px; }

.admin-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 16px 10px 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.admin-row:hover { border-color: var(--green-600); }
.admin-row.is-off { background: var(--cream); }
.admin-row.is-off .admin-row__media { filter: grayscale(1); opacity: .5; }
.admin-row.is-off .admin-row__text strong { color: var(--ink-500); }

.admin-row__media {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; position: relative; overflow: hidden;
}
.admin-row__media .media-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.admin-row__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-row__text strong { font-size: 14.5px; }
.admin-row__text span { font-size: 12.5px; color: var(--ink-500); }
.admin-row__state {
  font-size: 12px; font-weight: 700; color: var(--ink-500);
  white-space: nowrap;
}
.admin-row.is-off .admin-row__state { color: var(--tomato-600); }

/* Переключатель. Настоящий чекбокс спрятан, но остаётся доступным
   с клавиатуры — рисуем только оформление поверх него. */
.switch { position: relative; flex-shrink: 0; display: inline-flex; }
.switch input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.switch__track {
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--line); display: block; position: relative;
  transition: background .18s ease;
}
.switch__knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.switch input:checked + .switch__track { background: var(--green-600); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--green-800); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }

/* Заказы в админке */
.admin-order {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.admin-order.status-new { border-left-color: var(--green-600); }
.admin-order.status-confirmed { border-left-color: #6aa9e0; }
.admin-order.status-collecting { border-left-color: #e0a94a; }
.admin-order.status-done { border-left-color: var(--ink-500); opacity: .75; }
.admin-order.status-canceled { border-left-color: var(--tomato-600); opacity: .6; }

.admin-order__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.admin-order__head strong { font-size: 15.5px; }
.admin-order__date { font-size: 12.5px; color: var(--ink-500); margin-left: 10px; }
.admin-order__head select {
  padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--cream);
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--ink-900); cursor: pointer;
}
.admin-order__body { display: flex; flex-direction: column; gap: 5px; }
.admin-order__total { font-weight: 800; font-size: 16px; margin: 6px 0 0; }

@media (max-width: 620px) {
  .admin-tabs { max-width: none; }
  .admin-row { padding: 10px; gap: 10px; }
  .admin-row__state { display: none; }
  .admin-order__head { flex-direction: column; align-items: flex-start; }
  .admin-order__head select { width: 100%; }
}

/* =========================================
   Статусы заказов, архив, статистика
   ========================================= */

/* Цветные плашки статусов. Цвет тот же, что у полоски слева у карточки,
   чтобы список читался с одного взгляда. */
.status-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.status-chip--new       { background: var(--green-100); color: var(--green-800); border-color: var(--green-600); }
.status-chip--confirmed { background: #e4effa; color: #2c5d8f; border-color: #6aa9e0; }
.status-chip--collecting{ background: #fdf0dc; color: #8a5a12; border-color: #e0a94a; }
.status-chip--done      { background: #eceff0; color: var(--ink-700); border-color: var(--ink-500); }
.status-chip--canceled  { background: #fde9e4; color: #9c3218; border-color: var(--tomato-600); }

.admin-order__ident { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-order__ident .admin-order__date { margin-left: 0; }
.admin-order__actions { display: flex; align-items: center; gap: 8px; }

/* Кнопка удаления. Красной делаем только при наведении: в спокойном
   состоянии она не должна притягивать взгляд и провоцировать случайный клик */
.icon-danger {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  font-size: 13px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.icon-danger:hover {
  color: #fff;
  background: var(--tomato-600);
  border-color: var(--tomato-600);
}
.icon-danger:disabled { opacity: .5; cursor: not-allowed; }

/* Карточка в архиве: приглушена и с пунктиром, чтобы не путалась с живыми */
/* Учётная запись с доступом к панели — выделяем той же полосой слева,
   что и заказы по статусам, чтобы список читался одним взглядом */
.admin-order.is-admin-user { border-left-color: #6aa9e0; }

/* Временный пароль после сброса. Крупно и моноширинно: его диктуют
   по телефону, и «эм» от «эн» надо различать с одного взгляда */
.temp-password {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--green-50, #eef4ea);
  border: 1.5px dashed var(--green-600);
}
.temp-password[hidden] { display: none; }
.temp-password code {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 20px;
  letter-spacing: 2px;
  user-select: all;
}
.temp-password p { margin-top: 6px; }

.admin-order.is-archived {
  opacity: .7;
  border-style: dashed;
}

.admin-tabs__link {
  display: flex; align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  color: var(--green-800);
  white-space: nowrap;
}
.admin-tabs__link:hover { background: rgba(255,255,255,.6); }

/* ---------- Сводка ---------- */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.stat-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card--accent { border-color: var(--green-600); background: var(--green-50); }
.stat-card__label { font-size: 12.5px; font-weight: 700; color: var(--ink-500); }
.stat-card b {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink-900);
}
.stat-card__hint { font-size: 11.5px; color: var(--ink-500); }

/* ---------- Диаграмма ---------- */
.chart-block {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.chart-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}

.period-switch { display: flex; gap: 4px; background: var(--green-50); border-radius: 999px; padding: 4px; }
.period-switch button {
  border: none; background: transparent; padding: 9px 18px;
  border-radius: 999px; font-weight: 700; font-size: 13.5px;
  color: var(--ink-700); cursor: pointer; font-family: inherit;
}
.period-switch button.is-active { background: var(--green-700); color: #fff; }

.chart-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-500);
  margin-bottom: 10px;
}
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend__box { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-legend__box--done  { background: var(--green-600); }
.chart-legend__box--other { background: var(--green-100); }
.chart-legend__box--line  { background: var(--tomato-600); height: 3px; border-radius: 2px; }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-axis { stroke: var(--line); stroke-width: 1.5; }
.chart-bar--other { fill: var(--green-100); }
.chart-bar--done  { fill: var(--green-600); }
.chart-xlabel {
  font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600;
  fill: var(--ink-500); text-anchor: middle;
}
.chart-value {
  font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 800;
  fill: var(--ink-700); text-anchor: middle;
}
.chart-line {
  fill: none; stroke: var(--tomato-600); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart-dot { fill: var(--tomato-600); }

@media (max-width: 620px) {
  .chart-block { padding: 16px; }
  .chart-block__head { flex-direction: column; align-items: flex-start; }
  .period-switch { width: 100%; }
  .period-switch button { flex: 1; padding: 9px 8px; }
  .admin-order__actions { width: 100%; }
  .admin-order__actions select { flex: 1; }
  .chart-value { display: none; }
}

/* Подтверждение удаления внутри карточки заказа.
   Браузерный confirm() не используем: его можно запретить одной галочкой
   в настройках сайта, после чего он молча возвращает false и кнопка
   удаления перестаёт работать без всяких сообщений. */
.btn--danger { background: var(--tomato-600); color: #fff; }
.btn--danger:hover { background: #b8341a; }

.admin-order__confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff4ed;
  border: 1.5px solid #f3c894;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-900);
}
.admin-order__confirm[hidden] { display: none; }
.admin-order__confirm span:first-child { flex: 1; min-width: 220px; }
.admin-order__confirm-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 620px) {
  .admin-order__confirm-actions { width: 100%; }
  .admin-order__confirm-actions .btn { flex: 1; }
}

/* ---------- Редактор товара в панели ---------- */
.admin-item {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Строка товара внутри .admin-item — рамку и фон рисует контейнер */
.admin-item .admin-row {
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: default;
}
.admin-item .admin-row:hover { border-color: transparent; }
.admin-item .switch { cursor: pointer; }

.tag-own {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: middle;
}

.product-form {
  border-top: 1.5px dashed var(--line);
  padding: 18px 16px 16px;
  background: var(--cream);
}
.product-form[hidden] { display: none; }
.product-form h3 { font-size: 17px; margin-bottom: 16px; }
.product-form .form-row { margin-bottom: 14px; }
.product-form code {
  background: var(--green-50);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* Форма нового товара стоит отдельным блоком над списком */
#product-new-form {
  border: 1.5px solid var(--green-600);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

@media (max-width: 620px) {
  .product-form .form-grid-2 { grid-template-columns: 1fr; }
  .admin-item .admin-row { flex-wrap: wrap; }
  .admin-item .admin-row [data-edit] { order: 3; }
}

/* ---------- Полоса «нет связи» ----------
   Появляется, когда сайт не достучался до сервера. Мы намеренно показываем
   данные из кеша вместо пустого магазина — значит обязаны предупредить,
   что они могут быть несвежими. */
.offline-bar {
  background: #fff4ed;
  border-bottom: 1.5px solid #f3c894;
  color: var(--ink-900);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 11px 20px;
  text-align: center;
}
.offline-bar span { font-weight: 800; color: var(--tomato-600); }

@media (max-width: 620px) {
  .offline-bar { padding: 10px 14px; font-size: 12.5px; text-align: left; }
}

/* Плашка «статус заказа изменился». Зелёная, а не оранжевая, как у обрыва
   связи: это хорошая новость, а не предупреждение о поломке */
.update-bar {
  position: relative;
  background: var(--green-50);
  border-bottom: 1.5px solid var(--green-600);
  color: var(--ink-900);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 11px 44px 11px 20px;
  text-align: center;
}
.update-bar span { font-weight: 800; color: var(--green-800); }
.update-bar a { color: var(--green-800); text-decoration: underline; margin-left: 6px; }
.update-bar__close {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--ink-500);
  padding: 6px 8px;
}
.update-bar__close:hover { color: var(--ink-900); }

@media (max-width: 620px) {
  .update-bar { padding: 10px 40px 10px 14px; font-size: 12.5px; text-align: left; }
}

/* Точка на иконке кабинета: «есть новости». Размер и посадка те же, что
   у счётчика корзины рядом, иначе они смотрелись бы вразнобой */
.notify-dot {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--tomato-600);
  border: 2px solid var(--cream);
}
[data-theme="dark"] .notify-dot { border-color: var(--paper); }