/** * PaperBrain WooCommerce design layer. * * Styles and extends WooCommerce's own native markup/classes (core * templates + WooCommerce Blocks) — it never replaces WooCommerce * functionality, never overrides Cart/Checkout Block logic, and adds * no custom PHP templates. Loads after main.css and after * WooCommerce's own bundled stylesheets (see functions.php), so it can * override with plain classes at equal specificity, no !important. * * Colors are CSS custom properties fed by inc/woocommerce-design.php * (Customizer → "WooCommerce-ontwerp"); typography/spacing/radius are * custom properties too, defined once below, so nothing in this file * is a hardcoded magic number repeated in multiple places. */ :root { /* Colors — overridden per-site via wp_add_inline_style() from the Customizer (inc/woocommerce-design.php); values below are the fallback defaults. */ --wc-primary: #6848f4; --wc-secondary: #111111; --wc-accent: #ea3325; --wc-background: #ffffff; --wc-surface: #f7f7f7; --wc-border: #e6e3df; --wc-success: #1e7a46; --wc-error: #c62828; --wc-muted-text: #6b6b6b; --wc-heading: #111111; /* Typography */ --wc-font-heading-xl: clamp(1.9rem, 1.4vw + 1.6rem, 2.75rem); --wc-font-heading-lg: clamp(1.4rem, 1vw + 1.2rem, 1.85rem); --wc-font-heading-md: 1.15rem; --wc-font-body: 1rem; --wc-font-body-sm: 0.875rem; --wc-font-label: 0.78rem; --wc-font-button: 0.8rem; /* Spacing / radius / shadow */ --wc-radius-card: 1.25rem; --wc-radius-input: 0.65rem; --wc-radius-button: 999px; --wc-shadow-card: 0 12px 32px rgba(17, 17, 17, 0.08); --wc-shadow-drawer: -24px 0 60px rgba(17, 17, 17, 0.18); --wc-section-spacing: clamp(2.5rem, 5vw, 5rem); --wc-container-width: 1600px; --wc-container-narrow: 1200px; /* Both devtools-measured off elvou.com/products/grasgevoerde-whey * (1440px viewport): --wc-content-card-width is the grey description * card's own max-width; --wc-content-narrow is the narrower, centered * column the text section right below that card uses. */ --wc-content-card-width: 1152px; --wc-content-narrow: 896px; } /* ========================================================================== * Full-bleed WooCommerce pages — same technique already used for * Store Locator / Blog (.site-main normally caps at 800px). Multiple * selectors cover every WC page context without needing to touch * page.php/index.php. * ========================================================================*/ body.woocommerce-page .site-main, body.woocommerce .site-main, body.single-product .site-main { max-width: none; padding: 0; } /* ========================================================================== * Header/logo regression guard. * * WooCommerce's own bundled woocommerce-layout.css ships a global * `.woocommerce-page img, .woocommerce img { height: auto; max-width: * 100%; }` reset. Because gets the woocommerce-page/woocommerce * classes on every Shop/Product/Cart/Checkout/My Account page, that * selector's specificity (0,1,1) beats the theme's own single-class * `.custom-logo` sizing rule in main.css (0,1,0) — so on those pages * only, the logo's own sizing was silently overridden, rendering it at * its native uploaded pixel size (thousands of pixels wide) and * breaking the header layout. * * This restores the theme's own logo sizing, scoped strictly to * .site-header so it can never affect WooCommerce's own product/ * gallery/cart images elsewhere on the same page — those keep relying * on WooCommerce's responsive `max-width:100%; height:auto` as * intended. Driven by the same --pb-header-logo-width-mobile/-desktop * custom properties as main.css's own `.custom-logo` rule (PaperBrain * Design -> Header -> "Logo breedte …"), rather than a hardcoded * height, so that setting actually takes effect on WooCommerce pages * too, not just everywhere else. * ========================================================================*/ .site-header .custom-logo, .site-header .site-branding img { max-width: var(--pb-header-logo-width-mobile, 90px) !important; width: auto !important; height: auto !important; } @media (min-width: 768px) { .site-header .custom-logo, .site-header .site-branding img { /* Spec: logo rendered size 78 x 30.47 on desktop — same fallback * as main.css's own .custom-logo rule (kept in sync). */ max-width: var(--pb-header-logo-width-desktop, 78px) !important; } } /* ========================================================================== * Base typography * ========================================================================*/ .woocommerce, .woocommerce-page { color: var(--wc-secondary); font-size: var(--wc-font-body); } .woocommerce a { color: var(--wc-primary); } /* Site header/nav links must stay black on WooCommerce pages — * `.woocommerce a` above has higher specificity (one class + one * element) than the header's own single-class selectors, so without * this scoped override every header link silently turns var(--wc-primary) * purple on product/shop pages, while the same header renders correctly * black everywhere else. Same "extra scope beats .woocommerce a" pattern * already used for .pb-mini-cart-upsell__add below. */ .woocommerce .site-header-wrap a, .woocommerce-page .site-header-wrap a { color: inherit; } /* The header CTA (filled purple by default, 2026-07-23) needs its own * pin here too — three-class specificity beats the `a { color: inherit }` * rule just above (two classes + element) regardless of source order, * restoring its white label text in both its default and hover fill * (assets/css/main.css, .pb-newsletter__cta--header.pb-button--ghost). */ .woocommerce .site-header-wrap .pb-newsletter__cta--header, .woocommerce-page .site-header-wrap .pb-newsletter__cta--header { color: #ffffff; } .woocommerce .site-header-wrap .pb-newsletter__cta--header:hover, .woocommerce .site-header-wrap .pb-newsletter__cta--header:focus-visible, .woocommerce-page .site-header-wrap .pb-newsletter__cta--header:hover, .woocommerce-page .site-header-wrap .pb-newsletter__cta--header:focus-visible { color: #ffffff; } /* Same "extra scope beats .woocommerce a" pattern as the header fix * above, for the footer — .site-footer renders on every WooCommerce- * templated page too (shop/product/cart/checkout/account all add * body.woocommerce / .woocommerce-page), and without this every * footer link/heading/icon silently turns var(--wc-primary) purple or * var(--wc-secondary) body text there, while the same footer renders * with its own colors correctly everywhere else. Values copied as-is * from each rule's own main.css declaration, just re-scoped. */ .woocommerce .site-footer, .woocommerce-page .site-footer { color: var(--pb-footer-text, #6b6b6b); } .woocommerce .site-footer a, .woocommerce-page .site-footer a { color: inherit; } .woocommerce .site-footer__links a, .woocommerce-page .site-footer__links a, .woocommerce .site-footer__address-line, .woocommerce-page .site-footer__address-line { color: var(--pb-footer-link, #6b6b6b); } .woocommerce .site-footer__links a:hover, .woocommerce-page .site-footer__links a:hover, .woocommerce .site-footer__links a:focus-visible, .woocommerce-page .site-footer__links a:focus-visible { color: var(--pb-footer-link-hover, #111111); } .woocommerce .site-footer__col-title, .woocommerce-page .site-footer__col-title, .woocommerce .site-footer__col-icon, .woocommerce-page .site-footer__col-icon, .woocommerce .site-footer__group-heading, .woocommerce-page .site-footer__group-heading, .woocommerce .site-footer__group-icon, .woocommerce-page .site-footer__group-icon { color: var(--pb-footer-heading, #111111); } .woocommerce .site-footer__social-icon, .woocommerce-page .site-footer__social-icon { color: var(--pb-footer-icon, #111111); } .woocommerce .site-footer__copyright, .woocommerce-page .site-footer__copyright { color: var(--pb-footer-text, #6b6b6b); } /* Heading weight/letter-spacing/color used to be set here from the * older --wc-heading Customizer token; removed in favour of the * central h1-h6 rules in design-system.css (theme.json * settings.custom.typography.h1-h6 + color palette "heading"), which * WooCommerce's product_title/etc. already pick up automatically as * real

-

elements — this closes the last bit of WooCommerce * heading style living outside the central Design System. Only * practical effect: H1/H2 letter-spacing tightens slightly from the * old flat -0.01em to the token's -0.02em (H3 is unchanged, already * -0.01em); color and weight are identical values either way. */ .woocommerce mark { background: none; color: inherit; } /* ========================================================================== * Buttons — one consistent look across every WooCommerce button * variant (loop add-to-cart, PDP add-to-cart, cart/checkout CTAs, * mini-cart, my-account forms). Colour/radius/font-size/font-weight/ * text-transform/font-family now come straight from the central * Primary button token (theme.json settings.custom.button.primary) — * the same source .pb-button--primary uses — closing the WooCommerce * side of the Button Design System "as far as technically supported". * Padding and letter-spacing stay WooCommerce's own established * values (0.9rem/1.75rem and 0.06em vs. Primary's 0.95rem/2.25rem and * 0.08em): those two are visibly different from the Primary token, so * forcing them to match would change every WooCommerce button's size * — a redesign, not a cleanup — and this task explicitly rules that * out. * ========================================================================*/ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button, .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.75rem; border: none; border-radius: var(--wp--custom--button--primary--radius, var(--wc-radius-button, 999px)); background: var(--wp--custom--button--primary--background, var(--wc-primary, #6848f4)); color: var(--wp--custom--button--primary--text, #ffffff); font-family: var(--wp--preset--font-family--theme-button, inherit); font-size: var(--wp--custom--button--primary--font-size, var(--wc-font-button, 0.8rem)); font-weight: var(--wp--custom--button--primary--font-weight, 700); text-transform: var(--wp--custom--typography--button--transform, none); letter-spacing: 0.06em; line-height: 1.2; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .woocommerce a.button:hover, .woocommerce a.button:focus-visible, .woocommerce button.button:hover, .woocommerce button.button:focus-visible, .woocommerce input.button:hover, .woocommerce input.button:focus-visible, .wc-block-components-button:hover, .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17, 17, 17, 0.18); opacity: 0.94; outline: none; } .woocommerce a.button.loading, .woocommerce button.button.loading, .wc-block-components-button.wc-block-components-button--loading { opacity: 0.6; cursor: wait; } .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--wc-secondary); } /* Outline/secondary button variant (e.g. "View cart", "Continue shopping"). */ .woocommerce a.wc-forward, .wc-block-components-button.is-style-outlined { background: transparent; border: 1.5px solid var(--wc-border); color: var(--wc-secondary); } /* ========================================================================== * Forms / inputs — shop filters, quantity inputs, my-account, checkout. * ========================================================================*/ .woocommerce input.qty, .woocommerce table.shop_table input.qty, .woocommerce input[type="text"], .woocommerce input[type="email"], .woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce input[type="number"], .woocommerce select, .woocommerce textarea, .wc-block-components-text-input input, .wc-block-components-select select { border: 1.5px solid var(--wc-border); border-radius: var(--wc-radius-input); padding: 0.75rem 1rem; font-size: var(--wc-font-body-sm); background: var(--wc-background); color: var(--wc-secondary); transition: border-color 0.2s ease; } .woocommerce input:focus, .woocommerce select:focus, .woocommerce textarea:focus { border-color: var(--wc-primary); outline: none; } .woocommerce label, .wc-block-components-text-input label { font-size: var(--wc-font-label); font-weight: 600; color: var(--wc-secondary); } /* ========================================================================== * Notices (success / error) — reuses core WC notice classes. * ========================================================================*/ .woocommerce-message, .woocommerce-info { border-top-color: var(--wc-success); background: var(--wc-surface); border-radius: var(--wc-radius-input); } .woocommerce-message::before { color: var(--wc-success); } .woocommerce-error { border-top-color: var(--wc-error); background: var(--wc-surface); border-radius: var(--wc-radius-input); } .woocommerce-error::before { color: var(--wc-error); } /* ========================================================================== * Shop archive — responsive card grid, image hover-zoom (same technique * as .pb-blog-card), native WC classes only (ul.products / li.product). * ========================================================================*/ .woocommerce-products-header { max-width: var(--wc-container-width); margin: var(--wc-section-spacing) auto 2rem; padding: 0 1.25rem; } @media (min-width: 1024px) { .woocommerce-products-header { padding: 0 3rem; } } .woocommerce-products-header__title.page-title { font-size: var(--wc-font-heading-xl); color: var(--wc-heading); margin: 0 0 0.5rem; } .woocommerce ul.products { max-width: var(--wc-container-width); margin: 0 auto !important; padding: 0 1.25rem; display: grid !important; grid-template-columns: 1fr; gap: 1.75rem; list-style: none; } @media (min-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; gap: 2rem; } } @media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); padding: 0 3rem; gap: 2.5rem; } } .woocommerce ul.products li.product { position: relative; width: auto !important; margin: 0 !important; float: none !important; } .woocommerce ul.products li.product a { text-decoration: none; } .woocommerce ul.products li.product a img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--wc-radius-card); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 1rem !important; } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; overflow: hidden; border-radius: var(--wc-radius-card); } .woocommerce ul.products li.product:hover a img, .woocommerce ul.products li.product a:focus-visible img { transform: scale(1.06); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--wc-font-heading-md); font-weight: 700; color: var(--wc-heading); margin: 0 0 0.35rem; } .woocommerce ul.products li.product .price { font-size: var(--wc-font-body); font-weight: 700; color: var(--wc-primary); } .woocommerce ul.products li.product .price del { color: var(--wc-muted-text); font-weight: 400; opacity: 0.7; } .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--wc-accent); } /* "Quick add" — WooCommerce's own loop add-to-cart link/button, repositioned as a floating pill over the image on hover (optional progressive enhancement, still the same native ). */ .woocommerce ul.products li.product .button.add_to_cart_button { position: absolute; right: 0.75rem; bottom: calc(100% + 0.75rem); padding: 0.6rem 1.1rem; font-size: 0.7rem; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .woocommerce ul.products li.product:hover .button.add_to_cart_button, .woocommerce ul.products li.product:focus-within .button.add_to_cart_button { opacity: 1; transform: translateY(0); pointer-events: auto; } .woocommerce ul.products li.product .added_to_cart { display: block; margin-top: 0.5rem; font-size: var(--wc-font-label); } .woocommerce nav.woocommerce-pagination { max-width: var(--wc-container-width); margin: 3rem auto 0; padding: 0 1.25rem; text-align: center; } .woocommerce nav.woocommerce-pagination ul { border: none !important; display: inline-flex; gap: 0.5rem; } .woocommerce nav.woocommerce-pagination ul li { border: none !important; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border: 1px solid var(--wc-border); border-radius: var(--wc-radius-button); color: var(--wc-secondary); font-weight: 600; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wc-secondary); border-color: var(--wc-secondary); color: #fff; } /* Native WC filter widgets (layered nav, ratings, price filter) — left untouched functionally, just aligned to the type scale. */ .woocommerce .widget_layered_nav ul, .woocommerce .widget_layered_nav_filters ul, .woocommerce .widget_price_filter { font-size: var(--wc-font-body-sm); } @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product a img, .woocommerce ul.products li.product .button.add_to_cart_button { transition: none; } } /* ========================================================================== * Single Product (PDP) — real, controlled template structure. See * woocommerce/content-single-product.php for the actual markup * (.pb-pdp > .pb-pdp__hero > .pb-pdp__gallery + .pb-pdp__summary, then * .pb-pdp__details) and woocommerce/global/wrapper-start.php + * wrapper-end.php for the outer page wrapper. Every selector below is * either our own scaffolding (.pb-pdp*) or WooCommerce's own native * output (the gallery, .product_title, form.cart, .woocommerce-tabs, * etc.) — nothing here reimplements product data, pricing, stock, * variations, or add-to-cart logic; this only styles/positions what * WooCommerce already renders. * ========================================================================*/ .pb-wc-content-area, .pb-wc-main { width: 100%; } /* Top padding is deliberately smaller than the bottom (a fixed 2rem, * not the full --wc-section-spacing scale) — the breadcrumb sits * right under the header, close to it, the same way breadcrumbs sit * on most sites; the large section-spacing rhythm still applies * between the hero and the details/tabs section below it. */ .pb-pdp { max-width: var(--wc-container-width); margin: 0 auto; padding: 2rem 1.25rem var(--wc-section-spacing); background: var(--wc-background); overflow-x: hidden; } @media (min-width: 1024px) { .pb-pdp { padding: 2rem 3rem var(--wc-section-spacing); overflow-x: visible; } } /* Breadcrumb — moved inside .pb-pdp (see pb_wc_pdp_move_breadcrumb(), * inc/woocommerce-product-page.php) so it shares the same container * width/padding as the hero below it instead of sitting as a * detached strip above the page. Deliberately quiet: small, muted, * a little letter-spacing, no border/background of its own. */ .pb-pdp .woocommerce-breadcrumb { margin: 0 0 1.5rem; font-size: var(--wc-font-label); letter-spacing: 0.02em; color: var(--wc-muted-text); } .pb-pdp .woocommerce-breadcrumb a { color: var(--wc-muted-text); text-decoration: none; } .pb-pdp .woocommerce-breadcrumb a:hover { color: var(--wc-primary); text-decoration: underline; } /* Mobile-only: the gallery/title/meta/price/Trustpilot spacing was * already tightened below (search "Mobile-only: tighten"), but that * pass never touched .pb-pdp's own 2rem top padding or the breadcrumb's * 1.5rem bottom margin — both sit *above* the breadcrumb/title/gallery * stack, so they were still pushing the whole hero (and therefore the * product photo itself, order:5 in that same stack) down the page * regardless of how tight everything below them got. Desktop/tablet * (>767px) keep the original 2rem/1.5rem — this is additive, mobile-only. */ @media (max-width: 767px) { .pb-pdp { padding-top: 1rem; } .pb-pdp .woocommerce-breadcrumb { margin-bottom: 0.5rem; } } /* ---- Hero: gallery (left) + summary (right) ---- */ .pb-pdp__hero { display: flex; flex-direction: column; gap: 2.5rem; } @media (min-width: 1024px) { .pb-pdp__hero { flex-direction: row; align-items: flex-start; gap: 4rem; } /* Desktop only — sticky while the summary column scrolls past it, * stopping naturally once .pb-pdp__hero (its containing block, which * wraps only the gallery+summary, not .pb-pdp__details) finishes * scrolling. --pb-pdp-sticky-top accounts for the sticky site header; * the body.admin-bar rule below adds the WP admin bar's own height * (32px desktop / 46px <783px) so the gallery never sits underneath * either. Was 6rem — larger than the actual header height, which * meant the sticky threshold was reached (and the gallery pinned * down to it) even at initial page load/scroll position 0, while * .pb-pdp__summary (not sticky) simply sat at its own, smaller * natural position — that gap was the actual cause of the gallery * starting lower than the title. Reduced to comfortably clear the * header alone. */ .pb-pdp__gallery { --pb-pdp-sticky-top: 4rem; flex: 1 1 55%; min-width: 0; position: sticky; top: var(--pb-pdp-sticky-top); } .pb-pdp__summary { flex: 1 1 45%; min-width: 0; } } /* The sticky gallery only exists >=1024px, and WordPress's admin bar * is always in its 32px desktop form at that width (it only grows to * 46px below 783px), so a single offset covers every case here. */ @media (min-width: 1024px) { body.admin-bar .pb-pdp__gallery { --pb-pdp-sticky-top: calc(4rem + 32px); } } /* Mobile: sticky explicitly disabled — the gallery scrolls with the * page like any other section. */ @media (max-width: 1023.98px) { .pb-pdp__gallery { position: static; } } /* Mobile ("like Nike"), full order: title, product meta (category, as * a subtitle-style line), price/stock, Trustpilot row (+ its "Bekijk * alle reviews" link, rendered inline inside it), gallery, trust * benefits, bundle selector, the purchase form (quantity/add-to-cart/ * buy-now), short description, upsells, then the Productinformatie/ * Beoordelingen accordions. Correction: pb_wc_render_pdp_attributes() * and pb_wc_render_pdp_reviews_accordion() are called from INSIDE * .pb-pdp__summary (right after product meta), not from .pb-pdp__details * as an earlier version of this comment claimed — verified directly * against woocommerce/content-single-product.php. That means they were * being promoted by display:contents like everything else here, but * with no explicit order they defaulted to order:0 and rendered before * even the title; giving them the last two order values below is the * actual fix, not just a doc correction. Any linked Gutenberg PDP * content (pb_wc_render_pdp_content()) genuinely does live in * .pb-pdp__details, a separate
after .pb-pdp__hero closes, * so it needs no order here and always renders last regardless. * .pb-pdp__summary is our own wrapper (the native "summary * entry-summary" classes stay on the same element only for plugin/JS * compatibility), so this `display:contents` + `order` is a deliberate * choice on markup we fully control — not a workaround. DOM order in * woocommerce/content-single-product.php is untouched; only these * order values move things around visually on mobile. * * gap is reduced from the desktop/base 2.5rem: with ~12 promoted flex * items now sharing this one gap value (rather than the 2 items — * gallery + summary — it was originally sized for), 2.5rem between * every single one of them, stacking on top of each element's own * margin, was the main source of the reported "too much whitespace". */ @media (max-width: 1023.98px) { .pb-pdp__hero { gap: 0.25rem; } .pb-pdp__summary { display: contents; } .pb-pdp__summary .product_title { order: 1; } .pb-pdp__summary .product_meta { order: 2; } .pb-pdp__summary p.price, .pb-pdp__summary span.price, .pb-pdp__summary p.stock { order: 3; } .pb-pdp__summary .pb-pdp-trustpilot-row { order: 4; } .pb-pdp__gallery { order: 5; } .pb-pdp__summary .pb-wc-trust-rows { order: 6; } .pb-pdp__summary .pb-pdp-bundle { order: 7; } .pb-pdp__summary form.cart { order: 8; } .pb-pdp__summary .woocommerce-product-details__short-description { order: 9; } .pb-pdp__summary .up-sells { order: 10; } .pb-pdp__summary .pb-pdp__attributes { order: 11; } .pb-pdp__summary .pb-pdp__reviews-accordion { order: 12; } } /* ---- Gallery (Nike-style: theme-controlled, not WooCommerce/FlexSlider) ---- * See pb_render_pdp_gallery() (inc/woocommerce-product-page.php) for * the markup and assets/js/woocommerce.js for the click/arrow * behaviour. This is a small, fully-owned gallery — no FlexSlider * markup or classes are involved, so there's nothing here that can * fight FlexSlider's own internal positioning/sizing. */ .pb-pdp-gallery { position: relative; } .pb-pdp-gallery--empty { background: var(--wc-surface); border-radius: var(--wc-radius-card); } /* No card treatment (no background/border-radius) — Nike-style, the * image sits directly on the page's own white background rather than * inside a distinct panel. overflow:hidden is only a containing * block for the arrows below, not a scroll container. */ /* align-items:flex-start (not center) so the product photo's own top * edge starts level with the thumbnail rail's top edge — centering it * vertically inside a tall card was what made the photo look "lower" * than the thumbnails even though the two columns' containers were * already aligned. */ .pb-pdp-gallery__main { position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; min-height: 20rem; } @media (min-width: 1024px) { .pb-pdp-gallery__main { min-height: min(720px, 70vh); } } /* Larger, Nike-style mobile gallery: true 100vw full-bleed (the * calc(50% - 50vw) trick, rather than matching .pb-pdp's own 1.25rem * padding by hand — more robust since it doesn't depend on knowing any * particular ancestor's exact padding value. Safe because .pb-pdp * itself already sets overflow-x:hidden, so this can never cause * page-level horizontal scroll even if 100vw is fractionally wider * than the layout viewport, e.g. due to a scrollbar) and a square * aspect ratio tied to the viewport width instead of the old fixed * 20rem min-height, which read as small/cramped next to a full-width * photo. Placed after the base/desktop rules above so it actually wins * at this breakpoint (same lesson as the padding-top fix above: * same-selector, same-specificity rules resolve by source order, not * by media query alone). */ @media (max-width: 1023.98px) { .pb-pdp__gallery { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .pb-pdp-gallery__main { min-height: 0; } } /* Mobile: the image was still small inside its full-width frame because * .pb-pdp-gallery__image (base rule above) uses width:auto/height:auto * capped by max-width/max-height:100% — against an intrinsic-height * parent that only ever wraps tightly to the image's own natural * rendered size, "100%" never has a real box to cap against, so the * image just rendered at whatever size its own aspect ratio produced at * the available width, however small that left it vertically. * * A *fixed* box height (an earlier version of this rule used 80vh) only * exactly fits photos that happen to share that one ratio — every other * photo (still never cropped, object-fit:contain) then renders smaller * than the box, and the leftover box area is blank, reading as unwanted * white space. assets/js/woocommerce.js now sets this element's own * aspect-ratio (inline style) to match whichever photo/video is actually * active, so the box always matches its content exactly — height:auto * here lets that aspect-ratio drive the real height, max-height is only * a safety cap for an unusually tall/narrow source photo. */ @media (max-width: 767px) { .pb-pdp-gallery__main { height: auto; /* Neutral starting guess only — JS overrides this via inline * style the moment the active photo/video's real dimensions are * known, which always wins over this stylesheet rule. Just avoids * a layout jump on first paint before that runs. */ aspect-ratio: 4 / 5; max-height: 80vh; } .pb-pdp-gallery__image { width: 100%; height: 100%; padding: 0.25rem; } } /* Sticky mobile "Toevoegen aan winkelwagen" bar — see * pb_wc_render_pdp_sticky_add_to_cart() (inc/woocommerce-product-page.php) * for why this never duplicates cart logic (it only scrolls the real * add-to-cart button into view). Hidden entirely on desktop; on mobile * it's always in the DOM but only visually shown via .is-visible, * toggled by an IntersectionObserver in assets/js/woocommerce.js. * Colours/radius/font reuse the same --wc-* tokens the Design System's * own button rule uses (assets/css/woocommerce.css, "Buttons" section * above) for visual consistency, without touching that rule itself. */ .pb-pdp-sticky-cta { display: none; } @media (max-width: 1023.98px) { .pb-pdp-sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--wc-background); border-top: 1px solid var(--wc-border); box-shadow: var(--wc-shadow-drawer, 0 -4px 16px rgba(0, 0, 0, 0.08)); transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; } .pb-pdp-sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Uses the same global Primary CTA tokens as .pb-button--primary * (assets/css/design-system.css) — mobile-only scope, radius/ * padding/typography kept as-is per this bar's own design. */ .pb-pdp-sticky-cta__button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.9rem 1.75rem; border: none; border-radius: var(--wc-radius-button, 999px); background: var(--wp--custom--button--primary--background, #6848f4); color: var(--wp--custom--button--primary--text, #ffffff); font-family: inherit; font-size: var(--wc-font-button, 0.8rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background-color var(--wp--custom--button--primary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)); } .pb-pdp-sticky-cta__button:hover, .pb-pdp-sticky-cta__button:focus-visible { background: var(--wp--custom--button--primary--hover-background, #7e6fef); color: var(--wp--custom--button--primary--hover-text, #ffffff); outline: none; } } /* Exactly one image visible at a time — plain class toggle, no * FlexSlider/CSS-timing tricks needed since this markup is entirely * ours. Generous padding (Nike/Apple-style breathing room) so the * product photo never touches the card's edges. */ .pb-pdp-gallery__image { display: none; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 3rem; box-sizing: border-box; margin: 0 auto; } /* Verified via live computed-style measurement (getBoundingClientRect + * getComputedStyle in the browser): .pb-pdp-gallery__main, the first * thumbnail, .pb-pdp__summary, and the title all measured at the exact * same top offset — the containers were never misaligned. Only this * image's own 3rem padding (above) was pushing the visible photo down * inside its own correctly-positioned box. A desktop-only override was * already added for this once (removing padding-top only, at * min-width:1024px) but never actually took effect — it was declared * *before* the base rule above, and since both target the exact same * selector at equal specificity, the later rule in the file wins * regardless of the media query, silently cancelling the override. * Placing it after the base rule (still min-width:1024px, still only * padding-top, left/right/bottom and mobile untouched) is what actually * lets it apply. */ @media (min-width: 1024px) { .pb-pdp-gallery__image { padding-top: 0; /* Was 3rem (48px, from the base rule above) — halved to bring * the main image 24px closer to the thumbnail column. Top/ * right/bottom padding and the margin:0 auto centering * mechanism are untouched. */ padding-left: 1.5rem; } } .pb-pdp-gallery__image.is-active { display: block; } /* Minimal mobile padding so the photo genuinely fills the now-100vw * frame (true Nike-style edge-to-edge feel) instead of desktop's * generous 3rem — object-fit:contain (above) means the photo is never * cropped regardless of how small this padding is. Placed after the * base rule above (and after the desktop-only padding-top:0 override), * since a previous attempt at this exact override was placed earlier * in the file and got silently cancelled by the base rule's later * source-order position — same lesson noted throughout this file. */ @media (max-width: 1023.98px) { .pb-pdp-gallery__image { padding: 0.5rem; } } /* Vertical thumbnail rail, far left, on desktop; a horizontal strip * under the main image on phones/tablets (easier to use/scroll there). * Same >=1024px breakpoint as the two-column hero itself, so there's * no in-between tablet state with a desktop-style rail inside an * otherwise still-stacked mobile layout. */ .pb-pdp-gallery__thumbs { display: flex; gap: 0.6rem; margin: 1rem 0 0; padding: 0; list-style: none; } @media (max-width: 1023.98px) { .pb-pdp-gallery__thumbs { padding-left: 2px; } } /* Explicit fixed width so .pb-pdp-gallery__thumb's own width:100% * (below) has a definite containing block to resolve against. Without * it, flex:0 0 auto has no intrinsic size to fall back to, and the * button's width:100% + aspect-ratio:1/1 combination made each * thumbnail balloon to several hundred pixels tall on narrow mobile * viewports (verified: .pb-pdp-gallery__thumbs measured 3000px tall * for 4 thumbnails before this fix). Desktop's own media query below * re-declares width:100% against its own fixed-width column, so this * mobile-only value never affects it. */ .pb-pdp-gallery__thumbs li { flex: 0 0 4.5rem; width: 4.5rem; } /* align-items defaults to "stretch" on a flex row — without setting it * explicitly here, .pb-pdp-gallery__thumbs (a flex item in this row) * stretched to match .pb-pdp-gallery__main's full height (720px), * which is what let the thumbnail *column* visually read as "larger" * even though each individual thumbnail button was correctly sized. * flex-start keeps both columns sized to their own natural content. */ @media (min-width: 1024px) { .pb-pdp-gallery { display: flex; flex-direction: row; align-items: flex-start; gap: 0; } .pb-pdp-gallery__thumbs { order: -1; flex: 0 0 4.5rem; flex-direction: column; align-items: flex-start; align-self: flex-start; margin: 0; gap: 0.35rem; } .pb-pdp-gallery__thumbs li { flex: 0 0 auto; width: 100%; } .pb-pdp-gallery__main { flex: 1 1 auto; min-width: 0; align-self: stretch; margin-left: 0; } } .pb-pdp-gallery__thumb { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; background: var(--wc-surface); border-radius: var(--wc-radius-input); cursor: pointer; overflow: hidden; opacity: 0.6; transition: opacity 0.2s ease; } .pb-pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .pb-pdp-gallery__thumb.is-active, .pb-pdp-gallery__thumb:hover { opacity: 1; } /* Video thumbnail — see pb_wc_render_pdp_gallery_thumb_media() * (inc/woocommerce-product-page.php). The

, * this element carries product_title AND entry-title), and a plain * declaration can never win against !important regardless of * selector specificity — every earlier size change on this rule * (30/22/16/14px) was silently losing to that global rule and never * actually rendered. font-family/weight/line-height are deliberately * left as-is (still governed by that same h1 rule) — only font-size * is being forced here, per "preserve existing family/weight/line-height". */ font-size: 30px !important; font-family: var( --wp--preset--font-family--theme-heading, "Poppins", sans-serif ); font-weight: 700; line-height: 1.25; margin: 0 0 1.25rem; } /* Trustpilot review row (hero) + "Bekijk alle reviews" on the same * line — see pb_wc_render_pdp_trustpilot_row() (inc/woocommerce-product-page.php). * Renders a real Trustpilot TrustBox widget once a Business Unit ID * is configured (Appearance -> Customize -> Trustpilot); until then, a * plain, honest placeholder — never an invented score. flex-wrap lets * the widget and the review link wrap onto their own line on very * narrow screens while staying directly under the title either way. */ .pb-pdp-trustpilot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1.5rem; } /* Both the real-widget slot and the placeholder share the exact same * fixed height/min-width, so the layout is identical either way — * switching from placeholder to the real TrustBox (once Trustpilot is * connected) never shifts anything around it. 24px matches the * official TrustBox "Mini" template's own height. */ .pb-pdp-trustpilot-row__widget, .pb-pdp-trustpilot-row__placeholder { display: flex; align-items: center; height: 24px; min-width: 13rem; } .pb-pdp-trustpilot-row__placeholder { font-size: var(--wc-font-body-sm); color: var(--wc-muted-text); font-style: italic; } /* Material Symbols Rounded font (enqueued only on the product page — * see pb_wc_pdp_enqueue_material_icons()). Still used by the * Productinformatie/Beoordelingen accordion expand/collapse icons * (.pb-pdp__attributes-icon) — Google's own recommended baseline * rules for the icon font. */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; } .pb-pdp__summary p.price, .pb-pdp__summary span.price { font-size: 1.5rem; font-weight: 700; color: var(--wc-heading); margin-bottom: 1.5rem; display: block; } .pb-pdp__summary p.price del { color: var(--wc-muted-text); font-size: 1rem; opacity: 0.7; } .pb-pdp__summary p.stock { font-size: var(--wc-font-body-sm); font-weight: 600; color: var(--wc-success); margin-bottom: 2rem; } .pb-pdp__summary p.stock.out-of-stock { color: var(--wc-error); } /* "Bullet benefits" — only ever appears if the product's own short * description content contains a list; WooCommerce's short-description * template (woocommerce_template_single_excerpt()) prints whatever the * editor entered as-is, so this purely restyles a