/* ───────────────────────────────────────────────────────────────
 * K-Promo — PATCH 9.0: Страница товара (PDP), ядро.
 * ───────────────────────────────────────────────────────────────
 * Кастомный шаблон woocommerce/single-product/content-single-product.php
 * (уводит рендер от дефолта Woodmart). Дизайн — Claude-design:
 *   - левая колонка: галерея (product.css)
 *   - правая колонка: вариант V1 «refined classic» (product-variants.css)
 *
 * Всё скоупится под `body.kp-body .kp-pdp`, веса ≤700, жёлтый = var(--yellow)
 * (канон #FECE15). Токены, которых может не быть в теме, объявлены локально
 * на .kp-pdp (не текут наружу). --yellow / --ink наследуются из темы.
 *
 * Контентный рельс (Описание/Характеристики), секция методов и «Похожие» —
 * следующим заходом (patch-9.1).
 * ─────────────────────────────────────────────────────────────── */

body.kp-body .kp-pdp {
  --paper: #FFFFFF;
  --fog: #F7F7F7;
  --line: #E5E5E5;
  --ink-2: #3D3D3D;
  --ink-3: #8A8A8A;
  --eco: #7CB342;
  --hot: #E74C3C;
  --yellow-hover: #FFD933;
  --yellow-soft: #FFF4B8;
  --radius-lg: 16px;
  --shadow-soft: 0 2px 8px rgba(0,0,0,.06);
  --shadow-card: 0 8px 24px rgba(0,0,0,.10);

  background: var(--paper);
}

/* Контейнер по ширине сайта. Верхний отступ убран в 0 — крошки идут первыми
   и должны ПРИМЫКАТЬ к жёлтому sticky-меню (внутренний отступ крошек 16px даёт
   воздух до текста). Нижний паддинг 0 — отступ под hero даёт margin-bottom
   грид-сетки; контентные полосы держат свой ритм сами (patch-9.1). */
body.kp-body.single-product .wd-content-area { padding-top: 0; }
body.kp-body .kp-pdp-main {
  padding: 0;
}

/* 2 колонки: галерея (уже) + инфо (шире) */
body.kp-body .kp-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px; /* единый ритм: hero → первая полоса (56 + 56 паддинг полосы) */
}
body.kp-body .kp-pdp-grid > .kp-pdp-gallery,
body.kp-body .kp-pdp-grid > .kp-pdp-info { min-width: 0; }

/* галерея sticky на десктопе */
@media (min-width: 1025px) {
  body.kp-body .kp-pdp-gallery { position: sticky; top: 24px; }
}


/* ═══════════════ ГАЛЕРЕЯ (product.css) ═══════════════ */
body.kp-body .kp-pdp .gal { display: flex; flex-direction: column; gap: 16px; }
body.kp-body .kp-pdp .gal-main-wrap {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
body.kp-body .kp-pdp .gal-main { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
body.kp-body .kp-pdp .gal-badges {
  position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column;
  gap: 6px; z-index: 2;
}
body.kp-body .kp-pdp .gal-badge {
  padding: 6px 10px; border-radius: 4px; font-weight: 700; font-size: 11px;
  letter-spacing:normal; text-transform: uppercase; width: fit-content;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
body.kp-body .kp-pdp .gb-new { background: var(--eco); color: #fff; }
body.kp-body .kp-pdp .gb-rus { background: var(--ink); color: var(--yellow); }
body.kp-body .kp-pdp .gb-sale { background: var(--hot); color: #fff; }
body.kp-body .kp-pdp .gb-hit { background: var(--yellow); color: var(--ink); }
body.kp-body .kp-pdp .gal-tools {
  position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column;
  gap: 8px; z-index: 2;
}
body.kp-body .kp-pdp .gal-tool {
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-soft); display: grid; place-items: center;
  color: var(--ink-3); transition: all .15s; border: 0; cursor: pointer;
}
body.kp-body .kp-pdp .gal-tool:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-card); }
body.kp-body .kp-pdp .gal-tool.is-fav { color: var(--hot); }
body.kp-body .kp-pdp .gal-thumbs {
  display: flex; gap: 12px; align-items: center; min-width: 0;
  overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.kp-body .kp-pdp .gal-thumbs::-webkit-scrollbar { height: 6px; }
body.kp-body .kp-pdp .gal-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
body.kp-body .kp-pdp .gal-thumb {
  scroll-snap-align: start; width: 80px; height: 80px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; background: #fff;
  padding: 6px; transition: border-color .15s, transform .15s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
body.kp-body .kp-pdp .gal-thumb img { width: 100%; height: 100%; object-fit: contain; }
body.kp-body .kp-pdp .gal-thumb:hover { border-color: var(--ink); transform: translateY(-2px); }
body.kp-body .kp-pdp .gal-thumb.is-active { border: 2px solid var(--ink); padding: 5px; }


/* ═══════════════ ПРАВАЯ КОЛОНКА — V1 (product-variants.css) ═══════════════ */
/* На реальной странице .pv — это сама колонка, без карточки-обёртки. */
body.kp-body .kp-pdp .pv { width: auto; background: none; box-shadow: none; padding: 0; border-radius: 0; }
body.kp-body .kp-pdp .pv * { font-feature-settings: "tnum" 0; }

body.kp-body .kp-pdp .pv-brand {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 14px;
  background: var(--ink); color: #fff; border-radius: 999px; font-weight: 600; font-size: 15px;
  letter-spacing:normal; text-transform: uppercase; margin-bottom: 18px;
}
body.kp-body .kp-pdp .pv-brand svg { color: var(--yellow); }
body.kp-body .kp-pdp a.pv-brand { text-decoration: none; transition: background .15s; }
body.kp-body .kp-pdp a.pv-brand:hover { background: #222; }
body.kp-body .kp-pdp .pv-title {
  margin: 0 0 18px; font-weight: 700; font-size: 30px; line-height: 1.12;
  letter-spacing:normal; color: var(--ink);
}
body.kp-body .kp-pdp .pv-ids { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
body.kp-body .kp-pdp .pv-id { display: inline-flex; align-items: baseline; gap: 7px; font-size: 15px; color: var(--ink-3); }
body.kp-body .kp-pdp .pv-id-lbl { font-weight: 500; letter-spacing:normal; }
body.kp-body .kp-pdp .pv-id-val { font-weight: 600; color: var(--ink); letter-spacing:normal; font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-copy {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0;
  border: 0; font-size: 15px; font-weight: 500;
  color: var(--ink-2); transition: color .15s; background: none; cursor: pointer;
}
body.kp-body .kp-pdp .pv-copy:hover { color: var(--ink); }
body.kp-body .kp-pdp .pv-copy.is-done { color: var(--eco); }
body.kp-body .kp-pdp .pv-id-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }

body.kp-body .kp-pdp .pv-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; }
body.kp-body .kp-pdp .pv-price-num { font-weight: 700; font-size: 38px; line-height: 1; letter-spacing:normal; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-price-unit { font-size: 15px; font-weight: 500; color: var(--ink-3); }

body.kp-body .kp-pdp .pv-lbl { font-weight: 600; font-size: 15px; letter-spacing:normal; text-transform: uppercase; color: var(--ink-2); }
body.kp-body .kp-pdp .pv-block { margin-bottom: 24px; }
body.kp-body .kp-pdp .pv-rule { height: 1px; background: var(--line); border: 0; margin: 0 0 24px; }

/* цвет — thumbnails */
body.kp-body .kp-pdp .pv-thumb-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
body.kp-body .kp-pdp .pv-thumb-head .pv-cur { font-weight: 600; font-size: 15px; color: var(--ink); }
body.kp-body .kp-pdp .pv-thumb-head .pv-mut { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-thumb-dot { color: var(--ink-3); }
body.kp-body .kp-pdp .pv-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-thumb {
  width: 76px; height: 76px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff;
  padding: 6px; cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s;
}
body.kp-body .kp-pdp .pv-thumb:hover { border-color: var(--ink-3); transform: translateY(-2px); }
body.kp-body .kp-pdp .pv-thumb.is-on { border: 2px solid var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); padding: 5.5px; }
body.kp-body .kp-pdp .pv-thumb-vis { width: 100%; height: 100%; border-radius: 8px; background: var(--fog); overflow: hidden; display: grid; place-items: center; }
body.kp-body .kp-pdp .pv-thumb-vis img { width: 100%; height: 100%; object-fit: contain; }

body.kp-body .kp-pdp .pv-pantone { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; background: var(--fog); border-radius: 10px; }
body.kp-body .kp-pdp .pv-pantone-chip { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
body.kp-body .kp-pdp .pv-pantone-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.kp-body .kp-pdp .pv-pantone-code { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing:normal; }
body.kp-body .kp-pdp .pv-pantone-sub { font-size: 15px; color: var(--ink-3); font-weight: 500; }

/* методы — плитки 2×2 */
body.kp-body .kp-pdp .pv-methods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.kp-body .kp-pdp .pv-method { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: all .15s; }
body.kp-body .kp-pdp .pv-method:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
body.kp-body .kp-pdp .pv-mglyph { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); flex-shrink: 0; display: grid; place-items: center; }
body.kp-body .kp-pdp .pv-mglyph svg { width: 24px; height: 24px; }
body.kp-body .kp-pdp .pv-method-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.kp-body .kp-pdp .pv-method-nm { font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.15; }

/* наличие */
body.kp-body .kp-pdp .pv-avail { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-avail-cell { flex: 1; min-width: 96px; background: var(--fog); border-radius: 10px; padding: 10px 12px; }
body.kp-body .kp-pdp .pv-avail-k { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-bottom: 2px; }
body.kp-body .kp-pdp .pv-avail-v { font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
body.kp-body .kp-pdp .pv-avail-v.is-zero { color: var(--ink-3); }

/* тираж + сумма */
body.kp-body .kp-pdp .pv-qty { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-qty-l { display: flex; flex-direction: column; gap: 8px; }
body.kp-body .kp-pdp .pv-stepper { display: inline-flex; align-items: stretch; height: 56px; border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; }
body.kp-body .kp-pdp .pv-step-btn { width: 54px; display: grid; place-items: center; background: var(--fog); color: var(--ink); transition: background .14s; border: 0; cursor: pointer; }
body.kp-body .kp-pdp .pv-step-btn:hover { background: var(--yellow); }
body.kp-body .kp-pdp .pv-step-btn:disabled { color: var(--ink-3); background: #fff; cursor: not-allowed; }
body.kp-body .kp-pdp .pv-step-input { width: 92px; border: 0; outline: 0; text-align: center; font-weight: 700; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; background: transparent; }
body.kp-body .kp-pdp .pv-step-hint { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-step-hint b { font-weight: 600; color: var(--ink-2); }
body.kp-body .kp-pdp .pv-qty-sum { text-align: right; }
body.kp-body .kp-pdp .pv-qty-sum-cap { font-size: 15px; color: var(--ink-3); font-weight: 500; margin-bottom: 3px; }
body.kp-body .kp-pdp .pv-qty-sum-num { font-weight: 700; font-size: 26px; color: var(--ink); letter-spacing:normal; font-variant-numeric: tabular-nums; line-height: 1; }

/* CTA */
body.kp-body .kp-pdp .pv-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
body.kp-body .kp-pdp .pv-btn { height: 54px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing:normal; text-transform: uppercase; transition: all .15s; border: 0; cursor: pointer; }
body.kp-body .kp-pdp .pv-btn-cart { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
body.kp-body .kp-pdp .pv-btn-cart:hover { background: var(--ink); color: #fff; }
body.kp-body .kp-pdp .pv-btn-cart.is-added { background: var(--eco); color: #fff; box-shadow: none; }
body.kp-body .kp-pdp .pv-btn-print { background: var(--yellow); color: var(--ink); }
body.kp-body .kp-pdp .pv-btn-print:hover { background: var(--yellow-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* факты */
body.kp-body .kp-pdp .pv-facts { display: flex; flex-direction: column; }
body.kp-body .kp-pdp .pv-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
body.kp-body .kp-pdp .pv-fact:first-child { border-top: 1px solid var(--line); }
body.kp-body .kp-pdp .pv-fact-k { font-size: 15px; color: var(--ink-3); font-weight: 500; }
body.kp-body .kp-pdp .pv-fact-v { font-weight: 600; font-size: 15px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* склад-плашка */
body.kp-body .kp-pdp .pv-stock { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; background: rgba(124,179,66,.12); border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink); }
body.kp-body .kp-pdp .pv-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--eco); box-shadow: 0 0 0 4px rgba(124,179,66,.22); }
body.kp-body .kp-pdp .pv-stock b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* консультация */
body.kp-body .kp-pdp .pv-consult { margin-top: 20px; padding: 18px; background: var(--fog); border-radius: 14px; }
body.kp-body .kp-pdp .pv-consult-h { margin: 0 0 12px; font-weight: 600; font-size: 16px; color: var(--ink); }
body.kp-body .kp-pdp .pv-consult-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
body.kp-body .kp-pdp .pv-consult-line { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
body.kp-body .kp-pdp .pv-consult-line svg { color: var(--ink-2); }
body.kp-body .kp-pdp .pv-consult-msgs { display: flex; gap: 8px; flex-wrap: wrap; }
body.kp-body .kp-pdp .pv-msg { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: all .15s; }
body.kp-body .kp-pdp .pv-msg:hover { transform: translateY(-1px); border-color: var(--ink); }
body.kp-body .kp-pdp .pv-msg img { width: 22px; height: 22px; display: block; border-radius: 6px; }


/* ═══════════════ Адаптив ═══════════════ */
@media (max-width: 1024px) {
  body.kp-body .kp-pdp-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  body.kp-body .kp-pdp .pv-title { font-size: 24px; }
  body.kp-body .kp-pdp .pv-price-num { font-size: 32px; }
  body.kp-body .kp-pdp .pv-methods-grid { grid-template-columns: 1fr; }
  body.kp-body .kp-pdp .pv-ctas { grid-template-columns: 1fr; }
  /* поле ввода — 16px, чтобы iOS не зумил */
  body.kp-body .kp-pdp .pv-step-input { font-size: 18px; }
}