@import "base/reset.css";
@import "base/variables.css";
@import "base/typography.css";
@import "layout/container.css";
@import "layout/grid.css";
@import "utilities/helpers.css";
@import "components/buttons.css";
@import "components/header.css";
@import "components/bottom-nav.css";
@import "woocommerce/main.css";
@import "sections/hero.css";
@import "sections/products.css";
@import "sections/brands.css";
@import "sections/features.css";
@import "sections/collections.css";
@import "sections/testimonials.css";
@import "components/footer.css";
@import "pages/information.css";
@import "pages/contact.css";
@import "pages/about.css";
@import "woocommerce/account.css";
@import "woocommerce/shop.css";


/* =========================================================
   Homepage Horizontal Overflow Fix
========================================================= */

html {
    max-width: 100%;
    overflow-x: clip;
}

body.home {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Prevent homepage sections from widening the document */
body.home .site,
body.home main,
body.home section,
body.home footer,
body.home .container {
    max-width: 100%;
    min-width: 0;
}

/* Keep carousel overflow inside its own viewport */
body.home .home-products,
body.home .home-brands,
body.home .home-collections,
body.home .home-testimonials,
body.home .home-hero {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.home .home-products__viewport,
body.home .home-brands__viewport,
body.home .collections-viewport,
body.home .testimonials-viewport {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* Tracks may scroll internally but cannot widen the page */
body.home .home-products__track,
body.home .home-brands__track,
body.home .collections-track,
body.home .testimonials-track {
    max-width: 100%;
    min-width: 0;
}

/* Avoid 100vw extending beyond the mobile viewport */
@media (max-width: 1024px) {
    body > nav.mobile-bottom-nav {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   Final Mobile Horizontal Overflow Fix
========================================================= */

@media (max-width: 767px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overscroll-behavior-x: none;
    }

    body.home,
    body.home .site,
    body.home .site-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    body.home section,
    body.home footer,
    body.home header {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * Header category row may scroll internally,
     * but must never widen the document.
     */
    body.home .main-navigation,
    body.home .main-navigation > .container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.home .mobile-category-scroll {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.home .mobile-category-scroll .primary-menu {
        width: max-content !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    /*
     * Keep all homepage carousel widths inside their viewports.
     */
    body.home .home-products__viewport,
    body.home .brand-carousel,
    body.home .brand-carousel__viewport,
    body.home .testimonials-viewport,
    body.home .collections-viewport {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.home .home-products__track,
    body.home .brand-carousel__track,
    body.home .testimonials-track,
    body.home .collections-track {
        min-width: 0 !important;
    }

    /*
     * Off-canvas drawer must follow the viewport,
     * not the document's scroll width.
     */
    .mobile-drawer {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        overflow: hidden !important;
        contain: layout paint !important;
    }

    .mobile-drawer__backdrop {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
    }

    .mobile-drawer__panel {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: min(88%, 360px) !important;
        max-width: 360px !important;
    }

    body > .mobile-bottom-nav {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================================
   BS Sales System — Theme-safe light and dark mode
========================================================= */

.bs-emp-wrap,
.bsq-card {
    --bs-bg: #ffffff;
    --bs-surface: #ffffff;
    --bs-surface-soft: #f4f6f8;
    --bs-input: #ffffff;
    --bs-text: #101828;
    --bs-muted: #667085;
    --bs-border: #dfe3e8;
    --bs-button: #101828;
    --bs-button-text: #ffffff;

    color: var(--bs-text) !important;
}

/*
 * Support the common dark-mode selectors used by the theme
 * and browser preference as a fallback.
 */
html[data-theme="dark"] .bs-emp-wrap,
html[data-theme="dark"] .bsq-card,
body[data-theme="dark"] .bs-emp-wrap,
body[data-theme="dark"] .bsq-card,
body.dark-mode .bs-emp-wrap,
body.dark-mode .bsq-card,
body.is-dark .bs-emp-wrap,
body.is-dark .bsq-card,
body.theme-dark .bs-emp-wrap,
body.theme-dark .bsq-card,
.dark .bs-emp-wrap,
.dark .bsq-card {
    --bs-bg: #050d11;
    --bs-surface: #10191f;
    --bs-surface-soft: #172229;
    --bs-input: #202c33;
    --bs-text: #f5f7f8;
    --bs-muted: #a8b2b9;
    --bs-border: #33424b;
    --bs-button: #f5f7f8;
    --bs-button-text: #071015;
}

/* Employee page containers */
.bs-emp-search,
.bs-emp-cart,
.bs-emp-card,
.bs-emp-modal .box {
    background: var(--bs-surface) !important;
    color: var(--bs-text) !important;
    border-color: var(--bs-border) !important;
}

/* Text */
.bs-emp-wrap h1,
.bs-emp-wrap h2,
.bs-emp-wrap h3,
.bs-emp-wrap h4,
.bs-emp-title,
.bs-emp-price,
.bs-emp-cart th,
.bs-emp-cart td,
.bs-emp-summary,
.bs-emp-modal .top,
.bs-emp-modal strong,
.bs-emp-modal #bsEmpTotal,
.bs-emp-modal code {
    color: var(--bs-text) !important;
}

.bs-emp-search-note,
.bs-emp-note,
.bs-emp-loading {
    color: var(--bs-muted) !important;
}

/* Inputs and selects */
.bs-emp-search input,
.bs-emp-row input,
.bs-emp-row select,
.bsq-card input,
.bsq-card textarea,
.bsq-card select {
    background: var(--bs-input) !important;
    color: var(--bs-text) !important;
    border-color: var(--bs-border) !important;
    caret-color: var(--bs-text) !important;
}

.bs-emp-search input::placeholder,
.bsq-card input::placeholder,
.bsq-card textarea::placeholder {
    color: var(--bs-muted) !important;
    opacity: 1 !important;
}

.bs-emp-row select option,
.bsq-card select option {
    background: var(--bs-surface) !important;
    color: var(--bs-text) !important;
}

/* Employee cart table */
.bs-emp-cart table,
.bs-emp-cart thead,
.bs-emp-cart tbody,
.bs-emp-cart tr,
.bs-emp-cart th,
.bs-emp-cart td {
    background: transparent !important;
    border-color: var(--bs-border) !important;
}

/* Modal */
.bs-emp-modal #bsEmpTotal,
.bs-emp-modal code {
    background: var(--bs-surface-soft) !important;
    border-color: var(--bs-border) !important;
}

.bs-emp-modal .close {
    background: var(--bs-surface-soft) !important;
    color: var(--bs-text) !important;
    border: 1px solid var(--bs-border) !important;
}

/* Neutral catalogue image area */
.bs-emp-card .bs-emp-img {
    background: #ffffff !important;
}

/* Quick-order card */
.bsq-card {
    background: var(--bs-surface) !important;
    color: var(--bs-text) !important;
    border-color: var(--bs-border) !important;
}

.bsq-card h1,
.bsq-card h2,
.bsq-card h3,
.bsq-card label {
    color: var(--bs-text) !important;
}

.bsq-hint {
    color: var(--bs-muted) !important;
}

/* Main quick-order button */
.bsq-card button[type="submit"] {
    background: var(--bs-button) !important;
    color: var(--bs-button-text) !important;
}

/* Phone-country component */
.bsq-card .iti {
    width: 100% !important;
}

.bsq-card .iti__selected-country,
.bsq-card .iti__selected-dial-code,
.bsq-card .iti__country-name,
.bsq-card .iti__dial-code {
    color: var(--bs-text) !important;
}

.bsq-card .iti__country-list {
    background: var(--bs-surface) !important;
    color: var(--bs-text) !important;
    border-color: var(--bs-border) !important;
}

.bsq-card .iti__country:hover,
.bsq-card .iti__country.iti__highlight {
    background: var(--bs-surface-soft) !important;
}

/*
 * Fallback when the browser itself is using dark mode.
 * Explicit light-theme selectors below can still override it.
 */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"])
    .bs-emp-wrap,

    html:not([data-theme="light"])
    .bsq-card {
        --bs-bg: #050d11;
        --bs-surface: #10191f;
        --bs-surface-soft: #172229;
        --bs-input: #202c33;
        --bs-text: #f5f7f8;
        --bs-muted: #a8b2b9;
        --bs-border: #33424b;
        --bs-button: #f5f7f8;
        --bs-button-text: #071015;
    }
}

/* Explicit light mode wins over system preference */
html[data-theme="light"] .bs-emp-wrap,
html[data-theme="light"] .bsq-card,
body[data-theme="light"] .bs-emp-wrap,
body[data-theme="light"] .bsq-card,
body.light-mode .bs-emp-wrap,
body.light-mode .bsq-card {
    --bs-bg: #ffffff;
    --bs-surface: #ffffff;
    --bs-surface-soft: #f4f6f8;
    --bs-input: #ffffff;
    --bs-text: #101828;
    --bs-muted: #667085;
    --bs-border: #dfe3e8;
    --bs-button: #101828;
    --bs-button-text: #ffffff;
}