/*
* Union Distribution — single-ud_product.php styles.
* Ported from product-files/ud_product_demo.html (source of truth for classes).
*
* Everything is scoped under .ud-product-page on purpose: the demo uses generic
* selectors (body, a, section, h1..h3) and reuses Bootstrap class names (.btn,
* .card) that the theme already loads. Scoping keeps those rules off the theme
* header/footer and out of Bootstrap's way on the same page. The CSS custom
* properties live on the wrapper (not :root) for the same isolation reason.
* Enqueued only on is_singular('ud_product') — see functions.php.
*/
/*
* Palette below is the theme's, not the demo's: navy #161c55 (footer / dark
* sections), warm tan #CDAA7D (CTA + hover), #E7E7E7 borders, #F8F8F9 panels,
* Roboto. Navy carries structure (eyebrows, badges, dark section), tan carries
* interaction (buttons, actives, bullets). Product pages deliberately drop the
* theme red #EA0029 (still used by header/footer/logo) for this warmer accent.
* Text on the accent is navy, not white: white on #CDAA7D is ~2.3:1 contrast.
*/
.ud-product-page{
--ink:#000000;
--ink-soft:#7a7a7a;
--line:#E7E7E7;
--bg:#ffffff;
--panel:#F8F8F9;
--accent:#CDAA7D;
--accent-ink:#B8905F;
--accent-on:#161c55;
--accent-soft:#FFF4DC; /* мягкая подсветка акцента на светлом фоне */
--brand:#161c55;
--brand-soft:#eef0f8;
--brand-line:#d6dbef;
--glow:#7f9cff;
--zoom:2.4;
--radius:10px;
--radius-btn:5px;
--maxw:1200px;
--ease:cubic-bezier(.16,1,.3,1);
margin:0;font-family:'Roboto', sans-serif;
color:var(--ink);background:var(--bg);line-height:1.55;
}
html:has(.ud-product-page){scroll-behavior:smooth}
.ud-product-page *{box-sizing:border-box}
/* theme links are dark with an accent hover, never underlined */
.ud-product-page a{color:var(--ink);text-decoration:none;transition:color .3s}
.ud-product-page a:hover{color:var(--accent);text-decoration:none}
.ud-product-page h1,.ud-product-page h2,.ud-product-page h3{line-height:1.2;margin:0}
.ud-product-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.ud-product-page .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ud-product-page .reveal.in{opacity:1;transform:none}
.ud-product-page .reveal.d1{transition-delay:.08s}
.ud-product-page .reveal.d2{transition-delay:.16s}
.ud-product-page .reveal.d3{transition-delay:.24s}
.ud-product-page .breadcrumb{padding:14px 0;font-size:13px;color:var(--ink-soft);background:none;margin:0;border-radius:0}
.ud-product-page .breadcrumb a{color:var(--ink-soft)}
.ud-product-page .breadcrumb span{margin:0 6px}
.ud-product-page .breadcrumb b{color:var(--ink);font-weight:600}
.ud-product-page .hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:10px 0 50px}
/* Тумбы стоят колонкой справа от картинки. Вторая колонка появляется только
когда тумбы есть (одна картинка в галерее — .thumbs не выводится вовсе),
иначе gap оставил бы пустой отступ справа. */
.ud-product-page .gallery{display:grid;grid-template-columns:1fr;gap:12px}
.ud-product-page .gallery:has(.thumbs){grid-template-columns:1fr 72px}
/* Рамка тянется под пропорции самой картинки: с жёстким 4/5 квадратное фото
оставляло полосы сверху/снизу, а высокое узкое — по бокам. --main-ar пишет
PHP из размеров ACF-картинки (JS — только при смене тумбы и как запасной
вариант, если размеров нет), fallback .8 = прежние 4/5. Кламп держит рамку
между 4/5 и 4/3, чтобы панорама не схлопнулась в полоску, а очень высокое
фото не выдавило hero. */
.ud-product-page .gallery .main{
--main-ar:.8;
border:1px solid var(--line);border-radius:var(--radius);
aspect-ratio:clamp(.8, var(--main-ar), 1.3333);
transition:aspect-ratio .3s var(--ease);
display:flex;align-items:center;justify-content:center;
color:#AEAEAE;font-size:14px;position:relative;overflow:hidden;
}
.ud-product-page .gallery .main img{width:100%;height:100%;object-fit:contain}
.ud-product-page .gallery .main .ph{font-weight:600;letter-spacing:.03em}
/*
* Hover zoom. .main is already overflow:hidden, so it doubles as the lens
* viewport and the itself is what scales — no overlay node, no cloned
* background-image. JS writes only transform-origin (the cursor position); the
* scale lives here. Origin is deliberately NOT transitioned: it has to track
* the pointer 1:1, and only the scale-in/out should animate. .is-zoomable is
* added by JS, so the no-image placeholder never gets a zoom cursor.
*/
.ud-product-page .gallery .main.is-zoomable{cursor:zoom-in}
.ud-product-page .gallery .main img{transition:transform .3s var(--ease)}
.ud-product-page .gallery .main.zoomed img{transform:scale(var(--zoom))}
/* min-height:0 — иначе grid-элемент растянется по содержимому и колонка вылезет
ниже картинки; со стретчем по строке высота равна .main, а лишние тумбы
уезжают в собственный скролл. */
.ud-product-page .thumbs{
display:flex;flex-direction:column;gap:10px;
min-height:0;overflow-y:auto;scrollbar-width:thin;
}
.ud-product-page .thumbs .t{
flex:0 0 auto;aspect-ratio:1/1;background:var(--panel);border:1px solid var(--line);
border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;
color:#AEAEAE;font-size:11px;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s;
}
.ud-product-page .thumbs .t img{width:100%;height:100%;object-fit:cover}
.ud-product-page .thumbs .t:hover{transform:translateY(-2px)}
.ud-product-page .thumbs .t.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.ud-product-page .badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ud-product-page .badge{
font-size:12px;font-weight:600;letter-spacing:.02em;
background:var(--brand-soft);color:var(--brand);
border:1px solid var(--brand-line);padding:8px 12px;border-radius:100px;
}
.ud-product-page h1{font-size:30px;font-weight:700;margin-bottom:8px}
.ud-product-page .ids{font-size:13px;color:var(--ink-soft);margin-bottom:18px}
.ud-product-page .ids b{color:var(--ink);font-weight:600}
.ud-product-page .lead{font-size:16px;color:#555;margin-bottom:22px}
.ud-product-page .lead p{margin:0 0 10px}
.ud-product-page .lead p:last-child{margin-bottom:0}
.ud-product-page .keyf{list-style:none;padding:0;margin:0 0 26px}
.ud-product-page .keyf li{position:relative;padding:7px 0 7px 26px;font-size:14px;border-bottom:1px solid var(--line)}
.ud-product-page .keyf li:before{
content:"";position:absolute;left:2px;top:13px;width:8px;height:8px;
background:var(--accent);border-radius:2px;transform:rotate(45deg);
}
.ud-product-page .cta-row{display:flex;gap:12px;flex-wrap:wrap}
/* theme buttons (.more): 5px radius, 1px accent border, 0.4s fill on hover */
.ud-product-page .btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:45px;padding:10px 26px;border-radius:var(--radius-btn);font-weight:500;font-size:16px;
background:var(--accent);color:var(--accent-on);border:1px solid var(--accent);
transition:all .4s;
}
.ud-product-page .btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent-on);text-decoration:none}
.ud-product-page .btn.ghost{background:transparent;color:var(--accent-on);border-color:var(--accent)}
.ud-product-page .btn.ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.ud-product-page section{padding:46px 0}
.ud-product-page .sec-head{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:8px}
.ud-product-page .sec-title{font-size:24px;font-weight:700;color:var(--ink);margin-bottom:26px}
.ud-product-page .banners{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ud-product-page .banner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Меньше четырёх баннеров: колонок ровно столько, сколько плиток, но размер
плитки остаётся как при 4-в-ряд — (100% - 3*16px)/4 — а сетка центрируется.
Отсюда формулы max-width: N плиток плюс (N-1) промежутков. */
.ud-product-page .banner-grid--1{grid-template-columns:1fr;max-width:calc((100% - 48px)/4);margin-inline:auto}
.ud-product-page .banner-grid--2{grid-template-columns:repeat(2,1fr);max-width:calc((100% - 48px)/2 + 16px);margin-inline:auto}
.ud-product-page .banner-grid--3{grid-template-columns:repeat(3,1fr);max-width:calc((100% - 48px)*3/4 + 32px);margin-inline:auto}
.ud-product-page .banner{
position:relative;aspect-ratio:3/4;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;
color:#AEAEAE;text-align:center;padding:16px;
}
/* Плитка со ссылкой рендерится как , без ссылки — как