/* ============================================================
   ART-GSM РЕДИЗАЙН 2026 — PDP (карточка товара) Style B
   Доводки поверх product.css: рестайл нативной Aspro add-to-cart
   кнопки/счётчика под .btn--primary, заголовок .pinfo-title,
   блок «под заказ», контейнер комментариев, sticky-cta кнопка.
   ============================================================ */

/* PDP внутри легаси-контейнеров Aspro (.product-view--side-left и пр.), которые
   шире вьюпорта / со смещением. Нормализуем предков и центрируем .ag-pdp как
   обычный контейнер, чтобы заголовки секций не обрезались слева. */
body.ag-styleb .product-view--side-left,
body.ag-styleb .product-container.detail,
body.ag-styleb .ag-pdp-root.product-info {
  overflow: visible !important; margin: 0 !important;
  width: 100% !important; max-width: 100% !important; float: none !important;
  box-sizing: border-box;
}
/* отступы предков обнуляем только на десктопе — на мобиле оставляем поток Aspro */
@media (min-width: 1024px){
  body.ag-styleb .product-view--side-left,
  body.ag-styleb .product-container.detail,
  body.ag-styleb .ag-pdp-root.product-info { padding: 0 !important; }
}
body.ag-styleb .ag-pdp.wrap {
  max-width: 1440px; margin: 0 auto; width: 100%;   /* ag lane-1440 (02.09): было 1280 — тело карточки стояло на 64px уже крошек и шапки. Боковые поля 0:
     родитель .wrapper_inner уже даёт 16px, со своими 16 контент уезжал на 16px правее колеи (и на мобиле — двойной отступ). */
  padding: 0; box-sizing: border-box; overflow: visible;
}
body.ag-styleb .ag-pdp .pdp-section { overflow: visible; }
/* страховка от горизонтального переполнения внутри карточки */
body.ag-styleb .ag-pdp, body.ag-styleb .ag-pdp .pdp { min-width: 0; max-width: 100%; }
/* Сброс возможных легаси-стилей Aspro для заголовков внутри .product-info/.detail */
body.ag-styleb .ag-pdp .pdp-section > h2 {
  margin: 0 0 var(--s-16); padding: 0; text-indent: 0;
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
}

/* Внутренний заголовок (не h1 — h1#pagetitle внешний) — визуально как h1 эталона */
body.ag-styleb .ag-pdp .pinfo-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--ink);
}

/* Корневой product-info: убрать рамку/паддинги Aspro, мы рисуем свою сетку */
body.ag-styleb .ag-pdp-root.product-info {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body.ag-styleb .ag-offer-schema { display: none; }

/* qvariants как ссылки (a.qv) — снять подчёркивание/цвет ссылки */
body.ag-styleb .ag-pdp .qvariants .qv,
body.ag-styleb .ag-pdp .qvariants .qv:hover { text-decoration: none; color: inherit; }

/* ---- Кнопка корзины: рестайл нативного $arAddToBasketData['HTML'] ---- */
body.ag-styleb .ag-pdp .buy-actions { display: flex; gap: var(--s-10); align-items: stretch; margin-top: var(--s-14); flex-wrap: wrap; }

/* нативный счётчик количества (Aspro) → компактный stepper-вид */
body.ag-styleb .ag-pdp .buy-actions .counter_wrapp,
body.ag-styleb .ag-pdp .buy-actions .counter_block { flex: none; margin: 0; }
body.ag-styleb .ag-pdp .buy-actions .counter_block {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden; height: 48px;
}
body.ag-styleb .ag-pdp .buy-actions .counter_block .minus,
body.ag-styleb .ag-pdp .buy-actions .counter_block .plus {
  width: 40px; height: 100%; display: grid; place-items: center;
  cursor: pointer; color: var(--ink-2); font-size: 18px; background: var(--surface-2);
}
body.ag-styleb .ag-pdp .buy-actions .counter_block .minus:hover,
body.ag-styleb .ag-pdp .buy-actions .counter_block .plus:hover { color: var(--accent); }
body.ag-styleb .ag-pdp .buy-actions .counter_block input,
body.ag-styleb .ag-pdp .buy-actions .counter_block .input { width: 48px; height: 100%; border: 0; text-align: center; font-family: var(--mono); font-weight: 700; background: var(--surface); }

/* контейнер кнопки и сама кнопка → .btn--primary
   ВАЖНО: стилизуем ТОЛЬКО видимую .to-cart / a.btn.basket / .add2basket.
   Скрытые служебные кнопки Aspro (.in-cart, .subscribe и пр. с display:none)
   НЕ трогаем — иначе !important display сделает их видимыми (дубль кнопки). */
body.ag-styleb .ag-pdp .buy-actions .button_block { flex: 1; min-width: 180px; margin: 0; padding: 0; }
body.ag-styleb .ag-pdp .ag-buy-native .to-cart.btn,
body.ag-styleb .ag-pdp .ag-buy-native a.btn.basket,
body.ag-styleb .ag-pdp .ag-buy-native .btn.add2basket,
body.ag-styleb .ag-pdp .ag-buy-native .btn.subscribe {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 var(--s-20);
  background: var(--accent) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--r-md) !important;
  font-weight: 700; font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background .15s, transform .15s;
  text-transform: none;
}
/* служебные скрытые кнопки Aspro — оставить скрытыми */
body.ag-styleb .ag-pdp .ag-buy-native .in-cart,
body.ag-styleb .ag-pdp .ag-buy-native [style*="display:none"],
body.ag-styleb .ag-pdp .ag-buy-native [style*="display: none"] { display: none !important; }
body.ag-styleb .ag-pdp .ag-buy-native .to-cart.btn:hover,
body.ag-styleb .ag-pdp .ag-buy-native a.btn.basket:hover,
body.ag-styleb .ag-pdp .ag-buy-native .btn.add2basket:hover,
body.ag-styleb .ag-pdp .ag-buy-native .btn.subscribe:hover { background: var(--blue-deep, #1d4ed8) !important; transform: translateY(-1px); }
body.ag-styleb .ag-pdp .ag-buy-native .to-cart.btn svg,
body.ag-styleb .ag-pdp .ag-buy-native .btn.add2basket svg,
body.ag-styleb .ag-pdp .ag-buy-native .btn.subscribe svg { width: 20px; height: 20px; }
body.ag-styleb .ag-pdp .ag-buy-native .to-cart.btn .svg svg path { fill: #fff; }
/* подавить внутренние спиннеры/иконки-обёртки (но не текст) */
body.ag-styleb .ag-pdp .ag-buy-native .to-cart.btn > i.svg { margin-right: 2px; }

/* one-click-buy / купить в 1 клик */
body.ag-styleb .ag-pdp .ag-ocb { margin-top: var(--s-10); }
body.ag-styleb .ag-pdp .ag-ocb .one_click,
body.ag-styleb .ag-pdp .ag-ocb a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--accent); font-weight: 600; text-decoration: none;
}

/* ---- Блок «под заказ» (нет в наличии) ---- */
body.ag-styleb .ag-pdp .ag-preorder {
  margin-top: var(--s-14); padding: var(--s-16);
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  background: var(--surface-2);
}
body.ag-styleb .ag-pdp .ag-preorder-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
body.ag-styleb .ag-pdp .ag-preorder-title svg { width: 18px; height: 18px; color: var(--accent); }
body.ag-styleb .ag-pdp .ag-preorder-note { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
body.ag-styleb .ag-pdp .ag-buy-native--sub { margin-top: var(--s-12); }
body.ag-styleb .ag-pdp .ag-buy-native--sub .btn {
  background: var(--surface) !important; color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}
body.ag-styleb .ag-pdp .ag-buy-native--sub .btn:hover { background: var(--blue-soft) !important; transform: none; }

/* Описание — стандартный HTML из DETAIL_TEXT */
body.ag-styleb .ag-pdp .pdesc { color: var(--ink-2); font-size: 15px; line-height: 1.65; }
body.ag-styleb .ag-pdp .pdesc :is(p,ul,ol) { margin-bottom: var(--s-12); }
body.ag-styleb .ag-pdp .pdesc strong { color: var(--ink); }
body.ag-styleb .ag-pdp .pdesc ul { padding-left: 1.2em; list-style: disc; }

/* Контейнер нативных комментариев под Отзывами */
body.ag-styleb .ag-pdp .ag-comments { margin-top: var(--s-8); }
body.ag-styleb .ag-pdp .ag-comments .ordered-block__title { display: none; }

/* Sticky-CTA: своя кнопка-ссылка скроллит к нативной (или просто видна) */
body.ag-styleb .sticky-cta .ag-sticky-buy,
body.ag-styleb .sticky-cta .ag-sticky-pre { text-decoration: none; }

/* Скрыть случайные легаси-хвосты, если что-то прорвётся в зоне товара */
body.ag-styleb .ag-pdp .product-info-headnote,
body.ag-styleb .ag-pdp .two_columns.flexbox { display: none; }

/* Легаси SEO-блок карточки (init.d/art_gsm_product_seo.php: дублирующий FAQ + кросс-селл)
   в Style B заменён нативными секциями .pdp-section (FAQ/кросс-селл themed, crawlable) —
   скрываем визуально, чтобы не было дубля. */
body.ag-styleb .ag-pdp-seo { display: none !important; }

/* Адаптив: на мобильном stepper и кнопка в строку + защита от left-overflow */
@media (max-width: 768px) {
  body.ag-styleb .ag-pdp .buy-actions .button_block { min-width: 140px; }
  body.ag-styleb .ag-pdp,
  body.ag-styleb .ag-pdp .pdp,
  body.ag-styleb .ag-pdp .pinfo,
  body.ag-styleb .ag-pdp .gallery { min-width: 0; max-width: 100%; }
  body.ag-styleb .ag-pdp .pinfo > * { min-width: 0; }
  body.ag-styleb .ag-pdp .gallery-thumbs { overflow-x: auto; }
  body.ag-styleb .ag-pdp .specs,
  body.ag-styleb .ag-pdp .tags { overflow: visible; }
}

/* === 2026-06-05 FIX: убрать легаси-дубль чипов/вариантов/совместимости (agspec из product-specs-chips, прошлый редизайн) === */
body.ag-styleb .agspec__bar,
body.ag-styleb .agspec__models,
body.ag-styleb .agspec { display: none !important; }

/* === 2026-06-05 FIX: боковые серые полосы = фон самого .product-view--side-left (surface-2),
   показывался по краям (агент обнулил фон лишь дочернего .product-info). Гасим фон всей цепочки
   PDP-обёрток → в полях ровный фон страницы, без полос. === */
body.ag-styleb .product-view--side-left,
body.ag-styleb .product-view,
body.ag-styleb .product-container.catalog_detail,
body.ag-styleb .product-container.detail,
body.ag-styleb .section-content-wrapper,
body.ag-styleb .main-catalog-wrapper { background: transparent !important; }
body.ag-styleb .product-view--side-left::before,
body.ag-styleb .product-view--side-left::after { content: none !important; display: none !important; }

/* крошки НАД h1 на PDP (как в эталоне): .breadcrumbs в топике под h1 → поднимаем флекс-порядком */
body.ag-styleb .topic, body.ag-styleb .topic__inner { display: flex; flex-direction: column; }
body.ag-styleb .topic .breadcrumbs { order: -1; margin: 0 0 var(--s-10); }

/* ============================================================
   2026-06-06 КОРНЕВОЙ ФИКС боковых полос + дублей (по карте архитектуры).
   Полосы = фон тела (#f6f7f9+сетка), проступавший сквозь ПРОЗРАЧНУЮ остаточную
   правую колонку .left_block.product-side (244px, element_1.php:297) и флекс-гэп 32px.
   Убираем саму колонку и гэп → белая обёртка .wrapper_inner даёт ровные поля, полос нет.
   Колонка также содержала дубли (seo-text-block/ag-faq/props-template) — уходят вместе с ней.
   ============================================================ */
body.ag-styleb .main-catalog-wrapper > .left_block.product-side,
body.ag-styleb .product-container .left_block.product-side,
body.ag-styleb .left_block.sticky-sidebar-custom.product-side { display: none !important; }
body.ag-styleb .main-catalog-wrapper.details { gap: 0 !important; }
/* контентная колонка PDP — на всю ширину обёртки (без остатка под скрытую колонку) */
body.ag-styleb .main-catalog-wrapper.details > .section-content-wrapper { width: 100% !important; flex: 1 1 100% !important; }

/* ============================================================
   2026-06-06 ИСТИННЫЙ ФИКС боковых полос: это кнопки −/+ нативного степпера
   количества (.counter_block.md .minus/.plus, buy-box), которые растягивались
   на всю высоту страницы и разъезжались к краям (серый #eef1f5). Сжимаем степпер
   в компактный контрол 48px. (elementsFromPoint подтвердил элемент.)
   ============================================================ */
body.ag-styleb .ag-pdp .counter_wrapp { display: inline-flex !important; align-items: center; gap: var(--s-10); width: auto !important; height: auto !important; flex-wrap: nowrap; }
body.ag-styleb .ag-pdp .counter_block.md,
body.ag-styleb .ag-pdp .buybox .counter_block {
  display: inline-flex !important; align-items: center; flex: 0 0 auto;
  width: auto !important; max-width: 160px !important; height: 48px !important;
  border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); padding: 0 !important;
}
body.ag-styleb .ag-pdp .counter_block .minus,
body.ag-styleb .ag-pdp .counter_block .plus {
  position: static !important; float: none !important;
  width: 42px !important; height: 48px !important; min-height: 0 !important; max-height: 48px !important;
  display: grid !important; place-items: center; background: var(--surface-2) !important; color: var(--ink-2); cursor: pointer; margin: 0 !important;
}
body.ag-styleb .ag-pdp .counter_block .text,
body.ag-styleb .ag-pdp .counter_block input {
  width: 48px !important; height: 48px !important; text-align: center; border: 0 !important; background: var(--surface) !important;
  font-family: var(--mono); font-weight: 700; color: var(--ink); padding: 0 !important;
}

/* ---- Степпер: +/− глифами, не легаси-SVG (аудит 2026-06-12, inter-006) ---- */
body.ag-styleb .ag-pdp .buy-actions .counter_block .minus i,
body.ag-styleb .ag-pdp .buy-actions .counter_block .plus i { display: none !important; }
body.ag-styleb .ag-pdp .buy-actions .counter_block .minus::before { content: '−'; }
body.ag-styleb .ag-pdp .buy-actions .counter_block .plus::before { content: '+'; }
body.ag-styleb .ag-pdp .buy-actions .counter_block .minus::before,
body.ag-styleb .ag-pdp .buy-actions .counter_block .plus::before { font-size: 20px; font-weight: 600; line-height: 1; }

/* мёртвый легаси-блок отзывов (JS не подключён) — скрыт до подключения реальных отзывов (аудит 2026-06-12, inter-005) */
body.ag-styleb .ag-comments { display: none !important; }

/* ---- полировка-батч 4 (2026-06-13) ---- */
/* search404_06: заглушка для карточек без фото */
body.ag-styleb .prod-noimg { display: grid; place-items: center; width: 100%; height: 100%; min-height: 90px; background: var(--surface-2); border-radius: var(--r-sm); }
body.ag-styleb .prod-noimg svg { width: 34px; height: 34px; color: var(--ink-3); opacity: .5; }
/* flow-13: крошки PDP на мобиле — в одну прокручиваемую строку, не 6 строк */
@media (max-width: 768px) {
  body.ag-styleb .topic .breadcrumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12px; gap: 4px; scrollbar-width: none; }
  body.ag-styleb .topic .breadcrumbs::-webkit-scrollbar { display: none; }
  body.ag-styleb .topic .breadcrumbs > * { flex: none; }
}

/* pdp-10: имя товара дублировалось (page-top H1 + .pinfo-title в буйбоксе) → дубль в буйбоксе скрыт, H1 остаётся (2026-06-13) */
body.ag-styleb .ag-pdp .pinfo-title { display: none; }

/* =====================================================================
   КАРТОЧКА ТОВАРА — заголовок в правой колонке (Артак 01.09.2026, вариант «B»)
   Было: H1 отдельным этажом НАД крошками (на остальных страницах порядок обратный),
   контент начинался на 346px, цена и кнопка «В корзину» оставались ниже сгиба.
   Стало: сверху только крошки; справа от фото — H1, цена с кнопкой, затем выбор
   варианта и характеристики. Перенос <h1> в .pinfo делает app.js.
   ===================================================================== */
/* верхний этаж без заголовка — убираем его отступы, крошки поднимаются под шапку */
body.ag-styleb.ag-pdp-title-moved .page-top .topic{padding-top:var(--s-10);}
body.ag-styleb.ag-pdp-title-moved .topic__heading:empty,
body.ag-styleb.ag-pdp-title-moved .topic__heading:not(:has(h1)){display:none;}
body.ag-styleb.ag-pdp-title-moved .breadcrumbs{margin:0 0 var(--s-8);}
body.ag-styleb.ag-pdp-title-moved main.ag-pdp{padding-top:var(--s-4);}

/* правая колонка: порядок блоков как в макете — бейджи, артикул, название,
   цена с кнопкой, выбор варианта, характеристики, совместимость */
body.ag-styleb main.ag-pdp .pinfo{display:flex;flex-direction:column;}
body.ag-styleb main.ag-pdp .pinfo > .tags{order:1;}
body.ag-styleb main.ag-pdp .pinfo > .meta{order:2;}
body.ag-styleb main.ag-pdp .pinfo > h1.ag-pdp-h1{order:3;}
body.ag-styleb main.ag-pdp .pinfo > .buybox{order:4;}
body.ag-styleb main.ag-pdp .pinfo > .qvariants{order:5;}
body.ag-styleb main.ag-pdp .pinfo > .specs{order:6;}
body.ag-styleb main.ag-pdp .pinfo > .compat{order:7;}

/* сам заголовок в колонке */
body.ag-styleb main.ag-pdp .pinfo > h1.ag-pdp-h1{
  margin:var(--s-12) 0 0;padding:0;
  font:800 23px/1.22 Manrope,-apple-system,sans-serif;letter-spacing:-.02em;color:var(--ink-1);
}
@media (max-width:1100px){
  body.ag-styleb main.ag-pdp .pinfo > h1.ag-pdp-h1{font-size:21px;}
}
@media (max-width:760px){
  body.ag-styleb main.ag-pdp .pinfo > h1.ag-pdp-h1{font-size:20px;margin-top:var(--s-10);}
}

/* после переноса заголовка бейдж наличия оказался в одном экране дважды: в верхнем ряду
   (интерактивный, data-pid, открывает попап складов) и в .av-line над кнопкой. Второй убираем. */
body.ag-styleb.ag-pdp-title-moved main.ag-pdp .buybox .av-line{display:none;}

/* мобильный: крошки карточки занимали четыре строки (полное название товара в конце
   дублирует заголовок). Последний уровень прячем, остальное — одной прокручиваемой строкой. */
@media (max-width:760px){
  body.ag-styleb.ag-pdp-title-moved .breadcrumbs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:12px;
  }
  body.ag-styleb.ag-pdp-title-moved .breadcrumbs::-webkit-scrollbar{display:none;}
  body.ag-styleb.ag-pdp-title-moved .breadcrumbs > *{flex:none;}
  body.ag-styleb.ag-pdp-title-moved .breadcrumbs > *:last-child{display:none;}
}

/* Пропорции карточки: фото занимало 768px из 1248 — слишком много для запчасти,
   а колонка с названием, ценой и вариантами ужималась до 440px. Отдаём фото 600,
   остальное — правой колонке (Артак 01.09.2026). */
body.ag-styleb .ag-pdp .pdp{grid-template-columns:minmax(0,600px) minmax(0,1fr);}
/* нижнюю границу обязательно задаём: без неё правило перебивает мобильное «одна колонка»
   из product.css (специфичность выше) и карточка на телефоне ломается на две узкие колонки */
@media (min-width:769px) and (max-width:1200px){
  body.ag-styleb .ag-pdp .pdp{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:var(--s-28);}
}
@media (max-width:768px){
  body.ag-styleb .ag-pdp .pdp{grid-template-columns:1fr;}
}

/* Пустоты вокруг крошек (Артак 01.09.2026): обёртка крошек внутри .page-top несёт
   padding 15px/40px — это давало 25px пустоты над крошками и 52px под ними.
   Заголовка на этом этаже больше нет, поэтому воздух не нужен. */
body.ag-styleb.ag-pdp-title-moved .page-top .topic{padding-top:0;}
body.ag-styleb.ag-pdp-title-moved .page-top > div:has(> .breadcrumbs){padding-top:var(--s-4);padding-bottom:var(--s-10);}
body.ag-styleb.ag-pdp-title-moved .breadcrumbs{margin:0 0 var(--s-4);}
body.ag-styleb.ag-pdp-title-moved main.ag-pdp{padding-top:0;}
/* легаси-секция крошек Aspro держит min-height:56px — без заголовка это лишние 15px */
body.ag-styleb.ag-pdp-title-moved .page-top{min-height:0;}