/* ============================================================
   bufet — карточка изделия: галерея, инфо-колонка, история, эскизы.
   Перенос из docs/02/design_2/assets/inner.css (58-105) и мобильных правил
   mobile.css (80-105), переведённых на классы темы.

   НЕ переносится:
   · .pdp-buy / .qty (inner.css 93-98) — блок покупки: корзины в Этапе 1 нет,
     главное действие карточки — заявка (решение 10 в docs/DECISIONS.md);
   · .pdp-price__kaspi (76-77) — рассрочка Kaspi Red подключается в Этапе 2
     (PARITY-CHECK, пункт 26);
   · .swatch* (81-86) — свотчи обивки: их цвет в макете задан инлайном, а в данных
     цвета нет вовсе (у терминов pa_pokrytie цветовой меты не существует);
   · .m-buybar (mobile.css 106-109) — липкая полоса «В корзину»: корзины нет, а её
     место внизу экрана занято таб-баром.

   Галерея устроена иначе, чем в макете: не переключение прозрачности по клику
   (без скрипта видно только первый кадр), а горизонтальный scroll-snap — он же
   мобильный макет .m-pdpfig. Обоснование целиком — в template-parts/product/gallery.php.

   ВНИМАНИЕ: базовые правила идут ВЫШЕ медиазапросов. Дописанный в конец файла блок
   молча отменяет мобильную ветку — специфичность одинаковая, !important запрещён
   (так в Task 5 умерли пять правил сразу).
   ============================================================ */

/* margin-top — отступление от макета по замечанию заказчика (docs/PARITY-CHECK.md):
   в inner.css у `.pdp` его нет, и крошки ложились на кадр изделия вплотную —
   у `.crumb` нижнего отступа нет вовсе, а следом сразу большая фотография.
   На остальных внутренних страницах воздух даёт `.phead` (padding-block 18px 30px). */
.pdp { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: clamp(36px, 4.5vw, 80px); margin-top: clamp(18px, 2.2vw, 28px); padding-bottom: clamp(48px, 7vw, 96px); align-items: start; }

/* ---- галерея ------------------------------------------------ */
.pdp-gallery { position: sticky; top: 100px; }

/* Лента кадров. scroll-snap вместо crossfade: листается пальцем и трекпадом без JS.
   overscroll-behavior-inline — чтобы свайп в конце ленты не сработал как «назад»
   (та же причина, что в showcase.css и в ленте раздела). */
.pdp-main {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain; scrollbar-width: none;
  aspect-ratio: 4 / 5; border-radius: var(--r-3); background: var(--plate-a);
}
.pdp-main::-webkit-scrollbar { display: none; }
.pdp-frame { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
/* картинка внутри кадра абсолютная (.plate__img из base.css), поэтому кадру нужна высота */
.pdp-frame .plate__img { border-radius: var(--r-3); }
/* кадр ролика: у .plate своей высоты нет, её задаёт растянутый флексом .pdp-frame */
.pdp-frame .plate { position: absolute; inset: 0; border-radius: var(--r-3); }
.pdp-main--empty { display: block; }

/* overscroll-behavior-inline: без него свайп вправо в конце ленты миниатюр на iOS и
   Chrome-Android срабатывает как «назад» и уводит с сайта — та же причина, что у ленты
   изделий (showcase.css) и у пилюль раздела (catalog.css). */
.pdp-thumbs { display: flex; gap: 12px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.pdp-thumbs::-webkit-scrollbar { display: none; }
/* display задан явно, хотя флекс-родитель и так блокифицирует ссылку: без него миниатюра
   вне флекса схлопнулась бы в инлайн и потеряла заданные размеры. */
.pdp-thumb { display: block; position: relative; flex: none; width: 84px; height: 100px; border-radius: var(--r-1); overflow: hidden; border: 2px solid transparent; background: var(--plate-a); transition: border-color var(--dur-fast) var(--ease); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { border-color: var(--ink-3); }
.pdp-thumb.is-on { border-color: var(--accent); }
/* плашка ролика — уменьшенная .plate__tag; ширина по содержимому, а не от left: 50%,
   иначе пилюля сжимается вдвое и значок в ней схлопывается в ноль */
.pdp-thumb__badge {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2;
  width: max-content; max-width: calc(100% - 8px); margin-inline: auto;
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
  font-family: var(--font-display); font-size: .58rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px);
  padding: 3px 7px; border-radius: var(--r-pill);
}
.pdp-thumb__badge svg { width: 9px; height: 9px; flex: none; }

/* ---- инфо-колонка ------------------------------------------- */
.pdp-info { padding-top: 6px; }
.pdp-avail { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.pdp-avail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* «На заказ» — то же место и кегль, но без акцента: акцент в этой системе значит
   «есть прямо сейчас», и красить им обещание срока было бы передержкой */
.pdp-avail--order { color: var(--ink-2); }
.pdp-avail--order .dot { background: var(--ink-3); }

.pdp-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.03em; line-height: 1.04; color: var(--ink); margin: 0 0 10px; }
.pdp-sub { color: var(--ink-2); font-size: var(--fs-lead); margin: 0 0 26px; }

.pdp-price { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding-block: 22px; border-block: 1px solid var(--line); }
.pdp-price__now { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.02em; color: var(--ink); }
/* Изделие без цены: кегль мельче суммы — надпись длиннее и в 2.6rem заняла бы две строки
   (та же логика, что у .pcard__price-ask в карточке каталога, PARITY-CHECK 34) */
.pdp-price__ask { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink-2); }
.pdp-price__note { font-size: .92rem; color: var(--ink-3); }
/* Скидка приходит из get_price_html() тегами <del>/<ins>, а стили WooCommerce выключены —
   без этих правил браузер рисует новую цену подчёркнутой (PARITY-CHECK 36) */
.pdp-price__now del { margin-right: 10px; font-size: .62em; font-weight: 600; color: var(--ink-3); text-decoration-line: line-through; }
.pdp-price__now ins { text-decoration: none; background: none; color: inherit; }

.pdp-block { padding-block: 26px; border-bottom: 1px solid var(--line); }
.pdp-block__h { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; }
.pdp-pick .opt { position: relative; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; margin: 0; }
.spec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.spec dt { color: var(--ink-3); font-size: .92rem; }
.spec dd { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .94rem; text-align: right; }

/* Место блока покупки из макета занимают два действия: заявка и живой канал.
   Геометрия та же, что была у .pdp-buy — ряд с переносом. */
.pdp-cta { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.pdp-cta__main { flex: 1; justify-content: center; min-width: 220px; }
.pdp-cta .btn--ghost { justify-content: center; }

.pdp-meta { display: flex; gap: 14px 24px; flex-wrap: wrap; margin-top: 24px; }
.pdp-meta div { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--ink-2); font-weight: 500; }
.pdp-meta svg { width: 19px; height: 19px; stroke: var(--accent); stroke-width: 1.7; fill: none; flex: none; }

/* ---- история модели и эскизы --------------------------------
   Блоков нет в макете PDP вовсе: требование 03.docx про ИИ-эскизы и «презентацию
   модели» (решение 10). Собраны из принятых примитивов — .eyebrow, .sec-title, .plate. */
.pstory { padding-bottom: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); padding-top: clamp(40px, 6vw, 72px); }
.pstory__head { margin-bottom: 28px; }
/* Мера строки чуть шире, чем у лида раздела: здесь текст длинный и читается подряд */
.pstory__text { max-width: 68ch; color: var(--ink-2); font-size: var(--fs-lead); }
.pstory__text p { margin: 0 0 .8em; }
.pstory__text p:last-child { margin-bottom: 0; }
.pstory__sub { font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: clamp(32px, 5vw, 56px) 0 18px; }

.sketches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.sketch { margin: 0; }
.sketch .plate { aspect-ratio: 4 / 5; }
.sketch figcaption { margin-top: 10px; font-size: .86rem; color: var(--ink-3); }

@media (max-width: 1024px) {
  /* Одна колонка: галерея сверху, инфо под ней (inner.css:111-112). Липкости у галереи
     здесь нет — прилипать не к чему, соседней колонки уже не существует. */
  .pdp { grid-template-columns: 1fr; gap: 28px; }
  .pdp-gallery { position: static; }
  .sketches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* Кегли мобильного макета (mobile.css:88-104): на 390 десктопные заголовок и лид
     занимали бы половину первого экрана. */
  .pdp-name { font-size: 1.9rem; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; }
  .pdp-sub { font-size: .96rem; margin-bottom: 18px; }
  .pdp-avail { font-size: .68rem; margin-bottom: 10px; }
  .pdp-avail .dot { width: 7px; height: 7px; }
  /* Кадр квадратный, как в мобильном макете (.m-pdpfig img { aspect-ratio: 1/1 }):
     вертикальный 4:5 на телефоне выталкивает имя и цену за пределы экрана. */
  .pdp-main { aspect-ratio: 1 / 1; border-radius: 18px; }
  .pdp-frame .plate__img { border-radius: 18px; }
  .pdp-frame .plate { border-radius: 18px; }
  .pdp-thumb { width: 64px; height: 76px; }
  .pdp-thumb__badge { bottom: 4px; padding: 2px 5px; gap: 2px; font-size: .52rem; }
  .pdp-price { padding-block: 16px; }
  .pdp-price__now { font-size: 1.6rem; }
  .pdp-price__ask { font-size: 1.2rem; }
  .pdp-price__note { font-size: .82rem; }
  .pdp-block { padding-block: 20px; }
  .pdp-block__h { font-size: .72rem; margin-bottom: 12px; }
  .spec { padding: 11px 0; }
  /* кнопки во всю ширину: рядом они по 44% и текст в них переносится */
  .pdp-cta { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .pdp-meta { gap: 10px; margin-top: 20px; }
  .pdp-meta div { font-size: .84rem; }
  .pstory { padding-top: clamp(28px, 8vw, 40px); }
  .pstory__head { margin-bottom: 18px; }
  .pstory__text { font-size: 1rem; }
}

@media (max-width: 680px) {
  /* Характеристики в одну колонку (inner.css:117): в две ширины хватает только
     на «Дуб» и «Масло», а «Срок изготовления» переносится на две строки. */
  .specs { grid-template-columns: 1fr; }
}