/* BC design tokens (byronbay.css — 86extrx5y, Jayr 2026-06-01) */ :root { --bc-swatch-hover-bg: #E6EAD9; /* #2 variation swatch hover tint */ --bc-menu-hover-bg: #EEF1E5; /* #4 mega-menu link hover tint */ --bc-mega-heading-top: 15px; /* #4 mega-menu heading top space — SINGLE LEVER: change here, applies everywhere it is used */ } /** * Byron Bay Candles — Client-specific CSS overrides. * * Loaded LAST in the cascade for highest priority. * Only styles specific to this client that don't belong in the * shared component CSS. * * RULES: * - Every var() MUST have a hardcoded fallback: var(--theme-palette-color-N, #hex) * - Every rule MUST have a WHY comment * - Every section MUST have a @date tag * - No !important — use cascade specificity * - Use .byronbay- prefix for client-specific classes * * @package Blocksy_Child * @client Byron Bay Candles */ /* ========================================================================== Announcement Bar — Mobile/Tablet Responsive WHY: The announcement bar text is set via inline styles in the Blocksy HTML element (font-size: 14px, line-height: 16px). Inline styles can't use media queries, so we override here for mobile where Figma specifies larger text (16px/24px) to accommodate wrapping on narrower viewports. @date 2026-02-24 ========================================================================== */ /* Tablet: same as desktop (14px/16px) — no override needed, inline styles apply. Row height set to 40px via Customizer. */ /* Mobile: larger text for readability on small screens. Figma: 16px font-size, 24px line-height, 52px row height (set via Customizer). */ @media (max-width: 689px) { [data-row="top"] [data-id="text"] span { font-size: 16px; line-height: 24px; } } /* ========================================================================== Mega Menu — Heading & Divider Styling WHY: Blocksy's mega menu Customizer has no option to add a divider line under column headings, make full-width heading rows span the grid, or control heading font weight/size independently from sub-items. These are Byron Bay's design choices per the live site layout. @date 2026-02-25 ========================================================================== */ /* Full-width heading row (e.g., "Scented Diffusers" above columns). Spans all grid columns with a divider line below. Needs both top corners rounded since it spans the full width of the dropdown. */ nav > ul > [class*="ct-mega-menu"] > .sub-menu > li:has(> .ct-column-heading) { grid-column: 1 / -1; border-bottom: 1px solid var(--theme-palette-color-12, #E0DCD7); padding-bottom: 12px; border-top-left-radius: inherit; border-top-right-radius: inherit; } /* Full-width heading text — bold and larger than column headings. Padding matches sub-item hover padding (--menu-item-padding set by Blocksy's "solid" dropdown style) so the heading aligns with items below. */ nav > ul > [class*="ct-mega-menu"] > .sub-menu > li > .ct-column-heading { font-weight: 700; font-size: 15px; padding: var(--menu-item-padding, 13px); } /* --- Candles mega menu: column headings ARE headings --- */ /* CSS class .byronbay-mega-candles set on menu item (portable across environments). */ /* Column heading — bold with divider line (Candles pattern). */ nav > ul > .byronbay-mega-candles > .sub-menu > li.menu-item-has-children > .ct-menu-link { border-bottom: 1px solid var(--theme-palette-color-12, #E0DCD7); padding-bottom: 10px; margin-bottom: 4px; font-weight: 700; font-size: 14px; } /* --- Diffusers mega menu: column headings are NOT headings --- */ /* CSS class .byronbay-mega-diffusers set on menu item (portable across environments). */ /* Column headings in Diffusers look like regular items — same font as sub-items. Blocksy styles depth-1 sub-menu links differently from depth-2; this forces column headings to match their child items exactly. */ nav > ul > .byronbay-mega-diffusers > .sub-menu > li.menu-item-has-children > .ct-menu-link { font-weight: 400; font-size: 14px; line-height: 1.4; border-bottom: none; padding-bottom: 0; margin-bottom: 0; } /* ========================================================================== B2 — Hide Payment Methods Icons on Bundle Product Pages Only WHY: Bundle product pages show payment method icons (Stripe, PayPal, etc.) that add visual noise to an already complex layout. Hiding them only on bundle pages keeps them visible elsewhere (simple/variable products). @date 2026-03-11 ========================================================================== */ .single-product.postid-635032 .ct-payment-methods, body.single-product .product-type-bundle .ct-payment-methods { display: none; } /* ========================================================================== B3 — Hide Candle Label Text on Bundle Page WHY: The Product Addons heading "Candle Label" (h2.wc-pao-addon-heading) on bundle products adds redundant text when the addon options are already self-explanatory. This is Byron-specific — other sites may want it visible. @date 2026-03-11 ========================================================================== */ body.single-product .product-type-bundle h2.wc-pao-addon-heading { display: none; } /* ========================================================================== Footer Middle Row — Top Corner Radius WHY: Blocksy Customizer only supports uniform border-radius on footer rows, not per-corner. Design requires 24px radius on top-left and top-right of the middle row only, matching the live site design. @date 2026-03-13 ========================================================================== */ footer [data-row="middle"] { border-top-left-radius: 24px; border-top-right-radius: 24px; position: relative; margin-top: -24px; z-index: 1; } /* ========================================================================== PDP — Live Site Styling Match (Items 1-12) @date 2026-03-26 ========================================================================== */ /* ITEM 1: Border around PDP summary — matches live site #F3EADE border. Height depends on content, not image. */ .entry-summary.entry-summary-items { border: 1px solid #F3EADE; border-radius: 8px; padding: 24px; } @media (max-width: 999px) { .entry-summary.entry-summary-items { border: none; padding: 0; } } /* ITEM 11: Payment icons row */ .bc-payment-icons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 12px 0 0; } .bc-payment-icons svg { flex-shrink: 0; } /* ITEM 12: Afterpay styling — match live site */ .single-product .afterpay-paragraph, .single-product square-placement { font-size: 14px; color: var(--theme-palette-color-4, #6F6F6F); } /* ========================================================================== Product Addons — input field styling WHY: WooCommerce Product Addons plugin renders unstyled inputs. @date 2026-03-26 ========================================================================== */ .wc-pao-addon-wrap input[type="text"], .wc-pao-addon-wrap textarea { width: 100%; border: 1px solid #E7E7E7; border-radius: 2px; box-sizing: border-box; } /* ========================================================================== FIX: Product info links — brownish default, black hover Live: text-brand-font (brownish), hover shows darker @date 2026-03-26 ========================================================================== */ .bc-product-info-item { color: var(--theme-palette-color-3, #655B51) !important; transition: color 0.2s; } .bc-product-info-item:hover { color: var(--theme-palette-color-1, #111) !important; } .bc-product-info-icon { color: inherit; } /* Afterpay text — thin font weight to match live */ .single-product .afterpay-paragraph { font-weight: 200 !important; } .single-product square-placement { font-weight: 200; } /* ========================================================================== Gift wrap — Isolated styling (won't inherit from other rules) @date 2026-03-26 ========================================================================== */ label.wc-pao-addon-name[data-addon-name=Gift wrap] { all: unset; display: block; font-family: var(--theme-body-font-family, inherit); font-size: 16px; font-weight: 400; font-style: normal; color: var(--theme-palette-color-2, #393939); margin-bottom: 4px; } .wc-pao-addon-description p { all: unset; display: block; font-family: var(--theme-body-font-family, inherit); font-size: clamp(16px, 1.125rem, 18px); font-weight: 400; font-style: normal; color: var(--theme-palette-color-1, #111); margin-bottom: 8px; } /* Product tab content — 18px with 16px fallback (Byron-specific) Targets Description, ACF tabs, Additional Info content. @date 2026-03-26 */ .woocommerce-tabs .entry-content, .woocommerce-tabs .entry-content p, .woocommerce-tabs .entry-content li, .woocommerce-tabs .bc-acf-tab-content, .woocommerce-tabs .bc-acf-tab-content p, .woocommerce-tabs .bc-acf-tab-content li { font-size: clamp(16px, 1.125rem, 18px); line-height: 1.75; } /* ========================================================================== Product tabs accordion — chevron icons, hide +, last tab border @date 2026-03-26 ========================================================================== */ /* Hide the default + SVG icon inside accordion headings */ .woocommerce-tabs .ct-accordion-heading svg { display: none !important; } /* Add chevron down (closed state) via ::after */ .woocommerce-tabs .ct-accordion-heading::after { content: ''; display: inline-block; width: 24px; height: 24px; flex-shrink: 0; margin-left: auto; background: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; transition: transform 0.3s ease; } /* Chevron up when tab is open/active */ .woocommerce-tabs .ct-accordion-heading[aria-expanded="true"]::after, .woocommerce-tabs .ct-accordion-heading.active::after { transform: rotate(180deg); } /* Horizontal line after the last accordion tab */ .woocommerce-tabs .ct-accordion-tab:last-child .ct-accordion-heading { border-bottom: 1px solid var(--theme-palette-color-16, #CFCFCF); } /* Product card "See More" button — match live site exactly. @date 2026-04-28 (CU-86exduk1q): live renders Title Case (the wrapper anchor has Tailwind 'uppercase' but the inner button is text-transform:none, so visible text is "See More" not "SEE MORE"). Mirroring live's actual paint: 18px / var(--theme-font-family, Montserrat) 400 / no letter-spacing / no uppercase. Color stays on the theme palette-3 var so it follows Elneil's customizer (Figma's CONTRAST 3 token #746a5f vs staging palette-3 #655B51 is a separate designer call — tracked in the BBC Typography Reference doc). */ [data-products] .ct-woo-card-actions .button { font-size: 18px; font-weight: 400; text-transform: none; letter-spacing: normal; } /* Reviews spacing */ .single-product .bc-reviews-bundle { margin-top: 50px; } /* ========================================================================== ATC Row — definitive layout (Qty label + stepper + button + wishlist) WHY: Blocksy type-2 quantity uses absolute-positioned +/- buttons inside a block-level .quantity div. The "Qty:" label (output via woocommerce_before_quantity_input_field) also lives inside .quantity. We override .quantity to flex so that label, decrease, input, increase all sit in one inline row, then the ATC button + wishlist follow. @date 2026-03-27 ========================================================================== */ /* Hide B2B pricing table inside cart actions */ .ct-cart-actions .b2bwhs_shop_table { display: none !important; } /* Main flex row: quantity box | ATC button | wishlist */ .ct-product-add-to-cart .ct-cart-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; } /* --- Quantity box: make it flex so label + buttons + input sit inline --- */ .ct-cart-actions > .quantity { display: flex !important; align-items: center !important; flex: 0 0 auto; max-width: none; width: auto !important; gap: 0; position: relative; } /* "Qty:" label inside .quantity */ .ct-cart-actions > .quantity > .bc-qty-label { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--theme-palette-color-1, #111); white-space: nowrap; margin-right: 8px; order: -1; } /* Qty stepper structural rules now live in assets/css/components/qty-stepper.css. PDP add-to-cart uses the default knob values (36px button width, --theme-button-min-height for height, 45px input). No override needed here — defaults match the previous behavior. Refactored 2026-05-08 (#54). */ /* --- ATC button fills remaining space --- */ .ct-cart-actions > .single_add_to_cart_button { flex: 1 1 auto !important; min-width: 0; text-transform: uppercase !important; letter-spacing: 0.05em; font-weight: 500 !important; /* #3 spec, was 600 (Jayr 2026-06-01) */ color: var(--theme-palette-color-24) !important; /* #3 text #3F3A36 */ } .ct-cart-actions > .single_add_to_cart_button::after { content: " \2192"; margin-left: 6px; } /* --- Wishlist button fixed size --- */ .ct-cart-actions > .ct-wishlist-button-single { flex: 0 0 auto; } /* ========================================================================== Homepage: Value Proposition Cards — CSS Grid for equal-height cards WHY: Gutenberg columns don't support equal-height (items-stretch) or the exact breakpoints we need (2-col mobile/tablet, 4-col desktop). Live site uses grid-cols-2 lg:grid-cols-4, fixed 214px height. @date 2026-04-07 ========================================================================== */ .bc-value-cards { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px; } /* Desktop (>999.98px): 4 columns, wider gap */ @media (min-width: 999.98px) { .bc-value-cards { grid-template-columns: repeat(4, 1fr); gap: 32px; } } /* Card inner — equal height via stretch + fixed min-height */ .bc-value-cards > .wp-block-column { width: 100% !important; flex-basis: unset !important; } .bc-value-cards > .wp-block-column > .wp-block-group { height: 100%; min-height: 214px; display: flex; flex-direction: column; justify-content: flex-start; } /* Icon spacing */ .bc-value-card-icon, .bc-icon--verified { margin-bottom: 16px; line-height: 0; } /* ========================================================================== Homepage: Refill Cards (Media & Text blocks) — video/image + text WHY: Media & Text handles responsive stacking natively (media on top on mobile). Video object-fit cover + height need CSS since block settings only control width ratio. Stacking at 999px instead of default 600px. @date 2026-04-08 ========================================================================== */ /* Video: object-fit cover, fixed height, border-radius + overflow clip. WHY: Media & Text block has no border-radius or overflow setting on the media figure. Block editor can't do this. @date 2026-04-08 */ .bc-refill-card .wp-block-media-text__media { border-radius: 8px; overflow: hidden; } .bc-refill-card .wp-block-media-text__media video { width: 100%; height: 640px; object-fit: cover; border-radius: 5px; } /* Stack at tablet (999px) instead of default 600px WHY: Media & Text default is 600px, but live site stacks at ~1024px */ @media (max-width: 999.98px) { .bc-refill-card.wp-block-media-text { grid-template-columns: 100% !important; } .bc-refill-card.wp-block-media-text > .wp-block-media-text__media { grid-column: 1; grid-row: 1; } .bc-refill-card.wp-block-media-text > .wp-block-media-text__content { grid-column: 1; grid-row: 2; /* WHY: 30px gap between video and text when stacked on mobile. Media & Text has no block spacing setting for stacked gap. @date 2026-04-08 */ padding-top: 30px; } .bc-refill-card .wp-block-media-text__media video { height: 351px; } } /* ========================================================================== Homepage: Logo Carousel — partner brand logos WHY: Live site uses Glider.js with edge-to-edge logos, no gap on mobile, ~215px per logo on desktop (7 visible). Logos are square, no grayscale on live site. Carousel dots + swipe via product-slider.js. @date 2026-04-08 ========================================================================== */ .bc-logo-carousel__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 16px; transition: transform 0.3s ease; } /* Desktop: 7 logos visible with gap (account for 6 gaps of 16px) */ .bc-logo-carousel__item { flex: 0 0 calc((100% - 96px) / 7); display: flex; align-items: center; justify-content: center; } .bc-logo-carousel__img { width: 100%; height: auto; object-fit: contain; display: block; } /* Tablet: 4 logos with gap */ @media (max-width: 999.98px) { .bc-logo-carousel__list { gap: 8px; } .bc-logo-carousel__item { flex: 0 0 calc((100% - 24px) / 4); } } /* Mobile: 2 logos, no gap, touching */ @media (max-width: 689px) { .bc-logo-carousel__list { gap: 0; } .bc-logo-carousel__item { flex: 0 0 calc(100% / 2); } } /* ========================================================================== Homepage: Badge/Award Grid — certification badges WHY: Badges have different aspect ratios. max-height ensures consistency. Flex wrap handles responsive layout. Not achievable via block settings. @date 2026-04-08 ========================================================================== */ /* Badge sizing now managed via block settings (width + height on each image). No CSS needed for aspect-ratio. */ /* ========================================================================== Homepage: What Inspires Us — text aligned TOP (not centered like refill cards) WHY: Overrides the :not(:has(.bc-refill-video)) centering rule. Also handles YouTube embed + image sizing to match refill video heights. @date 2026-04-08 ========================================================================== */ /* YouTube embed — overflow:hidden clips iframe to Column's border-radius (set via block settings). Match refill video height. @date 2026-04-08 */ .bc-inspire-card .wp-block-column:has(.wp-block-embed) { overflow: hidden; } .bc-inspire-card .wp-block-embed { margin: 0 !important; height: 100%; } /* WHY: WordPress adds padding-top:56.25% for 16:9 aspect ratio on embeds. Override to match refill video heights (640px/351px). @date 2026-04-08 */ .bc-inspire-card .wp-block-embed__wrapper { height: 640px; padding-top: 0 !important; position: relative; } .bc-inspire-card .wp-block-embed__wrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } @media (max-width: 999.98px) { .bc-inspire-card .wp-block-embed__wrapper { height: 351px; } } /* Behind the Scenes — Media & Text with imageFill. WHY: Match refill video heights (640px/351px) for visual consistency. imageFill uses background-size:cover so fixed height works. @date 2026-04-08 */ .bc-inspire-card.is-image-fill > .wp-block-media-text__media { height: 640px; } @media (max-width: 999.98px) { .bc-inspire-card.is-image-fill > .wp-block-media-text__media { height: 351px; } } /* ========================================================================== Homepage: Article Carousel — blog post cards WHY: Card styling (image aspect-ratio, text footer, hover scale) not achievable via shortcode block settings alone. @date 2026-04-08 ========================================================================== */ .bc-article-carousel__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 16px; } .bc-article-carousel__item { flex: 0 0 calc((100% - 32px) / 3); } .bc-article-carousel__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 6px; overflow: hidden; background: var(--theme-palette-color-6, #FAF6F2) !important; } /* WHY CSS: Fixed image height matches live site (392px desktop, 232px mobile). Block editor can't set height on shortcode-rendered images. @date 2026-04-08 */ .bc-article-carousel__image { overflow: hidden; height: 392px; } .bc-article-carousel__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; object-position: center; transition: transform 0.3s ease; } .bc-article-carousel__link:hover .bc-article-carousel__image img { transform: scale(1.03); } @media (max-width: 689px) { .bc-article-carousel__image { height: 232px; } } .bc-article-carousel__content { background: var(--theme-palette-color-6, #FAF6F2); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .bc-article-carousel__date { font-size: 14px; color: var(--theme-palette-color-4, #888888); } .bc-article-carousel__title { font-size: 16px; font-weight: 500; margin: 0; line-height: 1.3; } .bc-article-carousel__title a { color: var(--theme-palette-color-3, #746A5F); text-decoration: none; } .bc-article-carousel__title a:hover { color: var(--theme-palette-color-1, #111111); } .bc-article-carousel__excerpt { font-size: 14px; color: var(--theme-palette-color-4, #888888); margin: 0; line-height: 1.5; flex: 1; } /* WHY CSS: "Read More →" link at bottom of card. Matches live site styling. margin-top:auto pushes it to the bottom of the flex column. @date 2026-04-08 */ .bc-article-carousel__read-more { font-size: 14px; font-weight: 500; color: var(--theme-palette-color-3, #746A5F); text-decoration: none; margin-top: auto; padding-top: 8px; } .bc-article-carousel__read-more:hover { color: var(--theme-palette-color-1, #111111); } @media (max-width: 999.98px) { .bc-article-carousel__item { flex: 0 0 calc((100% - 16px) / 2); } } @media (max-width: 689px) { .bc-article-carousel__item { flex: 0 0 100%; } } /* ========================================================================== FiboSearch Header Search Bar — Desktop, matching live site WHY: FiboSearch renders via child theme template override (icon-flexible layout). Shows full search bar on desktop (>689px), icon on mobile (<689px). Block editor cannot control third-party plugin output styling. Styles matched pixel-for-pixel from live site (byronbaycandles.com): - Layout: Logo + Search in left 1fr column (search fills remaining space) - Input: 16px/400, #888 text, #BFBFBF placeholder, #E7E7E7 border, 6px radius - Icon: 24x24 magnifier, #888 fill Search element moved from middle to start column via Customizer. @date 2026-04-14 ========================================================================== */ /* --- LAYOUT: Search fills remaining space in left column --- */ /* Left column gap between logo and search. WHY: Live site has ~24px gap between logo and search input. @date 2026-04-14 */ [data-row="middle"] [data-column="start"] { gap: 24px; } /* Search element grows to fill remaining space in the left column. WHY: Live site search has flex:1 — takes all space between logo and icons. @date 2026-04-14 */ [data-row="middle"] [data-id="search"] { flex: 1 1 0%; min-width: 200px; } [data-id="search"] .dgwt-wcas-search-wrapp { max-width: 100%; width: 100%; } /* --- SEARCH INPUT STYLING: match live site --- */ /* Form wrapper — border, radius to match live site. WHY: Live uses 1px solid #E7E7E7, 6px radius. @date 2026-04-14 */ [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-form { border-radius: 6px; border: 1px solid #E7E7E7; height: auto; } /* Input field — font, padding, colors from live site. WHY: Live uses 16px/400 weight, 10px padding with 40px right for icon, text color #888, placeholder #BFBFBF, 6px radius, 24px line-height. Selector must beat FiboSearch specificity (0,4,1). @date 2026-04-14 */ [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input, [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover, [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus { height: auto; padding: 10px 40px 10px 10px; font-size: 16px; font-weight: 400; color: var(--theme-palette-color-4, #888888); line-height: 24px; border: none; border-radius: 6px; background: transparent; box-shadow: none; } /* Placeholder color — live site uses #BFBFBF. WHY: Staging default is darker, live has lighter muted placeholder. @date 2026-04-14 */ [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: #BFBFBF; opacity: 1; font-style: normal; } /* Submit button — 40px wide container, transparent bg, centered icon. WHY: Live icon container is 40px wide, flex-centered. @date 2026-04-14 */ [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit { width: 40px; height: 100%; padding: 0; background: transparent; border: none; border-radius: 0 6px 6px 0; display: flex; align-items: center; justify-content: center; } /* Magnifier icon — 24x24, #888 fill, matching live site. WHY: Live uses 24x24 stroke SVG. Staging uses fill SVG. Match size and color. @date 2026-04-14 */ [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-ico-magnifier { width: 24px; height: 24px; fill: var(--theme-palette-color-4, #888888); } /* Phone number — prevent wrapping to two lines. WHY: At narrow widths the phone number breaks into two lines. Not controllable via block editor. @date 2026-04-09 */ [data-id="contacts"] { white-space: nowrap; } /* Tablet/Mobile: search bar in mobile bottom row — full width, matching live. WHY: Mobile bottom row shows persistent FiboSearch bar (not icon). The bar must span full width with same input styling as desktop. Desktop-specific flex:1 rules are reverted; width comes from parent container instead. @date 2026-04-15 */ @media (max-width: 999.98px) { /* Revert desktop flex-grow — mobile search width comes from row container */ [data-device="mobile"] [data-id="search"] { flex: none; width: 100%; } [data-device="mobile"] [data-id="search"] .dgwt-wcas-search-wrapp { max-width: 100%; width: 100%; } /* Mobile search input — same styling as desktop, full width. WHY: FiboSearch renders identical markup; just needs full-width container. @date 2026-04-15 */ [data-device="mobile"] [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-form { border-radius: 6px; border: 1px solid #E7E7E7; height: auto; } [data-device="mobile"] [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { height: auto; padding: 10px 40px 10px 16px; /* QA 86exfx68w: align placeholder with icons-row gutter */ font-size: 16px; font-weight: 400; color: var(--theme-palette-color-4, #888888); line-height: 24px; border: none; border-radius: 6px; background: transparent; box-shadow: none; } [data-device="mobile"] [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: #BFBFBF; opacity: 1; } [data-device="mobile"] [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit { width: 40px; height: 100%; padding: 0; background: transparent; border: none; border-radius: 0 6px 6px 0; display: flex; align-items: center; justify-content: center; } [data-device="mobile"] [data-id="search"] .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-ico-magnifier { width: 24px; height: 24px; fill: var(--theme-palette-color-4, #888888); } } /* Collapse empty middle column — now unused after moving search to start. WHY: Blocksy 3-column grid gives equal 1fr to start and end with a middle column in between. With middle empty, force it to 0 width so start and end split the full width. @date 2026-04-14 */ [data-row="middle"] [data-column="middle"]:empty, [data-row="middle"] [data-column="middle"]:has(:empty) { display: none; } #header [data-row="middle"] > .ct-container { grid-template-columns: 1fr auto; } /* ========================================================================== Offcanvas Mobile Menu — Light theme to match live site WHY: Blocksy default offcanvas is dark (rgba(18,21,25,0.98)). Live site uses a light/warm background (#FAF6F2) with dark text. Customizer offcanvasBackground key does not reliably override the default. CSS override on .ct-panel-inner is more reliable. @date 2026-04-15 ========================================================================== */ /* Panel background — warm off-white matching live site. Selector must beat Blocksy inline CSS: [data-header*="type-1"] #offcanvas .ct-panel-inner */ [data-header] #offcanvas .ct-panel-inner { background: var(--theme-palette-color-6, #FAF6F2) !important; } /* Menu text color — dark on light bg */ [data-header] #offcanvas .ct-panel-inner, [data-header] #offcanvas .ct-panel-inner a, [data-header] #offcanvas .ct-panel-inner .ct-mobile-menu a { color: var(--theme-palette-color-2, #393939) !important; } /* Menu item hover — darker */ [data-header] #offcanvas .ct-panel-inner a:hover, [data-header] #offcanvas .ct-panel-inner .ct-mobile-menu a:hover { color: var(--theme-palette-color-1, #111111); } /* Close button — dark on light bg */ [data-header] #offcanvas .ct-toggle-close { color: var(--theme-palette-color-4, #888888); } [data-header] #offcanvas .ct-toggle-close:hover { color: var(--theme-palette-color-1, #111111); } /* Close button — circled X matching live site. Live site has a circle border around the X icon. @date 2026-04-15 */ [data-header] #offcanvas .ct-toggle-close { border: 1.5px solid rgba(0, 0, 0, 0.2) !important; border-radius: 50% !important; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; } [data-header] #offcanvas .ct-toggle-close svg { width: 12px; height: 12px; fill: var(--theme-palette-color-2, #393939) !important; } /* "Menu" heading — added via CSS ::before on the panel actions bar. Live site shows "Menu" text at the top-left of the offcanvas. @date 2026-04-15 */ [data-header] #offcanvas .ct-panel-actions { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px 0; border: none !important; box-shadow: none !important; outline: none !important; } /* Remove ALL separators/lines around the Menu header area. Blocksy may generate lines via pseudo-elements, borders, or box-shadows. @date 2026-04-15 */ [data-header] #offcanvas .ct-panel-actions::after { display: none !important; } [data-header] #offcanvas .ct-panel-content { border: none !important; box-shadow: none !important; } [data-header] #offcanvas .ct-panel-content::before { display: none !important; } /* Remove top border/line from first menu item and nav container */ [data-header] #offcanvas nav, [data-header] #offcanvas nav > ul, [data-header] #offcanvas nav > ul > li:first-child { border-top: none !important; } [data-header] #offcanvas .ct-panel-actions::before { content: "Menu"; font-family: var(--theme-font-family, Montserrat), var(--theme-body-font-family, sans-serif); font-size: 16px; font-weight: 700; color: var(--theme-palette-color-2, #393939); } /* Chevron direction — rotate from down-pointing (v) to right-pointing (>). Live site uses right-pointing chevrons for submenu indicators. @date 2026-04-15 */ [data-header] #offcanvas .ct-toggle-dropdown-mobile svg { transform: rotate(-90deg); } /* Dropdown chevron icons — dark on light bg. Blocksy inline CSS sets these to white (for dark theme). !important needed. @date 2026-04-15 */ [data-header] #offcanvas .ct-toggle-dropdown-mobile { color: var(--theme-palette-color-2, #393939) !important; } [data-header] #offcanvas .ct-toggle-dropdown-mobile svg { fill: var(--theme-palette-color-2, #393939) !important; } /* Menu link font — match live site (16px/500, var(--theme-font-family, Montserrat)). Blocksy default is 20px/700 which is too bold for this design. @date 2026-04-15 */ [data-header] #offcanvas .ct-menu-link { font-size: 16px !important; font-weight: 500 !important; font-family: var(--theme-font-family, Montserrat), var(--theme-body-font-family, sans-serif) !important; } /* Menu item dividers — subtle lines between items. Live site has light dividers between each nav item. @date 2026-04-15 */ [data-header] #offcanvas nav > ul > li { border-bottom: none; padding: 4px 0; } /* Two horizontal lines only — matching live site. 1. After "Shop All" (1st item) — separates shop-all from category nav 2. After "Vip sign up" (8th item) — separates primary nav from secondary nav @date 2026-04-15 */ [data-header] #offcanvas nav > ul > li:nth-child(1) { border-top: 1px solid rgba(0, 0, 0, 0.1) !important; padding-top: 8px; margin-top: 4px; } [data-header] #offcanvas nav > ul > li:nth-child(8) { border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; padding-bottom: 12px; margin-bottom: 8px; } /* Secondary nav items (FAQ, About, Contact, Return, Article) — slightly smaller/lighter. Live site differentiates these from the primary shop nav. @date 2026-04-15 */ [data-header] #offcanvas nav > ul > li:nth-child(n+9):not(:has(svg)) .ct-menu-link { font-size: 15px !important; font-weight: 400 !important; color: var(--theme-palette-color-2, #393939) !important; } /* Social icons in menu — brand brown color matching live site. @date 2026-04-15 */ [data-header] #offcanvas nav > ul > li svg { fill: var(--theme-palette-color-3, #746A5F) !important; } /* ========================================================================== Checkout — Client-specific color tokens (Phase 2.5 — Figma 6054:66809) WHY: Figma specifies an unusual light-blue primary CTA (#D9EAF0) with dark text on the checkout page — different from Blocksy's global button token (brown). Since this is client-specific, the shared component CSS exposes --fc-btn-primary-* variables and we override them here. Progress bar fill (#C1B19E) is Byron Bay's warm-tan brand accent. @date 2026-04-17 ========================================================================== */ body.woocommerce-checkout { /* Refactored 2026-05-13 (Anne Marie kickback): hex literals replaced with Blocksy Customizer palette aliases. Client can change brand colors via Customizer alone — no CSS edit needed. */ --fc-btn-primary-bg: var(--theme-palette-color-12); /* Button/Default (sage) */ --fc-btn-primary-bg-hover: var(--theme-palette-color-13); /* Button/Hover (sage hover) */ --fc-btn-primary-text: var(--theme-palette-color-24); /* Button/Text Dark */ --fc-progress-bar-bg: var(--theme-palette-color-16); /* Border (#CFCFCF) */ --fc-progress-bar-fill: var(--theme-palette-color-28); /* Progress Bar Fill */ } /* === BC color/font tokens (Layer 2 — refactored 2026-05-13 per Anne Marie kickback) * No hex values here on purpose. Each token aliases to a Customizer-managed * palette slot so the client can change brand values via Customizer alone. * Per the BC editor-first rule: Gutenberg → Customizer → CSS aliases (never CSS hex). * === */ :root { /* Fonts — aliases to Blocksy's body-font var which follows the Customizer choice */ --bc-sf-font-body: var(--theme-body-font-family); --bc-sf-font-label: var(--theme-body-font-family); /* BBC brand-distinct surface colors */ --fc-bg-pale: var(--theme-palette-color-26); /* BG/Pale */ --fc-accent-teal: var(--theme-palette-color-27); /* Accent/Teal */ --fc-text-brown: var(--theme-palette-color-19); /* Backup/Old Brown (#746A5F) */ /* Generic checkout neutrals */ --fc-text-strong: var(--theme-palette-color-2); /* Contrast 2 (#393939) */ --fc-text-soft: var(--theme-palette-color-4); /* Contrast 4 (#888888) */ /* Status colors */ --fc-error: var(--theme-palette-color-15); /* Button/Error (#EF4444) */ } /* ========================================================================== 404 Page (Blocksy Content Block template_type=404, post 645646) Client-specific typography + spacing. Reusable Baymard UX patterns (decorated headings, product grid) live in shared components. @date 2026-04-22 ========================================================================== */ /* Hero icon — aromatic-candle-1.png. WHY: Gutenberg image block has no size preset that matches the live site's decorative candle trio. Scale to a reasonable display size + center. @date 2026-04-22 */ .bc-404__icon img { max-width: 96px; height: auto; margin: 0 auto; } /* Eyebrow — muted, uppercase, tiny. Establishes error context above headline. WHY: Gutenberg paragraph has no uppercase/tracking controls. @date 2026-04-22 */ .bc-404__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-palette-color-4, #888888); margin-top: 24px; margin-bottom: 8px; } /* Headline — dramatic, matches site H1 scale but pushed larger for emotional beat. WHY: Baymard 404 guidance: the error headline should be the visual anchor. @date 2026-04-22 */ .bc-404__title { font-size: 48px; line-height: 1.15; margin: 0 0 16px; } @media (max-width: 689px) { .bc-404__title { font-size: 32px; } } /* Lead paragraph — comfortable reading width, slightly muted. WHY: Narrow measure improves scanability on 404 recovery copy. @date 2026-04-22 */ .bc-404__lead { max-width: 540px; margin: 0 auto 32px; font-size: 16px; line-height: 1.6; color: #444; } /* Search bar — mirror header FiboSearch styling so the 404 search feels native to the site. Source of truth for header styles is the [data-id="search"] block earlier in this file. Duplicated here scoped to .bc-404 because those styles are scoped to Blocksy's header wrapper. TODO: extract into assets/css/components/fibosearch-base.css when a third use-case appears. @date 2026-04-22 */ .bc-404__search { margin: 0 auto 28px; } .bc-404 .dgwt-wcas-search-wrapp { max-width: 100%; width: 100%; } .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-search-form { border-radius: 6px; border: 1px solid #E7E7E7; height: auto; background: #FFFFFF; } .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input, .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover, .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus { height: auto; padding: 10px 40px 10px 14px; font-size: 16px; font-weight: 400; color: #393939; line-height: 24px; border: none; border-radius: 6px; background: transparent; box-shadow: none; } .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { /* WCAG 1.4.3 — placeholder text must hit ≥3:1 contrast against the input background. Original `#BFBFBF` was 1.84:1 against #fff — failed. `#746A5F` (palette-color-19) is 5.27:1 against white — comfortably meets AA for normal text. Audit P0 fix 2026-05-08. */ color: #746A5F; opacity: 1; font-style: normal; } .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit { width: 40px; height: 100%; padding: 0; background: transparent; border: none; border-radius: 0 6px 6px 0; display: flex; align-items: center; justify-content: center; } .bc-404 .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-ico-magnifier { width: 24px; height: 24px; fill: var(--theme-palette-color-4, #888888); } /* CTA row — extra breathing room + consistent gap. WHY: Gutenberg "Flex Layout > Block spacing" doesn't go below default. Button text color is client-controlled via Block → Color panel. @date 2026-04-22 */ .bc-404__ctas { gap: 12px; margin-top: 8px; } /* Section titles — vertical spacing around decorated heading. Decorated line treatment itself comes from the reusable .bc-section-heading component in homepage.css (pseudo-element flanking lines). WHY: Gutenberg Heading block doesn't expose pseudo-element controls or section-rhythm spacing presets. @date 2026-04-22 */ .bc-404__section-title { margin-top: 64px; margin-bottom: 32px; } @media (max-width: 689px) { .bc-404__section-title { margin-top: 40px; margin-bottom: 24px; font-size: 22px; } } /* ========================================================================== Animated highlight — reusable inline span with drawing-underline animation Replicates Elementor Pro's "Animated Headline → Highlight" style without the plugin dependency. Used on the candle-refill-offer page (ID 634520) for "21 million tonnes" and "REFILL3". @date 2026-04-22 ========================================================================== */ /* WHY CSS: Gutenberg has no animated-text-decoration control. Blocksy Customizer has no such control either. CSS is the correct fallback per the styling hierarchy rule. Simple transform: scaleX animation on a ::after pseudo-element draws a red underline left-to-right. Respects prefers-reduced-motion. Reusable on any page — add className="bc-highlight" to an inline via Gutenberg's HTML inline-format or a raw heading. */ .bc-highlight { position: relative; display: inline-block; } .bc-highlight::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: #E74C3C; transform: scaleX(0); transform-origin: left center; animation: bc-highlight-draw 1.2s ease-out 0.4s forwards; } @keyframes bc-highlight-draw { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .bc-highlight::after { animation: none; transform: scaleX(1); } } /* ========================================================================== Candle Refill Offer page (634520) — minimal spacing/typography polish Only rules that Gutenberg Block settings + Blocksy can't express. @date 2026-04-22 ========================================================================== */ /* Eco/ingredient pills line — uppercase, muted, tracked. Gutenberg paragraph has no letter-spacing control. @date 2026-04-22 */ .bc-refill-offer__pills { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #666; margin: 24px auto; max-width: 680px; } /* Discount code display — prominent centered code badge. WHY: Client-editable content ("REFILL3") stays as plain Paragraph; only the visual box treatment needs CSS. @date 2026-04-22 */ .bc-refill-offer__code { display: inline-block; padding: 12px 32px; background: #F5EFE8; border: 1px dashed #746A5F; border-radius: 4px; font-size: 18px; letter-spacing: 0.1em; margin: 16px auto 24px; } /* Bottom 3-column block — equal-height columns with comfortable gap. Gutenberg columns gap control is site-wide; per-block here. @date 2026-04-22 */ .bc-refill-offer__bottom { gap: 32px; margin-top: 64px; align-items: stretch; } /* Col 1 — product shortcode (Scent Tester Cards): stretch the .products output so the product card fills the column height to match cols 2 & 3. WHY: WooCommerce [products] renders a grid with a short product tile; without this col 1 collapses and heights don't match live site. @date 2026-04-22 */ .bc-refill-offer__bottom > .wp-block-column:first-child { display: flex; flex-direction: column; } .bc-refill-offer__bottom > .wp-block-column:first-child .woocommerce, .bc-refill-offer__bottom > .wp-block-column:first-child ul.products { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; } .bc-refill-offer__bottom > .wp-block-column:first-child ul.products li.product { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; margin: 0; } /* Col 2 — INTRODUCTORY OFFER image: was stretched with object-fit:cover + forced 350px height. Switch to natural aspect (contain). Block-level width:auto/height:350px attributes removed on post, this is the safety net for the class. @date 2026-04-22 */ .bc-refill-offer__offer-img img { width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; } /* Col 3 — "Last Chance" panel: match live site's taller 3rd column (ref: .elementor-element-670e5fa). Stretch panel to column height and center content vertically so CTA lands mid-column like live. @date 2026-04-22 */ .bc-refill-offer__last-chance { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 48px 24px; background: #F5EFE8; border-radius: 4px; } .bc-refill-offer__last-chance h2 { margin-top: 0; } @media (max-width: 781px) { .bc-refill-offer__bottom { gap: 24px; margin-top: 40px; } .bc-refill-offer__last-chance { padding: 32px 20px; } } /* ========================================================================== Candle Refill Offer (634520) — Row 2 additions Row 1 col 3 = native wp:video block; Row 2 = Watch video + Last Chance. @date 2026-04-22 ========================================================================== */ /* Native video block in row 1 col 3 — fill column height like Introductory Offer panel next to it so heights match (ref: live .elementor-element-670e5fa). WHY: wp:video default is auto-width and aspect-based; we want it to act like a card filling the column. */ .bc-refill-offer__video { margin: 0; height: 100%; } .bc-refill-offer__video video { width: 100%; height: 100%; min-height: 320px; max-height: 560px; object-fit: cover; border-radius: 5px; display: block; background: #000; } /* Row 2 — 25/50/25 matching live Elementor layout (empty 25% col, watch video in 50% center col, Last Chance panel in 25% right col). Watch video uses wp:embed (Vimeo) with native 16:9 aspect ratio provided by Gutenberg's `wp-embed-aspect-16-9` class — no height override needed. @date 2026-04-22 */ .bc-refill-offer__bottom--row2 { margin-top: 32px; } .bc-refill-offer__watch h2 { margin-bottom: 24px; } /* Watch Vimeo embed — constrain max-width so it reads well in the 50% col and doesn't grow taller than the Last Chance panel at desktop sizes. */ .bc-refill-offer__watch-embed { max-width: 100%; margin-left: auto; margin-right: auto; } @media (max-width: 781px) { .bc-refill-offer__bottom--row2 { margin-top: 24px; } .bc-refill-offer__bottom--row2 > .wp-block-column { flex-basis: 100% !important; } /* Mobile: hide the empty spacer col rather than render a blank row */ .bc-refill-offer__bottom--row2 > .wp-block-column:first-child:empty { display: none; } .bc-refill-offer__video video { min-height: 240px; max-height: 400px; } } /* ========================================================================== Custom Candles page (638797) — Media & Text images 350px uniform height WHY: Gutenberg media-text block exposes mediaSizeSlug (thumb/medium/full) but not a height control, and natural image aspects vary, so we need CSS to keep the 8 alternating blocks visually balanced. Scoped to .page-id-638797 so it doesn't affect other pages. @date 2026-04-22 ========================================================================== */ .page-id-638797 .wp-block-media-text__media img { height: 400px; width: 100%; object-fit: cover; border-radius: 5px; display: block; } @media (max-width: 781px) { .page-id-638797 .wp-block-media-text__media img { height: 260px; } } /* ========================================================================== Corporate Buyer page (7530) — force 2-col image grid at all mobile widths WHY: Gutenberg's `isStackedOnMobile: false` attr (which emits class `.is-not-stacked-on-mobile`) keeps the grid 2-col down to ~781px but below that breakpoint the child-of-column width squeezes images to 1-col at ~520px. Client-requested: keep 2-col all the way down (matches live). Scoped to .page-id-7530 so other pages with media grids aren't affected. @date 2026-04-24 ========================================================================== */ /* Image grid — force 2-col at all viewports via className hook added in the Block Inspector. Cleaner than overriding Gutenberg's isStackedOnMobile flex rules because the .bc-image-grid class only lives on the 3 inner image rows (not the outer images|list column wrap). @date 2026-04-24 */ .wp-block-columns.bc-image-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30, 20px); } .wp-block-columns.bc-image-grid > .wp-block-column { flex-basis: auto !important; width: auto !important; margin: 0 !important; } /* ========================================================================== Search Results page — gap between header and page-title area Blocksy's hero-section[data-type=type-1] has zero padding (only sets --alignment and --margin-bottom). Type-2 has padding 50px 0 by default but Blocksy uses type-1 for search-results. No Customizer setting exposes search-page hero padding, so scoping CSS here. Value 24px matches single_page_pageTitlePadding (BBC's standard for content pages). @date 2026-04-26 ========================================================================== */ .search.search-results .hero-section[data-type="type-1"] { padding-top: 24px; } /* ========================================================================== BBC 86exbzech — 14px minimum font size (QA — 2026-05-05) Overrides Blocksy parent theme, WooCommerce core, and plugin CSS that render text below 14px. Direct child-theme rules already bumped in-file. ========================================================================== */ /* WooCommerce price suffix — WooCommerce sets small at ~60% of parent */ small.woocommerce-price-suffix, .woocommerce-price-suffix { font-size: 14px; } /* WooCommerce badges — onsale + Blocksy featured badge */ span.onsale, span.ct-woo-badge-featured { font-size: 14px; } /* Blocksy cookie consent buttons */ button.ct-button.ct-cookies-accept-button, button.ct-button.ct-cookies-decline-button { font-size: 14px; } /* SMS / newsletter consent text (Klaviyo form block) */ .bc-klaviyo-form p, .bc-klaviyo-form a, [class*='klaviyo'] p, [class*='klaviyo'] a, .kl-private-reset-css-Xuajs1 p, .kl-private-reset-css-Xuajs1 a { font-size: 14px; } /* Quill editor inline rich-text (used in Gutenberg custom blocks) */ em.ql-font-montserrat, .ql-editor em, .ql-editor p { font-size: 14px; } /* Repuso / Google reviews widget */ .rpi-review_us, .rpi-review_us a, .rpi-logo_after { font-size: 14px; } /* BBC 86exbzech — round 2: additional runtime-discovered sub-14px elements */ /* Blocksy ct-module-title in mini-cart + wishlist suggested panels */ .bc-minicart-suggested-grid .ct-module-title, .bc-wishlist-suggested-grid .ct-module-title, #woo-cart-panel .ct-module-title, #woo-wishlist-panel .ct-module-title { font-size: 14px; } /* Strikethrough sale price on product cards (Blocksy parent injects 80% of parent) */ .price del, .price del .woocommerce-Price-amount, .price del bdi, .price del .woocommerce-Price-currencySymbol { font-size: 14px; } /* Klaviyo disclosure / SMS consent text — uses dynamic Emotion class names */ .kl-private-reset-css-Xuajs1 p, .kl-private-reset-css-Xuajs1 a, .klaviyo-disclosure p, .klaviyo-disclosure a { font-size: 14px !important; } /* Quill rich-text em inline font override */ em.ql-font-montserrat { font-size: 14px !important; } /* BBC 86exbzech — round 3: strikethrough sale price del (specificity boost) */ .products .product .price del, .products .product .price .sale-price del, .price .sale-price del, .bc-product-slider__track .price del { font-size: 14px !important; } /* BBC 86exbzech — round 4: shop page offenders */ /* Breadcrumbs — general (not just hero-section) */ nav.ct-breadcrumbs, .ct-breadcrumbs, .ct-breadcrumbs a, .ct-breadcrumbs span { font-size: 14px; } /* Filter panel trigger */ .ct-toggle-filter-panel, a.ct-toggle-filter-panel { font-size: 14px; } /* Out-of-stock / sold-out badge */ span.out-of-stock-badge, .out-of-stock-badge { font-size: 14px; } /* BBC 86exbzech — round 5: PDP price block (Blocksy CSS var inherits small value) */ .single-product .summary p.price, .single-product .summary .price, .single-product .summary .price ins, .single-product .summary .price del, .single-product .summary .price .woocommerce-Price-amount, .single-product .summary .price bdi { font-size: var(--theme-font-size, 24px); } /* BBC 86exbzech R6: floating bar price (ct-floating-bar-content) */ .ct-floating-bar-content .price, .ct-floating-bar-content .price *, .ct-floating-bar-content .price del, .ct-floating-bar-content .price ins { font-size: 14px !important; } /* ========================================================================== BBC 86exh2229 — Restore qty +/- button glyphs on PDP stepper WHY: Child override of type-2 qty from absolute → flex left the :before glyph dependent on Blocksy "woo" icon font, which fails to render reliably alongside the child theme flex overrides. Fix: explicit Unicode chars. @date 2026-05-07 ========================================================================== */ .ct-cart-actions > .quantity[data-type='type-2'] .ct-decrease::before, .ct-cart-actions > .quantity[data-type='type-2'] .ct-increase::before { font-family: inherit !important; font-size: 18px; line-height: 1; color: var(--theme-palette-color-1, #111); margin: 0 !important; transform: none !important; } .ct-cart-actions > .quantity[data-type='type-2'] .ct-decrease::before { content: '\2212' !important; /* − minus sign */ } .ct-cart-actions > .quantity[data-type='type-2'] .ct-increase::before { content: '+' !important; } .ct-cart-actions > .quantity[data-type='type-2'] .ct-decrease:hover, .ct-cart-actions > .quantity[data-type='type-2'] .ct-increase:hover { background: var(--theme-border-color, #e5e5e5) !important; } /* ========================================================================== 86extrx5y — PDP qty stepper: seamless grouped pill (client request 2026-06-01) WHY: Blocksy native type-2 rules out-specify qty-stepper.css (buttons stayed 30px / 3px-radius, input 55px → three separate boxes, see CU image #3). This high-specificity override (byronbay.css loads last) forces equal-height inline cells with merged borders + outer-only radius. "Qty:" label stays outside. Verified via Playwright computed styles (179x46 pill). @date 2026-06-01 ========================================================================== */ .ct-cart-actions > .quantity[data-type='type-2'] { gap: 0 !important; align-items: center !important; } .ct-cart-actions > .quantity[data-type='type-2'] .ct-decrease, .ct-cart-actions > .quantity[data-type='type-2'] .ct-increase { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; inset: auto !important; height: 46px !important; width: 44px !important; min-height: 0 !important; box-sizing: border-box !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ border-radius: 0 !important; background: #fff !important; box-shadow: none !important; cursor: pointer; } .ct-cart-actions > .quantity[data-type='type-2'] .ct-decrease { order: 0 !important; border-right: 0 !important; border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; } .ct-cart-actions > .quantity[data-type='type-2'] .ct-increase { order: 2 !important; border-left: 0 !important; border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; } .ct-cart-actions > .quantity[data-type='type-2'] .input-text.qty { position: static !important; order: 1 !important; height: 46px !important; width: 52px !important; min-height: 0 !important; box-sizing: border-box !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ border-radius: 0 !important; background: #fff !important; text-align: center; } /* ========================================================================== 86extrx5y — PDP product-info row (Calculate Shipping | Return | FAQ): 3 even columns. Consolidated 2026-06-01 (was 3 blocks). minmax(0,1fr) + min-width:0 forces equal thirds; divider margin reset keeps the auto columns thin. ========================================================================== */ .entry-summary .bc-product-info-items { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; width: 100% !important; } .entry-summary .bc-product-info-items .bc-product-info-item { width: auto !important; min-width: 0 !important; justify-content: center !important; white-space: nowrap !important; } .entry-summary .bc-product-info-items .bc-product-info-divider { margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================================== 86extrx5y — PDP summary box: fit content height + balanced padding (image #5) Client request 2026-06-01: the bordered summary stretched to match the tall gallery column (flex align stretch) leaving ~150px empty at the bottom. align-self:flex-start → content-height (dynamic: shrinks when less content). Zeroing the trailing element margin (afterpay carries 16px before an empty Smart-Coupons block) makes bottom padding (24px) match top (24px). ========================================================================== */ .single-product .entry-summary { align-self: flex-start !important; } .single-product .entry-summary-items > *:last-child, .single-product .entry-summary-items > *:has(+ .available_coupons_with_product) { margin-bottom: 0 !important; } /* ========================================================================== 86extrx5y — floating/sticky add-to-cart bar qty stepper (image #6): match the PDP pill. Same rules as .ct-cart-actions but scoped to .ct-floating-bar-actions and sized compact (40px) for the slim sticky bar. @date 2026-06-01 ========================================================================== */ .ct-floating-bar-actions .quantity[data-type='type-2'] { gap: 0 !important; align-items: center !important; } .ct-floating-bar-actions .quantity[data-type='type-2'] .ct-decrease, .ct-floating-bar-actions .quantity[data-type='type-2'] .ct-increase { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; inset: auto !important; height: 40px !important; width: 38px !important; min-height: 0 !important; box-sizing: border-box !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ border-radius: 0 !important; background: #fff !important; box-shadow: none !important; cursor: pointer; } .ct-floating-bar-actions .quantity[data-type='type-2'] .ct-decrease { order: 0 !important; border-right: 0 !important; border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; } .ct-floating-bar-actions .quantity[data-type='type-2'] .ct-increase { order: 2 !important; border-left: 0 !important; border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; } .ct-floating-bar-actions .quantity[data-type='type-2'] .input-text.qty { position: static !important; order: 1 !important; height: 40px !important; width: 46px !important; min-height: 0 !important; box-sizing: border-box !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ border-radius: 0 !important; background: #fff !important; text-align: center; } /* ========================================================================== 86extrx5y — #1 Variation Labels typography (client 2026-06-01) Montserrat 500 · 14px · letter-spacing 0.02em · #4A433D (palette color29). Was Montserrat 600 / 18px / #5B554F. ========================================================================== */ .single-product .variations th.label, .single-product .variations th.label label { font-family: var(--theme-font-family, Montserrat, sans-serif) !important; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0.02em !important; color: var(--theme-palette-color-29, #4A433D) !important; } /* ========================================================================== 86extrx5y — #2 Product Variation Button (swatch) styling (client 2026-06-01) Kills the harsh black selected state; soft brand palette. Selected colours use palette tokens (color12/13/24 = #DDE2CF/#C5CDB4/#3F3A36); unselected text = color29 (#4A433D); unselected border = client literal #D8D1C7; hover bg #E6EAD9. ========================================================================== */ .single-product .ct-variation-swatches .ct-swatch { background: #FFFFFF !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ color: var(--theme-palette-color-29, #4A433D) !important; border-radius: 4px !important; padding: 8px 16px !important; } .single-product .ct-variation-swatches .ct-swatch-container.active .ct-swatch { background: var(--theme-palette-color-12, #DDE2CF) !important; border-color: var(--theme-palette-color-13, #C5CDB4) !important; color: var(--theme-palette-color-24, #3F3A36) !important; } .single-product .ct-variation-swatches .ct-swatch:hover { background: var(--bc-swatch-hover-bg, #E6EAD9) !important; border-color: var(--theme-palette-color-13, #C5CDB4) !important; color: var(--theme-palette-color-24, #3F3A36) !important; } .single-product .ct-variation-swatches .ct-swatch-container { margin: 0 10px 10px 0 !important; } /* ========================================================================== 86extrx5y — #1 Body/Description text + layout spacing (client 2026-06-01) Body: Montserrat 400 · 17px · line-height 1.8 · #5B554F (color25). Was 18px/1.75. Spacing: bump --product-element-spacing 16px → 24px for editorial breathing room. ========================================================================== */ .single-product .entry-summary-items > * { --product-element-spacing: 24px; } .single-product [id*="tab-description"], .single-product [id*="tab-description"] p, .single-product [id*="tab-description"] li { font-family: var(--theme-font-family, Montserrat, sans-serif) !important; font-weight: 400 !important; font-size: 17px !important; line-height: 1.8 !important; color: var(--theme-palette-color-25, #5B554F) !important; } /* ========================================================================== 86extrx5y — #1 layout spacing (client 2026-06-01): more breathing room in the upper summary. Scoped to title/price/stock margins so it can't disturb the summary-box bottom-padding fix (which manages the lower elements). ========================================================================== */ .single-product .entry-summary-items > .product_title, .single-product .entry-summary-items > .price, .single-product .entry-summary-items > .bc-stock-status { margin-bottom: 24px !important; } /* ========================================================================== 86extrx5y — #4 Mega Menu (client 2026-06-01) Base links already uniform 500/16px/no-underline (no bold/underlined headers). This adds: calm hover (#EEF1E5 / #4A433D=color29), no active-parent/column highlight, consistent weight, and more link spacing/breathing room. ========================================================================== */ .sub-menu a { font-weight: 500 !important; text-decoration: none !important; } .sub-menu li > a { border-radius: 6px !important; } /* padding now from Blocksy --menu-item-padding (Customizer Items Spacing); child override removed 2026-06-02 */ .sub-menu li > a:hover, .sub-menu li > a:focus-visible { background: var(--bc-menu-hover-bg, #EEF1E5) !important; color: var(--theme-palette-color-29, #4A433D) !important; } .sub-menu .current-menu-item > a, .sub-menu .current-menu-ancestor > a, .sub-menu .current-menu-parent > a { background: transparent !important; font-weight: 500 !important; color: inherit !important; } /* item spacing now governed by Blocksy Customizer dropdownItemsSpacing (13px); child 2px override removed 2026-06-02 */ /* ========================================================================== 86extrx5y — Variation swatch option text weight + tracking (client 2026-06-01) The scent-option labels (.ct-swatch text) were 600 / 0.18px → spec is 500 / letter-spacing 0.02em (= 0.28px at 14px). Size 14px + colour #4A433D already set. ========================================================================== */ .single-product .ct-variation-swatches .ct-swatch, .single-product .ct-variation-swatches .ct-swatch-content { font-weight: 500 !important; letter-spacing: 0.02em !important; } /* #3 sitewide primary button text colour + weight. WHY: Blocksy buttonTextColor (=color-24) is not emitted into dynamic CSS, so primary buttons render default #111 / stray weights. Scope: solid/primary only; ghost+wishlist+icon excluded. Jayr 2026-06-01 #86extrx5y */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button, .woocommerce button.button:not(.ct-button-ghost), .woocommerce input.button:not(.ct-button-ghost), .wp-block-button__link, .ct-button:not(.ct-button-ghost) { color: var(--theme-palette-color-24) !important; font-weight: 500 !important; font-size: 17px !important; /* #3 spec button size 17px, Jayr 2026-06-02 */ } /* #3 anchor-based primary buttons (See More / View cart) missed by the button.alt selector. Jayr 2026-06-01 #86extrx5y */ .woocommerce a.button:not(.ct-button-ghost), .bc-see-more-link { color: var(--theme-palette-color-24) !important; font-weight: 500 !important; font-size: 17px !important; /* #3 spec button size 17px, Jayr 2026-06-02 */ } /* ========================================================================== 86extrx5y - mini-cart / off-canvas "Your bag" drawer qty stepper (client request 2026-06-01). Match the PDP (.ct-cart-actions) + sticky (.ct-floating-bar-actions) seamless grouped pill, but COMPACT for the slim drawer (~34px). Blocksy's lazy-loaded cart-header-element-lazy.min.css loads AFTER byronbay.css and after qty-stepper.css, so its native .quantity[data-type='type-2'] rules out-specified the component knob overrides in offcanvas.css (buttons rendered ~19px tall with per-button 3px radius -> three separate boxes). This high-specificity !important block (byronbay.css loads last among child CSS; mini-cart-scoped + !important beats the lazy Blocksy stylesheet) forces the seamless pill: merged borders + outer-only 8px radius, decrease/input/increase inline at equal 34px height. Scoped to both #woo-cart-panel (drawer) and .woocommerce-mini-cart (fragment contexts). Verified via served-CSS + computed styles (Playwright stateful click chains unreliable in this env). @date 2026-06-01 ========================================================================== */ #woo-cart-panel .ct-product-actions > .quantity[data-type='type-2'], .woocommerce-mini-cart .ct-product-actions > .quantity[data-type='type-2'] { gap: 0 !important; align-items: center !important; } #woo-cart-panel .ct-product-actions > .quantity[data-type='type-2'] .ct-decrease, #woo-cart-panel .ct-product-actions > .quantity[data-type='type-2'] .ct-increase, .woocommerce-mini-cart .ct-product-actions > .quantity[data-type='type-2'] .ct-decrease, .woocommerce-mini-cart .ct-product-actions > .quantity[data-type='type-2'] .ct-increase { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; inset: auto !important; height: 34px !important; width: 30px !important; min-height: 0 !important; box-sizing: border-box !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ border-radius: 0 !important; background: #fff !important; box-shadow: none !important; cursor: pointer; } #woo-cart-panel .ct-product-actions > .quantity[data-type='type-2'] .ct-decrease, .woocommerce-mini-cart .ct-product-actions > .quantity[data-type='type-2'] .ct-decrease { order: 0 !important; border-right: 0 !important; border-top-left-radius: 4px !important; border-bottom-left-radius: 4px !important; } #woo-cart-panel .ct-product-actions > .quantity[data-type='type-2'] .ct-increase, .woocommerce-mini-cart .ct-product-actions > .quantity[data-type='type-2'] .ct-increase { order: 2 !important; border-left: 0 !important; border-top-right-radius: 4px !important; border-bottom-right-radius: 4px !important; } #woo-cart-panel .ct-product-actions > .quantity[data-type='type-2'] .input-text.qty, .woocommerce-mini-cart .ct-product-actions > .quantity[data-type='type-2'] .input-text.qty { position: static !important; order: 1 !important; height: 34px !important; width: 40px !important; min-height: 0 !important; box-sizing: border-box !important; border: 1px solid #D8D1C7 !important; /* #2 spec — was rendering Blocksy form-field #cfcfcf via the var */ border-radius: 0 !important; background: #fff !important; text-align: center; } /* ========================================================================== 86extrx5y #5 - WebToffee Smart Coupons Pro BOGO free-gift chooser button (client request 2026-06-01, option A: enlarge for discoverability). Plugin markup:
. Plugin base style.css ships the button at 50x50px with a 24x24px inner . byronbay.css loads LAST among child CSS so this !important block out-specifies the plugin's assets/style.css. Sized container to 75x75 AND scale the inner proportionally (48x48 with padding) so the glyph fills the circle instead of sitting tiny in a big box. Position (fixed, bottom-right) left untouched. Verified via served-CSS + on-server brace balance; live visual confirm by Jayr (BOGO offer is cart-session-stateful, Playwright resets context here). \@date 2026-06-01 ========================================================================== */ .wbte_sc_bogo_popup_btn { width: 75px !important; height: 75px !important; padding: 9px !important; box-sizing: border-box !important; } .wbte_sc_bogo_popup_btn img { width: 48px !important; height: 48px !important; max-width: 100% !important; max-height: 100% !important; } /* ========================================================================== 86extrx5y #3 - WebToffee Smart Coupons Pro BOGO popup CTA buttons (client request 2026-06-01). The sitewide #3 primary-button override is scoped under .woocommerce, but the BOGO free-gift popup is body-appended (outside .woocommerce), so its CTA buttons fell back to plugin/theme default. Re-apply the client #3 primary-button spec directly on the BOGO CTA selectors. byronbay.css loads LAST among child CSS so this !important block out-specifies the plugin's public/modules/bogo/assets/style.css. Front-end customer CTAs only: .wbte_sc_bogo_add_to_cart -> 'Add to cart' .wbte_sc_bogo_proceed_checkout -> 'Add & go to checkout' Admin/'add new'/dropdown buttons (wbte_sc_bogo_add_new_*, *_edit_*) are intentionally NOT styled. Color/hover/text/font/radius only - no padding/layout changes. Verified via served-CSS + on-server brace balance; live visual confirm by Jayr (BOGO offer is cart-session- stateful, Playwright resets context here). \@date 2026-06-01 ========================================================================== */ .wbte_sc_bogo_add_to_cart, .wbte_sc_bogo_proceed_checkout { background: var(--theme-palette-color-12, #DDE2CF) !important; color: var(--theme-palette-color-24, #3F3A36) !important; font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.6px !important; border-radius: 4px !important; } .wbte_sc_bogo_add_to_cart:hover, .wbte_sc_bogo_add_to_cart:focus, .wbte_sc_bogo_proceed_checkout:hover, .wbte_sc_bogo_proceed_checkout:focus { background: var(--theme-palette-color-13, #C5CDB4) !important; color: var(--theme-palette-color-24, #3F3A36) !important; } /* ========================================================================== 86extrx5y — #4 Mega Menu headings = links (client 2026-06-02) Supersedes the 2026-02-25 "Heading & Divider Styling". Client wants column headings to MATCH the links: consistent size + weight, no bold, no underline divider, no oversized headings. Neutralises that earlier treatment. ========================================================================== */ nav > ul > [class*="ct-mega-menu"] > .sub-menu > li:has(> .ct-column-heading) { border-bottom: none !important; padding-bottom: 0 !important; /* remove leftover Feb 12px row padding under full-width heading */ } nav > ul > [class*="ct-mega-menu"] > .sub-menu > li > .ct-column-heading, nav > ul > .byronbay-mega-candles > .sub-menu > li.menu-item-has-children > .ct-menu-link, nav > ul > .byronbay-mega-diffusers > .sub-menu > li.menu-item-has-children > .ct-menu-link { font-weight: 500 !important; font-size: 13px !important; border-bottom: none !important; padding: var(--menu-item-padding, 11px 14px) !important; /* balanced top/bottom = same as items */ margin-bottom: 0 !important; } /* ========================================================================== 86extrx5y — #4b Mega Menu heading spacing + no-highlight (client 2026-06-02) (a) ~5px breathing room below column headings (was too tight after the divider was removed). (b) Column HEADINGS are not clickable "items" — remove their hover/focus highlight so ONLY leaf items highlight (client: "only the individual hovered/selected menu item should highlight"). Leaf items are NOT .menu-item-has-children, so they keep their hover tint. ========================================================================== */ /* (removed 2026-06-02) heading links ARE category links -> they now follow the normal hover pill (#EEF1E5) like any item. #4d still keeps non-hover states transparent, so a heading only highlights when hovered directly, not persistently. */ /* ========================================================================== 86extrx5y — #4c Mega Menu: ONLY the hovered item may highlight (client 2026-06-02) Root cause traced to BLOCKSY (headerDropdownBackground / current-item state), not the child theme. This bulletproofs the client rule: every dropdown link that is NOT currently hovered is forced to a transparent background, so no persistent/current/active/JS-applied highlight can linger on a column heading. Keyboard focus (:focus-visible) is preserved for accessibility. ========================================================================== */ /* #4d (2026-06-02): persistent highlight OFF, hover tint restored. The #4c :not(:hover) rule suppressed the visible hover; enumerate states instead so the HOVERED item highlights (#EEF1E5) while no base/focus/active/current state lingers on a heading. Also trims the full-width heading bottom padding (~half). */ nav .sub-menu li > a, nav .sub-menu li > a:focus, nav .sub-menu li > a:active, nav .sub-menu .current-menu-item > a, nav .sub-menu .current-menu-parent > a, nav .sub-menu .current-menu-ancestor > a { background: transparent !important; } nav .sub-menu li > a:hover, nav .sub-menu li > a:focus-visible { background: var(--bc-menu-hover-bg, #EEF1E5) !important; color: var(--theme-palette-color-29, #4A433D) !important; } /* ========================================================================== 86extrx5y — #4e Mega Menu grid row-gap (client 2026-06-02) The big gap below the full-width heading + column headings is the mega-menu GRID row-gap (scaled up when Items Spacing was set to 18px). Tighten just the vertical grid gap; item-to-item spacing inside columns is unaffected. ========================================================================== */ nav > ul > [class*="ct-mega-menu"] > .sub-menu { row-gap: 8px !important; } /* ========================================================================== 86extrx5y — #4f Full-width heading compact padding (client 2026-06-02) The full-width "Scented Diffusers" label (.ct-column-heading, disabled, no hover pill) had ~11px balanced padding that widened the gap to the columns below. It shows no pill, so give it minimal balanced padding to tighten the gap. Clickable headings keep their balanced pill padding (unaffected). ========================================================================== */ nav > ul > [class*="ct-mega-menu"] > .sub-menu > li > a.ct-column-heading { padding-top: var(--bc-mega-heading-top, 15px) !important; /* uses shared lever --bc-mega-heading-top */ padding-bottom: 3px !important; } /* ========================================================================== 86extrx5y — #4g Mega Menu columns vertical padding (client 2026-06-02) ROOT CAUSE of the big gap below headings: each mega column
  • (incl. the full-width heading row) has padding: var(--columns-padding, 20px 30px) — i.e. 20px top+bottom per column. Heading bottom 20px + column top 20px stacked into a big gap. Reduce the vertical of --columns-padding to 8px; keep 30px gutters. ========================================================================== */ nav > ul > [class*="ct-mega-menu"] > .sub-menu { --columns-padding: 8px 30px; } /* ========================================================================== Mobile / off-canvas menu — force Montserrat (client 2026-06-02) The off-canvas menu still rendered var(--theme-font-family, Montserrat) despite mobileMenuFont=Montserrat in theme_mods (a CSS rule was overriding it). Align to Montserrat sitewide. ========================================================================== */ [data-header] #offcanvas .ct-menu-link, [data-header] #offcanvas .ct-mobile-menu a, #offcanvas .ct-panel-inner .ct-menu-link { font-family: var(--theme-font-family, Montserrat), sans-serif !important; } /* ========================================================================== 86extrx5y — #3b Primary buttons: hover darken + consistent letter-spacing (client 2026-06-02). RENDERED QA found primary buttons (Add to Cart, See More) were NOT darkening on hover (stayed #DDE2CF) and "See More" had letter-spacing: normal. Enforce client #3: hover bg #C5CDB4 + text #3F3A36, letter-spacing 0.6px. ========================================================================== */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button, .woocommerce button.button:not(.ct-button-ghost), .woocommerce input.button:not(.ct-button-ghost), .wp-block-button__link, .ct-button:not(.ct-button-ghost), .woocommerce a.button:not(.ct-button-ghost), .bc-see-more-link { letter-spacing: 0.6px !important; } .woocommerce a.button.alt:hover, .woocommerce a.button.alt:focus-visible, .woocommerce button.button.alt:hover, .woocommerce button.button.alt:focus-visible, .woocommerce .single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button:focus-visible, .woocommerce button.button:not(.ct-button-ghost):hover, .woocommerce button.button:not(.ct-button-ghost):focus-visible, .woocommerce input.button:not(.ct-button-ghost):hover, .woocommerce input.button:not(.ct-button-ghost):focus-visible, .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .ct-button:not(.ct-button-ghost):hover, .ct-button:not(.ct-button-ghost):focus-visible, .woocommerce a.button:not(.ct-button-ghost):hover, .woocommerce a.button:not(.ct-button-ghost):focus-visible, .bc-see-more-link:hover, .bc-see-more-link:focus-visible { background-color: var(--theme-palette-color-13, #C5CDB4) !important; color: var(--theme-palette-color-24, #3F3A36) !important; } /* ========================================================================== Product-card wishlist heart (.ct-wishlist-button-archive) — white all states (client 2026-06-02). Blocksy default was grey #888 initial / black when added (looked awful). No Customizer field exists for the card wishlist button bg, so edited here. White circle in initial/hover/active; heart kept dark for contrast. NOT in the QA list yet — Jayr verifying manually (not in client feedback). ========================================================================== */ [data-products] .ct-wishlist-button-archive, .ct-wishlist-button-archive, .ct-wishlist-button-archive:hover, .ct-wishlist-button-archive:focus, .ct-wishlist-button-archive:focus-visible, .ct-wishlist-button-archive[data-button-state="added"], .ct-wishlist-button-archive.active { background-color: #FFFFFF !important; color: var(--theme-palette-color-24, #3F3A36) !important; border: 1px solid var(--theme-palette-color-13, #C5CDB4) !important; /* sage border = hover bg colour, so the white circle reads on product images */ } /* ========================================================================== BBC client styling feedback — 2026-06-03 (ClickUp 86exuq8gz) #1 SALE/HOT badges -> approved palette · #2 Kadence dividers blue->sage · #5 content text-links WP-default-blue -> brand brown. byronbay.css loads LAST -> overrides Woo/Kadence/WP defaults. Rendered-verified: SALE #111111, HOT #EF4444, divider #3182CE, links #0693E3. ========================================================================== */ /* --- #1 Product badges -------------------------------------------------- */ .onsale, .woocommerce span.onsale, li.product .onsale, .ct-woo-badges .onsale { background-color: #4A433D !important; /* SALE: deep brand brown (was #111 near-black) */ color: #FFFFFF !important; } .ct-woo-badge-featured, .ct-woo-badges .ct-woo-badge-featured { background-color: #DDE2CF !important; /* HOT: accent sage (was #EF4444 red) */ color: #3F3A36 !important; } /* --- #2 Kadence dividers: blue (#3182CE) -> sage ------------------------ */ hr.kt-divider, .kt-divider, .wp-block-kadence-advancedheading hr.kt-divider { border-color: #C5CDB4 !important; border-top-color: #C5CDB4 !important; } /* --- #5 Body/content text links: WP default blue -> brand brown --------- COLOR-ONLY (no underline — not in client feedback). Scoped to editorial text so it does NOT touch WooCommerce product-card titles/images (li.product). Revised 2026-06-03 after underline over-reach on Favourite Buys cards. */ .entry-content p a:not([class*="button"]):not(.woocommerce-LoopProduct-link):not(.ct-media-container), .entry-content li:not(.product) a:not([class*="button"]):not(.woocommerce-LoopProduct-link):not(.ct-media-container), .wp-block-accordion a:not([class*="button"]), .wp-block-post-content p a:not([class*="button"]) { color: #4A433D !important; } .entry-content p a:not([class*="button"]):hover, .entry-content li:not(.product) a:not([class*="button"]):hover, .wp-block-accordion a:not([class*="button"]):hover { color: #7A746E !important; }