/* ============================================================================
   v3 · Миссия: онбординг (app/v3/onboarding.js), «Почему Арбуз» (views/about.js),
   строка «покупаете напрямую» в карточке магазина (views/catalog.js).
   ========================================================================== */

/* ── Кружок магазина (логотип / монограмма) ─────────────────────────────── */
html.dv3 .v3m-badge{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:var(--paper); box-shadow:0 6px 18px rgba(0,40,20,.12); flex:none; }
html.dv3 .v3m-badge img{ width:100%; height:100%; object-fit:cover; display:block; }
html.dv3 .v3m-badge .v3-mono{ width:100%; height:100%; border-radius:50%; font-size:22px; }

/* ── Онбординг ──────────────────────────────────────────────────────────── */
html.dv3 .v3m-ob{ position:fixed; inset:0; z-index:400; display:flex; flex-direction:column; color:var(--ink);
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--dl-pink) 14%, var(--bg)) 0%, var(--bg) 62%);
  padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  animation:v3m-in .32s ease-out both; }
html.dv3 .v3m-ob:focus{ outline:none; }
html.dv3 .v3m-ob.is-out{ animation:v3m-out .24s ease-in both; }
@keyframes v3m-in{ from{ opacity:0; transform:translateY(12px); } }
@keyframes v3m-out{ to{ opacity:0; transform:translateY(12px); } }
html.dv3 .v3m-skip{ align-self:flex-end; margin:8px 12px 0; min-height:40px; padding:0 14px; border:0; border-radius:12px;
  background:transparent; color:var(--muted); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
html.dv3 .v3m-track{ flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
html.dv3 .v3m-track::-webkit-scrollbar{ display:none; }
html.dv3 .v3m-slide{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:0 28px; text-align:center; }
html.dv3 .v3m-t{ margin:28px 0 10px; font-size:24px; font-weight:700; line-height:1.2; }
html.dv3 .v3m-s{ margin:0; max-width:320px; font-size:16px; line-height:1.45; color:var(--muted); }
html.dv3 .v3m-foot{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:12px 16px 16px; }
html.dv3 .v3m-dots{ display:flex; gap:6px; }
html.dv3 .v3m-dots i{ width:7px; height:7px; border-radius:99px; background:color-mix(in srgb, var(--ink) 18%, transparent);
  transition:width .3s cubic-bezier(.34,1.56,.64,1), background .2s; }
html.dv3 .v3m-dots i.on{ width:22px; background:var(--dl-green); }
html.dv3 .v3m-next{ width:100%; max-width:420px; }

/* Иллюстрации: 240×240, только формы и реальные логотипы */
html.dv3 .v3m-art{ position:relative; width:240px; height:240px; flex:none; }
html.dv3 .v3m-art::before{ content:""; position:absolute; inset:18px; border-radius:50%;
  background:color-mix(in srgb, var(--dl-green) 12%, var(--paper)); }
html.dv3 .v3m-art-shops .v3m-badge{ position:absolute; animation:v3m-float 4.2s ease-in-out infinite; }
html.dv3 .v3m-ph{ background:color-mix(in srgb, var(--dl-pink) 22%, var(--paper)); }
html.dv3 .v3m-ph.is-p1, html.dv3 .v3m-ph.is-p3{ background:color-mix(in srgb, var(--dl-lime) 40%, var(--paper)); }
html.dv3 .v3m-ph.is-p4{ background:color-mix(in srgb, var(--dl-sun) 45%, var(--paper)); }
html.dv3 .v3m-art .is-p0{ left:88px; top:6px; width:72px; height:72px; }
html.dv3 .v3m-art .is-p1{ left:6px; top:74px; animation-delay:-.8s; }
html.dv3 .v3m-art .is-p2{ right:4px; top:82px; width:70px; height:70px; animation-delay:-1.6s; }
html.dv3 .v3m-art .is-p3{ left:34px; bottom:12px; width:58px; height:58px; animation-delay:-2.4s; }
html.dv3 .v3m-art .is-p4{ right:38px; bottom:6px; width:60px; height:60px; animation-delay:-3.2s; }
html.dv3 .v3m-slice{ position:absolute; left:50%; top:50%; width:72px; height:72px; transform:translate(-50%,-40%); }
html.dv3 .v3m-slice svg, html.dv3 .v3m-hero-slice svg{ width:100%; height:100%; display:block; }
@keyframes v3m-float{ 50%{ transform:translateY(-8px); } }

html.dv3 .v3m-blob{ position:absolute; border-radius:46% 54% 60% 40% / 50% 42% 58% 50%; }
html.dv3 .v3m-blob.is-a{ inset:40px 30px 50px 46px; background:color-mix(in srgb, var(--dl-pink) 26%, var(--paper)); }
html.dv3 .v3m-blob.is-b{ inset:70px 54px 28px 26px; background:color-mix(in srgb, var(--dl-lime) 34%, var(--paper)); opacity:.8; }
html.dv3 .v3m-big{ position:absolute; inset:0; display:grid; place-items:center; color:var(--dl-green); }
html.dv3 .v3m-big .v3-i{ width:96px; height:96px; stroke-width:1.6; }
html.dv3 .v3m-chip{ position:absolute; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--paper); box-shadow:0 6px 18px rgba(0,40,20,.14); animation:v3m-float 3.6s ease-in-out infinite; }
html.dv3 .v3m-chip.is-1{ right:26px; top:44px; color:var(--dl-green); }
html.dv3 .v3m-chip.is-2{ left:30px; bottom:46px; color:var(--dl-pink); animation-delay:-1.8s; }

html.dv3 .v3m-art-ride{ display:flex; align-items:center; justify-content:space-between; padding:0 22px; }
html.dv3 .v3m-node{ position:relative; display:grid; place-items:center; width:56px; height:56px; border-radius:18px;
  background:var(--paper); color:var(--dl-green); box-shadow:0 6px 18px rgba(0,40,20,.12); }
html.dv3 .v3m-node.is-home{ color:var(--dl-pink); }
html.dv3 .v3m-node .v3-i{ width:26px; height:26px; }
html.dv3 .v3m-road{ position:relative; flex:1; height:3px; margin:0 8px;
  background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 24%, transparent) 0 6px, transparent 6px 12px); }
html.dv3 .v3m-bike{ position:absolute; top:-30px; left:0; display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--dl-green); color:#fff; animation:v3m-ride 2.8s ease-in-out infinite; }
html.dv3 .v3m-bike .v3-i{ width:20px; height:20px; }
@keyframes v3m-ride{ 0%{ transform:translateX(-6px); } 55%,100%{ transform:translateX(calc(100% + 34px)); } }

@media (prefers-reduced-motion: reduce){
  html.dv3 .v3m-ob, html.dv3 .v3m-art *, html.dv3 .v3m-bike{ animation:none !important; }
}

/* ── «Почему Арбуз» ─────────────────────────────────────────────────────── */
html.dv3 .v3m-about{ background:var(--bg); min-height:100vh; }
html.dv3 .v3m-body{ padding:0 16px 120px; display:flex; flex-direction:column; gap:10px; }
html.dv3 .v3m-h{ margin:14px 0 0; font-size:17px; font-weight:700; }
html.dv3 .v3m-hero{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--dl-pink) 12%, var(--paper)) 0%, var(--paper) 60%); }
html.dv3 .v3m-hero p{ margin:0; font-size:15px; line-height:1.5; color:var(--ink); }
html.dv3 .v3m-hero .v3m-lead{ font-size:20px; font-weight:700; line-height:1.25; padding-right:56px; }
html.dv3 .v3m-hero-slice{ position:absolute; right:12px; top:10px; width:52px; height:52px; transform:rotate(-14deg); }

html.dv3 .v3m-steps{ list-style:none; margin:0; display:flex; flex-direction:column; gap:14px; }
html.dv3 .v3m-step{ position:relative; display:flex; align-items:center; gap:12px; }
html.dv3 .v3m-step b{ display:block; font-size:15px; font-weight:600; }
html.dv3 .v3m-step-ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none;
  background:var(--green-soft); color:var(--green); }
html.dv3 .v3m-step-line{ position:absolute; left:19px; top:42px; width:2px; height:12px; border-radius:2px; background:var(--green-soft); }

html.dv3 .v3m-shops{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
html.dv3 .v3m-shop{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 12px; border-radius:var(--v3-r-card);
  background:var(--paper); color:var(--ink); text-decoration:none; text-align:center; }
html.dv3 .v3m-shop .v3m-badge{ width:56px; height:56px; box-shadow:none; background:var(--bg); }
html.dv3 .v3m-shop-n{ font-size:13px; font-weight:600; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.dv3 .v3m-shop:focus-visible, html.dv3 .v3m-join .v3-btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

html.dv3 .v3m-join{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
html.dv3 .v3m-join b{ font-size:17px; font-weight:700; }
html.dv3 .v3m-join .v3-btn{ margin-top:8px; text-decoration:none; }

/* ── Карточка магазина: «покупаете напрямую» ────────────────────────────── */
html.dv3 .v3-shc-direct{ display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--dl-pink) 10%, var(--bg)); font-size:13px; line-height:1.4; color:var(--ink); }
html.dv3 .v3-shc-direct .v3-i{ color:var(--dl-pink); margin-top:1px; }

/* 03.10 · Страница магазина-базы: почему везём дольше */
html.dv3 .v3-shc-note{ display:flex; align-items:flex-start; gap:8px; margin:0 0 8px; padding:10px 12px; border-radius:12px; background:#fff1c9; color:#5c3f00; font-size:13px; line-height:1.35; }
html.dv3 .v3-shc-note .v3-i{ flex:none; width:16px; height:16px; margin-top:1px; }