/*
Theme Name: Amina Store
Theme URI: https://aminaltd.co.uk/
Template: sportiq
Author: aminaltd
Author URI: https://aminaltd.co.uk/
Description: Amina LTD - Elegant & Luxury Womenswear. A child theme of Sportiq, rebranded for Amina LTD's Black and Gold identity.
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
WC requires at least: 9.6.0
WC tested up to: 10.7.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sportiq
Tags: e-commerce, woocommerce, full-site-editing, womenswear, luxury
*/

/* --- Logo Colors --- */

/* --- Transparent Header Colors Before Scroll (Home Page Desktop Only) --- */
@media (min-width: 992px) {
                    /* Make Top-Level Navigation Links, SVG Arrows, and Dark Mode Text White */
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item > a,
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg,
    body.home:not(.scrolling-active) .header-transparent #modeSwitch strong {
        color: #ffffff !important;
    }
    
    /* Force Brand Gold on Hover and Open States for all Links (including the Shop Mega Menu) */
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > a,
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > a,
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > a {
        color: var(--wp--preset--color--primary) !important;
    }
    
        /* Ensure the Dropdown Arrow also turns Gold on Hover */
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item:hover svg,
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within svg,
    body.home:not(.scrolling-active) .header-transparent .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item svg {
        color: var(--wp--preset--color--primary) !important;
    }
}


/* Order Tracking & WPForms Form Styling to match brand */
.woocommerce-form-track-order .button,
.stacked-track-form .wpforms-container button.wpforms-submit {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--contrast, #ffffff) !important;
    border-radius: 0px !important;
    padding: 15px 40px !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer;
}
.woocommerce-form-track-order .button:hover,
.stacked-track-form .wpforms-container button.wpforms-submit:hover {
    background-color: var(--wp--preset--color--contrast, #000000) !important;
    color: var(--wp--preset--color--base, #ffffff) !important;
}
.woocommerce-form-track-order .input-text,
.stacked-track-form .wpforms-container .wpforms-field input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.stacked-track-form .wpforms-container .wpforms-field select,
.stacked-track-form .wpforms-container .wpforms-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0px !important;
    padding: 12px 15px !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    background-color: #ffffff !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

/* Force Track Order form to stack inside narrow columns */
.stacked-track-form form.woocommerce-form-track-order .form-row-first,
.stacked-track-form form.woocommerce-form-track-order .form-row-last,
.stacked-track-form form.woocommerce-form-track-order .form-row {
    grid-column: span 12 / span 12 !important;
    width: 100% !important;
}
.stacked-track-form form.woocommerce-form-track-order .button,
.stacked-track-form .wpforms-container button.wpforms-submit {
    width: 100% !important;
    display: block !important;
}

/* --- BRUTAL WPFORMS OVERRIDES TO MATCH WOOCOMMERCE --- */
/* Scoped ONLY to .stacked-track-form to protect homepage signup banners */
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field input[type=text],
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field input[type=email],
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field input[type=number],
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0px !important;
    padding: 12px 15px !important;
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
    background-color: #ffffff !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.stacked-track-form div.wpforms-container-full .wpforms-form button[type=submit] {
    width: 100% !important;
    border-radius: 0px !important;
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--contrast, #ffffff) !important;
    padding: 15px 40px !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    border: none !important;
    display: block !important;
}

.stacked-track-form div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    background-color: var(--wp--preset--color--contrast, #000000) !important;
    color: var(--wp--preset--color--base, #ffffff) !important;
}

/* Force side-by-side columns to stack full-width and reduce massive gaps */
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field-row {
    display: block !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-one-half,
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-one-third,
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-two-thirds,
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field {
    width: 100% !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important; /* Rely on WPForms grid gap instead of stacking margins */
    padding-bottom: 0 !important;
    clear: both !important;
    display: block !important;
    float: none !important;
}

/* Fix WPForms bold labels and red asterisks */
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: 400 !important;
    margin-bottom: 5px !important;
}
.stacked-track-form div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: inherit !important;
    font-weight: 400 !important;
}


/* Strip default top margins from the form container */
.custom-wpforms-wrapper {
    margin-top: -12px !important; /* Perfectly aligns the form with the H1 on the left */
}
.custom-wpforms-wrapper .wpforms-container,
.custom-wpforms-wrapper .wpforms-form {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   Quantity Input — Pill-style +/- layout
   The parent JS injects .qty-minus and .qty-plus buttons
   inside a .qty-container wrapper. This styles them to match
   the live Sportiq preview: [ + ] [ 1 ] [ - ]
   ========================================================= */
.single-product form.cart .qty-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--wp--preset--color--gray-100, #e0e0e0);
    border-radius: 120px;
    height: 52px;
    padding: 0 8px;
    min-width: 130px;
}

.single-product form.cart .qty-container .qty {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-align: center;
    width: 44px !important;
    font-size: 16px;
    font-weight: 500;
    padding: 0;
    background: transparent;
    -moz-appearance: textfield;
    order: 2;
}
.single-product form.cart .qty-container .qty::-webkit-outer-spin-button,
.single-product form.cart .qty-container .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.single-product form.cart .qty-container .qty-minus,
.single-product form.cart .qty-container .qty-plus {
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--wp--preset--color--contrast, #111);
    transition: background 0.15s;
}
.single-product form.cart .qty-container .qty-minus:hover,
.single-product form.cart .qty-container .qty-plus:hover {
    background-color: #e5e5e5;
}

/* + is on the LEFT (order: 1), - is on the RIGHT (order: 3) */
.single-product form.cart .qty-container .qty-plus  { order: 1; }
.single-product form.cart .qty-container .qty-minus { order: 3; }

/* =========================================================
   WooCommerce Blocks (Mini Cart / Cart) Quantity Input
   Applies the exact same pill-style +/- layout to the
   blocks-based cart quantities.
   ========================================================= */
.wc-block-components-quantity-selector {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--wp--preset--color--gray-100, #e0e0e0) !important;
    border-radius: 120px !important;
    height: 28px !important;
    padding: 0 4px !important;
    min-width: 80px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-align: center !important;
    width: 24px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    background: transparent !important;
    order: 2 !important;
    margin: 0 !important;
    height: auto !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    background-color: #f5f5f5 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: var(--wp--preset--color--contrast, #111) !important;
    transition: background 0.15s !important;
    margin: 0 !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
    background-color: #e5e5e5 !important;
}

/* + is on the LEFT (order: 1), - is on the RIGHT (order: 3) */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--plus { order: 1; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button--minus { order: 3; }

/* =========================================================
   Mini Cart Badge Styling
   ========================================================= */
.wc-block-mini-cart__badge {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--contrast) !important;
}

/* =========================================================
   Color Filter Swatches — ensure text is plain black,
   not coloured. The ::before pseudo-element provides the
   colour dot; the label text should be neutral.
   ========================================================= */
body:not(.editor-styles-wrapper) .filter-color .wc-block-checkbox-list .wc-block-components-checkbox label,
body:not(.editor-styles-wrapper) .filter-color .wc-block-checkbox-list .wc-block-components-checkbox .wc-block-components-checkbox__label {
    color: var(--wp--preset--color--contrast, #111111) !important;
}


/* --- Navigation Link Hover State --- */
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation a:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* --- Instagram Scroll Carousel Fix (7 items visible on desktop) --- */
@media (min-width: 1025px) {
    .wp-block-columns.sportiq-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }
    .wp-block-columns.sportiq-scroll > .wp-block-column {
        flex: 0 0 calc(100% / 7) !important;
        min-width: calc(100% / 7) !important;
    }
}

/* --- Desktop: Hide Scrollbar completely to mimic mobile behavior --- */
@media (min-width: 1025px) {
    .wp-block-columns.sportiq-scroll::-webkit-scrollbar {
        display: none !important;
    }
    .wp-block-columns.sportiq-scroll {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
}
/* --- Mobile: Show tiny scrollbar --- */
@media (max-width: 1024px) {
    .wp-block-columns.sportiq-scroll::-webkit-scrollbar {
        height: 2px !important;
        width: 2px !important;
        display: block !important;
    }
    .wp-block-columns.sportiq-scroll::-webkit-scrollbar-track {
        background: transparent !important;
    }
    .wp-block-columns.sportiq-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 10px !important;
    }
    .wp-block-columns.sportiq-scroll::-webkit-scrollbar-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .wp-block-columns.sportiq-scroll {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
    }
}

/* --- Uniform Product Image Heights --- */
/* Forces all WooCommerce product thumbnails to be perfectly square and uniform, regardless of original image height */
.woocommerce ul.products li.product .wp-block-post-featured-image img,
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
ul.wc-block-grid__products li.wc-block-grid__product .wc-block-grid__product-image img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: top !important;
    width: 100% !important;
    height: 100% !important;
}

/* --- Fix Mega Menu Mobile Image Overflow --- */
@media (max-width: 991px) {
    .wp-block-navigation-submenu img,
    .wp-block-navigation-submenu .wp-block-cover,
    .wp-block-navigation-submenu .wp-block-image img,
    .wp-block-navigation-item__content img,
    .mobile-menu img,
    .mega-menu img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* --- Aggressive Mobile Mega Menu Container Overflow Fix --- */
@media (max-width: 991px) {
    /* Force all containers inside the mobile off-canvas menu to respect viewport width */
    .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Override inline rigid widths on Cover blocks or Groups in the menu */
    .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu .wp-block-cover,
    .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu .wp-block-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
    }
    
    /* Double-enforce image responsiveness */
    .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* --- Fix WooCommerce Block Color Swatches --- */
/* The parent theme targeted strict IDs (e.g., #black), but modern WooCommerce blocks use dynamic IDs and store the color in the value attribute. */
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="black"]::before { background-color: #111111 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="blue"]::before { background-color: #3f6087 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="brown"]::before { background-color: #5e4635 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="gray"]::before { background-color: #888888 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="green"]::before { background-color: #4b6a55 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="orange"]::before { background-color: #e57e33 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="red"]::before { background-color: #c94040 !important; }
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__input[value="yellow"]::before { background-color: #ddbf4b !important; }

/* Hide the default WooCommerce Gutenberg SVG checkmark on color filters so the custom dots from the theme can show cleanly */
body:not(.editor-styles-wrapper) .filter-color .wc-block-components-checkbox__mark { display: none !important; }









/* --- Global Hover Colors for Solid Header & Inner Pages --- */
body.scrolling-active .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
body.scrolling-active .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > a,
body.scrolling-active .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > a,
body.scrolling-active .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item:hover svg,
body.scrolling-active .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within svg {
    color: var(--wp--preset--color--primary) !important;
}

body:not(.home) .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
body:not(.home) .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > a,
body:not(.home) .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > a,
body:not(.home) .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item:hover svg,
body:not(.home) .desktop-header .primary-menu .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within svg {
    color: var(--wp--preset--color--primary) !important;
}

/* --- Utility Icons (Logo, Cart, Search, Account) --- */
@media (min-width: 992px) {
    /* Force WooCommerce Utility Icons (Account, Cart) to White on Transparent Header */
    body.home:not(.scrolling-active) .header-transparent .wc-block-mini-cart__button,
    body.home:not(.scrolling-active) .header-transparent .wc-block-customer-account,
    body.home:not(.scrolling-active) .header-transparent .wc-block-customer-account a,
    body.home:not(.scrolling-active) .header-transparent .wc-block-customer-account span {
        color: #ffffff !important;
    }
    
    /* Ensure Cart amount text is white */
    body.home:not(.scrolling-active) .header-transparent .wc-block-mini-cart__amount {
        color: #ffffff !important;
    }
    
    /* Invert standard image icons (Logo, Search, Moon/Sun) on Transparent Header */
    body.home:not(.scrolling-active) .header-transparent img[src$='.svg'] {
        filter: brightness(0) invert(1) !important;
    }
}

/* Global Logo & Search Inversion for Dark Mode (Solid Header & Inner Pages) */
html.dark-mode .desktop-header img[src$='.svg'],
html.dark-mode .mobile-header img[src$='.svg'] {
    filter: brightness(0) invert(1) !important;
}



/* --- Inner Pages Solid Header Sticky Fix --- */
header.sticky-solid-header,
body:not(.home) header.wp-block-template-part {
    position: sticky !important;
    top: 0;
    z-index: 999;
}

header.sticky-solid-header .desktop-header,
body:not(.home) header.wp-block-template-part .desktop-header,
header.sticky-solid-header .mobile-header,
body:not(.home) header.wp-block-template-part .mobile-header {
    background-color: #ffffff !important;
    transition: background-color 0.3s ease;
}

html.dark-mode header.sticky-solid-header .desktop-header,
html.dark-mode body:not(.home) header.wp-block-template-part .desktop-header,
html.dark-mode header.sticky-solid-header .mobile-header,
html.dark-mode body:not(.home) header.wp-block-template-part .mobile-header {
    background-color: #111111 !important;
}

body.scrolling-active header.sticky-solid-header .desktop-header,
body.scrolling-active:not(.home) header.wp-block-template-part .desktop-header,
body.scrolling-active header.sticky-solid-header .mobile-header,
body.scrolling-active:not(.home) header.wp-block-template-part .mobile-header {
    border-bottom: 1px solid var(--wp--preset--color--gray-100);
}

/* --- WooCommerce Mini Cart Drawer (Dark Mode) --- */
html.dark-mode .wc-block-mini-cart__drawer,
html.dark-mode .wc-block-components-drawer__content,
html.dark-mode .wc-block-mini-cart__template-part,
html.dark-mode .wp-block-woocommerce-mini-cart-contents,
html.dark-mode .wp-block-woocommerce-filled-mini-cart-contents-block {
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* Force all typography inside the dark mode cart to be white */
html.dark-mode .wc-block-components-drawer__content .wc-block-components-product-name,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-product-price,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-totals-item__value,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-totals-item__label,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-drawer__header-title,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-drawer__header-subtitle,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-notice-banner__content,
html.dark-mode .wc-block-components-drawer__content p,
html.dark-mode .wc-block-components-drawer__content span,
html.dark-mode .wc-block-components-drawer__content div,
html.dark-mode .wc-block-components-drawer__content h1,
html.dark-mode .wc-block-components-drawer__content h2,
html.dark-mode .wc-block-components-drawer__content h3,
html.dark-mode .wc-block-components-drawer__content h4,
html.dark-mode .wc-block-components-drawer__content h5,
html.dark-mode .wc-block-components-drawer__content h6 {
    color: #ffffff !important;
}

/* Dark Mode Quantity Selector Styling */
html.dark-mode .wc-block-components-drawer__content .wc-block-components-quantity-selector {
    background-color: #222222 !important;
    border-color: #444444 !important;
}
html.dark-mode .wc-block-components-drawer__content .wc-block-components-quantity-selector input,
html.dark-mode .wc-block-components-drawer__content .wc-block-components-quantity-selector button {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Dark Mode Close Button & SVGs */
html.dark-mode .wc-block-components-drawer__content .wc-block-components-drawer__close svg,
html.dark-mode .wc-block-components-drawer__content svg {
    fill: #ffffff !important;
}

/* Remove default white backgrounds from internal cart items */
html.dark-mode .wc-block-components-drawer__content .wc-block-cart-items__row,
html.dark-mode .wc-block-components-drawer__content .wc-block-cart-items td,
html.dark-mode .wc-block-components-drawer__content .wc-block-cart-items th {
    background-color: transparent !important;
    border-color: #333333 !important;
}

/* --- Fix Double Increment/Decrement Symbols in Cart --- */
/* WooCommerce native blocks now output the + and - text. Hide theme-injected pseudo-elements. */
.wc-block-components-quantity-selector button.plus::before,
.wc-block-components-quantity-selector button.minus::before,
.wc-block-components-quantity-selector button.plus::after,
.wc-block-components-quantity-selector button.minus::after,
.wc-block-components-quantity-selector button::before,
.wc-block-components-quantity-selector button::after {
    display: none !important;
    content: none !important;
}

/* --- Footer Logo Dark Mode Fix --- */
html.dark-mode footer img[src$='logo2.svg'] {
    filter: brightness(0) invert(1) !important;
}

/* --- Mobile Menu Close Button Fix --- */
.wp-block-navigation__responsive-dialog-close,
.wp-block-navigation__responsive-container-close {
    background-color: var(--wp--preset--color--primary) !important;
    color: #ffffff !important;
    border-color: var(--wp--preset--color--primary) !important;
}

.wp-block-navigation__responsive-dialog-close svg,
.wp-block-navigation__responsive-container-close svg {
    fill: #ffffff !important;
}

/* --- Best Seller Title Dark Mode Fix --- */
html.dark-mode h2.has-gray-300-color {
    color: var(--wp--preset--color--gray-100) !important;
}

/* --- Mobile Product Filter Drawer (Dark Mode) --- */
@media (max-width: 991px) {
    html.dark-mode .filter-block {
        background-color: #111111 !important;
    }
}

/* --- Prevent WPForms Submit Button Wrapping --- */
.wpforms-container button[type="submit"], 
.wpforms-submit-container button {
    white-space: nowrap !important;
}

/* --- Mobile Logo Size Reduction --- */
.mobile-header img[src$='logo2.svg'] {
    max-height: 22px !important;
    width: auto !important;
}

/* --- Light Mode Best Seller Title Reversion --- */
html:not(.dark-mode) h2.has-gray-300-color {
    color: #8c9ba5 !important;
}

/* --- Fix Mobile Hero Height Exceeding Viewport --- */
@media (max-width: 991px) {
    .home-v2-hero .wp-block-cover,
    .home-v2-hero .wp-block-cover.has-custom-content-position {
        min-height: 60vh !important;
        max-height: 700px !important;
    }
}
@media (max-width: 767px) {
    .home-v2-hero .wp-block-cover,
    .home-v2-hero .wp-block-cover.has-custom-content-position {
        min-height: 60vh !important;
        max-height: 550px !important;
    }
}

/* --- Reduce Carousel Dots on Mobile --- */
@media (max-width: 767px) {
  .slick-dots li {
    width: 6px !important;
    height: 6px !important;
    margin: 0 5px !important; /* Reduce spacing between dots */
  }
  .slick-dots li button {
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
  }
  .slick-dots li.slick-active button:before {
    width: 14px !important; /* Reduces the large active ring */
    height: 14px !important;
  }
}


/* --- Fix Brand Logos Size & Spacing on Mobile --- */
@media (max-width: 767px) {
    .sportiq-logo-scroll,
    .sp-logo-scroll {
        gap: 15px !important; /* Overrides the huge 94px blockGap */
    }
    
    .sportiq-logo-scroll .wp-block-image img,
    .sp-logo-scroll .wp-block-image img {
        width: 60px !important; /* Forces smaller logo size so 3 fit on screen */
        height: auto !important;
    }
}

/* --- Hide Brand Logos Section Globally --- */
.sportiq-logo-scroll,
.sp-logo-scroll,
.wp-block-group:has(> .sportiq-logo-scroll),
.wp-block-group:has(> .sp-logo-scroll) {
  display: none !important;
}