/* ============================================================================
   v3 · КАРТОЧКА ТОВАРА В СЕТКЕ (Figma 26:2, «12 Результаты · товары»).
   Разметка — components/product-card.js (ветка isV3, класс .v3-pcard).
   Фото — квадрат .v3-photo r16; −N% красным слева сверху; «+» — белый круг с тенью
   справа снизу на фото → зелёный степпер (− N +) там же. Ниже: цена 17/700 (красная при
   скидке) + старая зачёркнутая, название 13 в 2 строки, упаковка 12, «Магазин · ⚡ ~40 мин».
   ========================================================================== */

html.dv3 .card.v3-pcard{
  display:flex; flex-direction:column; position:relative; min-width:0;
  background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible;
  content-visibility:visible; contain-intrinsic-size:auto;
}
html.dv3 .card.v3-pcard:active{ transform:none; opacity:.8; }
html.dv3 .card.v3-pcard:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:var(--v3-r-photo); }

/* Фото */
html.dv3 .card.v3-pcard .img{
  position:relative; aspect-ratio:1/1; width:100%;
  background:var(--v3-photo); border-radius:var(--v3-r-photo); overflow:hidden;
  display:grid; place-items:center; font-size:56px; line-height:1;
}
html.dv3 .card.v3-pcard .img img{
  width:100%; height:100%; object-fit:cover; padding:0; box-sizing:border-box;
  transform:none; mix-blend-mode:multiply;
}
html.dv3.dk .card.v3-pcard .img img{ mix-blend-mode:normal; }

/* Бейджи на фото: −N% красный; словесные метки (новинка, хит) — тихо */
html.dv3 .card.v3-pcard .badge{
  position:absolute; top:8px; left:8px; z-index:1; margin:0;
  padding:3px 7px; border-radius:var(--v3-r-pill); box-shadow:none;
  font-size:12px; font-weight:700; line-height:1.3; letter-spacing:0; text-transform:none;
}
html.dv3 .card.v3-pcard .badge.v3-disc-b{ background:var(--red); color:#fff; }
html.dv3 .card.v3-pcard .badge.v3-tag-b{ background:var(--rare-soft); color:var(--rare); font-size:11px; font-weight:600; }

/* Избранного в макете нет — кнопка остаётся в разметке ради хуков, но скрыта */
html.dv3 .card.v3-pcard .fav{ display:none !important; }

/* «+» и степпер на фото */
html.dv3 .card.v3-pcard .buy{ position:absolute; right:8px; bottom:8px; z-index:2; }
html.dv3 .card.v3-pcard .add{
  position:static; display:grid; place-items:center;
  width:40px; height:40px; padding:0; border:0; border-radius:50%;
  background:var(--paper); color:var(--green); box-shadow:var(--v3-shadow-btn); cursor:pointer;
}
html.dv3 .card.v3-pcard .add svg{ width:20px; height:20px; color:var(--green); stroke-width:2.4; }
html.dv3 .card.v3-pcard .step{
  position:static; display:flex; align-items:center; height:32px; padding:0 2px;
  border-radius:10px; background:var(--green); color:#fff; box-shadow:var(--v3-shadow-btn);
}
html.dv3 .card.v3-pcard .step button{
  width:32px; height:32px; padding:0; border:0; background:transparent; color:#fff;
  font-size:18px; font-weight:700; line-height:1; cursor:pointer;
}
html.dv3 .card.v3-pcard .step b{ min-width:16px; text-align:center; color:#fff; font-size:14px; font-weight:700; }
/* Зона нажатия ≥ 40: видимая кнопка 32, невидимое поле вокруг */
html.dv3 .card.v3-pcard .step button{ position:relative; }
html.dv3 .card.v3-pcard .step button::after{ content:''; position:absolute; inset:-4px; }

/* Подпись */
html.dv3 .card.v3-pcard .info{ display:flex; flex-direction:column; flex:1 1 auto; gap:0; padding:8px 0 0; }
html.dv3 .card.v3-pcard .pr{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0; order:0; }
html.dv3 .card.v3-pcard .pr .now{ font-size:17px; font-weight:700; line-height:1.25; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
html.dv3 .card.v3-pcard .pr .now.deal{ color:var(--red); }
html.dv3 .card.v3-pcard .pr .old{ font-size:12px; font-weight:400; color:var(--v3-sub); text-decoration:line-through; white-space:nowrap; }
html.dv3 .card.v3-pcard .nm{
  margin:4px 0 0; min-height:0; font-size:13px; font-weight:400; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html.dv3 .card.v3-pcard .tags{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:4px 0 0; padding:0; }
html.dv3 .card.v3-pcard .tags .mt{ margin:0; font-size:12px; font-weight:400; color:var(--muted); background:none; padding:0; }
html.dv3 .card.v3-pcard .v3-disc{ display:none; }
html.dv3 .card.v3-pcard .v3-local{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:500; color:var(--green); }
html.dv3 .card.v3-pcard .v3-local .v3-i{ width:13px; height:13px; }

/* «Майины · ⚡ ~40 мин» / «Эт Уут · ☾ к 9:00» */
html.dv3 .card.v3-pcard .v3-src{
  display:flex; align-items:center; gap:4px; margin-top:4px; min-width:0;
  font-size:12px; font-weight:600; line-height:1.3; color:var(--muted); white-space:nowrap;
}
html.dv3 .card.v3-pcard .v3-src-n{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
html.dv3 .card.v3-pcard .v3-src-d{ font-weight:400; color:var(--v3-sub); }
html.dv3 .card.v3-pcard .v3-when{ display:inline-flex; align-items:center; gap:2px; flex:none; font-weight:500; }
html.dv3 .card.v3-pcard .v3-when .v3-i{ width:12px; height:12px; }
html.dv3 .card.v3-pcard .v3-when.is-zap{ color:var(--green); }
html.dv3 .card.v3-pcard .v3-when.is-moon{ color:var(--rare); }

/* Сетка карточек (каталог, выдача): поле экрана 16, между карточками 10 по горизонтали */
html.dv3 .grid:has(> .v3-pcard){ gap:20px 10px; }

/* Битая картинка: не показываем alt-текст поверх подложки */
html.dv3 .card.v3-pcard .img img, html.dv3 .v3-photo img{ color:transparent; }
/* Фото не загрузилось ни копией, ни оригиналом (product-card.js) — иконка коробки на подложке */
html.dv3 .card.v3-pcard .img .v3-nophoto{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--v3-sub, var(--muted)); }
html.dv3 .card.v3-pcard .img .v3-nophoto .v3-i, html.dv3 .card.v3-pcard .img .v3-nophoto svg{ width:34%; height:34%; max-width:48px; max-height:48px; stroke-width:1.4; opacity:.55; }
html.dv3.dk .card.v3-pcard .img.is-nophoto{ background:var(--v3-photo) !important; }

/* Тёмная тема: фото товаров сняты на белом — подложка фото белая целиком (как у маркетплейсов
   в тёмной теме), без «рамки в рамке». Картинка на всю подложку, без полей. */
html.dv3.dk .v3-photo, html.dv3.dk .card.v3-pcard .img{ background:#f2f4f2 !important; }
html.dv3.dk .v3-photo img, html.dv3.dk .card.v3-pcard .img img{ mix-blend-mode:normal; background:transparent; border-radius:0; }

/* ── Выравнивание карточек в полках и сетках (30.09): все строки фиксированной высоты,
   чтобы цена, название и магазин стояли на одной линии у соседних карточек. ── */
html.dv3 .card.v3-pcard .info{ display:flex; flex-direction:column; }
html.dv3 .card.v3-pcard .nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  line-height:1.3; height:2.6em; min-height:2.6em; }
html.dv3 .card.v3-pcard .tags{ display:flex; gap:6px; align-items:center; height:18px; min-height:18px; overflow:hidden; white-space:nowrap; }
html.dv3 .card.v3-pcard .v3-src{ height:18px; min-height:18px; overflow:hidden; }
html.dv3 .card.v3-pcard .v3-src-n{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Время доставки — плашкой в левом нижнем углу фото */
html.dv3 .card.v3-pcard .img .v3-when{ position:absolute; left:8px; bottom:8px; z-index:1; display:inline-flex; align-items:center; gap:3px;
  padding:3px 7px; border-radius:8px; font-size:11px; font-weight:600; line-height:1.2;
  background:rgba(255,255,255,.92); color:var(--green); box-shadow:0 1px 3px rgba(0,0,0,.08); mix-blend-mode:normal; }
html.dv3 .card.v3-pcard .img .v3-when.is-moon{ color:var(--rare); }
html.dv3 .card.v3-pcard .img .v3-when .v3-i{ width:12px; height:12px; }
html.dv3.dk .card.v3-pcard .img .v3-when{ background:rgba(18,24,20,.9); }
/* На узкой карточке плашка времени не должна налезать на «+» */
html.dv3 .card.v3-pcard .img .v3-when{ max-width:calc(100% - 56px); white-space:nowrap; overflow:hidden; }
/* Логотип магазина в карточке экрана «Магазины» */
html.dv3 .v3-shopc-logo{ background:#fff; overflow:hidden; padding:0; }
html.dv3 .v3-shopc-logo img{ width:100%; height:100%; object-fit:contain; }

/* Плитки рубрик в тёмной теме: плитка светлая, текст тёмный — фото товаров сняты на белом,
   и белый квадрат снимка на тёмной плитке смотрится заплаткой (владелец 30.09). Сама плитка
   чуть приглушена, чтобы не слепить на тёмном фоне. */
html.dv3.dk .v3-tile-ph img{ mix-blend-mode:normal !important; }
/* Степпер (− N +) шире «+» и накрывал плашку времени: товар уже в корзине — срок прячем */
html.dv3 .card.v3-pcard .img:has(.step) .v3-when{ display:none; }
/* Светлая тема: «почти белый» фон снимков растворяем в подложке фото — без серых квадратов */
/* фото без фона — фильтр «дотянуть до белого» больше не нужен */

/* ── 01.10 · «Своё лицо, дофамин» ───────────────────────────────────────────────────────
   Фото товара — ОТ КРАЯ ДО КРАЯ во всех местах (полки, каталог, магазин, поиск): никаких
   полей, рамок, теней и видимой подложки вокруг снимка; скругление контейнера режет фото.
   Подложка видна только пока картинка грузится (и она того же тона, что фон fit-квадрата). */
html.dv3 .card.v3-pcard .img, html.dv3 .v3-home .coll-row .card .img{ overflow:hidden; border:0 !important; box-shadow:none !important; padding:0 !important; }
html.dv3 .card.v3-pcard .img > img{
  position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none;
  padding:0 !important; margin:0; border:0; border-radius:0; box-shadow:none;
  object-fit:cover !important; object-position:center; mix-blend-mode:normal !important; filter:none;
}
html.dv3.dk .card.v3-pcard .img{ background:var(--v3-photo) !important; }
html.dv3 .card.v3-pcard .img.is-nophoto{ background:var(--v3-photo) !important; }

/* Нажатие на карточку — мягкое сжатие, а не «полупрозрачность» */
html.dv3 .card.v3-pcard{ transition:transform .18s cubic-bezier(.3,1.6,.5,1); }
html.dv3 .card.v3-pcard:active{ opacity:1; transform:scale(.97); }

/* Цена крупнее и плотнее — главное число карточки */
html.dv3 .card.v3-pcard .pr .now{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
html.dv3 .v3-home .coll-row .card.v3-pcard .pr .now{ font-size:16px; }

/* «+» — сочный зелёный круг с белым плюсом; нажатие — пружинка; степпер появляется «попом» */
html.dv3 .card.v3-pcard .add{
  background:var(--green); color:#fff; box-shadow:0 4px 12px color-mix(in srgb, var(--green) 35%, transparent);
  transition:transform .22s cubic-bezier(.3,1.8,.5,1);
}
html.dv3 .card.v3-pcard .add svg{ color:#fff; }
html.dv3 .card.v3-pcard .add:active{ transform:scale(.86); }
/* Зона нажатия 44 при видимом круге 40 */
html.dv3 .card.v3-pcard .add{ position:relative; }
html.dv3 .card.v3-pcard .add::after{ content:''; position:absolute; inset:-2px; border-radius:50%; }
html.dv3 .card.v3-pcard .step{ border-radius:20px; height:36px; animation:v3-pop .32s cubic-bezier(.3,1.7,.5,1); }
html.dv3 .card.v3-pcard .step button{ width:34px; height:36px; }
html.dv3 .card.v3-pcard .step b.bump{ animation:v3-num .28s cubic-bezier(.3,1.8,.5,1); }
@keyframes v3-pop{ from{ transform:scale(.6); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes v3-num{ 0%{ transform:scale(1); } 45%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

@media (prefers-reduced-motion:reduce){
  html.dv3 .card.v3-pcard, html.dv3 .card.v3-pcard .add{ transition:none; }
  html.dv3 .card.v3-pcard .step, html.dv3 .card.v3-pcard .step b.bump{ animation:none; }
}
/* Акцент к зелёному — арбузная мякоть (Арбуз — наше имя, а не чужие лекала) */
html.dv3{ --v3-accent:#ff4f6d; --v3-accent-soft:#ffe3e8; }
html.dv3.dk{ --v3-accent:#ff6b84; --v3-accent-soft:#3a1f26; }
/* Название — от верха своей двухстрочной ячейки: v2 ставил -webkit-box-pack:end, и короткое
   имя «проваливалось» на вторую строку, отрываясь от цены */
html.dv3 .card.v3-pcard .nm{ -webkit-box-pack:start; }