/* ==========================================================================
   Витрина красивых адресов (vanityshop/index.php, cart.php)

   Эталон — главная (home-v2.css): те же токены --hv2-*, кнопки hv2-btn, секции
   hv2-section. Карточки адресов повторяют блок Products главной (.hv2-dir): серый
   фон, верхняя кромка 3px фирменного синего, без теней. Здесь только своё.
   ========================================================================== */
.vs-page{
  --hv2-ink:#0b1020; --hv2-text:#3a4366; --hv2-muted:#5c6690; --hv2-line:#e2e6f2;
  --hv2-soft:#f6f8fc; --hv2-accent:#2d4bdb; --hv2-accent-hover:#2440c4; --hv2-accent-soft:#eef1ff;
  --hv2-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --vs-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fff; overflow-x:clip;
}
.vs-page main{ font-family:var(--hv2-font); color:var(--hv2-text); }

/* ---------- Каталог: строка заголовка, фильтры слева, адреса справа ---------- */
.vs-h1{
  margin:0; font-family:var(--hv2-font); font-size:clamp(24px,2.4vw,30px); line-height:1.2;
  font-weight:700; letter-spacing:-.015em; color:var(--hv2-ink);
  background:none; -webkit-text-fill-color:currentColor;
}
.vs-page .vs-shop{ padding:28px 0 72px; }
.vs-shop-head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 24px;
  padding-bottom:16px; margin-bottom:24px; border-bottom:1px solid var(--hv2-line);
}
.vs-shop-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; }
.vs-stat{ margin:0; font-size:15px; color:var(--hv2-muted); }
.vs-stat strong{ color:var(--hv2-ink); font-variant-numeric:tabular-nums; }
.vs-help-btn{ color:var(--hv2-accent) !important; font-weight:600; }
.vs-help-btn:hover{ text-decoration:underline; }

.vs-shop-grid{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:32px; align-items:start; }
.vs-side{
  position:sticky; top:88px; max-height:calc(100vh - 104px); overflow-y:auto;
  padding:20px; background:var(--hv2-soft); border-top:3px solid var(--hv2-accent); border-radius:0 0 12px 12px;
}
.vs-fs{ margin:0 0 22px; padding:0; border:0; min-width:0; }
.vs-fs:last-child{ margin-bottom:0; }
.vs-fs legend{
  float:none; width:auto; margin:0 0 10px; padding:0;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--hv2-muted);
}
.vs-tabs{ display:flex; gap:4px; padding:4px; margin-bottom:10px; background:#e9edf6; border-radius:10px; }
.vs-tab{ position:relative; flex:1; margin:0; cursor:pointer; }
.vs-tab input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.vs-tab span{ display:flex; align-items:center; justify-content:center; min-height:36px; padding:6px 4px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--hv2-text); text-align:center; }
.vs-tab input:checked + span{ background:#fff; color:var(--hv2-accent); box-shadow:0 1px 2px rgba(11,16,32,.08); }
.vs-tab input:focus-visible + span{ outline:3px solid var(--hv2-accent-soft); outline-offset:2px; }

.vs-input{ display:flex; align-items:stretch; border:1px solid #cfd6e8; border-radius:10px; overflow:hidden; background:#fff; }
.vs-input:focus-within{ border-color:var(--hv2-accent); box-shadow:0 0 0 3px var(--hv2-accent-soft); }
.vs-input-t{ display:flex; align-items:center; padding:0 2px 0 12px; font:700 16px/1 var(--vs-mono); color:var(--hv2-muted); }
.vs-input input{ flex:1; min-width:0; border:0; outline:0; padding:10px 6px; font:500 16px/1.3 var(--vs-mono); color:var(--hv2-ink); background:transparent; }
.vs-search-btn{ display:flex; align-items:center; justify-content:center; width:48px; min-height:44px; border:0; background:var(--hv2-accent); color:#fff; font-size:17px; }
.vs-search-btn:hover{ background:var(--hv2-accent-hover); }
.vs-search-btn:focus-visible{ outline:3px solid var(--hv2-accent-soft); outline-offset:-3px; }
.vs-hint{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--hv2-muted); }

.vs-presets{ display:flex; flex-wrap:wrap; gap:6px; }
.vs-chip{
  min-height:34px; padding:6px 12px; border:1px solid var(--hv2-line); border-radius:999px;
  background:#fff; color:var(--hv2-ink); font:600 13px/1 var(--vs-mono);
}
.vs-chip:hover{ border-color:#c9d2ff; color:var(--hv2-accent); }
.vs-chip:focus-visible{ outline:3px solid var(--hv2-accent-soft); outline-offset:2px; }

.vs-radios{ display:flex; flex-direction:column; }
.vs-radios label{ display:flex; align-items:center; gap:10px; min-height:36px; margin:0; font-size:14.5px; color:var(--hv2-ink); cursor:pointer; }
.vs-radios input{ width:18px; height:18px; margin:0; accent-color:var(--hv2-accent); }

.vs-toolbar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 16px; margin-bottom:16px; }
.vs-toolbar .vs-status{ margin:0; min-height:0; }
.vs-sort{ display:flex; align-items:center; gap:10px; margin:0 0 0 auto; font-size:14px; color:var(--hv2-muted); }
.vs-sort select{
  min-height:40px; padding:6px 32px 6px 12px; border:1px solid #cfd6e8; border-radius:10px;
  background:#fff; color:var(--hv2-ink); font-size:14.5px;
}
.vs-sort select:focus-visible{ outline:3px solid var(--hv2-accent-soft); outline-offset:1px; border-color:var(--hv2-accent); }

/* корзина: короткая шапка страницы */
.vs-hero{ padding:28px 0 20px; background:linear-gradient(180deg,#fff 0%,var(--hv2-soft) 100%); }

/* ---------- Результаты ---------- */
.vs-results{ padding:32px 0 72px; }
.vs-status{ min-height:24px; margin:0 0 16px; font-size:15px; color:var(--hv2-muted); }
.vs-status.vs-empty{ font-size:16px; color:var(--hv2-text); }
.vs-error{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:20px; padding:16px 20px; border:1px solid #f1d29a; border-radius:12px; background:#fff8ea; }
.vs-error[hidden]{ display:none; }
.vs-error p{ margin:0; color:#5c3d00; font-size:15px; }

.vs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; }
.vs-card{
  display:flex; flex-direction:column; min-width:0; padding:20px;
  background:var(--hv2-soft); border-top:3px solid var(--hv2-accent); border-radius:0 0 12px 12px;
}
.vs-addr{ margin:0 0 12px; font:500 14.5px/1.5 var(--vs-mono); color:var(--hv2-ink); overflow-wrap:anywhere; }
.vs-addr mark{ padding:0 1px; background:var(--hv2-accent-soft); color:var(--hv2-accent); font-weight:700; border-radius:3px; }
.vs-meta{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:14px; padding-top:12px; border-top:1px solid var(--hv2-line); }
.vs-match{ margin:0; font-size:13px; color:var(--hv2-muted); }
.vs-match strong{ display:block; margin-top:2px; font:600 14px/1.3 var(--vs-mono); color:var(--hv2-ink); }
.vs-price{ margin:0; text-align:end; }
.vs-price strong{ display:block; font-size:20px; font-weight:700; color:var(--hv2-ink); white-space:nowrap; }
.vs-price span{ font-size:13px; color:var(--hv2-muted); }
.vs-actions{ display:flex; gap:8px; margin-top:auto; }
.vs-add{ flex:1; gap:6px; }
.vs-add.in-cart{ background:#fff; color:var(--hv2-accent) !important; border-color:#c9d2ff; }
.vs-copy{
  display:inline-flex; align-items:center; justify-content:center; width:44px; min-height:40px;
  border:1px solid var(--hv2-line); border-radius:var(--hv2-radius,10px); background:#fff; color:var(--hv2-text);
}
.vs-copy:hover{ color:var(--hv2-accent); border-color:#c9d2ff; }
.vs-copy:focus-visible, .vs-add:focus-visible{ outline:3px solid var(--hv2-accent-soft); outline-offset:2px; }
.vs-more{ text-align:center; margin-top:28px; }
.vs-note{ margin:16px 0 0; font-size:13.5px; color:var(--hv2-muted); text-align:center; }
.vs-note[hidden]{ display:none; }

/* ---------- Корзина (кнопка) и уведомление ---------- */
.vs-cart-fab{
  position:fixed; inset-inline-end:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:1040;
  display:none; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:var(--hv2-accent); color:#fff; font-size:22px; text-decoration:none; box-shadow:0 8px 24px rgba(45,75,219,.3);
}
.vs-cart-fab.has-items{ display:flex; }
.vs-cart-fab:hover{ background:var(--hv2-accent-hover); color:#fff; }
.vs-cart-badge{ position:absolute; top:-2px; inset-inline-end:-2px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#0b1020; color:#fff; font:700 12px/22px var(--hv2-font); text-align:center; }
.vs-toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:1060; transform:translate(-50%,16px);
  max-width:calc(100vw - 32px); padding:12px 18px; border-radius:10px; background:#0b1020; color:#fff;
  font:500 14px/1.4 var(--hv2-font); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.vs-toast.show{ opacity:1; transform:translate(-50%,0); }
.vs-toast.error{ background:#8a1c1c; }

/* ---------- Диалог «Как купить» ---------- */
.vs-modal{ position:fixed; inset:0; z-index:1070; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(11,16,32,.55); }
.vs-modal[hidden]{ display:none; }
.vs-modal-box{ display:flex; flex-direction:column; width:min(760px,100%); max-height:calc(100vh - 32px); background:#fff; border-radius:14px; font-family:var(--hv2-font); color:var(--hv2-text); }
.vs-modal-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--hv2-line); }
.vs-modal-head h2{ margin:0; font-size:20px; font-weight:700; color:var(--hv2-ink); background:none; -webkit-text-fill-color:currentColor; }
.vs-modal-close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:10px; background:var(--hv2-soft); color:var(--hv2-ink); }
.vs-modal-close:focus-visible{ outline:3px solid var(--hv2-accent-soft); }
.vs-modal-body{ padding:8px 24px 24px; overflow-y:auto; }
.vs-step{ padding:16px 0; border-bottom:1px solid var(--hv2-line); font-size:15px; line-height:1.6; }
.vs-step:last-child{ border-bottom:0; }
.vs-step h3{ display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:16px; font-weight:700; color:var(--hv2-ink); background:none; -webkit-text-fill-color:currentColor; }
.vs-step h4{ margin:12px 0 4px; font-size:15px; font-weight:600; color:var(--hv2-ink); background:none; -webkit-text-fill-color:currentColor; }
.vs-step p{ margin:0 0 8px; }
.vs-step ul{ margin:0; padding-inline-start:20px; }
.vs-step a{ color:var(--hv2-accent); font-weight:600; }
.vs-step-n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--hv2-accent-soft); color:var(--hv2-accent); font-size:14px; }
.vs-step-warn{ margin:8px 0; padding:16px; border:1px solid #f1d29a; border-radius:12px; background:#fff8ea; }
.vs-code{ display:inline-block; padding:6px 10px; border-radius:6px; background:var(--hv2-soft); font:500 13px/1.4 var(--vs-mono); color:var(--hv2-ink); }

/* ---------- Планшет и телефон ---------- */
@media (max-width:991.98px){
  .vs-shop-grid{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .vs-side{ position:static; max-height:none; }
  .vs-radios{ flex-direction:row; flex-wrap:wrap; gap:0 16px; }
}
@media (max-width:575.98px){
  .vs-shop{ padding-top:20px; }
  .vs-side{ padding:16px; }
  .vs-grid{ grid-template-columns:minmax(0,1fr); }
  .vs-addr{ font-size:13.5px; }
  .vs-sort{ margin:0; width:100%; }
  .vs-sort select{ flex:1; }
  .vs-cart-fab{ inset-inline-end:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion:reduce){ .vs-toast{ transition:none; } }

/* ---------- Корзина ---------- */
.vs-cart-hero{ padding:36px 0 28px; }
.vs-back{ display:inline-flex; align-items:center; gap:6px; min-height:40px; margin-bottom:8px; font-size:15px; font-weight:600; color:var(--hv2-accent); text-decoration:none; }
.vs-back:hover{ text-decoration:underline; }
.vs-notices:empty{ display:none; }
.vs-notices{ margin-bottom:20px; }
.vs-notice{ margin:0 0 8px; padding:12px 16px; border-radius:10px; font-size:14.5px; overflow-wrap:anywhere; }
.vs-notice-warn{ background:#fff8ea; border:1px solid #f1d29a; color:#5c3d00; }
.vs-notice-info{ background:var(--hv2-accent-soft); border:1px solid #c9d2ff; color:var(--hv2-ink); }
.vs-cart-empty{ padding:48px 0; text-align:center; }
.vs-cart-empty[hidden], .vs-cart-layout[hidden]{ display:none; }
.vs-cart-empty i{ font-size:40px; color:var(--hv2-muted); }
.vs-cart-empty h2{ margin:12px 0 8px; font-size:24px; color:var(--hv2-ink); background:none; -webkit-text-fill-color:currentColor; }
.vs-cart-empty p{ margin:0 0 20px; }
.vs-cart-layout{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:32px; align-items:start; }
.vs-cart-list{ list-style:none; margin:0 0 12px; padding:0; }
.vs-cart-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto 44px; gap:16px; align-items:center;
  padding:16px 20px; margin-bottom:12px; background:var(--hv2-soft); border-top:3px solid var(--hv2-accent); border-radius:0 0 12px 12px;
}
.vs-cart-row .vs-addr{ margin:0 0 4px; }
.vs-cart-row .vs-match strong{ display:inline; }
.vs-link-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; color:var(--hv2-muted); font-size:14.5px; }
.vs-link-btn:hover{ color:#8a1c1c; }
.vs-summary{ padding:24px; background:#fff; border:1px solid var(--hv2-line); border-radius:14px; position:sticky; top:96px; }
.vs-summary h2{ margin:0 0 12px; font-size:18px; font-weight:700; color:var(--hv2-ink); background:none; -webkit-text-fill-color:currentColor; }
.vs-summary dl{ margin:0; }
.vs-summary dl > div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--hv2-line); font-size:15px; }
.vs-summary dt{ font-weight:400; color:var(--hv2-text); }
.vs-summary dd{ margin:0; font-weight:600; color:var(--hv2-ink); }
.vs-summary-total{ display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 16px; font-size:15px; }
.vs-summary-total strong{ font-size:24px; color:var(--hv2-ink); }
.vs-summary-note{ margin:0 0 12px; font-size:14px; line-height:1.55; }
.vs-checkout{ width:100%; }
.vs-checkout.disabled{ opacity:.5; pointer-events:none; }
.vs-summary-pay{ margin:12px 0 0; font-size:13.5px; color:var(--hv2-muted); text-align:center; }
.vs-summary-warn{ margin-top:16px; padding:14px 16px; border-radius:10px; background:#fff8ea; border:1px solid #f1d29a; font-size:14px; line-height:1.5; color:#5c3d00; }
.vs-summary-warn p{ margin:4px 0 0; }
.vs-info{ padding:56px 0; }
.vs-info-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.vs-info-card{ padding:24px; background:#fff; border:1px solid var(--hv2-line); border-top:3px solid var(--hv2-accent); border-radius:0 0 12px 12px; }
.vs-info-card i{ font-size:22px; color:var(--hv2-accent); }
.vs-info-card h3{ margin:10px 0 6px; font-size:17px; font-weight:700; color:var(--hv2-ink); background:none; -webkit-text-fill-color:currentColor; }
.vs-info-card p{ margin:0; font-size:14.5px; line-height:1.55; }
@media (max-width:991.98px){
  .vs-cart-layout{ grid-template-columns:minmax(0,1fr); }
  .vs-summary{ position:static; }
  .vs-info-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:575.98px){
  .vs-cart-row{ grid-template-columns:minmax(0,1fr) 44px; padding:14px 16px; }
  .vs-cart-row .vs-price{ grid-column:1; grid-row:2; text-align:start; }
  .vs-cart-row .vs-copy{ grid-column:2; grid-row:1 / span 2; align-self:start; }
}

/* Плотная карточка каталога: адрес строкой, под ним в одну строку шаблон, цена и действия */
.vs-card{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:16px 18px; }
.vs-card .vs-addr{ flex:1 0 100%; margin:0; padding-bottom:10px; border-bottom:1px solid var(--hv2-line); }
.vs-card .vs-meta{ flex:1 1 auto; align-items:center; margin:0; padding:0; border:0; }
.vs-card .vs-price strong{ font-size:18px; }
.vs-card .vs-actions{ flex:0 0 auto; margin:0; }
.vs-card .vs-add{ flex:none; min-height:40px; padding:6px 14px; }
@media (max-width:420px){
  .vs-card .vs-actions{ flex:1 0 100%; }
  .vs-card .vs-add{ flex:1; }
}

/* сортировка — в строке заголовка (рядом с «Как купить»), чтобы поиск слева и первые
   карточки справа начинались на одной линии; строка статуса не занимает места, пока пуста */
.vs-shop-meta .vs-sort{ margin:0; }
.vs-main > .vs-status:empty{ display:none; }
.vs-main > .vs-status{ margin:0 0 16px; }
@media (max-width:575.98px){ .vs-shop-meta{ width:100%; } .vs-shop-meta .vs-sort{ width:100%; } }
/* цены в фильтре — в две колонки, без длинного столбца вниз */
.vs-radios{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
@media (max-width:991.98px){ .vs-radios{ grid-template-columns:repeat(4,minmax(0,max-content)); gap:0 20px; } }
@media (max-width:420px){ .vs-radios{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 8px; } }

/* ==========================================================================
   Тёмная тема (08.10.2026, решение владельца: дизайн не меняется, только тема). Светлая не затронута — правила ниже
   только для [data-theme="dark"]; цвета — общие токены --site-* (css/site-tokens.css), предупреждения — как в
   css/site-theme.css (.hv2-warn).
   ========================================================================== */
:root[data-theme="dark"] .vs-page{
  --hv2-ink:var(--site-ink); --hv2-text:var(--site-text); --hv2-muted:var(--site-muted); --hv2-line:var(--site-line);
  --hv2-soft:var(--site-bg-soft); --hv2-accent:var(--site-accent); --hv2-accent-hover:var(--site-accent-hover);
  --hv2-accent-soft:var(--site-accent-soft);
  background:var(--site-bg);
}
:root[data-theme="dark"] .vs-page .vs-tabs{ background:var(--site-line-soft); }
:root[data-theme="dark"] .vs-page .vs-tab input:checked + span{ background:var(--site-surface); color:var(--site-link); box-shadow:none; }
:root[data-theme="dark"] .vs-page .vs-input,
:root[data-theme="dark"] .vs-page .vs-sort select{ background:var(--site-surface); border-color:var(--site-line-strong); color:var(--site-ink); }
:root[data-theme="dark"] .vs-page .vs-chip,
:root[data-theme="dark"] .vs-page .vs-copy,
:root[data-theme="dark"] .vs-page .vs-add.in-cart{ background:var(--site-surface); }
:root[data-theme="dark"] .vs-page .vs-chip:hover,
:root[data-theme="dark"] .vs-page .vs-copy:hover,
:root[data-theme="dark"] .vs-page .vs-add.in-cart,
:root[data-theme="dark"] .vs-page .vs-notice-info{ border-color:var(--site-line-strong); }
:root[data-theme="dark"] .vs-page .vs-chip:hover,
:root[data-theme="dark"] .vs-page .vs-copy:hover,
:root[data-theme="dark"] .vs-page .vs-add.in-cart,
:root[data-theme="dark"] .vs-page .vs-help-btn,
:root[data-theme="dark"] .vs-page .vs-back,
:root[data-theme="dark"] .vs-page .vs-step a,
:root[data-theme="dark"] .vs-page .vs-info-card i,
:root[data-theme="dark"] .vs-page .vs-addr mark,
:root[data-theme="dark"] .vs-page .vs-step-n{ color:var(--site-link) !important; }
:root[data-theme="dark"] .vs-page .vs-hero{ background:linear-gradient(180deg,var(--site-bg) 0%,var(--site-bg-soft) 100%); }
:root[data-theme="dark"] .vs-page .vs-error,
:root[data-theme="dark"] .vs-page .vs-step-warn,
:root[data-theme="dark"] .vs-page .vs-notice-warn,
:root[data-theme="dark"] .vs-page .vs-summary-warn{ background:#3a2c0b; border-color:#6b5320; color:#ffd58a; }
:root[data-theme="dark"] .vs-page .vs-error p{ color:#ffd58a; }
:root[data-theme="dark"] .vs-page .vs-modal-box,
:root[data-theme="dark"] .vs-page .vs-summary,
:root[data-theme="dark"] .vs-page .vs-info-card{ background:var(--site-surface); }
:root[data-theme="dark"] .vs-page .vs-modal{ background:rgba(0,0,0,.65); }
:root[data-theme="dark"] .vs-page .vs-toast{ background:var(--site-surface); color:var(--site-ink); border:1px solid var(--site-line-strong); }
:root[data-theme="dark"] .vs-page .vs-toast.error{ background:#3a1518; color:#ffc9c9; border-color:#6b2a2e; }
:root[data-theme="dark"] .vs-page .vs-cart-badge{ background:var(--site-ink); color:var(--site-bg); }
:root[data-theme="dark"] .vs-page .vs-link-btn:hover{ color:var(--site-danger); }
/* кнопка поиска — фирменный синий, как кнопки «В корзину» (в секциях главной --hv2-accent в тёмной теме = светлый
   цвет ссылок: он остаётся у кромок карточек, как на главной, но белая иконка на нём не читается) */
:root[data-theme="dark"] .vs-page .vs-search-btn{ background:var(--site-accent); }
:root[data-theme="dark"] .vs-page .vs-search-btn:hover{ background:var(--site-accent-hover); }