/* ===================================================================== BELLORAWEAR — PRODUCT DETAIL PAGE (marketing sections below product-main) Loaded only on WooCommerce single product pages — see functions.php. Reuses base tokens/classes from style.css (container, section, eyebrow, marquee, stats, faq, cross-sell hover) and adds the component classes that are specific to this content: feature-split, steps, guarantee band, comparison table, review cards, cross-sell card. ===================================================================== */ /* Eyebrow without the leading dash — for left-aligned copy blocks */ .bw-eyebrow--plain::before{ display:none; } /* Shared heading size for section titles on this page (all 2.4rem in the design) and a tighter section wrapper for the guarantee band. */ .bw-h2{ font-size:2.4rem; margin-top:12px; } .bw-section--tight{ padding:40px 0; } /* Narrower reading column inside Flatsome's own .container (used for the comparison table and FAQ list) — no separate container class, just constrains the element it's put on. */ .bw-narrow{ max-width:820px; margin-left:auto; margin-right:auto; } /* --------------------------------------------------------------------- Feature split (alternating image / copy rows) — sits inside Flatsome's .container, so it only needs the flex layout + vertical spacing here. --------------------------------------------------------------------- */ .bw-fsplit-list{ display:flex; flex-direction:column; gap:90px; padding:110px 0 40px; } .bw-fsplit{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .bw-fsplit-media{ border-radius:0; overflow:hidden; box-shadow:0 24px 56px rgba(28,21,24,.14); } .bw-fsplit-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; } .bw-fsplit-title{ font-family:var(--bw-font-display); font-weight:400; font-size:2.3rem; line-height:1.12; color:var(--bw-green); margin:14px 0; } .bw-fsplit-text{ color:var(--bw-text-soft); font-size:1rem; } .bw-fsplit-checks{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:22px; padding:0; } .bw-fsplit-checks li{ display:flex; align-items:center; gap:10px; color:var(--bw-green-mid); font-size:.95rem; } .bw-fsplit-checks svg{ flex-shrink:0; } /* --------------------------------------------------------------------- How-to-wear steps --------------------------------------------------------------------- */ .bw-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } .bw-step{ text-align:center; } .bw-step-num{ width:54px; height:54px; margin:0 auto 18px; border-radius:50%; background:var(--bw-green); color:var(--bw-gold-light); display:flex; align-items:center; justify-content:center; font-family:var(--bw-font-display); font-size:1.3rem; } .bw-step-title{ font-family:var(--bw-font-display); font-weight:500; font-size:1.2rem; color:var(--bw-green); margin-bottom:8px; } .bw-step-text{ color:var(--bw-text-soft); font-size:.92rem; } /* --------------------------------------------------------------------- Guarantee band --------------------------------------------------------------------- */ .bw-guarantee{ background:var(--bw-green); color:var(--bw-cream); border-radius:0; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .bw-guarantee-eyebrow{ font-size:.76rem; text-transform:uppercase; font-weight:600; color:var(--bw-gold-light); letter-spacing:.22em; } .bw-guarantee-title{ font-family:var(--bw-font-display); font-weight:400; font-size:2.3rem; line-height:1.14; margin:14px 0; color:var(--bw-cream); } .bw-guarantee-title em{ font-style:italic; color:var(--bw-gold-light); } .bw-guarantee-text{ color:rgba(244,236,238,.72); font-size:1rem; } .bw-guarantee-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .bw-guarantee-stat{ background:rgba(244,236,238,.06); border:1px solid rgba(168,110,120,.2); border-radius:0; padding:22px; text-align:center; } .bw-guarantee-stat-num{ font-family:var(--bw-font-display); font-size:1.9rem; color:var(--bw-gold-light); } .bw-guarantee-stat-label{ font-size:.82rem; color:rgba(244,236,238,.65); margin-top:4px; } /* --------------------------------------------------------------------- Comparison table --------------------------------------------------------------------- */ .bw-cmp{ border:1px solid var(--bw-border); border-radius:0; overflow:hidden; background:var(--bw-white); } .bw-cmp-head{ display:grid; grid-template-columns:1fr 120px 120px; background:var(--bw-green); color:var(--bw-cream); } .bw-cmp-head-name{ padding:18px 22px; font-weight:600; } .bw-cmp-head-brand{ padding:18px 12px; text-align:center; font-family:var(--bw-font-display); font-size:1.05rem; color:var(--bw-gold-light); } .bw-cmp-head-other{ padding:18px 12px; text-align:center; font-size:.9rem; color:rgba(244,236,238,.6); } .bw-cmp-row{ display:grid; grid-template-columns:1fr 120px 120px; border-bottom:1px solid var(--bw-border); } .bw-cmp-row:last-child{ border-bottom:none; } .bw-cmp-row:nth-child(even){ background:var(--bw-cream-soft); } .bw-cmp-feature{ padding:16px 22px; color:var(--bw-green-mid); font-size:.94rem; } .bw-cmp-yes{ padding:16px 12px; text-align:center; color:#2F7D52; font-weight:700; } .bw-cmp-no{ padding:16px 12px; text-align:center; color:#C7B8BB; } /* --------------------------------------------------------------------- Review cards (static grid — different from the homepage slider) --------------------------------------------------------------------- */ .bw-reviews-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:44px; } .bw-reviews-score{ text-align:right; } .bw-reviews-score-num{ font-family:var(--bw-font-display); font-size:2.6rem; color:var(--bw-green); line-height:1; } .bw-reviews-score-num span{ font-size:1.2rem; color:var(--bw-gold); } .bw-reviews-score-stars{ color:var(--bw-gold); letter-spacing:2px; } .bw-reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .bw-review-card{ background:var(--bw-white); border:1px solid var(--bw-border); border-radius:0; padding:28px; } .bw-review-card-stars{ color:var(--bw-gold); letter-spacing:1px; margin-bottom:12px; } .bw-review-card-text{ font-family:var(--bw-font-display); font-style:italic; font-weight:300; font-size:1.05rem; color:var(--bw-green); margin-bottom:18px; } .bw-review-card-name{ font-weight:600; font-size:.9rem; color:var(--bw-text); } .bw-review-card-verified{ font-size:.74rem; color:var(--bw-gold); text-transform:uppercase; letter-spacing:.08em; } /* --------------------------------------------------------------------- Cross-sell card ("Complete the set") — .bw-cross hover is in style.css --------------------------------------------------------------------- */ .bw-cross-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:900px; margin:0 auto; } .bw-cross{ background:var(--bw-white); border:1px solid var(--bw-border); border-radius:0; overflow:hidden; display:block; } .bw-cross-media{ background:var(--bw-cream-soft); aspect-ratio:1; overflow:hidden; } .bw-cross-media img{ width:100%; height:100%; object-fit:cover; } .bw-cross-body{ padding:20px; } .bw-cross-stars{ color:var(--bw-gold); font-size:.8rem; letter-spacing:1px; } .bw-cross-title{ font-family:var(--bw-font-display); font-weight:500; font-size:1.15rem; color:var(--bw-green); margin:6px 0; } .bw-cross-price{ display:flex; gap:8px; align-items:baseline; } .bw-cross-price-now{ font-family:var(--bw-font-display); color:var(--bw-green); } .bw-cross-price-was{ font-size:.82rem; text-decoration:line-through; color:var(--bw-strike); } /* ===================================================================== PRODUCT-MAIN SKIN — real WooCommerce / WCPA / bundle-builder markup (gallery, variations, size field, qty, add-to-cart). Selectors were read straight off the live DOM, not guessed from plugin docs. This only recolors/re-fonts the existing plugin markup — it never touches layout, so the bundle picker, swatches and size field keep working exactly as WooCommerce/WCPA render them. ===================================================================== */ /* Gallery */ .product-images.woocommerce-product-gallery{ background:var(--bw-cream-soft); border-radius:var(--bw-radius); overflow:hidden; } .product-thumbnails .col{ border:1px solid var(--bw-border); border-radius:var(--bw-radius-sm); overflow:hidden; } .product-thumbnails .col.is-nav-selected{ border-color:var(--bw-green); } .zoom-button{ background:var(--bw-white) !important; color:var(--bw-green) !important; } /* Title + short description */ .product-title-container .product-title{ font-family:var(--bw-font-display) !important; font-weight:400 !important; font-size:2.4rem !important; line-height:1.15 !important; color:var(--bw-green) !important; } /* "Less calf pain in 4 weeks or it's free" intro line */ .product-short-description{ margin-bottom:20px; } .product-short-description > p:first-child, .product-short-description > p:first-child u{ text-decoration:none !important; font-style:normal !important; font-family:var(--bw-font-display) !important; font-size:1.15rem !important; font-weight:500 !important; color:var(--bw-green) !important; } /* Benefit row (icon + text) — the real markup puts a
between the icon and the text, forcing them onto separate lines; hide it and flex the row instead. */ .benefits-container{ margin-bottom:0 !important; } .benefit-item{ display:flex !important; align-items:center; gap:8px; margin-top:10px; } .benefit-item br{ display:none !important; } .benefit-item svg{ color:var(--bw-gold) !important; flex-shrink:0; margin:0 !important; } .benefit-text{ color:var(--bw-green-mid); font-size:.85rem; } .benefit-text strong{ color:var(--bw-green); } /* Color swatches (woo-variation-swatches plugin) — wvs-show-label rewrites the field label to "Color: Gray" via its own JS, so this also styles whatever text ends up inside it. */ table.variations{ margin-bottom:16px !important; } table.variations .label label{ font-family:var(--bw-font-body) !important; font-weight:600 !important; color:var(--bw-green) !important; text-transform:uppercase !important; font-size:.74rem !important; letter-spacing:.08em !important; } table.variations .reset_variations{ color:var(--bw-gold) !important; font-size:.74rem !important; } .color-variable-items-wrapper .variable-item.color-variable-item{ border:2px solid transparent !important; } .color-variable-items-wrapper .variable-item.color-variable-item.selected, .color-variable-items-wrapper .variable-item.color-variable-item:hover{ border-color:var(--bw-green) !important; } /* Bundle picker (bwb-wrap) */ .bwb-option{ border:1px solid var(--bw-border) !important; border-radius:var(--bw-radius) !important; background:var(--bw-white) !important; } .bwb-option.bwb-selected{ border-color:var(--bw-green) !important; background:rgba(28,21,24,.04) !important; } .bwb-radio{ border-color:#C4BBA6 !important; } .bwb-option.bwb-selected .bwb-radio{ border-color:var(--bw-green) !important; background:var(--bw-green) !important; } .bwb-label{ font-family:var(--bw-font-body); font-weight:600; color:var(--bw-green); } .bwb-price{ font-family:var(--bw-font-display); color:var(--bw-green); } .bwb-old{ color:var(--bw-strike); } .bwb-badge{ background:var(--bw-gold) !important; color:var(--bw-green-deep) !important; } .bwb-topbar-timer{ background:var(--bw-green-deep) !important; color:var(--bw-cream) !important; } .bwb-divider span{ color:var(--bw-text-mute); } /* Size (WCPA radio group). The plugin's own CSS renders this as a plain vertical list of native radio buttons — nothing hides the radio dot or lays the options out horizontally by default, so both have to be done here. Scoped to ".wcpa_radio label" (the per-option label), NOT "label[for^=radio-group-size]", because the field's own outer label ("Size*") shares that same "radio-group-size" prefix and would otherwise get boxed up too. */ .wcpa_type_radio-group .radio-group{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; } .wcpa_type_radio-group .wcpa_radio{ margin:0 !important; position:relative; } .wcpa_type_radio-group .wcpa_radio input[type="radio"]{ position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:none !important; pointer-events:none !important; } .wcpa_type_radio-group .wcpa_radio label{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:46px !important; height:44px !important; margin:0 !important; padding:0 10px !important; border:1px solid var(--bw-border) !important; border-radius:var(--bw-radius-sm) !important; font-weight:600 !important; font-size:.85rem !important; color:var(--bw-text) !important; background:var(--bw-white) !important; cursor:pointer; transition:all .25s; } .wcpa_type_radio-group .wcpa_radio input:checked + label{ border-color:var(--bw-green) !important; background:var(--bw-green) !important; color:var(--bw-cream) !important; } .wcpa_type_radio-group .wcpa_radio label .wcpa_check, .wcpa_type_radio-group .wcpa_radio label .wcpa_check *{ display:none !important; } .ux-quantity { display: none !important; } /* Payment icon strip under the buy panel (plain