/* ============================================================================
   ВИТРИНА v3 — «суперапп» (Figma H4aeIVyjwU74kdBmeeTpAX, страница «Суперапп v2 · на нашем»).
   ============================================================================
   Слой ПОВЕРХ v2: подключается, только когда на <html> стоят оба класса dv2 и dv3
   (флаг design_v3, scripts/store/store_design_v2.php). Выключили флаг — файлов
   нет на странице, витрина ровно v2.

   Система (сведена в макете 30.09.2026):
     • кегли 11 / 12 / 13 / 14 / 15 / 16 / 17 / 20 / 24, веса 400 / 500 / 600 / 700
     • скругления 8 (плашка) / 12 (кнопка, поле) / 16 (фото) / 20 (карточка) / круг
     • отступы: внутри карточки 16, между блоками 10, поле экрана 16
     • тёмная шапка — только у вкладок нижнего меню; вложенные экраны — светлая
     • иконки — Lucide, контур 2, цвет = цвет текста (app/v3/ui.js → icon())
     • красный — только цена со скидкой и «Акции»; фиолетовый — метки «новое/в плане»
   Файлы v3 подключаются по алфавиту: 00-base первым, экраны — 10-…, 20-… и т.д.
   ========================================================================== */

html.dv3{
  --v3-r-pill:8px; --v3-r-ctl:12px; --v3-r-photo:16px; --v3-r-card:20px;
  --v3-gap:10px; --v3-pad:16px;
  --v3-photo:#f2f4f2;           /* подложка фото товара (фото белые → multiply) */
  --v3-shadow-bar:0 -4px 16px rgba(0,20,10,.08);
  --v3-shadow-btn:0 2px 6px rgba(0,0,0,.12);
  --v3-sub:#8a918c;             /* третичный текст */
}
/* Светлая тема: тёплая «сливочная» земля вместо серой (#eef1ef) — воздух, а не «Настройки iOS».
   Одна палитра: земля / линии / подложка фото из одного тёплого тона; бумага — белая. */
html.dv3:not(.dk){ --bg:#faf6f0; --line:#efe8de; --v3-photo:#f7f3ed; }
html.dv3.dk{ --red-soft:#3a1f1e; --terra-soft:#33271d; --rare-soft:#2a2238; --v3-photo:#252a27; --v3-shadow-bar:0 -4px 16px rgba(0,0,0,.4); --v3-sub:#8b928d; }

/* Типографика: v2 сбрасывал всё к 500 — в v3 вес снова несёт иерархию. */
html.dv3 body{ font-size:14px; line-height:1.35; }
html.dv3 h1, html.dv3 .v3-h1{ font-size:24px; font-weight:700; letter-spacing:-.01em; line-height:1.15; }
html.dv3 h2, html.dv3 .v3-h2{ font-size:17px; font-weight:700; line-height:1.2; }
html.dv3 .v3-h3{ font-size:15px; font-weight:600; }
html.dv3 .v3-meta{ font-size:12px; color:var(--muted); }
html.dv3 .v3-sub{ font-size:12px; color:var(--v3-sub); }
html.dv3 .v3-cap{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--v3-sub); }

/* Иконки */
html.dv3 .v3-i{ width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Карточка-лист: белая, скруглена, на серой земле */
html.dv3 .v3-card{ background:var(--paper); border-radius:var(--v3-r-card); padding:var(--v3-pad); }
html.dv3 .v3-stack{ display:flex; flex-direction:column; gap:var(--v3-gap); }

/* Плашки и метки */
html.dv3 .v3-pill{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--v3-r-pill);
  font-size:11px; font-weight:600; line-height:1.3; background:var(--bg); color:var(--muted); white-space:nowrap; }
html.dv3 .v3-pill.is-green{ background:var(--green-soft); color:var(--green); }
html.dv3 .v3-pill.is-red{ background:var(--red); color:#fff; }
html.dv3 .v3-pill.is-red-soft{ background:var(--red-soft); color:var(--red); }
html.dv3 .v3-pill.is-rare{ background:var(--rare-soft); color:var(--rare); }

/* Чипсы-фильтры */
html.dv3 .v3-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 16px; margin:0 -16px; }
html.dv3 .v3-chips::-webkit-scrollbar{ display:none; }
html.dv3 .v3-chip{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:18px;
  font-size:13px; font-weight:500; background:var(--paper); color:var(--ink); border:1px solid var(--line); white-space:nowrap; cursor:pointer; }
html.dv3 .v3-chip{ position:relative; min-height:36px; }
html.dv3 .v3-chip::after{ content:''; position:absolute; inset:-4px -2px; }   /* зона нажатия 44 при видимых 36 */
html.dv3 .v3-chips{ padding-top:4px; padding-bottom:4px; }   /* лента режет overflow — место под зону нажатия */
html.dv3 .v3-chip.is-on{ background:var(--head); color:var(--on-head); border-color:var(--head); }

/* Монограмма магазина (логотипа нет → первая буква, как в витрине) */
html.dv3 .v3-mono{ display:inline-grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px;
  font-weight:700; font-size:17px; background:var(--terra-soft); color:var(--terra); }
html.dv3 .v3-mono.is-green{ background:var(--green-soft); color:var(--green); }
html.dv3 .v3-mono.is-blue{ background:#eaf0f6; color:#2f5d8a; }
html.dv3 .v3-mono.is-grey{ background:var(--bg); color:var(--muted); }
html.dv3.dk .v3-mono.is-blue{ background:#1d2833; color:#8fb4da; }

/* Фото товара: белый фон снимка растворяется в подложке */
html.dv3 .v3-photo{ background:var(--v3-photo); border-radius:var(--v3-r-photo); overflow:hidden; position:relative; }
html.dv3 .v3-photo img{ mix-blend-mode:multiply; width:100%; height:100%; object-fit:contain; }
html.dv3.dk .v3-photo img{ mix-blend-mode:normal; }

/* Кнопки */
html.dv3 .v3-btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 16px;
  border-radius:16px; background:var(--head); color:var(--on-head); font-size:16px; font-weight:700; border:0; cursor:pointer; }
html.dv3 .v3-btn.is-split{ justify-content:space-between; }
html.dv3 .v3-btn.is-soft{ background:var(--green-soft); color:var(--green); }
/* Тёмная тема: --head почти чёрный и сливается с тёмной плашкой .v3-bar — главная кнопка
   зелёная. Зелёный тёмной темы притемнён, чтобы белый текст держал контраст ≥4.5.
   То же для главных .btn: экранные файлы v3 красят их в --head (50-order, 51-profile —
   там же !important у входа), поэтому здесь [class] для веса и !important. */
html.dv3.dk .v3-btn:not(.is-soft), html.dv3.dk .btn[class]:not(.soft):not(.ghost){
  background:color-mix(in oklab, var(--green) 80%, #000) !important; color:#fff !important; }
html.dv3 .v3-plus{ position:relative; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--green);
  color:#fff; box-shadow:0 4px 12px color-mix(in srgb, var(--green) 35%, transparent); border:0; }
html.dv3 .v3-plus::after{ content:''; position:absolute; inset:-6px; border-radius:50%; }   /* зона 44 */

/* Нижняя плашка с главной кнопкой экрана */
html.dv3 .v3-bar{ background:var(--paper); box-shadow:var(--v3-shadow-bar); padding:10px 12px calc(12px + env(safe-area-inset-bottom)); }

/* Строка-список (иконка · текст · шеврон) */
html.dv3 .v3-row{ display:flex; align-items:center; gap:12px; min-height:48px; }
html.dv3 .v3-row + .v3-row{ border-top:1px solid var(--bg); }
html.dv3 .v3-row .v3-grow{ flex:1; min-width:0; }
html.dv3 .v3-tile-ico{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--bg); flex:none; }