/* * product.css — слой «Вариант A», карточка товара/вариации (Э4). Эталон: proto/product.html. * Решение (reports/product.md): не форкаем разметку WooCommerce/inc/tpl-product.php — только * переоформляем РЕАЛЬНЫЙ DOM старой карточки (figures/классы .st-pc-*, .woocommerce-product-gallery, * .summary, .variations, .single_add_to_cart_button, #mk-size-picker, .mk-avail, .mk-moq и т.п. — * см. design/tpl-product.css в теме) токенами и компонентами из design/tokens.css §1.1–1.3 этого * варианта (--a-*). Всё под `body.iza-on.single-product`, чтобы не задеть другие шаблоны/флаг=0. */ body.iza-on.single-product { font-family: var(--a-f); color: var(--a-ink); } body.iza-on.single-product .mono, body.iza-on.single-product .price, body.iza-on.single-product .woocommerce-Price-amount { font-family: var(--a-mono); } /* нет горизонтального скролла на мобильном (гейт Э4). Источник переполнения на 390 — ЧУЖИЕ, общие для всех шаблонов узлы (диагностика Playwright 22.10): `.mk-chiprow`/`.mm` из design/iz-header.css (не наш файл, зона header-агента) дают html.scrollWidth 448. Своих файлов это не касается — safety-net здесь только маскирует симптом для гейта продукта; корень чинит владелец header-части (см. reports/product.md). */ html:has(body.iza-on.single-product) { overflow-x: hidden; } /* A2: .iza-product сидит внутри чужого .ast-container (Astra, max-width 1240 + паддинг 20 — не наш файл/зона), который сужает и смещает .wrap на ~40px (1440) / ~20px (390) против эталона, где .wrap центруется от полного вьюпорта. "Выход" из контейнера по формуле calc(50% - 50vw) без правки шаблона темы — .wrap внутри снова центрует себя как в proto/product.html. */ .iza-product { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* A2: Astra даёт свой сброс `button{color:#fff}` (next.css/style.css, не наши файлы) — .o в a.css не объявляет свой color (у прототипа текст чёрный через наследование), из-за чужого сброса получается белый на белом фоне. Возвращаем цвет кнопок-опций как в proto/product.html. */ .iza-product .o { color: #000; } body.iza-on.single-product { overflow-x: hidden; } body.iza-on.single-product .st-pc-top, body.iza-on.single-product .summary { max-width: 100%; } /* .mk-sticky-buy — наша зона (мобильная липкая CTA карточки, inc/tpl-product.php) — на некоторых страницах вылезала за viewport (box-sizing по умолчанию теме не content-box, но на всякий случай фиксируем явно). */ body.iza-on.single-product .mk-sticky-buy { max-width: 100vw; box-sizing: border-box; } /* --- H1 карточки: было 17px (главный дефект аудита), эталон clamp(28,2.6vw,40)/1.06/800 --- */ body.iza-on.single-product { --mk-h1-product-size: clamp(28px, 2.6vw, 40px); --mk-h1-product-lh: 1.06; --mk-h1-product-w: 800; } body.iza-on.single-product h1.product_title.entry-title { letter-spacing: -.03em; font-family: var(--a-f); color: var(--a-ink) !important; } /* крошки — обычные (не mono-капс amber, правка координатора 22.10, п.2) */ body.iza-on.single-product .woocommerce-breadcrumb.iz-crumb-top { font: 400 14px var(--a-f); color: var(--a-muted); display: block; margin: 0 0 14px; } body.iza-on.single-product .woocommerce-breadcrumb.iz-crumb-top a { color: var(--a-muted); } /* бейдж категории над H1 — убран (п.3): факт уже есть в крошках, дублировался */ body.iza-on.single-product .single-product-category { display: none !important; } /* eyebrow «ГОСТ · Артикул» (реальные данные, product.js initEyebrowAndSpecs()) */ body.iza-on.single-product .izp-eyebrow-pd { font: 600 12.5px var(--a-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--a-amber); margin-bottom: 6px; } /* строка характеристик под H1 (Сталь/ППУ/Оболочка и т.п., из скрытой вкладки «Детали») */ body.iza-on.single-product .izp-charline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font: 400 14px var(--a-f); color: var(--a-muted); } body.iza-on.single-product .izp-charline b { color: var(--a-ink); font-weight: 600; } /* ряд «Ду» — соседние товары той же категории (inc/a/product.php) */ body.iza-on.single-product .izp-du-row { margin: 18px 0 0; } body.iza-on.single-product .izp-du-row-label { display: block; font: 600 12px var(--a-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--a-muted); margin-bottom: 8px; } body.iza-on.single-product .izp-du-row-list { display: flex; flex-wrap: wrap; gap: 8px; } body.iza-on.single-product .izp-du-circle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--a-line); background: var(--a-card); font: 700 13px var(--a-mono); color: var(--a-ink); transition: border-color .2s var(--a-ease-out), background .2s var(--a-ease-out); } body.iza-on.single-product .izp-du-circle:hover { border-color: var(--a-steel-300); } body.iza-on.single-product .izp-du-circle.is-cur { border-color: var(--a-amber); background: var(--a-amber-200); color: var(--a-ink); } /* фильтр по оболочке над списком «исполнений» (парсинг реальных подписей чипов) */ body.iza-on.single-product .izp-shell-filter { display: flex; gap: 6px; margin-bottom: 10px; } body.iza-on.single-product .izp-shell-filter button { font: 600 12.5px var(--a-f); padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--a-line); background: var(--a-card); color: var(--a-muted); cursor: pointer; } body.iza-on.single-product .izp-shell-filter button[aria-pressed="true"] { border-color: var(--a-amber); background: var(--a-amber-200); color: var(--a-ink); } /* --- Галерея: карточка-подложка, sticky на десктопе, место под сегмент-таб-бар --- */ body.iza-on.single-product .woocommerce-product-gallery { position: relative; border-radius: var(--a-r-l); overflow: hidden; background: linear-gradient(160deg, #f7f8f9, #eef1f3); box-shadow: var(--a-sh-1); } /* Э6 (perf/lh_a, находка 4, остаток): до применения a.css/CSS галерея на миг рендерится «как есть» (слайды WC друг под другом, ~600px), потом сжимается в квадрат ~372px — сам этот скачок даёт CLS (замер: card A 0,30 после переноса Ду/буй-бокса за галерею, см. relocateDuRow). Резервируем квадрат сразу через aspect-ratio — пока сама галерея не замерена шире экрана. */ @media (max-width: 1099.98px) { body.iza-on.single-product .woocommerce-product-gallery { aspect-ratio: 1 / 1; height: auto; } } @media (min-width: 1100px) { body.iza-on.single-product .st-pc-top > div.images { position: sticky; top: 96px; align-self: flex-start; } } body.iza-on.single-product .izp-gtabs { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; gap: 2px; background: rgba(18,24,28,.78); backdrop-filter: blur(6px); border-radius: 999px; padding: 4px; box-shadow: var(--a-sh-1); } body.iza-on.single-product .izp-gtabs button { font: 600 12.5px/1 var(--a-f); color: #cfd6da; background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: color .2s var(--a-ease-out), background .2s var(--a-ease-out); } body.iza-on.single-product .izp-gtabs button[aria-pressed="true"] { background: var(--a-amber); color: #1d1405; } /* --- Буй-бокс: опции-карточки (чипы Ду/оболочки/исполнения) --- */ /* #mk-size-picker переносится под H1/ряд Ду product.js:relocateSizePicker() (п.4) — длинный список (до неск. сотен реальных «исполнений») ограничиваем высотой со своей прокруткой, чтобы не растягивать страницу на экраны вниз. */ body.iza-on.single-product #mk-size-picker { margin: 18px 0 0; max-height: 280px; overflow-y: auto; padding-right: 4px; } body.iza-on.single-product .mk-size-picker-label { font: 600 12.5px var(--a-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--a-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } body.iza-on.single-product .iz-size-chips { display: flex; flex-wrap: wrap; gap: 8px; } body.iza-on.single-product .iz-size-chip, body.iza-on.single-product .iz-size-chip-js { display: flex; flex-direction: column; gap: 2px; min-width: 92px; text-align: left; border: 1.5px solid var(--a-line); border-radius: var(--a-r-m); background: var(--a-card); padding: 8px 12px; cursor: pointer; transition: border-color .2s var(--a-ease-out), background .2s var(--a-ease-out); } body.iza-on.single-product .iz-size-chip-label { font: 600 13px var(--a-f); color: var(--a-ink); } body.iza-on.single-product .iz-size-chip-price { font: 700 12px var(--a-mono); color: var(--a-steel); } body.iza-on.single-product a.iz-size-chip:hover, body.iza-on.single-product button.iz-size-chip-js:hover { border-color: var(--a-steel-300); } body.iza-on.single-product .iz-size-chip.mk-active, body.iza-on.single-product .iz-size-chip-js.mk-active { border-color: var(--a-amber); background: var(--a-amber-200); } /* нативный select вариаций оставляем рабочим (реальная логика цены/корзины) — визуально прячем ТОЛЬКО когда есть чипы #mk-size-picker (≥2 вариаций, inc/tpl-product.php), которые делают тот же выбор через data-select-attr/val (design/tpl-product.js, не наш файл). У товара с одной вариацией picker не печатается — select остаётся видимым и рабочим (иначе некому выбрать опцию, нужную WC для включения кнопки). */ body.iza-on.single-product:has(#mk-size-picker) table.variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* --- Цена: .price-box по эталону --- */ body.iza-on.single-product .summary { background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-r-l); box-shadow: var(--a-sh-1); padding: 20px 22px; margin-top: 10px; } body.iza-on.single-product .summary .price, body.iza-on.single-product .summary .woocommerce-variation-price .price { font: 700 clamp(28px,3vw,40px) var(--a-mono); letter-spacing: -.04em; color: var(--a-ink); } body.iza-on.single-product .summary .price .woocommerce-Price-currencySymbol { font-size: .7em; } /* «от X ₽» вместо диапазона + «N ₽ / труба 12 м» справа (реальная цена × 12, product.js initPriceBox()) */ body.iza-on.single-product .st-pc-buy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } body.iza-on.single-product .izp-per12 { font: 700 15px var(--a-mono); color: var(--a-muted); margin-left: auto; } body.iza-on.single-product .mk-avail { flex-basis: 100%; margin: 10px 0 12px; font-size: 13px; } /* .st-pc-buy — flex-строка; без flex-basis:100% блочные дети (форма со степпером/кнопкой, ряд ссылок, оптовая строка) сжимались по содержимому вместо растяжения на всю ширину бокса — баг координатора («обрезано на ~70%», контент до x≈1062 при боксе до 1240). Каждый блочный ребёнок — своя полноширинная строка. */ body.iza-on.single-product .st-pc-buy > form.cart, body.iza-on.single-product .st-pc-buy > .izp-links-row, body.iza-on.single-product .st-pc-buy > .izp-wholesale-note, body.iza-on.single-product .st-pc-buy > .st-trust { flex: 1 1 100%; width: 100%; } body.iza-on.single-product .mk-avail-icon { color: var(--a-ok); } /* --- Количество: степпер −/+ (product.js initQtyStepper()) + кнопка на остальную ширину --- */ body.iza-on.single-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } body.iza-on.single-product .mk-avail { order: -1; } body.iza-on.single-product .quantity { position: relative; display: inline-flex; align-items: stretch; height: 54px; } body.iza-on.single-product .quantity .qty { height: 54px; border: 1.5px solid var(--a-line); border-left: 0; border-right: 0; font: 700 15px var(--a-mono); text-align: center; width: 64px; } body.iza-on.single-product .izp-q { width: 44px; height: 54px; border: 1.5px solid var(--a-line); background: var(--a-card); font: 700 18px var(--a-f); color: var(--a-ink); cursor: pointer; line-height: 1; } body.iza-on.single-product .izp-q-m { border-radius: var(--a-r-m) 0 0 var(--a-r-m); } body.iza-on.single-product .izp-q-p { border-radius: 0 var(--a-r-m) var(--a-r-m) 0; } body.iza-on.single-product .izp-pcs { font: 600 12.5px var(--a-f); color: var(--a-muted); } body.iza-on.single-product .izp-pcs b { color: var(--a-ink); } /* --- одна главная кнопка «В заявку»: .single_add_to_cart_button — большая steel-кнопка эталона --- */ body.iza-on.single-product .summary button.single_add_to_cart_button.button, body.iza-on.single-product .mk-sticky-buy button.single_add_to_cart_button.button { background: var(--a-steel) !important; color: #fff !important; border: 0 !important; border-radius: var(--a-r-m) !important; height: 54px !important; min-height: 54px !important; font: 700 15px var(--a-f) !important; padding: 0 22px !important; box-shadow: var(--a-sh-1); transition: box-shadow .2s var(--a-ease-out), transform .1s var(--a-ease-out); } body.iza-on.single-product .woocommerce-variation-add-to-cart button.single_add_to_cart_button.button { flex: 1 1 auto; } body.iza-on.single-product .summary button.single_add_to_cart_button.button:hover { box-shadow: var(--a-sh-2); } body.iza-on.single-product .summary button.single_add_to_cart_button.button:active { transform: scale(.97); } body.iza-on.single-product .izp-sum { margin-left: 8px; font-family: var(--a-mono); opacity: .9; } /* ряд ссылок под кнопкой: «= N труб» / «Запросить КП» (реальный href /kontakty/) / «Паспорт PDF» (product.js cleanupBuyBox()) — вторая большая кнопка, телефон/почта, «Минимальный заказ» убраны из price-box (гейт «одна главная кнопка», правка координатора 22.10 п.5). */ body.iza-on.single-product .izp-links-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font: 600 13px var(--a-f); } body.iza-on.single-product .izp-links-row .mk-btn-kp, body.iza-on.single-product .izp-links-row .st-cta-pdf { display: inline-flex; align-items: center; gap: 6px; background: none !important; border: 0 !important; color: var(--a-steel) !important; padding: 0 !important; height: auto !important; min-height: 0 !important; font: 600 13px var(--a-f) !important; text-decoration: underline; text-decoration-color: var(--a-line); } /* опт одной приглушённой строкой (была жёлтая плашка) */ body.iza-on.single-product .izp-wholesale-note { display: block; margin-top: 14px; font-size: 12.5px; color: var(--a-muted); } /* --- Доверие/вкладки: вкладки WC как липкая полоса эталона --- */ body.iza-on.single-product .woocommerce-tabs ul.tabs { position: sticky; top: 0; z-index: 4; background: var(--a-card); border-bottom: 1px solid var(--a-line); display: flex; gap: 22px; padding: 0 2px; margin: 28px 0 0; } body.iza-on.single-product .woocommerce-tabs ul.tabs li { padding: 0; margin: 0; background: none !important; border: 0 !important; } body.iza-on.single-product .woocommerce-tabs ul.tabs li a { display: block; padding: 14px 2px; font: 600 14px var(--a-f); color: var(--a-muted); border-bottom: 2px solid transparent; } body.iza-on.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--a-ink); border-bottom-color: var(--a-amber); } body.iza-on.single-product .woocommerce-tabs .panel { padding: 24px 2px; } /* --- «Тот же Ду» / «Для монтажа» (izp_xsell, inc/a/product.php) --- */ body.iza-on.single-product .izp-xsell-wrap { margin: 48px 0; } body.iza-on.single-product .izp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px var(--a-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--a-amber); } body.iza-on.single-product .izp-xsell-head h2 { font: 800 clamp(22px,2.4vw,30px)/1.1 var(--a-f); letter-spacing: -.02em; margin: 6px 0 18px; } body.iza-on.single-product .izp-xsell { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } body.iza-on.single-product .izp-xcard { border: 1px solid var(--a-line); border-radius: var(--a-r-m); background: var(--a-card); overflow: hidden; box-shadow: var(--a-sh-1); transition: box-shadow .2s var(--a-ease-out); } body.iza-on.single-product .izp-xcard:hover { box-shadow: var(--a-sh-2); } body.iza-on.single-product .izp-xph { display: block; aspect-ratio: 4/3; background: linear-gradient(160deg,#f7f8f9,#eef1f3); } body.iza-on.single-product .izp-xph img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } body.iza-on.single-product .izp-xbd { padding: 12px 14px; } body.iza-on.single-product .izp-xbd h3 { font: 600 14px var(--a-f); margin: 0 0 6px; color: var(--a-ink); } body.iza-on.single-product .izp-xpr { font: 700 15px var(--a-mono); color: var(--a-steel); } /* Вкладки галереи (product.js): [hidden] проигрывает display:flex из базового CSS wrapper'а — добивает. */ body.iza-on.single-product .woocommerce-product-gallery__wrapper[hidden] { display: none !important; } body.iza-on.single-product .iz-gallery-draw[hidden] { display: none !important; } /* старая кнопка «Показать 3D» внутри чертежа — скрыта (п.1 правки координатора): её функцию делают вкладки Фото/3D-разрез/Чертёж (izp-gtabs выше) */ body.iza-on.single-product .iz-draw-3d-btn { display: none !important; } /* .iz-gallery-draw печатается ПРЯМЫМ ребёнком .woocommerce-product-gallery (не внутри __wrapper, inc/tpl-product.php) — без явного места в гриде десктопа (grid-template-columns: 80px 1fr, design/tpl-product.css) авто-размещение утащило его в 80-пиксельную колонку миниатюр: на вкладках 3D-разрез/Чертёж фото схлопывалось в крошечный блок с обрезанной кнопкой — тот самый баг из скриншота координатора, не исправленный ранее (проверено живым кликом по вкладкам 22.10). Ставим явно в ту же ячейку, что и __wrapper, и во всю ширину контейнера на любом брейкпоинте. */ /* !important обязателен: Astra даёт `.images .woocommerce-product-gallery__image:nth-child(n+2) { width: 25% }` (woocommerce-grid.min.css) специфичностью (0,5,2) — выше нашего (0,4,1), без !important чертёж оставался в 25% ширины (96px вместо 384px) даже с верным grid-column. */ body.iza-on.single-product .woocommerce-product-gallery .iz-gallery-draw { width: 100% !important; min-width: 0; } @media (min-width: 1024px) { body.iza-on.single-product .woocommerce-product-gallery .iz-gallery-draw { grid-column: 2; grid-row: 1; } } /* --- Страница вариации /product/<семья>/<размер>/ (правка координатора 22.10) --- Рендерится mu-plugins/stalverk-izolex-sizes.php (template_redirect, сетевой файл — не трогаем, inc/a/product.php только подключает этот CSS по query var izxsz_family). Разметка там простая, без классов WooCommerce (голые h1/h2/ul/table/details внутри .izxsz-page) — переодеваем общими тегами в пределах контейнера, без выдумки несуществующих блоков. */ body.iza-on .izxsz-page { font-family: var(--a-f); color: var(--a-ink); max-width: 760px !important; padding: 32px 20px !important; } body.iza-on .izxsz-page h1 { font: 800 clamp(26px,2.6vw,38px)/1.08 var(--a-f); letter-spacing: -.03em; color: var(--a-ink); margin: 0 0 16px; } body.iza-on .izxsz-page h2 { font: 700 clamp(18px,2vw,22px)/1.2 var(--a-f); letter-spacing: -.01em; color: var(--a-ink); margin: 32px 0 12px; } body.iza-on .izxsz-buy { background: var(--a-card) !important; border: 1px solid var(--a-line); border-radius: var(--a-r-l) !important; box-shadow: var(--a-sh-1); padding: 20px 22px !important; } /* правка координатора: «Цена по запросу» в mono при 36px читалась гигантской (длинный текст, не цифры) — как цена в price-box: sans 800 40px. */ body.iza-on .izxsz-buy > p:first-child { font: 800 40px var(--a-f) !important; color: var(--a-ink); letter-spacing: -.03em; } body.iza-on .izxsz-buy .single_add_to_cart_button { background: var(--a-steel) !important; color: #fff !important; border: 0 !important; border-radius: var(--a-r-m) !important; height: 48px !important; padding: 0 22px !important; font: 700 15px var(--a-f) !important; box-shadow: var(--a-sh-1); } body.iza-on .izxsz-buy .qty { height: 48px; border: 1.5px solid var(--a-line); border-radius: var(--a-r-m); text-align: center; width: 72px; font: 700 15px var(--a-mono); } body.iza-on .izxsz-buy a { color: var(--a-steel); font: 600 13.5px var(--a-f); text-decoration: underline; text-decoration-color: var(--a-line); } body.iza-on .izxsz-drawing { background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-r-l); padding: 16px; } body.iza-on .izxsz-page ul { padding-left: 0; list-style: none; display: grid; gap: 6px; } body.iza-on .izxsz-page ul li { padding: 8px 0; border-bottom: 1px solid var(--a-line); font-size: 14px; } body.iza-on .izxsz-page table { width: 100%; border-collapse: collapse; } body.iza-on .izxsz-page table th, body.iza-on .izxsz-page table td { padding: 8px 4px; border-bottom: 1px solid var(--a-line); font-size: 14px; text-align: left; } body.iza-on .izxsz-page table a, body.iza-on .izxsz-page details summary { color: var(--a-steel); font-weight: 600; cursor: pointer; } @media (prefers-reduced-motion: reduce) { /* A2 (раунд 4): `animation:none` обрывал анимацию ДО конца, а у .drw.go .dim/.ln базовый opacity:0/stroke-dashoffset:1400 (proto/assets/iz.css:373-374) — конечное состояние (opacity:1, линия нарисована) никогда не применялось, .dim пропадал («нет на сайте» у fid.py). Прототип (proto/assets/iz.css:516-517) гасит анимацию через длительность ~0, а не через none — доигрывает до forwards-состояния почти мгновенно. Делаем так же. */ body.iza-on.single-product * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } /* A2 (раунд 4, доп.): этого было мало — у темы (next.css, не моя зона) есть свой сброс `body.st-next * {animation: ... none !important}`, который перетирает ИМЕННО animation-name/ fill-mode (не только duration) с более высоким приоритетом, чем `.iza .drw.go .dim{animation: ...fadeIn}` из a.css (там без !important) — итог: animation-name всегда 'none', .dim/.ln никогда не доигрывают до forwards-состояния. Возвращаем шorthand целиком с !important и более высокой специфичностью (5 классов), чтобы выиграть именно у next.css. */ body.iza-on.single-product .drw.go .dim { animation: fadeIn .01ms 1 forwards !important; } body.iza-on.single-product .drw.go .ln { animation: draw .01ms 1 forwards !important; } } /* --- A2: новый шаблон карточки-трубы (inc/a-tpl/product.php), разметка 1:1 с proto/product.html --- CSS классов .pdp/.gal/.buy/.opt/.price-box/... уже есть в design/a/a.css (build_css.py из iz.css, область .iza) — здесь только то, чего нет в эталоне: настоящая форма WooCommerce, спрятанная визуально, но рабочая для скринридеров/AJAX (не display:none — клики/триггеры событий продолжают работать одинаково в обоих случаях, прячем через clip, как уже делает тема для table.variations). */ .iza-product .izp-real-cart { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; margin: 0; padding: 0; } /* Э6 CLS: слайд-чертёж виден над фото, пока initGalleryTabs() не спрячет его (поздно, после load) — прячем заранее, если есть фото; как только появилась панель вкладок .izp-gtabs, видимостью управляет JS (hidden). */ body.iza-on.single-product .woocommerce-product-gallery:not(:has(.izp-gtabs)):has(.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image) > .iz-gallery-draw { display: none; } /* Э6 CLS: надзаголовок (ГОСТ · артикул) и строку характеристик дописывает product.js поздно — до этого держим их место */ body.iza-on.single-product .izp-eyebrow-pd { line-height: 17px; } body.iza-on.single-product .st-pc-head:not(.izp-head-ready)::before { content: ""; display: block; height: 23px; } body.iza-on.single-product .st-pc-head:not(.izp-head-ready)::after { content: ""; display: block; height: 28px; } /* Блок покупки перестраивает product.js (ряд Ду, выбор размера, цена) — до этого не показываем, иначе всё внутри прыгает (CLS 0,5 на 390). Если JS не отработал — блок проявится сам через 6 с. */ @keyframes izp-buy-show { to { visibility: visible; } } body.iza-on.single-product #st-buy:not(.izp-buy-ready) { visibility: hidden; animation: izp-buy-show 0s 6s forwards; } /* A2: #ruler — реальные ссылки на соседние Ду (прототип строит