/* ============================================================================
   v3 · КАТАЛОГ (Figma 22:2) и КАТАЛОГ В РЕЖИМЕ МАГАЗИНА (Figma 9:2).
   Разметка — views/catalog.js под isV3(): корень [data-view="catalog"].v3-cat,
   магазин — ещё .v3-shop (и прежний .is-shop). Хуки v2 (.search, .chips, .js-grid) те же.
   ========================================================================== */

html.dv3 [data-view="catalog"].v3-cat{ background:var(--paper); min-height:100vh; }

/* ── Тёмная шапка вкладки: «Каталог» + «Из N магазинов рядом» + поле поиска ── */
html.dv3 .head.v3-thead{ padding:16px 0 16px; padding-top:calc(16px + env(safe-area-inset-top, 0px)); }
html.dv3 .v3-thead-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; min-height:40px; }
html.dv3 .v3-thead-row h1{ margin:0; font-size:24px; font-weight:700; color:var(--on-head); }
html.dv3 .v3-near-pill{
  display:inline-flex; align-items:center; gap:2px; flex:none; max-width:60%;
  padding:6px 10px; border-radius:14px; background:rgba(255,255,255,.1);
  color:var(--on-head); font-size:12px; font-weight:500; text-decoration:none; white-space:nowrap;
}
html.dv3 .v3-near-pill[hidden]{ display:none; }
html.dv3 .v3-near-pill .v3-i{ width:12px; height:12px; }
html.dv3 .head.v3-thead .search{
  margin:12px 16px 0; padding:0 12px; min-height:44px; gap:10px;
  background:var(--paper); border:0; border-radius:var(--v3-r-ctl);
}
html.dv3 .head.v3-thead .search svg{ width:20px; height:20px; color:var(--v3-sub); }
html.dv3 .head.v3-thead .search input{ color:var(--ink); font-size:15px; min-height:44px; }
html.dv3 .head.v3-thead .search input::placeholder{ color:var(--v3-sub); }
html.dv3 .head.v3-thead .search .clr{ width:28px; height:28px; background:var(--bg); color:var(--muted); }
html.dv3 .head.v3-thead .search .clr.hide{ display:none; }
html.dv3 .head.v3-thead .search .clr svg{ width:14px; height:14px; color:inherit; }

/* ── Чипы-фильтры ── */
html.dv3 .v3-cat .chips.v3-chips{ margin:0; padding:14px 16px 4px; gap:8px; }
html.dv3 .v3-cat .chips.v3-chips .v3-chip{ border-radius:18px; font-size:13px; font-weight:500; padding:8px 12px; }
html.dv3 .v3-cat .chips.v3-chips .v3-chip .v3-i{ width:15px; height:15px; }
html.dv3 .v3-cat .chips.v3-chips .v3-chip.active,
html.dv3 .v3-cat .chips.v3-chips .v3-chip.is-on{ background:var(--head); color:var(--on-head); border-color:var(--head); }
/* «Все» выбран = мы на входе с плитками: чип не нужен */
html.dv3 .v3-cat .chips.v3-chips:not(.subchips) .chip[data-cat="all"].active{ display:none; }
html.dv3 .v3-cat .chips.subchips[hidden]{ display:none; }
html.dv3 .v3-cat .chips.subchips{ padding-top:8px; }
/* Лента кружков магазинов и строка «Рядом» в v3 живут иначе: вход в магазин — вкладка
   «Магазины» и пилюля в шапке, «Только рядом» — чип. */
html.dv3 .v3-cat .js-shopstrip,
html.dv3 .v3-cat .js-nearbar{ display:none !important; }

/* ── Плитки рубрик: 2 широкие, дальше по 3 (сетка на 6 долей) ── */
html.dv3 .js-v3tiles[hidden]{ display:none; }
html.dv3 .v3-tiles{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; padding:12px 16px 0; }
html.dv3 .v3-tile{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:stretch;
  min-height:144px; padding:12px 12px 0; border:0; border-radius:var(--v3-r-card);
  /* Белая: фото товаров на белом фоне, а mix-blend-mode в iOS WebView (с filter) не
     срабатывает — на сером оставались белые прямоугольники (01.10.2026). */
  background:#fff; color:#070d09; text-align:left; font:inherit; cursor:pointer;
  /* На белой странице (светлая тема) плитку очерчивают рамка и мягкая тень. */
  box-shadow:0 0 0 1px rgba(0,20,10,.08), 0 2px 8px rgba(0,20,10,.06);
  grid-column:span 2; -webkit-tap-highlight-color:transparent;
}
html.dv3 .v3-tile.is-w{ grid-column:span 3; min-height:164px; }
html.dv3 .v3-tile.is-f{ grid-column:span 6; min-height:112px; padding-bottom:12px; padding-right:45%; }
html.dv3 .v3-tile:active{ opacity:.8; }
html.dv3 .v3-tile:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
html.dv3 .v3-tile-t{ position:relative; z-index:1; font-size:14px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
html.dv3 .v3-tile.is-w .v3-tile-t{ font-size:15px; }
html.dv3 .v3-tile-s{ position:relative; z-index:1; margin-top:3px; font-size:11px; line-height:1.3; color:var(--muted); white-space:nowrap; }
/* Фото занимает ТОЛЬКО место под подписью (flex:1): у двухстрочных рубрик оно само
   становится ниже и никогда не заходит под текст. Правый нижний угол — «в край», с
   лёгким срезом краем плитки, как у Самоката/Лавки. */
html.dv3 .v3-tile-ph{ position:relative; flex:1 1 auto; min-height:52px; margin:6px -12px 0 0; }
html.dv3 .v3-tile.is-f .v3-tile-ph{ position:absolute; top:0; right:0; bottom:0; width:45%; margin:0; }
html.dv3 .v3-tile-ph img{
  position:absolute; right:8px; bottom:8px; width:auto; height:calc(100% - 8px); max-width:80%; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px; mix-blend-mode:normal;
  /* почти-белый фон снимков (#eee…#f5f5f5) дотягиваем до белого — multiply растворяет его в плитке */

}
html.dv3 .v3-tile.is-w .v3-tile-ph img{ width:78%; }

/* ── Подборки ── */
html.dv3 .v3-sech{ margin:0; padding:24px 16px 10px; font-size:17px; font-weight:700; color:var(--ink); }
html.dv3 .v3-colls{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:0 16px; }
html.dv3 .v3-colls::-webkit-scrollbar{ display:none; }
html.dv3 .v3-coll{
  flex:0 0 150px; height:84px; display:flex; align-items:flex-end; padding:14px;
  border:0; border-radius:var(--v3-r-card); font:inherit; font-size:14px; font-weight:600; line-height:1.25;
  color:#fff; text-align:left; cursor:pointer;
}
html.dv3 .v3-coll.is-dark{ background:var(--head); color:var(--on-head); }
html.dv3.dk .v3-coll.is-dark{ box-shadow:inset 0 0 0 1px var(--line); }
html.dv3 .v3-coll.is-green{ background:var(--green); }
html.dv3 .v3-coll:active{ opacity:.85; }

/* ── Лента товаров ── */
html.dv3 [data-view="catalog"].v3-cat .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 10px; padding:10px 16px 96px; }
html.dv3 .v3-banddiv{ grid-column:1 / -1; display:flex; align-items:center; gap:6px; margin:4px 0 0; font-size:13px; font-weight:600; }
html.dv3 .v3-banddiv.is-near{ color:var(--green); }
html.dv3 .v3-banddiv.is-far{ color:var(--terra); }
html.dv3 .v3-banddiv i{ flex:1; height:1px; background:var(--line); }
html.dv3 .v3-addr-hint{
  grid-column:1 / -1; display:flex; align-items:center; gap:10px; width:100%; min-height:44px;
  padding:10px 14px; border:0; border-radius:var(--v3-r-ctl); background:var(--green-soft); color:var(--green);
  font:inherit; font-size:13px; font-weight:600; text-align:left; cursor:pointer;
}
html.dv3 .v3-cat .empty .em{ font-size:0; color:var(--v3-sub); }
html.dv3 .v3-cat .empty .em .v3-i{ width:44px; height:44px; stroke-width:1.6; }
html.dv3 .v3-cat .promo-head h1{ font-size:24px; font-weight:700; line-height:1.15; }

/* ============================ МАГАЗИН (9:2) ============================ */
html.dv3 .head.v3-shead{ padding:12px 0 0; padding-top:calc(12px + env(safe-area-inset-top, 0px)); }
html.dv3 .v3-shead-row{ display:flex; align-items:center; gap:10px; padding:0 16px; }
html.dv3 .v3-ib{
  flex:none; display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:0; border-radius:var(--v3-r-ctl); background:rgba(255,255,255,.1); color:var(--on-head); cursor:pointer;
}
html.dv3 .v3-ib .v3-i{ width:20px; height:20px; }
html.dv3 .v3-ib:focus-visible{ outline:2px solid var(--on-head); outline-offset:2px; }
html.dv3 .head.v3-shead .search{
  flex:1; min-width:0; margin:0; padding:0 12px; min-height:40px; gap:8px;
  background:rgba(255,255,255,.1); border:0; border-radius:var(--v3-r-ctl);
}
html.dv3 .head.v3-shead .search svg{ width:18px; height:18px; color:var(--on-head-2); }
html.dv3 .head.v3-shead .search input{ color:var(--on-head); font-size:15px; min-height:40px; }
html.dv3 .head.v3-shead .search input::placeholder{ color:var(--on-head-2); }
html.dv3 .head.v3-shead .search .clr{ width:26px; height:26px; background:rgba(255,255,255,.14); color:var(--on-head); }
html.dv3 .head.v3-shead .search .clr.hide{ display:none; }
html.dv3 .head.v3-shead .search .clr svg{ width:14px; height:14px; color:inherit; }

/* Карточка магазина — белый лист на тёмной плоскости шапки */
html.dv3 .v3-shop .js-shopcard{ background:var(--head); padding:16px 16px 20px; }
html.dv3 .v3-shc{ background:var(--paper); border-radius:var(--v3-r-card); padding:16px; display:flex; flex-direction:column; gap:12px; color:var(--ink); }
html.dv3 .v3-shc-top{ display:flex; align-items:center; gap:12px; }
html.dv3 .v3-shc-logo{ flex:none; width:56px; height:56px; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:var(--terra-soft); font-size:24px; }
html.dv3 .v3-shc-logo img{ width:100%; height:100%; object-fit:cover; display:block; }
html.dv3 .v3-shc-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
html.dv3 .v3-shc-t b{ font-size:20px; font-weight:700; line-height:1.2; }
html.dv3 .v3-shc-t span{ font-size:13px; color:var(--muted); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html.dv3 .v3-shc-pills{ display:flex; flex-wrap:wrap; gap:6px; }
html.dv3 .v3-shc-pills .v3-pill{ font-size:12px; padding:4px 8px; }
html.dv3 .v3-shc-pills .v3-pill .v3-i{ width:13px; height:13px; }
html.dv3 .v3-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
html.dv3 .v3-shc-plate{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--v3-r-ctl); background:var(--green-soft); color:var(--green); }
html.dv3 .v3-shc-plate > b{ font-size:20px; font-weight:700; white-space:nowrap; }
html.dv3 .v3-shc-plate span{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--muted); }
html.dv3 .v3-shc-plate strong{ font-size:14px; font-weight:600; color:var(--ink); }

/* Рельс рубрик 92 + товары строками */
/* Колонка рубрик — фоном самого тела (градиент), а рельс внутри неё липнет под шапкой
   магазина и прокручивается сам, если рубрик больше экрана. Раньше рельс тянулся на всю
   высоту ленты (min-height:100%) и потому не лип вовсе: уезжал вместе с товарами. */
html.dv3 .v3-shopbody{ --v3-rail-w:92px; --v3-shead-h:calc(52px + env(safe-area-inset-top, 0px));
  display:grid; grid-template-columns:var(--v3-rail-w) minmax(0, 1fr); min-height:60vh;
  background:linear-gradient(to right, var(--bg) var(--v3-rail-w), var(--paper) var(--v3-rail-w)); }
html.dv3 .v3-rail{
  position:sticky; top:var(--v3-shead-h); align-self:start; z-index:1;
  max-height:calc(100vh - var(--v3-shead-h) - 64px - env(safe-area-inset-bottom, 0px));
  max-height:calc(100dvh - var(--v3-shead-h) - 64px - env(safe-area-inset-bottom, 0px));
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; background:var(--bg); padding-bottom:12px;
}
html.dv3 .v3-rail::-webkit-scrollbar{ display:none; }
html.dv3 .v3-rail-i{
  position:relative; display:block; width:100%; min-height:46px; padding:12px 8px 12px 12px;
  border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:500;
  line-height:1.25; text-align:left; cursor:pointer; overflow-wrap:anywhere;
}
html.dv3 .v3-rail-i.is-on{ background:var(--paper); color:var(--ink); font-weight:600; }
html.dv3 .v3-rail-i.is-on::before{ content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--green); }
html.dv3 .v3-rail-i.is-promo.is-on::before{ background:var(--red); }
html.dv3 .v3-rail-i:focus-visible{ outline:2px solid var(--green); outline-offset:-2px; }
html.dv3 .v3-shopmain{ min-width:0; }
html.dv3 .v3-railh{ margin:0; padding:16px 12px 4px; font-size:17px; font-weight:700; color:var(--ink); }
html.dv3 .v3-railp{ margin:0; padding:0 12px 4px; font-size:12px; line-height:1.35; color:var(--v3-sub); }
html.dv3 .v3-railp[hidden]{ display:none; }

/* Товары магазина — та же сетка 2×N и та же карточка, что в категории (21-card.css).
   Мобильный (< 1024): колонка рубрик → липкая лента чипов над сеткой. */
html.dv3 [data-view="catalog"].v3-shop .grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 10px; padding:10px 16px 96px; }
@media (max-width:1023px){
  html.dv3 .v3-shopbody{ display:block; background:var(--paper); }
  html.dv3 .v3-rail{
    display:flex; gap:8px; max-height:none; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    padding:10px 16px; background:var(--paper); box-shadow:0 1px 0 var(--line);
  }
  html.dv3 .v3-rail-i{
    flex:none; width:auto; min-height:36px; padding:8px 14px; border-radius:18px; white-space:nowrap; overflow-wrap:normal;
    background:var(--bg); color:var(--ink); font-size:13px; font-weight:500;
  }
  html.dv3 .v3-rail-i::after{ content:''; position:absolute; inset:-4px -2px; }   /* зона 44 */
  html.dv3 .v3-rail-i.is-on{ background:var(--head); color:var(--on-head); font-weight:600; }
  html.dv3 .v3-rail-i.is-on::before{ display:none; }
  html.dv3 .v3-rail-i.is-promo{ color:var(--red); }
  html.dv3 .v3-rail-i.is-promo.is-on{ background:var(--red); color:#fff; }
  html.dv3 .v3-railh{ padding:16px 16px 4px; }
  html.dv3 .v3-railp{ padding:0 16px 4px; }
}

/* Узкие телефоны (320): рельс уже, цена не упирается в степпер */
@media (max-width:359px){
  html.dv3 .v3-tile{ min-height:112px; }
  html.dv3 .v3-tile-t{ font-size:13px; }
}

/* Десктоп: desktop.css раскладывает каталог сеткой 1fr + 280px — новые блоки v3 ставим
   в колонку товаров, чипы остаются боковым столбцом рубрик, как было. */
@media (min-width:1024px){
  html.dv3 [data-view="catalog"].v3-cat > .js-v3tiles,
  html.dv3 [data-view="catalog"].v3-cat > .v3-shopbody{ grid-column:1 / 2; }
  html.dv3 [data-view="catalog"].v3-cat > .chips.v3-chips{ overflow:visible; }
  html.dv3 .v3-tiles{ grid-template-columns:repeat(6, minmax(0, 1fr)); padding:0; }
  html.dv3 .v3-sech, html.dv3 .v3-colls{ padding-left:0; padding-right:0; }
  html.dv3 [data-view="catalog"].v3-cat .grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); padding:0 0 40px; }
  html.dv3 .v3-shop .js-shopcard{ background:transparent; padding:0; }
  html.dv3 .v3-rail{ top:88px; max-height:calc(100vh - 88px); }
  /* 90-desktop кладёт все плитки в одну долю: широкая «is-f» ведёт себя как обычная */
  html.dv3 .v3-tiles .v3-tile.is-f{ padding:12px 12px 0; }
  html.dv3 .v3-tiles .v3-tile .v3-tile-ph{ position:relative; width:auto; height:auto; margin:6px -12px 0 0; }
}

/* Магазин с одной рубрикой: без колонки рубрик, товары на всю ширину */
html.dv3 .v3-shopbody.is-norail .v3-rail{ display:none !important; }
html.dv3 .v3-shopbody.is-norail{ grid-template-columns:1fr !important; background:var(--paper); }
html.dv3 .v3-shopbody.is-norail .v3-shopmain{ grid-column:1 / -1; width:100%; }

/* Зона нажатия ≥ 40: чипы видимо 35–36 (макет), крестик поиска 26–28 — невидимое поле вокруг */
html.dv3 .v3-cat .chips.v3-chips .chip,
html.dv3 .v3-cat .chips.v3-chips .v3-chip{ position:relative; }
html.dv3 .v3-cat .chips.v3-chips .chip::after,
html.dv3 .v3-cat .chips.v3-chips .v3-chip::after{ content:''; position:absolute; inset:-4px -2px; }
html.dv3 .v3-cat .search .clr{ position:relative; flex:none; }
html.dv3 .v3-cat .search .clr::after{ content:''; position:absolute; inset:-8px; }

/* «Сообщить о появлении»: поле номера из design-system.css белое — в тёмной теме на токенах */
html.dv3 .v3-cat .wantNotify input[type=tel]{ background:var(--paper); color:var(--ink); border:1px solid var(--line); }
html.dv3 .v3-cat .wantNotify input[type=tel]::placeholder{ color:var(--v3-sub); }
/* Тёмная тема: выбранный чип цветом шапки (почти чёрный) терялся на тёмном фоне */
html.dv3.dk .v3-cat .chips.v3-chips .v3-chip.active,
html.dv3.dk .v3-cat .chips.v3-chips .v3-chip.is-on,
html.dv3.dk .v3-shops .v3-chip.is-on{ background:var(--green-soft); color:var(--green-deep); border-color:var(--green); }

/* ── 01.10 · Плитки рубрик: каждая — свой мягкий сочный цвет, товар-вырезка крупно в правом
   нижнем углу «за край»; без рамок и теней; нажатие — пружинка. ─────────────────────────── */
html.dv3 .v3-tile{ --t:#eef7e9; box-shadow:none; background:var(--t); color:#10190f;
  transition:transform .22s cubic-bezier(.3,1.7,.5,1); }
html.dv3 .v3-tile:nth-child(8n+1){ --t:#fff1c9; }
html.dv3 .v3-tile:nth-child(8n+2){ --t:#e0f0ff; }
html.dv3 .v3-tile:nth-child(8n+3){ --t:#ffe1e6; }
html.dv3 .v3-tile:nth-child(8n+4){ --t:#e4f5cf; }
html.dv3 .v3-tile:nth-child(8n+5){ --t:#f6e3fb; }
html.dv3 .v3-tile:nth-child(8n+6){ --t:#ffe8d6; }
html.dv3 .v3-tile:nth-child(8n+7){ --t:#dff3ea; }
html.dv3 .v3-tile:nth-child(8n+8){ --t:#ffeccc; }
html.dv3 .v3-tile .v3-tile-s{ color:rgba(16,25,15,.6); }
/* Тёмная: те же тона, но глубокие — плитки не слепят, текст светлый */
html.dv3.dk .v3-tile{ --t:#1f3326; color:#f1f5ef; }
html.dv3.dk .v3-tile:nth-child(8n+1){ --t:#3a3018; }
html.dv3.dk .v3-tile:nth-child(8n+2){ --t:#1b2a3a; }
html.dv3.dk .v3-tile:nth-child(8n+3){ --t:#3d1d25; }
html.dv3.dk .v3-tile:nth-child(8n+4){ --t:#26331a; }
html.dv3.dk .v3-tile:nth-child(8n+5){ --t:#33223a; }
html.dv3.dk .v3-tile:nth-child(8n+6){ --t:#3a2719; }
html.dv3.dk .v3-tile:nth-child(8n+7){ --t:#173328; }
html.dv3.dk .v3-tile:nth-child(8n+8){ --t:#3a2c17; }
html.dv3.dk .v3-tile .v3-tile-s{ color:rgba(241,245,239,.6); }
html.dv3 .v3-tile.sk{ --t:var(--v3-photo); }
html.dv3 .v3-tile:active{ opacity:1; transform:scale(.96); }
html.dv3 .v3-tile-ph img.is-cut{
  right:6px; bottom:8px; width:78%; height:calc(100% - 8px); max-width:none; aspect-ratio:auto;
  object-fit:contain; object-position:center; border-radius:0; filter:drop-shadow(0 4px 6px rgba(0,0,0,.14));
}
html.dv3 .v3-tile.is-w .v3-tile-ph img.is-cut{ width:66%; }
html.dv3 .v3-tile-ph img.is-sq{ border-radius:14px; }
@media (prefers-reduced-motion:reduce){ html.dv3 .v3-tile{ transition:none; } html.dv3 .v3-tile:active{ transform:none; opacity:.8; } }
html.dv3 :is(.chips, .v3-chips, .coll-row){ overflow-y:hidden; overscroll-behavior-x:contain; }