/* ============================================================ ADC Peptides — PHP TEMPLATE styles (handle: adc-templates) ------------------------------------------------------------ Component styles for the child theme's PHP templates (single-product, shop archive, blog index, single post) — see docs/TECH-ARCHITECTURE.md §2a. Ported verbatim from the client-approved mockups (mockups/{product,shop,blog,post}.html), re-namespaced with the `adc-` prefix and re-pointed at the `--adc-*` design tokens so nothing collides with Astra / WooCommerce markup. Depends on adc-tokens + adc-widgets (reuses .adc-wrap/.adc-section/.adc-btn/.adc-stars/.adc-eyebrow/ .adc-prodcard/.adc-prodgrid/.adc-post/.adc-news/.adc-faq). ⚠️ Do NOT redesign — this must match the approved mockups. ============================================================ */ /* ---------- Astra container neutralisation ---------- Astra renders .ast-container as flex (to place content + sidebar side by side). Our full-width PHP templates make it page-builder/no-sidebar, but the flex still shrinks each top-level .adc-wrap to its content. Force block so children fill the width. Scoped to our page-builder template bodies (WooCommerce + blog), so the Elementor homepage — also page-builder — is untouched. */ .ast-page-builder-template.woocommerce .ast-container, .ast-page-builder-template.single-post .ast-container, .ast-page-builder-template.blog .ast-container{display:block} /* ---------- shared: breadcrumb ---------- */ .adc-crumb{padding:18px 0;font-size:.85rem;color:var(--adc-ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .adc-crumb a{color:inherit} .adc-crumb a:hover{color:var(--adc-accent)} .adc-crumb .sep{opacity:.4} .adc-crumb .current{color:var(--adc-ink)} /* ============================================================ SINGLE PRODUCT ============================================================ */ .adc-pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:8px 0 clamp(40px,5vw,64px);align-items:start} /* gallery */ .adc-gallery{position:sticky;top:96px} .adc-gstage{aspect-ratio:1;border:1px solid var(--adc-line);border-radius:20px;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 5%,#fff,#E7F0FB 62%,#D9E7F7)} .adc-gstage::after{content:"";position:absolute;bottom:14%;left:50%;transform:translateX(-50%);width:46%;height:16px;border-radius:50%;background:rgba(11,26,51,.16);filter:blur(10px)} .adc-gstage [data-adc-gmain]{position:relative;z-index:1;width:100%;height:100%;display:grid;place-items:center} .adc-gstage [data-adc-gmain] svg{width:52%;height:auto;filter:drop-shadow(0 18px 26px rgba(18,41,74,.2))} .adc-gstage [data-adc-gmain] img{width:82%;height:82%;object-fit:contain} .adc-gstage .adc-gbadge{position:absolute;z-index:2;top:18px;left:18px;background:#fff;border:1px solid var(--adc-line);border-radius:999px;font-size:.7rem;font-weight:700;padding:6px 12px;color:var(--adc-ink-soft);text-transform:uppercase;letter-spacing:.06em} .adc-gstage .adc-zoomhint{position:absolute;z-index:2;bottom:18px;right:18px;background:rgba(255,255,255,.9);border:1px solid var(--adc-line);border-radius:999px;font-size:.72rem;font-weight:600;padding:6px 12px;color:var(--adc-ink-soft);display:flex;gap:6px;align-items:center} .adc-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px} .adc-thumb{aspect-ratio:1;border:1.5px solid var(--adc-line);border-radius:12px;background:radial-gradient(120% 100% at 50% 5%,#fff,#E7F0FB 70%);display:grid;place-items:center;cursor:pointer;transition:.16s;padding:0;overflow:hidden} .adc-thumb:hover{border-color:var(--adc-navy-500)} .adc-thumb.is-active{border-color:var(--adc-navy-800);box-shadow:0 0 0 3px rgba(18,41,74,.1)} .adc-thumb svg{width:46%;height:auto} .adc-thumb img{width:100%;height:100%;object-fit:cover} /* Defend the gallery-thumb