/* ——— Цвета ———

   Вся палитра сайта задана здесь. Поменять фирменный цвет —
   значит поменять эти строки, а не искать оттенки по всему файлу.
   Серо-зелёные цвета текста намеренно оставлены на месте:
   они читаются нейтрально и от палитры не зависят. */

:root {
  --brand-darkest: #162331;       /* самый тёмный — подвал */
  --brand-dark: #1c2c3d;          /* основной тёмный — шапка, первый экран */
  --brand-dark-2: #243a51;        /* переход в градиенте первого экрана */
  --brand-deep: #1c324a;          /* текст на светло-зелёном фоне */
  --brand: #a8701c;               /* акцент действия — кнопки и главная цена */
  --brand-hover: #8f5e16;         /* акцент при наведении */
  --brand-light: #d9a441;         /* подчёркивание активного пункта меню */
  --brand-pale: #e8c48a;          /* надпись над заголовком первого экрана */
  --brand-on-dark: #cfd9e3;       /* текст на тёмном */
  --brand-on-dark-2: #d6dfe8;     /* текст на тёмном, второй */
  --brand-tint: #e7ecf2;          /* светлая заливка */
  --brand-tint-2: #f2f4f7;        /* светлая заливка, вторая */
  --brand-tint-3: #eef0f3;        /* фон под фотографиями */
  --brand-tint-4: #e6eaef;        /* светлая заливка, третья */
  --brand-tint-5: #f7f8f9;        /* почти белая заливка */
  --brand-border: #b7c9dc;        /* рамка светлого блока */
  --brand-border-2: #dfe3e8;      /* рамка таблицы */
  --page-bg: #f4f5f6;             /* фон страницы */

  /* Ссылки — своим цветом, не акцентом. Янтарь оставлен за действием
     (кнопка «В корзину»): если им красить и ссылки, страница контактов
     превращается в россыпь янтарных подчёркиваний, и кнопка перестаёт
     быть главной. */
  --link: #2f5d8a;
  --link-hover: #24486b;

  /* Смысловые цвета. Они говорят о состоянии товара и от фирменного
     цвета не зависят: «в наличии» должно оставаться зелёным, даже если
     кнопки станут другого цвета. */
  --ok: #5b7285;                  /* в наличии — спокойный, не кричит */
  --warn: #c2551c;                /* осталось мало — оранжевый, не путается с янтарём */
  --danger: #a52a1a;              /* нет в наличии, ошибки */
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: var(--page-bg);
  color: #1c232a;
  /* Длинное слово переносится, а не вылезает за край. У нас такие есть:
     почта info@агрогласс-рыбалка.рф — 26 знаков без пробела, и на узком
     экране она утягивала бы страницу вбок. Правило общее намеренно:
     чинить каждое место по отдельности — значит однажды забыть. */
  overflow-wrap: break-word;
}

header {
  color: white;
  padding: 16px 24px;
  /* Шапка — стеклянная панель поверх страницы: на полтона светлее фона,
     тонкий блик по верхней грани, тень снизу. Цветных черт нет — янтарная
     линия резала страницу пополам (владелец, 19 сентября 2026). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10),
                              rgba(255, 255, 255, 0) 60%), #22344c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 6px 22px rgba(0, 0, 0, 0.34);
  position: relative;
  z-index: 5;
}

header h1 {
  margin: 0;
  font-size: 22px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
}

.main-nav {
  display: flex;
  gap: 20px;
}

.main-nav a {
  color: var(--brand-on-dark);
  text-decoration: none;
  font-size: 15px;
  padding-bottom: 2px;
}

.main-nav a:hover {
  color: white;
}

.main-nav a.active {
  color: white;
  border-bottom: 2px solid var(--brand-light);
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* Первый экран. Тёмный, во всю ширину — продолжает шапку, чтобы сайт
   начинался уверенно, а не белой карточкой на сером фоне. */
.hero {
  /* Ровный тон, без перехода в янтарный. Перелив остался внизу страницы,
     под «Берут чаще всего»: на входе он читался пятном, а не подписью
     (решение владельца, 19 сентября 2026). */
  background: var(--brand-dark);
  color: white;
}

/* Первый экран — одна колонка по центру. Логотип отсюда убран: чёрно-белая
   гравюра на белом фоне сидела на тёмном как заплатка и спорила с заголовком. */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  /* Сверху 34, а не 52: надпись «Собственное производство» мелкая, и такой
     отступ вокруг неё читался пустотой, а всё ниже уезжало под сгиб экрана
     (19 сентября 2026). Снизу оставлено 60 — первому экрану есть чем дышать. */
  padding: 34px 24px 60px;
}

/* Колонка широкая намеренно: заголовок встаёт в две строки вместо трёх,
   и первый экран не забирает пол-страницы. */
.hero-text {
  max-width: 74ch;
}

.hero-eyebrow {
  margin: 0 0 12px;
  color: var(--brand-pale);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* clamp: заголовок сам ужимается на телефоне и разворачивается
   на большом экране — без отдельных правил под каждый размер. */
.hero-text h1 {
  margin: 0 0 14px;
  /* Первым идёт простой размер для браузеров, не знающих clamp():
     без него заголовок падал до размера по умолчанию. */
  font-size: 25px;
  font-size: clamp(25px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}




.btn-ghost {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Три коротких факта под первым экраном: цифры убеждают быстрее текста. */
.trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: -32px;   /* приподнимаем на тёмный блок — связывает секции */
  margin-bottom: 8px;
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(28, 61, 46, 0.1);
}

.trust-value {
  color: var(--brand);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
}

.trust-label {
  color: #5a626b;
  font-size: 14px;
  line-height: 1.5;
}










/* Ассортимент: одиннадцать направлений плотной сеткой. Здесь важна не
   красота карточек, а чтобы человек за пару секунд увидел, что у нас есть
   не только кукуруза, — и нашёл своё слово: макуха, бойлы, наживка. */
.lineup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* Отдельные карточки, а не сетка с линиями: направлений одиннадцать,
   в ряд по четыре — последняя ячейка остаётся пустой, и заливка сетки
   рисовала бы там серый квадрат. */
.lineup-item {
  padding: 14px 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  color: #5a626b;
  font-size: 14px;
  line-height: 1.5;
}

.lineup-item strong {
  display: block;
  margin-bottom: 3px;
  color: #1c232a;
  font-size: 15px;
}

/* Счётчик в карточке товара — вместо кнопки, когда товар уже набран.
   Ширина как у кнопки, чтобы карточка не дёргалась при добавлении. */
.card-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--brand-border-2);
  border-radius: 4px;
}

.card-qty button {
  width: 32px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--brand-tint-2);
  color: var(--brand-dark);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.card-qty button:hover:not(:disabled) {
  background: var(--brand-tint);
}

.card-qty button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.card-qty-value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Полоса внизу экрана: сколько набрано и переход к оформлению.
   Видна только на телефоне — на широком экране корзина и так рядом. */
.cart-bar {
  display: none;
}

.cart-bar[hidden] {
  display: none !important;
}

/* Список причин: плотнее карточек, читается сплошным потоком. */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reasons li {
  padding: 14px 0 14px 20px;
  border-left: 3px solid var(--brand-on-dark);
  color: #5a626b;
  font-size: 15px;
  line-height: 1.55;
}

.reasons strong {
  display: block;
  margin-bottom: 4px;
  color: #1c232a;
  font-size: 16px;
}

/* Сообщения покупателю: подтверждение почты и подобное */
.notice {
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
}

.notice-warn {
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  color: #6b4e12;
}

.notice-ok {
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  color: var(--brand-deep);
}

.notice-form {
  margin-top: 8px;
}

.notice .link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ——— Страница отдельного товара ——— */

.breadcrumbs {
  margin: 0 0 16px;
  color: #7c858f;
  font-size: 14px;
}

.breadcrumbs a {
  color: var(--link);
  text-decoration: none;
}

.breadcrumbs-sep {
  margin: 0 6px;
}

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Крупное фото товара: вписываем целиком, ничего не обрезая.
   Высокое вертикальное фото иначе растянуло бы страницу на пол-экрана. */
.product-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
  background: var(--brand-tint-3);
}

.product-photo-empty.large {
  aspect-ratio: 1 / 1;
}

.product-photo-empty.large img { max-width: 48%; max-height: 48%; }

/* Ракурсы товара: миниатюры под главным фото */
.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.photo-thumb {
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: var(--brand-tint-3);
  overflow: hidden;
  cursor: pointer;
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-thumb.active {
  border-color: var(--brand);
}

.photo-thumb:hover {
  border-color: var(--brand-pale);
}

.product-info h1 {
  margin: 0 0 12px;
  font-size: 22px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}

.product-short {
  margin: 0 0 20px;
  color: #4a525b;
  font-size: 16px;
  line-height: 1.6;
}

.product-price {
  /* Те же ровные цифры, что и в каталоге: цена на странице товара
     не должна отличаться от цены в карточке, откуда на неё пришли. */
  font-family: "PT Serif", "Times New Roman", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.product-tiers {
  background: var(--brand-tint-2);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.product-tiers-title {
  display: block;
  margin-bottom: 6px;
  color: #1c232a;
  font-size: 13px;
  font-weight: 600;
}

.product-info .stock {
  margin-bottom: 16px;
  color: var(--ok);
  font-size: 15px;
}

.product-info .stock.out {
  color: var(--danger);
}

.add-to-cart {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.add-result {
  margin: 12px 0 0;
  color: var(--brand);
  font-size: 15px;
  min-height: 20px;
}

.add-result a {
  color: var(--link);
}

/* Полное описание набирают в обычном поле, переносами строк.
   pre-line сохраняет их, не превращая текст в сплошную простыню. */
.product-description-text {
  white-space: pre-line;
  max-width: 75ch;
  color: #3c434c;
  font-size: 16px;
  line-height: 1.7;
}

/* Подсказка про оптовую скидку под итогом корзины. Обычная — приглушённая
   строка, чтобы не спорить с суммой; когда скидка уже действует, она
   становится заметнее: это хорошая новость, и покупатель должен её увидеть. */
.cart-bulk-hint {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: #5a626c;
}

.cart-bulk-hint.active {
  color: var(--brand-dark);
  font-weight: 600;
}

/* Общая скидка на странице товара. Не янтарная плашка: янтарь в карточке
   должен быть один, и он занят кнопкой «в корзину». Здесь тонкая рамка
   и спокойный фон — предложение видно, но взгляд оно не перетягивает. */
.product-bulk {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--brand);
  border-radius: 4px;
  background: #fdf8ef;
  line-height: 1.5;
}

.product-bulk b {
  display: block;
  font-size: 15px;
  color: #3c434c;
}

.product-bulk-price {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #5a626c;
}

/* Состав — перечень, а не проза: набран мельче и приглушённее описания,
   чтобы читался как справка. Переносы строк сохраняем так же: состав
   иногда вводят в столбик. */
.product-composition-text {
  white-space: pre-line;
  max-width: 75ch;
  color: #5a626c;
  font-size: 15px;
  line-height: 1.6;
}

.back-link {
  margin-top: 32px;
}

.back-link a {
  color: var(--link);
}

/* Кликабельная часть карточки в каталоге */
.product-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.product-link:hover h3 {
  color: var(--link);
}

/* Явная ссылка на страницу товара: по одному только фото и заголовку
   не видно, что карточка кликабельная. */


/* Последний блок страницы: человек дочитал — сразу даём, куда идти. */
.cta {
  margin-top: 48px;
  padding: 32px;
  border-radius: 8px;
  background: var(--brand-dark);
  color: white;
  text-align: center;
}

.cta h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-size: clamp(22px, 3vw, 28px);
}


.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.btn-primary {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 24px;
  background: var(--brand);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
}

.btn-primary:hover {
  background: var(--brand-hover);
}

.section-title {
  margin: 40px 0 16px;
  font-size: 22px;
}

/* Первый заголовок на странице: отступ сверху даёт сама страница,
   иначе получается двойной провал под шапкой. */
.section-title.first {
  margin-top: 0;
}

/* Строка-пояснение под заголовком раздела. Отрицательный отступ сверху
   подбирает провал, который оставляет сам заголовок: иначе строка висит
   отдельно, а она относится к заголовку. Ширину ограничиваем — длинная
   строка через весь экран читается тяжело. */
.section-lead {
  margin: -8px 0 16px;
  max-width: 60ch;
  color: #5a626b;
  font-size: 15px;
  line-height: 1.55;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Карточка в разделе одна — не растягиваем её во всю ширину экрана.
   Сетка сама схлопывает пустые колонки, и одиночный блок расплывался
   на всю строку: выглядело как ряд, из которого что-то вынули.
   Метка проставлена в разметке, а не подобрана правилом :has(...):
   его понимают браузеры не старше 2022 года, у остальных карточка
   всё равно расплывалась. */
.features.single {
  grid-template-columns: minmax(0, 560px);
}

.feature-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.feature-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.feature-card p {
  margin: 0;
  font-size: 14px;
  color: #5a626b;
  line-height: 1.5;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.contact-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.contact-card h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

/* Подсветка при наведении: без неё ссылка не отзывается на курсор,
   и непонятно, нажимается она или это просто цветной текст. */
.breadcrumbs a:hover,
.back-link a:hover,
.contact-card a:hover,
.consent-line a:hover,
.auth-switch a:hover,
.settings-link a:hover,
.cart-login-note a:hover {
  color: var(--link-hover);
}

.contact-card a {
  color: var(--link);
}

.contact-line {
  margin-bottom: 8px;
  font-size: 15px;
}

.schedule-note {
  color: #5a626b;
  font-size: 14px;
  line-height: 1.6;
}

footer {
  background: linear-gradient(165deg, var(--brand-dark) 0%, var(--brand-darkest) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--brand-on-dark);
  padding: 26px 24px;
  margin-top: 48px;
  font-size: 14px;
}

/* Отсвет янтаря — только на главной. Там над подвалом стоит блок товаров,
   который кончается янтарным, и свет падает с него, как на стекло.
   На остальных страницах янтаря сверху нет, и отсвет брался бы ниоткуда
   (владелец, 19 сентября 2026). */
.page-home footer {
  background:
    linear-gradient(180deg, rgba(168, 112, 28, 0.55),
                    rgba(168, 112, 28, 0) 45%),
    linear-gradient(165deg, var(--brand-dark) 0%, var(--brand-darkest) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.35);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-inner p {
  margin: 0 0 8px;
}

.footer-inner .disclaimer {
  color: #9fabb8;
  font-size: 13px;
  margin: 0 0 12px;
}

/* Текст слева, гравюра справа на свободном месте: подвал не растёт
   в высоту, а логотип получает своё место. На узком экране уходит вниз. */
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-text {
  flex: 1;
  min-width: 260px;
}

.footer-logo {
  width: 94px;
  height: auto;
  flex-shrink: 0;
  /* Гравюра тонкая, в полную силу белого она спорит с текстом */
  opacity: 0.85;
}

.footer-links a {
  color: var(--brand-on-dark);
  text-decoration: underline;
}

.footer-links a:hover {
  color: white;
}

.footer-sep {
  margin: 0 8px;
  color: #6f7c8b;
}

.footer-copy {
  margin: 8px 0 0;
  color: #7e8b9a;
  font-size: 13px;
}

/* Галочка согласия: в одну строку с текстом, флажок не съезжает */
.consent-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4a525b;
  cursor: pointer;
}

.consent-line input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.consent-line a {
  color: var(--link);
}

/* ——— Страница политики ——— */

.policy-date {
  color: #7c858f;
  font-size: 14px;
  margin-top: -8px;
}

.page.narrow h2,
.page.policy h2 {
  margin: 28px 0 10px;
  font-size: 19px;
}

.page.narrow p,
.page.narrow li,
.page.policy p,
.page.policy li {
  line-height: 1.7;
  color: #3c434c;
}

/* Политика занимает всю ширину страницы, как обычный документ,
   а не узкую колонку. */
.page.policy {
  background: white;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-top: 24px;
  margin-bottom: 24px;
}

.page.policy ul {
  padding-left: 22px;
}







/* Строка каталога: фильтр — товары — корзина.

   max-width и авто-поля обязательны: без них на широком экране строка
   растягивалась во всю ширину, а на узком три колонки выдавливали друг
   друга за край, и фильтр уезжал влево за экран.

   flex-wrap нужен для средних экранов: там фильтр встаёт отдельной
   строкой сверху, а товары с корзиной остаются в ряд. */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: flex-start;
}

/* min-width: 0 обязателен. По умолчанию гибкий элемент не сжимается
   меньше своего содержимого, и сетка товаров распирала бы строку. */
.catalog {
  flex: 1;
  min-width: 0;
}

/* ——— Порядок выпадающим списком ———
   Подписи «Порядок» нет: названия говорят сами за себя, а полоса
   из четырёх кнопок занимала строку целиком. Так это сделано
   в магазинах снастей. */
.sort-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.sort-pick select {
  padding: 8px 12px;
  border: 1px solid var(--brand-border-2);
  border-radius: 4px;
  background: white;
  color: #1c232a;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.sort-pick select:hover { border-color: var(--brand-dark); }

.sort-pick button {
  padding: 8px 14px;
  border: 1px solid var(--brand-border-2);
  border-radius: 4px;
  background: white;
  color: var(--brand-dark);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

/* Скрипт прячет кнопку, когда берётся отправлять форму сам.
   Обычного правила браузера мало: у кнопки задан display. */
.sort-pick button[hidden] { display: none; }

/* Число товаров рядом с заголовком — сразу видно, велик ли отбор. */
.section-title .count {
  margin-left: 10px;
  color: #9aa5ae;
  font-size: 16px;
  font-weight: 400;
}

.no-flex-gap .sort-pick > * { margin-right: 8px; }
.no-flex-gap .sort-pick > *:last-child { margin-right: 0; }

.categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.categories button {
  padding: 8px 14px;
  border: 1px solid var(--brand-dark);
  background: white;
  color: var(--brand-dark);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.categories button.active {
  background: var(--brand-dark);
  color: white;
}

/* Каталог на белом. Серый фон нужен, когда содержимое разложено по
   белым плашкам — он их отделяет. Здесь плашек нет, и на сером фоне
   страница выглядела бы выцветшей. */
body.page-catalog {
  background: #fff;
}

/* Корзина держалась на тени, а на белом тень почти не видна —
   отделяем её волосяной рамкой. */
body.page-catalog .cart {
  border: 1px solid var(--brand-border-2);
  box-shadow: none;
}

/* ——— Фильтр колонкой слева ———
   Так устроены магазины снастей: слева отбор, справа корзина, посередине
   товар. Всё ссылками, а не кнопками скрипта — работает без JavaScript,
   отобранную страницу видит поисковик, и её можно дать ссылкой.

   Числа рядом с названиями считаются по всему каталогу, а не по уже
   отобранному куску: иначе они прыгали бы при каждом нажатии. */
.filter-box {
  flex: 0 1 190px;
  width: 190px;
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: 24px;
  font-size: 14px;
}

/* Заголовок нужен только телефону — там колонка сворачивается в строку.
   На большом экране панель всегда раскрыта, и заголовок ни к чему. */
.filter-box > summary {
  display: none;
}

.filter-group + .filter-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--brand-border-2);
}

.filter-title {
  display: block;
  margin-bottom: 7px;
  color: #6c7783;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Строка отбора: квадратик, название, число справа. Ссылка, а не кнопка,
   поэтому подчёркивание снимаем, а цвет берём обычный текстовый. */
.filter-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  color: #1c232a;
  text-decoration: none;
  line-height: 1.35;
}

.filter-row:hover { color: var(--brand-dark); }

.filter-mark {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  border: 1px solid #c3ced7;
  border-radius: 4px;
  background: white;
}

.filter-row:hover .filter-mark { border-color: var(--brand-dark); }

/* Выбранный отбор: квадратик залит фирменным тёмным, подпись потемнела.
   Галочку внутри не рисуем — на 13 пикселях она превращается в кляксу,
   а сплошная заливка читается и на плохом экране. */
.filter-row.on { font-weight: 600; }
.filter-row.on .filter-mark {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.filter-count {
  margin-left: auto;
  padding-left: 8px;
  color: #8a95a0;
  font-size: 12px;
}

/* Отбор ничего не нашёл. Пустая сетка выглядит поломкой, поэтому
   объясняем словами и даём выход одним нажатием. */
.empty-catalog {
  margin: 0 0 20px;
  padding: 18px 0;
  color: #6c7783;
}

/* Скрытое сообщение должно оставаться скрытым: у абзаца свой display,
   и обычного правила браузера для hidden хватает не везде. */
.empty-catalog[hidden] { display: none; }

/* Трём колонкам тесно раньше, чем фильтр уезжает наверх: при 1100
   карточка становится уже 240 пикселей, и название лезет в три строки. */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* На узком экране колонка становится сворачиваемой строкой над товарами.
   Порог поднимали до 1100 — вернули обратно: на ноутбуке фильтр слева
   выглядит нормально, а уезжала страница не из-за него. */
@media (max-width: 860px) {
  .filter-box {
    flex: 1 1 100%;
    width: 100%;
    position: static;
    margin-bottom: 4px;
    padding: 10px 12px;
    border: 1px solid var(--brand-border-2);
    border-radius: 8px;
  }

  /* Заголовок появляется вместе со строкой: раскрытый фильтр на всю
     ширину занимал бы пол-экрана, и до товаров пришлось бы листать. */
  .filter-box > summary {
    display: block;
    cursor: pointer;
    font-weight: 600;
    color: var(--brand-dark);
  }

  .filter-box[open] > summary {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brand-border-2);
  }

  /* Группы в две колонки — так раскрытый фильтр занимает пол-экрана,
     а не полтора. */
  .filter-group + .filter-group {
    margin-top: 12px;
    padding-top: 10px;
  }
}

/* ——— Выбор фасовки на карточке товара ———
   Кнопками, а не выпадающим списком: цена видна сразу у всех объёмов,
   без единого нажатия. У зарубежных магазинов список, и там цену
   узнаёшь только после выбора — это их слабое место, не наше. */
.size-pick { margin: 4px 0 16px; }

.size-pick-title {
  display: block;
  margin-bottom: 8px;
  color: #6c7783;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.size-row { display: flex; flex-wrap: wrap; gap: 8px; }

.size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 14px;
  border: 1px solid var(--brand-border-2);
  border-radius: 4px;
  background: white;
  color: #1c232a;
  text-decoration: none;
  line-height: 1.2;
}

.size-btn b { font-size: 14px; font-weight: 700; }
.size-btn i { font-style: normal; font-size: 11.5px; color: #6c7783; }

.size-btn:hover { border-color: var(--brand-dark); }

/* Выбранная фасовка — заливкой, а не рамкой: рамку на маленькой кнопке
   легко не заметить. */
.size-btn.on {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: white;
  cursor: default;
}
.size-btn.on i { color: var(--brand-on-dark); }

/* Закончившаяся фасовка видна, но не нажимается: покупателю важно знать,
   что такой объём вообще бывает. Пунктир — чтобы отличалась на ощупь
   даже без цвета. */
.size-btn.out {
  border-style: dashed;
  color: #9aa5ae;
  cursor: not-allowed;
}
.size-btn.out i { color: #b3bcc4; }

/* Кнопки объёмов в карточке каталога. Подписью покупатель не понимал,
   что фасовку можно выбрать здесь же, и «В корзину» молча клало самую
   крупную. Кнопки мелкие и тонкие: в карточке уже есть янтарная кнопка
   действия, и второй сильный элемент забрал бы у неё внимание.

   Классы свои, а не общие со страницей товара: там .size-pick — обёртка
   с заголовком, и одно имя на два разных блока ломало бы её вёрстку. */
.card-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.card-size {
  /* Одинаковая ширина у всех ячеек: «1 кг» короче «0,2 л», и без
     min-width ряд выглядел лесенкой из разных прямоугольников.
     Текст по центру — иначе короткий прижимается к краю. */
  min-width: 52px;
  padding: 2px 7px;
  border: 1px solid var(--brand-border-2);
  border-radius: 4px;
  color: #5a626c;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.card-size:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* Выбранная — заливкой, а не янтарём: янтарь остаётся за действием. */
.card-size.on {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: white;
}

/* Закончившийся объём виден, но погашен: покупателю важно знать,
   что такая фасовка вообще бывает. */
.card-size.out {
  opacity: 0.45;
}

/* Единственный объём выглядит точно так же, как выбранный у соседей:
   ряд карточек читается ровно, а не наполовину тёмным, наполовину
   светлым. Отличие одно — выбирать нечего, поэтому обычный курсор
   и никакой перемены при наведении. */
.card-size.lone {
  cursor: default;
}

.card-size.on.lone:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: white;
}

/* Старые браузеры без gap — см. раздел в конце файла */
.no-flex-gap .card-sizes > * { margin: 0 4px 4px 0; }

/* Подпись под ценой в каталоге: какие фасовки есть у этого вкуса */
.sizes-hint {
  margin-top: 2px;
  color: #6c7783;
  font-size: 12px;
}

/* «от» перед ценой — мельче самой цены, это уточнение, а не число */
.price .from {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #6c7783;
}

.no-flex-gap .size-row > * { margin: 0 8px 8px 0; }

/* ——— Облик «Мастерская» ———
   У товара нет оправы: ни плашки, ни тени, ни линии. Название и цена
   набраны засечным шрифтом. Так подают товар производители, а не
   перекупщики: строка каталога превращается в позицию из списка изделий.

   Линию сверху пробовали — она читалась как разделитель рядов, а не как
   часть товара, и сетка распадалась на полосы. Разделяет теперь только
   пустое место.

   Шрифт системный, а не подгруженный: политика содержимого разрешает
   только свои файлы (`font-src 'self'`), и ослаблять её ради гарнитуры
   не стоит. Georgia есть на Windows, Mac и iOS с кириллицей, на Android
   подставится системный засечный. */
.product-grid {
  display: grid;
  /* Ровно четыре в ряд, а не «сколько поместится». С auto-fill число колонок
     зависело от того, сколько пикселей осталось после фильтра и корзины:
     не хватало десятка — и вместо трёх выходило две, карточки раздувались
     во всю ширину. Здесь ширина колонки подстраивается, а число — нет. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
}

/* Фото одного размера у всех товаров: иначе карточки скачут по высоте,
   а сетка выглядит рваной. Кадрируем по центру, не растягивая. */
/* Товар не из выбранной категории. Обычного правила браузера для скрытых
   элементов здесь мало: у карточки задан display: flex, и он его перебивает —
   без этой строки отфильтрованные товары остались бы на виду. */
.product-card[hidden] {
  display: none;
}

/* Рамка вертикальная, товар вписывается целиком.
   Раньше стояла горизонтальная 4:3 с кадрированием: вертикальная
   бутылка в неё не помещалась, и от неё была видна только середина —
   ни крышки, ни донышка. У этикеток так же срезались заголовок и низ.
   Подложки под снимком нет: товар снят без фона и стоит прямо
   на белом поле карточки. */
.product-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* Плашка вместо снимка: тёмный фон и белая гравюра — как в подвале.
   Серый прямоугольник с надписью читался как недоделанная карточка,
   а фирменный знак — как оформление. */
.product-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--brand-dark);
  overflow: hidden;
}

/* Сбрасываем всё, что задано для настоящих фотографий: там стоит
   кадрирование под 4:3, и высокую гравюру оно срезало сверху и снизу. */
.product-photo-empty img {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  max-width: 62%;
  max-height: 78%;
  margin: 0;
  border-radius: 0;
  background: none;
  opacity: 0.92;
}

.product-card h3 {
  font-family: Georgia, "PT Serif", "Times New Roman", serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  /* Резервируем две строки, а не три: почти все названия в две и
     укладываются, и лишняя пустая строка зря отодвигала цену.
     Название длиннее растянется само — нижняя часть карточки прижата
     к низу и от этого не съедет. Больше трёх строк обрезаем многоточием. */
  min-height: calc(2 * 1.3em);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Цена засечным и крупно — это главное число в карточке.
   Тёмно-синяя, а не янтарная: янтарь остаётся за действием (кнопкой),
   иначе на карточке два акцента и глазу не за что зацепиться. */
.product-card .price {
  /* Georgia здесь последняя намеренно. У неё «текстовые» цифры — 2, 5, 9
     свисают ниже строки, и цены в ряду выглядят неровно: 250 и 90 сидят
     на разной высоте. В тексте это красиво, в ценнике мешает. У PT Serif
     и Times New Roman цифры прописные, ровные по верху и низу, а рисунок
     засечный — облик каталога не меняется. lining-nums просит ровные
     цифры и у тех шрифтов, где есть оба набора. */
  font-family: "PT Serif", "Times New Roman", Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-dark);
  line-height: 1.15;
  margin-bottom: 0;
}

/* Наличие — мелкой разрядкой прописными: служебная подпись, которая
   не спорит ни с названием, ни с ценой. */
.product-card .stock {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: 4px;
}

/* «Осталось мало» — без точного числа: подгоняет, но не выдаёт остаток */
.stock.low {
  color: var(--warn);
}

/* Подсказка в корзине, когда набрано всё, что есть на складе */
/* Подсказка о пределе — отдельной строкой под товаром. Раньше она вставала
   третьим элементом в ту же строку, отжимала название, и вся строка
   перестраивалась: у покупателя всё съезжало от одного нажатия. */
.qty-limit {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--warn);
  font-size: 12px;
}

.qty-controls button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Ступени прижаты к низу карточки — весь блок «оптовые цены + кнопка»
   стоит на одной высоте у всех товаров. Иначе при разной длине названия
   он плавал по вертикали, и ряд выглядел скачущим. */
/* Отсюда начинается нижняя часть карточки — опт, наличие, цена, кнопка.
   Она целиком прижата к низу, и тогда всё это стоит на одном уровне
   во всех карточках ряда, а свободное место остаётся под названием.
   Правило «прижаться к низу» должно быть ровно одно на карточку: когда
   их два, место делится между ними, и строки разъезжаются.

   Высота держится и при пустом блоке: место резервируется под одну
   ступень, больше одной ни у одного товара нет. */
/* Низ карточки: наличие и цена. Оптовое предложение переехало лентой
   на снимок — там оно ничего не двигает, и карточка стала короче. */
.product-card .card-bottom {
  margin-top: auto;
  margin-bottom: 8px;
}

/* Снимок с лентой поверх. Обёртка нужна только затем, чтобы ленте было
   от чего отсчитывать положение. */
.product-shot {
  position: relative;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.product-shot img,
.product-shot .product-photo-empty {
  margin-bottom: 0;
}

/* Лента поверху: слева условие, справа цена за штуку. Тёмная, с уходом
   в прозрачность книзу — чтобы не отрезать верх кадра ровным краем. */
/* Метка своего производства. Внизу слева, потому что вверху уже лежит
   лента с оптовой ценой — две плашки в одном углу наехали бы друг
   на друга. Янтарь тот же, что у кнопок: это довод в нашу пользу,
   а не служебная пометка. */
.own-mark {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--brand);
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* У чужого товара марка стоит над названием: знакомый бренд
   покупатель ищет раньше, чем читает название. */
.card-brand {
  display: block;
  margin-bottom: 2px;
  color: #6c7783;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Скидка объявляется один раз, над каталогом. Полоса на каждой карточке
   превращалась в шум: тридцать пять одинаковых плашек спорили с товаром,
   хотя правило одно на весь магазин. */
.sale-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--brand-dark);
  color: var(--brand-on-dark);
}

.sale-bar b {
  color: var(--brand-pale);
  font-size: 19px;
  font-variant-numeric: lining-nums;
}

.sale-bar span {
  font-size: 14px;
}

/* Полоса со скидкой стоит НАД снимком, а не поверх него. Пока она лежала
   на фотографии, у товара закрывалась крышка: раньше снимок кадрировался
   и верх всё равно был срезан, а теперь товар виден целиком — и полоса
   стала мешать. */
.photo-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg,
              rgba(28, 44, 61, 0.94) 0%,
              rgba(28, 44, 61, 0.78) 100%);
  color: white;
}

/* Под полосой у снимка скруглён только низ — вместе они читаются
   как одна карточка, а не как две отдельные плашки. Соседний селектор,
   а не :has(): его понимают только браузеры с 2022 года, и в этом
   проекте он убран отовсюду. */
.photo-strip + img,
.photo-strip + .product-photo-empty {
  border-radius: 0 0 8px 8px;
}

/* Условие набрано сплошным светлым цветом, а не полупрозрачным белым:
   поверх градиента прозрачность съедала контраст, и мелкие прописные
   читались размыто. Цвет вместо opacity — тот же приглушённый вид,
   но буквы остаются чёткими. */
.strip-when {
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e6ecf2;
}

/* Цена не переносится и не сжимается: она здесь главное */
.strip-price {
  flex: 0 0 auto;
  color: var(--brand-pale);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


.cart-item-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-item-price {
  font-size: 12px;
  color: #8a919a;
}

.cart-item-price.bulk {
  color: var(--brand);
  font-weight: bold;
}

.product-card .stock.out {
  color: var(--danger);
}

/* Кнопка тонкой обводкой, а не сплошной плашкой. Восемь сплошных
   янтарных прямоугольников складывались на экране в стену и перетягивали
   внимание с фотографий — а фотографии здесь самое ценное. */
.product-card button {
  width: 100%;
  padding: 9px;
  background: none;
  color: var(--brand);
  border: 1px solid #cbb389;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.product-card button:hover:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}

.product-card button:disabled {
  background: none;
  border-color: var(--brand-border-2);
  color: #9aa5ae;
  cursor: not-allowed;
}

.cart {
  flex: 0 1 300px;
  width: 300px;
  min-width: 0;
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 24px;
}

.cart h2 {
  margin-top: 0;
  font-size: 18px;
}

/* На своей странице корзина занимает всю ширину: там она не колонка
   рядом с каталогом, а главное содержимое. */
.cart-page .cart {
  width: 100%;
  position: static;
}

/* Число товаров рядом с пунктом «Корзина» в меню. */
.nav-cart .cart-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand);
  color: white;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.nav-cart .cart-count[hidden] {
  display: none;
}

.cart-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.cart-item .qty-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-item .qty-controls .qty-value {
  display: inline-block;
  min-width: 18px;
  text-align: center;
}

.cart-item .qty-controls button {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid #ccc;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.cart-total {
  font-weight: bold;
  margin-top: 12px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}

.cart-empty {
  color: #888;
  font-size: 14px;
}

#checkout-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: var(--brand-dark);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
}

#checkout-btn:disabled {
  background: #aaa;
  cursor: not-allowed;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay.hidden {
  display: none;
}

.modal {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 340px;
  max-width: 90vw;
}

.modal h2 {
  margin-top: 0;
  font-size: 18px;
  text-align: center;
}

.modal label {
  display: block;
  font-size: 13px;
  color: #444;
  margin-bottom: 12px;
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.modal textarea {
  resize: vertical;
}

.modal .optional {
  color: #8a919a;
}

.modal input.invalid {
  border-color: #b3391f;
}

.field-error {
  color: #b3391f;
  font-size: 12px;
  line-height: 1.4;
  margin: -8px 0 12px;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.modal-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

#cancel-checkout {
  background: #eee;
  color: #333;
}

#submit-order {
  background: var(--brand);
  color: white;
}

#submit-order:disabled {
  background: #aaa;
  cursor: not-allowed;
}

.hidden {
  display: none;
}

#checkout-success {
  text-align: center;
}

#checkout-success button {
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--brand-dark);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Вход, регистрация, личный кабинет */

/* Ширина задаётся явно, а не по содержимому. Страница центрируется
   автоотступами, а у элемента внутри флекс-колонки (body) автоотступы
   отменяют растягивание — без width карточка съёживалась под текст,
   и пустая корзина выглядела узкой полоской. */
.page.narrow {
  width: 100%;
  max-width: 460px;
}

/* Корзине нужно чуть больше места: название товара и кнопки количества
   в одной строке. */
.page.cart-page {
  max-width: 560px;
}

.auth-card {
  background: white;
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-card h1 {
  margin-top: 0;
  font-size: 22px;
  text-align: center;
}

.auth-card label {
  display: block;
  font-size: 13px;
  color: #4a525b;
  margin-bottom: 14px;
}

.auth-card input,
.auth-card select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
}

.field-hint {
  display: block;
  color: #8a919a;
  font-size: 12px;
  margin-top: 3px;
}

.auth-submit {
  width: 100%;
  padding: 11px;
  background: var(--brand-dark);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 4px;
}

.auth-submit:hover {
  background: var(--brand-darkest);
}

.auth-error {
  background: #fdecea;
  color: #b3391f;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 16px;
}

.auth-switch {
  text-align: center;
  font-size: 14px;
  color: #5a626b;
  margin-bottom: 0;
}

.auth-switch a,
.account-empty a {
  color: var(--link);
}

.nav-secondary {
  color: #9fabb8 !important;
}

.account-title {
  font-size: 24px;
  margin-top: 0;
}

.account-info {
  background: white;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 15px;
}

.muted-line {
  color: #6c7783;
  font-size: 14px;
  margin-top: 4px;
}

.account-empty {
  color: #6c7783;
}

.account-orders {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-order {
  background: white;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.account-order-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.account-order-head .order-number {
  font-weight: bold;
}

.account-status {
  font-size: 12px;
  background: var(--brand-tint-4);
  color: var(--brand-dark);
  padding: 3px 10px;
  border-radius: 4px;
  margin-right: auto;
}

.account-order-head .order-date {
  color: #8a919a;
  font-size: 13px;
}

.account-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  /* Названия у нас длинные — «Ферментированная кукуруза варёная (сладкая)
     с коноплёй и сорго 0,2 л». На телефоне такая строка распирала бы
     таблицу и утягивала вбок всю страницу, а горизонтальная прокрутка
     страницы — верный признак сломанной вёрстки. Фиксированная раскладка
     держит колонки в рамках, перенос разрывает длинное слово. */
  table-layout: fixed;
}

.account-items td:first-child {
  overflow-wrap: break-word;
  word-break: break-word;
}

.account-items td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid #f2f2f2;
}

.account-items .qty-cell,
.account-items .price-cell {
  color: #6c7783;
  white-space: nowrap;
}

.account-items .sum-cell {
  text-align: right;
  white-space: nowrap;
}

.account-comment {
  margin-top: 10px;
  font-size: 13px;
  color: #5a626b;
  background: var(--brand-tint-5);
  border-left: 3px solid var(--brand-light);
  padding: 8px 12px;
}

.account-total {
  margin-top: 12px;
  font-weight: bold;
  text-align: right;
}

.cart-login-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: #5a626b;
  line-height: 1.5;
}

.cart-login-note a {
  color: var(--link);
}

.auth-intro,
.auth-message {
  font-size: 14px;
  color: #5a626b;
  line-height: 1.6;
  margin-top: 0;
}

.auth-message {
  background: var(--brand-tint-2);
  border-left: 3px solid var(--brand-light);
  padding: 12px 14px;
  border-radius: 4px;
}

/* Страница «скоро открытие» */

.soon-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  padding: 24px;
}

.soon-box {
  background: white;
  padding: 44px 36px;
  max-width: 520px;
  width: 100%;
  text-align: center;
}



.soon-box h1 {
  margin: 0 0 14px;
  font-size: 27px;
  color: var(--brand-dark);
}

.soon-lead {
  font-size: 16px;
  color: #4a525b;
  line-height: 1.6;
  margin: 0 0 26px;
}

.soon-contacts {
  background: var(--brand-tint-2);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 22px;
}

.soon-label {
  margin: 0 0 10px;
  font-size: 14px;
  color: #5a626b;
}

.soon-link {
  display: inline-block;
  padding: 11px 22px;
  background: var(--brand);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 15px;
}

.soon-link:hover {
  background: var(--brand-hover);
}

.soon-note {
  margin: 0;
  font-size: 13px;
  color: #8a919a;
  line-height: 1.7;
}

.soon-logo {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  margin: 0 auto 22px;
}

/* Подвал прижимается к низу, даже если содержимого мало.
   Страница растягивается на всю высоту экрана, а основной блок
   занимает всё свободное место — подвал уезжает вниз. */

body:not(.soon-page) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:not(.soon-page) .page,
body:not(.soon-page) .layout {
  flex: 1 0 auto;
  /* Та же причина, что и у .page.narrow: без явной ширины блок
     съёживается по содержимому. Отступы внутрь не выпирают —
     в начале файла для всего задан box-sizing: border-box. */
  width: 100%;
}

body:not(.soon-page) footer {
  margin-top: auto;
  flex-shrink: 0;
}


/* ——— Телефоны и планшеты ———
   Раньше правил под маленький экран не было вовсе, а с телефона
   приходит большинство покупателей. */

@media (max-width: 720px) {
  .cart-bar:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--brand-dark);
    color: white;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
  }

  .cart-bar-info {
    font-size: 14px;
  }

  .cart-bar-go {
    padding: 9px 18px;
    border-radius: 4px;
    background: var(--brand);
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  /* Чтобы полоса не закрывала последний товар и подвал.
     Метку ставит скрипт корзины — правило body:has(...) работало
     только в браузерах не старше 2022 года. */
  body.has-cart-bar {
    padding-bottom: 60px;
  }

  /* Каталог на телефоне — два товара в ряд, как в больших магазинах.
     Одна колонка на весь экран давала огромные картинки: за экран
     помещался один товар, и до нужного приходилось долго листать. */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* По вертикали просвет больше, чем по горизонтали: плашек у товара
       нет, и разделяет соседей только пустое место с линией. */
    gap: 20px 10px;
  }

  /* Поля только сверху — линия должна идти во всю ширину ячейки,
     как на большом экране. */
  .product-card {
    padding: 11px 0 0;
  }

  /* Пальцем в кнопку 22 пикселя высотой не попасть: Apple советует
     не меньше 44, и это тот случай, когда совет по делу — объёмы
     выбирают на ходу, одной рукой. На широком экране мышью хватает
     и мелких, там они не занимают место зря. */
  .card-size {
    min-width: 60px;
    padding: 7px 11px;
    font-size: 13px;
  }

  /* Числовые колонки в заказе — по содержимому, остаток названию:
     на узком экране иначе всё делится поровну и название рвётся
     по букве, хотя цифрам столько места не нужно. */
  .account-items {
    font-size: 13px;
  }

  .account-items .qty-cell,
  .account-items .price-cell,
  .account-items .sum-cell {
    width: 62px;
  }

  .card-sizes {
    gap: 6px;
  }

  .product-card h3 {
    font-size: 14px;
    /* три строки того же кегля — карточки в паре остаются вровень */
    min-height: calc(3 * 1.3em);
  }

  .product-card .price {
    font-size: 18px;
  }

  .product-card .stock {
    font-size: 9.5px;
  }

  /* На телефоне карточка вдвое уже, поэтому лента на снимке сжимается:
     буквы мельче, поля уже.
     Длинное условие переносится на вторую строку — лента растёт вниз,
     ничего в карточке при этом не двигая. */
  .photo-strip {
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 4px 7px;
  }

  .strip-when { font-size: 9px; }
  .strip-price { font-size: 11px; }

  .product-card button {
    padding: 7px;
    font-size: 13px;
  }

  /* Подвал держит строку и на телефоне: текст слева, гравюра справа.
     Раньше текст требовал 260 пикселей ширины, и на узком экране
     логотип не помещался рядом — уезжал под текст отдельной строкой. */
  /* Подвал на телефоне заметно ниже: поля вдвое меньше, текст мельче,
     отступы между строками сжаты. На большом экране он занимает край
     страницы, а на телефоне — половину экрана, если оставить как есть. */
  footer {
    padding: 14px 16px;
    margin-top: 28px;
    font-size: 13px;
  }

  .footer-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
  }

  .footer-text {
    min-width: 0;
  }

  .footer-inner p {
    margin: 0 0 5px;
  }

  .footer-inner .disclaimer {
    font-size: 11px;
    line-height: 1.35;
    margin: 0 0 7px;
  }

  .footer-links {
    font-size: 12px;
  }

  .footer-copy {
    margin: 5px 0 0;
    font-size: 11px;
  }

  .footer-logo {
    width: 56px;
  }

  /* Кнопки категорий тоже мельче: их много, и в две строки они
     съедали пол-экрана до первого товара. */
  .categories {
    gap: 6px;
    margin-bottom: 14px;
  }

  .categories button {
    padding: 6px 11px;
    font-size: 13px;
  }

  .header-inner {
    gap: 10px;
  }

  .main-nav {
    gap: 14px;
    flex-wrap: wrap;
  }

  .page {
    padding: 20px 16px;
  }

  .hero-inner {
    padding: 32px 16px 40px;
  }

  .hero-lead {
    font-size: 16px;
  }

  /* Каталог во всю ширину: рядом с ним корзина требовала ещё 300 px,
     и страница не помещалась в экран — её можно было двигать пальцем вбок. */
  .layout {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  /* Боковой корзины на телефоне нет: внизу длинного списка товаров её
     всё равно не находят. Вместо неё — раздел «Корзина» в меню со
     счётчиком. На своей странице корзина, разумеется, остаётся. */
  .layout > .cart {
    display: none;
  }

  .cart-page .cart {
    width: 100%;
    position: static;
  }

  /* Кнопки во всю ширину: по маленькой кнопке пальцем не попасть. */
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions a {
    text-align: center;
  }


  /* На узком экране блок фактов не наезжает на тёмный, а идёт следом. */
  .trust-row {
    margin-top: 24px;
  }

  .cta {
    padding: 32px 20px;
  }

  .section-title {
    margin: 32px 0 14px;
  }

  /* Страница товара на телефоне: фото сверху, описание под ним. */
  .product-page {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }

  .add-to-cart {
    width: 100%;
  }
}

/* ——— Страница «Мои данные» ——— */

.settings-title {
  margin: 0 0 14px;
  font-size: 18px;
}

.settings-link {
  margin: -6px 0 18px;
}

.settings-link a {
  color: var(--link);
}

.page.narrow .auth-card {
  margin-bottom: 20px;
}

/* Сведения о продавце: справка, а не витрина. Поэтому спокойный блок
   без теней и заливок — глаз по нему не спотыкается. */
.seller-card {
  max-width: 560px;
  padding: 16px 18px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.seller-name {
  margin-bottom: 10px;
  font-weight: 600;
  color: #1c232a;
}

/* Подписи и значения колонками: номера читаются, когда стоят ровно */
.seller-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 14px;
}

.seller-facts dt {
  color: #5a626b;
}

.seller-facts dd {
  margin: 0;
  color: #1c232a;
  font-variant-numeric: tabular-nums;
}

/* ——— Старые браузеры ———

   Сюда собрано всё, что нужно телефонам и компьютерам, где браузер давно
   не обновлялся. Проверено на Яндекс.Браузере 19 года (движок Chromium 74):
   там пункты меню слипались в одно слово, а карточки товаров стояли рваным
   рядом. Этот раздел можно будет удалить целиком, когда такие браузеры
   исчезнут — на новых он не срабатывает вовсе. */

/* Отступы в рядах. Свойство gap умеет расставлять их и в сетках, и в рядах,
   но в рядах браузеры научились этому только к 2020 году. Метку no-flex-gap
   ставит короткая проверка в начале страницы. */

.no-flex-gap .main-nav > * { margin-right: 20px; }
.no-flex-gap .main-nav > *:last-child { margin-right: 0; }

.no-flex-gap .trust-item > * + * { margin-top: 6px; }
.no-flex-gap .card-qty > * + * { margin-left: 8px; }
.no-flex-gap .cart-item-name > * + * { margin-top: 2px; }
.no-flex-gap .account-orders > * + * { margin-top: 14px; }

.no-flex-gap .consent-line > * + * { margin-left: 10px; }
.no-flex-gap .cart-item .qty-controls > * + * { margin-left: 6px; }
.no-flex-gap .modal-actions > * + * { margin-left: 8px; }
.no-flex-gap .account-order-head > * + * { margin-left: 12px; }
.no-flex-gap .footer-inner > * + * { margin-left: 32px; }
.no-flex-gap .layout > * { margin-right: 24px; }
.no-flex-gap .layout > *:last-child { margin-right: 0; }

/* Ряды с переносом: отступ нужен и вправо, и вниз */
.no-flex-gap .photo-thumbs > * { margin: 0 8px 8px 0; }
.no-flex-gap .cta-actions > * { margin: 0 12px 12px 0; }
.no-flex-gap .categories > * { margin: 0 8px 8px 0; }

/* Соотношение сторон у фотографий. Без него высота картинки зависит
   от самого файла: карточки в каталоге получались разной высоты, и сетка
   разъезжалась. Запасной вариант — фиксированная высота: кадрирование
   (object-fit) старые браузеры понимают, так что фото не искажается. */
@supports not (aspect-ratio: 1 / 1) {
  /* Рамка теперь вертикальная (3:4), поэтому высота больше прежней:
     при ширине карточки около 260 px это примерно 350. */
  .product-card img,
  .product-photo-empty {
    height: 350px;
  }

  .product-photo img,
  .product-photo-empty.large {
    height: 340px;
  }
}

@media (max-width: 720px) {
  .no-flex-gap .categories > * { margin: 0 6px 6px 0; }

  /* На телефоне меню переносится на вторую строку — нужен и отступ вниз */
  .no-flex-gap .main-nav > * { margin: 0 14px 4px 0; }

  /* Каталог и корзина встают в столбик */
  .no-flex-gap .layout > * { margin: 0 0 16px 0; }
  .no-flex-gap .layout > *:last-child { margin-bottom: 0; }

  @supports not (aspect-ratio: 3 / 4) {
    .product-card img,
    .product-photo-empty {
      height: 230px;
    }

    .product-photo img,
    .product-photo-empty.large {
      height: 260px;
    }
  }
}

/* Строка под заголовком раздела: город, доставка и выход в весь каталог.
   Нужна и человеку — он пришёл из поиска и должен понять, куда попал, —
   и поисковику: на странице появляется связный текст, а не одна сетка
   карточек. */
.vid-intro {
  max-width: 70ch;
  margin: -4px 0 16px;
  color: #5a626c;
  font-size: 14px;
  line-height: 1.6;
}

/* Вступление к разделу. Ширину ограничиваем: строка во весь экран
   на большом мониторе читается тяжело — глаз теряет начало следующей. */
.section-intro {
  max-width: 720px;
  margin: -4px 0 16px;
  color: #55606c;
  font-size: 14px;
  line-height: 1.6;
}


/* ——— Главная: снимки на первом экране ———
   Товары названы поимённо в `ЛЕНТА_ГЛАВНОЙ` (app.py): витрину выбирает
   владелец. Четыре в ряд, на телефоне два — как карточки каталога. */
.hero-lenta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 1000px;
  margin: 28px auto 0;
}

.hero-kadr {
  display: block;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.hero-kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Светлая середина страницы ложится поверх тёмного первого экрана
   и поверх тёмного низа — скруглённым краем, а не рубленым стыком.
   Фон на обёртке, а не на `.page`: у той ширина ограничена 1200 px,
   и по бокам просвечивал тёмный фон — край выглядел рваным. */
.home-svetlo {
  position: relative;
  z-index: 2;
  background: var(--page-bg);
  /* Скругление убрано 20 сентября 2026 (решение владельца). Светлая часть
     идёт во всю ширину экрана, и её дуга упиралась в самые края — по бокам
     она соприкасалась с рамкой окна и читалась обрубленной. Чтобы углы
     работали, блок должен отступать от краёв, а для этого за ним нужен
     тёмный фон — это уже другая вёрстка страницы. Пока просто ровный стык. */
  /* Светлая панель тоже выступает, как стекло: блик по верхней грани
     и тень в обе стороны — на тёмный первый экран сверху и на тёмный
     блок товаров снизу (решение владельца, 20 сентября 2026). */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85),
                                    rgba(255, 255, 255, 0) 90px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
              0 -8px 24px rgba(0, 0, 0, 0.30),
              0 10px 28px rgba(0, 0, 0, 0.26);
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Полоса плашек больше не приподнимается сама: на тёмный блок теперь
   заходит вся светлая часть, и старый отрицательный отступ прижимал
   плашки к самому краю. */
.page-home .trust-row {
  margin-top: 0;
}

/* Заголовок стоит посередине между плашками и карточками. Общий отступ
   в 40 пикселей сверху и 16 снизу давал 48 против 16 — заголовок липнул
   к карточкам и висел под плашками. */
.page-home .section-title {
  margin-top: 20px;
  margin-bottom: 28px;
}

/* Заголовки разделов на главной — по центру, как плашки над ними */
.page-home .section-title {
  text-align: center;
}

/* ——— Главная: «Берут чаще всего» ———
   Здесь и остался перелив в янтарный. */
.chasche {
  /* Перелив уходит в янтарный к середине и возвращается к цвету подвала
     внизу. Пока он заканчивался янтарным, тот упирался прямо в тёмный
     подвал, и стык читался грязной полосой (владелец, 19 сентября 2026). */
  background: linear-gradient(
    165deg,
    var(--brand-dark) 0%,
    var(--brand-dark-2) 40%,
    var(--brand) 100%
  );
  /* Сверху 34, чтобы заголовок стоял на равном расстоянии от верхней
     грани блока и от карточек: было 52 сверху против 22 снизу, и он
     висел ближе к товарам (владелец, 20 сентября 2026). */
  padding: 34px 0 40px;
}

.chasche-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.chasche h2 {
  color: white;
  text-align: center;
  margin: 0 0 34px;
  font-size: 24px;
}

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

.chasche-card {
  background: white;
  border-radius: 10px;
  padding: 12px;
  text-decoration: none;
  display: block;
}

.chasche-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }

.chasche-foto {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: #fafbfc;
}

.chasche-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chasche-card h3 {
  font-size: 14px;
  line-height: 1.35;
  margin: 10px 0 4px;
  color: var(--ink, #19212c);
  font-weight: 500;
}

.chasche-cena {
  margin: 0;
  color: var(--brand);
  font-weight: 700;
  font-size: 15px;
}

@media (max-width: 720px) {
  .hero-lenta { grid-template-columns: repeat(2, 1fr); }
  .chasche-grid { grid-template-columns: repeat(2, 1fr); }
}