/* Стиль «Дары Алтая»: ночной лес, золото, орнамент — как в прайсах канала */

/* Шрифты лежат на нашем сервере (webapp/fonts, лицензия OFL) — без запросов к Google.
   Lora — вариативный: один файл на начертания 400–700. latin-ext нужен для знака ₽. */
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/lora-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/lora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/lora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ruslan Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ruslan-display-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Ruslan Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ruslan-display-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0c110d;
  --bg-glow: #17241a;
  --card: #141c16;
  --card-2: #19231b;
  --line: rgba(214, 172, 92, .24);
  --sep: rgba(214, 172, 92, .14);
  --gold: #d9ac57;
  --gold-light: #f1d48f;
  --gold-dark: #9c7130;
  --gold-grad: linear-gradient(180deg, #f0cf83 0%, #d6a24a 55%, #b5843a 100%);
  --btn-text: #1b1307;
  --text: #efe7d3;
  --hint: #a59c85;
  --danger: #e57a6e;
  --radius: 14px;
  --serif: "Lora", "PT Serif", Georgia, "Times New Roman", serif;
  --display: "Ruslan Display", "Lora", Georgia, serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--serif);
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  padding-bottom: calc(28px + var(--safe-bottom));
  overscroll-behavior-y: none;
  background:
    radial-gradient(120% 60% at 50% 0%, var(--bg-glow) 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.has-fallback { padding-bottom: calc(100px + var(--safe-bottom)); }

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.view { animation: view-in .25s ease-out; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- шапка ---------- */
.hero-head {
  position: relative; overflow: hidden;
  padding: 26px 16px 22px; text-align: center;
  border-bottom: 1px solid var(--sep);
}
.hero-head .mountains { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; }
.hero-head .moon {
  position: absolute; top: 20px; left: 16%; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6dc, #d8cba4 60%, #b9ab84);
  box-shadow: 0 0 24px 6px rgba(240, 225, 180, .18);
  opacity: .85;
}
.hero-head > * { position: relative; }
/* Эмблема «Дары Алтая» на светлом «лунном» круге — как аватар канала */
.emblem-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto 6px; }
.emblem-wrap::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(217, 172, 87, .55);
}
.emblem {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 50px 4px rgba(249, 240, 210, .12);
}
.paw { width: 54px; height: 54px; color: var(--gold); margin: 0 auto 6px; display: block; filter: drop-shadow(0 2px 8px rgba(217, 172, 87, .35)); }
.brand-title {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 34px; line-height: 1.05; letter-spacing: .04em;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
.kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 4px;
  color: var(--gold-light); font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
}
.kicker i { width: 28px; height: 1px; background: var(--gold); }
.tagline { margin: 6px 0 0; color: var(--hint); font-size: 13px; letter-spacing: .03em; }

.orn { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--gold); margin: 8px auto 0; max-width: 220px; font-size: 9px; }
/* no-repeat: при дробной ширине iOS дорисовывает в конце пиксель следующей «плитки» градиента */
.orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold)) no-repeat; }
.orn i:last-child { background-image: linear-gradient(90deg, var(--gold), var(--gold-dark), transparent); }

.head-actions { position: absolute !important; top: 12px; right: 12px; display: flex; gap: 8px; }
.head-actions.left { right: auto; left: 12px; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(20, 28, 22, .75); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--gold-light);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--gold-grad); color: var(--btn-text);
  font: 700 11px/20px var(--serif); text-align: center; box-shadow: 0 0 0 2px var(--bg);
}

.page-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 6px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: .01em; }
.back-link { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--gold-light); display: grid; place-items: center; flex: none; }
.back-link svg { width: 20px; height: 20px; }

/* ---------- поиск и категории ---------- */
.search {
  margin: 14px 16px 4px; height: 44px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--gold);
}
.search svg { width: 18px; height: 18px; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--text); font-family: var(--serif); }
.search input::placeholder { color: var(--hint); }
.search input::-webkit-search-cancel-button { filter: invert(.7) sepia(1) saturate(3) hue-rotate(5deg); }

.chips {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  background: linear-gradient(180deg, var(--bg) 80%, rgba(12, 17, 13, 0));
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 36px; padding: 0 15px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s;
}
.chip.active { background: var(--gold-grad); color: var(--btn-text); border-color: transparent; }

/* ---------- сетка товаров ---------- */
.section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 16px 12px; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-light);
}
.section-title .dia { color: var(--gold); font-size: 11px; }
.section-title .count { color: var(--hint); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-dark), transparent) no-repeat; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { background: var(--card); border: 1px solid var(--sep); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }

/* «Популярное» — маленькие карточки в ряд, листаются вбок; видно 3 с краешком четвёртой — понятно, что есть ещё */
.pop-row {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 0 4px 12px;
  scroll-snap-type: x mandatory; scroll-padding-left: 12px; scrollbar-width: none;
}
.pop-row::-webkit-scrollbar { display: none; }
.pop-row::after { content: ""; flex: 0 0 4px; } /* отступ справа у последней карточки (padding в ленте не везде работает) */
.pop-card {
  flex: 0 0 calc((100% - 16px) / 3.2); scroll-snap-align: start; cursor: pointer;
  background: var(--card); border: 1px solid var(--sep); border-radius: 12px; overflow: hidden;
}
@media (min-width: 560px) { .pop-card { flex-basis: calc((100% - 32px) / 5.2); } }
.pop-card:active .tile img { transform: scale(1.03); }
.pop-name {
  padding: 6px 8px 0; font-size: 12px; font-weight: 600; line-height: 1.25; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pop-price { padding: 3px 8px 8px; font-size: 14px; font-weight: 700; color: var(--gold-light); white-space: nowrap; }
.pop-price .per { font-size: 11px; font-weight: 500; margin-left: 3px; }
.card-link { cursor: pointer; display: flex; flex-direction: column; flex: 1; }
.tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #101711; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.card:active .tile img { transform: scale(1.03); }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -30px 40px -20px rgba(12, 17, 13, .55); }

.placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; position: relative;
  background:
    radial-gradient(70% 70% at 50% 40%, #213025 0%, #121a14 70%, #0e140f 100%);
}
.placeholder::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(214, 172, 92, .28); border-radius: 8px;
}
.placeholder::after {
  content: "◆"; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 9px; background: #16211a; padding: 0 5px; line-height: 12px;
}
.placeholder svg { width: 44%; height: 44%; color: var(--gold); opacity: .9; filter: drop-shadow(0 3px 10px rgba(217, 172, 87, .25)); }
.placeholder .ph-name {
  position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: center;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark);
}

.badge {
  position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 9px; border-radius: 8px;
  background: var(--gold-grad); color: var(--btn-text); font-size: 11px; font-weight: 700; line-height: 1.35;
}
.ai-mark {
  position: absolute; right: 6px; bottom: 6px; z-index: 1; padding: 2px 6px; border-radius: 6px;
  background: rgba(12, 17, 13, .62); color: rgba(239, 231, 211, .82); font-size: 10px; letter-spacing: .03em;
}
.hero .ai-mark { right: 14px; bottom: 14px; font-size: 11px; }
.card-body { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.card-name {
  font-size: 14px; font-weight: 600; line-height: 1.25; min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-weight { font-size: 12px; color: var(--hint); min-height: 1.4em; }
.price-row { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 10px; }
.price { font-size: 17px; font-weight: 700; color: var(--gold-light); }
.old-price { font-size: 12px; color: var(--hint); text-decoration: line-through; }
.card-controls { padding: 0 12px 12px; }

.add-btn {
  width: 100%; height: 36px; border-radius: 10px; background: var(--gold-grad); color: var(--btn-text);
  font-size: 14px; font-weight: 700; transition: transform .1s, filter .15s;
}
.add-btn:active { transform: scale(.97); filter: brightness(.92); }
.add-btn.outline { background: none; border: 1px solid var(--gold); color: var(--gold-light); }

.stepper {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(217, 172, 87, .08);
}
.stepper button { width: 40px; height: 100%; font-size: 20px; font-weight: 600; display: grid; place-items: center; color: var(--gold-light); }
.stepper button:active { opacity: .6; }
.stepper .qty { font-weight: 700; font-size: 15px; min-width: 24px; text-align: center; }
.stepper.small { height: 32px; width: 108px; }
.stepper.small button { width: 34px; font-size: 18px; }
.stepper.big { height: 48px; border-radius: 12px; }
.stepper.big button { width: 56px; font-size: 24px; }
.add-btn.big { height: 48px; border-radius: 12px; font-size: 16px; }

.empty { text-align: center; padding: 48px 24px; color: var(--hint); }
.empty .big-icon { width: 64px; height: 64px; margin: 0 auto 12px; color: var(--gold); }
.empty .big-icon svg { width: 100%; height: 100%; }
.empty h2 { margin: 0 0 6px; font-size: 19px; color: var(--text); }
.empty p { margin: 0 0 18px; }
.text-btn { color: var(--gold); font-weight: 600; font-size: 15px; padding: 8px 4px; }
.pill-btn { height: 46px; padding: 0 22px; border-radius: 12px; background: var(--gold-grad); color: var(--btn-text); font-weight: 700; }
.secondary-btn { height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--gold); color: var(--gold-light); font-weight: 600; }

.price-note { text-align: center; color: var(--hint); font-size: 12px; margin: 22px 16px 0; letter-spacing: .02em; }

/* ---------- карточка товара ---------- */
.hero { margin: 4px 12px 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); position: relative; }
.hero .tile { aspect-ratio: 4 / 3; }
.hero .badge { top: 14px; left: 14px; font-size: 12px; padding: 4px 10px; }
.hero::before { content: ""; position: absolute; inset: 7px; z-index: 1; border: 1px solid rgba(241, 212, 143, .28); border-radius: 12px; pointer-events: none; }
.panel { background: var(--card); border: 1px solid var(--sep); border-radius: var(--radius); margin: 10px 12px 0; padding: 16px; }
.product-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.product-meta { color: var(--hint); margin-top: 4px; font-size: 14px; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 14px; }
.product-price .price { font-size: 28px; }
.panel h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold);
}
.panel h3::before { content: "◆"; font-size: 8px; }
.panel p { margin: 0; line-height: 1.6; }

.opt-label { font-size: 13px; color: var(--hint); margin: 0 0 8px; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.opt {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2);
  font-size: 13px; line-height: 1.25; text-align: left;
}
.opt.active { border-color: var(--gold); background: rgba(217, 172, 87, .14); color: var(--gold-light); }

/* ---------- корзина ---------- */
.list { background: var(--card); border: 1px solid var(--sep); border-radius: var(--radius); margin: 8px 12px 0; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px; }
.row + .row { border-top: 1px solid var(--sep); }
.thumb { width: 62px; height: 62px; border-radius: 12px; flex: none; overflow: hidden; border: 1px solid var(--sep); cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .placeholder::before, .thumb .placeholder::after, .thumb .ph-name { display: none; }
.thumb .placeholder svg { width: 56%; height: 56%; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; font-size: 15px; line-height: 1.25; cursor: pointer; }
.row-opt { color: var(--gold-light); font-size: 13px; margin-top: 2px; }
.row-sub { color: var(--hint); font-size: 13px; margin: 2px 0 8px; }
.row-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-sum { font-weight: 700; color: var(--gold-light); }

.summary { background: var(--card); border: 1px solid var(--sep); border-radius: var(--radius); margin: 10px 12px 0; padding: 14px 16px; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--hint); }
.summary .line b { color: var(--text); font-weight: 600; text-align: right; white-space: nowrap; }
.summary .total { color: var(--text); font-size: 18px; font-weight: 700; border-top: 1px solid var(--sep); margin-top: 8px; padding-top: 10px; }
.summary .total b { font-weight: 700; color: var(--gold-light); }
.center { text-align: center; margin-top: 12px; }

/* ---------- оформление ---------- */
.form-section { margin: 18px 12px 0; }
.form-section > h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 4px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold);
}
.form-section > h3::before { content: "◆"; font-size: 8px; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 13px; color: var(--hint); margin: 0 4px 4px; }
.field input, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 12px 14px; font-size: 16px; outline: none; resize: none; transition: border-color .15s;
}
.field input::placeholder, .field textarea::placeholder { color: #6f6957; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.field .error { display: none; color: var(--danger); font-size: 13px; margin: 4px 4px 0; }
.field.invalid .error { display: block; }

.options { display: grid; gap: 8px; }
.option {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--sep); text-align: left; width: 100%; transition: border-color .15s;
}
.option.selected { border-color: var(--gold); background: rgba(217, 172, 87, .07); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hint); flex: none; display: grid; place-items: center; }
.option.selected .radio { border-color: var(--gold); }
.option.selected .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.option-main { flex: 1; min-width: 0; }
.option-title { display: block; font-weight: 600; }
.option-desc { display: block; color: var(--hint); font-size: 13px; }
.option-price { font-weight: 600; white-space: nowrap; color: var(--gold-light); font-size: 14px; }
.note { margin: 14px 16px 0; color: var(--hint); font-size: 13px; text-align: center; }

/* ---------- успех / заказы ---------- */
.success { text-align: center; padding: 40px 24px 8px; }
.success .check {
  width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--gold-grad); color: var(--btn-text);
  display: grid; place-items: center; font-size: 42px; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(217, 172, 87, .15), 0 10px 30px rgba(217, 172, 87, .25);
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success h1 { margin: 0 0 8px; font-size: 24px; }
.success p { margin: 0 auto; color: var(--hint); max-width: 320px; }
.actions { display: flex; gap: 10px; justify-content: center; margin: 20px 16px 0; flex-wrap: wrap; }

.order-card { background: var(--card); border: 1px solid var(--sep); border-radius: var(--radius); margin: 10px 12px 0; padding: 14px 16px; }
.order-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-top b { font-size: 16px; }
.order-date { color: var(--hint); font-size: 13px; margin-top: 2px; }
.order-items { margin: 8px 0; font-size: 14px; }
.order-total { display: flex; justify-content: space-between; font-weight: 700; border-top: 1px solid var(--sep); padding-top: 8px; }
.order-total span:last-child { color: var(--gold-light); }
.status { font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.status-new { background: rgba(217, 172, 87, .16); color: var(--gold-light); }
.status-confirmed { background: rgba(120, 190, 120, .15); color: #9fd49a; }
.status-shipped { background: rgba(140, 170, 230, .15); color: #a9c1f0; }
.status-ready { background: rgba(140, 170, 230, .15); color: #a9c1f0; }
.status-done { background: rgba(120, 190, 120, .15); color: #9fd49a; }
.status-cancelled { background: rgba(229, 122, 110, .14); color: var(--danger); }

/* ---------- прочее ---------- */
.loader { display: grid; place-items: center; min-height: 60vh; }
.splash { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
/* Заставка — круглый логотип канала целиком (он же в шапке, второй раз не скачивается) */
.splash img {
  width: 168px; height: 168px; border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(217, 172, 87, .18), 0 0 60px rgba(249, 240, 210, .12);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.04); } }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(217, 172, 87, .2); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.main-fallback {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  background: rgba(14, 20, 15, .96); border-top: 1px solid var(--line);
}
.main-fallback button {
  width: 100%; height: 52px; border-radius: 14px; background: var(--gold-grad); color: var(--btn-text);
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
}
.main-fallback button:disabled { opacity: .6; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); z-index: 30;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #1b241d; border: 1px solid var(--line); color: var(--text); padding: 10px 16px; border-radius: 12px;
  font-size: 14px; max-width: calc(100% - 32px); transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.has-fallback .toast { bottom: calc(92px + var(--safe-bottom)); }

/* ---------- юридические документы ---------- */
.legal { padding: 4px 18px 28px; line-height: 1.6; font-size: 15px; }
.legal h1 { font-size: 22px; line-height: 1.25; margin: 6px 0 4px; color: var(--gold-light); }
.legal h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold);
  margin: 24px 0 8px;
}
.legal h2::before { content: "◆"; font-size: 8px; }
.legal p { margin: 0 0 10px; }
.legal ol, .legal ul { margin: 0 0 10px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--gold-light); }
.legal .legal-meta { color: var(--hint); font-size: 13px; }
.legal table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 13px; }
.legal td, .legal th { border: 1px solid var(--sep); padding: 7px 8px; vertical-align: top; text-align: left; }
.legal th { color: var(--gold); font-weight: 600; background: var(--card); }
/* Инструкция владельца в панели: разделы свёрнуты, найденное подсвечивается */
.guide-text { padding: 4px 16px 14px; font-size: 14px; border-bottom: 1px solid var(--sep); }
.guide-text h3 { font-size: 15px; margin: 12px 0 6px; color: var(--gold-light); }
.guide-text code { font-size: 12px; background: var(--card-2); border-radius: 4px; padding: 1px 4px; }
.guide-text .g-table { overflow-x: auto; }
.guide-text ul.g-check { list-style: none; padding-left: 2px; }
.guide-text ul.g-sub { margin-top: -6px; padding-left: 42px; }
.g-focus { animation: g-flash 2.6s ease-out; border-radius: 6px; }
@keyframes g-flash { 0%, 45% { background: rgba(214, 172, 92, .3); } 100% { background: transparent; } }
.guide-snip { font-size: 14px; line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.guide-snip mark { background: rgba(214, 172, 92, .32); color: inherit; border-radius: 3px; padding: 0 1px; }
.guide-back { margin: 2px 14px 0; }
.guide-near { margin-top: 14px; }
.legal-standalone { max-width: 760px; margin: 0 auto; padding: 12px 0 40px; }
.legal-links { padding: 0 18px; font-size: 14px; color: var(--hint); }
.legal-links a { color: var(--gold-light); }

.legal-footer { margin: 34px 16px 0; text-align: center; color: var(--hint); font-size: 12px; line-height: 1.5; }
.legal-footer nav { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 12px; }
.legal-footer nav a { color: var(--gold-light); font-size: 14px; text-decoration: none; }
.legal-footer p { margin: 0 0 4px; }

.check { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 6px 4px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--gold); }
.check > span { flex: 1; min-width: 0; }
.check a { color: var(--gold-light); }
.check .hint { color: var(--hint); }
.check .error { display: none; flex-basis: 100%; color: var(--danger); font-size: 13px; padding-left: 34px; }
.check.invalid .error { display: block; }
.check.invalid input { outline: 2px solid var(--danger); outline-offset: 2px; }

/* весовые товары */
.per { font-size: 13px; color: var(--hint); margin-left: -2px; }
.product-price .per { font-size: 15px; }
.portion-note { margin: -6px 0 14px; color: var(--hint); font-size: 13px; }
.stepper .qty { white-space: nowrap; }

/* нет в наличии */
.card--off .tile img, .card--off .placeholder { filter: grayscale(.85) brightness(.7); }
.card--off .card-name, .card--off .price { opacity: .6; }
.sold-out {
  height: 36px; border-radius: 10px; border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--hint); font-size: 13px; font-weight: 600;
}
#product-controls .sold-out { height: 48px; border-radius: 12px; font-size: 15px; }

/* выбор вида товара обязателен; вида может не быть в наличии */
.opt.off { opacity: .45; cursor: default; }
.opt.off .opt-v { text-decoration: line-through; }
.choose-hint {
  min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px dashed var(--gold-dark);
  display: grid; place-items: center; text-align: center; color: var(--gold-light); font-size: 14px;
}
.shake { animation: shake .4s ease-in-out; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- панель управления ---------- */
.hint { color: var(--hint); }
.hint-s { color: var(--hint); font-size: 13px; line-height: 1.45; margin: 8px 4px 0; }
.adm-pad { margin: 0 16px 4px; }
.loader.small { min-height: 30vh; }
.adm-tabs {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; margin: 6px 12px 10px; padding: 4px;
  background: rgba(20, 28, 22, .92); border: 1px solid var(--sep); border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* ширина вкладки — по названию: длинное «Управление» не обрезается */
.adm-tabs button { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 5px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--hint); white-space: nowrap; }
@media (max-width: 370px) { .adm-tabs button { padding: 0 3px; font-size: 12px; } }
.adm-tabs button.active { background: var(--gold-grad); color: var(--btn-text); }
.chip-n { font-size: 12px; opacity: .75; }

.adm-card { cursor: pointer; }
.adm-cust { font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; }
.adm-note-line { margin-top: 4px; font-size: 13px; color: var(--gold-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.adm-order-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 16px 2px; font-size: 13px; }
.adm-name { font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
.adm-contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.adm-val { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.adm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--gold-light);
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.adm-btn.danger, .adm-st-cancelled { color: var(--danger); border-color: rgba(229, 122, 110, .4); }
.adm-comment { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); font-size: 14px; overflow-wrap: anywhere; }
.adm-st-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adm-st { height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); font-size: 14px; font-weight: 600; }
.adm-st:disabled { opacity: .5; }
.adm-textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2);
  padding: 10px 12px; font-size: 16px; outline: none; resize: vertical;
}
.adm-textarea:focus { border-color: var(--gold); }
.adm-textarea::placeholder { color: #6f6957; }
.adm-right { display: flex; justify-content: flex-end; margin-top: 8px; }
.adm-ev { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 14px; }
.adm-ev + .adm-ev { border-top: 1px solid var(--sep); }
.adm-ev-at { flex: none; min-width: 96px; color: var(--hint); font-size: 12px; }
.adm-box { background: var(--card); border: 1px solid var(--sep); border-radius: 12px; padding: 4px 14px; }
.adm-box .hint-s { margin: 8px 0; }

.switch { position: relative; display: inline-block; flex: none; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch span {
  position: absolute; inset: 0; border-radius: 14px; background: #263027; border: 1px solid var(--line); transition: background .2s;
}
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--hint); transition: transform .2s, background .2s;
}
.switch input:checked + span { background: rgba(217, 172, 87, .35); border-color: var(--gold); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--gold-light); }
.switch input:disabled + span { opacity: .5; }
.adm-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--sep); border-radius: 12px; cursor: pointer;
}

.adm-prod .row-main { cursor: pointer; }
.adm-prod .row-sub { margin-bottom: 0; }
.row-off .thumb, .row-off .row-title { opacity: .45; }
.adm-prod-head { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.adm-prod-title { margin: 0 0 2px; font-size: 19px; line-height: 1.25; }
.adm-portion { margin: -4px 4px 10px; }
.adm-opts { background: var(--card); border: 1px solid var(--sep); border-radius: 12px; padding: 4px 10px; }
.adm-opts .check + .check { border-top: 1px solid var(--sep); }

.adm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 12px; }
.adm-stat { background: var(--card); border: 1px solid var(--sep); border-radius: 12px; padding: 10px; }
.adm-stat-title { color: var(--hint); font-size: 12px; }
.adm-stat-sum { margin: 2px 0; color: var(--gold-light); font-size: 16px; font-weight: 700; white-space: nowrap; }
.adm-stat-sub { color: var(--hint); font-size: 12px; line-height: 1.4; }
.adm-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-top .line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.adm-top .line + .line { border-top: 1px solid var(--sep); }
.adm-top .line b { color: var(--gold-light); white-space: nowrap; }

.adm-list-flat { margin: 0; }
.adm-person .row-sub { margin-bottom: 0; }
.adm-invite { display: flex; gap: 8px; margin-top: 10px; }
.adm-invite input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); font-size: 16px; outline: none;
}
.adm-invite input:focus { border-color: var(--gold); }
.adm-invite input::placeholder { color: #6f6957; }

/* доставка Ozon: короткая подсказка при оформлении */
.ozon-note {
  margin-top: 10px; padding: 10px 14px; border-radius: 12px;
  background: rgba(217, 172, 87, .07); border: 1px solid var(--line); font-size: 13px; line-height: 1.45;
}
.ozon-note ol { margin: 0; padding-left: 18px; }
.ozon-note li + li { margin-top: 4px; }
.ozon-note p { margin: 6px 0 0; color: var(--hint); }
.ozon-note a { color: var(--gold-light); }
.ozon-done { color: var(--gold-light); }

/* остатки */
.stock-low { color: #e9b45c; }
.adm-stock { padding: 2px 12px; }
.adm-srow { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 0; }
.adm-srow + .adm-srow, .adm-sform + .adm-srow { border-top: 1px solid var(--sep); }
.adm-scheck { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--gold); }
.adm-sname { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.adm-sqty { flex: none; text-align: right; font-weight: 600; font-size: 14px; white-space: nowrap; }
.adm-sqty small { display: block; font-weight: 400; font-size: 11px; color: var(--hint); }
.adm-pm { width: 38px; padding: 0; font-size: 17px; }
.adm-pm.active { border-color: var(--gold); background: rgba(217, 172, 87, .14); }
.adm-sform { display: grid; gap: 8px; padding: 4px 0 12px; }
.adm-sform input {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-2); font-size: 16px; outline: none;
}
.adm-sform input:focus { border-color: var(--gold); }
.adm-sform input::placeholder { color: #6f6957; }
.adm-sform .pill-btn { height: 42px; }
.adm-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--sep); }
.adm-seg button { flex: 1; height: 32px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--hint); }
.adm-seg button.active { background: var(--gold-grad); color: var(--btn-text); }

/* розница */
.sale-ticket .row-title { cursor: default; }
.sale-pay { margin: 0 12px 12px; }
.sale-prod { cursor: pointer; padding: 10px 12px; }
.sale-prod .row-sub { margin: 2px 0 0; }
.sale-plus {
  flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold-light); font-weight: 700;
}
.sale-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.sale-today { padding: 12px 16px; }
.sale-today-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.sale-today-head .text-btn { padding: 0; font-size: 14px; }
.sale-today .adm-ev { font-size: 13px; }
.sale-off { opacity: .5; text-decoration: line-through; }
.sale-cancel { padding: 0 2px; font-size: 13px; }

/* оплата по чеку: серая галочка — на проверке, зелёная — подтверждена */
.pay-mark { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--hint); }
.pay-ok { color: #9fd49a; }
.pay-bad { color: var(--danger); }
.pay-acts { margin-top: 8px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order-btn { height: 40px; padding: 0 16px; font-size: 14px; }
.order-btn:disabled { opacity: .6; }
.order-card.focus { border-color: var(--gold); }

/* действия по заказу в панели */
.adm-st-pay-rejected { color: var(--danger); border-color: rgba(229, 122, 110, .4); }
.adm-st-pay-paid { color: #9fd49a; border-color: rgba(120, 190, 120, .45); }
.adm-reason { margin-top: 10px; display: grid; gap: 8px; }

/* остаток в каталоге: «Осталось мало» и «+» на пределе */
/* В карточке — сразу под ценой (цена не сдвигается) и с отступом до кнопки */
.low-left { display: flex; align-items: center; gap: 6px; margin: -5px 0 10px; font-size: 12px; font-weight: 700; color: #e9b45c; }
.low-left::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px rgba(233, 180, 92, .55); }
#product-controls .low-left { margin: 0 0 10px; font-size: 13px; }
.opt-low { color: #e9b45c; font-weight: 600; }
.stepper .at-max { opacity: .35; }

/* сводка: «Сегодня» и разбивка топа */
.adm-today { display: grid; gap: 2px; margin-bottom: 8px; color: var(--hint); font-size: 13px; }
.adm-today b { color: var(--gold-light); font-size: 20px; }
.top-split { display: block; color: var(--hint); font-size: 12px; font-weight: 400; }
.adm-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-log .adm-ev { font-size: 13px; }
.adm-log-more { padding-top: 8px; text-align: center; font-size: 13px; color: var(--gold-light); }
/* юридические документы: текст длинный — шрифт мельче, высоту можно тянуть */
.field textarea.legal-edit { font-size: 13px; line-height: 1.45; resize: vertical; }
.legal-help { margin: 4px 0 12px; }
.legal-help summary { cursor: pointer; font-size: 13px; color: var(--gold-light); }
.legal-help ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.legal-help li + li { margin-top: 2px; }

/* промокод в корзине: свёрнутая ссылка → поле → применённый код; подарок — строка без цены */
.promo-open { display: block; margin: 10px 12px 0; padding: 10px 4px; color: var(--gold); font-weight: 600; font-size: 15px; }
.promo-box { margin: 10px 12px 0; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.promo-box.wait { border-style: dashed; }
.promo-line { display: flex; align-items: center; gap: 10px; }
.promo-line .text-btn { margin-left: auto; padding: 4px; font-size: 14px; }
.promo-tag { font-weight: 700; letter-spacing: .04em; color: var(--gold-light); }
.promo-val { color: #9fd49a; font-weight: 600; font-size: 14px; }
.promo-box.wait .promo-val { color: var(--hint); }
.promo-note { margin-top: 4px; font-size: 13px; color: var(--hint); }
.promo-box.wait .promo-note { color: #e9b45c; }
.promo-form { display: flex; gap: 8px; padding: 8px; }
.promo-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-2); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; outline: none;
}
.promo-form input::placeholder { text-transform: none; letter-spacing: 0; color: #6f6957; }
.promo-form input:focus { border-color: var(--gold); }
.promo-form .pill-btn { height: 44px; padding: 0 16px; }
.gift-row .row-title { cursor: default; }
.gift-tag { font-size: 13px; font-weight: 700; color: #9fd49a; }
.summary .line.promo, .summary .line.promo b { color: #9fd49a; }
.summary .line.promo-off { color: #e9b45c; font-size: 13px; }
.order-promo { font-size: 13px; color: #9fd49a; margin: -2px 0 8px; }

/* промокоды в «Команде» */
.promo-row .row-title { cursor: default; }
.promo-row .promo-val { margin-left: 4px; }
.promo-row .row-sub { margin-bottom: 6px; }
.promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.promo-row.done { opacity: .6; }
.promo-state { font-size: 12px; font-weight: 600; color: var(--hint); }
.promo-state.st-active { color: #9fd49a; }
.promo-state.st-paused { color: #e9b45c; }
.promo-adm { margin-top: 10px; padding: 12px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.promo-adm label > span, .promo-lbl { display: block; font-size: 12px; color: var(--hint); margin: 0 4px 4px; }
.promo-adm select {
  width: 100%; height: 42px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--text); font-size: 15px; outline: none;
}
.promo-adm input[type="date"] { color: var(--text); color-scheme: dark; }
.promo-code-row { display: flex; gap: 8px; }
.promo-code-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.promo-code-row input::placeholder { text-transform: none; }
.promo-empty { margin: 0 4px; color: #e9b45c; }
.promo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.promo-adm .check { padding: 2px 4px; }
.promo-adm .check input { width: 22px; height: 22px; }

/* рассылка в «Команде» (строки списка — как у промокодов) */
.bc-file { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.bc-file-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-hint { margin: 0 4px; }

/* права админов в «Команде» */
.adm-click { cursor: pointer; }
.adm-chev { color: var(--hint); font-size: 14px; padding: 0 4px; }
.owner-badge { font-size: 12px; font-weight: 600; color: var(--gold); margin-left: 4px; }
.adm-sub { margin: 0 0 8px; padding: 10px 12px 12px; border-radius: var(--radius); background: var(--card-2); border: 1px solid var(--line); }
.adm-perms { display: grid; gap: 2px; margin-bottom: 10px; }
.adm-perm { display: flex; align-items: flex-start; gap: 10px; padding: 6px 2px; cursor: pointer; }
.adm-perm input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--gold); }
.adm-perm b { display: block; font-size: 14px; font-weight: 600; }
.adm-perm small { display: block; font-size: 12px; color: var(--hint); line-height: 1.3; }
.adm-sub .adm-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* карточка товара в панели: новый товар и правка */
.adm-new-product { margin-top: 0; }
.adm-card-edit { margin-top: 8px; }
.card-photo-row { display: flex; gap: 14px; align-items: center; }
.card-photo { width: 96px; height: 96px; flex: none; border-radius: 14px; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-photo .placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gold); }
.card-photo .placeholder svg { width: 44px; height: 44px; }
.card-photo-row .hint-s { margin: 6px 0 0; }
.adm-select {
  width: 100%; height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--text); font-size: 16px; outline: none;
}
.card-check { margin-bottom: 10px; }

/* настройки магазина в «Управлении» */
.set-form .field { margin-bottom: 10px; }
.set-check { padding: 4px 2px; }
.set-pays { display: grid; gap: 0; margin-bottom: 10px; }
.set-kind { margin: 0 4px 10px; }
.set-seg { margin-bottom: 10px; }
.set-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.set-icon { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--hint); display: grid; place-items: center; }
.set-icon svg { width: 26px; height: 26px; }
.set-icon.active { border-color: var(--gold); color: var(--gold); }
.set-row-icon { display: inline-flex; color: var(--gold); margin-right: 6px; vertical-align: -3px; }
.set-row-icon svg { width: 18px; height: 18px; }
.qr-photo { background: #fff; }
.qr-photo img { object-fit: contain; }
.set-form .card-photo-row { margin-bottom: 10px; }

/* метки, акции, отзывы, состояние */
.badge-sale { left: auto; right: 8px; background: #c4553f; color: #fff7ef; }
.hero .badge-sale { left: auto; right: 14px; }
.sale-note { margin: -4px 0 8px; font-size: 13px; color: #e9b45c; }
.sale-mark { color: #e9b45c; }
.badge-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.badge-chips .chip { height: 30px; font-size: 13px; }
.reviews .review + .review { border-top: 1px solid var(--sep); }
.review { padding: 10px 0; }
.review p { margin: 6px 0 0; }
.review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.stars { color: var(--gold); letter-spacing: 1px; }
.review-goods { margin-top: 4px; font-size: 12px; color: var(--hint); }
.shop-reviews .text-btn { padding: 8px 0 2px; }
.reviews-total { margin: 0 18px 8px; font-weight: 700; color: var(--gold-light); }
.adm-box.review { padding: 10px 12px; margin-bottom: 8px; }
.adm-box.review .adm-acts { margin-top: 8px; }
.review-on { border-color: rgba(159, 212, 154, .45); }
.logo-photo { border-radius: 50%; }
.logo-photo .placeholder { font-size: 22px; color: var(--hint); }
.adm-new-product { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 16px 10px; }
.adm-new-product .pill-btn { height: 38px; }
.adm-btn.active { border-color: var(--gold); color: var(--gold); }
.adm-bottom { margin-top: 16px; margin-bottom: 24px; }