/*
Theme Name:   Astra Child - The Branding Works
Theme URI:    https://thebrandingworks.co.uk
Description:  Astra Child Theme for The Branding Works. All project customizations live here. Parent theme updates will NOT overwrite these files.
Author:       Ayush (Dev)
Author URI:   https://thebrandingworks.co.uk
Template:     astra
Version:      3.5.3
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
Tags:         custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

== GLOBAL BRAND TOKENS ==
Primary Color   : #1C2B3A  (Deep Navy)
Secondary Color : #0D0D0D  (Jet Black / backgrounds)
Accent Color    : #29a0f2  (Vibrant Blue / CTAs)
Text Light      : #F4F4F4
Text Dark       : #1A1A1A
Heading Font    : Montserrat (700 / 800)
Body Font       : DM Sans (400 / 500)
*/

/*
 * Google Fonts are loaded via PHP (functions.php Section 1) for performance.
 * The @import is intentionally removed — enqueuing via wp_enqueue_style
 * allows the browser to preconnect and load the font file in parallel
 * rather than blocking CSS parsing.
 */

/* =====================================================================
   DESIGN TOKENS — THE BRANDING WORKS
   ─────────────────────────────────────────────────────────────────────
   Section A: Our own --bw-* variables (used throughout this stylesheet)
   Section B: Astra --ast-global-color-* overrides (palette_1, current)
   Section C: Elementor --e-global-color-* + typography overrides

   These :root rules are output as a LATE <style> block via wp_head at
   priority 999 (see functions.php Section 11) to guarantee they
   override Astra's and Elementor's own inline style blocks.
   The rules below act as a static fallback for the same effect.
   ===================================================================== */
   :root {

    /* ── A. BW Brand Tokens ── */
    --bw-primary:       #1C2B3A;
    --bw-secondary:     #0D0D0D;
    --bw-accent:        #29a0f2;
    --bw-accent-dark:   #1a8cd8;
    --bw-btn-gradient:  linear-gradient(135deg, #29a0f2 0%, #1a8cd8 100%);
    --bw-btn-shadow:    0 4px 15px rgba(41, 160, 242, 0.30);
    --bw-brand-blue:    #29a0f2;   /* Brand Vibrant Blue — unified accent (was #00AEEF) */
    --bw-brand-blue-dk: #1a8cd8;   /* Hover/darker variant                                   */
    --bw-light-bg:    #F8F9FA;
    --bw-white:       #FFFFFF;
    --bw-text:        #2D2D2D;
    --bw-text-muted:  #6B7280;
    --bw-border:      #E5E7EB;
    --bw-font-head:   'Montserrat', sans-serif;
    --bw-font-body:   'DM Sans', sans-serif;
    --bw-radius:      6px;
    --bw-radius-lg:   12px;
    --bw-shadow:      0 4px 20px rgba(0,0,0,0.08);
    --bw-shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
    --bw-transition:  0.25s ease;
    /* Vertical rhythm tokens */
    --bw-space-section: 100px;   /* Tall section top/bottom padding */
    --bw-space-block:    80px;   /* Standard block top/bottom padding */
    --bw-space-element:  40px;   /* Within-block spacing */

    /* ── B. Astra Global Color Palette Override ──
       Astra reads these from the DB (astra-color-palettes / palette_1)
       and outputs them in an inline <style> in <head>. The DB is updated
       by the one-time script bw_brand_db_setup.php. These CSS declarations
       are a hard CSS-layer fallback in case the DB is reset.
       Mapping rationale (from Astra source):
         color-0 → primary accent / link color
         color-1 → secondary
         color-2 → heading text
         color-3 → body text
         color-4 → light surface background
         color-5 → white / card background
         color-6 → dark surface / footer
         color-7 → near-black background
         color-8 → very light grey border/divider     */
    --ast-global-color-0: #29a0f2;   /* Blue  — links, active states      */
    --ast-global-color-1: #1C2B3A;   /* Navy   — secondary accent          */
    --ast-global-color-2: #1C2B3A;   /* Navy   — heading colour            */
    --ast-global-color-3: #2D2D2D;   /* Grey   — body text                 */
    --ast-global-color-4: #F8F9FA;   /* Light bg surface                   */
    --ast-global-color-5: #FFFFFF;   /* White                              */
    --ast-global-color-6: #1C2B3A;   /* Navy   — dark section bg           */
    --ast-global-color-7: #0D0D0D;   /* Jet black background               */
    --ast-global-color-8: #F2F2F2;   /* Very light grey — borders          */

    /* Astra semantic overrides that reference the palette */
    --ast-link-color:            #29a0f2;
    --ast-link-h-color:          #1a8cd8;
    --ast-heading-color:         #1C2B3A;
    --ast-body-color:            #2D2D2D;
    --ast-color-btn-bg-color:    #29a0f2;
    --ast-color-btn-font-color:  #FFFFFF;

    /* ── C. Elementor Global Color Override ──
       The Elementor kit (ID 882) has these set via bw_brand_db_setup.php.
       These CSS declarations ensure widgets still get correct values even
       before Elementor regenerates its CSS cache.                        */
    --e-global-color-primary:   #1C2B3A;
    --e-global-color-secondary: #29a0f2;
    --e-global-color-text:      #2D2D2D;
    --e-global-color-accent:    #29a0f2;

    /* ── C2. Elementor Global Typography Override ──
       Maps to Elementor's internal font system.
       The bw_brand_db_setup.php script writes Montserrat/DM Sans into
       the kit; these vars ensure they're applied even before cache clears. */
    --e-global-typography-primary-font-family:   'Montserrat';
    --e-global-typography-primary-font-weight:   700;
    --e-global-typography-secondary-font-family: 'Montserrat';
    --e-global-typography-secondary-font-weight: 600;
    --e-global-typography-text-font-family:      'DM Sans';
    --e-global-typography-text-font-weight:      400;
    --e-global-typography-accent-font-family:    'DM Sans';
    --e-global-typography-accent-font-weight:    600;
}

/* =====================================================================
   GLOBAL TYPOGRAPHY — FORCED
   Using !important to win against Astra Customizer inline styles,
   Elementor widget-level inline styles, and any theme CSS.
   ===================================================================== */

body {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    color: #2D2D2D !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force ALL headings to Montserrat — covers Astra, Elementor, WooCommerce */
h1, h2, h3, h4,
.entry-title,
.page-title,
.site-title,
.woocommerce-loop-product__title,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.elementor-heading-title,
.ast-breadcrumbs-list,
.ast-header-break-point .site-title {
    font-family: 'Montserrat', sans-serif !important;
    color: #1C2B3A !important;
    line-height: 1.15;
    margin-top: 0;
}

h5, h6 {
    font-family: 'DM Sans', sans-serif !important;
    color: #1C2B3A !important;
}

/* H1 */
h1, .elementor-heading-title.elementor-size-xxl {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* H2 */
h2, .elementor-heading-title.elementor-size-xl {
    font-size: clamp(1.625rem, 3.5vw, 2.625rem);
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.18;
}

/* H3 */
h3, .elementor-heading-title.elementor-size-large {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: 1.25;
}

/* H4 */
h4, .elementor-heading-title.elementor-size-medium {
    font-size: clamp(1.1rem, 1.8vw, 1.375rem);
    font-weight: 600 !important;
    line-height: 1.3;
}

/* H5–H6 */
h5, h6, .elementor-heading-title.elementor-size-small {
    font-size: 1rem;
    font-weight: 600 !important;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Body text elements */
p, li, td, span, div,
input, select, textarea,
.elementor-widget-text-editor,
.woocommerce-product-details__short-description,
.wc-block-components-product-name {
    font-family: 'DM Sans', sans-serif !important;
    line-height: 1.65;
}

/* Links */
a {
    color: #29a0f2;
    transition: color 0.2s ease;
}

a:hover {
    color: #1a8cd8;
    text-decoration: none;
}

/* Muted / meta text helper class */
.bw-muted {
    color: #6B7280 !important;
    font-size: 0.875rem;
}

/* ===== HEADER — scrolls with the page (not sticky) ===== */
#masthead.site-header,
.ast-header-break-point .ast-mobile-header-wrap,
.ast-desktop-header {
    position: relative;
    top: auto;
    z-index: 9999;
    background: var(--bw-white);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: box-shadow var(--bw-transition);
}

/* =====================================================================
   GLOBAL BUTTON SYSTEM
   Three variants: .bw-btn (Gold CTA), .bw-btn-navy (Primary), .bw-btn-ghost (Outline)
   Hover effect: cubic-bezier "spring" scale — more premium than translateY.
   Used by: Elementor Button widget, WooCommerce buttons, Astra header CTA.
   ===================================================================== */

/* --- Base shared styles --- */
.bw-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button,
.ast-header-cta .ast-custom-button,
.wc-block-components-checkout-place-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    font-family: var(--bw-font-head) !important;
    font-weight: 700 !important;
    font-size: 0.8125rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    will-change: transform;
    /* Spring easing: overshoots slightly on scale-up, feels premium/alive */
    transition:
        background-color 0.22s ease,
        color            0.22s ease,
        border-color     0.22s ease,
        box-shadow       0.22s ease,
        transform        0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Variant 1: Gold CTA (default for all WooCommerce + Elementor) --- */
.bw-btn,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button,
.ast-header-cta .ast-custom-button,
.wc-block-components-checkout-place-order-button {
    background-color: var(--bw-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--bw-accent) !important;
    box-shadow: 0 4px 18px rgba(41, 160, 242, 0.28);
}

.bw-btn:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.ast-header-cta .ast-custom-button:hover {
    background-color: var(--bw-accent-dark) !important;
    border-color: var(--bw-accent-dark) !important;
    color: var(--bw-secondary) !important;
    box-shadow: 0 8px 28px rgba(41, 160, 242, 0.42);
    transform: scale(1.05);
    text-decoration: none;
}

/* --- Variant 2: Navy Primary button (add class .bw-btn-navy in Elementor) --- */
.bw-btn-navy {
    background-color: var(--bw-primary) !important;
    color: var(--bw-white) !important;
    border-color: var(--bw-primary) !important;
    box-shadow: 0 4px 18px rgba(28, 43, 58, 0.22);
}

.bw-btn-navy:hover {
    background-color: #1570c4 !important;
    border-color: #1570c4 !important;
    color: var(--bw-white) !important;
    box-shadow: 0 8px 28px rgba(28, 43, 58, 0.34);
    transform: scale(1.05);
}

/* --- Variant 3: Ghost/Outline button (add class .bw-btn-ghost in Elementor) --- */
.bw-btn-ghost {
    background-color: transparent !important;
    color: var(--bw-primary) !important;
    border-color: var(--bw-primary) !important;
    box-shadow: none;
}

.bw-btn-ghost:hover {
    background-color: var(--bw-primary) !important;
    color: var(--bw-white) !important;
    border-color: var(--bw-primary) !important;
    box-shadow: 0 6px 20px rgba(28, 43, 58, 0.22);
    transform: scale(1.05);
}

/* WooCommerce secondary/alt buttons inherit Gold by default.
   Override here if alt buttons should be Navy instead. */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--bw-accent) !important;
    color: var(--bw-secondary) !important;
}

/* Elementor: map Elementor's CSS class names to our variants */
.elementor-button-primary { color: var(--bw-white) !important; }
.elementor-button-secondary { background-color: var(--bw-primary) !important; color: var(--bw-white) !important; border-color: var(--bw-primary) !important; }

/* =====================================================================
   .bw-master-button — THE CANONICAL BRAND BUTTON CLASS
   ─────────────────────────────────────────────────────────────────────
   How to use in Elementor:
     Edit any Button widget → Advanced tab → CSS Classes → type: bw-master-button
   The class is also auto-applied to WooCommerce loop "Add to Cart"
   buttons via PHP (functions.php Section 12).

   Spec: Blue gradient bg, white text, 8px radius, spring scale on hover. (v2)
   ===================================================================== */

.bw-master-button,
.bw-master-button.elementor-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 38px !important;
    background: var(--bw-btn-gradient) !important;
    background-color: #29a0f2 !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 2px solid #29a0f2 !important;
    border-radius: 8px !important;        /* 8px as specified */
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(41, 160, 242, 0.30);
    will-change: transform;
    transition:
        background-color 0.22s ease,
        border-color     0.22s ease,
        box-shadow       0.22s ease,
        transform        0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bw-master-button:hover,
.bw-master-button.elementor-button:hover,
.woocommerce ul.products li.product .bw-master-button:hover {
    background: linear-gradient(135deg, #1a8cd8 0%, #1070b8 100%) !important;
    background-color: #1a8cd8 !important;
    border-color: #1a8cd8 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(41, 160, 242, 0.46) !important;
}

.bw-master-button:focus,
.bw-master-button.elementor-button:focus {
    outline: 3px solid rgba(41, 160, 242, 0.5);
    outline-offset: 3px;
}

/* ===== WOOCOMMERCE PRODUCT CARDS ===== */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--bw-font-head);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--bw-primary);
}

.woocommerce ul.products li.product {
    border-radius: var(--bw-radius-lg);
    overflow: hidden;
    box-shadow: var(--bw-shadow);
    transition: box-shadow var(--bw-transition), transform var(--bw-transition);
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--bw-shadow-lg);
    transform: translateY(-4px);
}

/* ===== WOOCOMMERCE PRICE COLORS ===== */
.woocommerce .price,
.woocommerce .price ins {
    color: var(--bw-primary) !important;
    font-weight: 700;
}

/* ===== FOOTER ===== */
.site-footer {
    background-color: var(--bw-secondary);
    color: var(--bw-light-bg);
}

.site-footer a {
    color: var(--bw-accent);
}

.site-footer a:hover {
    color: var(--bw-white);
}


/* =====================================================================
   HOMEPAGE LAYOUT — THE BRANDING WORKS
   Built to match the PSD direction (screenshots dated 2026-04-02).

   SECTION INDEX:
     HP-1  Header (white bg + subtle shadow, refined)
     HP-2  Navigation Bar (cyan-blue strip)
     HP-3  Hero Section
     HP-4  Category Cards  (.bw-category-card)
     HP-5  Categories Section grid wrapper
     HP-6  POD (Print-on-Demand) Section
     HP-7  Footer (PSD design)

   All paddings follow the 80px / 100px vertical rhythm defined
   in --bw-space-block / --bw-space-section tokens above.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   HP-1  HEADER — WHITE BACKGROUND + SHADOW
   ───────────────────────────────────────────────────────────────────── */

#masthead.site-header,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-header-main-navigation,
.ast-desktop-header {
    background-color: #FFFFFF !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
}

/* Ensure logo area stays white on scroll */
.ast-primary-header-bar .site-branding,
.ast-primary-header-bar .ast-site-identity {
    background: transparent !important;
}

/* Search bar polish */
.ast-search-icon,
.ast-header-custom-widget .ast-search-menu-icon {
    color: var(--bw-primary) !important;
}

.ast-search-menu-icon input[type="search"] {
    border: 1px solid var(--bw-border);
    border-radius: 50px;
    padding: 8px 20px;
    font-family: var(--bw-font-body) !important;
    font-size: 0.875rem;
    background: #F8F9FA;
    color: var(--bw-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ast-search-menu-icon input[type="search"]:focus {
    outline: none;
    border-color: var(--bw-brand-blue);
    box-shadow: 0 0 0 3px rgba(41, 160, 242, 0.15);
}


/* ─────────────────────────────────────────────────────────────────────
   HP-2  NAVIGATION BAR — CYAN-BLUE STRIP (below main header)
   In Astra: Customizer → Header → Below Header → Background Color
   These CSS rules enforce the colour even if Customizer is reset.
   ───────────────────────────────────────────────────────────────────── */

.ast-below-header,
.ast-below-header-wrap,
#ast-below-header-navigation,
.ast-below-header-bar,
.ast-below-header .ast-primary-header-bar {
    background-color: var(--bw-brand-blue) !important;
    box-shadow: none !important;
}

.ast-below-header .main-navigation a,
.ast-below-header .ast-navigation-menu > li > a,
.ast-below-header-navigation .menu-link {
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 14px !important;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ast-below-header .main-navigation a:hover,
.ast-below-header .ast-navigation-menu > li.current-menu-item > a,
.ast-below-header .ast-navigation-menu > li:hover > a {
    color: var(--bw-primary) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* Dropdown menus inherit navy */
.ast-below-header .sub-menu {
    background-color: var(--bw-primary) !important;
    border-top: 2px solid var(--bw-brand-blue);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.ast-below-header .sub-menu a {
    color: #FFFFFF !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
}

.ast-below-header .sub-menu a:hover {
    background-color: var(--bw-brand-blue) !important;
    color: #FFFFFF !important;
}

/* Star rating strip (between nav and hero) — remove default styling */
.woocommerce .star-rating,
.ast-review-stars,
.ast-stars-wrap {
    color: var(--bw-accent) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   HP-3  HERO SECTION
   Elementor CSS Class: bw-hero-section  (outer section)
   Inner CSS Classes:   bw-hero-left / bw-hero-right

   PSD layout: two-column flex
     Left 55%:  Eyebrow tag, H1, subtitle, CTA button
     Right 45%: Image collage (two rows — see Elementor guide)
   ───────────────────────────────────────────────────────────────────── */

.bw-hero-section {
    padding:          0 !important;
    background-color: #FFFFFF !important;
}

/* Left column — text & CTA */
.bw-hero-left {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    padding: var(--bw-space-block) 48px var(--bw-space-block) 0 !important;
}

/* Eyebrow tag above H1 */
.bw-hero-eyebrow {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bw-brand-blue) !important;
    margin-bottom: 14px;
    display: block;
}

/* Hero H1 — brand blue as per PSD */
.bw-hero-left h1,
.bw-hero-left .elementor-heading-title {
    color: var(--bw-brand-blue) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em;
    margin-bottom: 18px !important;
}

/* Hero subtitle */
.bw-hero-subtitle,
.bw-hero-left .elementor-widget-text-editor p {
    font-size: 1rem !important;
    color: #6B7280 !important;
    line-height: 1.6;
    margin-bottom: 36px !important;
    max-width: 360px;
}

/* Hero CTA — uses our brand gold button */
.bw-hero-left .elementor-button-wrapper {
    margin-top: 4px;
}

/* Hero CTA — blue variant that matches PSD more closely */
.bw-hero-cta-blue {
    background-color: var(--bw-brand-blue) !important;
    color: #FFFFFF !important;
    border-color: var(--bw-brand-blue) !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 32px !important;
    transition: background-color 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(41, 160, 242, 0.3);
}

.bw-hero-cta-blue:hover {
    background-color: var(--bw-brand-blue-dk) !important;
    border-color: var(--bw-brand-blue-dk) !important;
    color: #FFFFFF !important;
    transform: scale(1.04);
}

/* Right column — image collage */
.bw-hero-right {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    align-self: stretch;
}

.bw-hero-right .elementor-widget-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive hero */
@media (max-width: 768px) {
    .bw-hero-left {
        padding: 60px 24px !important;
    }
    .bw-hero-right {
        display: none !important; /* Stack: hide image on mobile, show full-width text */
    }
    .bw-hero-left h1,
    .bw-hero-left .elementor-heading-title {
        font-size: 2rem !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   HP-3b  HERO TEXT OVERLAY  (.line-1 / .line-2 / .line-3)
   Used inside an Elementor HTML widget placed over the hero image.

   HTML structure:
     <h3 class="line-1">Built for</h3>
     <h3 class="line-1">Performance</h3>
     <h4 class="line-2">Branded for You</h4>
     <p  class="line-3">Personalised activewear for gyms, PTs & teams</p>

   Target look (Screenshot-2):
     • line-1 — large, extra-bold, brand blue, tight line-height, no gap between the two h3 lines
     • line-2 — slightly smaller, bold, same brand blue, small top gap
     • line-3 — regular weight, muted grey, comfortable reading size
   ───────────────────────────────────────────────────────────────────── */

/* ── Line 1: "Built for" + "Performance" (two consecutive h3 blocks) ── */
h3.line-1 {
    font-family:    'Montserrat', sans-serif !important;
    font-size:      clamp(1.35rem, 2.4vw, 1.75rem) !important; /* ~22–28px */
    font-weight:    800 !important;
    color:          #29a0f2 !important;
    line-height:    1.1  !important;
    letter-spacing: -0.01em !important;
    margin:         0 0 1px 0 !important;  /* tiny gap between "Built for" and "Performance" */
    padding:        0 !important;
    display:        block !important;
    text-transform: none !important;
    border:         none !important;
    background:     none !important;
}

/* ── Line 2: "Branded for You" (h4 directly after the two h3 lines) ─── */
h4.line-2 {
    font-family:    'Montserrat', sans-serif !important;
    font-size:      clamp(1.1rem, 1.9vw, 1.4rem) !important;  /* ~18–22px */
    font-weight:    700 !important;
    color:          #29a0f2 !important;
    line-height:    1.2  !important;
    letter-spacing: -0.005em !important;
    margin:         4px 0 10px 0 !important;  /* small top gap, comfortable bottom gap */
    padding:        0 !important;
    display:        block !important;
    text-transform: none !important;
    border:         none !important;
    background:     none !important;
}

/* ── Line 3: subtitle / description paragraph ────────────────────────── */
p.line-3 {
    font-family:  'DM Sans', sans-serif !important;
    font-size:    0.9375rem !important;   /* 15px */
    font-weight:  400 !important;
    color:        #6B7280 !important;
    line-height:  1.55 !important;
    margin:       0 !important;
    padding:      0 !important;
    display:      block !important;
}

/* ── Responsive: scale text down slightly on smaller screens ─────────── */
@media (max-width: 1024px) {
    h3.line-1 { font-size: 1.25rem !important; }
    h4.line-2 { font-size: 1.05rem !important; }
    p.line-3  { font-size: 0.875rem !important; }
}
@media (max-width: 768px) {
    h3.line-1 { font-size: 1.1rem !important; }
    h4.line-2 { font-size: 0.95rem !important; }
    p.line-3  { font-size: 0.8125rem !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   HP-4  CATEGORY CARD  (.bw-category-card)
   ─────────────────────────────────────────────────────────────────────
   HOW TO USE IN ELEMENTOR:
   1. Add a Container widget → Advanced → CSS Classes → "bw-category-card"
   2. Set Container min-height: 200px (or as desired)
   3. Inside Container, add ONE Image widget
   4. Below the Image widget, add a Text/Heading widget
      → Advanced → CSS Classes → "bw-category-label"
   5. The blue bar and zoom happen automatically.

   The card darkens slightly on hover so the gold label pops.
   ───────────────────────────────────────────────────────────────────── */

.bw-category-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 3px;
    cursor: pointer;
    background-color: #111111; /* Dark base shows if image loads late */
    display: block;
}

/* Zoom target — works for Elementor Image widget, plain <img>, or bg */
.bw-category-card img,
.bw-category-card .elementor-image img,
.bw-category-card .elementor-widget-image img,
.bw-category-card figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    transform-origin: center center;
}

/* === ZOOM EFFECT on hover === */
.bw-category-card:hover img,
.bw-category-card:hover .elementor-image img,
.bw-category-card:hover .elementor-widget-image img {
    transform: scale(1.10);
}

/* === BLUE LABEL BAR — absolute bottom === */
.bw-category-label,
.bw-category-card .elementor-widget-heading .elementor-heading-title,
.bw-category-card .bw-label-inner {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: var(--bw-brand-blue) !important;
    color: #FFFFFF !important;
    text-align: center !important;
    padding: 9px 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    z-index: 3;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bw-category-card:hover .bw-category-label,
.bw-category-card:hover .elementor-heading-title,
.bw-category-card:hover .bw-label-inner {
    background-color: var(--bw-primary) !important; /* Shifts to Navy on hover */
}

/* Subtle dark gradient over the image so the blue bar reads cleanly */
.bw-category-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bw-category-card:hover::before {
    opacity: 1;
}

/* Ensure Elementor heading widget inside card resets its margin/padding */
.bw-category-card .elementor-widget-heading {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ─────────────────────────────────────────────────────────────────────
   HP-5  CATEGORIES SECTION — WRAPPER & GRID
   Elementor CSS Class on outer Section: bw-categories-section
   ───────────────────────────────────────────────────────────────────── */

.bw-categories-section,
.bw-categories-section > .e-con-inner,
.elementor-section.bw-categories-section > .elementor-container {
    padding-top: var(--bw-space-block) !important;
    padding-bottom: var(--bw-space-block) !important;
    background-color: #FFFFFF !important;
}

/* Section sub-labels (Sport, Brands, etc.) — blue uppercase */
.bw-section-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--bw-brand-blue) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px !important;
    margin-top: 48px !important;
    display: block;
}

/* Row of 5 equal-width category cards */
.bw-cat-row-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

/* Row of 3 equal-width (sport/lifestyle) cards */
.bw-cat-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
    .bw-cat-row-5,
    .bw-cat-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   HP-6  PRINT-ON-DEMAND SECTION
   Elementor CSS Class on outer Section: bw-pod-section
   ───────────────────────────────────────────────────────────────────── */

.bw-pod-section,
.elementor-section.bw-pod-section > .elementor-container,
.bw-pod-section > .e-con-inner {
    padding-top: var(--bw-space-section) !important;
    padding-bottom: var(--bw-space-section) !important;
    background-color: #FFFFFF !important;
}

/* "Print-On-Demand Service" heading */
.bw-pod-section .elementor-heading-title,
.bw-pod-heading {
    color: var(--bw-brand-blue) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    font-weight: 700 !important;
    margin-bottom: 14px !important;
}

.bw-pod-intro {
    max-width: 700px;
    color: var(--bw-text) !important;
    font-size: 0.9375rem !important;
    line-height: 1.72;
    margin-bottom: 56px !important;
}

/* Steps container — two rows */
.bw-pod-steps-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 24px;
}

.bw-pod-step {
    flex: 1;
    min-width: 160px;
    text-align: center;
    position: relative;
}

/* Step illustration image */
.bw-pod-step .elementor-image img,
.bw-pod-step-img {
    width: 100%;
    max-width: 185px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Numbered blue circle — fixed to bottom-left of illustration */
.bw-pod-step-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.bw-step-number {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-64px); /* visually aligns to bottom-left of illustration */
    width: 34px;
    height: 34px;
    background-color: var(--bw-brand-blue);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 3px 10px rgba(41, 160, 242, 0.45);
    z-index: 2;
    border: 2px solid #FFFFFF;
}

/* Step title below illustration */
.bw-pod-step-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--bw-brand-blue) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-top: 22px !important;
    display: block;
}

/* Elementor Icon Box override for POD steps */
.bw-pod-section .elementor-icon-box-wrapper {
    text-align: center;
}

.bw-pod-section .elementor-icon-box-icon .elementor-icon {
    width: 56px;
    height: 56px;
    background-color: var(--bw-brand-blue);
    border-radius: 50%;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(41, 160, 242, 0.35);
    transition: background-color 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bw-pod-section .elementor-icon-box-icon:hover .elementor-icon {
    background-color: var(--bw-primary);
    transform: scale(1.08);
}

.bw-pod-section .elementor-icon-box-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--bw-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0;
    margin-bottom: 10px !important;
}

.bw-pod-section .elementor-icon-box-description {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: var(--bw-text-muted) !important;
    line-height: 1.6;
}

/* Step number badge — for use with Icon Box "badge" text */
.bw-pod-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--bw-brand-blue);
    color: #FFFFFF;
    border-radius: 50%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

/* Mobile responsive POD */
@media (max-width: 768px) {
    .bw-pod-steps-row {
        flex-wrap: wrap;
    }
    .bw-pod-step {
        flex: 0 0 calc(50% - 12px);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   HP-7  FOOTER — PSD DESIGN
   Structure from PSD:
     - Cyan-blue social icons bar (top)
     - Dark grey main footer (#2F3640)
     - Bottom strip with sitemap link
   ───────────────────────────────────────────────────────────────────── */

/* Override previous site-footer with PSD-accurate colours */
.site-footer {
    background-color: #2F3640 !important;
    color: #BBBBBB !important;
}

/* Social bar — cyan-blue top strip */
.ast-footer-top-section,
.ast-footer-above-section,
.bw-footer-social-bar,
[data-elementor-type="footer"] .bw-footer-social-bar {
    background-color: var(--bw-brand-blue) !important;
    padding: 14px 0 !important;
}

.bw-footer-social-bar a,
.bw-footer-social-bar .elementor-social-icon {
    color: #FFFFFF !important;
    background-color: transparent !important;
    font-size: 1.1rem;
    margin: 0 6px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.bw-footer-social-bar a:hover,
.bw-footer-social-bar .elementor-social-icon:hover {
    opacity: 0.8;
    transform: scale(1.15);
}

/* Footer main content area */
.ast-footer-main-area,
[data-elementor-type="footer"] .bw-footer-main {
    background-color: #2F3640 !important;
    padding: 60px 0 40px !important;
}

/* Footer widget titles */
.footer-widget-area .widget-title,
.ast-widgets-area .widget-title,
[data-elementor-type="footer"] h4,
[data-elementor-type="footer"] h5 {
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px !important;
}

/* Footer body text */
.ast-footer-main-area p,
[data-elementor-type="footer"] p {
    color: #9BABB8 !important;
    font-size: 0.875rem !important;
    line-height: 1.72;
}

/* Footer nav links */
.ast-footer-main-area a,
[data-elementor-type="footer"] a {
    color: #9BABB8 !important;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.ast-footer-main-area a:hover,
[data-elementor-type="footer"] a:hover {
    color: var(--bw-brand-blue) !important;
    text-decoration: none;
}

/* Footer copyright bar (bottom-most strip) */
.ast-footer-copyright,
.ast-footer-below-section,
[data-elementor-type="footer"] .bw-footer-copyright {
    background-color: #1E2A32 !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.ast-footer-copyright p,
.ast-footer-copyright a,
[data-elementor-type="footer"] .bw-footer-copyright p,
[data-elementor-type="footer"] .bw-footer-copyright a {
    color: #7A8A96 !important;
    font-size: 0.8125rem !important;
}

.ast-footer-copyright a:hover,
[data-elementor-type="footer"] .bw-footer-copyright a:hover {
    color: var(--bw-brand-blue) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   GLOBAL: SECTION HEADING ACCENT (applies site-wide, not just homepage)
   Headings that should use cyan-blue get class .bw-heading-blue
   ───────────────────────────────────────────────────────────────────── */

.bw-heading-blue,
.bw-heading-blue .elementor-heading-title {
    color: var(--bw-brand-blue) !important;
}

/* Page-level section divider spacer utility */
.bw-spacer-80  { height: 80px; }
.bw-spacer-100 { height: 100px; }
.bw-spacer-40  { height: 40px; }


/* =====================================================================
   GLOBAL BUTTON GRADIENT SYSTEM (Blue Pivot)
   All buttons across the site use the gradient + box-shadow.
   Overrides the previous flat-color button styles above.
   ===================================================================== */

.bw-btn,
.bw-master-button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.checkout-button,
.ast-header-cta .ast-custom-button,
.wc-block-components-checkout-place-order-button,
.bw-hero-cta-blue {
    background: var(--bw-btn-gradient) !important;
    background-color: #29a0f2 !important;      /* Fallback for browsers that ignore gradient in !important */
    color: #FFFFFF !important;
    border-color: #29a0f2 !important;
    box-shadow: var(--bw-btn-shadow) !important;
}

.bw-btn:hover,
.bw-master-button:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.ast-header-cta .ast-custom-button:hover,
.bw-hero-cta-blue:hover {
    background: linear-gradient(135deg, #1a8cd8 0%, #1070b8 100%) !important;
    background-color: #1a8cd8 !important;
    color: #FFFFFF !important;
    border-color: #1a8cd8 !important;
    box-shadow: 0 6px 20px rgba(41, 160, 242, 0.45) !important;
    transform: scale(1.04) !important;
}

/* Links — now blue */
a { color: #29a0f2; }
a:hover { color: #1a8cd8; text-decoration: none; }


/* =====================================================================
   SHOP PAGE — LAYOUT & PRODUCT GRID
   ===================================================================== */

/* Shop archive — 3-column product grid (4-col on wider screens) */
.woocommerce-page .site-content,
.post-type-archive-product .site-content {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Astra shop layout: let flex handle widths — no hard overrides here */
.woocommerce-page .content-area {
    min-width: 0;
}

.woocommerce-page .widget-area {
    min-width: 0;
}

/* WooCommerce product grid — 4 columns default */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    float: none !important;
    width: 100% !important;
}

/* Also 4 columns when no sidebar */
.woocommerce-page.ast-no-sidebar ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* ── Product Card — Reference Design ── */
.woocommerce ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border: 1px solid #e8ecf0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 22px rgba(41, 160, 242, 0.14) !important;
    border-color: #29a0f2 !important;
    transform: translateY(-2px) !important;
}

/* Product image block */
.woocommerce ul.products li.product a img {
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
    background: #f5f7fa !important;
    padding: 14px !important;
    transition: transform 0.35s ease !important;
    box-sizing: border-box !important;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04) !important;
}

/* Product info area */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    padding: 8px 12px 3px !important;
    line-height: 1.4 !important;
    min-height: 40px !important;
}

/* Category label above title (shown by some WC themes) */
.woocommerce ul.products li.product .ast-woo-product-category {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #6B7280 !important;
    padding: 10px 12px 0 !important;
    display: block !important;
}

/* Price */
.woocommerce ul.products li.product .price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    padding: 2px 12px 8px !important;
    display: block !important;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
    color: #29a0f2 !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
}

/* "Select Options" / "Add to Cart" buttons */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .product_type_variable {
    display: block !important;
    width: calc(100% - 24px) !important;
    margin: auto 12px 12px !important;
    padding: 9px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: var(--bw-btn-gradient) !important;
    background-color: #29a0f2 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(41,160,242,0.22) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
    align-self: flex-end !important;
}

.woocommerce ul.products li.product .button:hover {
    background: linear-gradient(135deg, #1a8cd8 0%, #1070b8 100%) !important;
    box-shadow: 0 4px 14px rgba(41,160,242,0.38) !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
}

/* Shop page top bar */
.woocommerce .woocommerce-result-count {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    color: #6B7280;
    margin-bottom: 20px;
    float: none !important;
    display: inline-block;
}

.woocommerce .woocommerce-ordering select {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 8px 14px;
    color: #1C2B3A;
    background: #FFFFFF;
    cursor: pointer;
}

.woocommerce .woocommerce-ordering select:focus {
    outline: none;
    border-color: #29a0f2;
    box-shadow: 0 0 0 3px rgba(41, 160, 242, 0.12);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px !important;
    border-color: #E5E7EB !important;
    color: #1C2B3A;
    margin: 0 3px;
    padding: 8px 14px;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #29a0f2 !important;
    color: #FFFFFF !important;
    border-color: #29a0f2 !important;
}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin-bottom: 24px;
}

.woocommerce .woocommerce-breadcrumb a {
    color: #29a0f2 !important;
}


/* =====================================================================
   BEROCKET AJAX FILTER SIDEBAR — COMPACT PROFESSIONAL STYLING
   Classes confirmed from plugin source audit.
   ===================================================================== */

/* Overall sidebar wrapper */
#secondary.widget-area,
.ast-left-sidebar #secondary,
.ast-right-sidebar #secondary {
    padding: 0 16px 0 0;
}

/* Each filter widget container */
.berocket_single_filter_widget,
.bapf_wid_group {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 12px !important;
    padding: 0;
    overflow: visible;   /* was hidden — was clipping filter text labels */
}

/* Filter block root */
.bapf_sfilter {
    padding: 0;
}

/* Filter TITLE — Montserrat, bold, uppercase, 14px */
.bapf_head,
.bapf_head h3,
.berocket_single_filter_widget .widget-title,
.berocket_aapf_widget-title_div {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #1C2B3A !important;
    background: #F8F9FA !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E7EB;
    line-height: 1.3 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Filter body / item list */
.bapf_body {
    padding: 8px 0 4px !important;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #29a0f2 #f0f0f0;
}

.bapf_body::-webkit-scrollbar {
    width: 4px;
}
.bapf_body::-webkit-scrollbar-track { background: #f0f0f0; }
.bapf_body::-webkit-scrollbar-thumb { background: #29a0f2; border-radius: 2px; }

/* List items — tighten vertical spacing */
.bapf_body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bapf_body ul li,
.bapf_ckbox .bapf_body ul li {
    padding: 3px 14px !important;  /* 8px between items total (3px top + 3px bottom) */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    line-height: 1.4;
}

/* ─── CUSTOM CHECKBOX — Brand Blue square ─── */
/* Hide the native checkbox */
.bapf_ckbox .bapf_body input[type="checkbox"],
.berocket_aapf_widget input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* The label becomes the clickable area */
.bapf_ckbox .bapf_body label,
.berocket_aapf_widget label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #374151 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4;
    padding: 0 !important;
    margin: 0 !important;
    user-select: none;
    transition: color 0.15s ease;
}

.bapf_ckbox .bapf_body label:hover {
    color: #29a0f2 !important;
}

/* Custom checkbox square — ::before on label */
.bapf_ckbox .bapf_body label::before,
.berocket_aapf_widget label::before {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background: #FFFFFF;
    border: 1.5px solid #D1D5DB;
    border-radius: 3px;   /* Square with slight rounding */
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    display: inline-block;
}

/* Checked state — fill with blue */
.bapf_ckbox .bapf_body input[type="checkbox"]:checked + label::before,
.berocket_aapf_widget input[type="checkbox"]:checked + label::before {
    background: #29a0f2;
    border-color: #29a0f2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1.5 5 4.5 8 10.5 2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}

/* Hover ring on the custom checkbox */
.bapf_ckbox .bapf_body label:hover::before {
    border-color: #29a0f2;
    box-shadow: 0 0 0 3px rgba(41, 160, 242, 0.12);
}

/* Disabled items */
.brapf_disabled_checkbox label,
.brapf_disabled_checkbox label::before {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Count badge */
.bapf_sfilter .bapf_count,
.berocket_aapf_widget .bapf_count {
    font-size: 10px;
    color: #9CA3AF;
    margin-left: 2px;
}

/* ─── PRICE SLIDER — Ion.RangeSlider with Brand Blue ─── */

/* Bar track */
.bapf_slidr .irs-line,
.bapf_slidr .irs-line-left,
.bapf_slidr .irs-line-mid,
.bapf_slidr .irs-line-right,
.berocket_filter_price_slider .ui-slider {
    background: #E5E7EB !important;
    border-color: #E5E7EB !important;
    height: 4px !important;
    border-radius: 2px !important;
}

/* Active range fill */
.bapf_slidr .irs-bar,
.bapf_slidr .irs-bar-edge,
.berocket_filter_price_slider .ui-slider-range,
.ui-slider-range.ui-widget-header {
    background: #29a0f2 !important;
    border-color: #29a0f2 !important;
    height: 4px !important;
    border-radius: 2px !important;
}

/* Handles */
.bapf_slidr .irs-handle,
.bapf_slidr .irs-handle > i:first-child,
.berocket_filter_price_slider .ui-slider-handle {
    background: #29a0f2 !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    top: -7px !important;
    box-shadow: 0 2px 6px rgba(41, 160, 242, 0.40) !important;
    cursor: grab !important;
    transition: transform 0.15s ease !important;
}

.bapf_slidr .irs-handle:active,
.bapf_slidr .irs-handle.state_hover {
    transform: scale(1.15) !important;
}

/* Price value labels */
.bapf_slidr .irs-min,
.bapf_slidr .irs-max,
.bapf_slidr .irs-from,
.bapf_slidr .irs-to,
.bapf_slidr .irs-single,
.bapf_from, .bapf_to, .bapf_val {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    background: #EBF4FE !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
}

/* jQuery UI price slider (alternate) */
.bapf_slidr_jqrui .ui-widget-content {
    background: #E5E7EB !important;
    border: none !important;
}

.bapf_slidr_jqrui .ui-widget-header {
    background: #29a0f2 !important;
}

.bapf_slidr_jqrui .ui-slider-handle.ui-state-default {
    background: #29a0f2 !important;
    border: 2px solid #FFF !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    top: -6px !important;
}

/* Slider wrapper padding */
.bapf_slidr_all,
.bapf_slidr .bapf_slidr_main {
    padding: 8px 14px 14px !important;
}

/* ─── SELECTED FILTERS CHIP AREA ─── */
.berocket_aapf_widget_selected_area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
}

.berocket_aapf_widget_selected_filter {
    background: #EBF4FE;
    border: 1px solid #29a0f2;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-family: 'DM Sans', sans-serif;
    color: #1C2B3A;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.braapf_unselect,
.bapf_sfa_unall {
    color: #29a0f2 !important;
    font-size: 12px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}


/* ─── MOBILE: OFF-CANVAS FILTER BUTTON ─── */

/* Show the off-canvas toggle strip only on mobile */
.berocket_ajax_filters_sidebar_main,
.berocket_ajax_filters_sidebar_toggle {
    background: var(--bw-btn-gradient) !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    box-shadow: var(--bw-btn-shadow) !important;
    padding: 12px 20px !important;
    cursor: pointer;
}

/* Off-canvas panel */
#berocket-ajax-filters-sidebar {
    background: #FFFFFF !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
    padding: 20px 16px !important;
    width: 300px !important;
    z-index: 99999 !important;
}

#berocket-ajax-filters-sidebar-close {
    color: #1C2B3A !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

#berocket-ajax-filters-sidebar-shadow {
    background: rgba(0,0,0,0.5) !important;
}

/* Hide sidebar filter panel on mobile, show toggle button */
@media (max-width: 768px) {
    .woocommerce-page .widget-area,
    .ast-left-sidebar #secondary,
    .berocket_single_filter_widget {
        display: none !important;
    }

    body.berocket_ajax_filters_sidebar_active .widget-area {
        display: block !important;
    }

    /* Fake "Filters" button if BeRocket toggle isn't configured */
    .woocommerce-page .bw-mobile-filter-btn {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 11px 20px;
        background: var(--bw-btn-gradient);
        color: #FFFFFF;
        font-family: 'Montserrat', sans-serif;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        margin-bottom: 20px;
        box-shadow: var(--bw-btn-shadow);
    }

    /* Full-width product grid on mobile */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .woocommerce-page .content-area {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================================
   HEADER — THEME BUILDER PREP
   These rules target the Elementor Pro Header template when applied
   via Theme Builder → Header. They assume a 2-row layout:
     Row 1 (Top Bar): Contact | Login | Register
     Row 2 (Main Nav): Logo | Nav Menu | Search | Mini-Cart
   CSS Class on Template: bw-header-template
   ===================================================================== */

/* Sticky state — glass blur effect on scroll */
.elementor-sticky--active .bw-header-template,
.elementor-sticky--active [data-elementor-type="header"] {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* Non-sticky (initial) state */
[data-elementor-type="header"] {
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 #E5E7EB;
}

/* Top utility bar */
.bw-header-top-bar {
    background-color: #1C2B3A !important;
    padding: 6px 0 !important;
}

.bw-header-top-bar,
.bw-header-top-bar a,
.bw-header-top-bar span {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.80) !important;
    letter-spacing: 0.02em;
}

.bw-header-top-bar a:hover {
    color: #29a0f2 !important;
}

/* Main nav bar */
.bw-header-main-bar {
    padding: 14px 0 !important;
    background: #FFFFFF !important;
}

/* Nav links */
.bw-header-main-bar .elementor-nav-menu a,
.bw-header-main-bar .elementor-nav-menu > li > a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 8px 14px !important;
    transition: color 0.2s ease;
}

.bw-header-main-bar .elementor-nav-menu a:hover,
.bw-header-main-bar .elementor-nav-menu > li.current-menu-item > a {
    color: #29a0f2 !important;
}

/* Dropdown */
.bw-header-main-bar .elementor-nav-menu .sub-menu {
    background: #FFFFFF !important;
    border-top: 2px solid #29a0f2 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    border-radius: 0 0 8px 8px !important;
    padding: 6px 0 !important;
}

.bw-header-main-bar .elementor-nav-menu .sub-menu a {
    font-size: 0.8125rem !important;
    color: #374151 !important;
    padding: 9px 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.bw-header-main-bar .elementor-nav-menu .sub-menu a:hover {
    background: #EBF4FE !important;
    color: #29a0f2 !important;
}

/* Search icon */
.bw-header-search .elementor-search-form__input {
    font-family: 'DM Sans', sans-serif !important;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    padding: 8px 18px !important;
    font-size: 0.875rem;
    width: 220px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bw-header-search .elementor-search-form__input:focus {
    border-color: #29a0f2 !important;
    box-shadow: 0 0 0 3px rgba(41, 160, 242, 0.12) !important;
    outline: none;
}

/* Mini-cart icon */
.bw-header-main-bar .elementor-menu-cart__toggle .elementor-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #1C2B3A !important;
    padding: 0 !important;
}

.bw-header-main-bar .elementor-menu-cart__toggle .elementor-button-icon {
    color: #1C2B3A !important;
}

.bw-header-main-bar .elementor-menu-cart__toggle .elementor-button-icon:hover {
    color: #29a0f2 !important;
}

.bw-header-main-bar .elementor-menu-cart__counter {
    background: #29a0f2 !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    min-width: 18px !important;
    height: 18px !important;
}

/* Mobile hamburger */
@media (max-width: 1024px) {
    .bw-header-main-bar .elementor-nav-menu--toggle .elementor-nav-menu--indicator {
        color: #1C2B3A !important;
    }
}


/* =====================================================================
   FOOTER — THEME BUILDER PREP
   4-column layout: Logo+About | Quick Links | Pages | Social+Inventa
   CSS Class on Template: bw-footer-template
   ===================================================================== */

[data-elementor-type="footer"],
.bw-footer-template {
    background: #1C2B3A !important;
}

/* Footer top: blue accent bar */
.bw-footer-top-accent {
    background: #29a0f2 !important;
    height: 4px;
    width: 100%;
}

/* Main footer body */
.bw-footer-body {
    padding: 64px 0 40px !important;
    background: #1C2B3A !important;
}

/* Column headings */
.bw-footer-body h4,
.bw-footer-body .elementor-heading-title,
[data-elementor-type="footer"] h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* Body text */
.bw-footer-body p,
[data-elementor-type="footer"] p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #8fa8bf !important;
    line-height: 1.72;
}

/* Footer navigation links */
.bw-footer-body a,
[data-elementor-type="footer"] .elementor-nav-menu a,
[data-elementor-type="footer"] ul li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #8fa8bf !important;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: block;
    padding: 3px 0;
}

.bw-footer-body a:hover,
[data-elementor-type="footer"] a:hover {
    color: #29a0f2 !important;
    padding-left: 4px;
}

/* Social icons */
.bw-footer-social .elementor-social-icons-wrapper {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}

.bw-footer-social .elementor-social-icon {
    background: rgba(255,255,255,0.08) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    font-size: 0.875rem !important;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bw-footer-social .elementor-social-icon:hover {
    background: #29a0f2 !important;
    transform: translateY(-2px);
}

/* Inventa Group logo container */
.bw-footer-inventa {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.bw-footer-inventa:hover { opacity: 1; }

/* Footer copyright bar */
.bw-footer-copyright {
    background: #0f1b28 !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.bw-footer-copyright p,
.bw-footer-copyright a {
    font-size: 0.8125rem !important;
    color: #5a7a96 !important;
}

.bw-footer-copyright a:hover {
    color: #29a0f2 !important;
    padding-left: 0 !important;
}

/* List style reset for footer nav lists */
[data-elementor-type="footer"] ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Footer responsive */
@media (max-width: 768px) {
    .bw-footer-body {
        padding: 48px 20px 32px !important;
    }
}


/* =====================================================================
   PHP-BUILT HEADER & FOOTER — Targeting header.php / footer.php classes
   These rules replace Elementor-dependent classes from the Theme Builder
   prep section above. They target the new BW custom templates directly.
   ===================================================================== */

/* ── Shared container ── */
.bw-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* ── Prevent body scrolling when mobile nav is open ── */
body.bw-body-nav-open {
    overflow: hidden;
}


/* ══════════════════════════════════════
   HEADER — POSITION & STICKY BEHAVIOUR
   ══════════════════════════════════════ */

.bw-site-header {
    position: relative;
    top: auto;
    z-index: 9990;
    width: 100%;
    background: #FFFFFF;
    /* Default shadow from PSD — light rule under the header */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

/* Glass-blur on scroll — JS adds .bw-header--scrolled */
.bw-site-header.bw-header--scrolled {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;
}


/* ══════════════════════════════════════
   ROW 1: TOP BAR
   ══════════════════════════════════════ */

.bw-topbar {
    background-color: #1C2B3A;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bw-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Left: contact links */
.bw-topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bw-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.bw-topbar-item svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.bw-topbar-item:hover,
.bw-topbar-item:focus {
    color: #29a0f2 !important;
}

.bw-topbar-item:hover svg {
    opacity: 1;
}

/* Right: utility nav menu */
.bw-topbar-right .bw-topbar-nav {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px;
    align-items: center;
}

.bw-topbar-right .bw-topbar-nav li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    display: block;
}

.bw-topbar-right .bw-topbar-nav li a:hover {
    color: #29a0f2 !important;
    background: rgba(41, 160, 242, 0.12);
}

/* Highlight the "Login" / "My Account" item */
.bw-topbar-right .bw-topbar-nav li.menu-item-login a,
.bw-topbar-right .bw-topbar-nav li:last-child a {
    background: rgba(41, 160, 242, 0.18);
    color: #29a0f2 !important;
    border: 1px solid rgba(41, 160, 242, 0.35);
    border-radius: 4px;
    padding: 3px 10px;
}

.bw-topbar-right .bw-topbar-nav li.menu-item-login a:hover,
.bw-topbar-right .bw-topbar-nav li:last-child a:hover {
    background: #29a0f2;
    color: #FFFFFF !important;
}


/* ══════════════════════════════════════
   ROW 2: MAIN NAVIGATION BAR
   ══════════════════════════════════════ */

.bw-header-main {
    background: #FFFFFF;
    padding: 14px 0;
}

.bw-header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo */
.bw-header-logo {
    flex-shrink: 0;
    max-width: 180px;
}

.bw-header-logo a img,
.bw-header-logo .custom-logo {
    height: 52px !important;
    width: auto !important;
    display: block;
}

.bw-site-name-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1C2B3A !important;
    text-decoration: none;
    letter-spacing: -0.02em;
}

/* ── Desktop Primary Nav ── */
.bw-primary-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.bw-nav-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px;
    align-items: center;
}

.bw-nav-menu > li {
    position: relative;
}

.bw-nav-menu > li > a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-decoration: none;
    padding: 10px 14px !important;
    border-radius: 5px;
    display: block;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.bw-nav-menu > li > a:hover,
.bw-nav-menu > li.current-menu-item > a,
.bw-nav-menu > li.current-menu-ancestor > a,
.bw-nav-menu > li.current_page_item > a {
    color: #29a0f2 !important;
    background: rgba(41, 160, 242, 0.06);
}

/* Underline indicator on current item */
.bw-nav-menu > li.current-menu-item > a::after,
.bw-nav-menu > li.current-menu-ancestor > a::after {
    content: '';
    display: block;
    width: calc(100% - 28px);
    height: 2px;
    background: #29a0f2;
    border-radius: 1px;
    margin: 2px auto 0;
    position: absolute;
    bottom: 6px;
    left: 14px;
}

/* ── Dropdown / Sub-menu ── */
.bw-nav-menu li.menu-item-has-children {
    position: relative;
}

.bw-nav-menu .sub-menu {
    position: absolute !important;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: #FFFFFF !important;
    border-top: 2px solid #29a0f2;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    list-style: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.bw-nav-menu li.menu-item-has-children:hover > .sub-menu,
.bw-nav-menu li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.bw-nav-menu .sub-menu li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 9px 18px !important;
    display: block;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
    white-space: nowrap;
}

.bw-nav-menu .sub-menu li a:hover {
    background: #EBF4FE !important;
    color: #29a0f2 !important;
    padding-left: 24px !important;
}

/* ── Right Actions ── */
.bw-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Shared icon button style */
.bw-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    color: #1C2B3A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}

.bw-icon-btn:hover {
    color: #29a0f2;
    background: rgba(41, 160, 242, 0.08);
}

/* Mini-cart count badge */
.bw-mini-cart-btn {
    position: relative;
}

.bw-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: #29a0f2;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
    pointer-events: none;
}

/* ── Inline Search Bar ── */
.bw-search-bar {
    padding: 10px 0 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.bw-search-bar form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}

.bw-search-bar input[type="search"] {
    flex: 1;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9375rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 50px;
    padding: 10px 20px;
    outline: none;
    color: #1C2B3A;
    background: #F8F9FA;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bw-search-bar input[type="search"]:focus {
    border-color: #29a0f2;
    box-shadow: 0 0 0 3px rgba(41, 160, 242, 0.12);
    background: #FFFFFF;
}

.bw-search-bar button[type="submit"],
.bw-search-bar input[type="submit"] {
    background: var(--bw-btn-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 22px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: var(--bw-btn-shadow) !important;
}

.bw-search-bar button[type="submit"]:hover {
    box-shadow: 0 5px 18px rgba(41, 160, 242, 0.40) !important;
    transform: translateY(-1px);
}


/* ══════════════════════════════════════
   HAMBURGER BUTTON (mobile only)
   ══════════════════════════════════════ */

.bw-hamburger {
    display: none; /* Shown only below breakpoint */
}

.bw-hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #1C2B3A;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
}

.bw-hamburger {
    flex-direction: column;
    gap: 5px;
    padding: 10px !important;
}

/* X animation when open */
.bw-hamburger.bw-hamburger--open .bw-hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.bw-hamburger.bw-hamburger--open .bw-hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.bw-hamburger.bw-hamburger--open .bw-hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ══════════════════════════════════════
   MOBILE NAVIGATION DRAWER
   ══════════════════════════════════════ */

.bw-mobile-nav {
    display: none; /* block only on mobile */
    background: #FFFFFF;
    border-top: 2px solid #29a0f2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bw-mobile-nav.bw-mobile-nav--open {
    max-height: 80vh;
    overflow-y: auto;
}

.bw-mobile-nav-inner {
    padding: 12px 0 20px;
}

.bw-mobile-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bw-mobile-menu li a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    text-decoration: none;
    display: block;
    padding: 13px 24px !important;
    border-bottom: 1px solid #F0F0F0;
    transition: color 0.15s ease, background 0.15s ease;
}

.bw-mobile-menu li a:hover,
.bw-mobile-menu li.current-menu-item > a {
    color: #29a0f2 !important;
    background: rgba(41, 160, 242, 0.05);
}

.bw-mobile-menu .sub-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none;
    background: #F8F9FA;
}

.bw-mobile-menu .sub-menu li a {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    padding-left: 40px !important;
    color: #4B5563 !important;
    font-family: 'DM Sans', sans-serif !important;
}

/* Has-children caret */
.bw-mobile-menu .menu-item-has-children > a::after {
    content: '›';
    float: right;
    font-size: 1rem;
    transition: transform 0.2s ease;
    color: #9CA3AF;
}

.bw-mobile-menu .menu-item-has-children.bw-sub-open > a::after {
    transform: rotate(90deg);
    color: #29a0f2;
}


/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS — HEADER
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
    /* Hide desktop nav, show hamburger */
    .bw-primary-nav {
        display: none !important;
    }

    .bw-hamburger {
        display: inline-flex !important;
    }

    .bw-mobile-nav {
        display: block !important;
    }

    /* Reduce topbar on tablet */
    .bw-topbar-left {
        gap: 12px;
    }
}

@media (max-width: 640px) {
    /* Hide contact info on small phones, keep utility menu */
    .bw-topbar-left .bw-topbar-item:not(:first-child) {
        display: none;
    }

    .bw-header-logo .custom-logo,
    .bw-header-logo a img {
        height: 40px !important;
    }
}


/* ══════════════════════════════════════
   PHP FOOTER — OVERRIDES THEME BUILDER PREP
   (These classes are more specific than the
    [data-elementor-type="footer"] rules above.)
   ══════════════════════════════════════ */

.bw-site-footer {
    background: #1C2B3A !important;
    position: relative;
}

/* Blue accent line at top of footer */
.bw-footer-accent-line {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #29a0f2, #1a8cd8) !important;
    display: block;
}

/* Main footer body */
.bw-footer-body {
    padding: 60px 0 44px !important;
}

/* 4-column grid */
.bw-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 48px;
    align-items: start;
}

/* Logo in footer */
.bw-footer-logo .custom-logo,
.bw-footer-logo img {
    height: 52px !important;
    width: auto !important;
    filter: brightness(0) invert(1); /* Makes dark logos white */
    opacity: 0.9;
}

.bw-footer-site-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: -0.01em;
}

/* About text */
.bw-footer-about-text {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #7fa8c2 !important;
    line-height: 1.72;
    margin-top: 16px !important;
}

/* Column headings */
.bw-footer-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Footer nav menu */
.bw-footer-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bw-footer-nav li {
    padding: 0 !important;
    margin: 0 !important;
}

.bw-footer-nav li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #7fa8c2 !important;
    text-decoration: none;
    display: block;
    padding: 5px 0 !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
    line-height: 1.5;
}

.bw-footer-nav li a::before {
    content: '›';
    margin-right: 6px;
    color: rgba(41, 160, 242, 0.5);
    font-size: 1rem;
    transition: color 0.2s ease;
}

.bw-footer-nav li a:hover {
    color: #29a0f2 !important;
    padding-left: 5px !important;
}

.bw-footer-nav li a:hover::before {
    color: #29a0f2;
}

/* Social icons column */
.bw-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.bw-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.80);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.bw-social-icon:hover {
    background: #29a0f2 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* Inventa Group branding */
.bw-footer-inventa {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bw-inventa-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.40);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bw-inventa-logo {
    max-width: 130px;
    height: auto;
    opacity: 0.85;
    filter: brightness(0) invert(1);
    transition: opacity 0.2s ease;
}

.bw-inventa-logo:hover {
    opacity: 1;
}

.bw-inventa-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.80);
    letter-spacing: 0.06em;
}

.bw-inventa-text strong {
    font-weight: 800;
    color: #29a0f2;
}

/* ── Copyright bar ── */
.bw-footer-copyright {
    background: #0f1b28 !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bw-copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bw-footer-copyright p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
    margin: 0 !important;
    line-height: 1.5;
}

.bw-footer-copyright a {
    color: rgba(255, 255, 255, 0.45) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bw-footer-copyright a:hover {
    color: #29a0f2 !important;
}

/* ── Footer responsive ── */
@media (max-width: 1024px) {
    .bw-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .bw-footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .bw-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bw-footer-about {
        grid-column: auto;
    }

    .bw-copyright-inner {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}


/* ══════════════════════════════════════
   SHOP PAGE — ASTRA LAYOUT FORCE
   Ensures the Astra sidebar is visible and
   the product grid fills the content area.
   ══════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SHOP / CATEGORY LAYOUT — 1280px centred, Flex 25% / 75%
   Uses flex + order so the sidebar always renders left regardless of DOM
   order (Astra puts #primary before #secondary in HTML for accessibility).
   ═══════════════════════════════════════════════════════════════════════ */

html body.ast-left-sidebar.woocommerce-page .ast-container,
html body.ast-left-sidebar.post-type-archive-product .ast-container,
html body.ast-left-sidebar.tax-product_cat .ast-container,
html body.ast-left-sidebar.tax-product_tag .ast-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 28px !important;
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 28px 24px !important;
    box-sizing: border-box !important;
}

/* Sidebar — always first (left), 25 % of container width */
html body.ast-left-sidebar.woocommerce-page #secondary,
html body.ast-left-sidebar.post-type-archive-product #secondary,
html body.ast-left-sidebar.tax-product_cat #secondary,
html body.ast-left-sidebar.tax-product_tag #secondary {
    order: 1 !important;
    flex: 0 0 calc(25% - 14px) !important;  /* 14px = gap/2 */
    width: calc(25% - 14px) !important;
    min-width: 0 !important;
    max-width: calc(25% - 14px) !important;
    overflow: visible !important;
    padding: 0 !important;
    position: sticky !important;
    top: 105px !important;
    align-self: flex-start !important;
}

/* Content area — always second (right), fills remaining 75% */
html body.ast-left-sidebar.woocommerce-page #primary,
html body.ast-left-sidebar.post-type-archive-product #primary,
html body.ast-left-sidebar.tax-product_cat #primary,
html body.ast-left-sidebar.tax-product_tag #primary {
    order: 2 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Product grid — 4 columns alongside sidebar */
html body.ast-left-sidebar.woocommerce-page ul.products,
html body.ast-left-sidebar.post-type-archive-product ul.products,
html body.ast-left-sidebar.tax-product_cat ul.products,
html body.ast-left-sidebar.tax-product_tag ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    float: none !important;
}

/* Sidebar filter widget — constrain width, clip only horizontal bleed */
html body.ast-left-sidebar .berocket_single_filter_widget,
html body.ast-left-sidebar .bapf_wid_group,
html body.ast-left-sidebar .widget {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* BW custom filter — internally constrained */
html body.ast-left-sidebar #bwf-filter {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* ── Tablet: stack sidebar above content (single column) ── */
@media (max-width: 1024px) {
    html body.ast-left-sidebar.woocommerce-page .ast-container,
    html body.ast-left-sidebar.post-type-archive-product .ast-container,
    html body.ast-left-sidebar.tax-product_cat .ast-container,
    html body.ast-left-sidebar.tax-product_tag .ast-container {
        flex-direction: column !important;
        padding: 20px 16px !important;
        gap: 20px !important;
    }

    html body.ast-left-sidebar.woocommerce-page #secondary,
    html body.ast-left-sidebar.post-type-archive-product #secondary,
    html body.ast-left-sidebar.tax-product_cat #secondary,
    html body.ast-left-sidebar.tax-product_tag #secondary {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    html body.ast-left-sidebar.woocommerce-page #primary,
    html body.ast-left-sidebar.post-type-archive-product #primary,
    html body.ast-left-sidebar.tax-product_cat #primary,
    html body.ast-left-sidebar.tax-product_tag #primary {
        order: 2 !important;
        width: 100% !important;
    }

    html body.ast-left-sidebar.woocommerce-page ul.products,
    html body.ast-left-sidebar.post-type-archive-product ul.products,
    html body.ast-left-sidebar.tax-product_cat ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── Mobile ── */
@media (max-width: 640px) {
    html body.ast-left-sidebar.woocommerce-page ul.products,
    html body.ast-left-sidebar.post-type-archive-product ul.products,
    html body.ast-left-sidebar.tax-product_cat ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    html body.ast-left-sidebar.woocommerce-page ul.products,
    html body.ast-left-sidebar.post-type-archive-product ul.products,
    html body.ast-left-sidebar.tax-product_cat ul.products {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================================
   ██████╗ ██████╗ ██╗████████╗██╗ ██████╗ █████╗ ██╗
  ██╔════╝ ██╔══██╗██║╚══██╔══╝██║██╔════╝██╔══██╗██║
  ██║      ██████╔╝██║   ██║   ██║██║     ███████║██║
  ██║      ██╔══██╗██║   ██║   ██║██║     ██╔══██║██║
  ╚██████╗ ██║  ██║██║   ██║   ██║╚██████╗██║  ██║███████╗
   ╚═════╝ ╚═╝  ╚═╝╚═╝   ╚═╝   ╚═╝ ╚═════╝╚═╝  ╚═╝╚══════╝

   LAYOUT OVERRIDES — ID-anchored, highest possible specificity.
   These rules use #masthead / #bw-site-footer IDs so they beat
   any Astra, WooCommerce, or plugin rule regardless of load order.

   Rule of thumb used here:
     • display properties → always !important
     • list-style         → always !important
     • Sub-menus          → display:none by default (NOT opacity fade)
                            to prevent items from occupying flow space
   ===================================================================== */


/* ───────────────────────────────────────────────────────────────────
   A.  HEADER SKELETON — ensure outer rows are always horizontal flex
   ─────────────────────────────────────────────────────────────────── */

#masthead {
    position: relative !important;
    top: auto !important;
    z-index: 9990 !important;
    width: 100% !important;
    background: #FFFFFF !important;
}

/* Top utility bar inner row */
#masthead .bw-topbar-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
}

/* Main nav inner row: Logo | Nav | Actions */
#masthead .bw-header-main-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
}

/* Header actions row */
#masthead .bw-header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}


/* ───────────────────────────────────────────────────────────────────
   B.  UTILITY TOP BAR NAVIGATION — force horizontal, strip bullets
   ─────────────────────────────────────────────────────────────────── */

#masthead .bw-topbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
}

#masthead .bw-topbar-nav li {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#masthead .bw-topbar-nav li a {
    white-space: nowrap !important;
    display: block !important;
}


/* ───────────────────────────────────────────────────────────────────
   C.  PRIMARY DESKTOP NAV — horizontal flex, no bullets, clean drops
   ─────────────────────────────────────────────────────────────────── */

/* Primary nav wrapper fills center */
#masthead .bw-primary-nav {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
}

/* Root <ul> — HORIZONTAL ROW */
#masthead .bw-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Every list item — kill bullets, set relative for dropdown anchor */
#masthead .bw-nav-menu li,
#masthead .bw-nav-menu > li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}

/* Override any ::marker pseudo-element Astra might inject */
#masthead .bw-nav-menu li::marker,
#masthead .bw-nav-menu li::before {
    content: none !important;
    display: none !important;
}

/* ── Sub-menus: HIDE with display:none (NOT opacity fade) ── */
/* Rationale: opacity/visibility-hidden leaves items in flow;
   display:none completely removes them so vertical overflow stops. */
#masthead .bw-nav-menu .sub-menu,
#masthead .bw-nav-menu ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-width: 220px !important;
    background: #FFFFFF !important;
    border-top: 2px solid #29a0f2 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12) !important;
    list-style: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}

/* Show sub-menu on hover / keyboard focus-within */
#masthead .bw-nav-menu > li:hover > .sub-menu,
#masthead .bw-nav-menu > li:focus-within > .sub-menu,
#masthead .bw-nav-menu li:hover > ul,
#masthead .bw-nav-menu li:focus-within > ul {
    display: block !important;
}

/* Sub-menu items layout */
#masthead .bw-nav-menu .sub-menu li,
#masthead .bw-nav-menu ul li {
    display: block !important;
    list-style: none !important;
    padding: 0 !important;
    width: 100% !important;
}

#masthead .bw-nav-menu .sub-menu a,
#masthead .bw-nav-menu ul li a {
    display: block !important;
    padding: 9px 18px !important;
    white-space: nowrap !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

#masthead .bw-nav-menu .sub-menu a:hover,
#masthead .bw-nav-menu ul li a:hover {
    background: #EBF4FE !important;
    color: #29a0f2 !important;
    padding-left: 24px !important;
}

/* Top-level nav link style */
#masthead .bw-nav-menu > li > a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    display: block !important;
    border-radius: 5px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap !important;
}

#masthead .bw-nav-menu > li > a:hover,
#masthead .bw-nav-menu > li.current-menu-item > a,
#masthead .bw-nav-menu > li.current-menu-ancestor > a,
#masthead .bw-nav-menu > li.current_page_item > a {
    color: #29a0f2 !important;
    background: rgba(41, 160, 242, 0.06) !important;
}

/* Caret indicator — removed per client request */
#masthead .bw-nav-menu > li.menu-item-has-children > a::after,
#masthead .bw-nav-bar .bw-nav-menu > li.menu-item-has-children > a::after,
html body #masthead .bw-nav-bar .bw-nav-menu > li.menu-item-has-children > a::after {
    content: none !important;
    display: none !important;
}

/* Mobile hamburger: hide on desktop, show on mobile (set in media query below) */
#masthead .bw-hamburger {
    display: none !important;
}


/* ───────────────────────────────────────────────────────────────────
   D.  MOBILE NAV DRAWER — hidden by default, slides in via JS class
   ─────────────────────────────────────────────────────────────────── */

#masthead .bw-mobile-nav {
    display: none !important;
    background: #FFFFFF !important;
    border-top: 2px solid #29a0f2 !important;
}

/* Override: show when JS adds open class */
#masthead .bw-mobile-nav.bw-mobile-nav--open {
    display: block !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

#masthead .bw-mobile-menu,
#masthead .bw-mobile-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#masthead .bw-mobile-menu li {
    list-style: none !important;
    display: block !important;
    width: 100% !important;
}

#masthead .bw-mobile-menu li a {
    display: block !important;
    padding: 13px 24px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    border-bottom: 1px solid #F0F0F0 !important;
    text-decoration: none !important;
}

#masthead .bw-mobile-menu .sub-menu {
    display: none !important;
    background: #F8F9FA !important;
}

#masthead .bw-mobile-menu li.bw-sub-open > .sub-menu {
    display: block !important;
}

#masthead .bw-mobile-menu .sub-menu li a {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    font-family: 'DM Sans', sans-serif !important;
    color: #4B5563 !important;
    padding-left: 40px !important;
}


/* ───────────────────────────────────────────────────────────────────
   E.  RESPONSIVE: swap desktop nav ↔ hamburger at 1024px
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    #masthead .bw-primary-nav {
        display: none !important;
    }
    #masthead .bw-hamburger {
        display: inline-flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }
    #masthead .bw-mobile-nav {
        display: none !important; /* JS opens it */
    }
    #masthead .bw-mobile-nav.bw-mobile-nav--open {
        display: block !important;
    }
}

@media (max-width: 640px) {
    #masthead .bw-topbar-left .bw-topbar-item:nth-child(2) {
        display: none !important; /* Hide email on small phones */
    }
}


/* ───────────────────────────────────────────────────────────────────
   F.  FOOTER — 4-column grid, white text, strip bullets
   ─────────────────────────────────────────────────────────────────── */

#bw-site-footer {
    background: transparent !important;   /* each row sets its own background */
    display: block !important;
    width: 100% !important;
}

/* 4-column grid — the critical rule that was missing !important */
#bw-site-footer .bw-footer-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 1.5fr !important;
    gap: 48px !important;
    align-items: start !important;
    width: 100% !important;
}

/* Each column */
#bw-site-footer .bw-footer-col {
    display: block !important;
    width: 100% !important;
}

/* ── Footer headings — always white ── */
#bw-site-footer .bw-footer-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    display: block !important;
}

/* ── Footer nav lists — strip bullets, white/muted text ── */
#bw-site-footer .bw-footer-nav {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#bw-site-footer .bw-footer-nav li {
    list-style: none !important;
    list-style-type: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Kill any ::marker bullets on footer lists */
#bw-site-footer .bw-footer-nav li::marker,
#bw-site-footer ul li::marker,
#bw-site-footer li::marker {
    content: none !important;
    display: none !important;
}

#bw-site-footer .bw-footer-nav li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #7fa8c2 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 0 !important;
    line-height: 1.55 !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

#bw-site-footer .bw-footer-nav li a::before {
    content: '›' !important;
    margin-right: 6px !important;
    color: rgba(41,160,242,0.55) !important;
}

#bw-site-footer .bw-footer-nav li a:hover {
    color: #29a0f2 !important;
    padding-left: 5px !important;
}

/* About text */
#bw-site-footer .bw-footer-about-text {
    color: #7fa8c2 !important;
    font-size: 0.875rem !important;
    line-height: 1.72 !important;
    margin-top: 14px !important;
}

/* ── Social icons — HORIZONTAL row ── */
#bw-site-footer .bw-social-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}

#bw-site-footer .bw-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.09) !important;
    border-radius: 50% !important;
    color: rgba(255,255,255,0.80) !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
}

#bw-site-footer .bw-social-icon:hover {
    background: #29a0f2 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* Inventa section */
#bw-site-footer .bw-footer-inventa {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-top: 4px !important;
}

#bw-site-footer .bw-inventa-label {
    color: rgba(255,255,255,0.38) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

#bw-site-footer .bw-inventa-text {
    display: inline-flex !important;
    color: rgba(255,255,255,0.82) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.06em !important;
}

#bw-site-footer .bw-inventa-text strong {
    color: #29a0f2 !important;
    font-weight: 800 !important;
    margin-left: 4px !important;
}

/* ── Copyright bar ── */
#bw-site-footer .bw-footer-copyright {
    background: #0f1b28 !important;
    padding: 13px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

#bw-site-footer .bw-copyright-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#bw-site-footer .bw-footer-copyright p {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    color: rgba(255,255,255,0.35) !important;
    margin: 0 !important;
}

#bw-site-footer .bw-footer-copyright a {
    color: rgba(255,255,255,0.45) !important;
    text-decoration: none !important;
}

#bw-site-footer .bw-footer-copyright a:hover {
    color: #29a0f2 !important;
}

/* ── Footer responsive ── */
@media (max-width: 1024px) {
    #bw-site-footer .bw-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px !important;
    }
    #bw-site-footer .bw-footer-about {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    #bw-site-footer .bw-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    #bw-site-footer .bw-footer-about {
        grid-column: auto !important;
    }
    #bw-site-footer .bw-copyright-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 4px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FIGMA HEADER — 3-Row Layout                                        ║
   ║  Matches screenshot exactly: Utility | Nav | USP                    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Whole header wrapper ── */
#masthead.bw-site-header {
    position: relative !important;
    top: auto !important;
    z-index: 9990 !important;
    width: 100% !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROW 1 — UTILITY BAR (white)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#masthead .bw-utility-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EEEEEE !important;
    padding: 12px 0 !important;
}

#masthead .bw-utility-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
}

/* Logo in utility bar */
#masthead .bw-utility-logo {
    flex-shrink: 0 !important;
}

#masthead .bw-utility-logo .custom-logo,
#masthead .bw-utility-logo img {
    height: 80px !important;
    width: auto !important;
    display: block !important;
}

#masthead .bw-utility-logo .bw-site-name-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #1C2B3A !important;
    text-decoration: none !important;
    letter-spacing: -0.02em !important;
}

/* Search bar — takes most of the centre width */
#masthead .bw-utility-search {
    flex: 1 1 auto !important;
    max-width: 480px !important;
}

#masthead .bw-search-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border: 1.5px solid #CCCCCC !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    height: 42px !important;
}

#masthead .bw-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 0 16px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #333333 !important;
    background: transparent !important;
    min-width: 0 !important;
}

#masthead .bw-search-input::placeholder {
    color: #AAAAAA !important;
}

#masthead .bw-search-submit {
    background: #29a0f2 !important;
    border: none !important;
    padding: 0 16px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
}

#masthead .bw-search-submit:hover {
    background: #1a8cd8 !important;
}

/* Right section: account + help + cart */
#masthead .bw-utility-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    flex-shrink: 0 !important;
}

/* Login / Register link */
#masthead .bw-utility-account {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #333333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
}

#masthead .bw-utility-account:hover {
    color: #29a0f2 !important;
}

#masthead .bw-utility-account svg {
    color: #555 !important;
    flex-shrink: 0 !important;
}

/* Need Help + Phone block */
#masthead .bw-utility-help {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-left: 1px solid #EEEEEE !important;
    padding-left: 18px !important;
}

#masthead .bw-help-icon-wrap {
    flex-shrink: 0 !important;
}

#masthead .bw-help-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

#masthead .bw-help-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #888888 !important;
    display: block !important;
    line-height: 1.2 !important;
}

#masthead .bw-help-phone {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

#masthead .bw-help-phone:hover {
    color: #29a0f2 !important;
}

/* Cart icon */
#masthead .bw-utility-cart {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    color: #333333 !important;
    text-decoration: none !important;
    padding: 4px !important;
    transition: color 0.2s ease !important;
}

#masthead .bw-utility-cart:hover {
    color: #29a0f2 !important;
}

#masthead .bw-cart-wrap {
    position: relative !important;
    display: inline-flex !important;
}

#masthead .bw-cart-count {
    position: absolute !important;
    top: -8px !important;
    right: -10px !important;
    background: #29a0f2 !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    min-width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    line-height: 1 !important;
}

/* Hamburger — hidden on desktop */
#masthead .bw-hamburger {
    display: none !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
}

#masthead .bw-hamburger-line {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #1C2B3A !important;
    border-radius: 2px !important;
    transition: transform 0.25s ease, opacity 0.25s ease !important;
    pointer-events: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROW 2 — NAVIGATION BAR (Vibrant Blue)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#masthead .bw-nav-bar {
    background: #29a0f2 !important;
    display: block !important;
    min-height: 48px;
}

#masthead .bw-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Main nav <ul> — horizontal flex */
#masthead .bw-nav-bar .bw-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

#masthead .bw-nav-bar .bw-nav-menu > li {
    list-style: none !important;
    list-style-type: none !important;
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

#masthead .bw-nav-bar .bw-nav-menu > li::marker,
#masthead .bw-nav-bar .bw-nav-menu > li::before {
    content: none !important;
    display: none !important;
}

/* Nav links */
#masthead .bw-nav-bar .bw-nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 11px 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s ease !important;
    letter-spacing: 0.01em !important;
}

#masthead .bw-nav-bar .bw-nav-menu > li > a:hover,
#masthead .bw-nav-bar .bw-nav-menu > li.current-menu-item > a,
#masthead .bw-nav-bar .bw-nav-menu > li.current-menu-ancestor > a {
    background: rgba(0,0,0,0.12) !important;
    color: #FFFFFF !important;
}

/* Sub-menus — white dropdown */
#masthead .bw-nav-bar .bw-nav-menu .sub-menu,
#masthead .bw-nav-bar .bw-nav-menu ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    min-width: 220px !important;
    background: #FFFFFF !important;
    border-top: 2px solid #29a0f2 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 0 !important;
}

#masthead .bw-nav-bar .bw-nav-menu > li:hover > .sub-menu,
#masthead .bw-nav-bar .bw-nav-menu > li:focus-within > .sub-menu {
    display: block !important;
}

#masthead .bw-nav-bar .bw-nav-menu .sub-menu li {
    list-style: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

#masthead .bw-nav-bar .bw-nav-menu .sub-menu li a {
    display: block !important;
    padding: 9px 18px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    white-space: nowrap !important;
}

#masthead .bw-nav-bar .bw-nav-menu .sub-menu li a:hover {
    background: #EBF4FE !important;
    color: #29a0f2 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROW 3 — USP STRIP (Light grey)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#masthead .bw-usp-bar {
    background: #c8cdd5 !important;
    border-top: 1px solid #b0b6c0 !important;
    padding: 8px 0 !important;
}

#masthead .bw-usp-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

#masthead .bw-usp-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
}

#masthead .bw-usp-item span {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #444444 !important;
    white-space: nowrap !important;
}

#masthead .bw-usp-icon {
    width: 22px !important;
    height: 22px !important;
    color: #29a0f2 !important;
    flex-shrink: 0 !important;
}

/* Gold stars */
#masthead .bw-stars {
    display: inline-flex !important;
    gap: 1px !important;
    color: #F4C430 !important;
    font-size: 0.875rem !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE NAV DRAWER
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#masthead .bw-mobile-nav {
    display: none !important;
    background: #FFFFFF !important;
    border-top: 2px solid #29a0f2 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9888 !important;
}

#masthead .bw-mobile-nav.bw-mobile-nav--open {
    display: block !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
}

#masthead .bw-mobile-menu,
#masthead .bw-mobile-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#masthead .bw-mobile-menu li {
    list-style: none !important;
    display: block !important;
}

#masthead .bw-mobile-menu > li > a {
    display: block !important;
    padding: 13px 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    border-bottom: 1px solid #F0F0F0 !important;
    text-decoration: none !important;
}

#masthead .bw-mobile-menu .sub-menu {
    display: none !important;
    background: #F8F9FA !important;
}

#masthead .bw-mobile-menu li.bw-sub-open > .sub-menu {
    display: block !important;
}

#masthead .bw-mobile-menu .sub-menu li a {
    display: block !important;
    padding: 10px 20px 10px 36px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #4B5563 !important;
    border-bottom: 1px solid #EEEEEE !important;
    text-decoration: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — Header breakpoints
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1200px) {
    #masthead .bw-nav-bar .bw-nav-menu > li > a {
        padding: 11px 10px !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 1024px) {
    /* Hide desktop nav, search, help in utility; show hamburger */
    #masthead .bw-nav-bar {
        display: none !important;
    }
    #masthead .bw-usp-bar {
        display: none !important;
    }
    #masthead .bw-utility-search {
        display: none !important;
    }
    #masthead .bw-utility-help {
        display: none !important;
    }
    #masthead .bw-hamburger {
        display: flex !important;
    }
    #masthead .bw-mobile-nav {
        display: none !important; /* JS controls open/close */
    }
    #masthead .bw-mobile-nav.bw-mobile-nav--open {
        display: block !important;
    }
    #masthead .bw-utility-inner {
        justify-content: space-between !important;
    }
}

@media (max-width: 640px) {
    #masthead .bw-utility-account span {
        display: none !important;
    }
    #masthead .bw-utility-logo .custom-logo,
    #masthead .bw-utility-logo img {
        height: 70px !important;
    }
    #masthead .bw-utility-bar {
        padding: 10px 0 !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FIGMA FOOTER — 3-Row Layout                                        ║
   ║  Blue bar | White main | Dark bottom                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

#bw-site-footer {
    display: block !important;
    background: #FFFFFF !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROW 1 — BLUE BAR: Logo + Social Icons
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#bw-site-footer .bw-footer-blue-bar {
    background: #29a0f2 !important;
    padding: 18px 0 !important;
}

#bw-site-footer .bw-footer-blue-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/* Logo — white version */
#bw-site-footer .bw-footer-blue-logo .custom-logo,
#bw-site-footer .bw-footer-blue-logo img {
    height: 52px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
}

#bw-site-footer .bw-footer-site-name-white {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.375rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
}

/* Social icons row */
#bw-site-footer .bw-footer-socials {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base social icon */
#bw-site-footer .bw-fsocial {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    flex-shrink: 0 !important;
}

#bw-site-footer .bw-fsocial:hover {
    transform: translateY(-2px) scale(1.1) !important;
    opacity: 0.9 !important;
}

/* Platform brand colours */
#bw-site-footer .bw-fsocial--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
#bw-site-footer .bw-fsocial--whatsapp  { background: #25D366 !important; }
#bw-site-footer .bw-fsocial--pinterest { background: #E60023 !important; }
#bw-site-footer .bw-fsocial--facebook  { background: #1877F2 !important; }
#bw-site-footer .bw-fsocial--linkedin  { background: #0A66C2 !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROW 2 — WHITE MAIN SECTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#bw-site-footer .bw-footer-main {
    background: #FFFFFF !important;
    padding: 36px 0 32px !important;
    border-bottom: 1px solid #EEEEEE !important;
}

/* 5-column grid: About(wider) | Links | Links | Links | Inventa */
#bw-site-footer .bw-footer-main-grid {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr !important;
    gap: 32px !important;
    align-items: start !important;
}

/* COL 1: About */
#bw-site-footer .bw-footer-about-col {
    display: block !important;
}

#bw-site-footer .bw-footer-about-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    margin: 0 0 10px !important;
}

#bw-site-footer .bw-footer-about-desc {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #555555 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* COLS 2-4: Link lists */
#bw-site-footer .bw-footer-links-col {
    display: block !important;
}

#bw-site-footer .bw-footer-link-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

#bw-site-footer .bw-footer-link-list li {
    list-style: none !important;
    list-style-type: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

#bw-site-footer .bw-footer-link-list li::marker,
#bw-site-footer .bw-footer-link-list li::before {
    content: none !important;
    display: none !important;
}

#bw-site-footer .bw-footer-link-list li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #444444 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 5px 0 !important;
    line-height: 1.5 !important;
    transition: color 0.2s ease !important;
}

#bw-site-footer .bw-footer-link-list li a:hover {
    color: #29a0f2 !important;
}

/* COL 5: Inventa */
#bw-site-footer .bw-footer-inventa-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 10px !important;
    text-align: right !important;
}

#bw-site-footer .bw-footer-inventa-img {
    max-width: 140px !important;
    height: auto !important;
    display: block !important;
}

#bw-site-footer .bw-inventa-fallback {
    align-items: center !important;
    gap: 4px !important;
}

#bw-site-footer .bw-inventa-fb-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    color: #1C2B3A !important;
    letter-spacing: 0.04em !important;
}

#bw-site-footer .bw-inventa-fb-name strong {
    font-weight: 800 !important;
    color: #29a0f2 !important;
}

#bw-site-footer .bw-footer-inventa-tagline {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    color: #666666 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ROW 3 — DARK BOTTOM BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#bw-site-footer .bw-footer-bottom {
    background: #1a1a1a !important;
    padding: 12px 0 !important;
}

#bw-site-footer .bw-footer-bottom-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

#bw-site-footer .bw-company-info {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8rem !important;
    color: #888888 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

#bw-site-footer .bw-info-sep {
    margin: 0 8px !important;
    color: #555555 !important;
}

/* Right side: payments + sitemap */
#bw-site-footer .bw-footer-bottom-right {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

/* Payment badge pills */
#bw-site-footer .bw-payment-icons {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

#bw-site-footer .bw-pay-badge {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.5625rem !important;
    font-weight: 800 !important;
    padding: 3px 7px !important;
    border-radius: 3px !important;
    letter-spacing: 0.02em !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

#bw-site-footer .bw-pay-visa  { background: #1A1F71 !important; color: #FFFFFF !important; }
#bw-site-footer .bw-pay-mc   { background: #EB001B !important; color: #FFFFFF !important; }
#bw-site-footer .bw-pay-pp   { background: #003087 !important; color: #FFFFFF !important; }
#bw-site-footer .bw-pay-amex { background: #2E77BC !important; color: #FFFFFF !important; }

#bw-site-footer .bw-sitemap-link {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8rem !important;
    color: #888888 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
}

#bw-site-footer .bw-sitemap-link:hover {
    color: #29a0f2 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1100px) {
    #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 28px !important;
    }
    #bw-site-footer .bw-footer-about-col {
        grid-column: 1 / -1 !important;
    }
    #bw-site-footer .bw-footer-inventa-col {
        grid-column: 1 / -1 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
    #bw-site-footer .bw-footer-blue-inner {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    #bw-site-footer .bw-footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    #bw-site-footer .bw-footer-bottom-right {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    #bw-site-footer .bw-company-info {
        white-space: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HEADER EMERGENCY FIX — Highest specificity patch               ║
   ║  Targets: svg size reset, utility-bar flex, search-form flex    ║
   ║  Uses "html body #masthead" chain to beat any theme !important  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ── 1. RESET ALL SVG SIZES INSIDE THE HEADER ──
   Root cause: Astra / plugins often have  svg { width: 100%; height: auto; }
   This makes every inline SVG stretch to its container width.
   The HTML width/height attributes are presentational; CSS overrides them.   */
html body #masthead svg {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

/* Specific icon targets — exact pixel sizes */
html body #masthead .bw-utility-cart svg,
html body #masthead .bw-utility-account svg,
html body #masthead .bw-hamburger svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

html body #masthead .bw-search-submit svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

html body #masthead .bw-help-icon-wrap svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* USP strip icons */
html body #masthead .bw-usp-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* ── 2. UTILITY BAR — FORCE HORIZONTAL FLEX ──
   Using 4-level selector chain for maximum cascade weight.           */
html body #masthead .bw-utility-bar {
    display: block !important;
    width: 100% !important;
    background: #FFFFFF !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #EEEEEE !important;
}

html body #masthead .bw-utility-bar .bw-container {
    display: block !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* THE CRITICAL FLEX ROW — Logo | Search | Right-section */
html body #masthead .bw-utility-bar .bw-utility-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* Each direct child: no full-width block behavior */
html body #masthead .bw-utility-bar .bw-utility-logo {
    display: block !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: 200px !important;
}

html body #masthead .bw-utility-bar .bw-utility-search {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 500px !important;
}

/* Right section: account + help + cart + hamburger in a row */
html body #masthead .bw-utility-bar .bw-utility-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

/* ── 3. SEARCH FORM — FORCE HORIZONTAL ── */
html body #masthead .bw-utility-bar .bw-search-form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 42px !important;
    border: 1.5px solid #CCCCCC !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
}

html body #masthead .bw-utility-bar .bw-search-input {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    border: none !important;
    outline: none !important;
    padding: 0 14px !important;
    font-size: 0.875rem !important;
    background: transparent !important;
    height: 100% !important;
    box-shadow: none !important;
}

html body #masthead .bw-utility-bar .bw-search-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    padding: 0 16px !important;
    background: #29a0f2 !important;
    border: none !important;
    cursor: pointer !important;
    color: #FFFFFF !important;
    height: 100% !important;
}

/* ── 4. NEED HELP block — side-by-side icon + text ── */
html body #masthead .bw-utility-bar .bw-utility-help {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    border-left: 1px solid #EEEEEE !important;
    padding-left: 16px !important;
}

html body #masthead .bw-utility-bar .bw-help-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

html body #masthead .bw-utility-bar .bw-help-label {
    display: block !important;
    font-size: 0.75rem !important;
    color: #045d9a !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

html body #masthead .bw-utility-bar .bw-help-phone {
    display: block !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

/* ── 5. CART ICON — contain the SVG inside its parent ── */
html body #masthead .bw-utility-cart {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    width: auto !important;
    text-decoration: none !important;
    color: #333 !important;
}

html body #masthead .bw-cart-wrap {
    display: inline-flex !important;
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
}

/* ── 6. ACCOUNT LINK — single row ── */
html body #masthead .bw-utility-account {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.8125rem !important;
    color: #333333 !important;
    text-decoration: none !important;
}

/* ── 7. HAMBURGER — hidden on desktop, flex-col on mobile ── */
html body #masthead .bw-hamburger {
    display: none !important;  /* hidden on desktop */
    flex-direction: column !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    flex-shrink: 0 !important;
}

/* ── 8. LOGO inside utility bar ── */
html body #masthead .bw-utility-logo .custom-logo,
html body #masthead .bw-utility-logo a img {
    height: 90px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

/* ── 9. NAV BAR — force horizontal (belt-and-suspenders) ── */
html body #masthead .bw-nav-bar {
    background: #29a0f2 !important;
    display: block !important;
    width: 100% !important;
}

html body #masthead .bw-nav-bar .bw-container {
    display: block !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

html body #masthead .bw-nav-bar .bw-nav-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

html body #masthead .bw-nav-bar .bw-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

html body #masthead .bw-nav-bar .bw-nav-menu > li {
    list-style: none !important;
    display: inline-flex !important;
    align-items: stretch !important;
}

html body #masthead .bw-nav-bar .bw-nav-menu > li::marker,
html body #masthead .bw-nav-bar .bw-nav-menu > li::before {
    content: none !important;
    display: none !important;
}

html body #masthead .bw-nav-bar .bw-nav-menu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 13px !important;
    color: #FFFFFF !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Sub-menus: hidden by default */
html body #masthead .bw-nav-bar .bw-nav-menu .sub-menu,
html body #masthead .bw-nav-bar .bw-nav-menu ul {
    display: none !important;
    position: absolute !important;
}

html body #masthead .bw-nav-bar .bw-nav-menu > li:hover > .sub-menu,
html body #masthead .bw-nav-bar .bw-nav-menu > li:focus-within > .sub-menu {
    display: block !important;
}

/* ── 10. USP BAR — force horizontal ── */
html body #masthead .bw-usp-bar {
    background: #c8cdd5 !important;
    border-top: 1px solid #b0b6c0 !important;
    padding: 7px 0 !important;
    display: block !important;
}

html body #masthead .bw-usp-bar .bw-usp-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

html body #masthead .bw-usp-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

html body #masthead .bw-usp-item > span,
html body #masthead .bw-usp-item > .bw-stars + span {
    font-size: 0.75rem !important;
    color: #444 !important;
    white-space: nowrap !important;
    display: inline !important;
}

html body #masthead .bw-stars {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 1px !important;
    color: #F4C430 !important;
}

/* ── RESPONSIVE: collapse at 1024px ── */
@media (max-width: 1024px) {
    html body #masthead .bw-nav-bar   { display: none !important; }
    html body #masthead .bw-usp-bar   { display: none !important; }
    html body #masthead .bw-utility-search { display: none !important; }
    html body #masthead .bw-utility-help   { display: none !important; }
    html body #masthead .bw-hamburger      { display: flex  !important; }
}

@media (max-width: 640px) {
    html body #masthead .bw-utility-account span { display: none !important; }
    html body #masthead .bw-utility-logo .custom-logo,
    html body #masthead .bw-utility-logo a img { height: 80px !important; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FOOTER EMERGENCY FIX — Maximum specificity using html body chain   ║
   ║  Fixes: dark background bleed, broken grid/flex, link colours       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Outer footer wrapper — transparent so rows control their own bg ── */
html body #bw-site-footer {
    background: transparent !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Shared container inside footer rows ── */
html body #bw-site-footer .bw-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ════════════════════════════════════════
   ROW 1 — BLUE BAR
   ════════════════════════════════════════ */
html body #bw-site-footer .bw-footer-blue-bar {
    background: #29a0f2 !important;
    padding: 18px 0 !important;
    display: block !important;
    width: 100% !important;
}

html body #bw-site-footer .bw-footer-blue-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* White logo in blue bar */
html body #bw-site-footer .bw-footer-blue-logo {
    display: block !important;
    flex-shrink: 0 !important;
}

html body #bw-site-footer .bw-footer-blue-logo .custom-logo,
html body #bw-site-footer .bw-footer-blue-logo a img,
html body #bw-site-footer .bw-footer-blue-logo img {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
}

/* Social icons row */
html body #bw-site-footer .bw-footer-socials {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

html body #bw-site-footer .bw-footer-socials li,
html body #bw-site-footer .bw-footer-socials li::marker {
    list-style: none !important;
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
    content: none !important;
}

html body #bw-site-footer .bw-fsocial {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

html body #bw-site-footer .bw-fsocial svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

html body #bw-site-footer .bw-fsocial--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
html body #bw-site-footer .bw-fsocial--whatsapp  { background: #25D366 !important; }
html body #bw-site-footer .bw-fsocial--pinterest { background: #E60023 !important; }
html body #bw-site-footer .bw-fsocial--facebook  { background: #1877F2 !important; }
html body #bw-site-footer .bw-fsocial--linkedin  { background: #0A66C2 !important; }

/* ════════════════════════════════════════
   ROW 2 — WHITE MAIN SECTION
   ════════════════════════════════════════ */
html body #bw-site-footer .bw-footer-main {
    background: #FFFFFF !important;
    padding: 40px 0 32px !important;
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #E8E8E8 !important;
}

/* THE 5-COLUMN GRID */
html body #bw-site-footer .bw-footer-main-grid {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr !important;
    gap: 32px !important;
    align-items: start !important;
    width: 100% !important;
}

/* About column */
html body #bw-site-footer .bw-footer-about-col {
    display: block !important;
}

html body #bw-site-footer .bw-footer-about-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: block !important;
}

html body #bw-site-footer .bw-footer-about-desc {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    color: #555555 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    display: block !important;
}

/* Link columns */
html body #bw-site-footer .bw-footer-links-col {
    display: block !important;
}

html body #bw-site-footer .bw-footer-link-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

html body #bw-site-footer .bw-footer-link-list li {
    list-style: none !important;
    list-style-type: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body #bw-site-footer .bw-footer-link-list li::marker,
html body #bw-site-footer .bw-footer-link-list li::before {
    content: none !important;
    display: none !important;
}

html body #bw-site-footer .bw-footer-link-list li a {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #444444 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 0 !important;
    line-height: 1.6 !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

html body #bw-site-footer .bw-footer-link-list li a:hover {
    color: #29a0f2 !important;
    padding-left: 4px !important;
}

/* Inventa column */
html body #bw-site-footer .bw-footer-inventa-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

html body #bw-site-footer .bw-footer-inventa-img {
    width: 130px !important;
    height: auto !important;
    max-width: 130px !important;
    display: block !important;
}

html body #bw-site-footer .bw-footer-inventa-tagline {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    color: #666666 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: block !important;
}

/* ════════════════════════════════════════
   ROW 3 — DARK BOTTOM BAR
   ════════════════════════════════════════ */
html body #bw-site-footer .bw-footer-bottom {
    background: #111827 !important;
    padding: 14px 0 !important;
    display: block !important;
    width: 100% !important;
}

html body #bw-site-footer .bw-footer-bottom-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
}

html body #bw-site-footer .bw-company-info {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    color: #9CA3AF !important;
    margin: 0 !important;
    display: block !important;
}

html body #bw-site-footer .bw-info-sep {
    margin: 0 8px !important;
    opacity: 0.5 !important;
}

html body #bw-site-footer .bw-footer-bottom-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
}

/* Payment badges */
html body #bw-site-footer .bw-payment-icons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
}

html body #bw-site-footer .bw-pay-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
}

html body #bw-site-footer .bw-pay-visa  { background: #1A1F71 !important; }
html body #bw-site-footer .bw-pay-mc   { background: #EB001B !important; }
html body #bw-site-footer .bw-pay-pp   { background: #003087 !important; }
html body #bw-site-footer .bw-pay-amex { background: #2E77BC !important; }

html body #bw-site-footer .bw-sitemap-link {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    color: #9CA3AF !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
}

html body #bw-site-footer .bw-sitemap-link:hover {
    color: #29a0f2 !important;
}

/* ── RESPONSIVE breakpoints ── */
@media (max-width: 1100px) {
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    html body #bw-site-footer .bw-footer-about-col {
        grid-column: 1 / -1 !important;
    }

    html body #bw-site-footer .bw-footer-inventa-col {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    html body #bw-site-footer .bw-footer-blue-inner {
        flex-direction: column !important;
        gap: 16px !important;
    }

    html body #bw-site-footer .bw-footer-bottom-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FINAL POLISH — client-approved Figma refinements                   ║
   ║  1. USP bar: deeper grey bg, BLACK icons, golden stars              ║
   ║  2. Nav: no dropdown carets                                         ║
   ║  3. Footer bottom: blue bar + white text                            ║
   ║  4. Global Regular (400) typography                                 ║
   ║  5. Need Help: correct label/number colours                         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. USP BAR — deeper grey background, BLACK icons
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #masthead .bw-usp-bar {
    background: #c8cdd5 !important;    /* medium grey — clearly visible */
    border-top: 1px solid #b0b6c0 !important;
    padding: 7px 0 !important;
}

/* Icons: black/dark so they show on grey */
html body #masthead .bw-usp-icon,
html body #masthead .bw-usp-icon * {
    color: #1C2B3A !important;
    stroke: #1C2B3A !important;     /* SVGs use stroke, not fill */
}

/* USP label text */
html body #masthead .bw-usp-item span {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;    /* Regular */
    color: #374151 !important;
    white-space: nowrap !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GOLDEN STARS — filled yellow colour
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #masthead .bw-stars,
html body #masthead .bw-stars span {
    color: #F5A623 !important;      /* rich golden yellow */
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    line-height: 1 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. NAV DROPDOWN CARETS — completely removed
      Catches WP ::after, Astra .sub-arrow span,
      and any theme-injected toggle buttons
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #masthead .bw-nav-menu li.menu-item-has-children > a::after,
html body #masthead .bw-nav-menu li.menu-item-has-children > a::before,
html body #masthead .bw-nav-menu li > .sub-arrow,
html body #masthead .bw-nav-menu li > button.dropdown-toggle,
html body #masthead nav .ast-menu-toggle,
html body #masthead nav .ast-submenu-icon {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. FOOTER BOTTOM BAR — blue background, white text
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #bw-site-footer .bw-footer-bottom {
    background: #29a0f2 !important;   /* blue to match Figma */
    padding: 14px 0 !important;
}

html body #bw-site-footer .bw-footer-bottom .bw-footer-bottom-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

html body #bw-site-footer .bw-company-info {
    color: #FFFFFF !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
}

html body #bw-site-footer .bw-info-sep {
    color: rgba(255,255,255,0.5) !important;
    margin: 0 8px !important;
}

html body #bw-site-footer .bw-sitemap-link {
    color: #FFFFFF !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}

html body #bw-site-footer .bw-sitemap-link:hover {
    color: #1C2B3A !important;
    text-decoration: underline !important;
}

/* Payment badges — white background so they pop on blue */
html body #bw-site-footer .bw-pay-badge {
    background: #FFFFFF !important;
    color: #1C2B3A !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 0 8px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.6875rem !important;
}

html body #bw-site-footer .bw-pay-visa  { color: #1A1F71 !important; }
html body #bw-site-footer .bw-pay-mc   { color: #EB001B !important; }
html body #bw-site-footer .bw-pay-pp   { color: #003087 !important; }
html body #bw-site-footer .bw-pay-amex { color: #2E77BC !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. GLOBAL TYPOGRAPHY — Regular (400) weight
      Applied to all paragraph / UI text globally.
      Headings keep their weights as before.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body,
p, li, td, th, label, input, select, textarea, span, a,
.entry-content, .widget, .woocommerce-loop-product__title,
.woocommerce-Price-amount, .product_meta,
.ast-container, .site-content {
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Keep intentional weights — headings, buttons, nav */
h1, h2, h3, h4, h5, h6 { font-weight: 700 !important; }
.bw-master-button, button[type="submit"], .button,
.wc-block-components-button, .checkout-button        { font-weight: 600 !important; }

/* Nav links stay medium so they're readable on blue */
html body #masthead .bw-nav-bar .bw-nav-menu > li > a {
    font-weight: 500 !important;
}

/* Footer column links stay regular */
html body #bw-site-footer .bw-footer-link-list li a {
    font-weight: 400 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. NEED HELP — label grey, number dark navy
      Match Figma: small grey "Need Help?" above
      bold dark phone number
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body #masthead .bw-help-label {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;          /* light grey */
    display: block !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
}

html body #masthead .bw-help-phone {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;          /* dark navy */
    text-decoration: none !important;
    display: block !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

html body #masthead .bw-help-phone:hover {
    color: #29a0f2 !important;
}

/* Login / Register link — match Figma Regular style */
html body #masthead .bw-utility-account {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;        /* Regular */
    color: #374151 !important;
    gap: 5px !important;
}

html body #masthead .bw-utility-account:hover {
    color: #29a0f2 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ADMIN-LOGGED-IN + SUB-ARROW + FOOTER TEXT FIXES                    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── 1. Admin bar offset — prevents sticky header hiding under WP toolbar ── */
.admin-bar #masthead,
.admin-bar html body #masthead {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar #masthead,
    .admin-bar html body #masthead {
        top: 46px !important;   /* WP toolbar is 46px on small screens */
    }
}

/* ── 2. Hide ALL Astra-injected sub-arrow / toggle elements in desktop nav ──
   Astra's navigation.js dynamically appends <span class="sub-arrow"> and
   <button class="ast-menu-toggle"> at DOMContentLoaded.  CSS hides them
   before our JS has a chance to remove them from the DOM.               */
html body #masthead .bw-nav-menu .sub-arrow,
html body #masthead .bw-nav-menu .ast-menu-toggle,
html body #masthead .bw-nav-menu button.dropdown-toggle,
html body #masthead .bw-nav-bar  .sub-arrow,
html body #masthead .bw-nav-bar  .ast-menu-toggle,
html body #masthead nav          .sub-arrow,
html body #masthead nav          .ast-menu-toggle,
/* Catch any ::after / ::before caret as well */
html body #masthead .bw-nav-menu li.menu-item-has-children > a::after,
html body #masthead .bw-nav-menu li.menu-item-has-children > a::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── 3. Footer bottom bar — company info on a SINGLE line, never wraps ── */
html body #bw-site-footer .bw-company-info {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ── 4. Need Help text block — ensure label + number stack vertically ── */
html body #masthead .bw-utility-help {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

html body #masthead .bw-help-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

html body #masthead .bw-help-label {
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: block !important;
}

html body #masthead .bw-help-phone {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: block !important;
    text-decoration: none !important;
}

/* ── 5. Phone icon circle — outlined style matching Figma ── */
html body #masthead .bw-help-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: transparent !important;   /* NO fill — outline only */
    border: 2px solid #29a0f2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

html body #masthead .bw-help-icon-wrap svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: block !important;
    fill: #29a0f2 !important;             /* blue icon to match outline */
    flex-shrink: 0 !important;
}

/* Need Help label + phone number → blue to match Figma */
html body #masthead .bw-help-label {
    color: #29a0f2 !important;
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: block !important;
}

html body #masthead .bw-help-phone {
    color: #29a0f2 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    display: block !important;
    text-decoration: none !important;
}

/* =====================================================================
   SHOP / CATEGORY — FINAL SPECIFICITY LAYER
   Prefix: body.ast-left-sidebar.woocommerce-page  → (0,0,2,1)
   beats the old 2-class prefix (0,0,2,0) in ALL !important ties.
   Also neutralises the double site-content padding.
   ===================================================================== */

/* Kill any lingering site-content padding that double-wraps the container */
body.woocommerce-page .site-content,
body.post-type-archive-product .site-content,
body.tax-product_cat .site-content,
body.tax-product_tag .site-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Container ── */
body.ast-left-sidebar.woocommerce-page .ast-container,
body.ast-left-sidebar.post-type-archive-product .ast-container,
body.ast-left-sidebar.tax-product_cat .ast-container,
body.ast-left-sidebar.tax-product_tag .ast-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 24px !important;
    max-width: 1380px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
}

/* ── Sidebar ── */
body.ast-left-sidebar.woocommerce-page #secondary,
body.ast-left-sidebar.post-type-archive-product #secondary,
body.ast-left-sidebar.tax-product_cat #secondary,
body.ast-left-sidebar.tax-product_tag #secondary {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    overflow: visible !important;
    padding: 0 !important;
    position: sticky !important;
    top: 105px !important;
    align-self: flex-start !important;
}

/* ── Content area ── */
body.ast-left-sidebar.woocommerce-page #primary,
body.ast-left-sidebar.post-type-archive-product #primary,
body.ast-left-sidebar.tax-product_cat #primary,
body.ast-left-sidebar.tax-product_tag #primary {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
}

/* ── 4-column grid ── */
body.ast-left-sidebar.woocommerce-page #primary ul.products,
body.ast-left-sidebar.post-type-archive-product #primary ul.products,
body.ast-left-sidebar.tax-product_cat #primary ul.products,
body.ast-left-sidebar.tax-product_tag #primary ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* ── Filter widget: clear overflow:hidden that clips text ── */
body.ast-left-sidebar .berocket_single_filter_widget,
body.ast-left-sidebar .bapf_wid_group,
body.ast-left-sidebar .widget {
    overflow: visible !important;
}

body.ast-left-sidebar .bapf_body ul li {
    overflow: visible !important;
    white-space: normal !important;
}

/* Tablet */
@media (max-width: 1100px) {
    body.ast-left-sidebar.woocommerce-page .ast-container,
    body.ast-left-sidebar.post-type-archive-product .ast-container,
    body.ast-left-sidebar.tax-product_cat .ast-container {
        flex-direction: column !important;
        padding: 20px 16px !important;
    }
    body.ast-left-sidebar.woocommerce-page #secondary,
    body.ast-left-sidebar.post-type-archive-product #secondary,
    body.ast-left-sidebar.tax-product_cat #secondary {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        position: static !important;
    }
    body.ast-left-sidebar.woocommerce-page #primary ul.products,
    body.ast-left-sidebar.post-type-archive-product #primary ul.products,
    body.ast-left-sidebar.tax-product_cat #primary ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    body.ast-left-sidebar.woocommerce-page #primary ul.products,
    body.ast-left-sidebar.post-type-archive-product #primary ul.products,
    body.ast-left-sidebar.tax-product_cat #primary ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =====================================================================
   SINGLE PRODUCT PAGE — 2-COLUMN LAYOUT
   Left: product gallery | Right: product summary
   Tabs + Related are BELOW in their own full-width row.
   ===================================================================== */

/*
 * div.product is a flex container with flex-wrap: wrap.
 * Gallery  → order:1, flex: 0 0 45%
 * Summary  → order:2, flex: 1 1 0
 * Tabs     → order:3, flex: 0 0 100%  (wraps to new row)
 * Related  → order:4, block below
 *
 * NOTE: NO position:sticky on gallery — it causes the gallery to visually
 * "float over" the tabs content as the user scrolls.
 */

/* Parent container */
html body.single-product .woocommerce div.product,
html body.single-product div.product {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 36px 48px !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
}

/* Left column — gallery (NO sticky — sticky causes overlap) */
html body.single-product .woocommerce-product-gallery,
html body.single-product div.product .woocommerce-product-gallery {
    order: 1 !important;
    flex: 0 0 46% !important;
    width: 46% !important;
    max-width: 540px !important;
    position: static !important;   /* ← sticky removed: was causing tabs/related overlap */
    align-self: flex-start !important;
}

html body.single-product .woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    object-fit: contain !important;
}

html body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    border: 1px solid #E5E7EB !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
}

/* Right column — summary */
html body.single-product .entry-summary,
html body.single-product div.product .entry-summary {
    order: 2 !important;
    flex: 1 1 0 !important;
    min-width: 280px !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Product title */
html body.single-product .entry-summary h1.product_title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #1C2B3A !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
}

/* Price */
html body.single-product .entry-summary .price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #29a0f2 !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
}

html body.single-product .entry-summary .price del {
    color: #9ca3af !important;
    font-size: 1.1rem !important;
    margin-right: 8px !important;
}

html body.single-product .entry-summary .price ins {
    text-decoration: none !important;
    color: #29a0f2 !important;
}

/* Short description */
html body.single-product .entry-summary .woocommerce-product-details__short-description {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.9375rem !important;
    color: #4B5563 !important;
    line-height: 1.7 !important;
    margin: 0 0 24px 0 !important;
}

/* Add to cart / quantity row */
html body.single-product .entry-summary form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin: 0 0 24px 0 !important;
}

html body.single-product .entry-summary .quantity input.qty {
    width: 72px !important;
    height: 48px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #1C2B3A !important;
}

html body.single-product .entry-summary .single_add_to_cart_button {
    background: var(--bw-btn-gradient) !important;
    background-color: #29a0f2 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 32px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(41,160,242,0.30) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    flex: 1 1 auto !important;
    text-align: center !important;
}

html body.single-product .entry-summary .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, #1a8cd8 0%, #1070b8 100%) !important;
    box-shadow: 0 6px 20px rgba(41,160,242,0.45) !important;
    transform: translateY(-2px) !important;
}

/* Product meta (SKU, Category) */
html body.single-product .entry-summary .product_meta {
    font-size: 0.8125rem !important;
    color: #6B7280 !important;
    line-height: 1.8 !important;
    border-top: 1px solid #E5E7EB !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
}

html body.single-product .entry-summary .product_meta a {
    color: #29a0f2 !important;
}

/* Breadcrumbs on product page */
html body.single-product .woocommerce-breadcrumb {
    font-size: 0.8125rem !important;
    color: #9ca3af !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
}

html body.single-product .woocommerce-breadcrumb a {
    color: #29a0f2 !important;
}

/* Tabs section — order:3, forced to its own full-width row */
html body.single-product .woocommerce-tabs {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;  /* guarantees wrap to new row */
    clear: both !important;
    display: block !important;
    margin-top: 40px !important;
    border-top: 1px solid #E5E7EB !important;
    padding-top: 32px !important;
    position: static !important;
    z-index: 1 !important;
    background: #fff !important;
}

html body.single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    border-bottom: 2px solid #E5E7EB !important;
}

html body.single-product .woocommerce-tabs ul.tabs li {
    list-style: none !important;
    margin: 0 !important;
}

html body.single-product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 10px 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    border-radius: 6px 6px 0 0 !important;
    transition: color 0.2s ease !important;
}

html body.single-product .woocommerce-tabs ul.tabs li.active a,
html body.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #29a0f2 !important;
    border-bottom: 2px solid #29a0f2 !important;
}

/* Related / Upsell products — always a full-width block below everything */
html body.single-product .related.products,
html body.single-product .upsells.products {
    order: 4 !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    min-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 48px !important;
    padding-top: 32px !important;
    border-top: 2px solid #f0f2f5 !important;
    position: static !important;
    z-index: 1 !important;
    background: #fff !important;
}

html body.single-product .related.products h2,
html body.single-product .upsells.products h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    margin-bottom: 24px !important;
}

html body.single-product .related.products ul.products,
html body.single-product .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

/* Single product: ensure full-width page container */
html body.single-product .ast-container {
    max-width: 1360px !important;
    padding: 32px 24px !important;
    margin: 0 auto !important;
}

/* Single product responsive */
@media (max-width: 900px) {
    html body.single-product .woocommerce div.product,
    html body.single-product div.product {
        flex-direction: column !important;
        gap: 24px !important;
    }

    html body.single-product .woocommerce-product-gallery {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    html body.single-product .entry-summary {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    html body.single-product .woocommerce-tabs,
    html body.single-product .related.products,
    html body.single-product .upsells.products {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }

    html body.single-product .related.products ul.products,
    html body.single-product .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    html body.single-product .related.products ul.products,
    html body.single-product .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOP PAGE REDESIGN — Screenshot-1 Reference
   Section A: Filter Sidebar  |  Section B: Product Cards
   These rules are scoped to .woocommerce-page (archive) only.
   Single-product pages are never targeted.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A1. "Filter by" pseudo-heading injected via CSS above sidebar ── */
body.woocommerce-page #secondary.widget-area {
    padding: 0 4px;
}
body.woocommerce-page #secondary.widget-area::before {
    content: "Filter by";
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1C2B3A;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}

/* ── A2. Each widget section ── */
body.woocommerce-page #secondary .widget {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
}

/* ── A3. Widget title (section header) — flex row with caret arrow ── */
body.woocommerce-page #secondary .widget-title,
body.woocommerce-page #secondary .widgettitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    border-top: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    cursor: pointer;
    user-select: none;
    line-height: 1.4 !important;
}
body.woocommerce-page #secondary .widget-title::after,
body.woocommerce-page #secondary .widgettitle::after {
    content: "∧";
    font-size: 11px;
    color: #666;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease;
    display: inline-block;
}
body.woocommerce-page #secondary .widget-title.bw-collapsed::after,
body.woocommerce-page #secondary .widgettitle.bw-collapsed::after {
    transform: rotate(180deg);
}

/* ── A4. WooCommerce Layered Nav list (attribute filters) ── */
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list {
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list li {
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list li a {
    color: #333 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    font-size: 13px !important;
}
/* Custom checkbox square (replaces browser default) */
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list li a::before {
    content: '' !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    border: 1.5px solid #bbb !important;
    border-radius: 3px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}
/* Checked state */
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list li.chosen a::before,
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list li a:hover::before {
    background-color: #29a0f2 !important;
    border-color: #29a0f2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 8px !important;
}
/* Count number */
body.woocommerce-page #secondary ul.woocommerce-widget-layered-nav-list li .count {
    color: #999 !important;
    font-size: 12px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* ── A5. BeRocket / BAPF filter widget — same checkbox treatment ── */
body.woocommerce-page #secondary .bapf_body ul li,
body.woocommerce-page #secondary .berocket_single_filter_widget ul li {
    display: flex !important;
    align-items: center !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
    list-style: none !important;
}
body.woocommerce-page #secondary .bapf_body ul li label,
body.woocommerce-page #secondary .berocket_single_filter_widget ul li label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    color: #333 !important;
    font-size: 13px !important;
}
body.woocommerce-page #secondary .bapf_body ul li input[type="checkbox"],
body.woocommerce-page #secondary .berocket_single_filter_widget ul li input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    border: 1.5px solid #bbb !important;
    border-radius: 3px !important;
    background: #fff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
body.woocommerce-page #secondary .bapf_body ul li input[type="checkbox"]:checked,
body.woocommerce-page #secondary .berocket_single_filter_widget ul li input[type="checkbox"]:checked {
    background-color: #29a0f2 !important;
    border-color: #29a0f2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 8px !important;
}

/* ── A6. Color swatches — circular dots for swatch plugins ── */
body.woocommerce-page #secondary .swatch-list,
body.woocommerce-page #secondary ul.bapf_swatch_image,
body.woocommerce-page #secondary ul.bapf_swatch_color {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 0 12px !important;
    list-style: none !important;
    margin: 0 !important;
}
body.woocommerce-page #secondary .swatch-list li,
body.woocommerce-page #secondary ul.bapf_swatch_color li,
body.woocommerce-page #secondary ul.bapf_swatch_image li {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
body.woocommerce-page #secondary .swatch-list li:hover,
body.woocommerce-page #secondary ul.bapf_swatch_color li:hover,
body.woocommerce-page #secondary ul.bapf_swatch_image li:hover,
body.woocommerce-page #secondary .swatch-list li.chosen,
body.woocommerce-page #secondary ul.bapf_swatch_color li.chosen,
body.woocommerce-page #secondary ul.bapf_swatch_image li.chosen {
    border-color: #29a0f2 !important;
    box-shadow: 0 0 0 2px rgba(41,160,242,0.4) !important;
}
body.woocommerce-page #secondary .swatch-list li a,
body.woocommerce-page #secondary ul.bapf_swatch_color li a,
body.woocommerce-page #secondary ul.bapf_swatch_image li a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}
/* Swatch label tooltip */
body.woocommerce-page #secondary .swatch-list li a::before {
    display: none !important;
}

/* ── A7. Price range slider ── */
body.woocommerce-page #secondary .widget_price_filter .price_slider_wrapper {
    padding: 8px 0 4px;
}
body.woocommerce-page #secondary .widget_price_filter .ui-slider {
    background: #e0e0e0 !important;
    border: none !important;
    height: 4px !important;
    border-radius: 2px !important;
    margin: 16px 8px !important;
}
body.woocommerce-page #secondary .widget_price_filter .ui-slider-range {
    background: #29a0f2 !important;
    border-radius: 2px !important;
}
body.woocommerce-page #secondary .widget_price_filter .ui-slider-handle {
    background: #29a0f2 !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    top: -6px !important;
    margin-left: -8px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    cursor: grab !important;
}
body.woocommerce-page #secondary .widget_price_filter .price_label {
    font-size: 13px !important;
    color: #333 !important;
    margin-top: 6px !important;
}
body.woocommerce-page #secondary .widget_price_filter .price_slider_amount {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    color: #444 !important;
    margin-top: 8px !important;
}
/* Hide the "Filter" submit button — most themes auto-apply on release */
body.woocommerce-page #secondary .widget_price_filter button.button {
    display: none !important;
}

/* ── A8. "+ MORE FILTERS" button appended by PHP ── */
.bw-more-filters-btn {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    background: transparent !important;
    border: 1.5px solid #29a0f2 !important;
    border-radius: 6px !important;
    color: #29a0f2 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    cursor: pointer !important;
    margin-top: 16px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
}
.bw-more-filters-btn:hover {
    background: #29a0f2 !important;
    color: #fff !important;
}

/* ── A9. Active filters widget (applied filters strip) ── */
body.woocommerce-page #secondary .woocommerce-widget-layered-nav-filters ul {
    list-style: none !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
body.woocommerce-page #secondary .woocommerce-widget-layered-nav-filters ul li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #e8f4fd !important;
    color: #29a0f2 !important;
    border: 1px solid #29a0f2 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
body.woocommerce-page #secondary .woocommerce-widget-layered-nav-filters ul li a::before {
    content: '×' !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION B: PRODUCT CARDS — Screenshot-1 reference design
   White card, category label, blue title, colours count, SKU, price.
   No Add to Cart button (removed via PHP hook + CSS safety net).
   ══════════════════════════════════════════════════════════════════════════ */

/* B1. Safety net — hide loop button via CSS on archive pages */
body.woocommerce-page:not(.single-product) ul.products li.product .button,
body.woocommerce-page:not(.single-product) ul.products li.product a.button,
body.woocommerce-page:not(.single-product) ul.products li.product .add_to_cart_button,
body.woocommerce-page:not(.single-product) ul.products li.product .product_type_variable {
    display: none !important;
}

/* B2. Card shell */
body.woocommerce-page ul.products li.product {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease !important;
}
body.woocommerce-page ul.products li.product:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.10) !important;
    border-color: #c8e6f9 !important;
}

/* B3. Product image — fixed-height, cover crop */
body.woocommerce-page ul.products li.product .woocommerce-LoopProduct-link,
body.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail,
body.woocommerce-page ul.products li.product img.wp-post-image {
    display: block !important;
    width: 100% !important;
}
body.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail,
body.woocommerce-page ul.products li.product img.wp-post-image {
    height: 210px !important;
    object-fit: cover !important;
    border-radius: 8px 8px 0 0 !important;
    transition: transform 0.3s ease !important;
    margin: 0 !important;
}
body.woocommerce-page ul.products li.product:hover .attachment-woocommerce_thumbnail,
body.woocommerce-page ul.products li.product:hover img.wp-post-image {
    transform: scale(1.04) !important;
}

/* B4. Category label (above product title — .ast-woo-product-category by Astra) */
body.woocommerce-page ul.products li.product .ast-woo-product-category {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #999 !important;
    padding: 10px 12px 2px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* B5. Product title */
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #29a0f2 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    padding: 2px 12px 0 !important;
    margin: 0 !important;
    display: block !important;
}
body.woocommerce-page ul.products li.product .woocommerce-loop-product__title:hover {
    color: #1a8cd8 !important;
}

/* B6. Colours available count (added by PHP hook) */
.bw-colours-count {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #29a0f2;
    padding: 3px 12px 0;
    line-height: 1.4;
    font-family: 'DM Sans', sans-serif;
}

/* B7. Brand name — above product title (added by PHP hook) */
.bw-product-brand {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #29a0f2;
    padding: 6px 12px 2px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* B7b. Legacy SKU class — keep for backward compat but hide */
.bw-product-sku {
    display: none;
}

/* B8. Price */
body.woocommerce-page ul.products li.product .price {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    padding: 4px 12px 14px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
body.woocommerce-page ul.products li.product .price ins {
    text-decoration: none !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
}
body.woocommerce-page ul.products li.product .price del {
    color: #bbb !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}
/* "From:" prefix — WooCommerce outputs this for variable price ranges */
body.woocommerce-page ul.products li.product .price .from {
    font-size: 10px;
    font-weight: 400;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* "From" prefix injected by bw_price_from_prefix() on all archive product cards */
.bw-price-from {
    font-family:    'Montserrat', sans-serif !important;
    font-size:      11px !important;
    font-weight:    600 !important;
    color:          #00AEEF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-right:   2px !important;
    vertical-align: middle !important;
}
body.woocommerce-page ul.products li.product .price .bw-price-from,
body.woocommerce ul.products li.product .price .bw-price-from {
    font-size:   11px !important;
    font-weight: 700 !important;
    color:       #00AEEF !important;
}

/* B9. Subcategory image cards (displayed at the top of category archive pages) */
body.woocommerce-page ul.products.columns-5 li.product-category .woocommerce-loop-category__title,
body.woocommerce-page ul.products li.product-category .woocommerce-loop-category__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: center !important;
}
body.woocommerce-page ul.products li.product-category {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}
body.woocommerce-page ul.products li.product-category a {
    position: relative !important;
    display: block !important;
}
body.woocommerce-page ul.products li.product-category img {
    height: 140px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
    width: 100% !important;
}
body.woocommerce-page ul.products li.product-category a::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(41,160,242,0.55) !important;
    border-radius: 8px !important;
    pointer-events: none !important;
}
body.woocommerce-page ul.products li.product-category .woocommerce-loop-category__title {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* ── Responsive: tablet 3-col, mobile 2-col ── */
@media (max-width: 1100px) {
    body.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail,
    body.woocommerce-page ul.products li.product img.wp-post-image {
        height: 180px !important;
    }
}
@media (max-width: 768px) {
    body.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail,
    body.woocommerce-page ul.products li.product img.wp-post-image {
        height: 160px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   BW CUSTOM FILTER WIDGET  —  [bw_shop_filter] shortcode
   All selectors use .bwf-* prefix — zero conflict with any plugin/theme.
   ══════════════════════════════════════════════════════════════════════════ */

/* Container */
.bwf-filter {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #333;
    width: 100%;
}

/* "Filter by" main heading */
.bwf-filter-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1C2B3A;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2.5px solid #1C2B3A;
}
/* Hide our own shortcode title when inside a sidebar widget —
   the Astra widget title already provides the "Filter by" heading */
#secondary .widget .bwf-filter-title,
.widget-area .widget .bwf-filter-title {
    display: none !important;
}

/* ── Section wrapper — bold 2px Figma-style dividers ── */
.bwf-section {
    border-top: 2px solid #d1d5db;
}
/* Remove top border from FIRST section (widget title acts as separator) */
#bwf-filter .bwf-section:first-child {
    border-top: none !important;
}
.bwf-section:last-of-type {
    border-bottom: 2px solid #d1d5db;
}

/* ── Section header / toggle ── */
.bwf-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1C2B3A;
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.bwf-sec-head:hover {
    color: #29a0f2;
}
.bwf-arrow {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 8px;
    width: 20px;
    height: 20px;
    line-height: 1;
}
/* Collapsed = arrow rotated 180° */
.bwf-section:not(.bwf-open) .bwf-arrow {
    transform: rotate(180deg);
}

/* ── Section body ── */
.bwf-sec-body {
    padding-top: 6px;
    padding-bottom: 18px;
}

/* ── Checkbox list — max-height prevents sidebar from becoming miles long ── */
.bwf-list {
    list-style: none !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    max-height: 210px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #29a0f2 #ececec;
    padding-right: 4px !important;
}
/* Colour list — compact scroll box; large enough to show ~10 items but
   doesn't push the "More Filters" button off screen */
.bwf-list.bwf-colour-list {
    max-height: 220px;
    scrollbar-color: #29a0f2 #ececec;
}
.bwf-list::-webkit-scrollbar {
    width: 4px;
}
.bwf-list::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 4px;
}
.bwf-list::-webkit-scrollbar-thumb {
    background: #29a0f2;
    border-radius: 4px;
}
.bwf-list li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.bwf-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
    color: #333 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    transition: color 0.15s !important;
}
.bwf-item:hover {
    color: #29a0f2 !important;
}
.bwf-item.bwf-active {
    color: #1C2B3A !important;
    font-weight: 600 !important;
}

/* Custom checkbox square */
.bwf-cb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    border: 1.5px solid #bbb !important;
    border-radius: 3px !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: background 0.15s, border-color 0.15s !important;
}
.bwf-item:hover .bwf-cb,
.bwf-cb-checked,
.bwf-item.bwf-active .bwf-cb {
    background: #29a0f2 !important;
    border-color: #29a0f2 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 8px !important;
}

/* Count */
.bwf-count {
    color: #aaa;
    font-size: 12px;
    margin-left: auto;
    flex-shrink: 0;
}
.bwf-item.bwf-active .bwf-count {
    color: #666;
}

/* ── Tag / pill style (Gender etc.) ── */
.bwf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 10px;
}
.bwf-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border: 1.5px solid #c8c8c8;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    color: #333;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.4;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bwf-tag:hover {
    border-color: #29a0f2;
    color: #29a0f2;
    background: rgba(41,160,242,0.05);
}
.bwf-tag.bwf-tag-active {
    border-color: #29a0f2;
    color: #29a0f2;
    background: rgba(41,160,242,0.08);
    font-weight: 600;
}
.bwf-tag-count {
    color: #999;
    font-size: 11px;
    font-weight: 400;
}
.bwf-tag.bwf-tag-active .bwf-tag-count {
    color: #29a0f2;
}

/* ── Colour swatches — scrollable container shows ~24 per view ── */
.bwf-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 4px 10px 0;
    max-height: 128px; /* 4 rows × (24px swatch + 6px gap) = approx 24 visible */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #29a0f2 #ececec;
}
.bwf-swatches::-webkit-scrollbar {
    width: 4px;
}
.bwf-swatches::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 4px;
}
.bwf-swatches::-webkit-scrollbar-thumb {
    background: #29a0f2;
    border-radius: 4px;
}
.bwf-swatch {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    flex-shrink: 0;
    text-decoration: none !important;
    outline: none;
}
.bwf-swatch:hover {
    transform: scale(1.18);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.bwf-swatch.bwf-swatch-active {
    border-color: #29a0f2 !important;
    box-shadow: 0 0 0 3px rgba(41,160,242,0.35) !important;
    transform: scale(1.12);
}

/* ── Swatches with no resolved hex — grey circle + 2-letter initials ── */
.bwf-swatch.bwf-swatch-nocolor {
    background: #d1d5db !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.bwf-sw-init {
    font-size: 7px !important;
    font-weight: 700 !important;
    color: #555 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

/* ── Load More Colours button ── */
.bwf-load-more-colours {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 5px 10px;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-radius: 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #29a0f2;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}
.bwf-load-more-colours:hover {
    background: #f0f8ff;
    border-color: #29a0f2;
}
.bwf-load-more-colours:disabled {
    opacity: 0.55;
    cursor: wait;
}
.bwf-lmc-rem {
    color: #9ca3af;
    font-weight: 400;
}

/* ── Dual-range price slider ── */
.bwf-price-wrap {
    padding: 4px 0 10px;
}
.bwf-range-wrap {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
}
.bwf-range {
    position: absolute;
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 3;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}
/* Fully hide the browser-rendered range track in every browser.
   We use the .bwf-track / .bwf-fill divs for the visual track instead. */
.bwf-range::-webkit-slider-runnable-track {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    height: 4px;
}
.bwf-range::-moz-range-track {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    height: 4px;
}
.bwf-range::-moz-range-progress {
    background: transparent !important;
    opacity: 0 !important;
}
.bwf-range::-ms-track {
    background: transparent !important;
    border-color: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
    height: 4px;
}
.bwf-range::-ms-fill-lower,
.bwf-range::-ms-fill-upper {
    background: transparent !important;
    opacity: 0 !important;
}
.bwf-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #29a0f2;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.22);
    pointer-events: all;
    cursor: grab;
    position: relative;
    z-index: 4;
}
.bwf-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #29a0f2;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.22);
    pointer-events: all;
    cursor: grab;
}
.bwf-track {
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    z-index: 1;
}
.bwf-fill {
    position: absolute;
    height: 100%;
    background: #29a0f2;
    border-radius: 2px;
    left: 0; right: 0;
}
.bwf-price-vals {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #444;
    margin-top: 6px;
    font-weight: 500;
}

/* ── More Filters / Clear buttons ── */
.bwf-more-btn {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 10px 0;
    background: transparent;
    border: 2px solid #29a0f2;
    border-radius: 6px;
    color: #29a0f2;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.bwf-more-btn:hover {
    background: #29a0f2;
    color: #fff;
}
.bwf-clear {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: #888;
    text-decoration: none;
    transition: color 0.15s;
}
.bwf-clear:hover {
    color: #c00;
}

/* =============================================================================
   CATEGORY SHOWCASE STRIP
   ============================================================================= */

/* Outer wrapper: description + tiles, with breathing room before products */
.bwf-cat-showcase-wrap {
    margin-bottom: 12px;
}

/* Description text above tiles — 28px gap pushes tiles clearly below */
.bwf-cat-showcase-desc {
    margin-bottom: 28px;
    padding: 16px 18px;
    background: #f0f9ff;
    border-left: 4px solid #29a0f2;
    border-radius: 0 6px 6px 0;
}

/* Lead sentence — bold, blue, larger */
.bwf-desc-lead {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.975rem;
    font-weight: 700;
    color: #29a0f2;
    line-height: 1.5;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}

/* Body copy — regular, dark grey, readable */
.bwf-desc-body {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* Fallback for plain <p> tags inside .bwf-cat-showcase-desc */
.bwf-cat-showcase-desc > p {
    margin: 0 0 6px;
    color: #444;
    font-size: 0.875rem;
    line-height: 1.65;
}
.bwf-cat-showcase-desc > p:last-child {
    margin-bottom: 0;
}

/* Tile row */
.bwf-cat-showcase {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 0;
    scrollbar-width: thin;
    scrollbar-color: #29a0f2 #e8e8e8;
}
.bwf-cat-showcase::-webkit-scrollbar        { height: 4px; }
.bwf-cat-showcase::-webkit-scrollbar-track  { background: #e8e8e8; border-radius: 4px; }
.bwf-cat-showcase::-webkit-scrollbar-thumb  { background: #29a0f2; border-radius: 4px; }

/* Each tile fills available width equally across 5 items */
.bwf-cat-tile {
    flex: 1 1 0;
    min-width: 120px;
    max-width: 220px;
    text-decoration: none !important;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.09);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    display: block;
}
.bwf-cat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(41,160,242,0.25);
}
.bwf-cat-tile-img {
    width: 100%;
    height: 165px;
    overflow: hidden;
    background: #f4f6f8;
}
.bwf-cat-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Show the top 30% of the image frame so garment neckline/chest area
       is centred rather than the waist being cropped at the top */
    object-position: 50% 20%;
    display: block;
    transition: transform 0.3s ease;
}
.bwf-cat-tile:hover .bwf-cat-tile-img img {
    transform: scale(1.06);
}
.bwf-cat-tile-label {
    background: #29a0f2;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    padding: 7px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

/* Reduce the gap that #bwf-products-area adds above result count */
#bwf-products-area > .woocommerce-result-count:first-child,
#bwf-products-area > p.woocommerce-result-count:first-child {
    margin-top: 10px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bwf-cat-tile { flex: 0 0 130px; min-width: 130px; }
    .bwf-cat-tile-img { height: 95px; }
    .bwf-cat-tile-label { font-size: 11px; padding: 6px; }
    .bwf-cat-showcase-desc { font-size: 13px; }
}

/* ── AJAX loading state ── */
#bwf-products-area {
    position: relative;
    min-height: 200px;
    transition: opacity 0.18s ease;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.bwf-spinner-wrap {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    pointer-events: none;
}
.bwf-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(41,160,242,0.25);
    border-top-color: #29a0f2;
    border-radius: 50%;
    animation: bwf-spin 0.7s linear infinite;
}
@keyframes bwf-spin {
    to { transform: rotate(360deg); }
}
/* Active filter tag pulse on click */
.bwf-item.bwf-active .bwf-cb,
.bwf-cb.bwf-cb-checked {
    background-color: #29a0f2 !important;
    border-color: #29a0f2 !important;
}
.bwf-tag.bwf-tag-active {
    background: #29a0f2 !important;
    color: #fff !important;
    border-color: #29a0f2 !important;
}
.bwf-swatch.bwf-swatch-active {
    outline: 3px solid #29a0f2 !important;
    outline-offset: 2px !important;
}

/* =============================================================================
   SHOP PAGE — PROFESSIONAL PAGINATION
   ============================================================================= */

/* Wrapper */
.woocommerce-pagination,
nav.woocommerce-pagination {
    display: block !important;
    width: 100% !important;
    margin: 28px 0 16px !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Remove default list styles */
.woocommerce-pagination ul.page-numbers,
.bwf-pagination ul.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap;
    justify-content: center;
}

.woocommerce-pagination ul.page-numbers li,
.bwf-pagination ul.page-numbers li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* All page number items (links + current + dots) */
.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce-pagination ul.page-numbers li span.page-numbers,
.bwf-pagination ul.page-numbers li a.page-numbers,
.bwf-pagination ul.page-numbers li span.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    border: 1.5px solid #d8dde5 !important;
    background: #fff !important;
    color: #2D2D2D !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Hover state */
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.bwf-pagination ul.page-numbers li a.page-numbers:hover {
    border-color: #29a0f2 !important;
    background: #f0f8ff !important;
    color: #29a0f2 !important;
    box-shadow: 0 2px 8px rgba(41,160,242,0.18) !important;
}

/* Current / active page */
.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.bwf-pagination ul.page-numbers li span.page-numbers.current {
    background: #29a0f2 !important;
    border-color: #29a0f2 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(41,160,242,0.35) !important;
    cursor: default !important;
}

/* Dots (…) */
.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
.bwf-pagination ul.page-numbers li span.page-numbers.dots {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #aaa !important;
    letter-spacing: 2px !important;
    min-width: 24px !important;
    padding: 0 4px !important;
}

/* Prev / Next arrow buttons — slightly wider */
.woocommerce-pagination ul.page-numbers li a.page-numbers.prev,
.woocommerce-pagination ul.page-numbers li a.page-numbers.next,
.bwf-pagination ul.page-numbers li a.page-numbers.prev,
.bwf-pagination ul.page-numbers li a.page-numbers.next {
    min-width: 44px !important;
    font-size: 16px !important;
    border-color: #c6cdd6 !important;
    color: #555 !important;
}
.woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover,
.bwf-pagination ul.page-numbers li a.page-numbers.prev:hover,
.bwf-pagination ul.page-numbers li a.page-numbers.next:hover {
    border-color: #29a0f2 !important;
    color: #29a0f2 !important;
    background: #f0f8ff !important;
}

/* Also style AJAX-returned pagination (inside #bwf-products-area) */
#bwf-products-area .woocommerce-pagination,
#bwf-products-area nav.woocommerce-pagination {
    margin-top: 24px !important;
}

/* Mobile */
@media (max-width: 600px) {
    .woocommerce-pagination ul.page-numbers li a.page-numbers,
    .woocommerce-pagination ul.page-numbers li span.page-numbers {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
        padding: 0 8px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE OVERHAUL v3.3 — Mobile & Tablet Polish                  ║
   ║  Scope: header utility bar · shop grid · single product · footer    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────
   1. HEADER — utility bar polish on small phones (≤480px)
   ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Tighten the bar padding and inter-item gap */
    html body #masthead .bw-utility-bar {
        padding: 8px 0 !important;
    }
    html body #masthead .bw-utility-inner {
        gap: 8px !important;
        padding: 0 14px !important;
    }
    /* Hide "Login / Register" text — keep icon only */
    html body #masthead .bw-utility-account span {
        display: none !important;
    }
    /* Shrink logo slightly */
    html body #masthead .bw-utility-logo .custom-logo,
    html body #masthead .bw-utility-logo a img {
        height: 44px !important;
    }
    /* Right cluster: tighter gap */
    html body #masthead .bw-utility-right {
        gap: 4px !important;
    }
}


/* ─────────────────────────────────────────────────────
   2. SHOP PAGE — product grid columns for ALL page types
   Covers both ast-left-sidebar and non-sidebar layouts.
   More specific than previous rules so they win.
   ───────────────────────────────────────────────────── */

/* Desktop: sidebar visible → 4 cols already set above.
   At 1024px nav collapses; ensure sidebar stacks + 3 cols  */
@media (max-width: 1024px) {
    html body.woocommerce-page .ast-container,
    html body.post-type-archive-product .ast-container,
    html body.tax-product_cat .ast-container,
    html body.tax-product_tag .ast-container {
        flex-direction: column !important;
        padding: 20px 16px !important;
    }
    html body.woocommerce-page #secondary,
    html body.post-type-archive-product #secondary,
    html body.tax-product_cat #secondary,
    html body.tax-product_tag #secondary {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        position: static !important;
    }
    html body.woocommerce-page ul.products,
    html body.post-type-archive-product ul.products,
    html body.tax-product_cat ul.products,
    html body.tax-product_tag ul.products,
    html body.woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

/* Tablet: 2 columns once viewport is narrow */
@media (max-width: 768px) {
    html body.woocommerce-page ul.products,
    html body.post-type-archive-product ul.products,
    html body.tax-product_cat ul.products,
    html body.tax-product_tag ul.products,
    html body.woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    /* Product card font size adjustments */
    html body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
    html body.woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.8rem !important;
    }
    html body.woocommerce-page ul.products li.product .price,
    html body.woocommerce ul.products li.product .price {
        font-size: 0.85rem !important;
    }
}

/* Mobile: still 2 columns (cards are wide enough at 390px) */
@media (max-width: 480px) {
    html body.woocommerce-page ul.products,
    html body.post-type-archive-product ul.products,
    html body.tax-product_cat ul.products,
    html body.tax-product_tag ul.products,
    html body.woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    html body.woocommerce-page ul.products li.product a img,
    html body.woocommerce ul.products li.product a img {
        height: 140px !important;
    }
}


/* ─────────────────────────────────────────────────────
   3. SINGLE PRODUCT PAGE — stack gallery + summary at ≤768px
   The earlier rule fires at 900px; we need these overrides
   to stay solid specifically at tablet/mobile breakpoints.
   ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Force full column-stack */
    html body.single-product .woocommerce div.product,
    html body.single-product div.product {
        flex-direction: column !important;
        gap: 20px !important;
    }
    /* Gallery: full width, no min-width constraints */
    html body.single-product .woocommerce-product-gallery,
    html body.single-product div.product .woocommerce-product-gallery {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        position: static !important;
    }
    /* Summary: full width below gallery */
    html body.single-product .entry-summary,
    html body.single-product div.product .entry-summary {
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }
    /* Tabs + related: always full-width */
    html body.single-product .woocommerce-tabs,
    html body.single-product .related.products,
    html body.single-product .upsells.products {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
    }
    /* Related products: 2 cols on tablet */
    html body.single-product .related.products ul.products,
    html body.single-product .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Slightly smaller typography */
    html body.single-product .entry-summary h1.product_title {
        font-size: 1.4rem !important;
    }
    html body.single-product .entry-summary .price {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    html body.single-product .entry-summary h1.product_title {
        font-size: 1.2rem !important;
    }
    /* Related products: 1 col on small phones */
    html body.single-product .related.products ul.products,
    html body.single-product .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }
    /* Sticky add-to-cart bar already has the button full width; ensure quantity + button stay on one row */
    html body.single-product .entry-summary form.cart {
        gap: 8px !important;
    }
}


/* ─────────────────────────────────────────────────────
   4. FOOTER — grid stack at tablet + single col at mobile
   Ensures both bw-footer-grid AND bw-footer-main-grid
   respond correctly (the two class names are used in
   different sections of the footer HTML).
   ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html body #bw-site-footer .bw-footer-grid,
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }
    html body #bw-site-footer .bw-footer-blue-bar .bw-footer-blue-inner {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    html body #bw-site-footer .bw-footer-social-icons {
        justify-content: center !important;
    }
    html body #bw-site-footer .bw-footer-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    html body #bw-site-footer .bw-footer-grid,
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    html body #bw-site-footer .bw-footer-body {
        padding: 40px 0 28px !important;
    }
}


/* ─────────────────────────────────────────────────────
   5. GLOBAL — prevent horizontal overflow on any page
   ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
    }
    /* Prevent wide Elementor sections from breaking layout.
       Use clip (not hidden) so overflow-y is not implicitly set to auto,
       which would create unwanted vertical scrollbars on heading sections. */
    .elementor-section,
    .e-con,
    .elementor-container {
        max-width: 100% !important;
        overflow-x: clip !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  MOBILE CRITICAL FIXES v3.3.1                                        ║
   ║  These rules MUST be last in the file — they override every earlier  ║
   ║  display:none that breaks mobile UX.                                 ║
   ║  1. Hamburger — forced visible at ≤1024px                            ║
   ║  2. Shop filter sidebar — shown (stacked) at ≤1024px                 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────────
   FIX 1 — HAMBURGER BUTTON
   Root cause: html body #masthead .bw-utility-help { display:inline-flex }
   at line ~5266 has no media query, so it fires on mobile too and is
   placed AFTER the ≤1024px hide rule, winning the cascade and filling
   the header row — the hamburger is pushed off-screen.
   Solution: re-hide search + help at ≤1024px AND guarantee the
   hamburger shows. These selectors share the same chain (html body …)
   so they win any earlier same-specificity rule because they come last.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Force-hide elements that should collapse on mobile */
    html body #masthead .bw-utility-search,
    html body #masthead .bw-utility-help {
        display: none !important;
    }

    /* Force-show hamburger — overrides every earlier display:none */
    html body #masthead .bw-hamburger {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 8px !important;
        background: transparent !important;
        border: none !important;
        flex-shrink: 0 !important;
    }

    /* Hamburger lines — ensure they're solid and visible */
    html body #masthead .bw-hamburger .bw-hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: #1C2B3A !important;
        border-radius: 2px !important;
    }

    /* Utility row: logo left, right cluster right — no wrapping */
    html body #masthead .bw-utility-inner {
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Right cluster only: login icon + cart + hamburger */
    html body #masthead .bw-utility-right {
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    /* Very small phones: hide login text (icon stays) */
    html body #masthead .bw-utility-account span {
        display: none !important;
    }
    /* Tighter logo */
    html body #masthead .bw-utility-logo .custom-logo,
    html body #masthead .bw-utility-logo a img {
        height: 44px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   FIX 2 — SHOP FILTER SIDEBAR VISIBLE ON MOBILE
   Root cause: @media (max-width:768px) at line ~1722 sets
   .woocommerce-page .widget-area { display:none !important }
   which hides the entire filter on any phone/tablet.
   Solution: override with display:block and proper stacking layout
   so the filter appears full-width ABOVE the product grid.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Show the sidebar on mobile — stacked full-width above products */
    html body.woocommerce-page #secondary.widget-area,
    html body.woocommerce-page .widget-area,
    html body.ast-left-sidebar.woocommerce-page #secondary,
    html body.post-type-archive-product #secondary.widget-area,
    html body.post-type-archive-product .widget-area,
    html body.tax-product_cat #secondary.widget-area,
    html body.tax-product_cat .widget-area,
    html body.tax-product_tag #secondary.widget-area,
    html body.tax-product_tag .widget-area {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        flex: 0 0 auto !important;
        position: static !important;
        margin-bottom: 24px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Filter widget inside sidebar: full width, clean look */
    html body.woocommerce-page #secondary .widget,
    html body.woocommerce-page #secondary .widget_block,
    html body.post-type-archive-product #secondary .widget,
    html body.tax-product_cat #secondary .widget,
    html body.tax-product_tag #secondary .widget {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* Hide the "Filter by" ::before pseudo-heading on mobile since
   the widget title already provides it */
@media (max-width: 1024px) {
    html body.woocommerce-page #secondary.widget-area::before {
        display: none !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  HAMBURGER BULLETPROOF FIX v3.3.2                                    ║
   ║                                                                      ║
   ║  TWO cascade bugs fixed:                                             ║
   ║  Bug A — "Need Help?" never hides:                                   ║
   ║    Line 4473 uses html body #masthead .bw-utility-bar .bw-utility-   ║
   ║    help (2 classes = higher specificity). Our hide rule only had     ║
   ║    1 class so it lost. Fix: match the exact 2-class selector.       ║
   ║  Bug B — hamburger pushed off-screen:                                ║
   ║    Hamburger is last flex item; when right cluster overflows,        ║
   ║    overflow-x:hidden clips it. Fix: position:absolute anchored to   ║
   ║    the right edge of the bar — impossible to clip.                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 1024px) {

    /* ── BUG A FIX: Hide Need Help & Search with matching specificity ── */
    /* Must match the 2-class chain at line 4473 to beat it */
    html body #masthead .bw-utility-bar .bw-utility-help,
    html body #masthead .bw-utility-bar .bw-utility-search {
        display: none !important;
    }
    /* Also cover the 1-class variant at line 5266 */
    html body #masthead .bw-utility-help,
    html body #masthead .bw-utility-search {
        display: none !important;
    }

    /* ── BUG B FIX: Hamburger absolute-anchored to right edge ── */

    /* Give the utility bar a positioning context */
    html body #masthead .bw-utility-bar {
        position: relative !important;
    }

    /* Hamburger: absolute, right-anchored — CANNOT ever be off-screen */
    html body #masthead .bw-utility-bar .bw-hamburger,
    html body #masthead .bw-hamburger {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }

    /* Hamburger lines — solid dark bars */
    html body #masthead .bw-hamburger .bw-hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: #1C2B3A !important;
        border-radius: 2px !important;
        transition: all 0.25s ease !important;
    }

    /* Right cluster: pad-right = hamburger width (36px) + gap (14px) = 50px */
    /* so the CART icon never slides underneath the hamburger button  */
    html body #masthead .bw-utility-right {
        padding-right: 54px !important;
        gap: 14px !important;
        flex-shrink: 1 !important;
        align-items: center !important;
        overflow: visible !important;
    }

    /* Utility inner & container: allow overflow so nothing clips */
    html body #masthead .bw-utility-inner {
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    html body #masthead .bw-utility-bar .bw-container {
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    html body #masthead .bw-utility-bar .bw-hamburger,
    html body #masthead .bw-hamburger {
        right: 12px !important;
    }
    html body #masthead .bw-utility-right {
        padding-right: 50px !important;
        gap: 10px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FOOTER MOBILE OVERHAUL v3.3.3                                       ║
   ║  Root cause: @media ≤1024px at line 4991 sets flex-direction:row     ║
   ║  on .bw-footer-inventa-col — logo + tagline crammed side-by-side.   ║
   ║  Fix: override with column layout on mobile + full responsive polish ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── TABLET  (≤768px): 2-col grid, Inventa stacked, bottom bar centred ── */
@media (max-width: 768px) {

    /* Main section: 2 equal columns */
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
    }

    /* About col: always full width */
    html body #bw-site-footer .bw-footer-about-col {
        grid-column: 1 / -1 !important;
        border-bottom: 1px solid #EEEEEE !important;
        padding-bottom: 20px !important;
    }

    /* Inventa col: full width, logo ABOVE text (override the row layout) */
    html body #bw-site-footer .bw-footer-inventa-col {
        grid-column: 1 / -1 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-top: 4px !important;
        border-top: 1px solid #EEEEEE !important;
    }

    /* Inventa image: controlled size, never stretch */
    html body #bw-site-footer .bw-footer-inventa-img {
        width: 110px !important;
        height: auto !important;
    }

    /* Tagline: legible, compact */
    html body #bw-site-footer .bw-footer-inventa-tagline {
        font-size: 0.8125rem !important;
        line-height: 1.55 !important;
        max-width: 280px !important;
    }

    /* Blue bar: logo left, socials right (keeps the row) */
    html body #bw-site-footer .bw-footer-blue-inner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }

    /* Social icons: tighten gap */
    html body #bw-site-footer .bw-footer-socials {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    /* Bottom bar: center-stack on mobile */
    html body #bw-site-footer .bw-footer-bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
    }
    html body #bw-site-footer .bw-company-info {
        text-align: center !important;
        font-size: 0.75rem !important;
    }
    html body #bw-site-footer .bw-footer-bottom-right {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Footer link columns: sensible heading */
    html body #bw-site-footer .bw-footer-links-col .menu-item a {
        font-size: 0.875rem !important;
    }
}

/* ── MOBILE  (≤480px): single column, Inventa centred ── */
@media (max-width: 480px) {

    /* Single column — all sections stacked */
    html body #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    /* All cols full width */
    html body #bw-site-footer .bw-footer-about-col,
    html body #bw-site-footer .bw-footer-links-col,
    html body #bw-site-footer .bw-footer-inventa-col {
        grid-column: 1 / -1 !important;
    }

    /* Inventa col: centred on small phone */
    html body #bw-site-footer .bw-footer-inventa-col {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding-top: 4px !important;
        border-top: 1px solid #EEEEEE !important;
    }

    /* Tagline: centred, max width */
    html body #bw-site-footer .bw-footer-inventa-tagline {
        text-align: center !important;
        max-width: 220px !important;
    }

    /* Blue bar: stack logo over socials on very small phones */
    html body #bw-site-footer .bw-footer-blue-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center !important;
    }
    html body #bw-site-footer .bw-footer-socials {
        justify-content: center !important;
    }

    /* Main section padding */
    html body #bw-site-footer .bw-footer-main {
        padding: 28px 0 24px !important;
    }

    /* Company info: smaller text */
    html body #bw-site-footer .bw-company-info {
        font-size: 0.7rem !important;
        line-height: 1.6 !important;
    }
}


/* ── DESKTOP ONLY: Inventa col — centre logo + text so they align ──
   min-width keeps this completely isolated from tablet/mobile rules   */
@media (min-width: 769px) {
    html body #bw-site-footer .bw-footer-inventa-col {
        align-items: center !important;
        text-align: center !important;
    }
    html body #bw-site-footer .bw-footer-inventa-img {
        display: block !important;
        margin: 0 auto !important;
    }
    html body #bw-site-footer .bw-footer-inventa-tagline {
        text-align: center !important;
        max-width: 180px !important;
        margin: 0 auto !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BW CARD COMPONENT SYSTEM — Homepage overlay buttons                 ║
   ║                                                                      ║
   ║  .bw-card              — base wrapper (relative + overflow:hidden)   ║
   ║  .bw-type-corner       — bottom-right corner button (Rows 1 & 2)     ║
   ║  .bw-type-corner                                                     ║
   ║    .bw-cat-highlight   — lighter blue variant for category row       ║
   ║  .bw-type-bar          — full-width bottom bar (Rows 3, 4, 5)        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────
   BASE — shared by both card types
   ───────────────────────────────────────────── */
.bw-card {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    line-height: 0;         /* kills the ghost gap below inline <img> */
    cursor: pointer;
}

.bw-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
    will-change: transform;
}

/* ─────────────────────────────────────────────
   MODIFIER A — .bw-type-corner
   Bottom-right corner button (Rows 1 & 2)
   Default colour: #29a0f2  (hero banner)
   .bw-cat-highlight overrides to #5cc2e9 (category row)
   ───────────────────────────────────────────── */
.bw-type-corner .bw-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    display: inline-block;
    background: #29a0f2;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 0;
    white-space: nowrap;
    line-height: 1.4;
    transition: background 0.2s ease;
    pointer-events: auto;
}

/* Category highlights (Row 2) — lighter blue */
.bw-type-corner.bw-cat-highlight .bw-btn {
    background: #5cc2e9;
    font-size: 14px;
}

/* Hover: image zooms in, button colour deepens */
.bw-type-corner:hover img {
    transform: scale(1.06);
}
.bw-type-corner .bw-btn:hover {
    background: #1a8cd8;
}
.bw-type-corner.bw-cat-highlight .bw-btn:hover {
    background: #29a0f2;
}

/* ─────────────────────────────────────────────
   MODIFIER B — .bw-type-bar
   Full-width flush bar at image bottom (Rows 3–5)
   ───────────────────────────────────────────── */
.bw-type-bar .bw-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 100%;
    background: #29a0f2;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 9px 6px;
    border-radius: 0;
    line-height: 1.3;
    transition: background 0.2s ease;
    pointer-events: auto;
    box-sizing: border-box;
}

/* Hover: image zooms, bar deepens */
.bw-type-bar:hover img {
    transform: scale(1.06);
}
.bw-type-bar .bw-btn:hover {
    background: #1a8cd8;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Bar: taller tap target on phones */
    .bw-type-bar .bw-btn {
        padding: 11px 6px;
        font-size: 11px;
    }
    /* Corner: slightly smaller on phones */
    .bw-type-corner .bw-btn,
    .bw-type-corner.bw-cat-highlight .bw-btn {
        font-size: 11px;
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    .bw-type-bar .bw-btn {
        padding: 10px 4px;
        font-size: 10px;
        letter-spacing: 0.04em;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BW CARD — ELEMENTOR COLUMN INTEGRATION                              ║
   ║                                                                      ║
   ║  How to use:                                                         ║
   ║  1. Add CSS classes to the Elementor COLUMN (Advanced > CSS Classes) ║
   ║     → Row 1 hero:        bw-card-wrap  bw-type-corner                ║
   ║     → Row 2 categories:  bw-card-wrap  bw-type-corner  bw-cat-hl    ║
   ║     → Rows 3-5 grid:     bw-card-wrap  bw-type-bar                   ║
   ║  2. Column has TWO widgets: Image widget (top) + HTML widget (below) ║
   ║  3. HTML widget content: ONLY <a href="URL" class="bw-btn">TEXT</a>  ║
   ║     NO <img> tag inside the HTML widget                              ║
   ║  The CSS below absolutely positions the HTML widget over the image   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Column becomes the positioning context ── */
.elementor-element.bw-card-wrap,
.e-con.bw-card-wrap {
    position: relative !important;
    overflow: hidden !important;
}

/* ── Strip all default Elementor padding from widgets inside ── */
.elementor-element.bw-card-wrap .elementor-widget-image > .elementor-widget-container,
.elementor-element.bw-card-wrap .elementor-widget-html  > .elementor-widget-container,
.e-con.bw-card-wrap .elementor-widget-image > .elementor-widget-container,
.e-con.bw-card-wrap .elementor-widget-html  > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* ── Image: fill column width, enable zoom on column hover ── */
.elementor-element.bw-card-wrap .elementor-widget-image img,
.e-con.bw-card-wrap .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.45s ease !important;
    will-change: transform !important;
}
.elementor-element.bw-card-wrap:hover .elementor-widget-image img,
.e-con.bw-card-wrap:hover .elementor-widget-image img {
    transform: scale(1.06) !important;
}

/* ── HTML widget: lifted out of flow, pinned to column bottom ── */
.elementor-element.bw-card-wrap .elementor-widget-html,
.e-con.bw-card-wrap .elementor-widget-html {
    position: absolute !important;
    bottom: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Reset line-height inside the widget container */
.elementor-element.bw-card-wrap .elementor-widget-html > .elementor-widget-container,
.e-con.bw-card-wrap .elementor-widget-html > .elementor-widget-container {
    line-height: 1 !important;
}

/* ── CORNER variant: button sits at bottom-right of image ── */
.elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html,
.e-con.bw-card-wrap.bw-type-corner .elementor-widget-html {
    right: 0 !important;
    left: auto !important;
    width: auto !important;
}

/* ── BAR variant: button spans full width at image bottom ── */
.elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-html,
.e-con.bw-card-wrap.bw-type-bar .elementor-widget-html {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}
.elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
.e-con.bw-card-wrap.bw-type-bar .bw-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* ── Shared .bw-btn styles inside Elementor columns ── */
.elementor-element.bw-card-wrap .bw-btn,
.e-con.bw-card-wrap .bw-btn {
    display: inline-block;
    background: #29a0f2 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 10px 18px !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
}
.elementor-element.bw-card-wrap .bw-btn:hover,
.e-con.bw-card-wrap .bw-btn:hover {
    background: #1a8cd8 !important;
    color: #ffffff !important;
}

/* ── Light blue variant for category row (Row 2) ── */
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn {
    background: #5cc2e9 !important;
    font-size: 14px !important;
}
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn:hover,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn:hover {
    background: #29a0f2 !important;
}

/* ── Bar text size for small product grid items ── */
.elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
.e-con.bw-card-wrap.bw-type-bar .bw-btn {
    font-size: 12px !important;
    padding: 9px 6px !important;
}

/* ── Responsive tweaks ── */
@media (max-width: 768px) {
    .elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
    .e-con.bw-card-wrap.bw-type-bar .bw-btn {
        font-size: 11px !important;
        padding: 11px 6px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
    .e-con.bw-card-wrap.bw-type-corner .bw-btn {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BW CARD ELEMENTOR — COMPLETE REWRITE v2                             ║
   ║                                                                      ║
   ║  ROOT CAUSE of all 3 bugs:                                           ║
   ║  Classes were applied to the SECTION (row), not individual columns.  ║
   ║  With position:absolute, all buttons stacked at section's edge.      ║
   ║                                                                      ║
   ║  FIX: Switch to NEGATIVE-MARGIN approach.                            ║
   ║  No positioning context needed — reliable per-column.               ║
   ║                                                                      ║
   ║  HOW TO APPLY IN ELEMENTOR (critical):                               ║
   ║  Click each INDIVIDUAL COLUMN → Advanced → CSS Classes:             ║
   ║  Row 1 hero:       bw-card-wrap  bw-type-corner                      ║
   ║  Row 2 (×3 cols):  bw-card-wrap  bw-type-corner  bw-cat-hl          ║
   ║  Rows 3-5 (×5):    bw-card-wrap  bw-type-bar                        ║
   ║  DO NOT add classes to the Section/Row — only to the Column.        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ════════════════════════════════════════════════════════
   STEP 1 — KILL the old absolute-position rules entirely
   ════════════════════════════════════════════════════════ */
.elementor-element.bw-card-wrap,
.e-con.bw-card-wrap {
    position: static !important;
    overflow: visible !important;
}

.elementor-element.bw-card-wrap .elementor-widget-html,
.e-con.bw-card-wrap .elementor-widget-html {
    position: relative !important; /* needed for z-index; NOT absolute */
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 5 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: 0 !important;
}

/* ════════════════════════════════════════════════════════
   STEP 2 — Zero-out all Elementor widget default spacing
   ════════════════════════════════════════════════════════ */
.elementor-element.bw-card-wrap .elementor-widget-image > .elementor-widget-container,
.elementor-element.bw-card-wrap .elementor-widget-html  > .elementor-widget-container,
.e-con.bw-card-wrap .elementor-widget-image > .elementor-widget-container,
.e-con.bw-card-wrap .elementor-widget-html  > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

.elementor-element.bw-card-wrap .elementor-widget-image,
.e-con.bw-card-wrap .elementor-widget-image {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* ════════════════════════════════════════════════════════
   STEP 3 — Image: no zoom, no transition
   ════════════════════════════════════════════════════════ */
.elementor-element.bw-card-wrap .elementor-widget-image img,
.e-con.bw-card-wrap .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: none !important;
    transform: none !important;
}

/* Also kill hover zoom on standalone .bw-card */
.bw-card:hover img,
.bw-type-corner:hover img,
.bw-type-bar:hover img,
.elementor-element.bw-card-wrap:hover .elementor-widget-image img,
.e-con.bw-card-wrap:hover .elementor-widget-image img {
    transform: none !important;
    transition: none !important;
}

/* ════════════════════════════════════════════════════════
   STEP 4 — BAR type: negative-margin pulls button UP
             into the image by exactly its own height
   ════════════════════════════════════════════════════════ */

/* Button height is 40px — margin-top must equal -40px */
.elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-html,
.e-con.bw-card-wrap.bw-type-bar .elementor-widget-html {
    margin-top: -40px !important;
    width: 100% !important;
}

.elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
.e-con.bw-card-wrap.bw-type-bar .bw-btn {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 8px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background: #29a0f2 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: none !important;
}

/* ════════════════════════════════════════════════════════
   STEP 5 — CORNER type: negative-margin + right-aligned
   ════════════════════════════════════════════════════════ */
.elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html,
.e-con.bw-card-wrap.bw-type-corner .elementor-widget-html {
    margin-top: -40px !important;
    text-align: right !important;
    width: 100% !important;
}

.elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
.e-con.bw-card-wrap.bw-type-corner .bw-btn {
    display: inline-block !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 16px !important;
    background: #29a0f2 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: none !important;
    vertical-align: bottom !important;
}

/* ── Category row (Row 2): lighter blue ── */
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn {
    background: #5cc2e9 !important;
    font-size: 14px !important;
}

/* ── No hover colour changes on any button ── */
.elementor-element.bw-card-wrap .bw-btn:hover,
.e-con.bw-card-wrap .bw-btn:hover,
.elementor-element.bw-card-wrap.bw-type-bar .bw-btn:hover,
.e-con.bw-card-wrap.bw-type-bar .bw-btn:hover {
    background: #29a0f2 !important;
    color: #ffffff !important;
}
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn:hover,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn:hover {
    background: #5cc2e9 !important;
}

/* ════════════════════════════════════════════════════════
   STEP 6 — Responsive: taller bar on small screens
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-html,
    .e-con.bw-card-wrap.bw-type-bar .elementor-widget-html {
        margin-top: -36px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
    .e-con.bw-card-wrap.bw-type-bar .bw-btn {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 10px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html,
    .e-con.bw-card-wrap.bw-type-corner .elementor-widget-html {
        margin-top: -36px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
    .e-con.bw-card-wrap.bw-type-corner .bw-btn {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 11px !important;
        padding: 0 12px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BW CARD — ALIGNMENT + TRANSPARENCY POLISH v3.3.9                    ║
   ║                                                                      ║
   ║  Fixes:                                                              ║
   ║  1. Row 2 corner buttons — consistent bottom-right (same as Row 1)  ║
   ║  2. Rows 3-5 image heights — uniform via aspect-ratio so all        ║
   ║     buttons sit at the exact same vertical position per row         ║
   ║  3. Semi-transparent bar background to match Figma                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Row 2 (category highlights): force consistent right-bottom corner ─ */
/* Ensure text-align:right reaches the inner widget container too */
.elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html > .elementor-widget-container,
.e-con.bw-card-wrap.bw-type-corner .elementor-widget-html > .elementor-widget-container {
    text-align: right !important;
    width: 100% !important;
    display: block !important;
}
/* Button: inline-block + vertical-align:bottom guarantees it sits right */
.elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
.e-con.bw-card-wrap.bw-type-corner .bw-btn {
    display: inline-block !important;
    vertical-align: bottom !important;
    text-align: left !important; /* text inside stays left-readable */
}

/* ── Rows 3-5 bar: uniform aspect-ratio so all images same height ─────
   product shots (white bg): object-fit contain keeps full garment visible
   sport/lifestyle shots (Row 5): object-fit cover fills the box cleanly  */
.elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-image img,
.e-con.bw-card-wrap.bw-type-bar .elementor-widget-image img {
    aspect-ratio: 4 / 5 !important;   /* portrait — identical for all cols */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;    /* preserve full product shape */
    object-position: center bottom !important;
    display: block !important;
}

/* Row 2 (lifestyle / people photos): fill the box, landscape crop */
.elementor-element.bw-card-wrap.bw-type-corner.bw-cat-hl .elementor-widget-image img,
.e-con.bw-card-wrap.bw-type-corner.bw-cat-hl .elementor-widget-image img {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}

/* ── Transparency: semi-transparent blue bars (matches Figma) ──────── */
/* BAR type — Rows 3-5 */
.elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
.e-con.bw-card-wrap.bw-type-bar .bw-btn,
.bw-type-bar .bw-btn {
    background: rgba(41, 160, 242, 0.82) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* CORNER type — Row 1 & Row 2 */
.elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
.e-con.bw-card-wrap.bw-type-corner .bw-btn,
.bw-type-corner .bw-btn {
    background: rgba(41, 160, 242, 0.88) !important;
}

/* Cat-highlight (Row 2 lighter blue) stays slightly different shade */
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn,
.bw-cat-hl .bw-btn {
    background: rgba(92, 194, 233, 0.88) !important;
}

/* ── No hover colour change (keep same transparency on hover) ─────── */
.elementor-element.bw-card-wrap .bw-btn:hover,
.e-con.bw-card-wrap .bw-btn:hover,
.bw-card .bw-btn:hover {
    background: rgba(41, 160, 242, 0.82) !important;
}
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn:hover,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn:hover {
    background: rgba(92, 194, 233, 0.88) !important;
}

/* ── Responsive: keep aspect-ratio on tablet/mobile ──────────────── */
@media (max-width: 768px) {
    /* Slightly less tall on phones — products still fit */
    .elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-image img,
    .e-con.bw-card-wrap.bw-type-bar .elementor-widget-image img {
        aspect-ratio: 1 / 1 !important;
    }
}


/* ── UNIFIED BUTTON COLOUR — Row 2 (bw-cat-hl) matches all other rows ──
   Previously bw-cat-hl used a lighter #5cc2e9 (rgba 92,194,233).
   Overriding all instances to the same #29a0f2 (rgba 41,160,242) blue.  */
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn,
.bw-cat-hl .bw-btn,
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn:hover,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn:hover,
.bw-cat-hl .bw-btn:hover {
    background: rgba(41, 160, 242, 0.82) !important;    
    font-size: 13px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ROW 2 CORNER BUTTON — RIGHT-ALIGN FIX                               ║
   ║                                                                      ║
   ║  text-align:right was being overridden by Elementor's own widget    ║
   ║  alignment classes. Switching to FLEXBOX justify-content:flex-end   ║
   ║  which is layout-level and cannot be overridden by text-align.      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Make the HTML widget a flex row that pushes its child to the right */
.elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html,
.e-con.bw-card-wrap.bw-type-corner .elementor-widget-html {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    width: 100% !important;
    text-align: right !important; /* belt-and-braces */
}

/* Inner widget container: also flex so the button sits at the right */
.elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html > .elementor-widget-container,
.e-con.bw-card-wrap.bw-type-corner .elementor-widget-html > .elementor-widget-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* Button: inline-flex so it hugs its own content width */
.elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
.e-con.bw-card-wrap.bw-type-corner .bw-btn {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}


/* ── CORNER BUTTON: raise above image bottom edge to match Row 1 ────────
   Row 1 "SHOP ACTIVEWEAR" sits ~20px above the absolute bottom.
   margin-top: -60px = button height (40px) + 20px inset = 20px gap above edge.
   BAR type (Rows 3-5) stays at -40px flush — only corner/cat-hl types changed.
   Covers both: bw-type-corner (Row 1) AND bw-cat-hl (Row 2) selectors,
   since Row 2 columns may have been set with bw-cat-hl only (no bw-type-corner). */
.elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html,
.e-con.bw-card-wrap.bw-type-corner .elementor-widget-html,
.elementor-element.bw-card-wrap.bw-cat-hl .elementor-widget-html,
.e-con.bw-card-wrap.bw-cat-hl .elementor-widget-html {
    margin-top: -60px !important;
}

/* Flexbox right-align also needs to be on bw-cat-hl widget + container */
.elementor-element.bw-card-wrap.bw-cat-hl .elementor-widget-html,
.e-con.bw-card-wrap.bw-cat-hl .elementor-widget-html {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    width: 100% !important;
}
.elementor-element.bw-card-wrap.bw-cat-hl .elementor-widget-html > .elementor-widget-container,
.e-con.bw-card-wrap.bw-cat-hl .elementor-widget-html > .elementor-widget-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}
.elementor-element.bw-card-wrap.bw-cat-hl .bw-btn,
.e-con.bw-card-wrap.bw-cat-hl .bw-btn {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 16px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ROW 2 BUTTON LIFT — independent of margin-top                       ║
   ║  Using position:relative + bottom:Npx on the BUTTON ITSELF.         ║
   ║  This is unaffected by any Elementor wrapper or margin chain.       ║
   ║  Targets ONLY bw-cat-hl — Row 1 (bw-type-corner only) untouched.   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html body .elementor-element.bw-card-wrap.bw-cat-hl .bw-btn,
html body .e-con.bw-card-wrap.bw-cat-hl .bw-btn,
html body .bw-card-wrap.bw-cat-hl .bw-btn {
    position: relative !important;
    bottom: 35px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  IMAGE LINK WRAPPER FIX — Rows 2 & 3 (bar + cat-hl)                 ║
   ║                                                                      ║
   ║  Root cause: Adding a link to an Elementor image widget wraps the   ║
   ║  <img> in an <a> tag. <a> is display:inline by default, which adds  ║
   ║  a descender gap below each image — different per image = buttons   ║
   ║  misalign across the row.                                            ║
   ║  Fix: force the <a> wrapper to display:block + line-height:0.       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* All bw-card-wrap columns: kill the inline gap on linked images */
html body .elementor-element.bw-card-wrap .elementor-widget-image a,
html body .e-con.bw-card-wrap .elementor-widget-image a,
html body .elementor-element.bw-card-wrap .elementor-widget-image .elementor-clickable,
html body .e-con.bw-card-wrap .elementor-widget-image .elementor-clickable {
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Image inside the link: fill the block, respect aspect-ratio */
html body .elementor-element.bw-card-wrap .elementor-widget-image a img,
html body .e-con.bw-card-wrap .elementor-widget-image a img,
html body .elementor-element.bw-card-wrap .elementor-widget-image .elementor-clickable img,
html body .e-con.bw-card-wrap .elementor-widget-image .elementor-clickable img {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
}

/* Also zero-out the image widget container so no extra gap leaks in */
html body .elementor-element.bw-card-wrap .elementor-widget-image > .elementor-widget-container,
html body .e-con.bw-card-wrap .elementor-widget-image > .elementor-widget-container {
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  MOBILE FIX v5 — Rows 2-5 + Brands  (FINAL / ROOT-CAUSE VERIFIED) ║
   ║                                                                      ║
   ║  VERIFIED STRUCTURES (from live HTML inspection):                   ║
   ║                                                                      ║
   ║  ROW 2 (c3f6320)  — e-grid container, 6 items in .e-con-inner:     ║
   ║    Image 1 (4296a22) │ Image 2 (37a0eb8) │ Image 3 (8a1b32c)       ║
   ║    Btn 1  (a7a8681) │ Btn 2  (056c186) │ Btn 3  (23bfa53)          ║
   ║  Desktop: 3-col grid → each image above its button (rows 1+2).     ║
   ║  Mobile (1-col):  images auto-place rows 1-3, buttons rows 4-6     ║
   ║    → all 3 buttons land AFTER all images (bottom of last image).   ║
   ║  FIX: force each button to share its image's grid-row via          ║
   ║    grid-row:N + align-self:end + z-index:5 → overlays bottom.      ║
   ║                                                                      ║
   ║  ROWS 3-5 (fd3dd6c / 18e5fad / cbe7722) — e-flex containers:       ║
   ║    flex-grow:0 on outer .e-con → NOT full-width on mobile.          ║
   ║    display:flex on .e-con-inner (real layout host).                 ║
   ║  FIX (from v4, working ✓): flex:1 1 100% on outer .e-con +         ║
   ║    display:grid 1fr 1fr on .e-con-inner.                            ║
   ║                                                                      ║
   ║  BRANDS (78cf295) — e-flex e-con-boxed, 5 brand columns:           ║
   ║    5df342d │ 90447e8 │ 7e77d6f │ b33ca51 │ 2d9ae17                  ║
   ║    Same flex-grow:0 issue as Rows 3-5.                              ║
   ║  FIX: same pattern as Rows 3-5.                                     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 767px) {

    /* ══════════════════════════════════════════════════════════════
       ROWS 3-5 — STEP 1 (v4 confirmed working ✓)
       Force 3 outer .e-con row-wrappers to full width.
       They have flex-grow:0 in parent → shrink to content width.
       ══════════════════════════════════════════════════════════════ */
    .elementor-218990 .elementor-element-fd3dd6c,
    .elementor-218990 .elementor-element-18e5fad,
    .elementor-218990 .elementor-element-cbe7722 {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: stretch !important;
    }

    /* ROWS 3-5 — STEP 2: 2-col CSS Grid on .e-con-inner (real layout host) */
    .elementor-218990 .elementor-element-fd3dd6c > .e-con-inner,
    .elementor-218990 .elementor-element-18e5fad > .e-con-inner,
    .elementor-218990 .elementor-element-cbe7722 > .e-con-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        gap: 0 !important;
        flex-wrap: unset !important;
        flex-direction: unset !important;
    }

    /* ROWS 3-5 — STEP 3: All 15 product columns fill their grid cell */
    .elementor-218990 .elementor-element-88d2675,
    .elementor-218990 .elementor-element-99be322,
    .elementor-218990 .elementor-element-1133f71,
    .elementor-218990 .elementor-element-5f22a4c,
    .elementor-218990 .elementor-element-4fbdc33,
    .elementor-218990 .elementor-element-dc1dbf3,
    .elementor-218990 .elementor-element-9d47886,
    .elementor-218990 .elementor-element-3a99b04,
    .elementor-218990 .elementor-element-966b691,
    .elementor-218990 .elementor-element-fe7d5bf,
    .elementor-218990 .elementor-element-8784309,
    .elementor-218990 .elementor-element-854c1d9,
    .elementor-218990 .elementor-element-76438ea,
    .elementor-218990 .elementor-element-4125404,
    .elementor-218990 .elementor-element-64caf1d {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        --width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ROWS 3-5 — STEP 4: Square images in each 2-col cell */
    .elementor-218990 .elementor-element-88d2675 img,
    .elementor-218990 .elementor-element-99be322 img,
    .elementor-218990 .elementor-element-1133f71 img,
    .elementor-218990 .elementor-element-5f22a4c img,
    .elementor-218990 .elementor-element-4fbdc33 img,
    .elementor-218990 .elementor-element-dc1dbf3 img,
    .elementor-218990 .elementor-element-9d47886 img,
    .elementor-218990 .elementor-element-3a99b04 img,
    .elementor-218990 .elementor-element-966b691 img,
    .elementor-218990 .elementor-element-fe7d5bf img,
    .elementor-218990 .elementor-element-8784309 img,
    .elementor-218990 .elementor-element-854c1d9 img,
    .elementor-218990 .elementor-element-76438ea img,
    .elementor-218990 .elementor-element-4125404 img,
    .elementor-218990 .elementor-element-64caf1d img {
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        width: 100% !important;
        display: block !important;
    }

    /* ROWS 3-5 — STEP 5: Compact bar button for small 2-col cells */
    .elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
    .e-con.bw-card-wrap.bw-type-bar .bw-btn {
        height: 36px !important;
        line-height: 36px !important;
        font-size: 11px !important;
        padding: 0 4px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-html,
    .e-con.bw-card-wrap.bw-type-bar .elementor-widget-html {
        margin-top: -36px !important;
    }

    /* ══════════════════════════════════════════════════════════════
       ROW 2 (c3f6320) — CSS GRID-ROW PLACEMENT FIX
       
       Verified DOM: c3f6320 is an e-grid with 6 items in .e-con-inner:
         [4296a22 image] [37a0eb8 image] [8a1b32c image]
         [a7a8681 btn]   [056c186 btn]   [23bfa53 btn]
       
       Desktop (3-col): images in row 1, buttons in row 2 (grid auto-places).
       Mobile (1-col):  all 6 items in ONE column → images rows 1-3,
                        buttons rows 4-6 → buttons AFTER all images.
       
       FIX: Explicitly place each button in the SAME grid-row as its
       image. Two items share a grid cell → they overlap. align-self:end
       pins button to cell bottom. z-index:5 (grid items support z-index
       without position:relative) renders button above image.
       ══════════════════════════════════════════════════════════════ */

    /* Ensure 3 auto-height rows (override Elementor's repeat(1,1fr)) */
    .elementor-218990 .elementor-element-c3f6320 > .e-con-inner {
        grid-template-rows: auto auto auto !important;
        grid-auto-rows: auto !important;
        width: 100% !important;
    }

    /* Images: explicitly placed in rows 1-3, col 1 */
    .elementor-218990 .elementor-element-4296a22 { /* Image 1 – Fitness Range */
        grid-row: 1 !important;
        grid-column: 1 !important;
        z-index: 1 !important;
    }
    .elementor-218990 .elementor-element-37a0eb8 { /* Image 2 – Hard Wearing */
        grid-row: 2 !important;
        grid-column: 1 !important;
        z-index: 1 !important;
    }
    .elementor-218990 .elementor-element-8a1b32c { /* Image 3 – Golf Range */
        grid-row: 3 !important;
        grid-column: 1 !important;
        z-index: 1 !important;
    }

    /* Image aspect-ratio 4:3 full-width */
    .elementor-218990 .elementor-element-4296a22 img,
    .elementor-218990 .elementor-element-37a0eb8 img,
    .elementor-218990 .elementor-element-8a1b32c img {
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        width: 100% !important;
        display: block !important;
    }

    /* Buttons: placed in the SAME row as their image.
       align-self:end pins each button to the grid-cell bottom.
       z-index:5 on grid items renders them above images (z-index:1). */
    .elementor-218990 .elementor-element-a7a8681 { /* Btn 1 – Fitness Range */
        grid-row: 1 !important;
        grid-column: 1 !important;
        align-self: end !important;
        z-index: 5 !important;
        width: 100% !important;
        margin-top: 0 !important;
        bottom: auto !important;
    }
    .elementor-218990 .elementor-element-056c186 { /* Btn 2 – Hard Wearing */
        grid-row: 2 !important;
        grid-column: 1 !important;
        align-self: end !important;
        z-index: 5 !important;
        width: 100% !important;
        margin-top: 0 !important;
        bottom: auto !important;
    }
    .elementor-218990 .elementor-element-23bfa53 { /* Btn 3 – Golf Range */
        grid-row: 3 !important;
        grid-column: 1 !important;
        align-self: end !important;
        z-index: 5 !important;
        width: 100% !important;
        margin-top: 0 !important;
        bottom: auto !important;
    }

    /* Cat-hl button styling: full-width bar, reset desktop corner-lift */
    html body .elementor-218990 .elementor-element-a7a8681 .bw-btn,
    html body .elementor-218990 .elementor-element-056c186 .bw-btn,
    html body .elementor-218990 .elementor-element-23bfa53 .bw-btn {
        position: static !important;
        bottom: auto !important;
        top: auto !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 13px !important;
        padding: 0 !important;
        background: rgba(41, 160, 242, 0.88) !important;
        backdrop-filter: none !important;
    }

    /* Widget containers for cat-hl buttons: full-width block */
    html body .elementor-218990 .elementor-element-a7a8681 .elementor-widget-container,
    html body .elementor-218990 .elementor-element-056c186 .elementor-widget-container,
    html body .elementor-218990 .elementor-element-23bfa53 .elementor-widget-container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ══════════════════════════════════════════════════════════════
       BRANDS SECTION (78cf295) — 2-COLUMN LAYOUT
       
       Verified DOM: 78cf295 is an e-flex e-con-boxed container.
       Same flex-grow:0 root cause as Rows 3-5.
       5 brand columns: 5df342d │ 90447e8 │ 7e77d6f │ b33ca51 │ 2d9ae17
       FIX: identical pattern to Rows 3-5.
       ══════════════════════════════════════════════════════════════ */

    /* Step 1: Force brands outer .e-con to full width */
    .elementor-218990 .elementor-element-78cf295 {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: stretch !important;
    }

    /* Step 2: 2-col grid on brands .e-con-inner */
    .elementor-218990 .elementor-element-78cf295 > .e-con-inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        gap: 0 !important;
        flex-wrap: unset !important;
        flex-direction: unset !important;
    }

    /* Step 3: Each brand column fills its grid cell */
    .elementor-218990 .elementor-element-5df342d,
    .elementor-218990 .elementor-element-90447e8,
    .elementor-218990 .elementor-element-7e77d6f,
    .elementor-218990 .elementor-element-b33ca51,
    .elementor-218990 .elementor-element-2d9ae17 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        --width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ══════════════════════════════════════════════════════════════
       BRANDS SECTION — SECOND GRID (287e6ec) — 2-COLUMN LAYOUT
       
       287e6ec is e-grid + e-con-FULL.
       CRITICAL: e-con-full containers do NOT use .e-con-inner —
       the 3 image widgets (c10d7f5, d2699e9, 5ad00b6) are DIRECT
       children of the .e-con element itself.
       Previous fix targeted "> .e-con-inner" (non-existent) → no effect.
       CORRECT: target 287e6ec itself as the grid container.
       ══════════════════════════════════════════════════════════════ */

    /* Target 287e6ec itself (no .e-con-inner intermediate wrapper) */
    .elementor-218990 .elementor-element-287e6ec {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Each brand image widget: fill its grid cell */
    .elementor-218990 .elementor-element-c10d7f5,
    .elementor-218990 .elementor-element-d2699e9,
    .elementor-218990 .elementor-element-5ad00b6 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Prevent horizontal page overflow */
    .elementor-218990 {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BRANDS AUTO-SCROLL MARQUEE                                         ║
   ║  Injected by functions.php Section 23 (bw_brands_marquee_js).      ║
   ║  Two Elementor brand containers hidden — replaced by this marquee. ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.bw-brands-marquee {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
    background: #ffffff;
    position: relative;
}

/* Fade-out edges for a polished look */
.bw-brands-marquee::before,
.bw-brands-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.bw-brands-marquee::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 20%, transparent 100%);
}
.bw-brands-marquee::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 20%, transparent 100%);
}

.bw-brands-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    animation: bw-brands-scroll 30s linear infinite;
    will-change: transform;
}

.bw-brand-slide {
    flex: 0 0 auto;
    padding: 8px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-brand-slide img {
    height: 52px !important;
    width: auto !important;
    max-width: 140px !important;
    min-width: 50px !important;
    object-fit: contain !important;
    display: block !important;
    filter: grayscale(80%) opacity(0.65) !important;
    transition: filter 0.3s ease, transform 0.25s ease !important;
}

.bw-brand-slide a:hover img,
.bw-brand-slide img:hover {
    filter: grayscale(0%) opacity(1) !important;
    transform: scale(1.06) !important;
}

@keyframes bw-brands-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 767px) {
    .bw-brand-slide {
        padding: 6px 20px;
    }
    .bw-brand-slide img {
        height: 38px !important;
        max-width: 100px !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  SHOP PAGE — PREVENT SIDEBAR LEFT OVERFLOW                         ║
   ║  Ensures the shop container never bleeds past the viewport edge.   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

html body #content.site-content {
    overflow-x: hidden !important;
}

html body .ast-container {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Prevent any positioned elements breaking out of the shop layout */
html body.woocommerce-page #primary,
html body.woocommerce-page #secondary {
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  SHOP — ORDERING + RESULT COUNT ROW                                 ║
   ║  .bwf-ordering-row wraps both result count + ordering select        ║
   ║  so they appear side-by-side above the product grid.               ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.bwf-ordering-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.bwf-ordering-row .woocommerce-result-count {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    color: #666 !important;
}

.bwf-ordering-row .woocommerce-ordering {
    margin: 0 !important;
}

.bwf-ordering-row .woocommerce-ordering select {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 6px !important;
    padding: 7px 14px !important;
    color: #1C2B3A !important;
    background: #fff !important;
    cursor: pointer !important;
    min-width: 160px !important;
}

.bwf-ordering-row .woocommerce-ordering select:focus {
    outline: none !important;
    border-color: #29a0f2 !important;
    box-shadow: 0 0 0 3px rgba(41, 160, 242, 0.12) !important;
}

@media (max-width: 640px) {
    .bwf-ordering-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .bwf-ordering-row .woocommerce-ordering select {
        min-width: 100% !important;
    }
}


/* =============================================================================
   BW CATEGORY SLIDER  [bw_cat_slider]
   Flexbox layout: arrows in-flow. JS sets --bw-slide-w custom property;
   vw-based fallbacks make 2-up mobile work even before JS fires.
   ============================================================================= */

/* ── Outer wrapper ── */
.bw-cat-slider {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
}

/* ── Hidden-scrollbar viewport ── */
.bw-cs-viewport {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bw-cs-viewport::-webkit-scrollbar { display: none; }

/* ── Flex track ── */
.bw-cs-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 2px;  /* prevent box-shadow clip */
}

/* ── Individual slide
   --bw-slide-w is set by JS on the .bw-cat-slider wrapper.
   vw fallbacks ensure 2-up on mobile / 5-up on desktop before JS fires. ── */
.bw-cs-slide {
    flex: 0 0 var(--bw-slide-w, 18vw);
    width: var(--bw-slide-w, 18vw);
    min-width: 90px;
    scroll-snap-align: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ── Card link ── */
.bw-cs-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none !important;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8eaed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.bw-cs-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13);
    border-color: #c8d0da;
}

/* ── Image container — uniform white box ── */
.bw-cs-img {
    width: 100%;
    aspect-ratio: var(--bw-cs-aspect, 3 / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
    flex-shrink: 0;
}

/* ── CONTAIN mode (default — garment / brand product shots) ── */
.bw-cs-mode-contain .bw-cs-img {
    padding: 8%;
    background: #ffffff;
}
.bw-cs-mode-contain .bw-cs-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}
.bw-cs-mode-contain .bw-cs-link:hover .bw-cs-img img {
    transform: scale(1.05);
}

/* ── COVER mode — sports / lifestyle full-bleed photos ── */
.bw-cs-mode-cover .bw-cs-link {
    border: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.bw-cs-mode-cover .bw-cs-img {
    padding: 0;
    background: #222;
}
.bw-cs-mode-cover .bw-cs-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.bw-cs-mode-cover .bw-cs-link:hover .bw-cs-img img {
    transform: scale(1.07);
}

/* ── BRAND mode (square) — logo tiles ── */
.bw-cs-mode-brand .bw-cs-img {
    padding: 16%;
    background: #ffffff;
}
.bw-cs-mode-brand .bw-cs-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.25s ease, transform 0.25s ease;
}
.bw-cs-mode-brand .bw-cs-link:hover .bw-cs-img img {
    filter: grayscale(0%);
    transform: scale(1.06);
}

/* ── Blue label bar ── */
.bw-cs-label {
    background: #29a0f2;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 6px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    margin-top: auto;
}

/* ── Arrow buttons — flex siblings ── */
.bw-cs-arrow {
    position: static;
    flex-shrink: 0;
    align-self: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #29a0f2;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.2s, transform 0.15s;
    outline: none;
    z-index: 2;
}
.bw-cs-arrow:hover:not([disabled]) {
    background: #1a8cd8;
    transform: scale(1.1);
}
.bw-cs-arrow[disabled],
.bw-cs-arrow[aria-disabled="true"] {
    background: #d0d5dd;
    cursor: default;
    box-shadow: none;
    pointer-events: none;
}
.bw-cs-arrow svg {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
    flex-shrink: 0;
}

/* =============================================================================
   RESPONSIVE
   vw fallbacks for slide widths match JS visibleCount() logic:
   ≥1201px → 5-up, ≥961px → 4-up, ≥768px → 3-up, <768px → 2-up
   ============================================================================= */

@media (max-width: 1200px) {
    .bw-cs-slide {
        flex: 0 0 var(--bw-slide-w, 23vw);
        width: var(--bw-slide-w, 23vw);
    }
    .bw-cs-track { gap: 10px; }
}

@media (max-width: 960px) {
    .bw-cat-slider { gap: 6px; }
    .bw-cs-slide {
        flex: 0 0 var(--bw-slide-w, 30vw);
        width: var(--bw-slide-w, 30vw);
    }
    .bw-cs-track { gap: 10px; }
    .bw-cs-label { font-size: 10px; padding: 8px 5px; }
    .bw-cs-arrow { width: 32px; height: 32px; min-width: 32px; }
    .bw-cs-arrow svg { width: 16px; height: 16px; }
}

/* ── 2-up on tablet/mobile ── */
@media (max-width: 767px) {
    .bw-cat-slider { gap: 4px; margin-bottom: 16px; }
    .bw-cs-slide {
        flex: 0 0 var(--bw-slide-w, 44vw);
        width: var(--bw-slide-w, 44vw);
        min-width: 100px;
    }
    .bw-cs-track { gap: 8px; }
    .bw-cs-label {
        font-size: 9px;
        font-weight: 700;
        padding: 8px 4px;
        letter-spacing: 0.04em;
    }
    .bw-cs-arrow {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }
    .bw-cs-arrow svg { width: 13px; height: 13px; }
    /* More padding inside contain tiles on mobile */
    .bw-cs-mode-contain .bw-cs-img { padding: 6%; }
    .bw-cs-mode-brand .bw-cs-img   { padding: 12%; }
}

@media (max-width: 480px) {
    .bw-cat-slider { gap: 2px; }
    .bw-cs-slide {
        flex: 0 0 var(--bw-slide-w, 44vw);
        width: var(--bw-slide-w, 44vw);
        min-width: 90px;
    }
    .bw-cs-track { gap: 6px; }
    .bw-cs-arrow { width: 24px; height: 24px; min-width: 24px; }
    .bw-cs-arrow svg { width: 11px; height: 11px; }
    .bw-cs-label { font-size: 8.5px; padding: 7px 3px; }
}

/* Elementor wrapper fix */
.elementor-widget-html .bw-cat-slider {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.elementor-widget-html .bw-cs-viewport {
    overflow-x: auto !important;
}


/* =============================================================================
   BW SECTION HEADING  [bw_section_heading]
   Elegant centered badge with flanking decorative lines.
   Color is fully customisable via --bw-sh-color CSS variable.
   ============================================================================= */

.bw-section-heading {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 36px 0 20px;
    padding: 0;
    box-sizing: border-box;
    /* Force the heading to always span the full Elementor column width */
    min-width: 0;
}

/* ── Flanking lines — always fill remaining space ── */
.bw-sh-line {
    flex: 1 1 0;
    min-width: 20px;        /* always visible even in a narrow column */
    height: 2px;
    background: linear-gradient(to var(--bw-sh-dir, right),
        transparent 0%,
        rgba(41, 160, 242, 0.25) 40%,
        rgba(41, 160, 242, 0.55) 100%);
    display: block;
}
.bw-section-heading .bw-sh-line:first-child { --bw-sh-dir: right; }
.bw-section-heading .bw-sh-line:last-child  { --bw-sh-dir: left;  }

/* ── Central badge ── */
.bw-sh-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 18px;
    background: var(--bw-sh-color, #29A0F2);
    border-radius: 8px;
    /* Bigger box — increased padding */
    padding: 15px 44px;
    box-shadow:
        0 5px 22px rgba(41, 160, 242, 0.38),
        0 2px 6px  rgba(0, 0, 0, 0.10);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── Corner accent dots ── */
.bw-sh-badge::before,
.bw-sh-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}
.bw-sh-badge::before { left: 15px; }
.bw-sh-badge::after  { right: 15px; }

/* ── Heading text — bigger, bolder ── */
.bw-sh-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;            /* was 12px */
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    display: block;
    white-space: nowrap;
}

/* ── Optional sub-line ── */
.bw-section-heading-sub {
    text-align: center;
    margin: -12px 0 20px;
}
.bw-sh-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 0.03em;
    margin: 0;
}

/* ── Responsive: tablet ── */
@media (max-width: 960px) {
    .bw-sh-badge { padding: 13px 36px; margin: 0 14px; }
    .bw-sh-text  { font-size: 13px; letter-spacing: 0.14em; }
}

/* ── Responsive: mobile ── */
@media (max-width: 767px) {
    .bw-section-heading { margin: 28px 0 16px; }
    .bw-sh-badge {
        padding: 12px 28px;
        margin: 0 10px;
        border-radius: 6px;
    }
    .bw-sh-badge::before,
    .bw-sh-badge::after { display: none; }
    .bw-sh-text {
        font-size: 12px;
        letter-spacing: 0.13em;
    }
    .bw-sh-line { min-width: 14px; }
}

@media (max-width: 480px) {
    .bw-sh-badge { padding: 11px 22px; margin: 0 8px; }
    .bw-sh-text  { font-size: 11px; letter-spacing: 0.11em; }
}


/* =============================================================================
   SHOP PAGE — PIXEL-PERFECT REFACTOR  (Screenshot-1 target)
   ============================================================================= */

/* ── 1. Hide WooCommerce page title H1 ────────────────────────────────────── */
/* PHP filter woocommerce_show_page_title already returns false;
   CSS rule is a fallback in case another plugin/theme re-enables it. */
html body.woocommerce-page .woocommerce-products-header,
html body.woocommerce-page .woocommerce-products-header__title,
html body.post-type-archive-product .entry-title,
html body.tax-product_cat .entry-title,
html body.tax-product_tag .entry-title {
    display: none !important;
}

/* Keep the archive description div but not the h2 title inside it */
.woocommerce-products-header .woocommerce-products-header__title {
    display: none !important;
}

/* ── 2. Breadcrumbs — compact, top of content ─────────────────────────────── */
html body.woocommerce-page .woocommerce-breadcrumb,
html body.post-type-archive-product .woocommerce-breadcrumb,
html body.tax-product_cat .woocommerce-breadcrumb {
    font-size: 0.8rem !important;
    color: #888 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
html body.woocommerce-page .woocommerce-breadcrumb a {
    color: #29a0f2 !important;
    text-decoration: none !important;
}
html body.woocommerce-page .woocommerce-breadcrumb a:hover {
    text-decoration: underline !important;
}

/* ── 3. Category nav tabs ─────────────────────────────────────────────────── */
/* Never let an empty nav tabs container create blank space */
.bwf-cat-nav-tabs:empty { display: none !important; margin: 0 !important; padding: 0 !important; }
.bwf-cat-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

.bwf-cat-nav-tab {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #29a0f2 !important;
    text-decoration: none !important;
    padding: 4px 0;
    margin-right: 20px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.bwf-cat-nav-tab:hover {
    color: #1a8bdc !important;
    border-bottom-color: #1a8bdc;
}
.bwf-cat-nav-tab--active {
    color: #1C2B3A !important;
    border-bottom-color: #29a0f2;
    font-weight: 600;
}

/* ── 4. Category description text ────────────────────────────────────────── */
.bwf-cat-showcase-desc {
    margin: 0 0 28px !important;
    padding: 16px 18px !important;
    background: #f0f9ff !important;
    border-left: 4px solid #29a0f2 !important;
    border-radius: 0 6px 6px 0 !important;
}
/* Lead sentence — bold blue */
.bwf-cat-showcase-desc .bwf-desc-lead {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.975rem !important;
    font-weight: 700 !important;
    color: #29a0f2 !important;
    line-height: 1.5 !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.01em !important;
}
/* Body copy — regular grey */
.bwf-cat-showcase-desc .bwf-desc-body {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #444 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}
/* Fallback p tags */
.bwf-cat-showcase-desc p {
    margin: 0 0 8px !important;
    color: #444 !important;
    font-size: 0.875rem !important;
}
.bwf-cat-showcase-desc p:last-child {
    margin-bottom: 0 !important;
}

/* ── 5. Showcase tile cards — image-first, blue footer bar ────────────────── */
.bwf-cat-showcase-wrap {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

.bwf-cat-showcase {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #29a0f2 #e8e8e8 !important;
}
.bwf-cat-showcase::-webkit-scrollbar        { height: 3px; }
.bwf-cat-showcase::-webkit-scrollbar-track  { background: #f0f0f0; }
.bwf-cat-showcase::-webkit-scrollbar-thumb  { background: #29a0f2; border-radius: 2px; }

.bwf-cat-tile {
    flex: 1 1 0 !important;
    min-width: 130px !important;
    max-width: 220px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.10) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
}
.bwf-cat-tile:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(41,160,242,0.22) !important;
}

.bwf-cat-tile-img {
    width: 100% !important;
    /* aspect-ratio maintains a square-ish card */
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f4f6f8 !important;
    flex-shrink: 0 !important;
}
.bwf-cat-tile-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Shift focal point upward so neckline/chest of garment is visible,
       not the cropped top */
    object-position: 50% 20% !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}
.bwf-cat-tile:hover .bwf-cat-tile-img img {
    transform: scale(1.05) !important;
}

/* Blue footer bar — uppercase white text */
.bwf-cat-tile-label {
    background: #00AEEF !important;        /* brand blue per spec */
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 8px 6px !important;
    line-height: 1.2 !important;
    white-space: normal !important;        /* allow 2-line labels */
    overflow: visible !important;
    flex: 1 !important;                    /* fills remaining space below image */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── 6. Product card tweaks ───────────────────────────────────────────────── */
/* Title — blue */
html body.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    color: #29a0f2 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
}
/* "X colours available" subtitle — grey */
html body.woocommerce-page ul.products li.product .bwf-colours-count,
html body.woocommerce-page ul.products li.product .bwf-attr-line {
    font-size: 0.78rem !important;
    color: #6B7280 !important;
    margin-bottom: 3px !important;
}
/* Price — bold blue */
html body.woocommerce-page ul.products li.product .price,
html body.woocommerce-page ul.products li.product .price .amount {
    color: #29a0f2 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* Uniform image height */
html body.woocommerce-page ul.products li.product a img,
html body.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail {
    height: 220px !important;
    width: 100% !important;
    object-fit: contain !important;
    background: #fff !important;
    display: block !important;
}

/* ── 7. Remove archive description wrapper top-gap ───────────────────────── */
.woocommerce-archive-description,
.term-description {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── 8. Responsive overrides ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bwf-cat-tile-img { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 640px) {
    .bwf-cat-nav-tabs  { gap: 8px 0; padding-bottom: 8px; }
    .bwf-cat-nav-tab   { font-size: 0.875rem; margin-right: 14px; }
    .bwf-cat-tile      { min-width: 110px !important; }
    .bwf-cat-tile-label { font-size: 9.5px !important; padding: 7px 4px !important; }
    html body.woocommerce-page ul.products li.product a img,
    html body.woocommerce-page ul.products li.product .attachment-woocommerce_thumbnail {
        height: 160px !important;
    }
}

/* ── 9. Sidebar scrollbar — thin, branded ────────────────────────────────── */
html body.woocommerce-page #secondary::-webkit-scrollbar,
html body.tax-product_cat #secondary::-webkit-scrollbar,
html body.post-type-archive-product #secondary::-webkit-scrollbar {
    width: 4px;
}
html body.woocommerce-page #secondary::-webkit-scrollbar-track,
html body.tax-product_cat #secondary::-webkit-scrollbar-track,
html body.post-type-archive-product #secondary::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}
html body.woocommerce-page #secondary::-webkit-scrollbar-thumb,
html body.tax-product_cat #secondary::-webkit-scrollbar-thumb,
html body.post-type-archive-product #secondary::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
html body.woocommerce-page #secondary::-webkit-scrollbar-thumb:hover,
html body.tax-product_cat #secondary::-webkit-scrollbar-thumb:hover,
html body.post-type-archive-product #secondary::-webkit-scrollbar-thumb:hover {
    background: #29a0f2;
}

/* ── 10. Filter "Filter by" title — always visible at top of sidebar ──────── */
html body.woocommerce-page #secondary .widget-title,
html body.tax-product_cat #secondary .widget-title,
html body.post-type-archive-product #secondary .widget-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1C2B3A !important;
    border-bottom: 2px solid #e0e0e0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE BOXED LAYOUT — Hero + Image Panel Rows
   Client requirement: "Centered, boxed layout matching the header width"

   The site's nav/header uses max-width: 1280px (see .bw-container, 
   .bw-nav-bar .bw-container, .bw-utility-bar .bw-container).
   All homepage Elementor sections must use the same 1280px inner container
   so the left edge of the hero aligns with the logo and the right edge 
   aligns with the cart icon — exactly as in the reference screenshot.

   Structure:
     • Elementor section/e-con  → full viewport width (bg can bleed full)
     • Inner container           → max-width: 1280px; margin: 0 auto
     • Column gap                → 10px (consistent across hero + banners)
     • Column widget-wrap padding→ 0  (columns sit flush inside container)
   ════════════════════════════════════════════════════════════════════════ */

/* ── HERO SECTION (slideshow left + workwear bundles right) ─────────── */
/* Section itself: full-width, no vertical gap above announcement bar */
.bw-hero-section {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    padding-left:   0 !important;
    padding-right:  0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}

/* Elementor Flex Container (e-con) inner wrapper */
.bw-hero-section > .e-con-inner {
    max-width:    1280px !important;
    width:        100% !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding:      0 !important;
    gap:          10px !important;   /* gutter between slideshow & workwear */
    box-sizing:   border-box !important;
}

/* Elementor Classic Section container */
.elementor-section.bw-hero-section > .elementor-container {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding:      0 !important;
}
/* Classic Section row gap */
.elementor-section.bw-hero-section .elementor-row {
    gap:        10px !important;
    column-gap: 10px !important;
    margin:     0 !important;
}
/* Kill Elementor's default 10px column-wrap side padding */
.elementor-section.bw-hero-section .elementor-column > .elementor-widget-wrap,
.elementor-section.bw-hero-section .elementor-column-wrap {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ── THREE-PANEL BANNER ROW (Fitness / Workwear / Golf) ─────────────── */
/* The individual columns use class bw-card-wrap (bw-cat-hl variant) */
.elementor-section:has(.bw-card-wrap) {
    padding-left:   0 !important;
    padding-right:  0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}
.elementor-section:has(.bw-card-wrap) > .elementor-container {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding:      0 !important;
}
.elementor-section:has(.bw-card-wrap) .elementor-row {
    gap:        10px !important;
    column-gap: 10px !important;
    margin:     0 !important;
}
.elementor-section:has(.bw-card-wrap) .elementor-column > .elementor-widget-wrap,
.elementor-section:has(.bw-card-wrap) .elementor-column-wrap {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* Flex Container variant of three-panel row */
/* .e-con:has(.bw-card-wrap) {
    padding-left:   0 !important;
    padding-right:  0 !important;
    margin-top:     0 !important;
    margin-bottom:  0 !important;
}
.e-con:has(.bw-card-wrap) > .e-con-inner {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    padding:      0 !important;
    gap:          10px !important;
    box-sizing:   border-box !important;
} */

/* ── VERTICAL STACKING: hero butts directly against banner row ───────── */
.bw-hero-section + .elementor-section,
.bw-hero-section + .e-con {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.elementor-section:has(.bw-card-wrap) + .elementor-section:has(.bw-card-wrap),
.e-con:has(.bw-card-wrap) + .e-con:has(.bw-card-wrap) {
    margin-top: 0 !important;
}

/* ── OVERFLOW GUARD: prevent horizontal scroll from boxed centering ──── */
/* overflow-x:clip is used instead of hidden because hidden implicitly sets
   overflow-y:auto which causes unwanted vertical scrollbars on sections.
   clip achieves the same clipping without creating a new formatting context
   or triggering overflow-y changes. */
html body.page .elementor-section,
html body.page .e-con {
    overflow-x: clip !important;
}

/* ── MOBILE: restore breathing room between stacked rows ─────────────── */
@media (max-width: 768px) {
    .elementor-section:has(.bw-card-wrap) + .elementor-section:has(.bw-card-wrap),
    .e-con:has(.bw-card-wrap) + .e-con:has(.bw-card-wrap) {
        margin-top: 8px !important;
    }
    /* Mobile gutter slightly larger for touch targets */
    .bw-hero-section > .e-con-inner,
    .e-con:has(.bw-card-wrap) > .e-con-inner {
        gap: 6px !important;
    }
    .elementor-section.bw-hero-section .elementor-row,
    .elementor-section:has(.bw-card-wrap) .elementor-row {
        gap:        6px !important;
        column-gap: 6px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   HOMEPAGE — FULL-PAGE CONTAINER ALIGNMENT
   Every section's inner container must share the same 1280px max-width
   as the nav bar so ALL content aligns with the logo's left edge and
   the cart's right edge — across hero, panels, sliders, POD, headings.

   Approach:
   • Named sections (bw-categories-section, bw-pod-section) → targeted directly
   • All other Elementor sections on the homepage → scoped via body.home
     (WordPress adds .home to the body when this page is the static front page)
   • body.home avoids bleeding to any other page.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── bw-categories-section (all slider rows + Shop by Category) ──────── */
.bw-categories-section > .e-con-inner,
.elementor-section.bw-categories-section > .elementor-container {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    width:        100% !important;
    box-sizing:   border-box !important;
}

/* ─── bw-pod-section (Print-on-Demand section) ─────────────────────────── */
.bw-pod-section > .e-con-inner,
.elementor-section.bw-pod-section > .elementor-container {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    width:        100% !important;
    box-sizing:   border-box !important;
}

/* ─── Homepage catch-all: every Elementor section inner container ─────── */
/* Covers the "Shop by Category" divider row, heading rows, and any other
   sections that don't carry a named CSS class. */
body.home .elementor-section > .elementor-container {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    box-sizing:   border-box !important;
}
/* Flex-Container variant (Elementor Container widget) */
body.home .e-con > .e-con-inner {
    max-width:    1280px !important;
    margin-left:  auto !important;
    margin-right: auto !important;
    width:        100% !important;
    box-sizing:   border-box !important;
}

/* ─── Category slider: inherit the constrained column width ────────────── */
/* .bw-cat-slider already has width:100% so it fills its Elementor column;
   the column fills the 1280px container → slider = 1280px. No extra rule needed.
   HOWEVER: if the Elementor column widget-wrap adds horizontal padding that
   squeezes the slider, kill it for the categories section only. */
.bw-categories-section .elementor-column > .elementor-widget-wrap,
.bw-categories-section .elementor-widget-wrap {
    padding-left:  0 !important;
    padding-right: 0 !important;
}
.bw-categories-section .elementor-widget-html .bw-cat-slider {
    width: 100% !important;
    max-width: none !important;
}

/* ─── Overflow guard for homepage sections ─────────────────────────────── */
/* Same reason: clip instead of hidden to avoid triggering overflow-y:auto */
body.home .elementor-section {
    overflow-x: clip !important;
}

/* ─── Mobile: preserve scrollable sliders on small screens ─────────────── */
@media (max-width: 768px) {
    body.home .elementor-section > .elementor-container,
    body.home .e-con > .e-con-inner {
        max-width: 100% !important;
        padding-left:  12px !important;
        padding-right: 12px !important;
    }
    .bw-categories-section .elementor-column > .elementor-widget-wrap,
    .bw-categories-section .elementor-widget-wrap {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE FULL RESPONSIVE OVERHAUL  — mobile + tablet                   ║
   ║                                                                          ║
   ║  Breakpoints:                                                            ║
   ║    ≤1024px  tablet landscape (iPad Pro, Surface)                         ║
   ║    ≤ 960px  tablet portrait  (iPad, small tablet)                        ║
   ║    ≤ 767px  mobile landscape + large phone                               ║
   ║    ≤ 480px  mobile portrait  (most phones)                               ║
   ║                                                                          ║
   ║  Coverage:                                                               ║
   ║    • Body / global overflow                                              ║
   ║    • Hero section (slideshow + workwear bundle) stacking                 ║
   ║    • Banner card rows (Fitness/Workwear/Golf  Row 2)                     ║
   ║    • Product / category card rows (Rows 3-5, 5-col → 2-col)            ║
   ║    • Category sliders (already 2-up at 767px — verified here)           ║
   ║    • Section headings + Shop-by-Category divider                        ║
   ║    • Print-on-Demand section                                            ║
   ║    • Footer (all three rows)                                            ║
   ║    • Announcement bar overflow fix                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ── 0. GLOBAL: prevent horizontal scroll without breaking mobile menus ──
   "clip" (not "hidden") is used because:
   • overflow-x: hidden on <html> or <body> creates a new containing block
     for position:fixed children in some browsers, breaking slide-out menus.
   • overflow-x: clip achieves the same visual result (no horizontal scroll)
     WITHOUT creating a new stacking context or containing block.           */
html {
    overflow-x: clip !important;
}
body {
    overflow-x: clip !important;
    max-width: 100vw !important;
}
body.home .elementor-section,
body.home .e-con,
body.page .elementor-section,
body.page .e-con {
    overflow-x: clip !important;
    max-width: 100% !important;
}


/* ══════════════════════════════════════════════════════
   TABLET LANDSCAPE  ≤ 1024px
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* ── Container: full width + generous side padding ── */
    .bw-container {
        padding-left:  20px !important;
        padding-right: 20px !important;
    }
    body.home .elementor-section > .elementor-container,
    body.home .e-con > .e-con-inner {
        max-width:     100% !important;
        padding-left:  20px !important;
        padding-right: 20px !important;
    }

    /* ── Hero: reduce inner gap so slideshow + bundle don't collide ── */
    .bw-hero-section > .e-con-inner,
    .elementor-section.bw-hero-section .elementor-row {
        gap: 8px !important;
    }

    /* ── Banner rows (Fitness / Workwear / Golf — 3 columns): keep 3 but tighten gap ── */
    .elementor-section:has(.bw-card-wrap) > .elementor-container,
    .e-con:has(.bw-card-wrap) > .e-con-inner {
        gap: 8px !important;
    }

    /* ── 5-column card rows: go to 3 per row on tablet landscape ── */
    .elementor-section:has(.bw-card-wrap.bw-type-bar) .elementor-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .elementor-section:has(.bw-card-wrap.bw-type-bar) .elementor-column,
    .e-con:has(.bw-card-wrap.bw-type-bar) > .e-con {
        flex: 0 0 calc(33.333% - 6px) !important;
        width: calc(33.333% - 6px) !important;
        min-width: 0 !important;
    }

    /* ── Slider: 3-up is already handled via .bw-cs-slide 30vw at 960px ── */

    /* ── POD section icons: 2×2 grid on tablet ── */
    .bw-pod-steps-row {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    .bw-pod-step {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    /* ── Section headings: slightly smaller badge ── */
    .bw-sh-badge {
        padding: 13px 36px !important;
        margin: 0 14px !important;
    }
    .bw-sh-text { font-size: 13px !important; }
}


/* ══════════════════════════════════════════════════════
   TABLET PORTRAIT  ≤ 960px
   ══════════════════════════════════════════════════════ */
@media (max-width: 960px) {

    /* ── Hero: tighter gap ── */
    .bw-hero-section > .e-con-inner {
        gap: 6px !important;
    }

    /* ── Announcement bar: let items wrap if they overflow ── */
    .ast-banner-notice,
    .ast-topbar-above-bar-section,
    [class*="ast-notice"] {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: hidden !important;
    }
    .ast-notice-container,
    .ast-banner-notice .ast-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* ══════════════════════════════════════════════════════
   MOBILE LANDSCAPE + LARGE PHONE  ≤ 767px
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── 0. Kill horizontal overflow on Elementor wrappers (never on #masthead
       or body — clip-only approach to preserve mobile menu positioning) ── */
    .elementor,
    .elementor-section,
    .elementor-container,
    .elementor-row,
    .e-con,
    .e-con-inner {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    /* ── 1. Side padding on all homepage containers ── */
    body.home .elementor-section > .elementor-container,
    body.home .e-con > .e-con-inner,
    .bw-hero-section > .e-con-inner,
    .bw-categories-section > .e-con-inner,
    .bw-pod-section > .e-con-inner,
    body.home .elementor-container {
        max-width:     100% !important;
        padding-left:  14px !important;
        padding-right: 14px !important;
        box-sizing:    border-box !important;
    }
    /* Slider rows: zero side padding so slider fills column edge-to-edge */
    .bw-categories-section .elementor-column > .elementor-widget-wrap,
    .bw-categories-section .elementor-widget-wrap,
    .bw-cat-slider {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }

    /* ── 2. HERO SECTION: robust mobile stack (CSS layer — JS layer in functions.php
             provides a DOM-traversal backup that is guaranteed to win the cascade)  ──

       Why so many selectors?
       Elementor has two layout engines:
         a) Classic Section  → .elementor-section > .elementor-container > .elementor-row > .elementor-column
         b) Flex Container   → .e-con > .e-con-inner > .e-con (child)
       The hero might use either, and the custom class .bw-hero-section may sit on
       different elements depending on how Elementor was configured.
       We target every possible combination so at least one rule wins.        ── */

    /* Worst-case fallback: clip the hero so text NEVER bleeds off-screen */
    html body .bw-hero-section,
    html body section.bw-hero-section,
    html body div.bw-hero-section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Flex Container model (Elementor ≥3.6 "Container" widget) ── */
    /* The class .bw-hero-section can be on the outer .e-con itself */
    html body .bw-hero-section > .e-con-inner,
    html body .e-con.bw-hero-section > .e-con-inner,
    html body [class*="bw-hero"] > .e-con-inner {
        display:        flex !important;
        flex-direction: column !important;
        flex-wrap:      wrap !important;
        width:          100% !important;
        gap:            0 !important;
    }
    html body .bw-hero-section > .e-con-inner > .e-con,
    html body .bw-hero-section > .e-con-inner > div,
    html body .e-con.bw-hero-section > .e-con-inner > .e-con {
        width:      100% !important;
        max-width:  100% !important;
        flex:       0 0 100% !important;
        flex-basis: 100% !important;
        min-width:  0 !important;
        box-sizing: border-box !important;
    }

    /* ── Classic Section model (Elementor ≤3.5 / Section widget) ── */
    html body .elementor-section.bw-hero-section .elementor-container,
    html body section.bw-hero-section .elementor-container {
        display:        flex !important;
        flex-direction: column !important;
        flex-wrap:      wrap !important;
        width:          100% !important;
    }
    html body .bw-hero-section .elementor-row,
    html body .elementor-section.bw-hero-section .elementor-row {
        display:        flex !important;
        flex-direction: column !important;
        flex-wrap:      wrap !important;
        width:          100% !important;
        gap:            0 !important;
    }
    html body .bw-hero-section .elementor-column,
    html body .bw-hero-section [class*="elementor-col-"],
    html body .elementor-section.bw-hero-section .elementor-column {
        width:      100% !important;
        max-width:  100% !important;
        flex:       0 0 100% !important;
        flex-basis: 100% !important;
        box-sizing: border-box !important;
    }
    /* Inner widget wraps: full width, no horizontal padding */
    html body .bw-hero-section .elementor-column-wrap,
    html body .bw-hero-section .elementor-widget-wrap {
        width:   100% !important;
        padding: 0 !important;
    }

    /* ── Text overlay: constrain so text never escapes the column ── */
    html body .bw-hero-section .elementor-widget-html,
    html body .bw-hero-section .elementor-widget-container {
        max-width: 100% !important;
        overflow:  hidden !important;
    }
    html body h3.line-1,
    html body h4.line-2,
    html body p.line-3 {
        max-width:     100% !important;
        white-space:   normal !important;
        word-break:    break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ── Named helper classes (older custom header CSS) ── */
    .bw-hero-right { display: none !important; }
    .bw-hero-left  { padding: 20px 16px !important; }

    /* ── 3. Banner card rows (Row 2: Fitness / Workwear / Golf — 3 cols) ──
       Stack to 1 column on mobile so images aren't tiny                  */
    .elementor-section:has(.bw-card-wrap.bw-type-corner) .elementor-row,
    .e-con:has(.bw-card-wrap.bw-type-corner) > .e-con-inner {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .elementor-section:has(.bw-card-wrap.bw-type-corner) .elementor-column,
    .e-con:has(.bw-card-wrap.bw-type-corner) > .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── 4. Product / category card rows (Rows 3-5, 5-col → 2-col) ──── */
    .elementor-section:has(.bw-card-wrap.bw-type-bar) .elementor-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        flex-wrap: unset !important;   /* grid mode doesn't use flex-wrap */
    }
    .elementor-section:has(.bw-card-wrap.bw-type-bar) .elementor-column,
    .e-con:has(.bw-card-wrap.bw-type-bar) > .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Flex-Container variant (e-con parent): wrap into 2 columns */
    .e-con:has(.bw-card-wrap.bw-type-bar) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ── 5. Card image: square aspect ratio on mobile ── */
    .elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-image img,
    .e-con.bw-card-wrap.bw-type-bar .elementor-widget-image img {
        aspect-ratio: 1 / 1 !important;
    }
    .elementor-element.bw-card-wrap.bw-type-corner.bw-cat-hl .elementor-widget-image img,
    .e-con.bw-card-wrap.bw-type-corner.bw-cat-hl .elementor-widget-image img {
        aspect-ratio: 16 / 9 !important;
    }

    /* ── 6. Card buttons: readable font on small cards ── */
    .bw-btn {
        font-size: 10px !important;
        letter-spacing: 0.05em !important;
    }
    .elementor-element.bw-card-wrap.bw-type-bar .bw-btn,
    .e-con.bw-card-wrap.bw-type-bar .bw-btn {
        height: 32px !important;
        line-height: 32px !important;
        font-size: 9.5px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-bar .elementor-widget-html,
    .e-con.bw-card-wrap.bw-type-bar .elementor-widget-html {
        margin-top: -32px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-corner .bw-btn,
    .e-con.bw-card-wrap.bw-type-corner .bw-btn {
        height: 32px !important;
        line-height: 32px !important;
        font-size: 10px !important;
        padding: 0 10px !important;
    }
    .elementor-element.bw-card-wrap.bw-type-corner .elementor-widget-html,
    .e-con.bw-card-wrap.bw-type-corner .elementor-widget-html {
        margin-top: -32px !important;
    }

    /* ── 7. Category sliders: 2-up verified ─────────────────────────────
       The existing CSS already sets .bw-cs-slide to 44vw at ≤767px.
       Just ensure the viewport clip works inside the Elementor column.   */
    .bw-cs-viewport {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .bw-cat-slider {
        overflow: visible !important; /* track can scroll within viewport */
    }
    /* Allow slider container to scroll, but don't clip it */
    .elementor-widget-html .bw-cat-slider {
        overflow: visible !important;
    }

    /* ── 8. Section headings on mobile ── */
    .bw-section-heading {
        margin: 24px 0 12px !important;
    }
    .bw-sh-badge {
        padding: 11px 22px !important;
        margin: 0 8px !important;
    }
    .bw-sh-text {
        font-size: 11px !important;
        letter-spacing: 0.11em !important;
    }
    .bw-sh-line { min-width: 10px !important; }

    /* ── 9. Print-on-Demand section: 1-column on mobile ── */
    .bw-pod-steps-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .bw-pod-step {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* ── 10. Footer Row 1 (blue bar): centre logo + icons on mobile ── */
    #bw-site-footer .bw-footer-blue-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: center !important;
    }
    #bw-site-footer .bw-footer-direct-logo {
        height: 40px !important;
    }
    /* ── Footer Row 2: 2-column grid ── */
    #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }
    #bw-site-footer .bw-footer-about-col,
    #bw-site-footer .bw-footer-inventa-col {
        grid-column: 1 / -1 !important;
    }
    #bw-site-footer .bw-footer-inventa-col {
        align-items: center !important;
        text-align: center !important;
    }
    #bw-site-footer .bw-footer-main {
        padding: 28px 0 24px !important;
    }

    /* ── 11. Announcement bar overflow fix ── */
    .ast-above-header-wrap,
    .ast-above-header,
    .ast-top-bar {
        overflow: hidden !important;
    }
    .ast-above-header-section .ast-container,
    .ast-topbar-above-bar-section .ast-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 10px !important;
        font-size: 0.75rem !important;
    }
    .ast-above-header-section .ast-builder-grid-row,
    .ast-builder-header-above .ast-builder-grid-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    /* ── 12. Astra header on mobile: clip (NOT hidden — "hidden" silently converts
       overflow-y to "auto", which clips Astra's mobile dropdown menu since it
       is a positioned child of #masthead.  "clip" prevents horizontal bleed
       without creating a new overflow-y clipping context.) ── */
    #masthead,
    .main-header-bar,
    .ast-primary-header-bar {
        overflow-x: clip !important;
        overflow-y: visible !important;   /* ensure menu can appear below header */
    }

    /* ── 13. Astra mobile menu popup: always on top, never clipped ── */
    #ast-mobile-popup,
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-content,
    .ast-mobile-nav,
    .ast-mobile-header-section,
    [class*="ast-mobile-popup"] {
        z-index: 999999 !important;
        overflow: visible !important;
        position: fixed !important;
    }
    /* Mobile menu trigger / hamburger button: ensure it receives pointer events */
    .ast-menu-toggle,
    .menu-toggle,
    .ast-mobile-menu-trigger,
    .ast-button-wrap.ast-mobile-header-section-menu button,
    .ast-builder-menu-1 .ast-menu-toggle,
    #masthead .ast-menu-toggle {
        pointer-events: auto !important;
        z-index: 9999999 !important;
        position: relative !important;
        display: flex !important;
        cursor: pointer !important;
    }
    /* Nav drawer when open (Astra adds .ast-slide-out-open to body) */
    .ast-header-break-point #ast-mobile-popup.active,
    .ast-header-break-point #ast-mobile-popup[aria-expanded="true"],
    body.ast-slide-out-open #ast-mobile-popup {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ── 14. Hero text overlay: constrain text to the hero bounds on mobile ──
       The h3/h4/p text widget is positioned inside the slideshow column and
       can extend beyond the column's right edge if the column is narrow.
       Clip it at the section boundary so it doesn't bleed off screen.      ── */
    html body.home .bw-hero-section .elementor-widget-html,
    html body.home .bw-hero-section .elementor-widget-container {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    /* Text lines themselves: wrap normally, don't clip mid-word */
    html body.home h3.line-1,
    html body.home h4.line-2,
    html body.home p.line-3 {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}


/* ══════════════════════════════════════════════════════
   MOBILE PORTRAIT (most phones)  ≤ 480px
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Hero text overlay: slightly smaller on very small screens ── */
    h3.line-1 { font-size: 1rem !important; }
    h4.line-2 { font-size: 0.875rem !important; }
    p.line-3  { font-size: 0.75rem !important; }

    /* ── Tighter side padding on very small screens ── */
    body.home .elementor-section > .elementor-container,
    body.home .e-con > .e-con-inner,
    .bw-hero-section > .e-con-inner,
    .bw-categories-section > .e-con-inner,
    .bw-pod-section > .e-con-inner {
        padding-left:  10px !important;
        padding-right: 10px !important;
    }

    /* ── Footer: 1-column for links too ── */
    #bw-site-footer .bw-footer-main-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    #bw-site-footer .bw-footer-about-col,
    #bw-site-footer .bw-footer-links-col,
    #bw-site-footer .bw-footer-inventa-col {
        grid-column: 1 / -1 !important;
    }

    /* ── Section headings: full-width badge ── */
    .bw-sh-badge::before,
    .bw-sh-badge::after { display: none !important; }
    .bw-sh-badge {
        padding: 10px 18px !important;
        margin: 0 6px !important;
        border-radius: 5px !important;
    }
    .bw-sh-text  { font-size: 10.5px !important; }
    .bw-sh-line  { min-width: 6px !important; }

    /* ── Company info: wrap the separator ── */
    #bw-site-footer .bw-company-info {
        white-space: normal !important;
        text-align: center !important;
    }
    #bw-site-footer .bw-info-sep {
        display: none !important;
    }

    /* ── Card rows: slightly tighter gap ── */
    .elementor-section:has(.bw-card-wrap.bw-type-bar) .elementor-row,
    .e-con:has(.bw-card-wrap.bw-type-bar) {
        gap: 6px !important;
    }
}
