/* ВИТРИНА v3 — 03 Товар (Figma H4aeIVyjwU74kdBmeeTpAX, 10:2).
   Разметка — app/views/product.js, ветка isV3(). Экран вложенный → светлый верх.
   Белые секции на серой земле, между ними 10. Классы pd-hero / pd-sheet / rrow / rc /
   pd-bar остаются: на них висят жест «смахнуть вниз» и обработчики. */

/* Белый лист целиком: секции разделяет воздух, а не серые полосы */
html.dv3 [data-view="product"]{ background:var(--paper); }

/* ── Шторка (мобильный < 1024): свой скролл поверх зафиксированного body ─────
   body прибивает product.js (lockBackground). Кнопки «назад» — fixed поверх фото,
   нижняя плашка — fixed (design-system .sticky-bar), лист оставляет под неё поле. */
@media (max-width:1023px){
  html.dv3 [data-view="product"]{
    position:fixed; top:0; bottom:0; left:0; right:0; z-index:30; /* над меню (20) и плашками (25), под тостами (100) */
    max-width:480px; margin:0 auto; overflow-x:hidden; overflow-y:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  /* Полоса под статус-баром: контент уезжает под неё, а не под часы */
  html.dv3 [data-view="product"]::before{
    content:''; position:fixed; top:0; left:0; right:0; z-index:4; height:env(safe-area-inset-top,0px);
    background:var(--paper); pointer-events:none;
  }
  html.dv3 [data-view="product"] .sticky-bar.v3-pd-bar{ z-index:5; }
  html.dv3 .v3-pd-top{
    position:fixed; z-index:6; top:calc(8px + env(safe-area-inset-top,0px)); left:0; right:0;
    max-width:480px; margin:0 auto; padding:0 12px; pointer-events:none;
  }
  html.dv3 .v3-pd-top > *{ pointer-events:auto; }
  /* Фото начинается под полосой статус-бара, а не уезжает под неё тонкой каймой */
  html.dv3 [data-view="product"] .pd-hero.v3-pd-hero{ margin-top:env(safe-area-inset-top,0px); }
  /* Проехали фото — под кнопками сплошная шапка с названием (product.js → is-solid) */
  html.dv3 .v3-pd-top{ gap:10px; transition:background-color .15s ease, box-shadow .15s ease; }
  html.dv3 .v3-pd-top.is-solid{
    top:0; padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
    background:var(--paper); box-shadow:0 1px 0 var(--line); pointer-events:auto;
  }
  html.dv3 .v3-pd-top.is-solid .v3-pd-ib{ box-shadow:none; background:var(--bg); color:var(--ink); }
}
html.dv3 .v3-pd-ttl{ flex:1; min-width:0; visibility:hidden; font-size:15px; font-weight:600; line-height:20px;
  color:var(--ink); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.dv3 .v3-pd-top.is-solid .v3-pd-ttl{ visibility:visible; }

/* ── Фото: во всю ширину, белая подложка в обеих темах (как у Самоката/Лавки) ── */
html.dv3 [data-view="product"] .pd-hero.v3-pd-hero{
  position:relative; display:block; height:auto; margin:0; padding:0; overflow:hidden; font-size:inherit;
  background:transparent; border-radius:0;
}
html.dv3 .v3-pd-top{ display:flex; justify-content:space-between; align-items:center; }
html.dv3 .v3-pd-ib, html.dv3 [data-view="product"] .pd-cbtn{
  position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.86); color:#1b1f1c; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html.dv3 .v3-pd-ib[hidden]{ display:none; }
html.dv3 .v3-pd-ib::after{ content:''; position:absolute; inset:-2px; }          /* зона нажатия 48 */
html.dv3 .v3-pd-ib .v3-i{ width:20px; height:20px; }
html.dv3 .v3-pd-ib:focus-visible, html.dv3 .v3-pd-link:focus-visible,
html.dv3 [data-view="product"] button:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

html.dv3 [data-view="product"] .v3-pd-photo{ border-radius:0; background:#fff; display:grid; place-items:center; line-height:1; }
@media (max-width:1023px){
  /* Квадрат во всю ширину, без полей: фото (uploads/products/fit) само даёт фон */
  html.dv3 [data-view="product"] .v3-pd-photo{ width:100%; height:auto; aspect-ratio:1 / 1; margin:0; padding:0; font-size:min(34vw, 150px); }
}
html.dv3 [data-view="product"] .v3-pd-photo:has(> img){ background:transparent; }
/* Фото товара целиком, никогда не режем; в flex-колонке экрана герой не сжимается */
html.dv3 [data-view="product"] .pd-hero.v3-pd-hero, html.dv3 [data-view="product"] .v3-pd-photo{ flex-shrink:0; }
html.dv3 [data-view="product"] .v3-pd-photo:has(> img){ background:#f7f4ef; }
html.dv3 [data-view="product"] .v3-pd-photo img{ display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; }
/* Бейдж — под кнопкой «назад», чтобы та его не закрывала */
html.dv3 .v3-pd-badge{ position:absolute; left:16px; bottom:14px; padding:4px 9px; font-size:13px; font-weight:700; }

/* ── Лист секций ─────────────────────────────────────────────────────────── */
html.dv3 [data-view="product"] .pd-sheet.v3-pd-sheet{
  display:flex; flex-direction:column; gap:6px; margin:0; border:0; border-radius:0; box-shadow:none;
  background:transparent; padding:6px 0 calc(96px + env(safe-area-inset-bottom,0px));
}
html.dv3 .v3-pd-sec{ background:var(--paper); padding:16px 16px; }
html.dv3 .v3-pd-sec:empty, html.dv3 .v3-pd-seller:has(.js-seller:empty){ display:none; }
html.dv3 .v3-pd-h{ font-size:15px; font-weight:700; line-height:18px; margin:0 0 10px; }
html.dv3 .v3-pd-cap{ font-size:12px; font-weight:500; line-height:15px; color:var(--muted); }

/* Название, упаковка, цена */
html.dv3 .v3-pd-nm{ font-size:17px; font-weight:600; line-height:22px; color:var(--ink); text-wrap:pretty; }
html.dv3 .v3-pd-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px;
  font-size:13px; line-height:17px; color:var(--muted); }
html.dv3 .v3-pd-prc{ display:flex; align-items:baseline; gap:8px; margin-top:10px; }
html.dv3 .v3-pd-now{ font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:36px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
html.dv3 .v3-pd-now.is-deal{ color:var(--red); }
html.dv3 .v3-pd-old{ font-size:14px; line-height:18px; color:var(--v3-sub); white-space:nowrap; }
html.dv3 .v3-pd-note{ margin:10px 0 0; font-size:12px; line-height:16px; color:var(--muted); }

/* Карточка магазина */
html.dv3 .v3-pd-shoprow{ display:flex; align-items:center; gap:10px; }
html.dv3 .v3-pd-shoprow .v3-grow{ flex:1; min-width:0; }
html.dv3 .v3-pd-shopname{ font-size:14px; font-weight:600; line-height:18px; color:var(--ink); }
html.dv3 .v3-pd-shoprow .v3-meta{ line-height:16px; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.dv3 .v3-pd-link{ display:inline-flex; align-items:center; gap:2px; min-height:40px; flex:none;
  font-size:13px; font-weight:600; color:var(--green); text-decoration:none; white-space:nowrap; }
html.dv3 .v3-pd-link .v3-i{ width:14px; height:14px; }
html.dv3 .v3-pd-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
html.dv3 .v3-pd-pills .v3-pill{ padding:3px 7px; white-space:normal; }

/* Описание и услуги */
html.dv3 [data-view="product"] .v3-pd-about .pd-desc{ margin:0; font-size:14px; line-height:1.45; color:var(--ink); }
html.dv3 .v3-pd-about .pd-desc + .pd-svc{ margin-top:14px; }
html.dv3 .v3-pd-svc{ display:flex; flex-direction:column; gap:8px; }
html.dv3 .v3-pd-svcbtn{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; padding:12px 14px;
  border-radius:12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; font:inherit; }
html.dv3 .v3-pd-svcbtn.is-on{ background:var(--green-soft); border-color:var(--green); }
html.dv3 .v3-pd-svcbtn .v3-grow{ flex:1; min-width:0; }
html.dv3 .v3-pd-svcbtn .v3-grow b{ display:block; font-size:14px; font-weight:600; line-height:18px; }
html.dv3 .v3-pd-svcbtn .v3-meta{ display:block; margin-top:2px; line-height:16px; }
html.dv3 .v3-pd-check{ display:grid; place-items:center; flex:none; width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--line); color:#fff; }
html.dv3 .v3-pd-svcbtn.is-on .v3-pd-check{ background:var(--green); border-color:var(--green); }
html.dv3 .v3-pd-check .v3-i{ width:14px; height:14px; }
html.dv3 .v3-pd-svcprice{ font-size:14px; font-weight:700; line-height:18px; white-space:nowrap; }

/* Пищевая ценность */
html.dv3 .v3-pd-nutr{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; }
html.dv3 .v3-pd-tile{ min-width:0; min-height:56px; padding:10px 4px 8px; border-radius:12px; background:var(--bg); text-align:center; }
html.dv3 .v3-pd-tile b{ display:block; font-size:15px; font-weight:700; line-height:20px; color:var(--ink); font-variant-numeric:tabular-nums; }
html.dv3 .v3-pd-tile span{ display:block; margin-top:2px; font-size:11px; line-height:14px; color:var(--v3-sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:359px){
  html.dv3 .v3-pd-nutr{ grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
html.dv3 .v3-pd-kv{ margin-top:10px; }
html.dv3 .v3-pd-sec > .v3-pd-kv:first-child{ margin-top:0; }
html.dv3 .v3-pd-val{ margin-top:2px; font-size:13px; line-height:18px; color:var(--ink); }

/* Продавец */
html.dv3 .v3-pd-seller .js-seller{ margin-top:3px; font-size:12px; line-height:16px; color:var(--ink); }

/* С этим товаром берут */
html.dv3 .v3-pd-rel{ padding-bottom:16px; }
html.dv3 [data-view="product"] .v3-pd-rel .rrow{ display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; margin:0 -16px; padding:0 16px 4px; scrollbar-width:none;
  /* Только вбок: overflow-x:auto делал и overflow-y:auto, а зоны нажатия «+» (::after) торчали
     вниз — лента ездила вверх-вниз за пальцем. Вертикальный свайп по ленте листает страницу. */
  overscroll-behavior-x:contain; touch-action:pan-x pan-y; }
html.dv3 [data-view="product"] .v3-pd-rel .rc{
  flex:0 0 140px; width:140px; display:flex; flex-direction:column; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none; cursor:pointer;
}
html.dv3 [data-view="product"] .v3-pd-rel .rc .ri{
  width:140px; height:140px; aspect-ratio:auto; margin:0; padding:0; border-radius:16px;
  background:var(--v3-photo); display:grid; place-items:center; font-size:56px;
}
html.dv3 [data-view="product"] .v3-pd-rel .rc .ri img{ object-fit:cover; mix-blend-mode:normal; }
html.dv3 .v3-pd-rpct{ position:absolute; left:6px; top:6px; padding:2px 6px; font-size:11px; }
html.dv3 [data-view="product"] .v3-pd-rel .rc .rn{
  margin-top:6px; padding:0; font-size:13px; font-weight:400; line-height:16px; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
html.dv3 .v3-pd-rfoot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:6px; }
html.dv3 .v3-pd-rprice{ display:flex; flex-direction:column; min-width:0; }
html.dv3 .v3-pd-rprice s{ font-size:11px; line-height:13px; color:var(--v3-sub); }
html.dv3 [data-view="product"] .v3-pd-rel .rc .rp{ margin:0; padding:0; font-size:14px; font-weight:700; line-height:18px; color:var(--ink); }
html.dv3 [data-view="product"] .v3-pd-rel .rc .rp.is-deal{ color:var(--red); }
html.dv3 .v3-pd-rel .rc-add{
  position:relative; display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0;
  border:0; border-radius:50%; background:var(--green); color:#fff; cursor:pointer;
  box-shadow:0 4px 12px color-mix(in srgb, var(--green) 35%, transparent);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
html.dv3 .v3-pd-rel .rc-add:active{ transform:scale(.86); }
html.dv3 .v3-pd-rel .rc-add::after{ content:''; position:absolute; inset:-6px; border-radius:50%; }  /* зона нажатия 44 */
html.dv3 .v3-pd-rel .rc-add .v3-i{ width:15px; height:15px; }

/* ── Нижняя плашка ───────────────────────────────────────────────────────── */
html.dv3 .sticky-bar.v3-pd-bar{ padding:0; background:none; }
html.dv3 .v3-pd-bar .inner.v3-bar{
  display:flex; align-items:center; gap:10px; border:0; border-radius:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--paper); box-shadow:var(--v3-shadow-bar);
}
html.dv3 .v3-pd-bar .pp{ display:flex; flex-direction:column; flex:none; line-height:1; }
html.dv3 .v3-pd-bar .pp b{ font-size:20px; font-weight:700; line-height:26px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
html.dv3 .v3-pd-bar .pp b.is-deal{ color:var(--red); }
html.dv3 .v3-pd-bar .pp small{ font-size:12px; line-height:15px; color:var(--v3-sub); text-decoration:line-through; }
html.dv3 .v3-pd-actions{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
html.dv3 .v3-pd-actions .v3-btn{ flex:1; min-width:0; white-space:nowrap; }
html.dv3 .v3-pd-actions .v3-btn .v3-i{ width:18px; height:18px; }
html.dv3 .v3-pd-step{ display:flex; align-items:center; flex:none; height:50px; border-radius:12px;
  background:var(--green-soft); color:var(--green); }
html.dv3 .v3-pd-step button{ display:grid; place-items:center; width:40px; height:50px; padding:0; border:0;
  background:none; color:inherit; cursor:pointer; }
html.dv3 .v3-pd-step .js-qty{ min-width:20px; text-align:center; font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:359px){
  html.dv3 .v3-pd-step button{ width:34px; }
  html.dv3 .v3-pd-actions .v3-btn{ padding:0 10px; font-size:15px; }
}

/* ── «Дофамин»: кольца БЖУ, пружинки, россыпь. Всё — CSS, reduced-motion уважаем ── */
html.dv3 .v3-pd-nutr{ gap:8px; }
html.dv3 .v3-pd-tile{ --c:var(--green); display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:12px 4px 10px; border-radius:16px; background:color-mix(in oklab, var(--c) 9%, var(--paper)); }
html.dv3 .v3-pd-tile.is-p{ --c:#e0648a; }   /* белки — малиновый */
html.dv3 .v3-pd-tile.is-f{ --c:#e9a23b; }   /* жиры — абрикос */
html.dv3 .v3-pd-tile.is-c{ --c:#4f9fd9; }   /* углеводы — небо */
html.dv3 .v3-pd-tile.is-kcal b{ font-size:22px; line-height:28px; color:var(--green); }
html.dv3 .v3-pd-ring{ position:relative; display:grid; place-items:center; width:46px; height:46px; margin-bottom:6px; }
html.dv3 .v3-pd-ring::before{ content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in oklab, var(--c) 20%, transparent) 0);
  -webkit-mask:radial-gradient(circle, transparent 17px, #000 18px); mask:radial-gradient(circle, transparent 17px, #000 18px); }
html.dv3 .v3-pd-ring em{ position:relative; font-style:normal; font-size:11px; font-weight:700; color:var(--c); font-variant-numeric:tabular-nums; }
html.dv3 .v3-pd-tile span{ color:color-mix(in oklab, var(--c) 55%, var(--muted)); }

/* «В корзину» — зелёная, с пружинкой; степпер появляется прыжком, цифра подпрыгивает */
html.dv3 .v3-pd-add{ background:var(--green); color:#fff; box-shadow:0 6px 18px color-mix(in oklab, var(--green) 35%, transparent); }
html.dv3 .v3-pd-actions .v3-btn, html.dv3 .v3-pd-step button{ transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
html.dv3 .v3-pd-actions .v3-btn:active{ transform:scale(.95); }
html.dv3 .v3-pd-step button:active{ transform:scale(.8); }
html.dv3 .v3-pd-step.is-pop{ animation:v3-pd-pop .42s cubic-bezier(.34,1.56,.64,1); }
html.dv3 .v3-pd-step .js-qty.is-bump{ animation:v3-pd-bump .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes v3-pd-pop{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes v3-pd-bump{ 0%{ transform:none; } 40%{ transform:translateY(-4px) scale(1.25); } 100%{ transform:none; } }
@media (prefers-reduced-motion: reduce){
  html.dv3 .v3-pd-step.is-pop, html.dv3 .v3-pd-step .js-qty.is-bump{ animation:none; }
  html.dv3 .v3-pd-actions .v3-btn, html.dv3 .v3-pd-step button, html.dv3 .v3-pd-rel .rc-add{ transition:none; }
}
html.dv3 .v3-pd-tile.is-kcal{ justify-content:center; }