/* ========================================================================= * BioCenter product page palette + component styles * Scoped to body.single-product so it does not leak to other pages. * Loaded by biocenter-product.php only on is_product() pages. * ====================================================================== */ body.single-product { --bc-green-dark: #1a3d2e; --bc-green-mid: #245c42; --bc-green-light: #2f7a58; --bc-green-pale: #e8f5ef; --bc-orange: #ff6c00; --bc-orange-lt: #ff9f19; --bc-yellow: #ffd200; --bc-bg-warm: #fff9f2; --bc-bg-light: #f6f6f4; --bc-text: #1a1a1a; --bc-text-muted: #6b7280; --bc-border: #e5e7eb; --bc-success: #1d9e75; --bc-r-sm: 8px; --bc-r-md: 12px; --bc-r-lg: 18px; --bc-shadow: 0 2px 12px rgba(0,0,0,0.08); --bc-shadow-lg: 0 8px 32px rgba(0,0,0,0.14); } /* ── Brand label — small orange uppercase text, no pill (matches mock) ── */ .single-product .bc-brand-chip { display: block; background: transparent; color: var(--bc-orange); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 0; border-radius: 0; margin: 0 0 6px; font-family: inherit; width: auto; max-width: 100%; } /* Safety net: if the chip's parent container is still row-direction, force column layout so the chip sits ABOVE the title and aligns to the start edge (right in RTL, left in LTR). Layout post 22875 is also flipped to direction:column — this :has() rule covers any cached/edited variant. */ .single-product .wp-block-wd-container:has(> .bc-brand-chip), .single-product .wp-block-wd-container:has(> p > .bc-brand-chip) { flex-direction: column !important; align-items: flex-start !important; row-gap: 6px; } /* ── Trust chips strip ──────────────────────────────────────────────── */ .single-product .bc-trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .single-product .bc-trust-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bc-bg-warm); border: 1px solid var(--bc-border); color: var(--bc-text); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; line-height: 1.4; } .single-product .bc-trust-chip-icon { font-size: 14px; line-height: 1; } .single-product .bc-trust-chip-text { white-space: nowrap; } @media (max-width: 480px) { .single-product .bc-trust-chip-text { white-space: normal; } } /* ── Ask on WhatsApp button ─────────────────────────────────────────── */ .single-product .bc-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #fff !important; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--bc-r-md); text-decoration: none !important; transition: background 0.15s ease, transform 0.15s ease; box-shadow: 0 2px 6px rgba(37,211,102,0.25); min-height: 42px; width: 100%; max-width: 360px; margin: 8px 0; } .single-product .bc-wa-btn:hover, .single-product .bc-wa-btn:focus { background: #1ebe57; transform: translateY(-1px); color: #fff !important; text-decoration: none !important; } .single-product .bc-wa-icon { display: inline-block; flex-shrink: 0; } .single-product .bc-wa-label { line-height: 1; } /* RTL: nothing to flip — inline-flex inherits direction from */ /* Price color is left to WoodMart's default (BioCenter orange). Only the strikethrough "del" gets muted grey so the discount stands out. */ .single-product div.product .price del { color: var(--bc-text-muted); } /* Primary CTA accent — apply BioCenter orange to add-to-cart in summary only */ .single-product div.product form.cart .single_add_to_cart_button.button.alt { background: var(--bc-orange); color: #fff; border-color: var(--bc-orange); font-weight: 700; border-radius: var(--bc-r-md); } .single-product div.product form.cart .single_add_to_cart_button.button.alt:hover { background: var(--bc-green-dark); border-color: var(--bc-green-dark); } /* ── Variation table layout — stack the label ABOVE the swatches on its own line (matches target mock: "Size: 2 kg selected" / pills row). ── */ .single-product form.cart .variations, .single-product form.cart table.variations { width: 100%; border: 0 !important; border-collapse: collapse; margin: 0 0 12px; } .single-product form.cart table.variations, .single-product form.cart table.variations tbody, .single-product form.cart table.variations tr, .single-product form.cart table.variations th.label, .single-product form.cart table.variations td.value { display: block !important; width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .single-product form.cart table.variations tr { margin: 0 0 10px !important; } .single-product form.cart table.variations th.label, .single-product form.cart table.variations th.label label { font-weight: 700; color: var(--bc-text); font-size: 13px; padding: 0 0 2px !important; margin: 0 !important; text-align: start; line-height: 1.4; } /* Hide WoodMart's "reset selection" cross/link — target mock doesn't show it. */ .single-product form.cart .wd-reset-var, .single-product form.cart .reset_variations { display: none !important; } /* Hide the native