/* =====================================================================
   Вид сайта у страниц витрины и кабинета в обычном браузере (план
   2026-09-29, карта 08, ЕФ8.2 - компьютер; с 03.10 - любой экран, план
   2026-10-03-сайт-на-любом-экране; имя файла историческое).

   Образец - макет владельца yamal-gurme.html и главная сайта ЕФ8.1
   (static/site/site.css): тёмная шапка сайта, светлая зона каталога -
   снег, чернила и брусника; заголовки Oswald прописными, текст Manrope,
   прямые углы. На широком экране - карточки товаров сеткой, итоги корзины
   и оформления справа; на узком - тот же вид в одну колонку.

   Файл применяется ТОЛЬКО в обычном браузере: все правила - внутри одного
   @media (display-mode: browser), тот же media стоит у <link> в base.html.
   Приложение RuStore и установленная PWA (режим standalone) его не
   применяют; Mini App Telegram и вкладку, запущенную с меткой src=app,
   выключает скрипт в base.html. Сетки компьютера - во вложенных @media
   (min-width: 1024px) на прежних местах (порядок правил не менялся),
   поправки узкого экрана - вложенным @media в конце. Снаружи @media -
   только @font-face: шрифт грузится, лишь когда правило внутри его
   попросит (тест tests/web/test_desktop.py держит этот инвариант).

   Разметка шаблонов - та же, что в приложении: сетки страниц собираются
   по классу страницы на main (page-<маршрут>, web/context.py) и по
   существующим элементам; обёртки есть только у корзины и оформления.
   Токены приложения (--bg, --fg, --card, ...) переопределяются здесь на
   светлую палитру макета, поэтому правила style.css продолжают работать.

   Шапка и подвал - общий файл static/site/shell.css.
   ===================================================================== */

@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url(../site/manrope-400.woff2) format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url(../site/manrope-500.woff2) format("woff2"); }
@font-face { font-family: Oswald; font-style: normal; font-weight: 400; font-display: swap; src: url(../site/oswald-400.woff2) format("woff2"); }

@media (display-mode: browser) {

/* ---- Токены макета: светлая зона каталога внутри тёмного сайта -------- */

:root {
  --ink: #080b0e;
  --snow: #f0f2f4;
  --paper: #f9fafb;
  --paper-2: #f6f7f9;
  --photo-bg: #0d1116;
  --ink-text: #10151b;
  --ink-soft: #16212b;
  --muted-ink: #59636e;
  --muted-small: #5b6773;   /* мелкий серый 12 px: контраст 4,6:1 на снегу */
  --rule: #c0c8d0;
  --rule-strong: #a8b2be;
  --rule-card: #c2cbd3;
  --field-line: #aabac7;
  --berry: #931d3b;
  --berry-hover: #ab2649;
  --rose: #e5a8b9;
  --header-h: 96px;
  --gutter: max(5%, calc((100vw - 1440px) / 2));
  --top-gap: calc(var(--header-h) + 24px);

  /* Телефонные токены style.css - на палитру макета (и в тёмной теме
     системы: зона каталога у макета всегда светлая, color-scheme light). */
  --bg: var(--snow);
  --fg: var(--ink-text);
  --hint: var(--muted-ink);
  --link: var(--berry);
  --btn: var(--berry);
  --btn-fg: #ffffff;
  --card: var(--paper-2);
  --brand: var(--berry);
  --brand-soft: #f2dce2;
  --ok: #3e605c;
  --ok-soft: #e1e8e8;
  --line: var(--rule);
  --field: var(--field-line);
  --radius: 0px;
  --tabbar-h: 0px;
  --safe-bottom: 0px;
  color-scheme: light;
}

body {
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--snow);
  color: var(--ink-text);
}

/* ---- Шапка и подвал сайта - общий файл static/site/shell.css (ЕФ8.4);
   base.html подключает его с тем же media, что и этот файл. ---- */

/* Вкладки приложения и строка города не нужны: всё это в шапке. */
.tabbar { display: none; }
main.page > #region-bar { display: none; }

/* Вкладки кабинета «Заказы / Профиль» (макет: account-tabs): в приложении
   их заменяют вкладки внизу, здесь - единственный путь к профилю. */
main.page .cabinet-tabs {
  display: flex;
  gap: 30px;
  margin: -8px 0 28px;
  border-bottom: 1px solid #bdc7d1;
  font-size: 14px;
}
main.page .cabinet-tabs a { padding: 14px 0; color: #6a7784; }
main.page .cabinet-tabs a:hover { color: var(--berry); }
main.page .cabinet-tabs a[aria-current="page"] { color: #15222f; box-shadow: inset 0 -3px var(--berry); }

.flash {
  margin: 16px var(--gutter) 0;
  padding: 12px 16px;
  border-left: 3px solid var(--berry);
  border-radius: 0;
  background: var(--paper);
}
.flash.error { background: var(--brand-soft); }

/* ---- Основа страницы ---------------------------------------------------- */

main.page {
  max-width: none;
  margin: 0;
  padding: 44px var(--gutter) 90px;
}

/* Кабинет, документы и вход - одной колонкой по центру. */
main.page-webapp-my-orders,
main.page-webapp-order,
main.page-webapp-profile,
main.page-webapp-sellers,
main.page-webapp-delete-account,
main.page-webapp-done {
  max-width: 820px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* Отдельным правилом: :has() в общем списке уронил бы весь список в
   браузерах без его поддержки (Firefox до 121, Safari до 15.4). */
main.page-webapp-product:not(:has(.product-photo)) {
  max-width: 820px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
main.page-webapp-login,
main.page-webapp-login-code,
main.page-webapp-login-call {
  max-width: 520px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

main.page h1 {
  margin: 0 0 28px;
  font: 400 clamp(36px, 3.4vw, 52px) / 1.08 Oswald, sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
main.page h2 {
  margin: 36px 0 14px;
  font: 400 24px / 1.3 Oswald, sans-serif;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* Сокращённое font - чтобы подпись-заголовок (h2.section-label) не осталась Oswald. */
main.page .section-label {
  margin: 32px 0 16px;
  color: #606975;
  font: 400 12px / 1.8 Manrope, sans-serif;
  letter-spacing: .15em;
}
main.page .section-label::after { background: var(--rule-strong); }
main.page .muted, main.page .note { font-size: 13px; line-height: 1.8; color: var(--muted-ink); }
main.page p { max-width: 72ch; }

/* Ссылка «← Назад» (единственная ссылка в абзаце без класса) - подчёркнутой
   строкой, как «Вернуться» в макете; «Удалить мои данные» в профиле - не она. */
main.page > p:not([class]):has(> a:only-child:not(#delete-link)) { margin: 0 0 24px; font-size: 12px; }
main.page > p:not([class]):has(> a:only-child:not(#delete-link)) > a {
  color: #536b80;
  border-bottom: 1px solid #75899b;
  padding-bottom: 3px;
}
main.page > p:not([class]):has(> a:only-child:not(#delete-link)) > a:hover { color: var(--berry); border-color: var(--berry); }

main.page .error-box { border-radius: 0; padding: 12px 14px; background: var(--brand-soft); color: #a02141; font-weight: 500; }

/* ---- Кнопки и формы ------------------------------------------------------- */

main.page button, main.page .btn {
  min-height: 50px;
  padding: 15px 25px;
  border: 1px solid var(--berry);
  border-radius: 0;
  background: var(--berry);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform .25s, background .25s, border-color .25s, color .25s;
}
main.page button:hover, main.page .btn:hover {
  background: var(--berry-hover);
  border-color: var(--berry-hover);
  transform: translateY(-2px);
}
main.page button:active, main.page .btn:active { transform: translateY(0); opacity: 1; }
main.page button:disabled { opacity: .45; transform: none; }
main.page .btn-wide { margin: 16px 0; font-size: 14px; }
main.page .btn-quiet {
  background: transparent;
  border-color: #95a2af;
  color: var(--ink-text);
}
main.page .btn-quiet:hover {
  background: transparent;
  border-color: var(--berry);
  color: var(--berry);
}
main.page .btn-small { min-height: 40px; padding: 8px 16px; font-size: 13px; }

main.page label { margin: 20px 0 8px; font-size: 12px; font-weight: 400; color: #576f83; }
main.page input[type="text"], main.page input[type="tel"], main.page textarea {
  min-height: 50px;
  padding: 13px;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background: var(--paper);
  color: #152633;
  font-size: 16px;
}
main.page input[type="text"]:focus, main.page input[type="tel"]:focus, main.page textarea:focus {
  border-color: var(--ink-text);
  box-shadow: 0 0 0 3px #931d3b2e;
}
main.page .section-title {
  margin: 28px 0 0;
  font: 400 21px / 1.4 Oswald, sans-serif;
  text-transform: uppercase;
}
main.page .addr-row { gap: 16px; }
main.page .check { margin-top: 22px; color: var(--ink-text); font-size: 14px; font-weight: 500; }
main.page .check input { width: 17px; height: 17px; }
main.page .consent { font-size: 12px; color: var(--muted-small); }

/* ---- Метки состояний, итоги, строки состава -------------------------------- */

main.page .state {
  padding: 6px 10px;
  border-radius: 0;
  background: #e2e6eb;
  color: #394754;
  font-size: 12px;
  font-weight: 400;
}
main.page .state::before { display: none; }
main.page .state-awaiting_payment { background: #e9dce2; color: #842a46; }
main.page .state-paid, main.page .state-delivered { background: var(--ok-soft); color: var(--ok); }
main.page .state-cancelled { color: #596470; }

main.page .totals {
  margin: 0 0 20px;
  padding: 24px;
  border: 1px solid var(--rule-card);
  border-radius: 0;
  background: var(--paper-2);
  font-size: 14px;
}
main.page .totals .row { margin: 8px 0; }
/* Первая строка - сумма товаров, крупно; ниже бывает и фраза («сумму
   назовёт менеджер»), ей крупный кегль не к лицу. */
main.page .totals .row b { font-size: 16px; font-weight: 500; }
main.page .totals .row:first-child b { font-size: 18px; }
main.page .totals .sub { margin: -4px 0 8px; font-size: 12px; }
main.page .progress { height: 2px; margin: 6px 0 10px; border-radius: 0; }

main.page .cart-line {
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 0;
}
main.page .cart-line:last-of-type { border-bottom: 1px solid var(--rule-strong); }
main.page .cart-line .name { font-size: 15px; font-weight: 500; }
main.page .cart-line .price { font-size: 15px; font-weight: 500; }
main.page .qty { height: 36px; border: 1px solid #bdc7d0; font-size: 13px; }
main.page .qty button {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-text);
  font-size: 17px;
}
main.page .qty button:hover { background: #e4e9ed; transform: none; }
main.page .qty span { min-width: 44px; text-align: center; }
main.page .cart-line .btn-quiet.btn-small {
  min-height: auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted-small);
  font-size: 12px;
  text-decoration: underline;
}
main.page .cart-line .btn-quiet.btn-small:hover { color: var(--berry); transform: none; }

/* Карточки (условия доставки, продавцы, профиль). */
main.page .welcome, main.page .list-card, main.page .list-link {
  border: 1px solid var(--rule-card);
  border-radius: 0;
  background: var(--paper-2);
}
main.page .welcome { padding: 24px 28px; font-size: 14px; }
main.page .welcome .section-label { margin: 0 0 12px; }
main.page .list-card { padding: 4px 24px; }
main.page .list-link { padding: 16px 24px; font-weight: 500; }
main.page .list-link:hover { border-color: var(--berry); color: var(--berry); }

/* ---- Каталог: приветствие, разделы, доставка справа ------------------------ */

@media (min-width: 1024px) {

main.page-webapp-catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-auto-flow: row dense;
  column-gap: 56px;
  align-items: start;
}
main.page-webapp-catalog > * { grid-column: 1; }
main.page-webapp-catalog > #orders-soon, main.page-webapp-catalog > .welcome-head { grid-column: 1 / -1; }
main.page-webapp-catalog .welcome-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
}
main.page-webapp-catalog .brand-mark { display: none; }
main.page-webapp-catalog .welcome-title {
  max-width: 760px;
  margin: 0;
  font: 400 clamp(40px, 4.2vw, 62px) / 1.08 Oswald, sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
main.page-webapp-catalog .welcome-cta {
  max-width: 340px;
  margin: 0;
  color: var(--muted-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}
main.page-webapp-catalog .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
main.page-webapp-catalog .tile {
  aspect-ratio: auto;
  min-height: 170px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-2);
  font: 400 26px / 1.15 Oswald, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: border-color .3s, color .3s;
}
main.page-webapp-catalog .tile:hover { border-color: var(--berry); color: var(--berry); }
main.page-webapp-catalog .tile:active { transform: none; }
main.page-webapp-catalog .tile-art {
  top: 22px;
  right: 22px;
  left: auto;
  width: 64px;
  transform: none;
  color: #5b6874;
}
main.page-webapp-catalog #delivery-info {
  grid-column: 2;
  grid-row: span 3;
  position: sticky;
  top: var(--top-gap);
  align-self: start;
  margin: 0;
}

} /* каталог: от 1024 px */

/* ---- Раздел: карточки товаров сеткой -------------------------------------- */

@media (min-width: 1024px) {

main.page-webapp-category {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 20px;
}
main.page-webapp-category > * { grid-column: 1 / -1; }
main.page-webapp-category > p:not([class]):has(> a:only-child) { margin-bottom: 0; }
main.page-webapp-category > h1 { margin-bottom: 4px; }
main.page-webapp-category > .product-row {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
}
main.page-webapp-category .product-row > a:first-child {
  display: block;
  position: relative;
  aspect-ratio: 1.15;
  overflow: hidden;
  background: var(--photo-bg);
}
main.page-webapp-category .product-row picture { display: block; height: 100%; }
main.page-webapp-category .product-row img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: var(--photo-bg);
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
main.page-webapp-category .product-row:hover img { transform: scale(1.075); }
/* Без фото - светлая заглушка, а не чёрный квадрат на светлой странице. */
main.page-webapp-category .product-row > a:first-child:has(.photo-placeholder) { background: var(--paper-2); }
main.page-webapp-category .photo-placeholder {
  width: 100%;
  height: 100%;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper-2);
}
main.page-webapp-category .product-row .info { display: flex; flex: 1; flex-direction: column; padding-top: 15px; }
main.page-webapp-category .product-row .name {
  min-height: 48px;
  margin-bottom: 11px;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
main.page-webapp-category .product-row .name:hover { color: var(--berry); }
main.page-webapp-category .product-row .price { margin-top: auto; font-size: 18px; font-weight: 500; }
main.page-webapp-category .product-row .muted { font-size: 12px; color: var(--muted-small); }
main.page-webapp-category .product-row form.inline { display: block; }
main.page-webapp-category .product-row .btn-small {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #abb7c2;
  background: none;
  color: #19242e;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
main.page-webapp-category .product-row .btn-small::after { content: "+"; font-size: 16px; line-height: 1; }
main.page-webapp-category .product-row .btn-small:hover {
  background: var(--berry);
  border-color: var(--berry);
  color: #fff;
  transform: none;
}

} /* раздел: от 1024 px */

/* ---- Товар: фото слева, описание справа ------------------------------------ */

@media (min-width: 1024px) {

main.page-webapp-product:has(.product-photo) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: row dense;
  column-gap: 56px;
  align-items: start;
}
main.page-webapp-product:has(.product-photo) > * { grid-column: 2; }
main.page-webapp-product:has(.product-photo) > #orders-soon,
main.page-webapp-product:has(.product-photo) > p:not([class]):has(> a:only-child) { grid-column: 1 / -1; }
main.page-webapp-product .product-photo {
  grid-column: 1;
  grid-row: span 16;
  position: sticky;
  top: var(--top-gap);
  align-self: start;
  width: 100%;
  max-height: none;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 0;
  background: var(--photo-bg);
  object-fit: cover;
}

} /* товар: от 1024 px */

main.page-webapp-product h1 { font-size: clamp(32px, 2.8vw, 42px); }
main.page-webapp-product .price { margin: 0 0 20px; font-size: 26px; font-weight: 500; }
main.page-webapp-product form { max-width: 360px; }

/* ---- Корзина и оформление: итоги справа ----------------------------------- */

@media (min-width: 1024px) {

main.page-webapp-cart, main.page-webapp-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-auto-flow: row dense;
  column-gap: 56px;
  align-items: start;
}
main.page-webapp-cart > *, main.page-webapp-checkout > * { grid-column: 1 / -1; }
main.page-webapp-cart .cart-lines { grid-column: 1; }
/* Липкие итоги не выше окна: длинный состав прокручивается внутри блока. */
main.page-webapp-cart .cart-summary,
main.page-webapp-checkout .checkout-summary {
  grid-column: 2;
  grid-row: span 24;
  position: sticky;
  top: var(--top-gap);
  align-self: start;
  max-height: calc(100vh - var(--top-gap) - 24px);
  overflow-y: auto;
}
main.page-webapp-cart > .btn-wide, main.page-webapp-checkout > .btn-wide { max-width: 320px; }
main.page-webapp-checkout > #checkout-form,
main.page-webapp-checkout > .error-box,
main.page-webapp-checkout > #orders-soon-back,
main.page-webapp-checkout > p.muted { grid-column: 1; }
main.page-webapp-checkout #checkout-form { max-width: 560px; }
main.page-webapp-checkout .checkout-summary .cart-line:first-of-type { border-top: 0; }
main.page-webapp-checkout .checkout-summary .cart-line { padding: 12px 0; }
main.page-webapp-checkout .checkout-summary .totals { margin-top: 12px; }

} /* корзина и оформление: от 1024 px */

/* ---- Кабинет: заказы, заказ, профиль -------------------------------------- */

main.page-webapp-my-orders .order-row {
  margin-bottom: 16px;
  padding: 22px;
  border: 1px solid var(--rule-card);
  background: var(--paper-2);
  transition: border-color .25s;
}
main.page-webapp-my-orders .order-row:hover { border-color: var(--berry); }
main.page-webapp-my-orders .order-row .row b { font-size: 15px; font-weight: 500; }
main.page-webapp-my-orders .order-row .row + .row { margin-top: 10px; font-size: 12px; }
main.page-webapp-my-orders .order-row .row + .row > span:last-child {
  color: var(--ink-text);
  font-size: 17px;
  font-weight: 500;
}
/* Баллы в «Моих заказах» - тёмный блок с крупной цифрой (макет: bonus-summary).
   Только блок итогов: в профиле id bonus-balance стоит у обычной строки. */
main.page .totals#bonus-balance {
  padding: 25px 28px;
  border: 0;
  background: #15212c;
  color: #eaf0f5;
}
/* Крупно - баланс текущего города; строка «Бонусы, <город>» остаётся обычной,
   даже когда она первая (баланса текущего города нет). */
main.page .totals#bonus-balance .row:first-child:not(.bonus-other) b { font: 400 44px / 1.1 Oswald, sans-serif; }
main.page .totals#bonus-balance .sub { color: #b9c6d2; }

main.page .order-meta { margin: -12px 0 20px; }
main.page .paid-banner { border-radius: 0; border: 1px solid var(--rule-card); background: var(--paper-2); }
main.page .actionbar {
  position: static;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  background: none;
}
main.page .actionbar .btn { max-width: 360px; margin: 0; }

main.page .auth-brand { display: none; }
main.page .auth-form { margin-top: 20px; }
main.page .done { padding: 40px 0; }
main.page .done .btn-wide { max-width: 360px; margin-left: auto; margin-right: auto; }
main.page #logout-form .btn-wide { max-width: 320px; }

@media (prefers-reduced-motion: reduce) {
  main.page button, main.page .btn, main.page .product-row img, main.page .tile, .site-header a {
    transition: none;
  }
  main.page-webapp-category .product-row:hover img { transform: none; }
}

/* ---- Узкий экран в браузере (план 2026-10-03-сайт-на-любом-экране) ---------
   Тот же вид сайта в одну колонку: сетки компьютера выше сюда не доходят,
   списки и формы остаются в раскладке style.css с палитрой макета. */

@media (max-width: 1023.98px) {

main.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 5% 64px;
}
/* Отдельным правилом, как выше: :has() в общем списке уронил бы весь список. */
main.page-webapp-product:not(:has(.product-photo)) { padding-left: 5%; padding-right: 5%; }
/* Вход остаётся узкой колонкой и на планшете (правило выше её расширило бы). */
main.page-webapp-login,
main.page-webapp-login-code,
main.page-webapp-login-call { max-width: 520px; }
main.page h1 { margin-bottom: 20px; font-size: 32px; }
main.page h2 { margin-top: 28px; font-size: 21px; }
main.page .cabinet-tabs { margin: -4px 0 22px; }
main.page .totals { padding: 18px; }
main.page .list-card { padding: 4px 18px; }
main.page .list-link { padding: 16px 18px; }
main.page .welcome { padding: 20px; }
main.page #logout-form .btn-wide { max-width: none; }
main.page .product-row img, main.page .photo-placeholder, main.page .product-photo, main.page .call-help { border-radius: 0; }

/* Каталог витрины: знак бренда уже в шапке сайта. */
main.page-webapp-catalog .brand-mark { display: none; }
main.page-webapp-catalog .welcome-head { padding-top: 0; }
main.page-webapp-catalog .welcome-title {
  font: 400 32px / 1.1 Oswald, sans-serif;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

} /* узкий экран */

}