/*
Theme Name:    Kossy Child
Theme URI:     https://example.com/kossy-child/
Description:   Child theme for Let's Braai project
Author:        Samuel van Straaten
Template:      kossy
Version:       1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');

/* ==========================================================================
   0. BRAND VARIABLES (Including 15% Tints)
   ========================================================================== */
:root {
    /* Primary Brand Colours */
    --brand-orange: #f36c24;
    --brand-brown:  #69322b;
    --brand-yellow: #f1b51c;
    
    /* 15% Tints (85% White / 15% Brand) */
    --brand-orange-tint: #fbeae1;
    --brand-brown-tint:  #dfd7d6;
    --brand-yellow-tint: #fdf5e0;
}

/* Lock the viewport to prevent Safari horizontal bounce */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    overscroll-behavior-x: none !important; /* Stops the horizontal bounce/shift */
}

/* ==========================================================================
   1. LOCAL FONTS (RUBIK)
   ========================================================================== */

@font-face { font-family: 'Rubik-local'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Rubik-local'; font-style: italic; font-weight: 400; font-display: swap; src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'Rubik-local'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Rubik-local'; font-style: italic; font-weight: 700; font-display: swap; src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-700italic.woff2') format('woff2'); }
@font-face { font-family: 'Rubik-local'; font-style: normal; font-weight: 900; font-display: swap; src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-900.woff2') format('woff2'); }
@font-face { font-family: 'Rubik-local'; font-style: italic; font-weight: 900; font-display: swap; src: url('https://letsbraai.co.uk/wp-content/themes/kossy-child/fonts/rubik-v31-latin-900italic.woff2') format('woff2'); }

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & BASE LAYOUT (SLIDER PROTECTED)
   ========================================================================== */

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

p:empty { display: none; }

/* Apply base font globally EXCEPT inside Slider Revolution containers */
body, 
a:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *), 
li:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *), 
span:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *), 
p:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *) { 
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important; 
}

/* Insulate slider paragraph elements from dynamic balancing */
p:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *) { 
    text-wrap: pretty !important; 
}


/* Apply global styles to headings EXCEPT those inside Slider Revolution */
h1:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *), 
h2:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *), 
h3:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *), 
h4:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *), 
h5:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *), 
h6:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *) {
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important; 
    line-height: 0.98 !important;
    text-wrap: balance !important;
}

/* Excluded responsive sizing rules */
h1:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *) { 
    font-size: clamp(3.24rem, 7.2vw + 1.44rem, 5.76rem) !important; 
}
h2:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *) { 
    font-size: clamp(2.52rem, 5.76vw + 1.44rem, 4.32rem) !important; 
}
h3:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *) { 
    font-size: clamp(2.16rem, 4.32vw + 0.72rem, 3.24rem) !important; 
}

h1:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *), 
/* ... other headings ... */
h6:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-layer *) {
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    color: var(--brand-brown) !important; /* <--- ADD THIS LINE */
    text-transform: uppercase !important;
    /* ... rest of your rules ... */
}

/* ==========================================================================
   3. COMPONENT & HEADER OVERRIDES
   ========================================================================== */

#apus-header, #apus-header-mobile { background-color: #69322b; }
.navbar-nav.megamenu .dropdown-menu li > a, .topmenu-menu > li > a { color: var(--brand-brown) !important; }

/* Global Shipping Banner */
#global-shipping-banner {
    background-color: #f1b51c !important;
    color: var(--brand-brown) !important;
    text-align: center;
    padding: 12px 20px; 
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.98;
    font-size: 1.8rem; 
    width: 100%;
    position: relative;
    z-index: 10;
    margin-bottom: 30px !important;
}
#global-shipping-banner p { margin: 0; padding: 0; }
#global-shipping-banner .shipping-banner-content { font-size: 80%; display: flex; align-items: center; justify-content: center; gap: 15px; }
.shipping-banner-svg, .shipping-banner-icon {
    width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important; 
    box-sizing: border-box !important; border-radius: 50% !important; background-color: var(--brand-brown) !important; 
    color: #f1b51c !important; padding: 5px !important; flex-shrink: 0 !important;
    display: block !important; transform-origin: center center !important; will-change: transform; 
    animation: shippingWiggle 4s infinite ease-in-out !important; 
}
@keyframes shippingWiggle {
    0%, 70%, 100% { transform: rotate(0deg); }
    75% { transform: rotate(-12deg); }
    80% { transform: rotate(12deg); }
    85% { transform: rotate(-12deg); }
    90% { transform: rotate(12deg); }
    95% { transform: rotate(-6deg); }
}

/* Add breathing room below the shipping banner ONLY on single product pages */
body.single-product #global-shipping-banner {
    margin-bottom: 40px !important;
}

/* ==========================================================================
   MOBILE OVERRIDE: GLOBAL SHIPPING BANNER
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Slim down the massive top/bottom padding and reduce bottom margin */
    html body #global-shipping-banner {
        padding: 8px 12px !important;
        margin-bottom: 20px !important; 
    }

    /* Standardize the single-product margin for mobile as well */
    html body.single-product #global-shipping-banner {
        margin-bottom: 20px !important;
    }

    /* 2. Shrink text, apply pretty text wrapping, and tighten the icon gap */
    html body #global-shipping-banner .shipping-banner-content {
        font-size: 1.1rem !important; 
        line-height: 1.25 !important; 
        gap: 8px !important; 
        text-align: center !important;
        flex-wrap: wrap !important; 
        text-wrap: pretty !important; /* Prevents single-word orphans on the last line */
    }

    /* 3. Scale down the animated icon proportionally */
    html body #global-shipping-banner .shipping-banner-svg, 
    html body #global-shipping-banner .shipping-banner-icon {
        width: 30px !important; 
        height: 30px !important; 
        min-width: 30px !important; 
        max-width: 30px !important; 
        padding: 4px !important; 
    }
}

/* ==========================================================================
   BULLETPROOF FLUSH SLIDER ROW (Nukes all inner WPBakery margins)
   ========================================================================== */

html body .vc_row.flush-slider-row,
html body .vc_row.flush-slider-row > .wpb_column,
html body .vc_row.flush-slider-row > .wpb_column > .vc_column-inner,
html body .vc_row.flush-slider-row > .wpb_column > .vc_column-inner > .wpb_wrapper,
html body .vc_row.flush-slider-row .wpb_revslider_element,
html body .vc_row.flush-slider-row .wpb_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   REVOLUTION SLIDER: THE <rs-layer> FIREWALL
   ========================================================================== */

/* 1. Shield the layers from global theme bleeding */
html body rs-module-wrap rs-layer.rs-layer-text,
html body rs-module-wrap rs-layer.rs-layer-text *,
html body .rev_slider_wrapper rs-layer.rs-layer-text {
    /* Hard reset structural spacing leaking from theme rows/paragraphs ONLY on text */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Shield typography metrics so the editor canvas dictates line size */
    line-height: inherit;
    text-transform: inherit;
    
    /* Kill global layout rules breaking structural calculations */
    text-wrap: normal !important; 
    white-space: normal !important;
    letter-spacing: normal;
}


/* 2. Fix the Button Jump specifically */
html body rs-module-wrap rs-layer.rev-btn,
html body rs-module-wrap rs-layer .rev-btn {
    /* Prevents the button from inheriting WPBakery button transitions that cause it to shift */
    transition: none !important; 
    box-sizing: border-box !important;
}

/* ==========================================================================
   4. GLOBAL HERO BANNER SYSTEM (.banner-class)
   ========================================================================= */

.vc_row.banner-class {
    min-height: 350px !important; display: flex !important; align-items: center !important; 
    justify-content: center !important; background-size: cover !important; 
    background-position: center center !important; background-repeat: no-repeat !important; 
    position: relative !important; padding-top: 0 !important; padding-bottom: 0 !important;
}
.vc_row.banner-class::before {
    content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; 
    right: 0 !important; bottom: 0 !important; background-color: rgba(34, 30, 28, 0.15) !important; z-index: 1 !important;
}
.vc_row.banner-class > .wpb_column { position: relative !important; z-index: 2 !important; width: 100% !important; text-align: center !important; }
.banner-class h1, .banner-class h2, .banner-class h3 {
    color: #ffffff !important;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5), 0px 8px 16px rgba(0, 0, 0, 0.4), 0px 16px 32px rgba(0, 0, 0, 0.3);
}

/* Social Icon Wrapper Layout */
.social-icon-wrapper { display: flex; gap: 20px; align-items: center; }
.social-icon-wrapper a {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 65px !important; height: 65px !important; border-radius: 50% !important; 
    background-color: #f36c24 !important; color: #ffffff !important; text-decoration: none !important; transition: all 0.3s ease-in-out;
}
.social-icon-wrapper a:hover { background-color: #f36c24 !important; color: #ffffff !important; transform: translateY(-4px); }
.social-icon-wrapper svg { width: 35px !important; height: 35px !important; display: block; }

/* ==========================================================================
   5. WOOCOMMERCE PRODUCT GRID STRUCTURE
   ========================================================================= */

.woocommerce ul.products li.product, .woocommerce ul.products li.product .product-block { overflow: visible !important; }
.woocommerce ul.products li.product .product-block {
    display: flex !important; flex-direction: column !important; align-items: center !important; 
    text-align: center !important; padding: 10px !important; 
}
.product-block .image {
    background-color: #ffffff !important; border-radius: 16px !important; box-shadow: 0 0 25px rgba(0, 0, 0, 0.08) !important; 
    padding: 12px !important; /* Reduced to make images bigger */
    margin-bottom: 15px !important; display: flex !important; align-items: center !important; 
    justify-content: center !important; position: relative !important; width: 100% !important; 
    box-sizing: border-box !important; transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out !important;
}
.product-block:hover .image { box-shadow: 0 0 35px rgba(0, 0, 0, 0.12) !important; transform: translateY(-4px) !important; background-color: #ffffff !important; }
.product-block .image img {
    max-width: 100% !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; display: block !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important; will-change: transform;
}
.product-block:hover .image img { transform: scale(1.08) !important; }

/* Grid Title */
.product-block h3.name {
    font-size: clamp(1.4rem, 2.8vw + 0.7rem, 1.82rem) !important; line-height: 1.2 !important; 
    font-weight: 400 !important; margin-top: 0 !important; margin-bottom: 8px !important; 
    text-align: center !important; width: 100% !important;
    white-space: normal !important; word-wrap: break-word !important; height: auto !important; min-height: 0 !important;
}
.product-block h3.name a { color: var(--brand-brown) !important; transition: color 0.3s ease-in-out !important; }
.product-block h3.name a:hover { color: #f36c24 !important; }

/* Grid Button Alignment */
.product-block .groups-button {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    width: 85% !important; display: flex !important; flex-direction: column !important; gap: 10px !important;
    justify-content: center !important; align-items: center !important; z-index: 10 !important;
}

/* --- GRID BUTTON TEXT WRAPPING FIX --- */
html body .product-block .groups-button a.button {
    white-space: nowrap !important; /* Forces "SELECT OPTIONS" onto one line */
    padding: 12px 10px !important;  /* Reduced from global 15px 25px to prevent container overflow */
    font-size: 0.9rem !important;   /* Scaled down slightly to ensure it fits the 85% container */
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}


.product-block .caption, .product-block .product-info, .product-block .bottom-info {
    display: flex !important; flex-direction: column !important; align-items: center !important; 
    text-align: center !important; width: 100% !important;
}
.product-block .groups-button > div, .product-block .groups-button .add-cart, .product-block .groups-button .quick-view { width: 100% !important; }
.product-block .image { overflow: hidden !important; }

/* Hide Lingering Theme Ghosts */
.product-block .quickview, .product-block .btn-quickview, .product-block .yith-wcqv-button, .product-block .image .action,
.product-block .image::before, .product-block .image::after, .product-block .image a::before, .product-block .image a::after, .product-block .overlay,
.product-block.grid .groups-button a::before, .product-block.grid .groups-button button::before, 
.product-block.grid .groups-button .add-cart .button::before, .product-block.grid .groups-button .ajax_add_to_cart::before,
.product-block.grid .groups-button a::after, .product-block.grid .groups-button button::after, 
.product-block.grid .groups-button .add-cart .button::after, .product-block.grid .groups-button .ajax_add_to_cart::after {
    display: none !important; opacity: 0 !important; visibility: hidden !important; background: transparent !important; content: none !important;
}

/* Elegant Button Reveal */
@media (min-width: 769px) {
    .product-block .groups-button { opacity: 0 !important; visibility: hidden !important; transform: translate(-50%, -40%) !important; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; }
    .product-block:hover .groups-button { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, -50%) !important; }
}

/* ==========================================================================
   5.1 PRODUCT GRID CENTERING & SCALING OVERRIDE
   ========================================================================= */

/* 1. Standardize the Flexbox Wrapper */
html body .center-braai-grid,
html body .center-braai-grid ul.products,
html body .center-braai-grid .products.products-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; 
    gap: 15px !important; /* Shrunk from 30px to 15px */
    margin: 0 auto !important;
    width: 100% !important;
    float: none !important;
}

/* 1b. KILL WOOCOMMERCE INVISIBLE GHOST ITEMS */
html body .center-braai-grid::before,
html body .center-braai-grid::after,
html body .center-braai-grid ul.products::before,
html body .center-braai-grid ul.products::after,
html body .center-braai-grid .products.products-grid::before,
html body .center-braai-grid .products.products-grid::after {
    display: none !important;
    content: none !important;
}

/* 2. Dynamically Scale the Product Cards */
html body .center-braai-grid li.product,
html body .center-braai-grid .products.products-grid > .product,
html body .center-braai-grid .products.products-grid > div[class*="col-"] {
    float: none !important;
    display: flex !important; 
    margin: 0 !important; 
    box-sizing: border-box !important;
    
    /* The New Math: 25% minus the new 11.5px gap fraction */
    flex: 0 0 calc(25% - 11.5px) !important; 
    width: calc(25% - 11.5px) !important; 
    max-width: calc(25% - 11.5px) !important;
}

/* 3. Tablet Scale-down (Drops to 3 columns beautifully) */
@media (max-width: 1024px) {
    html body .center-braai-grid li.product,
    html body .center-braai-grid .products.products-grid > .product,
    html body .center-braai-grid .products.products-grid > div[class*="col-"] {
        /* The New Math for 3 columns: 2 gaps at 15px = 30px / 3 = 10px */
        flex: 0 0 calc(33.333% - 10.5px) !important; 
        width: calc(33.333% - 10.5px) !important; 
        max-width: calc(33.333% - 10.5px) !important;
    }
}

/* ==========================================================================
   6. MOBILE MENU (OFFCANVAS) UI/UX OVERHAUL (THE FINAL FIX)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* --- 1. FLEXBOX MASTER CONTAINERS (FOR BOTTOM DOCKING) --- */
    html body #mobile-offcanvas-sidebar,
    html body .apus-offcanvas {
        background-color: var(--brand-orange-tint) !important;
    }

    html body .apus-offcanvas .apus-offcanvas-body {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        overflow: hidden !important; 
    }

    html body .apus-offcanvas .apus-offcanvas-body nav.navbar-offcanvas {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        padding: 0 12px !important;
    }

    /* --- 2. CLOSE BUTTON (LOCKED AT TOP) --- */
    html body .apus-offcanvas .offcanvas-head {
        flex-shrink: 0 !important;
        background: var(--brand-orange) !important;
        background-color: var(--brand-orange) !important;
        border-bottom: none !important;
        padding: 12px !important;
    }
    
    html body #mobile-offcanvas-sidebar .offcanvas-head *,
    html body #apus-mobile-menu .btn-toggle-canvas,
    html body .close-sidebar-btn {
        background: transparent !important;
        background-color: transparent !important;
        color: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- 3. PRIMARY NAVIGATION LINKS (WHITE PILLS) --- */
    html body .apus-offcanvas-body ul#main-mobile-menu {
        padding: 0 !important;
        margin: 18px 0 0 0 !important; /* Breathing room below orange header */
    }
    
    html body .apus-offcanvas-body ul#main-mobile-menu > li {
        border-bottom: none !important;
        margin-bottom: 8px !important; 
        padding: 0 !important;
    }
    
    html body .apus-offcanvas-body ul#main-mobile-menu > li > a {
        background-color: #ffffff !important;
        color: var(--brand-brown) !important;
        border-radius: 30px !important;
        padding: 10px 15px !important;
        font-family: 'Rubik-local', Arial, sans-serif !important;
        font-size: 1.25rem !important; 
        font-weight: 700 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* --- 4. AUTO-EXPANDED "OUR WOOD" SUB-MENU --- */
    html body .apus-offcanvas-body ul#main-mobile-menu li.has-submenu > ul.sub-menu {
        display: block !important; 
        padding-top: 10px !important; 
        padding-bottom: 10px !important; 
        padding-left: 24px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    html body .apus-offcanvas-body ul#main-mobile-menu li.has-submenu > ul.sub-menu > li {
        margin-bottom: 2px !important; /* Shrunk spacing between sub-items */
        border: none !important;
        padding: 0 !important;
    }

    html body .apus-offcanvas-body ul#main-mobile-menu li.has-submenu > ul.sub-menu > li > a {
        background: transparent !important;
        box-shadow: none !important;
        padding: 2px 0 !important; /* Shrunk padding between sub-items */
        font-size: 1.15rem !important;
        color: var(--brand-brown) !important;
        text-transform: capitalize !important;
        font-weight: 700 !important; /* Slightly bolder */
        text-decoration: underline !important; /* Underlined link state */
        display: inline-block !important;
    }
    
    html body .apus-offcanvas-body ul#main-mobile-menu li > .icon-toggle {
        display: none !important;
    }

    /* --- 5. ACCOUNT SECTION (DOCKED BOTTOM, BRAND BROWN, SMALLER) --- */
    /* Target the second collapse div and push it to the bottom */
    html body .apus-offcanvas-body nav.navbar-offcanvas .navbar-collapse:last-of-type {
        margin-top: auto !important; 
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }

    /* The "My Account" Heading */
    html body .apus-offcanvas-body nav.navbar-offcanvas .navbar-collapse:last-of-type h4,
    html body .apus-offcanvas-body nav.navbar-offcanvas .navbar-collapse:last-of-type h4 span {
        color: var(--brand-brown) !important; 
        font-family: 'Rubik-local', Arial, sans-serif !important;
        font-weight: 900 !important;
        font-size: 1.15rem !important; /* Shrunk down */
        text-transform: uppercase !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        border: none !important;
    }

    /* The Login/Register Links */
    html body .apus-offcanvas-body nav.navbar-offcanvas .navbar-collapse:last-of-type ul {
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .apus-offcanvas-body nav.navbar-offcanvas .navbar-collapse:last-of-type ul li {
        border: none !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
    }

    html body .apus-offcanvas-body nav.navbar-offcanvas .navbar-collapse:last-of-type ul li a {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        color: var(--brand-brown) !important;
        font-size: 1rem !important; /* Shrunk down */
        font-weight: 500 !important;
        padding: 2px 0 !important;
        text-transform: capitalize !important;
        border-radius: 0 !important;
    }
}
/* ==========================================================================
   6. MOBILE OVERRIDES (THE ULTIMATE GRID REPAIR)
   ========================================================================= */

@media (max-width: 768px) {
    #global-shipping-banner { padding: 25px 20px !important; }
    #global-shipping-banner p { font-size: 1.5rem !important; line-height: 1.2 !important; padding: 0 !important; margin: 0 !important; }

    h1:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *), 
    .h1:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *) { 
    font-size: 3.2rem !important; 
    line-height: 1 !important; 
    }
    
        /* --- FIRST/LAST CHILD MARGIN KILLERS (Mobile Box Spacing Fix) --- */
    
    /* 1. Strip the 40px top margin if a heading is the very first element in a row/box */
    html body [class*="brand-row-"] .wpb_wrapper > *:first-child,
    html body [class*="brand-box-"] .wpb_wrapper > *:first-child,
    html body [class*="brand-row-"] .wpb_wrapper > .wpb_text_column:first-child *:first-child,
    html body [class*="brand-box-"] .wpb_wrapper > .wpb_text_column:first-child *:first-child {
        margin-top: 0 !important;
    }
    
    /* 2. Strip the 20px column margin if it's the last column in a row */
    html body [class*="brand-row-"] > .wpb_column:last-child,
    html body [class*="brand-row-"] > .vc_column_container:last-child {
        margin-bottom: 0 !important;
    }
    
    /* 3. Strip the 15px bottom margin from the last piece of text or button inside any container */
    html body [class*="brand-box-"] .wpb_wrapper > *:last-child,
    html body [class*="brand-row-"] .wpb_wrapper > *:last-child,
    html body .wpb_text_column *:last-child {
        margin-bottom: 0 !important;
    }
    
    h2:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *), 
    .h2:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *) { 
        font-size: 2.6rem !important; 
        line-height: 1.05 !important; 
        margin-top: 10px !important; 
    }
    
    h3:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *), 
    .h3:not(.rev_slider_wrapper *, .rs-module-wrap *, rs-module *) { 
        font-size: 2.1rem !important; 
        line-height: 1.1 !important; 
    }
    

    #apus-header-mobile { padding-top: 15px !important; padding-bottom: 15px !important; }
    #apus-header-mobile .btn-offcanvas, #apus-header-mobile .btn-offcanvas i, #apus-header-mobile .mini-cart i, #apus-header-mobile .mini-cart .count { color: #ffffff !important; }
    .shipping-banner-svg, .shipping-banner-icon { display: none !important; }
    .shipping-banner-content { gap: 0 !important; }
    
    /* --- WPBakery Mobile Spacing Crushers --- */
    
    /* 1. Crush static Empty Space modules down to a reasonable 20px on phones */
    html body .vc_empty_space {
        height: 20px !important;
    }


    
/* --- HOMEPAGE & GLOBAL MOBILE MARGINS --- */
    /* Apply breathing room safely WITHOUT breaking full-width slider rows */
    html body .container,
    html body .container-fluid,
    html body .vc_row:not([data-vc-full-width]) {
        padding-left: 20px !important; 
        padding-right: 20px !important; 
        box-sizing: border-box !important; 
    }
    
    html body .social-icon-wrapper {
        justify-content: center !important; /* Centers the icons horizontally */
        width: 100% !important; /* Ensures the container spans the full screen width */
    }

    /* Kills negative margin bleed ONLY on standard boxed rows */
    html body .vc_row:not([data-vc-full-width]) {
        margin-left: 0 !important; 
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        width: 100% !important; 
    }


    /* --- Force All Text Centered on Mobile --- */
    /* Centering text only if it's NOT inside a Revolution Slider wrapper */
    html body .wpb_text_column:not(.rev_slider_wrapper), 
    html body .wpb_text_column:not(.rev_slider_wrapper) *, 
    html body .wpb_content_element:not(.rev_slider_wrapper) { 
        text-align: center !important; 
    }


    /* Restructure columns safely, leaving elements with slider containers untouched */
    html body .wpb_column:not(.rev_slider_wrapper *),
    html body .vc_column_container:not(.rev_slider_wrapper *) {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
        float: none !important;
    }

        /* Apply text column sizing ONLY to standard page content, protecting the slider layers */
    .wpb_text_column:not(.rev_slider_wrapper) p, 
    .wpb_text_column:not(.rev_slider_wrapper) p span { 
        font-size: 1.3rem !important; 
        line-height: 1.6 !important; 
        margin-bottom: 15px !important; 
}

/* Absolute baseline reset for mobile slider text strings */
    html body rs-module-wrap rs-layer.rs-layer-text,
    html body .rev_slider_wrapper rs-layer.rs-layer-text {
        /* Prevents theme margin inheritance from pushing text layers into elements beneath them */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .wpb_single_image .vc_single_image-wrapper { max-width: 65% !important; margin: 0 auto !important; padding-top: 15px !important; padding-bottom: 15px !important; }
    
/* --- WOOCOMMERCE & WPBAKERY CSS GRID OVERRIDE (MOBILE) --- */
    
    /* 1. Use CSS Grid to force a perfect 2-column layout and equalize heights automatically */
    html body .products.row,
    html body .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important; /* Perfect spacing between all cards */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Absolute override of Bootstrap's legacy columns */
    html body .products.row > div[class*="col-"],
    html body .products.row > .item,
    html body .woocommerce ul.products > li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important; 
        padding: 0 !important; 
        display: flex !important; /* Ensures the inner card stretches to the full height of the grid cell */
    }
    
    /* 3. The Card Box Itself */
    html body .product-block.grid,
    html body .product-block {
        width: 100% !important;
        background-color: #ffffff !important;
        border-radius: 16px !important;
        padding: 20px 15px !important; 
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Strip inner wrappers so they remain invisible */
    html body .product-block .grid-inner,
    html body .product-block .block-inner {
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; /* Pushes content to fill space evenly */
    }

    /* --- UPDATED: 4. Image Formatting (Mobile Uniformity Fix) --- */
    html body .product-block .image {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important; /* Forces every image container to be a perfect, uniform square */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 10px !important; 
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    
    html body .product-block .image img {
        width: 100% !important;
        height: 100% !important; /* Tells the image to fill the new uniform square */
        object-fit: contain !important; /* Prevents the image from stretching or squishing */
        border-radius: 8px !important; 
        margin: 0 auto !important;
    }

    /* --- 5. MAGIC RULE: FULL-WIDTH ODD LAST CHILD --- */
    /* If there is an odd number of products (e.g., 3), make the last one span both columns */
    html body .products.row > div:last-child:nth-child(odd),
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important; /* Spans from the first grid line to the last */
    }

    /* Transform the full-width card into a horizontal layout */
    html body .products.row > div:last-child:nth-child(odd) .block-inner,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .block-inner {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Shrink the image and push it left */
    html body .products.row > div:last-child:nth-child(odd) .image,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .image {
        width: 45% !important;
        margin-bottom: 0 !important;
        margin-right: 15px !important;
        flex-shrink: 0 !important;
    }

    /* Expand the text area and align it left */
    html body .products.row > div:last-child:nth-child(odd) .metas,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .metas {
        width: 55% !important;
        text-align: left !important;
    }

    html body .products.row > div:last-child:nth-child(odd) .left-info,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .left-info {
        align-items: flex-start !important;
    }

    html body .products.row > div:last-child:nth-child(odd) h3.name,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) h3.name,
    html body .products.row > div:last-child:nth-child(odd) .price,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .price {
        text-align: left !important;
    }
    
    /* --- 6. TIGHTEN MOBILE PRODUCT CARD SPACING --- */
    
    /* Reduce the gap between the image and the title */
    html body .product-block .image {
        margin-bottom: 10px !important; /* Shrunk down from 15px/20px */
    }

    /* Reduce the gap between the title and the price beneath it */
    html body .product-block h3.name,
    html body .product-block h3.name a {
        margin-bottom: 6px !important; /* Shrunk down from 12px */
        line-height: 1.15 !important; /* Keeps multi-line titles tight and neat */
    }

    /* Tighten the gap between the Price and the (inc VAT) text */
    html body .product-block .left-info .price,
    html body .product-block .left-info .price .woocommerce-Price-amount {
        margin-bottom: 2px !important; 
    }

    /* --- MOBILE FONT COLOR FIX --- */
    html body .product-block h3.name,
    html body .product-block h3.name a {
        color: var(--brand-brown) !important; /* Brand Brown */
        font-weight: 700 !important;
    }

    html body .product-block .price,
    html body .product-block .price span,
    html body .product-block .price .amount,
    html body .product-block .woocommerce-Price-amount {
        color: #f36c24 !important; /* Brand Orange */
        font-weight: 900 !important;
    }


    /* --- DESTROY THE THEME'S "ADD" GHOST TEXT --- */
    html body .product-block .image::before,
    html body .product-block .image::after,
    html body .product-block .image a::before,
    html body .product-block .image a::after,
    html body .product-block .action::before,
    html body .product-block .action::after,
    html body .product-block:hover .image::before,
    html body .product-block:hover .image::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
    }
    
    /* --- EQUAL HEIGHT CARDS & BOTTOM PRICE ALIGNMENT --- */
    
    /* 1. Force the white card to stretch to the full height of the grid cell */
    html body .woocommerce ul.products > li.product .product-block {
        height: 100% !important;
    }
    
    /* 2. Target the price wrappers and push them to the absolute bottom of the card */
    html body .product-block .caption,
    html body .product-block .left-info,
    html body .product-block .metas {
        margin-top: auto !important; 
    }
}

/* ==========================================================================
   7. DESKTOP OVERRIDES & LAYOUT REFINEMENTS
   ========================================================================= */

@media (min-width: 769px) {
/* Reduced global desktop padding from 40px down to 20px (Excluding Slider) */
    .vc_row:not(.flush-slider-row) { padding-top: 20px !important; padding-bottom: 20px !important; }
    
    /* Apply 20px side padding to elements, but exempt Revolution Slider */
    .wpb_text_column, .wpb_content_element:not(.wpb_revslider_element) { padding-left: 20px !important; padding-right: 20px !important; }
    
    /* Grid Engine */
    .woocommerce ul.products { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        gap: 30px !important; 
    }

    .woocommerce ul.products li.product { 
        width: calc(33.333% - 20px) !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        float: none !important; 
    }
}

/* ==========================================================================
   8. WPBAKERY UTILITIES & CUSTOM BLOCKS
   ========================================================================= */

.white-text { color: white; }
.no-margin { margin: 0; }
.center-align { text-align: center; display: block; margin-left: auto; margin-right: auto; }
.kossy-center-y { display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; }
.kossy-center-y > .wpb_wrapper, .kossy-center-y .vc_column-inner > .wpb_wrapper { display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; width: 100% !important; }

.rounded-corners { border-radius: 16px !important; overflow: hidden !important; }
.rounded-corners-lg { border-radius: 32px !important; overflow: hidden !important; }

/* ==========================================================================
   9. WPBAKERY BRAND BUTTON SYSTEM
   ========================================================================= */

.vc_btn3 { font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important; border: none !important; transition: all 0.3s ease-in-out !important; }
.vc_btn3.vc_btn3-color-brand-orange { background-color: #f36c24 !important; color: var(--brand-brown) !important; }
.vc_btn3.vc_btn3-color-brand-yellow { background-color: #f1b51c !important; color: var(--brand-brown) !important; }
.vc_btn3.vc_btn3-color-brand-brown { background-color: var(--brand-brown) !important; color: #f1b51c !important; }
.vc_btn3.vc_btn3-color-brand-orange:hover, .vc_btn3.vc_btn3-color-brand-yellow:hover, .vc_btn3.vc_btn3-color-brand-brown:hover {
    background-color: var(--brand-brown) !important; color: #f1b51c !important; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important; opacity: 1;
}

/* ==========================================================================
   10. WOOCOMMERCE STRUCTURAL BRAND OVERRIDES (TABS, BADGES, PAGINATION)
   ========================================================================= */

.woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-page .cart-collaterals .cart_totals, .woocommerce table.shop_table, .woocommerce table.shop_table td {
    background-color: transparent !important; background: none !important; border-color: #e5e5e5 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li { background-color: transparent !important; border: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 1.1rem !important; transition: color 0.3s ease !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: #f36c24 !important; }

.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
    border: 2px solid #69322b !important; background-color: transparent !important; color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 700 !important; padding: 10px 15px !important; transition: all 0.3s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--brand-brown) !important; color: #f1b51c !important; 
}

.woocommerce .quantity .qty { background-color: transparent !important; border: 2px solid #69322b !important; color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 700 !important; border-radius: 4px !important; }
.woocommerce span.onsale { background-color: #f1b51c !important; color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before, .woocommerce p.stars a::before { color: #f1b51c !important; }
.woocommerce-message, .woocommerce-info { border-top-color: #f36c24 !important; color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; }
.woocommerce-message::before, .woocommerce-info::before { color: #f36c24 !important; }
.woocommerce-error { border-top-color: var(--brand-brown) !important; }
.woocommerce-error::before { color: var(--brand-brown) !important; }

/* ==========================================================================
   11. MASTER UI/UX BRAND MAPPING (HIERARCHY & COLOR LOGIC)
   ========================================================================= */

/* --- A. UNIVERSAL BUTTON LOGIC --- */
html body .woocommerce a.button, html body .woocommerce button.button, html body .woocommerce input.button, html body .woocommerce #respond input#submit,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, html body .woocommerce-mini-cart__buttons a.button {
    background-color: #f1b51c !important; color: var(--brand-brown) !important; 
    font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important;
    border: none !important; border-radius: 4px !important; padding: 15px 25px !important; transition: all 0.3s ease-in-out !important; text-align: center !important;
}

html body .woocommerce a.button:hover, html body .woocommerce button.button:hover, html body .woocommerce input.button:hover, html body .woocommerce #respond input#submit:hover,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, html body .woocommerce-mini-cart__buttons a.button:hover {
    background-color: var(--brand-brown) !important; color: #f1b51c !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100% !important; font-size: 1.2rem !important; margin-top: 20px !important; display: block !important; }

/* --- B. TYPOGRAPHIC HIERARCHY --- */
.woocommerce-cart .entry-title, .cart_totals h2, .widget_shopping_cart_title,
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2, 
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3,
.woocommerce .related.products.widget .widget-title {
    color: var(--brand-brown) !important; 
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important; 
    font-weight: 900 !important; 
    text-transform: uppercase !important; 
    letter-spacing: -0.04em !important; 
    line-height: 1 !important; 
    margin-bottom: 30px !important; 
    background-color: transparent !important;
}

.woocommerce div.product .product_title { 
    color: var(--brand-brown) !important; 
    font-size: clamp(2.2rem, 4vw, 3rem) !important; 
    font-weight: 900 !important; 
    line-height: 1.05 !important; 
    text-transform: uppercase !important; 
    margin-bottom: 15px !important; }
    
.woocommerce-cart table.cart td.product-name a, .widget_shopping_cart .cart_list li a, .woocommerce-mini-cart-item a.product-title { 
    color: var(--brand-brown) !important; 
    font-size: 1.5rem !important; 
    font-weight: 700 !important; 
    line-height: 1.3 !important; 
    text-transform: uppercase !important; 
    display: block !important; 
    margin-bottom: 5px !important; text-wrap: pretty !important; }
    
.woocommerce table.shop_table th { 
    color: var(--brand-brown) !important; 
    font-size: 0.85rem !important; 
    font-weight: 700 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.05em !important; 
    /* FIXED: Removed the 2px solid #e5e5e5 bottom border to prevent header line duplication */
    padding-bottom: 15px !important; 
}

/* --- C. COLOR LOGIC: PRICE POINTS (SHRUNK) --- */
html body .woocommerce div.product p.price, 
html body .woocommerce div.product span.price, 
html body .woocommerce-cart table.cart td.product-price .amount,
html body .woocommerce-cart table.cart td.product-subtotal .amount, 
html body .widget_shopping_cart .total .amount, 
html body .woocommerce-mini-cart-item .quantity,
html body .woocommerce-mini-cart-item .amount, 
html body .cart_totals .order-total .amount, 
html body .cart_totals .cart-subtotal .amount,
html body .details-product .price,
html body .woocommerce-Price-amount.amount {
    color: #f36c24 !important; 
    font-weight: 900 !important;
}

.cart_totals .cart-subtotal .amount, .cart_totals .cart-subtotal th { font-weight: 400 !important; }
.cart_totals .order-total .amount, .cart_totals .order-total th { font-weight: 900 !important; }

/* SHRUNK PRICES */
.woocommerce div.product p.price, .woocommerce div.product span.price { 
    font-size: 1.6rem !important; /* Reduced from 2.2rem */
    margin-top: 15px !important; 
    margin-bottom: 15px !important; 
    display: flex !important; flex-direction: column !important; 
}
html body .product-block .price, html body .product-block .price .amount, .woocommerce-cart table.cart td.product-price .amount, .woocommerce-cart table.cart td.product-subtotal .amount, .woocommerce-mini-cart-item .amount { 
    font-size: 1rem !important; /* Reduced Grid Price */
}

/* SHRUNK VAT SUFFIX */
.woocommerce-price-suffix { 
    font-size: 0.45em !important; /* Extremely small */
    color: var(--brand-brown) !important; font-weight: 400 !important; vertical-align: middle !important; margin-left: 6px !important; 
    opacity: 0.6 !important; /* Faded back slightly */
}

/* ==========================================================================
   12. KOSSY THEME SPECIFIC OVERRIDES (MINI-CART & CART PAGE REFINEMENTS)
   ========================================================================= */

.widget_shopping_cart_content_wrapper .shopping_cart_content { max-height: calc(100vh - 250px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 15px !important; }
.widget_shopping_cart_content_wrapper .shopping_cart_content::-webkit-scrollbar { width: 6px !important; }
.widget_shopping_cart_content_wrapper .shopping_cart_content::-webkit-scrollbar-thumb { background-color: #f36c24 !important; border-radius: 4px !important; }
.woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img { width: 80px !important; height: auto !important; border-radius: 8px !important; margin-left: 0 !important; margin-right: 15px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important; }

.shopping_cart_content .cart_list h3.name a { color: var(--brand-brown) !important; font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.4 !important; text-transform: uppercase !important; text-wrap: pretty !important; letter-spacing: -0.01em !important; }
#apus-breadscrumb, .apus-breadscrumb { background-color: transparent !important; background-image: none !important; border: none !important; padding-top: 40px !important; padding-bottom: 20px !important; }
#apus-breadscrumb .breadcrumb-inner { display: none !important; }
#apus-breadscrumb .bread-title { color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 900 !important; font-size: clamp(3rem, 6vw, 4.5rem) !important; text-transform: uppercase !important; letter-spacing: -0.04em !important; text-align: center !important; margin: 0 !important; line-height: 1 !important; }

html body .shopping_cart_content .cart-bottom .buttons a.btn, html body .woocommerce-cart .coupon .btn, html body .woocommerce-cart .coupon input.button, html body .woocommerce-cart .wc-proceed-to-checkout a.btn { background-color: #f1b51c !important; color: var(--brand-brown) !important; border: none !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 900 !important; text-transform: uppercase !important; padding: 15px 20px !important; border-radius: 4px !important; transition: all 0.3s ease-in-out !important; box-shadow: none !important; }
html body .shopping_cart_content .cart-bottom .buttons a.btn:hover, html body .woocommerce-cart .coupon .btn:hover, html body .woocommerce-cart .coupon input.button:hover, html body .woocommerce-cart .wc-proceed-to-checkout a.btn:hover { background-color: var(--brand-brown) !important; color: #f1b51c !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important; }
.woocommerce-cart .wc-proceed-to-checkout a.btn { width: 100% !important; text-align: center !important; margin-top: 20px !important; display: block !important; font-size: 1.2rem !important; }

/* ==========================================================================
   13. SINGLE PRODUCT PAGE: DESCRIPTION & CONTENT FORMATTING
   ========================================================================= */

/* 1. Target ALL content areas: Short Description (.summary) and ALL Tabs (.tab-content) */
html body .woocommerce div.product .summary p,
html body .woocommerce div.product .summary ul li,
html body .woocommerce div.product .woocommerce-tabs .tab-content p,
html body .woocommerce div.product .woocommerce-tabs .tab-content ul li {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 1.1rem !important; /* Upscales to a highly readable size */
    line-height: 1.7 !important;  /* Generous breathing room between lines */
    color: #4a4a4a !important;    /* A softer charcoal for reduced eye strain during long reads */
    font-weight: 400 !important;
}

/* 2. Standardize Paragraph Spacing */
html body .woocommerce div.product .summary p,
html body .woocommerce div.product .woocommerce-tabs .tab-content p {
    margin-bottom: 20px !important;
}

/* 3. Standardize Bullet Point Layouts */
html body .woocommerce div.product .summary ul,
html body .woocommerce div.product .woocommerce-tabs .tab-content ul {
    margin-bottom: 30px !important;
    padding-left: 20px !important;
}

html body .woocommerce div.product .summary ul li,
html body .woocommerce div.product .woocommerce-tabs .tab-content ul li {
    margin-bottom: 12px !important;
}

/* 4. Bold Text Branding (Strong Tags) */
html body .woocommerce div.product .summary p strong,
html body .woocommerce div.product .summary ul li strong,
html body .woocommerce div.product .woocommerce-tabs .tab-content p strong,
html body .woocommerce div.product .woocommerce-tabs .tab-content ul li strong {
    color: var(--brand-brown) !important; /* Changes default black bolds to brand brown */
    font-weight: 700 !important;
}

/* 5. Headings inside the Tabs (H1, H2, H3) */
html body .woocommerce div.product .woocommerce-tabs .tab-content h1,
html body .woocommerce div.product .woocommerce-tabs .tab-content h2,
html body .woocommerce div.product .woocommerce-tabs .tab-content h3 {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    text-wrap: balance !important;
    display: block !important;
    margin-top: 35px !important;
    margin-bottom: 20px !important;
}


/* Responsive Heading Scaling */
html body .woocommerce div.product .woocommerce-tabs .tab-content h1 { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; }
html body .woocommerce div.product .woocommerce-tabs .tab-content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; }
html body .woocommerce div.product .woocommerce-tabs .tab-content h3 { font-size: clamp(1.2rem, 2vw, 1.5rem) !important; }

/* ==========================================================================
   16. CATEGORY FILTERS & PRODUCT BADGES
   ========================================================================= */

.wrapper-filter .pull-left, .wrapper-filter { float: none !important; width: 100% !important; display: flex !important; justify-content: center !important; }
ul#apus-categories { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 0 !important; margin: 0 auto 30px auto !important; }
ul#apus-categories li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
ul#apus-categories li a { color: var(--brand-brown) !important; background-color: rgba(241, 181, 28, 0.15) !important; padding: 8px 18px !important; border-radius: 6px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 700 !important; font-size: 0.85rem !important; transition: all 0.3s ease-in-out !important; display: inline-block !important; border: 1px solid transparent !important; }
ul#apus-categories li a:hover, ul#apus-categories li.current-cat a { background-color: #f1b51c !important; color: var(--brand-brown) !important; transform: translateY(-2px); }
ul#apus-categories li.cat-item-15 { display: none !important; }
.details-product .posted_in { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-size: 0.85rem !important; font-weight: 700 !important; text-transform: uppercase !important; margin-bottom: 20px !important; }
.details-product .posted_in a { color: var(--brand-brown) !important; background-color: rgba(241, 181, 28, 0.15) !important; padding: 6px 14px !important; border-radius: 4px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; font-size: 0.8rem !important; transition: all 0.3s ease-in-out !important; text-decoration: none !important; display: inline-block !important; }
.details-product .posted_in a:hover { background-color: #f1b51c !important; transform: translateY(-2px); }

/* ==========================================================================
   17. GLOBAL INLINE LINK ACCESSIBILITY REPAIRS
   ========================================================================= */

.wpb_text_column p a, .woocommerce-tabs .description p a, .entry-content p a, .text-theme p a { color: var(--brand-brown) !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; font-weight: 700 !important; transition: all 0.3s ease-in-out !important; }
.wpb_text_column p a:hover, .woocommerce-tabs .description p a:hover, .entry-content p a:hover, .text-theme p a:hover { color: #f36c24 !important; text-decoration-color: #f36c24 !important; background-color: transparent !important; }
.wpb_text_column p a.x_elementToProof, .woocommerce-tabs .description p a.x_elementToProof, .entry-content p a.x_elementToProof, a[class*="x_elementToProof"] { color: var(--brand-brown) !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; font-weight: 700 !important; }
.wpb_text_column p a.x_elementToProof:hover, .woocommerce-tabs .description p a.x_elementToProof:hover, .entry-content p a.x_elementToProof:hover, a[class*="x_elementToProof"]:hover { color: #f36c24 !important; text-decoration-color: #f36c24 !important; }

/* ==========================================================================
   18. BLOG PAGE & FINAL SPECIFICITY OVERRIDES
   ========================================================================= */

.blog .post-thumbnail img, .archive .post-thumbnail img { max-height: 400px !important; width: 100% !important; object-fit: cover !important; }
.blog article.post, .archive article.post { margin-bottom: 80px !important; padding-bottom: 40px !important; border-bottom: 2px solid #e5e5e5 !important; }
.blog .entry-title a, .archive .entry-title a { color: var(--brand-brown) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.02em !important; }
.blog .btn-readmore, .archive .btn-readmore { background-color: #f1b51c !important; color: var(--brand-brown) !important; font-weight: 900 !important; text-transform: uppercase !important; padding: 12px 24px !important; border-radius: 4px !important; display: inline-block !important; }
.blog .btn-readmore:hover, .archive .btn-readmore:hover { background-color: var(--brand-brown) !important; color: #f1b51c !important; }
.related.products h3.widget-title { color: var(--brand-brown) !important; font-weight: 900 !important; text-transform: uppercase !important; font-size: 2.5rem !important; }

/* --- BRAND ROUNDED CORNERS FOR ALL BLOG IMAGES (REVISED) --- */

/* 1. Target the wrappers to ensure no sharp backgrounds bleed through */
.entry-thumb, 
.post-thumbnail, 
.post-thumbnail .image-wrapper {
    border-radius: 32px !important; /* Note: You can drop this back to 16px if 32px is too round */
    overflow: hidden !important;
    display: block !important;
}

/* 2. Target the image directly using the structural classes */
.entry-thumb img,
.post-thumbnail img,
.post-thumbnail .image-wrapper img {
    border-radius: 32px !important;
}

/* 3. Target inline images embedded directly within the single blog post reading content */
.single-post .entry-content img,
.single-post .post-content img {
    border-radius: 12px !important; 
}

/* ==========================================================================
   19. FINAL POLISH: BLOG, AUTHOR & GRID UTILITIES
   ========================================================================= */

.top-info-grid .author a.name-author, .top-info-grid .name-author { color: var(--brand-brown) !important; background-color: rgba(241, 181, 28, 0.15) !important; padding: 4px 12px !important; border-radius: 4px !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 0.75rem !important; transition: all 0.3s ease !important; display: inline-block !important; border: none !important; text-decoration: none !important; }
.top-info-grid .name-author a { color: var(--brand-brown) !important; background: transparent !important; text-decoration: none !important; padding: 0 !important; }
.top-info-grid .name-author:hover { background-color: #f1b51c !important; color: var(--brand-brown) !important; }
.top-info-grid { margin-top: 25px !important; margin-bottom: 25px !important; display: block !important; padding: 0 !important; }
.btn-more { background-color: #f1b51c !important; color: var(--brand-brown) !important; font-weight: 900 !important; text-transform: uppercase !important; padding: 12px 24px !important; border-radius: 4px !important; display: inline-block !important; transition: all 0.3s ease !important; border: none !important; }
.btn-more:hover { background-color: var(--brand-brown) !important; color: #f1b51c !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; }

/* ==========================================================================
   20. GLOBAL BLOG & CONTENT ENFORCER
   ========================================================================= */

.entry-content, .post-content, .article-content { color: #333333 !important; font-size: 1.15rem !important; line-height: 1.8 !important; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6,
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { 
    color: var(--brand-brown) !important; 
    font-family: 'Rubik-local', Arial, sans-serif !important; 
    font-weight: 900 !important; 
    text-transform: uppercase !important; 
    letter-spacing: -0.02em !important; 
    line-height: 1.1 !important; 
    margin-top: 40px !important; 
    margin-bottom: 20px !important; text-wrap: balance !important; 
    display: block !important; }
.entry-content p, .post-content p, .entry-content li, .post-content li { 
    font-size: 1.15rem !important; 
    line-height: 1.8 !important; 
    margin-bottom: 20px !important; }
.entry-content strong, .post-content strong, .entry-content b, .post-content b { 
    color: var(--brand-brown) !important; 
    font-weight: 700 !important; }
.entry-content blockquote, .post-content blockquote { 
    border-left: 5px solid #f36c24 !important; 
    background-color: #fafafa !important; 
    padding: 30px !important; 
    font-style: italic !important; 
    font-size: 1.3rem !important; 
    color: var(--brand-brown) !important; 
    margin: 40px 0 !important; }
    
    /* ==========================================================================
   21. TRUST STRIP (TWEMOJI OPTIMIZED)
   ========================================================================= */
.trust-strip { background-color: rgba(243, 108, 36, 0.15) !important; border-radius: 16px !important; padding: 8px 15px !important; margin: 5px 0 !important; }
.trust-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 30px !important; }
.trust-item { display: flex !important; align-items: center !important; gap: 12px !important; }

/* Wrapper stripped down to just control alignment and spacing */
.trust-icon { width: 35px !important; height: 35px !important; flex: 0 0 35px !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 !important; }

.trust-label { color: var(--brand-brown) !important; font-family: 'Rubik-local', Arial, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: 1.05rem !important; letter-spacing: 0.05em !important; }

/* Strip theme paragraph margins that break vertical centering */
html body .trust-strip p,
html body .trust-item p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Twemoji Image Sizing */
html body .trust-icon img.twemoji-icon {
    width: 35px !important;
    height: 35px !important;
    display: block !important;
    object-fit: contain !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    /* 1. Add generous breathing room to the container */
    html body .trust-strip { 
        padding: 35px 20px !important; 
    }

    /* 2. The Magic Trick: Shrink the wrapper tight, align items left inside it, then center the wrapper */
    html body .trust-grid { 
        flex-direction: column !important; 
        align-items: flex-start !important; /* Keeps the internal left-alignment */
        width: max-content !important; /* Stops it from stretching to the edges */
        max-width: 100% !important; /* Safety catch for very small phones */
        margin: 0 auto !important; /* Centers the whole block perfectly */
        gap: 20px !important; /* Slightly more vertical breathing room */
    }
    
    /* 3. Strip the 100% width so they hug their content naturally */
    html body .trust-item { 
        width: auto !important; 
        justify-content: flex-start !important; 
    }
    
    /* 4. Keep text legible */
    html body .trust-label { 
        font-size: 1rem !important; 
    }
}

/* ==========================================================================
   22. HOMEPAGE BLOG GRID: EDITORIAL REFINEMENT
   ========================================================================== */

/* Target the header elements inside the post grid layouts */
html body .post-layout .entry-title,
html body .post-grid-v2 .entry-title {
    font-size: clamp(1.2rem, 2vw, 1.45rem) !important; /* Scaled down from 22px/26px */
    font-weight: 700 !important; /* Shrunk from 900 down to a clean medium-bold */
    text-transform: none !important; /* Drops the ALL CAPS shouty behavior completely */
    letter-spacing: -0.01em !important; /* Loosens up the ultra-tight header spacing */
    line-height: 1.3 !important; /* Adds natural reading breathing room */
    margin: 0 0 10px 0 !important;
}

/* Force the text anchor link into your primary brand brown */
html body .post-layout .entry-title a,
html body .post-grid-v2 .entry-title a {
    color: var(--brand-brown) !important;
    text-decoration: none !important;
    transition: none !important; /* Disables any color fade animations */
}

/* Hard-lock the hover state to kill the yellow/orange color shift entirely */
html body .post-layout .entry-title a:hover,
html body .post-grid-v2 .entry-title a:hover {
    color: var(--brand-brown) !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ==========================================================================
   23. SINGLE BLOG POST TYPOGRAPHY REPAIRS (KILL THE BLACK)
   ========================================================================== */

/* 1. Main Single Post Title (Screenshot 2026-06-28 at 16.21.51.jpg) */
html body .detail-post .entry-content-detail .entry-title,
html body .single-post .entry-title {
    color: var(--brand-brown) !important;
}

/* 2. Content Body Headings (Screenshot 2026-06-28 at 16.22.00.jpg) */
/* Catches headings inside standard layout builders and text containers within the article */
html body .detail-post h1, html body .detail-post h2, html body .detail-post h3, html body .detail-post h4,
html body .single-post h1, html body .single-post h2, html body .single-post h3, html body .single-post h4,
html body .entry-content h1, html body .entry-content h2, html body .entry-content h3, html body .entry-content h4 {
    color: var(--brand-brown) !important;
}

/* Optional: Subtle accent highlight logic for subheadings */
html body .detail-post h4,
html body .single-post h4,
html body .entry-content h4 {
    color: var(--brand-orange) !important; /* Uses orange for smaller breaks if preferred */
}

/* 3. Related Posts Bottom Header (Screenshot 2026-06-28 at 16.23.34.jpg) */
html body .related-posts .title,
html body .related-posts .title span {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
}

/* ==========================================================================
   24. SINGLE POST HEADER SCALE FIX (H1 Hierarchy Engine)
   ========================================================================== */

/* Target the main post title on the single reading view */
html body .detail-post .entry-content-detail h4.entry-title,
html body .single-post .entry-title {
    font-size: clamp(3.75rem, 7.8vw, 6rem) !important; /* Scaled up 1.5x */
    font-weight: 900 !important; 
    line-height: 1.05 !important; 
    margin-bottom: 25px !important; 
    letter-spacing: -0.03em !important;
}

/* ==========================================================================
   25. BLOG ARTICLE BRAND ROW CORNER REPAIR
   ========================================================================== */

/* Safely contain brand rows inside single post columns to prevent corner clipping */
html body .single-post .entry-content .vc_row[class*="brand-row-"],
html body .single-post .post-content .vc_row[class*="brand-row-"],
html body .detail-post .entry-content-detail .vc_row[class*="brand-row-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; /* Forces the background color to cleanly respect the 32px border radius */
    box-sizing: border-box !important;
}


/* ==========================================================================
   WPBakery Brand Container Classes (WITH EXPANDED BOTTOM MARGIN)
   ========================================================================== */
[class*="brand-row-"] { border-radius: 32px !important; padding: 30px !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; min-height: 200px; margin-bottom: 30px !important; }
.brand-row-orange { background-color: var(--brand-orange) !important; }
.brand-row-brown { background-color: var(--brand-brown) !important; }
.brand-row-yellow { background-color: var(--brand-yellow) !important; }
.brand-row-orange-tint { background-color: var(--brand-orange-tint) !important; }
.brand-row-brown-tint { background-color: var(--brand-brown-tint) !important; }
.brand-row-yellow-tint { background-color: var(--brand-yellow-tint) !important; }

@media (max-width: 768px) {
    [class*="brand-row-"] { padding: 20px !important; min-height: auto !important; margin-bottom: 30px !important; }
}

/* ==========================================================================
   STANDARDIZED BRAND ROWS (WPBakery Utility Classes)
   ========================================================================== */

/* --- 1. MASTER LAYOUT ENGINE (Padding & Centering) --- */
html body .vc_row[class*="brand-row-"] {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    margin-top: 25px !important; /* FIXED: Symmetrical top margin */
    margin-bottom: 25px !important;
    border-radius: 32px !important; 
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important; 
}

/* --- OVERRIDE: Flush Media Rows (For Sliders inside Brand Boxes) --- */
html body .vc_row[class*="brand-row-"].brand-row-flush {
    padding: 0px !important;
    overflow: hidden !important; 
}

/* Strip the theme's forced 20px padding from any text blocks/columns inside the flush row */
html body .brand-row-flush .wpb_text_column,
html body .brand-row-flush .wpb_content_element,
html body .brand-row-flush .vc_column-inner,
html body .brand-row-flush .wpb_wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0px !important;
}

/* Mobile Spacing Scale-Down */
@media (max-width: 768px) {
    html body .vc_row[class*="brand-row-"] {
        /* TOP | RIGHT | BOTTOM | LEFT */
        padding: 30px 20px 45px 20px !important; 
        margin-top: 15px !important; 
        margin-bottom: 25px !important;
        border-radius: 15px !important;
    }
}

/* --- OVERRIDE: Flush Media Rows (For Sliders inside Brand Boxes) --- */
html body .vc_row[class*="brand-row-"].brand-row-flush {
    padding: 0px !important;
    overflow: hidden !important; /* Forces the rounded corners to chop off the square slider image */
}

/* --- OVERRIDE: Firewall RevSlider Elements from Theme Bleed --- */
html body .brand-row-flush rs-module h1,
html body .brand-row-flush rs-module h2,
html body .brand-row-flush rs-module h3,
html body .brand-row-flush rs-module p,
html body .brand-row-flush rs-module span,
html body .brand-row-flush rs-module img,
html body .brand-row-flush rs-layer {
    margin: 0px !important;
    padding: 0px !important;
    border: none !important;
    box-sizing: border-box !important;
}

/* Ensure the theme doesn't squash the image proportions */
html body .brand-row-flush rs-module img {
    max-width: none !important;
    min-width: 0 !important;
}

/* --- 2. BACKGROUND COLORS --- */
.brand-row-orange { background-color: var(--brand-orange) !important; }
.brand-row-orange-tint { background-color: var(--brand-orange-tint) !important; }
.brand-row-brown { background-color: var(--brand-brown) !important; }
.brand-row-brown-tint { background-color: var(--brand-brown-tint) !important; }
.brand-row-yellow { background-color: var(--brand-yellow) !important; }
.brand-row-yellow-tint { background-color: var(--brand-yellow-tint) !important; }

/* --- 3. AUTOMATED TYPOGRAPHY CONTRAST --- */


/* A. Dark Backgrounds (Brown & Orange) -> Force White Text */
html body .brand-row-brown h1, html body .brand-row-brown h2, html body .brand-row-brown h3, html body .brand-row-brown h4, html body .brand-row-brown p, html body .brand-row-brown span, html body .brand-row-brown strong, html body .brand-row-brown li {
    color: #ffffff !important;
}

/* B. Light/Tint Backgrounds & Yellow -> Force Brand Brown Text */
html body .brand-row-yellow h1, html body .brand-row-yellow h2, html body .brand-row-yellow h3, html body .brand-row-yellow p, html body .brand-row-yellow span, html body .brand-row-yellow strong,
html body .brand-row-orange-tint p, html body .brand-row-orange-tint span, html body .brand-row-orange-tint strong, html body .brand-row-orange-tint li,
html body .brand-row-brown-tint h1, html body .brand-row-brown-tint h2, html body .brand-row-brown-tint h3, html body .brand-row-brown-tint p, html body .brand-row-brown-tint span, html body .brand-row-brown-tint strong,
html body .brand-row-orange h1, html body .brand-row-orange h2, html body .brand-row-orange h3, html body .brand-row-orange h4, html body .brand-row-orange p, html body .brand-row-orange span, html body .brand-row-orange strong, html body .brand-row-orange li,
html body .brand-row-yellow-tint h1, html body .brand-row-yellow-tint h2, html body .brand-row-yellow-tint h3, html body .brand-row-yellow-tint p, html body .brand-row-yellow-tint span, html body .brand-row-yellow-tint strong {
    color: var(--brand-brown) !important;
}

/* --- FIX: INLINE LINKS IN BROWN BRAND ROWS & BOXES --- */
html body .brand-row-brown a,
html body .brand-box-brown a,
html body .brand-row-brown p a,
html body .brand-box-brown p a {
    color: var(--brand-yellow) !important;
    text-decoration-color: var(--brand-yellow) !important;
}

/* Hover State: Inverts to white so users know it's clickable */
html body .brand-row-brown a:hover,
html body .brand-box-brown a:hover,
html body .brand-row-brown p a:hover,
html body .brand-box-brown p a:hover {
    color: #ffffff !important;
    text-decoration-color: #ffffff !important;
    background-color: transparent !important;
}


/* --- 4. BRAND ACCENT EXCEPTIONS --- */
/* Orange Tint -> H1/H2 get Brand Orange */
html body .brand-row-orange-tint h1, html body .brand-row-orange-tint h2, html body .brand-row-orange-tint h3 { 
    color: var(--brand-orange) !important; 
}

/* Brand Brown -> H1 gets Brand Yellow */
html body .brand-row-brown h1, html body .brand-row-brown h1 span, html body .brand-row-brown h1 strong {
    color: var(--brand-yellow) !important;
}

/* Protect native button text colours inside dark rows */
html body .brand-row-brown .vc_btn3 { color: var(--brand-brown) !important; }

/* ==========================================================================
   STANDARDIZED BRAND BOXES (WPBakery Native Grid Fix)
   ========================================================================== */

/* 1. Strip backgrounds and vertical padding from the Column scaffolding */
/* (We leave left/right padding alone so WPBakery's native "Column Gap" setting works) */
html body .wpb_column[class*="brand-box-"],
html body .vc_column_container[class*="brand-box-"] {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Move the Box Styling (Padding, Radius) to the WPBakery Inner Container */
html body .wpb_column[class*="brand-box-"] > .vc_column-inner,
html body .vc_column_container[class*="brand-box-"] > .vc_column-inner {
    border-radius: 16px !important;
    padding: 30px !important;
    overflow: hidden !important;
    height: 100% !important; /* Vital for WPBakery Equal Height rows */
}

/* Mobile Padding Scale-down */
@media (max-width: 768px) {
    html body .wpb_column[class*="brand-box-"] > .vc_column-inner,
    html body .vc_column_container[class*="brand-box-"] > .vc_column-inner {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

/* 3. Map Background Colors to the Inner Container instead of the Scaffold */
html body .wpb_column.brand-box-orange > .vc_column-inner,
html body .vc_column_container.brand-box-orange > .vc_column-inner { background-color: var(--brand-orange) !important; }

html body .wpb_column.brand-box-orange-tint > .vc_column-inner,
html body .vc_column_container.brand-box-orange-tint > .vc_column-inner { background-color: var(--brand-orange-tint) !important; }

html body .wpb_column.brand-box-brown > .vc_column-inner,
html body .vc_column_container.brand-box-brown > .vc_column-inner { background-color: var(--brand-brown) !important; }

html body .wpb_column.brand-box-brown-tint > .vc_column-inner,
html body .vc_column_container.brand-box-brown-tint > .vc_column-inner { background-color: var(--brand-brown-tint) !important; }

html body .wpb_column.brand-box-yellow > .vc_column-inner,
html body .vc_column_container.brand-box-yellow > .vc_column-inner { background-color: var(--brand-yellow) !important; }

html body .wpb_column.brand-box-yellow-tint > .vc_column-inner,
html body .vc_column_container.brand-box-yellow-tint > .vc_column-inner { background-color: var(--brand-yellow-tint) !important; }

html body .wpb_column.brand-box-white > .vc_column-inner,
html body .vc_column_container.brand-box-white > .vc_column-inner { background-color: #ffffff !important; }

/* 4. Text Contrast Locking (Unchanged) */
/* Dark Boxes -> White Text */
html body .brand-box-brown *, html body .brand-box-orange * {
    color: #ffffff !important;
}

/* Light Boxes -> Brand Brown Text */
html body .brand-box-yellow *, html body .brand-box-orange-tint *, html body .brand-box-brown-tint *, html body .brand-box-yellow-tint * {
    color: var(--brand-brown) !important;
}

/* Box Accents */
html body .brand-box-brown h1, html body .brand-box-brown h2, html body .brand-box-brown h3 { color: var(--brand-yellow) !important; }
html body .brand-box-orange-tint h1, html body .brand-box-orange-tint h2, html body .brand-box-orange-tint h3 { color: var(--brand-orange) !important; }

/* Protect Native Buttons inside dark boxes */
html body .brand-box-brown .vc_btn3, html body .brand-box-orange .vc_btn3 { color: var(--brand-brown) !important; }

/* --- 5. Content Alignment (Opt-In Centering) --- */
html body .wpb_column.brand-box-center > .vc_column-inner,
html body .wpb_column.brand-box-center > .vc_column-inner > .wpb_wrapper,
html body .vc_column_container.brand-box-center > .vc_column-inner,
html body .vc_column_container.brand-box-center > .vc_column-inner > .wpb_wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;     
    text-align: center !important;      
    height: 100% !important;            
}

/* ==========================================================================
   23. CHECKOUT PAGE UI / UX OVERRIDES
   ========================================================================== */

/* --- 1. HEADINGS & SPACING FIX --- */
/* Kills the massive gap under "Billing Details" and "Your Order" */
.woocommerce-checkout h3 {
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--brand-brown-tint) !important;
    display: block !important;
    width: 100% !important;
}

/* --- 2. THE FORM FIELDS (KILL THE GREEN) --- */
/* Smooths out the inputs and applies brand focus states */
.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
    border: 1px solid #cccccc !important;
    border-radius: 8px !important; /* Softens the harsh boxes */
    padding: 14px 18px !important;
    color: var(--brand-brown) !important;
    font-size: 1rem !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* The Focus State: Orange border + subtle glow instead of default green */
.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus {
    border-color: var(--brand-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(243, 108, 36, 0.15) !important;
}

/* Label Spacing */
.woocommerce-checkout .form-row label {
    color: var(--brand-brown) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* --- 3. WOOCOMMERCE NOTICES (COUPON & LOGIN) --- */
/* Replaces the sterile white boxes with your brand tints */
.woocommerce-checkout .woocommerce-info {
    background-color: var(--brand-orange-tint) !important;
    border-top: 3px solid var(--brand-orange) !important;
    color: var(--brand-brown) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
}
.woocommerce-checkout .woocommerce-info::before {
    color: var(--brand-orange) !important;
}

/* --- 4. ORDER SUMMARY TABLE REFINEMENT --- */
/* Gives the table breathing room and clean borders */
.woocommerce-checkout #order_review table.shop_table {
    border: 1px solid var(--brand-brown-tint) !important;
    border-radius: 12px !important;
    border-collapse: separate !important; /* Required for border-radius on tables */
    overflow: hidden !important;
    margin-bottom: 30px !important;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    padding: 18px 20px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    border-top: none !important;
}

/* Removes the last border so it doesn't double up with the table border */
.woocommerce-checkout #order_review table.shop_table tr:last-child td,
.woocommerce-checkout #order_review table.shop_table tr:last-child th {
    border-bottom: none !important;
}

/* Turn the billing and shipping wrappers into flex containers */
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* Force all standard form rows to 100% width to maintain their normal layout */
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* Target only the First and Last Name fields and snap them to 48% width */
html body.woocommerce-checkout #billing_first_name_field,
html body.woocommerce-checkout #billing_last_name_field,
html body.woocommerce-checkout #shipping_first_name_field,
html body.woocommerce-checkout #shipping_last_name_field {
    width: 48% !important;
    flex: 0 0 48% !important;
    clear: none !important; /* Overrides WooCommerce's native float clearing */
}

/* Completely hide the ghost container left behind by the removed order notes */
html body.woocommerce-checkout .woocommerce-additional-fields {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Crush the bottom margin on the shipping toggle to pull the order summary up */
html body .woocommerce-checkout #ship-to-different-address,
html body .woocommerce-checkout h3.form-row#ship-to-different-address {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Give the "Your Order" heading a precise top margin so it doesn't crash into the toggle */
html body.woocommerce-checkout h3#order_review_heading {
    margin-top: 25px !important; 
}

/* Town/City and Postcode Split (Billing and Shipping) */
html body.woocommerce-checkout #billing_city_field,
html body.woocommerce-checkout #shipping_city_field,
html body.woocommerce-checkout #billing_postcode_field,
html body.woocommerce-checkout #shipping_postcode_field {
    width: 48% !important;
    flex: 0 0 48% !important;
    clear: none !important;
}

/* Phone and Email Split (Billing Only) */
html body.woocommerce-checkout #billing_phone_field,
html body.woocommerce-checkout #billing_email_field {
    width: 48% !important;
    flex: 0 0 48% !important;
    clear: none !important;
}

/* Hide the hero banner purely on the order confirmation screen */
html body.woocommerce-order-received .custom-hero-banner {
    display: none !important;
}

/* ==========================================================================
   HARMONIZED TYPOGRAPHIC HIERARCHY (Order Received & Checkout)
   ========================================================================== */

/* 1. Tighten the top margin above the confirmation message */
html body.woocommerce-order-received .woocommerce-notice--success,
html body.woocommerce-order-received p.woocommerce-notice {
    margin: 0px 15px 30px 15px !important; /* Reduced top margin from 40px to 15px */
    font-size: 1.5rem !important;           /* Harmonized to a readable size */
    font-weight: 700 !important;            /* Use 700 for importance, not 800 */
    color: var(--brand-brown) !important;   /* Use brand brown for secondary confirmation text */
}

/* 2. Harmonize Headings (Order Details, Billing Address) */
html body.woocommerce-order-received h2.woocommerce-order-details__title,
html body.woocommerce-order-received .woocommerce-column__title {
    color: var(--brand-brown) !important;
    font-size: 1.3rem !important;           /* Reduced from 2rem to match hierarchy */
    font-weight: 900 !important;            /* Primary Heading Weight */
    text-transform: uppercase !important;
    margin: 20px 0 !important;
}

/* 3. Harmonize Labels (ORDER NUMBER, DATE, etc.) */
/* Apply this logic to all small labels across the checkout/thank you page */
html body.woocommerce-order-received ul.woocommerce-order-overview li {
    font-weight: 700 !important;            /* Importance weight */
    font-size: 0.75rem !important;          /* Consistent small size */
    text-transform: uppercase !important;
    color: var(--brand-brown) !important;
}

/* 4. Harmonize Values (The actual data: 7373, July 11, etc.) */
html body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    font-weight: 400 !important;            /* Secondary info weight */
    font-size: 0.95rem !important;
    color: var(--brand-brown) !important;
}

/* 5. Harmonize Billing Address data */
html body.woocommerce-order-received .woocommerce-customer-details address {
    font-size: 1rem !important;             /* Standardized body size */
    font-weight: 400 !important;            /* Standard body weight */
    line-height: 1.5 !important;
}

/* ==========================================================================
   ORDER RECEIVED PAGE: UI & TYPOGRAPHY HARMONISATION
   ========================================================================== */

/* 1. Global Typography Lock-in */
html body.woocommerce-order-received .woocommerce-order-details,
html body.woocommerce-order-received .woocommerce-customer-details {
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
}

/* 2. Order Details Table: Container */
html body.woocommerce-order-received table.woocommerce-table--order-details {
    background-color: var(--brand-yellow-tint) !important; /* Changed to Yellow Tint */
    border-radius: 12px !important;
    border: 1px solid var(--brand-brown-tint) !important;
    width: 100% !important;
    border-collapse: separate !important; 
    border-spacing: 0 !important;
    overflow: hidden !important; 
}

/* 3. Base Padding & Borders for all cells */
html body.woocommerce-order-received table.woocommerce-table--order-details th,
html body.woocommerce-order-received table.woocommerce-table--order-details td {
    padding: 20px !important;
    color: var(--brand-brown) !important;
    border-bottom: 1px solid var(--brand-brown-tint) !important;
    border-top: none !important;
    vertical-align: middle !important;
}

/* Remove bottom border from the very last row */
html body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
html body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none !important;
}

/* 4. Left Alignment (Product Column & Footer Labels) */
html body.woocommerce-order-received table.woocommerce-table--order-details thead th.product-name,
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name,
html body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
    text-align: left !important;
    width: 60% !important;
}

/* 5. Right Alignment (Total Column & Footer Values) */
html body.woocommerce-order-received table.woocommerce-table--order-details thead th.product-total,
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-total,
html body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
    text-align: right !important;
    width: 40% !important;
}

/* 6. Typography: Headers and Labels */
html body.woocommerce-order-received table.woocommerce-table--order-details thead th,
html body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
}

/* 7. Typography: Product Name & Links */
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name,
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name a {
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/* 8. Typography: Product Quantity Multiplier (x1) */
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name strong.product-quantity {
    font-weight: 800 !important;
    color: var(--brand-orange) !important;
    margin-left: 5px !important;
}

/* 9. Harmonize the Billing Address box with the table UI */
html body.woocommerce-order-received .woocommerce-customer-details address {
    background-color: var(--brand-orange-tint) !important; 
    border-radius: 12px !important;
    padding: 25px 20px !important;
    border: 1px solid var(--brand-brown-tint) !important;
    color: var(--brand-brown) !important;
    text-align: center !important;
    line-height: 1.8 !important;
    font-style: normal !important;
    font-size: 1.1rem !important;
    margin-bottom: 40px !important;
}


/* ==========================================================================
   CHECKOUT: NATURALIZE ORDER REVIEW COLUMNS (IMAGE 1 FIX)
   ========================================================================== */
/* Force the table to respect our 50% column rules */
html body.woocommerce-checkout #order_review table.shop_table {
    table-layout: fixed !important; 
    width: 100% !important;
}

/* Apply 50% width to BOTH the headers and the cells */
html body.woocommerce-checkout #order_review table.shop_table th.product-name,
html body.woocommerce-checkout #order_review table.shop_table td.product-name,
html body.woocommerce-checkout #order_review table.shop_table th.product-total,
html body.woocommerce-checkout #order_review table.shop_table td.product-total {
    width: 50% !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    padding-left: 15px !important; /* Restored breathing room */
    padding-right: 15px !important;
}

/* Ensure the Totals column text aligns right */
html body.woocommerce-checkout #order_review table.shop_table th.product-total,
html body.woocommerce-checkout #order_review table.shop_table td.product-total {
    text-align: right !important; 
}

/* ==========================================================================
   CART & CHECKOUT: X2 GRAND TOTAL FONT SIZE
   ========================================================================== */
html body .cart_totals .order-total td strong span.woocommerce-Price-amount.amount,
html body .cart_totals .order-total td data-title="Total" span.woocommerce-Price-amount.amount,
html body .woocommerce-cart table.shop_table tr.order-total td span.woocommerce-Price-amount.amount,
html body .woocommerce-checkout table.shop_table tr.order-total td span.woocommerce-Price-amount.amount {
    font-size: 1.6rem !important; /* Doubled size for massive impact */
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

/* ==========================================================================
   PRODUCT GRID: BRAND YELLOW BUTTONS
   ========================================================================== */
html body .product-block .groups-button a.button,
html body .product-block .add-cart a.button {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 12px 10px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
}

/* Elegant brand inversion on hover */
html body .product-block .groups-button a.button:hover,
html body .product-block .add-cart a.button:hover {
    background-color: var(--brand-brown) !important;
    color: var(--brand-yellow) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   PAGINATION: BRAND COLOR OVERRIDE
   ========================================================================== */
/* Standardize the row */
html body .apus-pagination .page-numbers {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: 30px !important;
}

html body .apus-pagination .page-numbers li {
    margin: 0 !important;
}

/* Default state: Transparent with Brand Brown border and text */
html body .apus-pagination .page-numbers li a,
html body .apus-pagination .page-numbers li span {
    border: 2px solid var(--brand-brown) !important;
    background-color: transparent !important;
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    border-radius: 4px !important;
}

/* Active/Hover state: Solid Brand Brown with Brand Yellow text */
html body .apus-pagination .page-numbers li span.current,
html body .apus-pagination .page-numbers li a:hover {
    background-color: var(--brand-brown) !important;
    color: var(--brand-yellow) !important;
    border-color: var(--brand-brown) !important;
}

/* ==========================================================================
   24. SINGLE PRODUCT PAGE CLEANUP
   ========================================================================== */

/* Gives breathing room between product image and summary descriptions */
.single-product div.product .summary {
    padding-left: 30px !important;
}

/* Style the "Add to Basket" button to match your bold brand identity */
.single-product div.product .single_add_to_cart_button {
    background-color: var(--brand-orange) !important;
    color: #ffffff !important;
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 16px 30px !important;
    border-radius: 8px !important;
    transition: background-color 0.3s ease !important;
    border: none !important;
}

.single-product div.product .single_add_to_cart_button:hover {
    background-color: var(--brand-brown) !important; /* Elegant shift on hover */
}

/* Clean up quantity input selector boxes */
.woocommerce .quantity input.qty {
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    color: var(--brand-brown) !important;
}

/* Style the product tabs section (Description, Additional Info) safely */
.woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--brand-brown-tint) !important;
    padding-left: 0 !important;
    margin-bottom: 20px !important;
}

.woocommerce-tabs ul.tabs li a {
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #888888 !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--brand-brown) !important;
}

/* --- OVERRIDE: Kossy Theme Custom Product Tabs --- */
html body .tabs-v1 .nav-tabs {
    border-bottom: 2px solid var(--brand-brown-tint) !important;
    margin-bottom: 30px !important;
    display: flex !important;
    gap: 30px !important; 
}

html body .tabs-v1 .nav-tabs li a {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 10px 0 !important;
    display: inline-block !important;
    transition: color 0.3s ease !important;
}

html body .tabs-v1 .nav-tabs li.active a,
html body .tabs-v1 .nav-tabs li a:hover {
    color: var(--brand-orange) !important;
    background: transparent !important;
}


/* ==========================================================================
   25. MASTER CART PAGE STYLING & GRID LAYOUT (TRUE SECTION ISOLATION)
   ========================================================================== */
@media (min-width: 992px) {
    /* Force full-width desktop environment */
    html body.woocommerce-cart #main-content.col-md-9,
    html body.woocommerce-cart .main-page {
        width: 100% !important;
        float: none !important;
        max-width: 100% !important;
    }

    /* Set up a relative master container grid frame to anchor child rows */
    .woocommerce-cart .woocommerce {
        max-width: 1240px !important;
        margin: 0 auto 60px auto !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-wrap: wrap !important; /* Permits cross-sells to drop to a fresh line row */
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    /* Force the notices/messages to claim a full width top block */
    .woocommerce-cart .woocommerce-notices-wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Left Side Column: Form Table Matrix */
    .woocommerce-cart .woocommerce-cart-form {
        width: 65% !important;
        flex: 0 0 65% !important;
        margin-bottom: 30px !important;
    }

    /* Right Side Sidebar Column: Basket Totals Card Only */
    .woocommerce-cart .cart-collaterals {
        width: 31% !important;
        flex: 0 0 31% !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
    }

    /* Force Basket Totals box to span full sidebar column space width */
    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important;
    }
}
    
/* ==========================================================================
   UPDATED: CART ACTIONS BAR (Coupon & Update Basket)
   ========================================================================== */

html body .woocommerce-cart table.cart td.actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Pushes the buttons down to align with the checkout button */
    padding: 40px 15px 15px 15px !important; 
    gap: 15px !important;
}

/* Container holding text input and apply button */
html body .woocommerce-cart table.cart td.actions .coupon {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    flex-grow: 1 !important;
    margin: 0 !important;
}

/* Input Field Constraints (Made taller and softer) */
html body .woocommerce-cart table.cart td.actions .coupon input#coupon_code {
    max-width: 180px !important;
    height: 50px !important; /* Increased for premium feel */
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    border: 1px solid #cccccc !important;
    font-size: 1rem !important;
    color: var(--brand-brown) !important;
}

/* Even Sizing for both Action Buttons */
html body .woocommerce-cart table.cart td.actions .coupon button.button,
html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
    display: inline-block !important;
    white-space: nowrap !important;
    height: 50px !important; /* Matched to input height */
    line-height: 50px !important; /* Centers text perfectly */
    padding: 0 24px !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background-color: var(--brand-yellow) !important;
    color: var(--brand-brown) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

html body .woocommerce-cart table.cart td.actions .coupon button.button:hover,
html body .woocommerce-cart table.cart td.actions > button[name="update_cart"]:hover {
    background-color: var(--brand-brown) !important;
    color: var(--brand-yellow) !important;
    transform: translateY(-2px) !important;
}

/* Ensure Update Basket acts as an equal element */
html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
    flex-shrink: 0 !important;
    width: auto !important;
}

/* ==========================================================================
   UPDATED: THE NUCLEAR CHECKOUT BUTTON
   ========================================================================== */

/* Broadened selector to catch the rogue theme classes (.btn-primary) */
html body .woocommerce-cart .wc-proceed-to-checkout a,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html body .woocommerce-cart .wc-proceed-to-checkout a.btn,
html body .woocommerce-cart a.alt.wc-forward {
    background-color: var(--brand-orange) !important; /* Primary Brand Highlight */
    color: #ffffff !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    padding: 18px 20px !important; /* Made taller to match left-side items */
    font-size: 1.15rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin-top: 40px !important; /* Pushes button down to align with actions bar */
}

html body .woocommerce-cart .wc-proceed-to-checkout a:hover,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
html body .woocommerce-cart .wc-proceed-to-checkout a.btn:hover,
html body .woocommerce-cart a.alt.wc-forward:hover {
    background-color: var(--brand-brown) !important; 
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}


/* ==========================================================================
   26. TYPOGRAPHY UTILITIES: COLUMN BALANCING
   ========================================================================== */

.editorial-grid-text {
    text-wrap: pretty !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
}

/* ==========================================================================
   26. ORDER CONFIRMATION / THANK YOU PAGE UI
   ========================================================================== */

/* --- 1. ORDER OVERVIEW BOX (The Receipt Header) --- */
/* Styles the top row (Order #, Date, Total) into a neat branded card */
ul.woocommerce-order-overview.order_details {
    background: var(--brand-yellow-tint) !important;
    border: 1px solid var(--brand-brown-tint) !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-bottom: 40px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

ul.woocommerce-order-overview.order_details li {
    border-right: 1px solid var(--brand-brown-tint) !important;
    padding-right: 20px !important;
    margin-right: 20px !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
    font-size: 0.85rem !important;
    color: #888888 !important;
}

/* Remove the border from the last item so it doesn't awkwardly hang */
ul.woocommerce-order-overview.order_details li:last-child {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

ul.woocommerce-order-overview.order_details li strong {
    display: block !important;
    font-size: 1.1rem !important;
    color: var(--brand-brown) !important;
    margin-top: 8px !important;
    font-weight: 700 !important;
}

/* --- 2. HEADINGS SPACING FIX --- */
/* Tames the massive "ORDER DETAILS" and "BILLING ADDRESS" headers */
.woocommerce-order h2 {
    margin-top: 40px !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--brand-brown-tint) !important;
    width: 100% !important;
}

/* --- 3. ORDER DETAILS TABLE --- */
/* Matches the table styling from the Cart and Checkout pages */
.woocommerce-order table.shop_table.order_details {
    border: 1px solid var(--brand-brown-tint) !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    overflow: hidden !important;
    margin-bottom: 40px !important;
}

.woocommerce-order table.shop_table.order_details th,
.woocommerce-order table.shop_table.order_details td {
    padding: 18px 20px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    border-top: none !important;
}

.woocommerce-order table.shop_table.order_details tr:last-child td,
.woocommerce-order table.shop_table.order_details tr:last-child th {
    border-bottom: none !important;
}

/* Makes the table headers (Product, Total) look sharp */
.woocommerce-order table.shop_table.order_details thead th {
    background-color: var(--brand-yellow-tint) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* --- 4. ADDRESS BLOCKS --- */
/* Cleans up the billing/shipping address formatting */
.woocommerce-order address {
    border: 1px solid var(--brand-brown-tint) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    background-color: #ffffff !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    color: var(--brand-brown) !important;
    margin-bottom: 40px !important;
}

/* ==========================================================================
   27. HIDE BLOG GRID EXCERPTS
   ========================================================================== */
html body .post-layout .content .excerpt,
html body .post-grid-v1 .content .excerpt {
    display: none !important;
}


/* ==========================================================================
   27. CHECKOUT & ORDER PAGE WRAPPERS (Safety Bounds)
   ========================================================================== */
.woocommerce-checkout .woocommerce,
.woocommerce-order {
    max-width: 900px !important;
    margin: 0 auto 60px auto !important;
    padding: 0 20px !important;
}

.woocommerce-checkout form.checkout {
    width: 100% !important;
}



html body .mnm_form button.clear_selections:hover {
    background-color: var(--brand-orange) !important; /* Flips to orange on hover */
    color: #ffffff !important;
}

/* ==========================================================================
   28. CART PAGE CROSS-SELL CAROUSEL FIX
   ========================================================================== */
html body.woocommerce-cart .cross-sells .slick-slide,
html body.woocommerce-cart .cross-sells .products-grid-product {
    min-width: 240px !important; /* Guarantees products have breathing room to display normally */
    width: 240px !important;
}

html body.woocommerce-cart .cross-sells .product-block h3.name a {
    text-align: center !important;
    white-space: normal !important; /* Allows long product titles to wrap naturally across lines */
}

/* ==========================================================================
   28. WOOCOMMERCE TABLE TOTALS HIERARCHY
   ========================================================================== */

/* --- Level 1: Product Line Item Totals (Lightest) --- */
/* Keeps individual item totals subtle so they don't compete with the totals */
.shop_table .cart_item .product-total .amount,
.shop_table .order_details .product-total .amount {
    font-weight: 400 !important;
    color: var(--brand-brown) !important;
    opacity: 0.85; /* Slightly softer brown */
}

/* --- Level 2: Subtotal & Shipping Rows (Medium) --- */
/* Groups the mid-tier math cleanly in regular weight brown */
.shop_table .cart-subtotal td .amount,
.shop_table .cart-subtotal th,
.shop_table .shipping td,
.shop_table .shipping th {
    font-weight: 400 !important;
    color: var(--brand-brown) !important;
    font-size: 1rem !important;
}

/* --- Level 3: Grand Total (The Hero Element) --- */
/* Forces maximum visual weight using a bold accent color to close the deal */
.shop_table .order-total th {
    font-weight: 700 !important;
    color: var(--brand-brown) !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
    vertical-align: middle !important;
}

.shop_table .order-total td,
.shop_table .order-total td .amount,
.shop_table .order-total td strong .amount {
    font-weight: 700 !important;
    /* Using a striking bold orange to command absolute priority */
    color: var(--brand-orange) !important; /* Replace with your specific brand-orange variable if you have one */
    font-size: 1.2rem !important;
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
}

/* Subtle separator line to give the Grand Total row its own space */
.shop_table tr.order-total {
    border-top: 2px solid var(--brand-brown-tint) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}


/* ==========================================================================
   29. CART TABLE HEADER BRAND ALIGNMENT 
   ========================================================================== */
html body .woocommerce-cart table.shop_table th {
    color: var(--brand-brown) !important; /* Switches default gray to premium brand brown */
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 700 !important; /* Thick brand profile weight */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 14px !important;
}

/* ==========================================================================
   29. PRODUCT TITLE TYPOGRAPHY (Cart & Checkout)
   ========================================================================== */

/* Tightens the line height for multi-line product names */
.shop_table .product-name,
.shop_table .product-name a {
    line-height: 1.2 !important;
    font-weight: 500 !important; 
    color: var(--brand-brown) !important;
    display: inline-block !important;
}

/* Ensures any product variations (like weight/size) don't get squished into the tight title */
.shop_table .product-name .wc-item-meta,
.shop_table .product-name .variation {
    margin-top: 8px !important;
    line-height: 1.4 !important; /* Keeps the meta data slightly looser for readability */
    font-size: 0.85rem !important;
}

/* Removes the default link underline on hover for a cleaner look */
.shop_table .product-name a:hover {
    text-decoration: none !important;
    opacity: 0.8 !important;
}

/* ==========================================================================
   30. MINI-CART / SLIDE-OUT CART TYPOGRAPHY
   ========================================================================== */

/* Tightens the multi-line product titles in the side cart */
.shopping_cart_content .cart_list h3.name a {
    line-height: 1.15 !important; /* Brings the wrapped lines much closer together */
    display: block !important; /* Forces the link to behave like a block for better spacing */
}

/* Reduces the massive gap between the product title and the price/quantity below it */
.shopping_cart_content .cart_list h3.name {
    margin-bottom: 4px !important; 
    margin-top: 0 !important;
}

/* Ensures the quantity and price sit neatly below the tightened title */
.shopping_cart_content .cart_list .quantity {
    display: block !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   31. MIX & MATCH PAGES TYPOGRAPHY & BUTTON REFINEMENTS
   ========================================================================== */

/* 1. Downscale child product titles to be smaller, light weight, and natural case */
html body .mnm_form table .woocommerce-loop-product__title,
html body .mnm_form .woocommerce-loop-product__title,
html body .mnm_form .products .product h4,
html body .mnm_form .products .product h3 {
    font-size: 1.05rem !important;   /* Scaled down neatly */
    font-weight: 400 !important;     /* True elegant 400 weight */
    text-transform: none !important;  /* Nukes all-caps to respect natural sentence case input */
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    color: var(--brand-brown) !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

/* 2. Plus/Minus Quantity adjustment targets for layout uniformity */
html body .mnm_form .quantity .plus,
html body .mnm_form .quantity .minus,
html body .mnm_form .quantity .qty_button {
    background-color: transparent !important;
    color: var(--brand-orange) !important;
    border: 1px solid var(--brand-orange) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
}
html body .mnm_form .quantity .plus:hover,
html body .mnm_form .quantity .minus:hover {
    background-color: var(--brand-orange) !important;
    color: #ffffff !important;
}

/* 3. Hard-lock the "CLEAR SELECTIONS" button strictly to premium Brand Brown */
html body .mnm_form button.mnm_reset,
html body .mnm_form .mnm_reset,
html body .mnm_form .button.mnm_reset {
    background-color: var(--brand-brown) !important; /* Dynamic variable lock */
    background: var(--brand-brown) !important;
    color: #ffffff !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 24px !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease !important;
}

/* Maintain clean brand contrast on hover configurations */
html body .mnm_form button.mnm_reset:hover,
html body .mnm_form .mnm_reset:hover {
    background-color: var(--brand-orange) !important; /* Shifts cleanly to signature orange on interaction */
    color: #ffffff !important;
    border: none !important;
}

/* ==========================================================================
   31b. MIX & MATCH TABLE UI REFINEMENTS (LINKS & QUANTITY BUTTONS)
   ========================================================================== */

/* 1. Nuke the yellow link color and force Brand Brown on product titles */
html body .mnm_form table .woocommerce-loop-product__title a,
html body .mnm_form table .product-details a {
    color: var(--brand-brown) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* Subtle orange hover state for the product links */
html body .mnm_form table .woocommerce-loop-product__title a:hover,
html body .mnm_form table .product-details a:hover {
    color: var(--brand-orange) !important;
}

/* 2. Box up and brand the Plus/Minus quantity buttons (Targeting specific theme classes) */
html body .mnm_form table .quantity .button.button--plus,
html body .mnm_form table .quantity .button.button--minus {
    background-color: transparent !important;
    color: var(--brand-orange) !important;
    border: 1px solid var(--brand-orange) !important;
    border-radius: 4px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Fill the button with orange on hover and override the theme's black hover state */
html body .mnm_form table .quantity .button.button--plus:hover,
html body .mnm_form table .quantity .button.button--minus:hover,
html body .mnm_form table .quantity .button.button--plus:focus,
html body .mnm_form table .quantity .button.button--minus:focus {
    background-color: var(--brand-orange) !important;
    color: #ffffff !important;
    border-color: var(--brand-orange) !important;
}

/* 3. Neaten the input box spacing between the buttons */
html body .mnm_form table .quantity input.qty {
    height: 32px !important;
    border-radius: 4px !important;
    border: 1px solid #e5e5e5 !important;
    margin: 0 8px !important; /* Adds breathing room between the box and the +/- */
    text-align: center !important;
}

/* 4. Ensure perfect vertical centering for everything in the row */
html body .mnm_form table.mnm_table tbody td {
    vertical-align: middle !important;
}

/* ==========================================================================
   32. CART GRID ENGINE & COORDINATED ACTION BUTTONS BAR
   ========================================================================== */
@media (min-width: 769px) {
    html body .woocommerce-cart table.woocommerce-cart-form__contents {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* Tighten table margins and padding metrics for elegant white space */
    html body .woocommerce-cart th.product-remove,
    html body .woocommerce-cart td.product-remove { width: 35px !important; text-align: center !important; }
    html body .woocommerce-cart th.product-thumbnail,
    html body .woocommerce-cart td.product-thumbnail { width: 80px !important; text-align: center !important; }
    html body .woocommerce-cart th.product-name,
    html body .woocommerce-cart td.product-name { width: auto !important; text-align: left !important; }
    html body .woocommerce-cart th.product-price,
    html body .woocommerce-cart td.product-price,
    html body .woocommerce-cart th.product-quantity,
    html body .woocommerce-cart td.product-quantity,
    html body .woocommerce-cart th.product-subtotal,
    html body .woocommerce-cart td.product-subtotal { width: 90px !important; text-align: center !important; }

    /* Elegant descaling of text typography layouts */
    html body .woocommerce-cart table.shop_table th { font-size: 11px !important; padding: 12px 6px !important; }
    .woocommerce-cart table.cart td.product-name a { font-size: 0.95rem !important; line-height: 1.25 !important; }
    .woocommerce-cart table.cart td.product-price .amount,
    .woocommerce-cart table.cart td.product-subtotal .amount,
    .woocommerce-cart .product-quantity input.qty { font-size: 0.9rem !important; }

    /* --- COUPLING SYSTEM ACTIONS BOTTOM ROW GRID --- */
    html body .woocommerce-cart table.cart td.actions {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 0 !important;
        border-top: 1px solid var(--brand-brown-tint) !important;
    }

    /* Input Field + Apply button aligned left */
    html body .woocommerce-cart table.cart td.actions .coupon {
        float: left !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: auto !important;
        margin: 0 !important;
    }

    html body .woocommerce-cart table.cart td.actions .coupon input#coupon_code {
        width: 150px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    /* Push Update Basket button to align cleanly on the right */
    html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
        float: right !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* Flatten out buttons alignment map */
    html body .woocommerce-cart table.cart td.actions .coupon button.button,
    html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 20px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        display: inline-block !important;
    }
}



/* ==========================================================================
   UI/UX REFINEMENTS: PRODUCT TABS & DESCRIPTION READING FLOW
   ========================================================================== */

/* 1. Nuke the rogue top border on the Kossy tabs-v1 container */
html body .woocommerce-tabs.tabs-v1,
html body .tabs-v1 {
    border-top: none !important;
    box-shadow: none !important;
}

/* 2. The Tab Bar: Re-engineer the Bootstrap UL */
html body .tabs-v1 .nav-tabs {
    border-top: none !important; 
    border-bottom: 3px solid var(--brand-orange-tint) !important; 
    margin-bottom: 40px !important; 
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important; 
    align-items: flex-end !important; 
    gap: 30px !important; 
}

/* 3. Pull the list item down so it physically overlaps the line */
html body .tabs-v1 .nav-tabs li {
    margin-bottom: -3px !important; 
    padding: 0 !important;
}

/* 4. Tab Links: Universal padding and invisible borders to stop jumping */
html body .tabs-v1 .nav-tabs li a {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
    background: transparent !important;
    
    /* Increased padding for a thicker strip, and a transparent border lock */
    padding: 0 0 18px 0 !important; 
    border-bottom: 3px solid transparent !important; 
    
    display: inline-block !important;
    transition: color 0.3s ease, border-color 0.3s ease !important; /* Smooth color fade */
}

/* 5. The Active/Hover Tab Anchor (Only alters color, zero size changes) */
html body .tabs-v1 .nav-tabs li.active a,
html body .tabs-v1 .nav-tabs li a:hover {
    color: var(--brand-orange) !important;
    border-bottom-color: var(--brand-orange) !important; /* Lights up the invisible border */
    background: transparent !important;
}

/* 6. Optimal Reading Line Length */
html body .woocommerce-tabs .tab-content {
    max-width: 850px !important; 
    margin: 0 auto !important; 
    border-top: none !important; 
}

html body .woocommerce-tabs .tab-content .panel {
    text-align: left !important;
    padding-top: 0 !important;
}

.wb_cptb_title { display: none; }

/* ==========================================================================
   33. CART ACTIONS BAR & HEADER LINE UX REPAIRS 
   ========================================================================== */

/* 1. Fix Broken Header Lines (Screenshot 2026-06-29 at 12.48.12.png) */
html body .woocommerce-cart table.shop_table thead,
html body .woocommerce-cart table.shop_table tr {
    border-bottom: 2px solid var(--brand-brown-tint) !important; /* Uniform underlying border line */
}

html body .woocommerce-cart table.shop_table th {
    border-bottom: none !important; /* Strip conflicting cell-level borders */
    vertical-align: middle !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* 2. Straighten Out Coupon Bar & Action Buttons (Screenshot 2026-06-29 at 12.48.16.png) */
html body .woocommerce-cart table.cart td.actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Force items to stay inline without stair-stepping */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    gap: 15px !important;
}

/* Container holding text input and apply button */
html body .woocommerce-cart table.cart td.actions .coupon {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    flex-grow: 1 !important; /* Let it scale fluidly */
    margin: 0 !important;
}

/* Input Field Constraints */
html body .woocommerce-cart table.cart td.actions .coupon input#coupon_code {
    max-width: 180px !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Even Sizing for both Action Buttons */
html body .woocommerce-cart table.cart td.actions .coupon button.button,
html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
    display: inline-block !important;
    white-space: nowrap !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Ensure Update Basket acts as an equal element */
html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
    flex-shrink: 0 !important;
    width: auto !important;
}


/* ==========================================================================
   35. PRODUCT GRID CARDS (Shadows, Centering & Spacing)
   ========================================================================== */

/* The Product Card Container */
.product-block {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    
    /* CHANGED: Reduced from 20px down to 12px to hug the content tighter */
    padding: 12px 10px 10px 10px !important; 
    
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important; /* Soft, 360-degree shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid transparent !important;
    height: 100% !important; /* Ensures all cards in a row are equal height */
}

/* Subtle lift effect on hover */
.product-block:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--brand-yellow-tint) !important;
}

/* Keep equal heights by pushing the ENTIRE text block down together */
.product-block .caption,
.product-block .metas {
    margin-top: auto !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* Center and Bold the Product Title */
.product-block h3.name,
.product-block h3.name a {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.3 !important;
    color: var(--brand-brown) !important;
    margin-bottom: 4px !important; /* Shrunk from 12px for tighter spacing */
}

/* Center the Info Wrapper (Price & VAT text) */
.product-block .left-info {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important; /* Kills the auto margin forcing title and price apart */
}

/* Enlarge and format the Price */
.product-block .left-info .price,
.product-block .left-info .price .woocommerce-Price-amount {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--brand-brown) !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* Keep the "(inc VAT)" text small and centered below the price */
.product-block .left-info .price-tax,
.product-block .left-info small.woocommerce-price-suffix {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #888888 !important;
    display: block !important;
}

/* ==========================================================================
   36. PRODUCT GRID REFINEMENTS (Inner Shadows & Price Color)
   ========================================================================== */

/* Remove the unwanted shadow/border from the product images themselves */
.product-block .image,
.product-block .image img,
.product-block .product-image img,
.product-block .product-thumbnail img {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Force the price to be extra bold and brand orange */
.product-block .left-info .price,
.product-block .left-info .price .woocommerce-Price-amount,
.product-block .left-info .price ins .woocommerce-Price-amount {
    color: var(--brand-orange) !important;
    font-weight: 800 !important; /* Maximum weight for impact */
    font-size: 1.4rem !important;
}

/* Ensure the 'regular price' (if an item is on sale) stays muted and crossed out */
.product-block .left-info .price del .woocommerce-Price-amount {
    color: #a0a0a0 !important;
    font-weight: 400 !important;
    font-size: 1.1rem !important;
}

/* ==========================================================================
   38. GLOBAL TYPOGRAPHY CATCH-ALL & WIDGET POLISH
   ========================================================================== */

/* --- A. Form Element Font Inheritance --- */
/* Forces all inputs, dropdowns, and textareas to use Rubik */
input, button, select, textarea, .form-control {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    color: var(--brand-brown) !important;
}

/* --- B. Global Widget Typography (Footer & Sidebars) --- */
/* Standardizes all widget titles */
.widget-title, .widget .title {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: var(--brand-brown) !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
}

/* Standardizes all widget links (Categories, Recent Posts, etc.) */
.widget ul li a, .widget_nav_menu ul li a {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.widget ul li a:hover, .widget_nav_menu ul li a:hover {
    color: var(--brand-orange) !important; /* Brand Orange on hover */
    text-decoration: none !important;
}

/* --- C. Blog & Post Metadata --- */
/* Styles the Date, Author, and Tags under a blog post title */
.entry-meta, .entry-meta a, .post-meta, .post-meta a {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 0.9rem !important;
    color: #888888 !important; /* Muted grey so it doesn't fight the title */
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.entry-meta a:hover, .post-meta a:hover {
    color: var(--brand-orange) !important;
}

/* --- D. Bootstrap 3 Utility Color Overrides --- */
/* Hijacks Bootstrap's default colors (like blue) and maps them to Let's Braai */
.text-primary { color: var(--brand-orange) !important; }
.bg-primary { background-color: var(--brand-orange) !important; }

/* Ensures muted text uses the Rubik font and a warm grey */
.text-muted, small, .small {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    color: #888888 !important;
}

/* Ensures Bootstrap blockquotes use your brown */
blockquote, .blockquote {
    border-left: 5px solid var(--brand-orange) !important;
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-style: italic !important;
}

/* Hide Google reCAPTCHA v3 badge globally */
.grecaptcha-badge { 
    visibility: hidden !important; 
    opacity: 0 !important; 
}

/* ==========================================================================
   40. CONTACT PAGE HANDWRITING SIGN-OFF
   ========================================================================== */

html body span.signature-text {
    font-family: 'La Belle Aurore', cursive !important;
    font-size: 3.5rem !important;      
    color: var(--brand-brown) !important; 
    text-transform: none !important; 
    letter-spacing: -0.5px !important;    
    line-height: 1.2 !important;
    display: inline-block;
    margin-top: 10px;
}

/* ==========================================================================
   41. COOKIE BANNER BUTTON FIX (CookieYes)
   ========================================================================== */

/* Accept Button - White text, Brand Orange background */
html body .cky-notice-btn-wrapper button.cky-btn-accept {
    color: #ffffff !important;
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

html body .cky-notice-btn-wrapper button.cky-btn-accept:hover {
    background-color: var(--brand-brown) !important;
    border-color: var(--brand-brown) !important;
    color: #ffffff !important;
}

/* Reject Button - Brand Brown text to stay visible on white backgrounds */
html body .cky-notice-btn-wrapper button.cky-btn-reject {
    color: var(--brand-brown) !important; 
    background-color: transparent !important;
    border-color: var(--brand-brown) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

html body .cky-notice-btn-wrapper button.cky-btn-reject:hover {
    background-color: var(--brand-brown-tint) !important;
    color: var(--brand-brown) !important;
}

/* ==========================================================================
   42. CUSTOM WHIMSICAL 404 PAGE
   ========================================================================== */

.braai-404-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 40px 20px;
    text-align: center;
    background-color: #faf9f6; /* Soft, smoky off-white background */
    border-radius: 8px;
}

.braai-404-title {
    font-size: 3rem;
    color: var(--brand-brown, #5c3a21); 
    margin-bottom: 20px;
    line-height: 1.2;
}

.braai-404-title em {
    font-style: italic;
    color: #d35050; /* Hot coal accent color for the pun */
}

.braai-404-intro {
    font-size: 1.25rem;
    color: var(--brand-brown, #5c3a21);
    margin-bottom: 20px;
}

.braai-404-body {
    font-size: 1.1rem;
    color: #4a4a4a;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Custom list styling with fire emojis instead of bullets */
.braai-404-list {
    list-style-type: none;
    padding: 0;
    margin: 20px auto 30px auto;
    max-width: 450px;
}

.braai-404-list li {
    font-size: 1.1rem;
    color: #4a4a4a;
    margin-bottom: 12px;
    position: relative;
    text-align: left;
    padding-left: 35px;
}

.braai-404-list li::before {
    content: "🔥";
    position: absolute;
    left: 0;
    top: 0;
}

/* Call to action buttons */
.braai-404-actions {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.braai-404-btn {
    background-color: var(--brand-brown, #5c3a21);
    color: #ffffff !important;
    padding: 14px 28px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
}

.braai-404-btn:hover {
    background-color: #432916;
    transform: translateY(-2px);
}

.braai-404-btn-outline {
    background-color: transparent;
    color: var(--brand-brown, #5c3a21) !important;
    border: 2px solid var(--brand-brown, #5c3a21);
}

.braai-404-btn-outline:hover {
    background-color: var(--brand-brown, #5c3a21);
    color: #ffffff !important;
}

/* ==========================================================================
   43. 404 PAGE KOSSY THEME OVERRIDES & FIXES
   ========================================================================== */

/* 1. Nuke the Kossy breadcrumb and page title ONLY on the 404 page */
.error404 #apus-breadcrumb,
.error404 .wrapper-breads,
.error404 .bread-title,
.error404 .breadcrumb-inner {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Hide the Kossy default 404 image, slogan, and theme button */
.error-404.not-found .container > img,
.error-404.not-found .slogan,
.error-404.not-found .return.text-center {
    display: none !important;
}

/* 3. Force the custom container to the top with a 40px margin */
.braai-404-container {
    margin: 40px auto 60px auto !important; 
}

/* 4. Correct the "WORS" accent color from red to the brand orange */
.braai-404-title em {
    font-style: italic !important;
    color: #f26522 !important; /* Adjusted to match the orange in your header/buttons */
}

/* ==========================================================================
   44. GLOBAL STICKY FOOTER FIX
   ========================================================================== */

/* 1. Turn the master wrapper into a full-height flex column */
#wrapper-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Forces the wrapper to be at least the height of the screen */
}

/* 2. Command the main content area to expand and eat the empty space */
#apus-main-content {
    flex-grow: 1; 
    flex-shrink: 0;
    flex-basis: auto;
}

/* 3. Ensure the footer stays intact at the bottom */
#apus-footer {
    flex-shrink: 0;
}

/* ==========================================================================
   BRAND ROW VISIBILITY REPAIR (Fixing Brown Text on Brown Background)
   ========================================================================== */
.brand-row-brown h1, .brand-row-brown h2, .brand-row-brown h3, .brand-row-brown h4, .brand-row-brown h5, .brand-row-brown h6,
.brand-row-brown p, .brand-row-brown span, .brand-row-brown div, .brand-row-brown strong, .brand-row-brown li, .brand-row-brown ul {
    color: #ffffff !important;
}

/* Ensure the main heading stays brand yellow */
.brand-row-brown h1, 
.brand-row-brown h1 span, 
.brand-row-brown h1 strong {
    color: var(--brand-yellow) !important;
}

/* Protect button text colours inside brown rows */
.brand-row-brown .vc_btn3 {
    color: var(--brand-brown) !important;
}


/* ==========================================================================
   UPSELLS & RELATED PRODUCTS UI (BRAND ROW HIGHLIGHT)
   ========================================================================== */

/* 1. Target the exact DOM classes for the Upsells wrapper */
html body div.upsells.widget.products {
    background-color: var(--brand-orange-tint) !important;
    border-radius: 32px !important;
    padding: 50px 40px !important; 
    margin-top: 60px !important;   
    margin-bottom: 60px !important; 
    box-sizing: border-box !important;
}

/* Mobile scaling for the Upsell Brand Row */
@media (max-width: 768px) {
    html body div.upsells.widget.products {
        padding: 30px 20px !important;
        border-radius: 20px !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
}

/* 2. Standardize & Center the Section Headers (Upsells & Related) */
html body div.upsells.widget.products h2.widget-title,
html body div.related.products.widget h2.widget-title,
html body div.related.products.widget h3.widget-title {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: clamp(2.2rem, 4vw, 3rem) !important; 
    text-align: center !important; 
    width: 100% !important; /* Forces the flexbox to let it center */
    letter-spacing: -0.02em !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important; 
    border: none !important;
    background: transparent !important;
}

/* --- MOBILE-ONLY FLUSH ENGINE --- */
@media (max-width: 768px) {
    html body .vc_row.flush-slider-row {
        position: relative !important;
        left: 50% !important; /* Centering anchor */
        margin-left: -50vw !important; /* Pulls it to the left */
        width: 100vw !important; /* Forces full width */
        max-width: 100vw !important;
        padding: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        min-height: 350px !important; 
        background-color: var(--brand-brown-tint) !important;
        overflow: hidden !important; /* Essential: chops off any overflow */
    }

    /* Target the slider specifically */
    html body .vc_row.flush-slider-row .wpb_revslider_element {
        width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* 2. DESKTOP RESET */
@media (min-width: 769px) {
    html body .vc_row.flush-slider-row {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}


/* ==========================================================================
   44. BRAND BOX ORANGE DOTTED UTILITY (WHITE INTERIOR)
   ========================================================================== */

/* 1. Target the WPBakery column inner container */
html body .wpb_column.brand-box-orange-dotted > .vc_column-inner,
html body .vc_column_container.brand-box-orange-dotted > .vc_column-inner {
    background-color: #ffffff !important;
    border: 3px dotted var(--brand-orange) !important; /* Bold brand orange dotted line */
    border-radius: 16px !important; /* Standard brand box radius layout */
    padding: 30px !important;
    overflow: hidden !important;
    height: 100% !important; /* Vital for equal-height grid rows */
    box-sizing: border-box !important;
}

/* 2. Text contrast locking inside this specific box */
html body .brand-box-orange-dotted h1,
html body .brand-box-orange-dotted h2,
html body .brand-box-orange-dotted h3,
html body .brand-box-orange-dotted h4,
html body .brand-box-orange-dotted h5,
html body .brand-box-orange-dotted h6,
html body .brand-box-orange-dotted p,
html body .brand-box-orange-dotted span,
html body .brand-box-orange-dotted li,
html body .brand-box-orange-dotted strong {
    color: var(--brand-brown) !important; /* Locked to brand brown for legibility on white background */
}

/* 3. Mobile responsive padding scale-down */
@media (max-width: 768px) {
    html body .wpb_column.brand-box-orange-dotted > .vc_column-inner,
    html body .vc_column_container.brand-box-orange-dotted > .vc_column-inner {
        padding: 20px !important;
        border-radius: 12px !important;
    }
}

/* ==========================================================================
   45. BRAND ROW ORANGE DOTTED UTILITY (WHITE INTERIOR)
   ========================================================================== */

/* 1. Target the master WPBakery row container */
html body .vc_row[class*="brand-row-orange-dotted"] {
    background-color: #ffffff !important;
    border: 3px dotted var(--brand-orange) !important; /* Thick brand orange dotted line */
    border-radius: 32px !important; /* Large structural brand row curve */
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* 2. Text contrast logic for elements sitting inside this row profile */
html body .brand-row-orange-dotted h1,
html body .brand-row-orange-dotted h2,
html body .brand-row-orange-dotted h3,
html body .brand-row-orange-dotted h4,
html body .brand-row-orange-dotted h5,
html body .brand-row-orange-dotted h6,
html body .brand-row-orange-dotted p,
html body .brand-row-orange-dotted span,
html body .brand-row-orange-dotted div,
html body .brand-row-orange-dotted strong,
html body .brand-row-orange-dotted li,
html body .brand-row-orange-dotted ul {
    color: var(--brand-brown) !important; /* Keeps typography high-contrast brown against the white background */
}

/* 3. Mobile scale-down adjustments to prevent edge clipping */
@media (max-width: 768px) {
    html body .vc_row[class*="brand-row-orange-dotted"] {
        padding: 30px 20px 45px 20px !important;
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        border-radius: 15px !important; /* Softens block corners cleanly for mobile screens */
    }
}

/* ==========================================================================
   45. CONTACT FORM 7 UI / UX OVERHAUL
   ========================================================================== */

/* --- 1. Form Container & Spacing --- */
.wpcf7-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto; /* Keeps the form cleanly centered in wide columns */
}

/* Kills the awkward bottom margin on CF7's auto-generated paragraph tags */
.wpcf7-form p {
    margin-bottom: 22px !important;
}

/* --- 2. Typography & Labels --- */
.wpcf7-form label {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* Optional text (like "Your message (optional)") */
.wpcf7-form label .wpcf7-form-control-wrap {
    display: block !important;
    margin-top: 5px !important;
}

/* --- 3. Inputs & Textareas (Fixing the 0-height squish) --- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    padding: 14px 18px !important; /* Thick padding for comfortable mobile tapping */
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out !important;
    height: auto !important; /* Overrides the theme's squishing effect */
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

/* Textarea specific height and resize control */
.wpcf7-form textarea {
    min-height: 160px !important;
    resize: vertical !important; /* Allows users to drag it taller, but not wider */
}

/* --- 4. High-Contrast Focus States (WCAG AA Compliant) --- */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--brand-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(243, 108, 36, 0.15) !important; /* Soft orange glow */
}

/* --- 5. The Consent Checkbox Alignment (UPDATED) --- */
/* Target the label wrapping the checkbox to force a perfect column lock */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Force the physical checkbox to stay fixed and prevent squishing */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 2px 0 0 0 !important; /* Tiny nudge down to align with the cap height of the text */
    accent-color: var(--brand-orange) !important;
    cursor: pointer !important;
}

/* Style the text block next to the checkbox */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-weight: 400 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: var(--brand-brown) !important;
    margin: 0 !important;
    display: block !important;
}

/* --- 8. ReCAPTCHA Disclaimer Styling --- */
.form-disclaimer {
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    color: var(--brand-brown) !important;
    opacity: 0.7 !important; /* Fades the text slightly so it recedes visually */
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
}

/* Fixes the default red/pink links to match your brand */
.form-disclaimer a {
    color: var(--brand-orange) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    transition: color 0.3s ease !important;
}

.form-disclaimer a:hover {
    color: var(--brand-brown) !important;
}

/* --- 6. The Submit Button --- */
.wpcf7-form input[type="submit"] {
    background-color: var(--brand-orange) !important;
    color: #ffffff !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 30px !important;
    font-size: 1.15rem !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    margin-top: 15px !important;
    -webkit-appearance: none !important; /* Fixes iOS Safari button rendering bugs */
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--brand-brown) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

/* --- 7. Validation & Success Messages --- */
.wpcf7 form .wpcf7-response-output {
    border-radius: 8px !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 700 !important;
    margin-top: 25px !important;
    padding: 18px !important;
    border-width: 2px !important;
}

/* Success Message */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450 !important; 
    background-color: #eaf7ea !important;
    color: #2b6a2f !important;
}

/* Error/Spam Messages */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    border-color: var(--brand-orange) !important;
    background-color: var(--brand-orange-tint) !important;
    color: var(--brand-brown) !important;
}

/* Individual Field Error Text */
.wpcf7-not-valid-tip {
    color: #d35050 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    display: block !important;
}

/* ==========================================================================
   46. DESKTOP OFFCANVAS MENU (MATCHING MOBILE UI)
   ========================================================================== */

/* --- 1. DESKTOP BURGER ICON (BOLD & WHITE) --- */
html body #apus-header .show-main-menu {
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* Thicken the thin Themify icon font using text-stroke and scaling */
html body #apus-header .show-main-menu i.ti-align-left {
    color: #ffffff !important;
    font-size: 26px !important; 
    font-weight: 900 !important;
    -webkit-text-stroke: 1px #ffffff !important; 
}

/* --- 2. REMOVE DARK OVERLAY --- */
/* Keeps the overlay functional for clicking to close, but makes it perfectly invisible */
html body .over-dark,
html body .over-dark.active {
    background: transparent !important;
    background-color: transparent !important;
}

/* --- 3. MASTER CONTAINER MATCHING MOBILE --- */
/* FIXED: Targeting the specific class string from the DOM, not an ID */
html body .apus-offcanvas.dark-menu-sidebar {
    background-color: var(--brand-orange-tint) !important;
}

html body .apus-offcanvas.dark-menu-sidebar .apus-offcanvas-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important; 
}

/* --- 4. CLOSE BUTTON (LOCKED AT TOP) --- */
html body .apus-offcanvas.dark-menu-sidebar .offcanvas-top,
html body .apus-offcanvas.dark-menu-sidebar .offcanvas-head {
    flex-shrink: 0 !important;
    background: var(--brand-orange) !important;
    background-color: var(--brand-orange) !important;
    border-bottom: none !important;
    padding: 20px !important;
}

html body .apus-offcanvas.dark-menu-sidebar .btn-toggle-canvas,
html body .apus-offcanvas.dark-menu-sidebar .close-sidebar-btn {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* --- 5. PRIMARY NAVIGATION LINKS (WHITE PILLS) --- */
html body .apus-offcanvas.dark-menu-sidebar nav.navbar-offcanvas {
    padding: 0 20px !important;
    margin: 25px 0 0 0 !important; 
    overflow-y: auto !important;
    flex-grow: 1 !important;
}

html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu {
    margin: 0 !important; 
    padding: 0 !important;
}

html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu > li {
    border-bottom: none !important;
    margin-bottom: 12px !important; 
    padding: 0 !important;
}

html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu > li > a {
    background-color: #ffffff !important;
    color: var(--brand-brown) !important;
    border-radius: 30px !important;
    padding: 14px 24px !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 1.25rem !important; 
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* --- 6. AUTO-EXPANDED SUB-MENUS --- */
/* Forces desktop dropdowns to act like inline mobile lists */
html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu li.has-submenu > ul.sub-menu {
    display: block !important; 
    padding-top: 15px !important; 
    padding-bottom: 15px !important; 
    padding-left: 24px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    background: transparent !important; 
    box-shadow: none !important;
    border: none !important;
    position: relative !important; 
    float: none !important;
    width: 100% !important;
}

html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu li.has-submenu > ul.sub-menu > li {
    margin-bottom: 2px !important; 
    border: none !important;
    padding: 0 !important;
}

html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu li.has-submenu > ul.sub-menu > li > a {
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 !important; 
    font-size: 1.15rem !important;
    color: var(--brand-brown) !important;
    text-transform: capitalize !important;
    font-weight: 500 !important;
}

/* Hides the dropdown carets since the menu is permanently expanded */
html body .apus-offcanvas.dark-menu-sidebar ul#main-mobile-menu li > .icon-toggle {
    display: none !important;
}

/* --- 7. NUKE DESKTOP OFFCANVAS CLUTTER (TOP & BOTTOM) --- */
html body .apus-offcanvas.dark-menu-sidebar .offcanvas-top,
html body .apus-offcanvas.dark-menu-sidebar .offcanvas-bottom {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- 8. ELEGANTLY CENTER THE MIDDLE NAV --- */
/* Forces the remaining middle wrapper to fill the screen and vertically center your pills */
html body .apus-offcanvas.dark-menu-sidebar .offcanvas-middle {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    justify-content: center !important; 
}

/* Removes the top margin we previously added so it centers mathematically perfectly */
html body .apus-offcanvas.dark-menu-sidebar nav.navbar-offcanvas {
    margin-top: 0 !important;
    flex-grow: 0 !important; /* Stops it from stretching unnecessarily */
}


/* ==========================================================================
   47. CUSTOM RESPONSIVE HERO BANNER (HOME PAGE)
   ========================================================================== */
.custom-hero-banner {
    position: relative;
    width: 100%;
    min-height: 600px; 
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center right; 
    background-repeat: no-repeat;
    padding: 60px 5%; 
    border-radius: 16px;
    overflow: hidden;
    /* DESKTOP BACKGROUND IMAGE */
    background-image: url('https://letsbraai.co.uk/wp-content/uploads/2026/06/Lets-Braai-banner-2026-4.webp');
}

.custom-hero-banner .hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(34, 30, 28, 0.85) 0%, rgba(34, 30, 28, 0) 75%);
    z-index: 1;
}

.custom-hero-banner .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 720px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Forces container to stretch */
}

.custom-hero-banner .hero-text-block {
    display: flex;
    flex-direction: column;
}

.custom-hero-banner .hero-headline {
    color: #ffffff !important;
    margin-bottom: 15px !important;
    text-shadow: 0px 4px 12px rgba(0,0,0,0.3);
    max-width: 600px;
}

.custom-hero-banner .highlight-orange { color: #f36c24 !important; }

.custom-hero-banner .hero-subheadline {
    color: #ffffff !important;
    font-size: 1.65rem !important; 
    line-height: 1.65 !important;
    margin-bottom: 40px !important; 
    font-weight: 700 !important;
    text-shadow: 0px 2px 8px rgba(0,0,0,0.4);
    max-width: 460px; 
}

.custom-hero-banner .hero-buttons-wrapper {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    align-items: center;
}

.custom-hero-banner .hero-buttons-wrapper .vc_btn3 {
    margin: 0 !important; 
    padding: 16px 24px !important;
    font-size: 1.15rem !important;
    border-radius: 8px !important; 
    white-space: nowrap !important;
}

/* ==========================================================================
   MOBILE OVERRIDES (TOP TEXT / BOTTOM BUTTONS)
   ========================================================================== */
@media (max-width: 768px) {
    .custom-hero-banner {
        min-height: 85svh; 
        /* Shaved bottom padding from 45px to 25px to lower the floor */
        padding: 20px 20px 25px 20px; 
        background-image: url('https://letsbraai.co.uk/wp-content/uploads/2026/06/Lets-Braai-banner-mobile-2026-3.webp');
        background-position: center;
    }

    .custom-hero-banner .hero-overlay {
        display: none !important; 
    }

    .custom-hero-banner .hero-content {
        justify-content: space-between !important; 
        align-items: center;
        text-align: center;
        height: 100%;
    }

    .custom-hero-banner .hero-text-block {
        align-items: center;
        margin-bottom: auto !important; 
    }

    .custom-hero-banner .hero-headline { 
        max-width: 100%; 
        font-size: 2.2rem !important; 
        line-height: 1.1 !important; 
    }
    
    .custom-hero-banner .hero-subheadline { 
        max-width: 100%; 
        font-size: 1.35rem !important; 
        margin-bottom: 0 !important;
    }
    
    .custom-hero-banner .hero-buttons-wrapper {
        width: 100%;
        justify-content: center;
        /* Tightened gap between buttons */
        gap: 8px; 
        margin-top: auto !important; 
        padding-top: 15px; 
    }
    
    .custom-hero-banner .hero-buttons-wrapper .vc_btn3 {
        width: 100% !important; 
        /* Slimmed button profile */
        padding: 10px 16px !important; 
        font-size: 1.05rem !important; 
    }
}

/* ==========================================================================
   47a. UTILITY CLASSES: RESPONSIVE VIDEO BACKGROUND ENGINE
   ========================================================================== */

.bg-video-wrapper {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit; 
}

.bg-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    pointer-events: none; 
}

.bg-video-desktop { display: block !important; }
.bg-video-mobile { display: none !important; }


/* ==========================================================================
   47b. DESIGN CLASSES: UNIQUE VIDEO BANNER CONTENT
   ========================================================================== */

/* Main Container */
.custom-hero-banner {
    position: relative; 
    width: 100%;
    min-height: 600px; 
    display: flex;
    flex-direction: column;
    padding: 60px 5%; 
    border-radius: 16px;
    background-color: #221e1c; 
}

/* 1. The Global Overlay (Desktop) */
.custom-hero-banner .vid-banner-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background: linear-gradient(to right, rgba(34, 30, 28, 0.85) 0%, rgba(34, 30, 28, 0) 75%) !important;
    z-index: 1;
    border-radius: inherit;
    display: block !important; 
}

/* Content Container */
.custom-hero-banner .vid-banner-content {
    position: relative;
    z-index: 2; 
    width: 100%;
    max-width: 720px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; 
}

/* Typography & Layout */
.custom-hero-banner .vid-banner-text-block { 
    display: flex; 
    flex-direction: column; 
}

.custom-hero-banner .vid-banner-headline {
    color: #ffffff !important;
    margin-bottom: 15px !important;
    text-shadow: 0px 8px 20px rgba(0,0,0,0.7);
    max-width: 600px;
}

.custom-hero-banner .vid-banner-highlight { 
    color: #f36c24 !important; 
}

.custom-hero-banner .vid-banner-subhead {
    color: #ffffff !important;
    font-size: 1.65rem !important; 
    line-height: 1.65 !important;
    margin-bottom: 40px !important; 
    font-weight: 700 !important;
    text-shadow: 0px 6px 12px rgba(0,0,0,0.7);
    max-width: 460px; 
}

/* Button Group Container */
.custom-hero-banner .vid-banner-btn-group {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    align-items: center;
}

/* ==========================================================================
   VIDEO BANNER BUTTONS (BROWN, YELLOW, ORANGE)
   ========================================================================== */

/* Base Structural Class */
.custom-hero-banner .vid-banner-btn {
    margin: 0 !important; 
    padding: 16px 24px !important;
    font-size: 1.15rem !important;
    border-radius: 8px !important; 
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    font-weight: 800 !important; 
    transition: all 0.3s ease !important;
    border: none !important;
}

/* THE BROWN BUTTON */
.custom-hero-banner .vid-banner-btn.vid-btn-brown {
    background-color: var(--brand-brown, #69322b) !important;
    color: #ffffff !important; 
}
.custom-hero-banner .vid-banner-btn.vid-btn-brown:hover {
    background-color: var(--brand-orange, #f36c24) !important;
    color: #ffffff !important;
}

/* THE YELLOW BUTTON */
.custom-hero-banner .vid-banner-btn.vid-btn-yellow {
    background-color: var(--brand-yellow, #f1b51c) !important;
    color: var(--brand-brown, #69322b) !important; 
}
.custom-hero-banner .vid-banner-btn.vid-btn-yellow:hover {
    background-color: var(--brand-brown, #69322b) !important;
    color: var(--brand-yellow, #f1b51c) !important;
}

/* THE ORANGE BUTTON */
.custom-hero-banner .vid-banner-btn.vid-btn-orange {
    background-color: var(--brand-orange, #f36c24) !important;
    color: var(--brand-brown, #69322b) !important;
}
.custom-hero-banner .vid-banner-btn.vid-btn-orange:hover {
    background-color: var(--brand-brown, #69322b) !important;
    color: var(--brand-orange, #f36c24) !important;
}

/* ==========================================================================
   MASTER MOBILE OVERRIDES (CONSOLIDATED)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Swap Video Displays */
    .bg-video-desktop { display: none !important; }
    .bg-video-mobile { display: block !important; }

    /* 2. Banner Height & Padding */
    .custom-hero-banner {
        min-height: 85svh; 
        padding: 20px 20px 25px 20px; 
    }
    
    /* 3. The Vignette Overlay */
    .custom-hero-banner .vid-banner-overlay { 
        background: linear-gradient(
            to bottom, 
            rgba(34, 30, 28, 0.90) 0%,   /* Dark ceiling for the headline */
            rgba(34, 30, 28, 0) 35%,     /* Fades to clear just below the text */
            rgba(34, 30, 28, 0) 65%,     /* Stays clear through the middle */
            rgba(34, 30, 28, 0.90) 100%  /* Dark floor for the buttons */
        ) !important; 
    }

    /* 4. Split Layout (Top Text / Bottom Buttons) */
    .custom-hero-banner .vid-banner-content {
        justify-content: space-between !important; 
        align-items: center;
        text-align: center;
        height: 100%;
    }

    /* 5. Pin Text to Top */
    .custom-hero-banner .vid-banner-text-block { 
        align-items: center;
        margin-bottom: auto !important; 
    }
    
    .custom-hero-banner .vid-banner-headline { 
        max-width: 100%; 
        font-size: 3rem !important; 
        line-height: 1.1 !important; 
    }
    .custom-hero-banner .vid-banner-subhead { 
        max-width: 100%; 
        font-size: 1.35rem !important; 
        margin-bottom: 0 !important; 
    }
    
    /* 6. Pin Buttons to Bottom */
    .custom-hero-banner .vid-banner-btn-group {
        width: 100%;
        justify-content: center;
        gap: 8px; 
        margin-top: auto !important; 
        padding-top: 15px; 
    }
    .custom-hero-banner .vid-banner-btn { 
        width: 100% !important; 
        padding: 10px 16px !important; 
        font-size: 1.05rem !important; 
    }
}

/* ==========================================================================
   48. NATIVE EMOJI ICON REPAIR (DIRECT DOM TARGETING)
   ========================================================================== */

/* 1. Global Override based on direct DOM path */
.summary.entry-summary .woocommerce-product-details__short-description img.emoji,
.summary.entry-summary .woocommerce-product-details__short-description img[src*="s.w.org/images/core/emoji"] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    display: inline-block !important; 
    vertical-align: text-bottom !important; 
    margin: 0 8px 4px 0 !important; 
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    clear: none !important;
    float: none !important;
}

/* 2. Strict Mobile Override (To ensure the text container doesn't break) */
@media (max-width: 768px) {
    .summary.entry-summary .woocommerce-product-details__short-description p {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   49. MOBILE OVERRIDES: PRODUCT TABS (SWIPEABLE SCROLL)
   ========================================================================== */
@media (max-width: 768px) {
    /* Transform the tab container into a swipeable carousel */
    html body .tabs-v1 .nav-tabs {
        justify-content: flex-start !important;       /* Aligns the first tab to the left edge */
        flex-wrap: nowrap !important;                 /* Forces tabs to stay on a single line */
        overflow-x: auto !important;                  /* Enables horizontal scrolling */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Enables buttery smooth momentum scrolling on iOS */
        gap: 20px !important;                         /* Tighter gap for small screens */
        padding-bottom: 2px !important;               /* Prevents the bottom border from clipping */
        width: 100% !important;
        
        /* Hide the native scrollbars for a clean app-like UI */
        -ms-overflow-style: none !important;          /* IE and Edge */
        scrollbar-width: none !important;             /* Firefox */
    }
    
    /* Hide scrollbar for Chrome, Safari, and iOS */
    html body .tabs-v1 .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* Shrink the tab text and absolutely prevent word wrapping */
    html body .tabs-v1 .nav-tabs li a {
        font-size: 1.15rem !important;                /* Scaled down from the massive 1.5rem desktop size */
        white-space: nowrap !important;               /* Forces words like "SPECIFICATIONS" to never break into two lines */
        padding: 0 0 12px 0 !important;               /* Tighter vertical padding */
    }
    
    /* Give the first tab a tiny nudge so it doesn't touch the absolute glass edge of the phone */
    html body .tabs-v1 .nav-tabs li:first-child {
        margin-left: 2px !important;
    }
    
    /* Give the last tab a right margin so the text doesn't hit the glass when fully scrolled */
    html body .tabs-v1 .nav-tabs li:last-child {
        padding-right: 20px !important;
    }
}

/* ==========================================================================
   50. UX CLEANUP: HIDE CROSS-SELL CAROUSEL FROM CART PAGE
   ========================================================================== */
html body.woocommerce-cart .cross-sells,
html body.woocommerce-cart div.cross-sells,
html body.woocommerce-cart .cart-collaterals .cross-sells {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* ==========================================================================
   51. CHECKOUT UI POLISH (SCREENSHOTS 13.37.25.JPG & 13.37.54.JPG)
   ========================================================================== */

/* 1. Remove the Coupon Notice Toggle Completely */
html body.woocommerce-checkout .woocommerce-form-coupon-toggle,
html body.woocommerce-checkout div.woocommerce-form-coupon-toggle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Fix Massive Font Size on "Ship to a different address?" Label */
html body .woocommerce-checkout #ship-to-different-address,
html body .woocommerce-checkout h3.form-row#ship-to-different-address,
html body .woocommerce-checkout #ship-to-different-address label.checkbox {
    font-size: 1.15rem !important; /* Drops it down to match a standard form label size */
    font-weight: 700 !important;   /* Keeps it clear and bold */
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;    /* Fixes the squished overlapping lines */
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}

/* Re-align the checkbox position inline next to the descaled text string */
html body .woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

html body .woocommerce-checkout #ship-to-different-address span {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    color: var(--brand-brown) !important;
}

/* ==========================================================================
   53. CART FLYOUT Z-INDEX & HEADER FIXES
   ========================================================================== */

/* 1. Force the cart flyout, wrapper, and overlay to sit ABOVE the sticky header */
html body .wrapper-top-cart,
html body .dropdown-menu-right,
html body .overlay-dropdown-menu-right {
    z-index: 999999 !important; /* Maximum layout priority */
}

/* 2. Nuke the theme's inline JS padding that pushes the cart down */
html body .dropdown-menu-right.active {
    padding-top: 40px !important; /* Overrides the inline 102px+ gap */
}

/* 3. Brand the "Your Cart" heading */
html body .widget_shopping_cart_heading h3,
html body .wrapper-top-cart .dropdown-menu-right .widget_shopping_cart_heading h3 {
    color: var(--brand-brown) !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
}

/* Close icon alignment fix if it gets pulled into the new padding space */
html body .wrapper-top-cart .close-cart {
    z-index: 9999999 !important;
}

/* ==========================================================================
   55. MOBILE CART UI/UX OVERHAUL (FIXING IMAGE_2.PNG)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Transform each cart item into a distinct, elevated card */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        background: #ffffff !important;
        border: 1px solid var(--brand-brown-tint) !important;
        border-radius: 16px !important;
        padding: 20px !important;
        margin-bottom: 25px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    }

    /* 2. Restore the missing product image */
    html body .woocommerce-cart table.cart td.product-thumbnail {
        display: block !important;
        text-align: center !important;
        border-bottom: 1px solid var(--brand-brown-tint) !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }
    html body .woocommerce-cart table.cart td.product-thumbnail img {
        max-width: 100px !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 0 auto !important;
    }

    /* 3. Re-engineer the "Remove" (X) button as a modern, tap-friendly corner icon */
    html body .woocommerce-cart table.cart td.product-remove {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        border: none !important;
        padding: 0 !important;
        display: block !important;
    }
    html body .woocommerce-cart table.cart td.product-remove a.remove {
        background: var(--brand-orange-tint) !important;
        color: var(--brand-orange) !important;
        border-radius: 50% !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* 4. Fix Data Rows: Force perfect left/right alignment */
    html body .woocommerce-cart table.cart td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        padding: 8px 0 !important;
        text-align: right !important; /* Pushes the values cleanly to the right */
        width: 100% !important;
    }

    /* 5. Fix the raw labels ("Product:", "Price:", etc.) to match Brand Brown */
    html body .woocommerce-cart table.cart td::before {
        content: attr(data-title) ": " !important;
        font-family: 'Rubik-local', Arial, sans-serif !important;
        font-weight: 700 !important;
        color: var(--brand-brown) !important;
        text-transform: uppercase !important;
        font-size: 0.85rem !important;
        float: none !important;
        margin: 0 !important;
        padding-right: 15px !important;
        text-align: left !important;
    }

    /* 6. Formatting the dynamic values specifically */
    html body .woocommerce-cart table.cart td.product-name a {
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-align: right !important;
        max-width: 60% !important; /* Prevents long names from squishing the label */
    }
    html body .woocommerce-cart table.cart td.product-price .amount,
    html body .woocommerce-cart table.cart td.product-subtotal .amount {
        font-size: 1.15rem !important;
    }

    /* 7. Stack the Coupon & Update Basket buttons for easy mobile tapping */
    html body .woocommerce-cart table.cart td.actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        padding: 20px 0 0 0 !important;
        border-top: 1px solid var(--brand-brown-tint) !important;
        margin-top: 15px !important;
    }
    html body .woocommerce-cart table.cart td.actions .coupon {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    html body .woocommerce-cart table.cart td.actions .coupon input#coupon_code {
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .woocommerce-cart table.cart td.actions .coupon button.button,
    html body .woocommerce-cart table.cart td.actions > button[name="update_cart"] {
        width: 100% !important;
        float: none !important;
    }
}

/* ==========================================================================
   56. WOOCOMMERCE CATEGORY HEADER: BRAND ORANGE TINT CONTAINER
   ========================================================================== */

/* 1. Direct DOM Path Targeting */
html body #apus-main-content #main-container .term-description {
    /* Switched to Orange Tint */
    background-color: var(--brand-orange-tint, #fbeae1) !important; 
    border-radius: 32px !important; 
    
    /* Generous breathing room mirroring standard brand rows */
    padding: 45px 40px !important; 
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 2. Text contrast for light tint background (Brand Brown) */
html body #apus-main-content #main-container .term-description *,
html body #apus-main-content #main-container .term-description p,
html body #apus-main-content #main-container .term-description span,
html body #apus-main-content #main-container .term-description strong {
    color: var(--brand-brown, #69322b) !important;
}

/* 3. Lock the H1 to match your Brand Typography Profile (Solid Orange Header) */
html body #apus-main-content #main-container .term-description h1 {
    color: var(--brand-orange, #f36c24) !important; /* Popping the headline in solid orange */
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
}

/* 4. Format the description text for optimal reading */
html body #apus-main-content #main-container .term-description p {
    margin-bottom: 15px !important; 
    font-size: 1.2rem !important;
    line-height: 1.65 !important;
    max-width: 900px !important; /* Keeps the reading line length ergonomically optimal */
}

/* Strips the bottom margin from the final paragraph to keep the box padding symmetrical */
html body #apus-main-content #main-container .term-description p:last-child {
    margin-bottom: 0 !important; 
}

/* ==========================================================================
   MOBILE SCALING FOR CATEGORY HEADERS
   ========================================================================== */
@media (max-width: 768px) {
    html body #apus-main-content #main-container .term-description {
        padding: 30px 20px !important;
        border-radius: 16px !important; 
        margin-bottom: 25px !important;
    }
    
    html body #apus-main-content #main-container .term-description h1 {
        font-size: 2.2rem !important; 
        margin-bottom: 15px !important;
    }
    
    html body #apus-main-content #main-container .term-description p {
        font-size: 1.1rem !important;
    }
}

/* ==========================================================================
   THE ABSOLUTE NUCLEAR CHECKOUT BUTTON (FORCED OVERRIDE)
   ========================================================================== */
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.btn.btn-primary.btn-block.alt.wc-forward,
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--brand-orange) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-weight: 900 !important;
    padding: 18px 20px !important; /* Made taller to match left-side items */
    font-size: 1.15rem !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    margin-top: 40px !important; /* Pushes button down to align with actions bar */
}

html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.btn.btn-primary.btn-block.alt.wc-forward:hover,
html body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--brand-brown) !important; 
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   1. DESKTOP CART & CHECKOUT TABLES (Natural Spacing & Proportions)
   ========================================================================== */
@media (min-width: 769px) {
    /* Auto-layout prevents text crushing */
    html body .woocommerce-cart table.shop_table,
    html body.woocommerce-checkout #order_review table.shop_table {
        table-layout: auto !important; 
        width: 100% !important;
        border-collapse: separate !important;
    }

    html body .woocommerce-cart table.shop_table th,
    html body .woocommerce-cart table.shop_table td,
    html body.woocommerce-checkout #order_review table.shop_table th,
    html body.woocommerce-checkout #order_review table.shop_table td {
        display: table-cell !important;
        padding: 15px 20px !important;
        vertical-align: middle !important;
    }

    /* Left Align Titles */
    html body .woocommerce-cart table.shop_table th.product-name,
    html body .woocommerce-cart table.shop_table td.product-name,
    html body.woocommerce-checkout #order_review table.shop_table th.product-name,
    html body.woocommerce-checkout #order_review table.shop_table td.product-name {
        text-align: left !important;
        white-space: normal !important;
        width: 65% !important;
    }

    /* Right Align Values */
    html body .woocommerce-cart table.shop_table th.product-price,
    html body .woocommerce-cart table.shop_table td.product-price,
    html body .woocommerce-cart table.shop_table th.product-quantity,
    html body .woocommerce-cart table.shop_table td.product-quantity,
    html body .woocommerce-cart table.shop_table th.product-subtotal,
    html body .woocommerce-cart table.shop_table td.product-subtotal,
    html body.woocommerce-checkout #order_review table.shop_table th.product-total,
    html body.woocommerce-checkout #order_review table.shop_table td.product-total {
        text-align: right !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   2. MOBILE CART & CHECKOUT FIXES (Anti-Squish Flexbox)
   ========================================================================== */
@media (max-width: 768px) {
    /* Convert collapsed tables into clean flex rows */
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }

    /* Reset cells to full width */
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item td,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
        border: none !important;
        text-align: right !important;
    }

    /* Force Titles Flush Left */
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-name,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding-bottom: 10px !important;
    }
    
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name a {
        text-align: left !important;
        font-size: 1.1rem !important;
    }

    /* Ensure Quantity and Price align right */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity .quantity,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price .amount,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .amount,
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-total .amount {
        margin: 0 0 0 auto !important;
        text-align: right !important;
    }

/* ==========================================================================
   4. MOBILE ONLY: PERFECT ACTION BUTTON STACK
   ========================================================================== */
@media (max-width: 768px) {
    html body.woocommerce-cart table.cart td.actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    html body.woocommerce-cart table.cart td.actions .coupon {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    /* Full width text input */
    html body.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
    }

    /* Full width Apply Coupon Button (Kills the theme's float: right) */
    html body.woocommerce-cart table.cart td.actions .coupon button.button,
    html body.woocommerce-cart table.cart td.actions .coupon input.button,
    html body.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important; 
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    /* Full Width Update Basket Button */
    html body.woocommerce-cart table.cart td.actions > button[name="update_cart"],
    html body.woocommerce-cart table.cart td.actions > input[name="update_cart"] {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}
}

/* ==========================================================================
   3. PROMINENT GRAND TOTAL FONT SIZE
   ========================================================================== */
/* Isolate the exact number amount to prevent VAT text from scaling */
html body .cart_totals tr.order-total td > strong > .woocommerce-Price-amount,
html body .cart_totals tr.order-total td > strong > .woocommerce-Price-amount bdi,
html body.woocommerce-checkout #order_review tr.order-total td > strong > .woocommerce-Price-amount,
html body.woocommerce-checkout #order_review tr.order-total td > strong > .woocommerce-Price-amount bdi {
    font-size: 1.4rem !important; 
    font-weight: 900 !important;
    color: var(--brand-orange) !important;
    line-height: 1 !important;
}

/* Keep the VAT inclusion text small */
html body .cart_totals tr.order-total td small.includes_tax,
html body .cart_totals tr.order-total td small.includes_tax .amount,
html body .cart_totals tr.order-total td small.includes_tax .amount bdi,
html body.woocommerce-checkout #order_review tr.order-total td small.includes_tax,
html body.woocommerce-checkout #order_review tr.order-total td small.includes_tax .amount,
html body.woocommerce-checkout #order_review tr.order-total td small.includes_tax .amount bdi {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--brand-brown) !important;
    margin-left: 5px !important;
}

/* ==========================================================================
   1. DESKTOP CART & CHECKOUT TABLES (Natural Spacing & Proportions)
   ========================================================================== */
@media (min-width: 769px) {
    /* Auto-layout prevents text crushing */
    html body .woocommerce-cart table.shop_table,
    html body.woocommerce-checkout #order_review table.shop_table {
        table-layout: auto !important; 
        width: 100% !important;
        border-collapse: separate !important;
    }

    html body .woocommerce-cart table.shop_table th,
    html body .woocommerce-cart table.shop_table td,
    html body.woocommerce-checkout #order_review table.shop_table th,
    html body.woocommerce-checkout #order_review table.shop_table td {
        display: table-cell !important;
        padding: 15px 20px !important;
        vertical-align: middle !important;
    }

    /* Left Align Titles */
    html body .woocommerce-cart table.shop_table th.product-name,
    html body .woocommerce-cart table.shop_table td.product-name,
    html body.woocommerce-checkout #order_review table.shop_table th.product-name,
    html body.woocommerce-checkout #order_review table.shop_table td.product-name {
        text-align: left !important;
        white-space: normal !important;
        width: 65% !important;
    }

    /* Right Align Values */
    html body .woocommerce-cart table.shop_table th.product-price,
    html body .woocommerce-cart table.shop_table td.product-price,
    html body .woocommerce-cart table.shop_table th.product-quantity,
    html body .woocommerce-cart table.shop_table td.product-quantity,
    html body .woocommerce-cart table.shop_table th.product-subtotal,
    html body .woocommerce-cart table.shop_table td.product-subtotal,
    html body.woocommerce-checkout #order_review table.shop_table th.product-total,
    html body.woocommerce-checkout #order_review table.shop_table td.product-total {
        text-align: right !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   2. MOBILE CART & CHECKOUT FIXES (Anti-Squish Flexbox)
   ========================================================================== */
@media (max-width: 768px) {
    /* Convert collapsed tables into clean flex rows */
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }

    /* Reset cells to full width */
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item td,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
        border: none !important;
        text-align: right !important;
    }

    /* Force Titles Flush Left */
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-name,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding-bottom: 10px !important;
    }
    
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name a {
        text-align: left !important;
        font-size: 1.1rem !important;
    }

    /* Ensure Quantity and Price align right */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity .quantity,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-price .amount,
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal .amount,
    html body.woocommerce-checkout #order_review table.shop_table tr.cart_item td.product-total .amount {
        margin: 0 0 0 auto !important;
        text-align: right !important;
    }

    /* ==============================================
       MOBILE COUPON BUTTON 100% WIDTH FIX
       ============================================== */
    html body .woocommerce-cart table.cart td.actions .coupon {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Input Field */
    html body .woocommerce-cart table.cart td.actions .coupon .input-text {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box !important;
    }

    /* Apply Coupon Button */
    html body .woocommerce-cart table.cart td.actions .coupon .button,
    html body .woocommerce-cart table.cart td.actions .coupon input.button {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* Update Basket Button */
    html body .woocommerce-cart table.cart td.actions > .button,
    html body .woocommerce-cart table.cart td.actions > input.button {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   3. CART & CHECKOUT: MASSIVE GRAND TOTAL FONT SIZE (NUCLEAR)
   ========================================================================== */
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td strong .woocommerce-Price-amount,
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td strong .woocommerce-Price-amount bdi,
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td strong .woocommerce-Price-currencySymbol,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td strong .woocommerce-Price-amount,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td strong .woocommerce-Price-amount bdi,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td strong .woocommerce-Price-currencySymbol {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 1.55rem !important; 
    font-weight: 900 !important;
    color: var(--brand-orange) !important; /* Locks entire string to high-visibility orange */
    line-height: 1 !important;
    display: inline-block !important;
}

/* Keep the "(includes £X VAT)" text neat and small */
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td small,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td small,
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td small .amount,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td small .amount {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: 13px !important;
    color: var(--brand-brown) !important;
    font-weight: 400 !important;
    display: inline-block !important;
    margin-left: 8px !important;
}

/* ==========================================================================
   1. CHECKOUT UI: "YOUR ORDER" HEADING FIX
   ========================================================================== */
/* We must use an exact, higher-specificity selector to defeat the mother theme */
html body.woocommerce-checkout .woocommerce .order-review #order_review_heading,
html body.woocommerce-checkout h3#order_review_heading {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important; /* Matches "Billing Details" */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--brand-brown) !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--brand-brown-tint) !important;
    line-height: 1 !important;
    text-align: left !important;
}

/* ==========================================================================
   2. CHECKOUT UI: TIGHTEN BILLING & SHIPPING FORM FIELDS
   ========================================================================== */
/* Reduce the massive vertical gaps between the form rows */
html body.woocommerce-checkout form .form-row,
html body.woocommerce-checkout .woocommerce-billing-fields .form-row,
html body.woocommerce-checkout .woocommerce-shipping-fields .form-row {
    margin-bottom: 12px !important; /* Shrunk down from 20px+ */
    padding: 0 !important;
}

/* Make the Labels thinner, smaller, and pull them closer to the inputs */
html body.woocommerce-checkout .form-row label,
html body.woocommerce-checkout .woocommerce-billing-fields label,
html body.woocommerce-checkout .woocommerce-shipping-fields label {
    font-weight: 500 !important; /* Dropped from 700 bold to medium */
    font-size: 0.9rem !important; /* Scaled down */
    margin-bottom: 4px !important; /* Tighter gap below the text */
    color: var(--brand-brown) !important;
    line-height: 1.2 !important;
}

/* Slim down the physical input boxes to take up less vertical space */
html body.woocommerce-checkout .woocommerce-input-wrapper input[type="text"],
html body.woocommerce-checkout .woocommerce-input-wrapper input[type="email"],
html body.woocommerce-checkout .woocommerce-input-wrapper input[type="tel"],
html body.woocommerce-checkout .woocommerce-input-wrapper select {
    height: 44px !important; /* Slimmer unified height */
    padding: 8px 15px !important; /* Reduced padding */
    font-size: 0.95rem !important; /* Slightly smaller input text */
}

/* Keep the "Order Notes" textarea proportional so it doesn't inherit the 44px height */
html body.woocommerce-checkout .woocommerce-input-wrapper textarea {
    height: 100px !important; /* Shorter text area */
    padding: 12px 15px !important;
}

/* Tighten the wrapper margins to pull the whole form block together */
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    margin-top: 15px !important;
}

/* ==========================================================================
   1. CHECKOUT UI: "YOUR ORDER" HEADING FIX
   ========================================================================== */
/* We must use an exact, higher-specificity selector to defeat the mother theme */
html body.woocommerce-checkout .woocommerce .order-review #order_review_heading,
html body.woocommerce-checkout h3#order_review_heading {
    font-family: 'Rubik-local', Arial, sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important; /* Matches "Billing Details" */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--brand-brown) !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--brand-brown-tint) !important;
    line-height: 1 !important;
    text-align: left !important;
}

/* ==========================================================================
   2. CHECKOUT UI: TIGHTEN BILLING & SHIPPING FORM FIELDS
   ========================================================================== */
/* Reduce the massive vertical gaps between the form rows */
html body.woocommerce-checkout form .form-row,
html body.woocommerce-checkout .woocommerce-billing-fields .form-row,
html body.woocommerce-checkout .woocommerce-shipping-fields .form-row {
    margin-bottom: 10px !important; /* Shrunk down from 20px+ */
    padding: 0 !important;
}

/* Make the Labels thinner, smaller, and pull them closer to the inputs */
html body.woocommerce-checkout .form-row label,
html body.woocommerce-checkout .woocommerce-billing-fields label,
html body.woocommerce-checkout .woocommerce-shipping-fields label {
    font-weight: 500 !important; /* Dropped from 700 bold to medium */
    font-size: 1.1rem !important; /* Scaled down */
    margin-bottom: 4px !important; /* Tighter gap below the text */
    color: var(--brand-brown) !important;
    line-height: 1.2 !important;
}

/* Slim down the physical input boxes to take up less vertical space */
html body.woocommerce-checkout .woocommerce-input-wrapper input[type="text"],
html body.woocommerce-checkout .woocommerce-input-wrapper input[type="email"],
html body.woocommerce-checkout .woocommerce-input-wrapper input[type="tel"],
html body.woocommerce-checkout .woocommerce-input-wrapper select {
    height: 44px !important; /* Slimmer unified height */
    padding: 6px 10px !important; /* Reduced padding */
    font-size: 1.1rem !important; /* Slightly smaller input text */
}

/* Keep the "Order Notes" textarea proportional so it doesn't inherit the 44px height */
html body.woocommerce-checkout .woocommerce-input-wrapper textarea {
    height: 100px !important; /* Shorter text area */
    padding: 10px 12px !important;
}

/* Tighten the wrapper margins to pull the whole form block together */
html body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
html body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    margin-top: 12px !important;
}

/* ==========================================================================
   CHECKOUT: FIX SQUISHED GRAND TOTAL ALIGNMENT
   ========================================================================== */
/* 1. Stop the footer columns from breaking words vertically */
html body.woocommerce-checkout #order_review table.shop_table tfoot th,
html body.woocommerce-checkout #order_review table.shop_table tfoot td,
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total th,
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    white-space: nowrap !important;
    word-break: keep-all !important;
    word-wrap: normal !important;
}

/* 2. Force the giant total into a protected flex row so the currency symbol CANNOT stack */
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td strong,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td strong {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

/* 3. Drop the "includes VAT" text to a neat, right-aligned line below the total */
html body .woocommerce-cart .cart_totals table.shop_table tr.order-total td small.includes_tax,
html body.woocommerce-checkout #order_review table.shop_table tr.order-total td small.includes_tax {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    margin: 6px 0 0 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* ==========================================================================
   1. CHECKOUT UI: REMOVE H3 BORDERS
   ========================================================================== */
html body.woocommerce-checkout .woocommerce .order-review #order_review_heading,
html body.woocommerce-checkout h3#order_review_heading,
html body.woocommerce-checkout h3,
html body.woocommerce-checkout .woocommerce-billing-fields h3,
html body.woocommerce-checkout .woocommerce-shipping-fields h3 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 20px !important;
}

/* ==========================================================================
   2. CHECKOUT UI: PERFECT SUBTOTAL / TOTAL ALIGNMENT
   ========================================================================== */
/* Force the footer columns to perfectly match the 70/30 split of the products above it */
html body.woocommerce-checkout #order_review table.shop_table tfoot tr th {
    width: 70% !important;
    text-align: left !important;
    padding-left: 0 !important;
}

html body.woocommerce-checkout #order_review table.shop_table tfoot tr td {
    width: 30% !important;
    text-align: right !important;
    padding-right: 0 !important;
}

/* Target the subtotal specifically to ensure it snaps hard to the right edge */
html body.woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal td,
html body.woocommerce-checkout #order_review table.shop_table tfoot tr.cart-subtotal td .woocommerce-Price-amount {
    text-align: right !important;
    display: block !important;
    width: 100% !important;
}

/* ==========================================================================
   3. REVOLUT & PAYMENT GATEWAY: UX & WIDTH EXPANSION
   ========================================================================== */
/* Expand the main payment container to full width to match the order table */
html body #payment.woocommerce-checkout-payment {
    padding: 20px 10px !important; /* Reduced heavy theme padding */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Remove the restrictive padding inside the active payment box */
html body #payment ul.payment_methods li .payment_box {
    padding: 15px 5px !important; /* Gives maximum horizontal space */
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Force the Revolut fieldset and wrapper to stretch to the absolute edges */
html body #payment fieldset#wc-revolut_cc-cc-form,
html body #payment fieldset.wc-credit-card-form,
html body #payment .revolut-gateway-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Give the Revolut iframe itself more physical height to prevent cramped/condensed inputs */
html body #payment #wc-revolut_cc-cc-form iframe {
    width: 100% !important;
    min-height: 90px !important; /* Expands vertical breathing room for the card inputs */
}

/* ==========================================================================
   CHECKOUT UI: EQUALIZE TABLE PADDING (ANTI-FLUSH)
   ========================================================================== */
/* 1. Restore uniform Left Padding for all left-aligned columns (Product Names, Subtotal Label, Total Label) */
html body.woocommerce-checkout #order_review table.shop_table th.product-name,
html body.woocommerce-checkout #order_review table.shop_table td.product-name,
html body.woocommerce-checkout #order_review table.shop_table tfoot tr th {
    padding-left: 25px !important; 
}

/* 2. Restore uniform Right Padding for all right-aligned columns (Item Prices, Subtotal Value, Total Value) */
html body.woocommerce-checkout #order_review table.shop_table th.product-total,
html body.woocommerce-checkout #order_review table.shop_table td.product-total,
html body.woocommerce-checkout #order_review table.shop_table tfoot tr td {
    padding-right: 25px !important; 
}

/* ==========================================================================
   CHECKOUT: EXPAND WRAPPER TO MATCH BRAND ROWS
   ========================================================================== */
html body.woocommerce-checkout .woocommerce {
    max-width: 1240px !important; /* Overrides the restrictive 900px limit */
    margin: 0 auto 60px auto !important;
}

/* ==========================================================================
   NUCLEAR OVERRIDE: WOOCOMMERCE H3 BRAND BROWN
   ========================================================================== */
html body .woocommerce h3,
html body .woocommerce-page h3,
html body .woocommerce-checkout h3,
html body .woocommerce-cart h3,
html body .woocommerce-account h3,
html body .woocommerce-order h3,
html body .woocommerce div.product .woocommerce-tabs .panel h3,
html body .woocommerce section.related.products h3,
html body .woocommerce section.up-sells h3,
html body .woocommerce .cross-sells h3,
html body .woocommerce-loop-product__title {
    color: var(--brand-brown) !important;
}

/* ==========================================================================
   BRAND COMPONENT: IMAGE ENGINE (Unified Utility)
   ========================================================================== */
/* Targets both rows (.brand-row-image) and boxes (.brand-box-image) */
.brand-row-image,
.brand-box-image > .vc_column-inner {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Unified Overlay: 80% opacity for deep pop */
.brand-row-image::before,
.brand-box-image > .vc_column-inner::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(34, 30, 28, 0.8) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Ensure content sits above overlay */
.brand-row-image > .wpb_column,
.brand-box-image > .vc_column-inner > .wpb_wrapper {
    position: relative !important;
    z-index: 2 !important;
}

/* Typography Engine: White text, Yellow Headings, Shadows, Margin Killers */
.brand-row-image *,
.brand-box-image * {
    color: #ffffff !important;
}

.brand-row-image h1, .brand-row-image h2, .brand-row-image h3,
.brand-box-image h1, .brand-box-image h2, .brand-box-image h3 {
    color: var(--brand-yellow) !important;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important; /* Nukes margins for vertical centering */
}

/* Small gap for stacked headers */
.brand-row-image h1 + h2, .brand-row-image h2 + h3,
.brand-box-image h1 + h2, .brand-box-image h2 + h3 {
    margin-top: 10px !important;
}

/* Button Protection */
.brand-row-image .vc_btn3, 
.brand-box-image .vc_btn3 {
    color: var(--brand-brown) !important;
}

/* ==========================================================================
   BRAND SYSTEM: BASKET TOTALS YELLOW TINT OVERRIDE
   ========================================================================== */
html body.woocommerce-cart .cart-collaterals {
    background-color: var(--brand-yellow-tint) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    border: 1px solid var(--brand-yellow) !important;
    box-sizing: border-box !important;
}

/* Ensure the Totals table inside this new box has a transparent background */
html body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
    background-color: transparent !important;
}

/* Fix text contrast: Ensure all labels/text inside the yellow tint use Brand Brown */
html body.woocommerce-cart .cart-collaterals,
html body.woocommerce-cart .cart-collaterals h2,
html body.woocommerce-cart .cart-collaterals th,
html body.woocommerce-cart .cart-collaterals td,
html body.woocommerce-cart .cart-collaterals span {
    color: var(--brand-brown) !important;
}

/* ==========================================================================
   MASTER ALIGNMENT: CART TABLE & TOTALS BOX
   ========================================================================== */

/* 1. CART ITEMS TABLE: Horizontal & Vertical Alignment */
/* Force all elements in the row to the vertical middle */
html body .shop_table.cart tbody td,
html body .shop_table.cart tbody th {
    vertical-align: middle !important;
}

/* Align headers and cells */
html body .shop_table.cart thead th { text-align: center !important; }
html body .shop_table.cart td.product-name { text-align: left !important; } /* Product Name stays left */
html body .shop_table.cart td.product-price,
html body .shop_table.cart td.product-quantity,
html body .shop_table.cart td.product-subtotal {
    text-align: center !important; /* Price/Qty/Subtotal centered */
}

/* 2. BASKET TOTALS: Labels Left, Values Right */
html body .cart_totals table.shop_table th {
    text-align: left !important; /* Labels (Subtotal, Shipping, Total) Left */
    vertical-align: middle !important;
}

html body .cart_totals table.shop_table td {
    text-align: right !important; /* Values (£...) Right */
    vertical-align: middle !important;
}

/* 3. ORDER TOTAL: Clean up background and sizing */
html body .cart_totals table.shop_table tr.order-total {
    background-color: transparent !important; /* Removes blue tint */
}

/* VAT String: Forces it below the total, right-aligned */
html body .cart_totals table.shop_table tr.order-total td small.includes_tax {
    display: block !important;
    text-align: right !important;
    padding-top: 5px !important;
    font-size: 1.1rem !important;
}

/* 4. TOTAL HERO: Ensure it doesn't break */
html body .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: var(--brand-orange) !important;
}

/* ==========================================================================
   60. MOBILE CHECKOUT & CART CRISIS OVERRIDES (STRESS-TESTED)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* --- 1. RESCUE THE CHECKOUT TABLE HEADERS --- */
    /* Transforms the table head into a flex row so it matches the body beneath it, stopping the squish */
    html body.woocommerce-checkout #order_review table.shop_table thead tr {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-bottom: 10px !important;
    }
    
    /* Strips the heavy desktop paddings and locked 50% widths from the headers */
    html body.woocommerce-checkout #order_review table.shop_table thead th.product-name,
    html body.woocommerce-checkout #order_review table.shop_table thead th.product-total {
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    /* --- 2. DECOMPRESS THE SHIPPING RADIO BUTTONS --- */
    /* Breaks the strict 70/30 split ONLY for the shipping row so it spans 100% */
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Stack the "Shipment" label and the radio buttons cleanly */
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping th,
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td {
        width: 100% !important;
        text-align: left !important;
        padding: 10px 0 !important;
        display: block !important;
    }
    
    /* Nudges the actual radio list to neatly align on the left edge */
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td ul#shipping_method {
        text-align: left !important;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
    }

    /* --- 3. FIX THE CART PAGE LABEL CRAMP --- */
    /* Swaps alignment to flex-end so the title is pushed to the right edge */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
        gap: 6px !important; 
    }

    /* Pins the injected "Product:" label to the left side */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name::before {
        align-self: flex-start !important; 
    }

    /* Frees the anchor link to use 100% of the space underneath the label */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name a {
        max-width: 100% !important; /* Kills the conflicting 60% max-width */
        text-align: right !important;
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
}

/* ==========================================================================
   61. NUCLEAR MOBILE CHECKOUT TABLE OVERRIDE
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. SHATTER THE TABLE ARCHITECTURE */
    /* Targets every single piece of the table to prevent the browser from rebuilding it */
    html body.woocommerce-checkout #order_review table.shop_table,
    html body.woocommerce-checkout #order_review table.shop_table thead,
    html body.woocommerce-checkout #order_review table.shop_table tbody,
    html body.woocommerce-checkout #order_review table.shop_table tfoot,
    html body.woocommerce-checkout #order_review table.shop_table tr,
    html body.woocommerce-checkout #order_review table.shop_table th,
    html body.woocommerce-checkout #order_review table.shop_table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
    }

    /* Keep the neat outer boundary box */
    html body.woocommerce-checkout #order_review table.shop_table {
        border: 1px solid var(--brand-brown-tint) !important;
    }

    /* 2. HIDE THE REDUNDANT DESKTOP HEADERS */
    /* Kills the squished "Tower of Text" completely */
    html body.woocommerce-checkout #order_review table.shop_table thead {
        display: none !important;
    }

    /* 3. REBUILD THE PRODUCT ROWS AS FLEX BOXES */
    html body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px !important;
        border-bottom: 1px solid var(--brand-brown-tint) !important;
    }

    html body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-name {
        width: 70% !important; 
        text-align: left !important;
        padding: 0 !important;
    }

    html body.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-total {
        width: 30% !important; 
        text-align: right !important;
        padding: 0 !important;
    }

    /* 4. REBUILD THE MATH TOTALS (Subtotal, Tax, Total) */
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }

    html body.woocommerce-checkout #order_review table.shop_table tfoot tr th {
        width: 50% !important;
        text-align: left !important;
        padding: 0 !important;
    }

    html body.woocommerce-checkout #order_review table.shop_table tfoot tr td {
        width: 50% !important;
        text-align: right !important;
        padding: 0 !important;
    }

    /* 5. RESCUE THE SHIPPING RADIO BUTTONS */
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping {
        flex-direction: column !important; /* Stacks the label above the buttons */
        align-items: flex-start !important;
    }

    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping th,
    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td {
        width: 100% !important;
        text-align: left !important;
    }

    html body.woocommerce-checkout #order_review table.shop_table tfoot tr.shipping td ul#shipping_method {
        padding-left: 0 !important;
        margin-top: 10px !important;
    }

    /* --- 6. FIX THE CART PAGE LABEL CRAMP --- */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
        flex-direction: column !important;
        align-items: flex-end !important;
        text-align: right !important;
        gap: 6px !important; 
    }

    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name::before {
        align-self: flex-start !important; 
    }

    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name a {
        max-width: 100% !important;
        text-align: right !important;
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }
}

/* ==========================================================================
   62. CHECKOUT HEADING & REVOLUT PAYMENT MODULE REPAIRS
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. RESTORE BREATHING ROOM ABOVE "YOUR ORDER" */
    /* Overrides the 0px top margin from the global checkout heading rules */
    html body.woocommerce-checkout .woocommerce .order-review #order_review_heading,
    html body.woocommerce-checkout h3#order_review_heading {
        margin-top: 40px !important; 
        padding-top: 20px !important; 
    }

    /* 2. SHIELD PAYMENT MODULE FROM GLOBAL CENTERING */
    /* Nukes the WPBakery text-align: center rule specifically for the payment box */
    html body #payment.woocommerce-checkout-payment *,
    html body #payment ul.payment_methods li,
    html body #payment ul.payment_methods li * {
        text-align: left !important; 
    }

    /* 3. ALIGN REVOLUT RADIO BUTTONS & LABELS */
    /* Turns the payment method row into a flex container */
    html body #payment ul.payment_methods li.wc_payment_method {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    /* Stops the radio button from squishing and gives it breathing room */
    html body #payment ul.payment_methods li.wc_payment_method > input.input-radio {
        margin: 0 12px 0 0 !important; 
        flex-shrink: 0 !important;
    }

    /* Forces the text left and pushes the Visa/ApplePay icons to the far right */
    html body #payment ul.payment_methods li.wc_payment_method > label {
        flex-grow: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; 
        width: auto !important;
        margin: 0 !important;
    }

    /* 4. ALIGN THE "SAVE PAYMENT" CHECKBOX (Screenshot 15.43.41.jpg) */
    /* Forces the checkbox and label into a perfect left-aligned row */
    html body #payment .payment_box p.form-row.woocommerce-SavedPaymentMethods-saveNew {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; 
        margin-top: 15px !important;
    }

    /* Shrinks the checkbox down so it doesn't take up 100% width */
    html body #payment .payment_box p.form-row.woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
        margin: 4px 10px 0 0 !important; 
        flex-shrink: 0 !important;
        width: 18px !important; 
        height: 18px !important;
    }

    html body #payment .payment_box p.form-row.woocommerce-SavedPaymentMethods-saveNew label {
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.4 !important;
    }

    /* 5. FORCE THE EXPANDED PAYMENT BOX BELOW THE RADIO ROW */
    /* Ensures the card input fields drop cleanly to a new line */
    html body #payment ul.payment_methods li.wc_payment_method > .payment_box {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 15px !important;
    }
}

/* ==========================================================================
   63. CHECKOUT PAYMENT LABELS & CONSENT SPACING
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. PREVENT PAYMENT METHOD TEXT FROM WRAPPING */
    /* Forces "Pay with card" and "Revolut Pay" to stay on a single line */
    html body #payment ul.payment_methods li.wc_payment_method > label {
        white-space: nowrap !important; 
        flex-wrap: nowrap !important;
        gap: 8px !important; /* Adds a clean gap between the text and the icons */
    }

    /* Constrains the height/width of the payment icons so they don't crush the text on ultra-narrow screens */
    html body #payment ul.payment_methods li.wc_payment_method > label img {
        max-height: 22px !important; 
        width: auto !important;
        flex-shrink: 1 !important;
        margin: 0 !important;
    }

    /* 2. ADD BREATHING ROOM ABOVE THE CONSENT AREA */
    /* Pushes the privacy policy/terms section down away from the payment boxes */
    html body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
    html body.woocommerce-checkout #payment .form-row.place-order {
        margin-top: 35px !important;
        padding-top: 15px !important;
    }

    /* Neaten up the alignment of the personal data paragraph */
    html body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper p {
        margin-bottom: 15px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   64. CHECKOUT PAGE WIDE-SCREEN RESCUE (PADDING BULLDOZER)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* 1. NUKE THE INVISIBLE PADDING STACK (WPBakery & Theme Wrappers) */
    /* Shields your Brand Rows, Brand Boxes, and Custom Banners from the bulldozer! */
    html body.woocommerce-checkout .container:not(.custom-hero-banner),
    html body.woocommerce-checkout .vc_row:not([class*="brand-row-"]):not([class*="brand-box-"]):not(.custom-hero-banner),
    html body.woocommerce-checkout .vc_row:not([class*="brand-row-"]):not([class*="brand-box-"]):not(.custom-hero-banner) > .wpb_column:not([class*="brand-box-"]),
    html body.woocommerce-checkout .vc_row:not([class*="brand-row-"]):not([class*="brand-box-"]):not(.custom-hero-banner) > .wpb_column:not([class*="brand-box-"]) > .vc_column-inner,
    html body.woocommerce-checkout .vc_row:not([class*="brand-row-"]):not([class*="brand-box-"]):not(.custom-hero-banner) > .wpb_column:not([class*="brand-box-"]) > .vc_column-inner > .wpb_wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1b. EXPLICITLY RESTORE BRAND ELEMENT SPACING */
    /* Forces the header image box and brand rows to float 18px away from the glass */
    html body.woocommerce-checkout .vc_row[class*="brand-row-"],
    html body.woocommerce-checkout .custom-hero-banner {
        margin-left: 18px !important;
        margin-right: 18px !important;
        width: calc(100% - 36px) !important; 
        box-sizing: border-box !important;
    }

    html body.woocommerce-checkout .wpb_column[class*="brand-box-"],
    html body.woocommerce-checkout .vc_column_container[class*="brand-box-"] {
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    /* 2. RE-ESTABLISH A SINGLE MASTER GUTTER ON THE WOOCOMMERCE CONTAINER */
    /* Creates the 18px safety gap for the actual checkout form */
    html body.woocommerce-checkout .woocommerce {
        padding-left: 18px !important;
        padding-right: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. KILL BOOTSTRAP'S NEGATIVE MARGINS */
    html body.woocommerce-checkout form.checkout,
    html body.woocommerce-checkout form.checkout .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. FORCE COLUMNS TO EXPAND FULLY */
    html body.woocommerce-checkout form.checkout > .row > div[class*="col-"],
    html body.woocommerce-checkout form.checkout #customer_details,
    html body.woocommerce-checkout form.checkout #customer_details .col-1,
    html body.woocommerce-checkout form.checkout #customer_details .col-2,
    html body.woocommerce-checkout form.checkout #order_review_heading,
    html body.woocommerce-checkout form.checkout #order_review {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    /* 5. EXPAND THE FORM INPUT FIELDS */
    html body.woocommerce-checkout .form-row {
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    html body.woocommerce-checkout .woocommerce-input-wrapper,
    html body.woocommerce-checkout .woocommerce-input-wrapper input,
    html body.woocommerce-checkout .woocommerce-input-wrapper select,
    html body.woocommerce-checkout .woocommerce-input-wrapper textarea {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 6. RESCUE THE ORDER TABLE */
    html body.woocommerce-checkout #order_review table.shop_table,
    html body.woocommerce-checkout #order_review table.shop_table tbody,
    html body.woocommerce-checkout #order_review table.shop_table tfoot {
        display: block !important; 
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   MOBILE PRODUCT GRID: 1-COLUMN MAX SIZING OVERRIDE
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Fix the custom Flexbox grid (Overrides the 33.33% 3-column tablet math) */
    html body .center-braai-grid li.product,
    html body .center-braai-grid .products.products-grid > .product,
    html body .center-braai-grid .products.products-grid > div[class*="col-"] {
        flex: 0 0 100% !important; 
        width: 100% !important; 
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* 2. Fix the CSS Grid overrides (Forces 1 single fraction column instead of 2) */
    html body .products.row,
    html body .woocommerce ul.products {
        grid-template-columns: 1fr !important; 
    }
    
    /* 3. Neutralize the "Odd Last Child" Magic Rule */
    /* Since all cards are now 100% wide, we must revert the horizontal layout applied to the last item */
    html body .products.row > div:last-child:nth-child(odd) .block-inner,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .block-inner {
        flex-direction: column !important;
    }

    /* Restore full-width image styling for the last item */
    html body .products.row > div:last-child:nth-child(odd) .image,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .image {
        width: 100% !important;
        margin-bottom: 10px !important;
        margin-right: 0 !important;
    }

    /* Re-center the text and price data for the last item */
    html body .products.row > div:last-child:nth-child(odd) .metas,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .metas {
        width: 100% !important;
        text-align: center !important;
    }

    html body .products.row > div:last-child:nth-child(odd) .left-info,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .left-info {
        align-items: center !important;
    }

    html body .products.row > div:last-child:nth-child(odd) h3.name,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) h3.name,
    html body .products.row > div:last-child:nth-child(odd) .price,
    html body .woocommerce ul.products > li.product:last-child:nth-child(odd) .price {
        text-align: center !important;
    }
}

/* ==========================================================================
   SINGLE PRODUCT: PRICE, VAT & SKU REFINEMENTS (NUCLEAR OVERRIDES)
   ========================================================================== */

/* 1. Increase main price by 15% - Targeting the exact inner spans */
html body.single-product .summary.entry-summary p.price, 
html body.single-product .summary.entry-summary p.price span.woocommerce-Price-amount.amount,
html body.single-product .summary.entry-summary p.price span.woocommerce-Price-amount.amount bdi { 
    font-size: 1.85rem !important; 
    line-height: 1 !important;
}

/* 2. Increase VAT suffix size and space it neatly */
html body.single-product .summary.entry-summary p.price small.woocommerce-price-suffix { 
    font-size: 0.95rem !important; 
    display: block !important;
    margin-top: 6px !important; 
    opacity: 0.7 !important; 
    color: var(--brand-brown) !important;
}

/* 3. Make SKU 15% smaller and add neat vertical spacing */
html body.single-product .summary.entry-summary .product_meta span.sku_wrapper {
    display: block !important;
    font-size: 0.85rem !important; 
    margin-top: 25px !important; 
    margin-bottom: 10px !important; 
    padding-top: 15px !important; 
    border-top: 1px solid var(--brand-brown-tint) !important; 
    color: #888888 !important; 
    width: 100% !important;
}

/* 4. Keep the actual SKU number bold */
html body.single-product .summary.entry-summary .product_meta span.sku_wrapper span.sku {
    color: var(--brand-brown) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* ==========================================================================
   FIX: PRODUCT GRID ALIGNMENT, EQUAL HEIGHTS & SPACING
   ========================================================================== */

/* 1. MASTER CARD: Equal Height Flex Container */
html body .product-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    padding: 10px 10px 0 10px !important; /* Top/Left/Right edge padding */
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
}

/* 2. IMAGE CONTAINER: Flush and curved */
html body .product-block .image {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: block !important;
    flex-shrink: 0 !important; /* Prevents the image from squishing */
}

html body .product-block .image a,
html body .product-block .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
    margin: 0 !important;
}

/* 3. TEXT WRAPPER: Expand to fill leftover space */
html body .product-block .caption,
html body .product-block .block-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Forces the card to stretch to full height */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. PRODUCT TITLE: 20px top gap, L/R padding for beautiful wrapping */
html body .product-block h3.name {
    margin-top: 20px !important; /* 20px gap above the title */
    margin-bottom: 15px !important; /* Space between title and price */
    padding-left: 15px !important; /* Pinches the text to force a neat wrap */
    padding-right: 15px !important;
    text-align: center !important;
}

html body .product-block h3.name a {
    white-space: normal !important;
    word-wrap: break-word !important;
    display: inline-block !important;
    line-height: 1.3 !important;
}

/* 5. PRICE & VAT: Pushed to absolute bottom, 20px cushion below */
html body .product-block .metas,
html body .product-block .left-info {
    margin-top: auto !important; /* MAGIC TRICK: Forces this block to the absolute floor */
    padding-bottom: 20px !important; /* 20px cushion below the VAT */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

html body .product-block .left-info .price {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

html body .product-block .left-info small.woocommerce-price-suffix,
html body .product-block .left-info .price-tax {
    margin-top: 6px !important; /* Neat gap above (inc VAT) */
    display: block !important;
    line-height: 1 !important;
}

/* 6. NUKE GHOST ELEMENTS */
html body .product-block .action,
html body .product-block .bottom-action,
html body .product-block .groups-button,
html body .product-block .add-to-cart-wrapper,
html body .product-block .yith-wcqv-button {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Hide the hardcoded WPBakery "Checkout" span specifically on the order success endpoint */
html body.woocommerce-order-received .brand-row-image h1 span {
    display: none !important;
}

/* Inject "THANK YOU" directly into the empty h1 container */
html body.woocommerce-order-received .brand-row-image h1::after {
    content: 'THANK YOU' !important;
    color: #ffffff !important; /* Matches the exact hex code from your WPBakery inline style */
    margin: 0px !important;
}

/* Force the table to respect the layout and stop squashing columns */
html body.woocommerce-order-received table.woocommerce-table--order-details {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 100% !important;
}

/* Force the product name column to take 60% and allow text to wrap */
html body.woocommerce-order-received table.woocommerce-table--order-details td.product-name,
html body.woocommerce-order-received table.woocommerce-table--order-details th.product-name {
    width: 60% !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

/* Force the total column to take 40% */
html body.woocommerce-order-received table.woocommerce-table--order-details td.product-total,
html body.woocommerce-order-received table.woocommerce-table--order-details th.product-total {
    width: 40% !important;
    text-align: right !important;
    word-wrap: break-word !important;
}

/* Ensure the product name link itself doesn't try to stay on one line */
html body.woocommerce-order-received table.woocommerce-table--order-details td.product-name a {
    display: block !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

/* ==========================================================================
   FINAL MOBILE UI: ORDER DETAILS FIX (Consolidated)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Reset Table Container */
    html body.woocommerce-order-received table.woocommerce-table--order-details {
        table-layout: auto !important; 
        padding: 10px !important;
    }

    /* 2. Fix Labels (e.g., SUBTOTAL, SHIPPING) */
    html body.woocommerce-order-received table.woocommerce-table--order-details th {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 0 5px 0 !important;
        font-size: 0.8rem !important;
        border: none !important;
    }

    /* 3. Fix Values (Prices, Address) */
    html body.woocommerce-order-received table.woocommerce-table--order-details td {
        width: 100% !important;
        text-align: center !important;
        padding: 5px 0 15px 0 !important;
        border-bottom: 1px solid var(--brand-brown-tint) !important;
    }

    /* 4. Remove the bottom border from the final row */
    html body.woocommerce-order-received table.woocommerce-table--order-details tr:last-child td {
        border-bottom: none !important;
    }

    /* 5. Product specific adjustments forKindling/Items */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name {
        font-size: 1rem !important;
        padding-bottom: 5px !important;
    }
    /* Target the product name cell directly and override the center alignment */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name {
        text-align: left !important;
        padding-left: 20px !important; /* Adds a bit of breathing room from the left edge */
    }

    /* Ensure the product link inside also respects the left alignment */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name a {
        display: inline-block !important;
        text-align: left !important;
    }
    /* Targets the td element specifically inside the Thank You table, 
       out-ranking the global .wpb_content_element center-align rule */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name {
        text-align: left !important;
        padding-left: 20px !important;
    }

    /* Ensures the link inside also respects this left-alignment */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name a {
        display: block !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   FINAL ATTEMPT: NUCLEAR LEFT-ALIGNMENT FOR PRODUCT NAME
   ========================================================================== */
@media (max-width: 768px) {
    /* Target the cell containing the product name specifically */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name,
    html body.woocommerce-checkout #order_review table.shop_table tbody td.product-name,
    html body.woocommerce-cart table.shop_table.cart tbody td.product-name {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        padding-left: 20px !important;
    }

    /* Target the product link within that cell */
    html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name a,
    html body.woocommerce-checkout #order_review table.shop_table tbody td.product-name a,
    html body.woocommerce-cart table.shop_table.cart tbody td.product-name a {
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   MOBILE FIX: STACK ORDER OVERVIEW BOX
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Force the container to stack items vertically */
    ul.woocommerce-order-overview.order_details {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 20px !important;
    }

    /* 2. Reset the individual list items to full width and remove borders */
    ul.woocommerce-order-overview.order_details li {
        width: 100% !important;
        border-right: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* 3. Ensure the labels and values stack cleanly */
    ul.woocommerce-order-overview.order_details li strong {
        display: block !important;
        margin-top: 4px !important;
    }
}

/* ==========================================================================
   HARMONIZED ORDER DETAILS TABLE
   ========================================================================== */

/* 1. Ensure Table respects Rubik-local */
html body.woocommerce-order-received table.woocommerce-table--order-details {
    font-family: 'Rubik-local', Arial, Helvetica, sans-serif !important;
}

/* 2. Product Name: Clean, legible, bold */
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: var(--brand-brown) !important;
}

/* 3. Product Quantity Multiplier: Subtle but visible */
html body.woocommerce-order-received table.woocommerce-table--order-details tbody td.product-name .product-quantity {
    font-weight: 400 !important;
    color: #888888 !important;
    margin-left: 5px !important;
}

/* 4. Labels (Subtotal, Shipping, etc.): Small, Bold, Uppercase */
html body.woocommerce-order-received table.woocommerce-table--order-details th {
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    color: var(--brand-brown) !important;
    letter-spacing: 0.05em !important;
}

/* 5. Currency/Totals: Standardized Weight and Color */
html body.woocommerce-order-received table.woocommerce-table--order-details td.product-total,
html body.woocommerce-order-received table.woocommerce-table--order-details tfoot td .amount {
    font-weight: 900 !important; /* Emphasized */
    color: var(--brand-orange) !important;
    font-size: 1.1rem !important;
}

/* 6. VAT/Suffix Details: Secondary, muted, and small */
html body.woocommerce-order-received table.woocommerce-table--order-details .woocommerce-price-suffix,
html body.woocommerce-order-received table.woocommerce-table--order-details small {
    font-weight: 400 !important;
    color: #888888 !important;
    font-size: 0.85rem !important;
    display: block !important; /* Forces onto new line for cleaner reading */
    margin-top: 4px !important;
}

/* 7. Shipping Address/Text: Normal readability weight */
html body.woocommerce-order-received table.woocommerce-table--order-details td {
    font-weight: 400 !important;
    color: var(--brand-brown) !important;
}

/* ==========================================================================
   HARMONIZED CART PAGE: UI, TYPOGRAPHY & SPACING ENGINE
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Simplify the Cart Item Card: Elevated, padded, and rounded */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        border: 1px solid var(--brand-brown-tint) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        margin-bottom: 12px !important; /* Tighter margin */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
        position: relative !important;
    }

    /* 2. Remove redundant internal lines */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td {
        border-bottom: none !important;
    }

    /* 3. REFINED PRODUCT ALIGNMENT: Label Left, Title Right */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        border-bottom: 1px solid var(--brand-brown-tint) !important;
        padding-bottom: 10px !important;
        margin-bottom: 5px !important;
        width: 100% !important;
        text-align: right !important;
    }

    /* Target the injected "Product:" label to pin left */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name::before {
        content: "Product: " !important; /* Force explicit label */
        text-align: left !important;
        font-weight: 700 !important;
        color: var(--brand-brown) !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        flex-shrink: 0 !important;
        margin-right: 15px !important;
    }

    /* Force Title right-aligned away from label */
    html body .woocommerce-cart table.shop_table.cart tr.cart_item td.product-name a {
        text-align: right !important;
        flex-grow: 1 !important;
        font-weight: 700 !important;
        font-size: 1.1rem !important;
        color: var(--brand-brown) !important;
        padding: 0 !important;
    }

    /* 4. Harmonize Other Labels/Values */
    html body .woocommerce-cart table.shop_table.cart td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 0 !important;
        text-align: right !important;
    }

    html body .woocommerce-cart table.shop_table.cart td::before {
        content: attr(data-title) ": " !important;
        font-weight: 700 !important;
        color: var(--brand-brown) !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
    }

    /* 5. Basket Totals Box Harmonisation */
    html body .woocommerce-cart .cart-collaterals .cart_totals {
        background-color: var(--brand-yellow-tint) !important;
        border: 1px solid var(--brand-yellow) !important;
        border-radius: 16px !important;
        padding: 20px !important;
        margin-top: 15px !important;
    }

    html body .woocommerce-cart .cart-collaterals .cart_totals h2 {
        font-weight: 900 !important;
        color: var(--brand-brown) !important;
        font-size: 1.2rem !important;
        border-bottom: 2px solid var(--brand-brown-tint) !important;
        padding-bottom: 8px !important;
        margin-bottom: 15px !important;
    }

    /* 6. Update Basket button */
    html body .woocommerce-cart button[name="update_cart"] {
        background-color: var(--brand-yellow) !important;
        color: var(--brand-brown) !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        border-radius: 8px !important;
        padding: 12px 20px !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        border: none !important;
        font-size: 0.95rem !important;
    }

    /* 7. Coupon Bar Alignment */
    html body .woocommerce-cart table.cart td.actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding-top: 20px !important;
    }

    html body .woocommerce-cart table.cart td.actions .coupon {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html body .woocommerce-cart table.cart td.actions .coupon input#coupon_code {
        width: 100% !important;
        height: 45px !important;
        border-radius: 8px !important;
        border: 1px solid #cccccc !important;
    }
}

/* Force consistency on the Checkout page */
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout button,
.woocommerce-checkout .woocommerce-Price-amount {
    font-family: "Rubik", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
}

/* Ensure headings in the checkout layout don't inherit conflicting weights */
.woocommerce-checkout h3, 
.woocommerce-checkout #order_review_heading {
    font-family: "Rubik", Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
}

/* Clean up the Order Review Table alignment */
.woocommerce-checkout table.shop_table {
    border: 1px solid #ddd !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}

.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
    padding: 12px 15px !important;
    vertical-align: middle !important;
}

/* Align names left, totals right for professional look */
.woocommerce-checkout table.shop_table td.product-name {
    text-align: left !important;
}

.woocommerce-checkout table.shop_table td.product-total {
    text-align: right !important;
}