/* Общий каркас современных тем витрины (все, кроме вологодской): белая, УП.Среда, крафт, графит, море, лён, пастель.
   Здесь нет ни одного цвета и ни одного названия темы: только правила на токенах (var(--...)). Токены, шрифты, формы и всё
   особенное у темы лежит в её файле theme-<id>.css, он целиком определяет вид: заменить тему можно одним файлом.
   Включается классом .tm на <html> (его ставит base.html вместе с классом темы). Общая вёрстка и размеры - в store.css.

   Токены темы (все обязательны, кроме помеченных "по умолчанию"):
   --page --card --ink --ink2 --ink3 --line --line2 --brand --action --action-ink --action-hover --soft --focus --err
   --hbg --hink --hink2 --hline            шапка: фон, название и заголовок, вступление, нижняя линия
   --eyebrow                               цвет строки над заголовком
   --chip-bg --chip-ink --chip-line        чип категории
   --chip-on-bg --chip-on-ink --chip-on-line
   --badge-bg --badge-ink --badge-line     метка «Хит», «Новинка»
   --ph-bg --ph-ink                        пустое фото: плитка и значок
   --cb-bg --cb-ink --cb-line --cb-btn-bg --cb-btn-ink   панель «в заявке»
   --font --head --radius --rc             шрифты, радиус кнопок и полей, радиус карточек
   по умолчанию: --chip-r --badge-r --pricefont --namefont --btnfont --btnw --btnls --btntt --h1w --h1ls --h1lh --h1tt
                 --h2w --h2ls --capls --captt --shadow */

/* ---------- Кнопки ---------- */
.tm .btn { min-height: 46px; border-radius: var(--radius); border: 1px solid var(--line2); background: var(--card); color: var(--ink);
  font-family: var(--btnfont, var(--font)); font-size: 15px; font-weight: var(--btnw, 600); letter-spacing: var(--btnls, 0);
  text-transform: var(--btntt, none); filter: none; }
.tm .btn:hover { background: var(--soft); border-color: var(--ink3); filter: none; }
.tm .btn.main, .tm .hero .btn:not(.wg) { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.tm .btn.main:hover, .tm .hero .btn:not(.wg):hover { background: var(--action-hover); border-color: var(--action-hover); filter: none; }
.tm .btn.ghost { color: var(--ink); border-color: var(--line2); background: var(--card); }
.tm .btn.ghost:hover { background: var(--soft); border-color: var(--ink3); }
.tm .btn .ic { width: 18px; height: 18px; }
.tm :focus-visible, .tm .hero :focus-visible, .tm .cartbar :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tm .skip { background: var(--ink); color: var(--page); }

/* ---------- Типографика ---------- */
.tm .h-cap { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink3); letter-spacing: var(--capls, 0); text-transform: var(--captt, none); }
.tm .price { word-spacing: .12em; font-family: var(--pricefont, var(--font)); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.tm .price.ask { font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink2); }
.tm .pnote, .tm .note, .tm .card .sub, .tm .mtext .sub { color: var(--ink2); }
.tm .sec-title { font-family: var(--head); font-weight: var(--h2w, 700); font-size: 21px; letter-spacing: var(--h2ls, -.01em); color: var(--ink); }
.tm .callout { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink2); font-size: 13px; }

/* ---------- Шапка ---------- */
.tm .hero { background: var(--hbg); color: var(--hink); border-bottom: 1px solid var(--hline); }
.tm .hero .top { padding: 14px 0; }
.tm .hero .brandmark, .tm .nav a { color: var(--hink); }
.tm .hero .mname { font-family: var(--head); font-size: 16px; font-weight: 600; letter-spacing: -.005em; color: var(--hink); }
.tm .hero .mname.big small { font-family: var(--font); font-size: 12px; font-weight: 500; opacity: 1; color: var(--hink2); letter-spacing: var(--capls, 0); text-transform: var(--captt, none); }
.tm .hero .mname.big b { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.tm .nav a { color: var(--hink2); font-size: 14px; font-weight: 500; opacity: 1; }
.tm .nav a:hover { color: var(--hink); text-decoration: none; }
.tm .hero-grid { padding: 26px 0 26px; }
.tm .hero .h-cap { color: var(--eyebrow); margin-bottom: 10px; }
.tm .hero h1 { font-size: 31px; font-weight: var(--h1w, 700); letter-spacing: var(--h1ls, -.02em); line-height: var(--h1lh, 1.14); color: var(--hink); text-transform: var(--h1tt, none); }
.tm .hero p.lead { color: var(--hink2); opacity: 1; font-size: 15px; line-height: 1.55; margin-top: 12px; }
.tm .hero-cta { margin-top: 22px; }
.tm .hero .btn.wg { background: var(--card); color: var(--ink); border-color: var(--line2); }
.tm .hero .btn.wg:hover { background: var(--soft); border-color: var(--ink3); }
.tm .hero-cover { background: var(--ph-bg); border: 1px solid var(--line); border-radius: var(--rc); box-shadow: none; }
.tm .hero-tiles .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--rc); overflow: hidden; box-shadow: none; }
.tm .hero-tiles .photo { border-radius: 0; }
.tm .mlogo { width: 40px; height: 40px; }
.tm .mlogo img, .tm .emblem .mlogo img, .tm .mlogo.sm img { filter: none; }
.tm .emblem .mlogo { width: 72px; height: 72px; }
.tm .mlogo.sm { width: 34px; height: 34px; }

/* ---------- Чипы ---------- */
.tm .chipbar { margin-top: 22px; }
.tm .chip { border-radius: var(--chip-r, var(--radius)); border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-ink);
  font-size: 14px; font-weight: 500; min-height: 38px; }
.tm .chip:hover { border-color: var(--ink3); }
.tm .chip.on { background: var(--chip-on-bg); border-color: var(--chip-on-line); color: var(--chip-on-ink); font-weight: 600; }

/* ---------- Карточки ---------- */
.tm .grid { gap: 12px; }
.tm .card { border-radius: var(--rc); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow, none); }
.tm .card .body { padding: 12px 12px 6px; gap: 4px; }
.tm .card .name, .tm .mtext .name { font-family: var(--namefont, var(--font)); font-size: 14.5px; font-weight: var(--namew, 600); }
.tm .card-link:hover .name, .tm .mrow-link:hover .name { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tm .tag, .tm .mrow .tag, .tm .svc .tag, .tm .i-info .tag { background: var(--badge-bg); color: var(--badge-ink); border: 1px solid var(--badge-line);
  border-radius: var(--badge-r, 7px); font-size: 11.5px; font-weight: 600; padding: 3px 8px; }
.tm .add { border-radius: var(--radius); border: 1px solid var(--line2); color: var(--ink); background: var(--card); }
.tm .add:hover { background: var(--soft); border-color: var(--ink3); }
.tm .add.on { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.tm .mlist { border-radius: var(--rc); border-color: var(--line); background: var(--card); }
.tm .mrow { border-top-color: var(--line); }
.tm .about .a-name, .tm .svc .s-name { font-family: var(--namefont, var(--font)); }
.tm .svc-more { color: var(--ink2); }

/* ---------- Пустое фото: спокойная плитка и тонкий значок ---------- */
.tm .photo[class*="tone-"] { background: var(--ph-bg); color: var(--ph-ink); }
.tm .photo .ph-ic { width: 40px; height: 40px; stroke-width: 1.2; opacity: 1; }
.tm .ph-row .ph-ic { width: 26px; height: 26px; }
.tm .ph-thumb .ph-ic { width: 22px; height: 22px; }
.tm .ph-big .ph-ic, .tm .ph-tile .ph-ic, .tm .ph-about .ph-ic { width: 56px; height: 56px; }

/* ---------- Внутренние страницы ---------- */
.tm .bar { background: var(--hbg); border-bottom: 1px solid var(--hline); }
.tm .bar .b-title { font-family: var(--head); font-weight: 600; font-size: 16px; letter-spacing: -.005em; color: var(--hink); }
.tm .bar .back { color: var(--hink); }
.tm .bar .mlogo { width: 34px; height: 34px; }
.tm .gal-main { background: var(--ph-bg); }
.tm .thumb { border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.tm .thumb.on { border: 2px solid var(--ink); }
.tm .i-info h1 { font-size: 26px; font-weight: var(--h1w, 700); letter-spacing: var(--h1ls, -.02em); line-height: 1.15; text-transform: var(--h1tt, none); }
.tm .i-price .price { font-size: 26px; }
.tm .i-price .price.ask { font-size: 18px; font-weight: 600; }
.tm .i-sub { color: var(--ink2); }
.tm .i-info .h-cap { color: var(--eyebrow); }

/* ---------- Корзина, формы ---------- */
.tm .line .photo { width: 64px; height: 64px; border-radius: 8px; flex: none; overflow: hidden; }
.tm .line .l-name { font-weight: 600; font-size: 14.5px; }
.tm .qty button { border-radius: 8px; border: 1px solid var(--line2); background: var(--card); color: var(--ink); width: 32px; height: 32px; }
.tm .qty button:hover { border-color: var(--ink3); }
.tm .total .price { font-size: 24px; }
.tm .total .t-note, .tm .order-form .t-note, .tm #cart-total-note { color: var(--ink2); }
.tm .field { border-radius: var(--radius); border: 1px solid var(--line2); background: var(--card); }
.tm .field label { color: var(--ink3); font-weight: 500; background: var(--card); }
.tm .field input, .tm .field textarea { color: var(--ink); }
.tm .field ::placeholder { color: var(--ink3); opacity: .75; }
.tm .field:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px var(--soft); }
.tm .field.bad { border-color: var(--err); }
.tm .field.bad label { color: var(--err); }
.tm .check { border-radius: 5px; border: 1.5px solid var(--ink3); background: var(--card); }
.tm .check-row { color: var(--ink2); }
.tm .check-row a { color: var(--ink); text-decoration-color: var(--ink3); }
.tm .check-row input:checked + .check { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.tm .check-row input:focus-visible + .check { outline-color: var(--focus); }
.tm .check-row.bad .check { border-color: var(--err); }
.tm .form-error { color: var(--err); background: transparent; border: 1px solid var(--err); border-radius: var(--radius); }
.tm .step .n { background: var(--action); color: var(--action-ink); border-radius: var(--radius); font-family: var(--font); }
.tm .o-lines, .tm .o-total { border-top-color: var(--line); }

/* ---------- Спасибо, пустое состояние, ошибки: плитка со значком, без круга ---------- */
.tm .empty .e-ic, .tm .center .c-ic { background: var(--card); border: 1px solid var(--line2); color: var(--brand); border-radius: 14px; }
.tm .center .c-ic { width: 56px; height: 56px; }
.tm .center .c-ic .ic { width: 28px; height: 28px; stroke-width: 2.2; }
.tm .empty .e-ic { width: 56px; height: 56px; }
.tm .empty .e-ic .ic { width: 28px; height: 28px; }
.tm .empty h2, .tm .center h1, .tm .doc h1, .tm .num { font-family: var(--head); font-weight: var(--h1w, 700); letter-spacing: var(--h1ls, -.02em); text-transform: var(--h1tt, none); }
.tm .center h1 { font-size: 28px; }
.tm .empty h2 { font-size: 22px; }
.tm .center .c-text, .tm .empty p { color: var(--ink2); }
.tm .center .c-status { font-family: var(--font); }
.tm .num { font-size: 22px; }

/* ---------- Панель заявки и подвал ---------- */
.tm .cartbar { background: var(--cb-bg); color: var(--cb-ink); border-top: 1px solid var(--cb-line); }
.tm .cartbar .cb-sum { opacity: 1; color: var(--cb-ink); }
.tm .cartbar .btn { background: var(--cb-btn-bg); color: var(--cb-btn-ink); border-color: var(--cb-btn-bg); min-height: 42px; }
.tm .cartbar .btn:hover { background: var(--cb-btn-bg); filter: brightness(.94); }
.tm .foot { border-top: 1px solid var(--line); color: var(--ink2); }
.tm .foot .f-text b { color: var(--ink); font-weight: 600; }
.tm .foot .f-links a, .tm .foot .legal { color: var(--ink2); }
.tm .logo-mark { width: 36px; height: 36px; }

/* самый узкий телефон (320): строка заявки уже, фото в ней меньше, чтобы название не рвалось по слогам */
@media (max-width: 360px) {
  .tm .line { gap: 8px; padding: 8px; }
  .tm .line .photo { width: 48px; height: 48px; }
  .tm .line .l-side { gap: 4px; }
  .tm .qty button { width: 30px; height: 30px; }
  .tm .qty output { min-width: 24px; }
}
@media (min-width: 700px) {
  .tm .hero h1 { font-size: 40px; }
  .tm .gal-main .photo { border-radius: var(--rc); }
}
@media (min-width: 1000px) {
  .tm .hero .top { padding: 16px 0; }
  .tm .mlogo { width: 44px; height: 44px; }
  .tm .emblem .mlogo { width: 96px; height: 96px; }
  .tm .hero h1 { font-size: 46px; }
  .tm .hero-grid { padding: 44px 0 36px; align-items: center; }
  .tm .hero p.lead { font-size: 16px; }
  .tm .hero-cta { max-width: 460px; }
  .tm .grid { gap: 14px; }
  .tm .ph-tile { height: 240px; }
  .tm .gal-main .photo { border: 1px solid var(--line); }
  .tm .sec-title { margin-top: 38px; }
}