/* МебелеФ v3 — pages/product.css. Основа: прототип D6 (assets/styles.css из mebelef-prototype.zip), дополнения — ниже метки «mebelef-v3». */
/* Product page */
.pdp{display:grid;gap:var(--space-6)}
@media(min-width:1024px){.pdp{grid-template-columns:minmax(0,1fr) 400px;gap:var(--space-8);align-items:start}}
.gallery{display:grid;gap:var(--space-3)}
@media(min-width:768px){.gallery{grid-template-columns:92px minmax(0,1fr)}}
.gallery__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:var(--space-2);overflow-x:auto}
@media(min-width:768px){.gallery__thumbs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}}
.gallery__thumb{padding:0;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);aspect-ratio:1;cursor:pointer}
.gallery__thumb[aria-current="true"]{border-color:var(--ink)}
.gallery__main{position:relative}
.gallery__main .ph{aspect-ratio:4/3}
.buybox{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-xl)}
@media(min-width:1024px){.buybox{position:sticky;top:104px;padding:var(--space-6)}}
.configurator{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--surface);border-radius:var(--radius-lg)}
.conf__row{display:flex;flex-direction:column;gap:var(--space-2)}
.conf__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}
.conf__label{font-size:14px;font-weight:600}
.conf__value{font-size:13px;color:var(--ink-muted)}
.segmented{display:flex;gap:var(--space-2);flex-wrap:wrap}
.seg{height:40px;padding:0 var(--space-3);border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--bg);font-size:14px;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;line-height:1.1}
.seg[aria-pressed="true"]{border-color:var(--ink);font-weight:600}
.seg small{font-size:11px;color:var(--ink-muted)}
.conf__total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:var(--space-3)}
.buybox__cta{display:flex;gap:var(--space-3);align-items:center}
.uspline{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:var(--space-4)}
.uspline div{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35}
.uspline .icon{width:20px;height:20px;color:var(--success)}
.tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--line);overflow-x:auto}
.tab{border:none;background:none;padding:0 0 var(--space-3);font-size:16px;color:var(--ink-muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.specs{display:grid;gap:0 var(--space-8)}
@media(min-width:768px){.specs--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec{display:flex;justify-content:space-between;gap:var(--space-4);align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line)}
.spec dt{font-size:14px;color:var(--ink-muted)}
.spec dd{margin:0;font-size:14px;font-weight:600;text-align:right}
/* ==== mebelef-v3: страница товара ==== */
.gallery__main a{display:block}
.gallery__main img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--bg);border-radius:var(--radius-lg)}
.gallery__main .ph{aspect-ratio:4/3}
.gallery__thumb{overflow:hidden}
.gallery__thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
@media(min-width:768px){.gallery__thumbs{max-height:560px;overflow-y:auto;align-content:start}}
@media(max-width:767px){.gallery__thumbs{order:2}}
.price--lg .badge{align-self:center}
a.tab{color:var(--ink-muted);display:inline-block}
a.tab[aria-selected="true"]{color:var(--ink)}
.tabs{position:sticky;top:64px;z-index:20;background:var(--bg);padding-top:var(--space-3)}
@media(min-width:1024px){.tabs{top:84px}}
/* Форма add-to-cart WooCommerce внутри buybox */
/* Форма add_to_cart живёт в двух местах: в панели покупки (товар без
   опций) и в модалке конфигуратора (товар с опциями) — оформление общее. */
:is(.buybox,.modal--wide) form.cart{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
:is(.buybox,.modal--wide) form.cart>.configurator{flex:1 1 100%}
:is(.buybox,.modal--wide) .single_add_to_cart_button{flex:1;height:48px;padding:0 var(--space-5);border:0;border-radius:var(--radius-md);background:var(--cta);color:var(--on-cta);font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
:is(.buybox,.modal--wide) .single_add_to_cart_button:hover{background:var(--cta-hover)}
:is(.buybox,.modal--wide) .single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed}
:is(.buybox,.modal--wide) p.stock{display:none}
:is(.buybox,.modal--wide) .variations{width:100%;border-collapse:collapse}
:is(.buybox,.modal--wide) .variations th,:is(.buybox,.modal--wide) .variations td{display:block;text-align:left;padding:0 0 6px}
:is(.buybox,.modal--wide) .variations select{height:44px;width:100%;border:1.5px solid var(--line-control);border-radius:var(--radius-md);padding:0 var(--space-3);background:var(--bg)}
:is(.buybox,.modal--wide) .reset_variations{font-size:13px;text-decoration:underline}
.woocommerce-variation-add-to-cart{display:flex;gap:var(--space-3);width:100%}
.single_variation_wrap{width:100%;display:flex;flex-direction:column;gap:var(--space-3)}
.uspline a.link-more{font-size:14px}
/* Конфигуратор mebelef-core */
.conf__row[hidden]{display:none}
.conf__req{color:var(--danger);text-decoration:none;border:0}
.conf__row.is-error .conf__label{color:var(--danger)}
.conf__row.is-error .segmented,.conf__row.is-error .upload{outline:2px solid var(--danger);outline-offset:4px;border-radius:var(--radius-md)}
.seg{position:relative;justify-content:center}
.seg:has(input:checked){border-color:var(--ink);font-weight:600}
.seg:has(input:focus-visible),.swatch--opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.seg:has(input:disabled){opacity:.5}
.segmented--swatches{gap:8px}
.swatch--opt{position:relative;width:40px;height:40px;border-radius:10px;overflow:hidden;display:inline-block;background:var(--surface-2)}
.swatch--opt img{width:100%;height:100%;object-fit:cover}
.swatch--opt:has(input:checked){outline:2px solid var(--ink);outline-offset:2px}
.swatch-zoom{position:fixed;z-index:70;width:216px;padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);pointer-events:none;text-align:center;font-size:13px;line-height:1.3}
.swatch-zoom[hidden]{display:none}
.swatch-zoom img{display:block;width:200px;height:200px;object-fit:cover;border-radius:var(--radius-md);margin-bottom:6px}
.configurator .input{height:44px}
.configurator .upload{background:var(--bg)}
.configurator .conf__value{text-align:right}
.conf__total b{white-space:nowrap}
/* Отзывы на странице товара */
.reviews__item[hidden]{display:none}
.reviewbox>summary{list-style:none}
.reviewbox>summary::-webkit-details-marker{display:none}
.reviewbox[open]>summary{display:none}
.reviewbox__form .fields{gap:var(--space-3)}
.accordions{display:flex;flex-direction:column}
.accordion__body.prose{color:var(--ink-muted)}
.accordion__body i.fa{display:none}
/* ==== mebelef-v3: композиция страницы товара ==== */
/* Промо-плашки над ценой. Содержимое даёт фильтр, тема его не придумывает. */
.promos{display:flex;flex-direction:column;gap:6px}
.promo{display:flex;align-items:center;gap:var(--space-2);padding:7px 12px;border-radius:var(--radius-md);background:var(--accent);font-size:13px;line-height:1.3;font-weight:500}
.promo .icon{width:18px;height:18px}
.promo--ok{background:var(--success-soft);color:var(--success)}
/* Основные параметры — под галереей, рядом с ценой. Полный список
   остаётся ниже, во вкладке «Характеристики». */
.keyspecs{margin-top:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
/* Рассрочка и кредит. Выводится только если подключён реальный способ
   оплаты: суммы и сроки приходят фильтром. */
.credit{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}
.credit__tabs{display:flex;gap:4px;margin-bottom:var(--space-3)}
.credit__tab{flex:1;height:30px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);font-size:12px;line-height:1;cursor:pointer;color:var(--ink-muted)}
.credit__tab[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600}
.credit__sum{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font-size:14px}
.credit__sum b{font-size:17px;white-space:nowrap}
.credit__note{margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink-muted)}
/* На узких экранах цена и кнопки должны идти сразу за галереей, а не
   после восьми строк характеристик. Обёртка левой колонки растворяется,
   её дети становятся элементами сетки .pdp и переставляются. */
@media(max-width:1023px){
.pdp>div:first-child{display:contents}
.gallery{order:1}
.buybox{order:2}
.keyspecs{order:3}
}
/* Цена с опциями обогнала старую — зачёркнутая цена рядом читается как
   «подорожало после скидки». Класс ставит app.js, когда итог изменился. */
.price.is-configured .price__old,.price.is-configured .badge{display:none}
/* На узком экране прокручивается сам конфигуратор, а количество и кнопку
   «В корзину» видно всегда — иначе до кнопки надо долистывать модалку. */
@media(max-width:767px){
.modal--wide .modal__box{max-height:92vh;overflow:hidden;display:flex;flex-direction:column}
.modal--wide form.cart{flex:1 1 auto;min-height:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.modal--wide form.cart>.configurator{flex:1 1 auto;min-height:0;overflow-y:auto}
/* В колонке flex-basis задаёт высоту, и flex:1 из общего правила сжимал
   кнопку и количество до высоты строки. */
.modal--wide .single_add_to_cart_button,.modal--wide form.cart>.quantity,.modal--wide form.cart>.qty{flex:0 0 auto}
}
/* Карусель небольших баннеров под галереей: конфигуратор, акции, бонусы.
   Прокрутка нативная, со снапом — как в .scroller у подборок товаров.
   Четвёртая карточка выглядывает из-за края: так видно, что есть ещё. */
.pbanners{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,300px);gap:var(--space-3);margin-top:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-2)}
/* Ширина карточки — доля видимой области, а не фикс: иначе в колонке
   галереи число видимых карточек плавает от ширины экрана (на 1280
   колонка 720px, на 1440 — 880). Так край следующей виден всегда. */
@media(min-width:768px){.pbanners{grid-auto-columns:clamp(240px,calc((100% - var(--space-3) * 2) / 2.6),300px)}}
.pbanner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);scroll-snap-align:start}
.pbanner__k{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-muted)}
.pbanner__k .icon{width:18px;height:18px;color:var(--ink)}
.pbanner__t{font-size:14px;line-height:1.35}
.pbanner__t b{font-weight:700}
.pbanner .btn{margin-top:auto}