/* ============================================================ LUMIADE — PDP surface (Phase 3, spec §4 credibility ladder). Loads after components.css; supersedes legacy monolith rules on equal-or-later cascade position. Scope everything to .lumiade-product-template (single-product class). ============================================================ */ /* — A. Above the fold — */ /* Hairline-framed gallery on the white field. */ .lumiade-product-template .woocommerce-product-gallery .ct-media-container, .lumiade-product-template .woocommerce-product-gallery img { aspect-ratio: 4 / 3 !important; background: var(--lumiade-paper); object-fit: contain !important; } .lumiade-product-template .woocommerce-product-gallery .ct-media-container { border: 1px solid var(--lumiade-line); border-radius: var(--lumiade-radius); } /* Fraunces title. */ .lumiade-product-template .product_title { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); font-size: var(--lumiade-fs-3xl); font-weight: 420; line-height: 1.12; margin-bottom: 10px; } /* Price: near-black; bronze reserved for the sale price. */ .lumiade-product-template .summary .price { color: var(--lumiade-ink); font-size: var(--lumiade-fs-xl); font-weight: 600; } .lumiade-product-template .summary .price del { color: var(--lumiade-muted); font-size: var(--lumiade-fs-md); opacity: 1; } .lumiade-product-template .summary .price ins { text-decoration: none; } .lumiade-product-template .summary .price ins .amount { color: var(--lumiade-gold); } /* Stars bronze; the review-count link is quiet ink, anchored to #reviews. */ .lumiade-product-template .summary .star-rating { color: var(--lumiade-gold); } .lumiade-product-template .woocommerce-review-link { color: var(--lumiade-ink); font-size: var(--lumiade-fs-sm); text-decoration: underline; text-underline-offset: 3px; } .lumiade-product-template .woocommerce-review-link:hover { color: var(--lumiade-muted); } /* Slim meta breadcrumb (rendered at woocommerce_product_meta_end). */ .lumiade-product-template .lumiade-meta-breadcrumb { color: var(--lumiade-muted); font-size: var(--lumiade-fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; margin-top: 10px; text-transform: uppercase; } .lumiade-product-template .lumiade-meta-breadcrumb a { color: inherit; text-decoration: none; } .lumiade-product-template .lumiade-meta-breadcrumb a:hover { color: var(--lumiade-ink); } .lumiade-product-template .lumiade-meta-breadcrumb .sep { margin: 0 6px; } /* Tabs: only Description remains (Reviews + Additional information are removed in PHP) — hide the strip, run the panel as a plain editorial column at a readable measure. */ .lumiade-product-template .woocommerce-tabs { background: var(--lumiade-paper); border: 0; } /* Specificity note: Blocksy's woocommerce.min.css ships ".woocommerce div.product div.woocommerce-tabs ul.tabs" at (0,4,3) with display:flex; our selector without !important sits at (0,3,0) and loses, leaving the strip visible (confirmed live). Force with !important, matching this layer's existing pattern for the same fight (see components.css). */ .lumiade-product-template .woocommerce-tabs .tabs { display: none !important; } .lumiade-product-template .woocommerce-tabs .panel { background: var(--lumiade-paper); border: 0; margin: 0 auto; max-width: 760px; padding: 0; } /* — B. Buy column — */ .lumiade-product-template .lumiade-product-promise { color: var(--lumiade-ink); font-size: var(--lumiade-fs-md); line-height: 1.55; margin: 0 0 14px; } /* The curated .lumiade-product-promise above is the single buy-column intro. Blocksy renders WooCommerce's short-description excerpt from its own product layer (it removes the default priority-20 hook and calls the template directly), and on every product that excerpt just repeats the promise with weaker DB copy — e.g. the sunscreen's "A daily comfort sunscreen concept for the final morning step." under the promise "Daily protection, comfortable enough to keep." Hide the duplicate at the display layer; the post_excerpt data stays intact for schema/other surfaces. Specificity (0,2,0) beats Blocksy's single-class rule, so no !important. */ .lumiade-product-template .woocommerce-product-details__short-description { display: none; } .lumiade-product-template .lumiade-product-wins { display: grid; gap: 10px; list-style: none; margin: 0 0 18px; padding: 0; } .lumiade-product-template .lumiade-product-wins li { align-items: center; color: var(--lumiade-ink); display: flex; font-size: var(--lumiade-fs-base); gap: 10px; line-height: 1.5; } .lumiade-product-template .lumiade-feat-icon { -webkit-mask: var(--lumiade-feat-mask, none) center / contain no-repeat; mask: var(--lumiade-feat-mask, none) center / contain no-repeat; background-color: var(--lumiade-ink); flex: 0 0 20px; height: 20px; width: 20px; } .lumiade-product-template .lumiade-stock-urgency { align-items: center; color: var(--lumiade-muted); display: flex; font-size: var(--lumiade-fs-sm); gap: 8px; margin: 0 0 10px; } .lumiade-product-template .lumiade-stock-dot { background: var(--lumiade-clay); border-radius: 999px; flex: 0 0 8px; height: 8px; width: 8px; } /* Blocksy's product-layout builder injects a .ct-product-divider layer (data-id="divider_1") immediately before the buy form. Its border-top duplicates our own separator on ".lumiade-product-template form.cart" (border-top in lumiade-homepage.css), so two hairlines land ~35px apart above the size selector (confirmed via computed styles on the live PDP: divider_1 at y683, form.variations_form border at y719). Suppress the redundant Blocksy layer — the form.cart border is the single intended line. Specificity: this selector is (0,3,0) and beats Blocksy's ".ct-product- divider{display:block}" (0,1,0), so no !important is needed. divider_2 (before .product_meta) has no competing border and is left intact. */ .lumiade-product-template .ct-product-divider[data-id="divider_1"] { display: none; } /* On size selection, WooCommerce injects per-variation meta into .single_variation. Two lines are unwanted: • .woocommerce-variation-price ("$42.00") duplicates the summary price and implies per-size pricing we're moving away from — sizes are becoming separate linked products, not priced variations; • .woocommerce-variation-availability ("3 in stock") is the selected variation's own stock, which conflicts with our product-level scarcity label .lumiade-stock-urgency ("Only 6 left" = summed in-stock total): two different stock numbers on one screen (confirmed live — price at y727, "3 in stock" at y798, "Only 6 left" at y548). Keep the single "Only 6 left" line and suppress both injected lines. The faded swatch + disabled add-to-cart still signal an out-of-stock size, so no availability signal is lost. These classes only ever appear inside .single_variation, and the content is JS-injected, so a display-layer hide is the reliable, reversible fix. */ .lumiade-product-template .single_variation .woocommerce-variation-price, .lumiade-product-template .single_variation .woocommerce-variation-availability { display: none; } /* Black full-width add-to-cart (colors come from components.css). */ .lumiade-product-template form.cart .single_add_to_cart_button { min-height: 54px; width: 100%; } .lumiade-product-template .lumiade-reassure { border-top: 1px solid var(--lumiade-line); display: grid; gap: 8px 18px; grid-template-columns: 1fr 1fr; list-style: none; margin: 18px 0 0; padding: 16px 0 0; } .lumiade-product-template .lumiade-reassure-item { align-items: center; color: var(--lumiade-ink); display: flex; font-size: var(--lumiade-fs-sm); font-weight: 600; gap: 8px; list-style: none; margin: 0; } .lumiade-product-template .lumiade-reassure-icon { color: var(--lumiade-ink); } /* Secure checkout — padlock mark (PDP-only reassurance mark; shipping/ returns/tested marks stay shared with the trust + proof bars in the monolith). */ .lumiade-product-template .lumiade-reassure-secure { --lumiade-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5Zm-3 8V6a3 3 0 0 1 6 0v3H9Zm3 4a1.7 1.7 0 0 1 1 3.1V19h-2v-2.9A1.7 1.7 0 0 1 12 13Z'/%3E%3C/svg%3E"); } /* Highlighted full-width guarantee row: a white hairline-framed card (distinct from the soft-filled .lumiade-bundle card directly beneath it), with a bold promise lead over one calm supporting line. */ .lumiade-product-template .lumiade-guarantee { align-items: flex-start; background: var(--lumiade-paper); border: 1px solid var(--lumiade-line); border-radius: var(--lumiade-radius); color: var(--lumiade-ink); display: flex; gap: 12px; margin: 18px 0 0; padding: 14px 16px; } .lumiade-product-template .lumiade-guarantee-body { display: flex; flex-direction: column; gap: 3px; } .lumiade-product-template .lumiade-guarantee-body strong { color: var(--lumiade-ink); font-size: var(--lumiade-fs-base); font-weight: 600; } .lumiade-product-template .lumiade-guarantee-body span { color: var(--lumiade-muted); font-size: var(--lumiade-fs-sm); line-height: 1.5; } .lumiade-product-template .lumiade-guarantee-icon { margin-top: 1px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 4 5v6c0 5.2 3.4 9.5 8 11 4.6-1.5 8-5.8 8-11V5l-8-3Zm-1.1 13.8-3.7-3.7 1.4-1.4 2.3 2.3 4.9-4.9 1.4 1.4-6.3 6.3Z'/%3E%3C/svg%3E") center / contain no-repeat; background-color: var(--lumiade-ink); flex: 0 0 auto; height: 20px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 4 5v6c0 5.2 3.4 9.5 8 11 4.6-1.5 8-5.8 8-11V5l-8-3Zm-1.1 13.8-3.7-3.7 1.4-1.4 2.3 2.3 4.9-4.9 1.4 1.4-6.3 6.3Z'/%3E%3C/svg%3E") center / contain no-repeat; width: 20px; } .lumiade-product-template .lumiade-bundle { background: var(--lumiade-soft); border: 1px solid var(--lumiade-line); border-radius: var(--lumiade-radius); color: var(--lumiade-ink); display: flex; font-size: var(--lumiade-fs-sm); gap: 10px; line-height: 1.5; margin: 14px 0 0; padding: 12px 14px; } .lumiade-product-template .lumiade-bundle-icon { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 2 7l10 5 10-5-10-5Zm-7.8 8.1L2 11.2l10 5 10-5-2.2-1.1L12 14 4.2 10.1Zm0 4.4L2 15.6l10 5 10-5-2.2-1.1L12 18.4l-7.8-3.9Z'/%3E%3C/svg%3E") center / contain no-repeat; background-color: var(--lumiade-ink); flex: 0 0 auto; height: 20px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 2 7l10 5 10-5-10-5Zm-7.8 8.1L2 11.2l10 5 10-5-2.2-1.1L12 14 4.2 10.1Zm0 4.4L2 15.6l10 5 10-5-2.2-1.1L12 18.4l-7.8-3.9Z'/%3E%3C/svg%3E") center / contain no-repeat; width: 20px; } /* Actionable tail on the bundle note — an inline ink link so "complete your ritual" has somewhere to go. */ .lumiade-product-template .lumiade-bundle-link { color: var(--lumiade-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .lumiade-product-template .lumiade-bundle-link:hover { color: var(--lumiade-muted); } .lumiade-product-template .lumiade-purchase-notes { border-top: 1px solid var(--lumiade-line); display: grid; gap: 12px 18px; grid-template-columns: 1fr 1fr; margin: 18px 0 0; padding: 16px 0 0; } .lumiade-product-template .lumiade-purchase-notes span { color: var(--lumiade-ink); font-size: var(--lumiade-fs-sm); line-height: 1.5; } .lumiade-product-template .lumiade-purchase-notes strong { color: var(--lumiade-muted); display: block; font-size: var(--lumiade-fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 2px; text-transform: uppercase; } @media (max-width: 480px) { .lumiade-product-template .lumiade-reassure, .lumiade-product-template .lumiade-purchase-notes { grid-template-columns: 1fr; } } /* Method grid: flat editorial, hairline-separated from the fold. */ .lumiade-product-template .lumiade-product-method { background: var(--lumiade-paper); border: 0; border-top: 1px solid var(--lumiade-line); border-radius: 0; display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: minmax(250px, 0.3fr) minmax(0, 0.7fr); margin: clamp(40px, 6vw, 72px) 0 0; padding: clamp(28px, 4vw, 48px) 0 0; } .lumiade-product-template .lumiade-product-method-intro h2 { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); font-size: var(--lumiade-fs-2xl); font-weight: 420; line-height: 1.15; margin: 0 0 12px; } .lumiade-product-template .lumiade-product-method-intro p:not(.lumiade-kicker) { color: var(--lumiade-muted); font-size: var(--lumiade-fs-base); line-height: 1.6; margin: 0; } .lumiade-product-template .lumiade-product-method-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .lumiade-product-template .lumiade-product-method-grid article { background: var(--lumiade-paper); border: 1px solid var(--lumiade-line); border-radius: var(--lumiade-radius); padding: 22px; } .lumiade-product-template .lumiade-product-method-grid span { color: var(--lumiade-muted); display: block; font-size: var(--lumiade-fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 14px; } .lumiade-product-template .lumiade-product-method-grid h3 { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); font-size: var(--lumiade-fs-lg); font-weight: 420; line-height: 1.2; margin-bottom: 10px; } .lumiade-product-template .lumiade-product-method-grid p { color: var(--lumiade-muted); font-size: var(--lumiade-fs-sm); line-height: 1.62; margin-bottom: 0; } /* Ritual CTA band: dusty beige, black button. */ .lumiade-product-template .lumiade-product-ritual { align-items: center; background: var(--lumiade-soft); border: 1px solid var(--lumiade-line); border-radius: var(--lumiade-radius); display: grid; gap: 26px; grid-template-columns: minmax(260px, 0.42fr) minmax(0, 0.44fr) auto; margin: clamp(40px, 6vw, 64px) 0 20px; padding: clamp(24px, 4vw, 42px); } .lumiade-product-template .lumiade-product-ritual h2 { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); font-size: var(--lumiade-fs-2xl); font-weight: 420; line-height: 1.12; margin-bottom: 0; } .lumiade-product-template .lumiade-product-ritual > p { color: var(--lumiade-muted); font-size: var(--lumiade-fs-sm); line-height: 1.68; margin-bottom: 0; } .lumiade-product-template .lumiade-product-ritual a { align-items: center; background: var(--lum-accent); border-radius: var(--lumiade-radius-sm); color: #ffffff; display: inline-flex; font-size: var(--lumiade-fs-base); font-weight: 600; justify-content: center; min-height: 48px; padding: 0 26px; text-decoration: none; white-space: nowrap; } .lumiade-product-template .lumiade-product-ritual a:hover { background: var(--lum-accent-hover); color: #ffffff; } /* Reviews: quiet clinical list. Stars bronze; everything else monochrome. */ .lumiade-product-template .lumiade-reviews-section { border-top: 1px solid var(--lumiade-line); margin: clamp(40px, 6vw, 64px) 0 0; padding-top: clamp(28px, 4vw, 44px); } .lumiade-product-template .lumiade-reviews-section .woocommerce-Reviews-title { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); font-size: var(--lumiade-fs-2xl); font-weight: 420; line-height: 1.15; margin: 0 0 24px; } .lumiade-product-template .lumiade-reviews-section .star-rating { color: var(--lumiade-gold); } .lumiade-product-template .lumiade-reviews-section .commentlist { list-style: none; margin: 0; padding: 0; } .lumiade-product-template .lumiade-reviews-section .commentlist .comment_container, .lumiade-product-template .lumiade-reviews-section .commentlist > li { background: var(--lumiade-paper); border: 0; border-bottom: 1px solid var(--lumiade-line); margin: 0; padding: 18px 0; } .lumiade-product-template .lumiade-reviews-section .comment-text { border: 0; margin: 0; padding: 0; } .lumiade-product-template .lumiade-reviews-section .comment-text p { color: var(--lumiade-ink); font-size: var(--lumiade-fs-base); line-height: 1.6; } .lumiade-product-template .lumiade-reviews-section .woocommerce-review__author { color: var(--lumiade-ink); font-size: var(--lumiade-fs-sm); font-weight: 700; } .lumiade-product-template .lumiade-reviews-section .woocommerce-review__verified, .lumiade-product-template .lumiade-reviews-section .woocommerce-review__published-date { color: var(--lumiade-muted); font-size: var(--lumiade-fs-sm); } /* Blocksy Pro advanced-reviews summary — confirmed live on the reference PDP via class dump (Step 2). .ct-reviews-summary is itself a .commentlist > li, so its box overrides need the extra li.ct-reviews-summary specificity bump to beat the generic ".commentlist > li" rule above. The percent-bar track has no separate "fill" class — the fill is an unnamed inner sized by an inline width style — so the fill color targets that descendant span. */ .lumiade-product-template .lumiade-reviews-section .commentlist > li.ct-reviews-summary { background: var(--lumiade-paper); border: 1px solid var(--lumiade-line); margin: 0 0 26px; padding: 22px; } .lumiade-product-template .lumiade-reviews-section .ct-reviews-average-rating-info b { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); } .lumiade-product-template .lumiade-reviews-section .ct-review-rating-percent-bar { background: var(--lumiade-panel); } .lumiade-product-template .lumiade-reviews-section .ct-review-rating-percent-bar span { background: var(--lumiade-ink); } /* Method/ritual/reviews render inside the full-bleed .ct-container-full, past the end of .product-entry-wrapper.is-width-constrained (confirmed via a live DOM dump of the reference PDP) — without an explicit width they stretch edge-to-edge. Mirror the monolith's .is-width-constrained sizing (kept there for .woocommerce-tabs and .related.products, which carry that class themselves in the DOM). Declared after each section's own margin shorthand above so only margin-inline is touched, not the vertical rhythm those rules already set. */ .lumiade-product-template .lumiade-product-method, .lumiade-product-template .lumiade-product-ritual, .lumiade-product-template .lumiade-reviews-section { margin-inline: auto; max-width: var(--theme-block-max-width); width: var(--theme-container-width); } /* Related products heading. */ .lumiade-product-template .related.products > h2 { color: var(--lumiade-ink); font-family: var(--lumiade-font-serif); font-size: var(--lumiade-fs-2xl); font-weight: 420; margin: clamp(36px, 5vw, 56px) 0 22px; } @media (max-width: 900px) { .lumiade-product-template .lumiade-product-method, .lumiade-product-template .lumiade-product-ritual { grid-template-columns: 1fr; } .lumiade-product-template .lumiade-product-method-grid { grid-template-columns: 1fr; } }