/**
* BCM v2.6.7 Additions — Nav "More" Dropdown + Desktop Nav Spacing +
* Hero Full-Width + Category Exclusions +
* Personal Care Shaving Mobile Fix
* Applied: 2026-07-27
*
* ─────────────────────────────────────────────────────────────────────
* CHANGES IN THIS FILE
* ─────────────────────────────────────────────────────────────────────
*
* FIX-01 "More" dropdown does not open on desktop click.
* ROOT CAUSE: The JS in header.php correctly adds the class
* `.bcm-more-open` to the when the trigger is clicked,
* but NO CSS rule existed to show the .sub-menu when that
* class is present. The existing hover rule
* `.bcm-nav-list > li:hover .sub-menu { display:block }` does
* not fire for the click-based More button on desktop because
* the JS-added class is what governs it.
* FIX: Added display:block rule keyed on .bcm-more-open.
* Also ensured the dropdown aligns to the right edge of the
* trigger so it does not overflow the viewport on the right.
*
* FIX-02 Desktop nav categories look cramped / too small / "More" not
* at the far right edge.
* ROOT CAUSE: .bcm-nav ul uses justify-content:flex-start which
* groups all items to the left leaving a gap on the right. On
* wider desktop screens the nav items are squashed together.
* FIX: Override to justify-content:space-between so items
* spread evenly across the full nav width with "More" anchored
* at the far right. gap:0 prevents double-spacing.
*
* FIX-03 Hero banner still appears cut off / not truly full width on
* some desktop browsers.
* ROOT CAUSE: Some theme ancestor elements (e.g. bcm-header-wrap
* or any .container-influenced parent) may still impose an
* implicit max-width. Adding this file last in the CSS cascade
* with !important on the key properties overrides any remaining
* ancestor constraints.
* FIX: Belt-and-suspenders full-width rules for the rainbow
* frame and the hero section, loaded AFTER all other CSS files.
*
* FIX-04 category exclusions (body-soap, fragrance-women, makeup-blush,
* makeup-concealer) — these are PHP changes in header.php (done).
* No CSS needed for those.
*
* FIX-05 Personal Care - Shaving shows no products in mobile sidebar
* panel (desktop page shows products correctly).
* ROOT CAUSE: bcm_wats_preview_products() calls bcm_is_razor_product()
* which matches keywords like "shave"/"shaving" and excludes
* ALL shaving products from every panel — including the shaving
* category's own panel. PHP fix in functions.php; no CSS needed.
*/
/* ====================================================================
FIX-01 "More ▾" DROPDOWN — OPEN STATE
The JS adds .bcm-more-open to the on click; show the sub-menu.
==================================================================== */
.bcm-nav-more.bcm-more-open > .sub-menu,
#bcm-nav-more-item.bcm-more-open > .sub-menu,
.bcm-nav-list > li.bcm-nav-more.bcm-more-open > .sub-menu {
display: block !important;
}
/* Ensure the More dropdown aligns to the right so it doesn't clip */
.bcm-nav-more > .sub-menu.bcm-nav-more-dropdown,
#bcm-nav-more-item > .sub-menu {
left: auto !important;
right: 0 !important;
min-width: 200px !important;
max-width: 280px !important;
z-index: 9999 !important;
}
/* Style the More dropdown items consistently */
.bcm-nav-more-dropdown li a {
display: block !important;
padding: 10px 16px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--bcm-text, #333) !important;
white-space: nowrap !important;
text-decoration: none !important;
transition: background 0.15s, color 0.15s !important;
}
.bcm-nav-more-dropdown li a:hover {
background: var(--bcm-primary-light, #fce4ec) !important;
color: var(--bcm-primary, #e2618c) !important;
}
/* ====================================================================
FIX-02 DESKTOP NAV — FULL-WIDTH SPACING
Items spread evenly from left to right; "More" lands at far right.
Only applied on desktop (≥769 px) so mobile layout is untouched.
==================================================================== */
@media (min-width: 769px) {
/* Main nav list: spread all items across full available width */
.bcm-nav ul.bcm-nav-list,
ul.bcm-nav-list {
justify-content: space-between !important;
gap: 0 !important;
}
/* Individual nav links: slightly more padding so text is readable */
.bcm-nav-list > li > a,
.bcm-nav ul li a {
padding: 10px 8px !important;
font-size: 13px !important;
}
/* The "More" trigger: ensure it stays at the end and is clearly clickable */
#bcm-nav-more-trigger {
display: flex !important;
align-items: center !important;
gap: 4px !important;
cursor: pointer !important;
white-space: nowrap !important;
padding: 10px 8px !important;
}
}
/* ====================================================================
FIX-03 HERO BANNER — VIEWPORT BREAKOUT (works on ALL screen widths)
─────────────────────────────────────────────────────────────────────
ROOT CAUSE (desktop only): at ≥1400 px, --bcm-container switches to
1360 px. If any ancestor uses that variable the hero inherits the
constraint even though it has no .container class itself.
Earlier attempts used width:100% / margin:0 — those only help when
the parent is already full-width.
FIX: viewport breakout formula
width: 100vw → element is always exactly the viewport width
margin-left: calc((100% - 100vw) / 2)
When element is already full-width: 100% ≈ 100vw → margin ≈ 0 (no harm)
When element is inside a 1360px container at 1920px viewport:
calc((1360px - 1920px) / 2) = −280px → shifts left 280px to
reach the viewport's left edge.
This is mathematically guaranteed to work regardless of ancestor
max-width, with no side-effects when already full-width.
overflow:hidden on html/body prevents the extra 100vw width from
showing a horizontal scrollbar.
==================================================================== */
.bcm-hero-rainbow-frame {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
/* Viewport breakout — aligns left edge with viewport regardless of ancestor width */
margin-left: calc((100% - 100vw) / 2) !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
}
.bcm-hero-slider.bcm-hero-split {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.bcm-hero-split .swiper {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.bcm-hero-split .swiper-slide {
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* ────────────────────────────────────────────────────────────────────
END BCM v2.6.7 ADDITIONS
──────────────────────────────────────────────────────────────────── */