/* =========================================================
   STREET BOIS — GLOBAL THEME
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root{

    --black:#111111;
    --black-2:#181818;
    --black-3:#222222;

    --white:#ffffff;
    --off-white:#f7f7f7;
    --soft-white:#fafafa;

    --text:#111111;
    --text-soft:#666666;
    --text-muted:#888888;

    --border:#e7e7e7;
    --border-dark:#2b2b2b;

    --success:#16a34a;
    --danger:#dc2626;
    --warning:#d97706;

    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:20px;
    --radius-xl:26px;

    --shadow-sm:
        0 4px 14px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 24px rgba(0,0,0,.07);

    --shadow-lg:
        0 14px 35px rgba(0,0,0,.09);

    --transition:
        .25s ease;

}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    padding:0;

    width:100%;
    min-height:100vh;

    background:var(--white);
    color:var(--text);

    font-family:
        "Montserrat",
        "Poppins",
        Arial,
        sans-serif;

    overflow-x:hidden;

    transition:
        background .25s ease,
        color .25s ease;

}

body,
button,
input,
textarea,
select{

    font-family:
        "Montserrat",
        "Poppins",
        Arial,
        sans-serif;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    font:inherit;

}

button,
a,
input,
textarea,
select{

    -webkit-tap-highlight-color:transparent;

}


/* =========================================================
   GLOBAL TEXT
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{

    margin-top:0;

}

p{

    margin-top:0;

}

strong{

    font-weight:700;

}


/* =========================================================
   GLOBAL SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{

    width:9px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:#bdbdbd;
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#888;

}


/* =========================================================
   HEADER — GENERAL
   ========================================================= */

header,
.site-header,
.header{

    background:var(--white);

    color:var(--text);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


/* =========================================================
   COMMON HEADER
   ========================================================= */

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:80px;

    background:#fff;

    border-bottom:1px solid #eeeeee;

    z-index:9999;

}

.header-container{

    width:100%;
    max-width:1400px;

    height:100%;

    margin:auto;

    padding:0 40px;

    display:flex;

    align-items:center;
    justify-content:space-between;

}

.logo{

    color:#111;

    font-size:30px;

    font-weight:800;

    letter-spacing:4px;

    white-space:nowrap;

}

.logo:hover{

    color:#555;

}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.desktop-nav{

    display:flex;

    align-items:center;

    gap:38px;

}

.desktop-nav a{

    position:relative;

    color:#111;

    font-size:14px;

    font-weight:600;

    padding:8px 0;

}

.desktop-nav a:hover{

    color:#666;

}

.desktop-nav a.active{

    font-weight:800;

}

.desktop-nav a.active::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:0;

    height:2px;

    background:#111;

}


/* =========================================================
   OLD NAV SUPPORT
   ========================================================= */

.navbar{

    display:flex;

    align-items:center;

}

.navbar a{

    color:#111;

}

.nav-links{

    display:flex;

    align-items:center;

}

.nav-links a{

    color:#111;

}

.nav-icons{

    display:flex;

    align-items:center;

    gap:20px;

}


/* =========================================================
   HEADER ICONS
   ========================================================= */

.header-icons{

    display:flex;

    align-items:center;

    gap:24px;

}

.header-icons a,
.nav-icons a{

    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#111;

    font-size:19px;

}

.header-icons a:hover,
.nav-icons a:hover{

    color:#666;

}


/* =========================================================
   BADGES
   ========================================================= */

.icon-badge{

    position:relative;

}

.icon-badge span,
#cartCount,
#wishlistCountNav,
#wishlistCountBadge{

    position:absolute;

    top:-9px;
    right:-11px;

    min-width:19px;
    height:19px;

    padding:0 4px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#111;

    color:#fff;

    font-size:10px;

    font-weight:700;

    line-height:1;

}


/* =========================================================
   GENERIC BUTTONS
   ========================================================= */

.btn,
.cart-btn,
.wishlist-btn{

    border:1px solid #111;

    background:#111;

    color:#fff;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}

.btn:hover,
.cart-btn:hover,
.wishlist-btn:hover{

    background:#000;

}

.btn:active,
.cart-btn:active,
.wishlist-btn:active{

    transform:scale(.98);

}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.btn-secondary{

    border:1px solid #111;

    background:#fff;

    color:#111;

    cursor:pointer;

}

.btn-secondary:hover{

    background:#111;

    color:#fff;

}


/* =========================================================
   FORMS
   ========================================================= */

input,
textarea,
select{

    color:#111;

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    transition:
        border-color .25s ease,
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;

}

input:focus,
textarea:focus,
select:focus{

    border-color:#111;

    box-shadow:
        0 0 0 3px rgba(0,0,0,.05);

}

input::placeholder,
textarea::placeholder{

    color:#999;

}


/* =========================================================
   COMMON CARDS
   ========================================================= */

.product-card,
.collection-card,
.card,
.stats,
.stat-card,
.testimonial-card,
.faq-item,
.menu-item,
.settings-card,
.form-box,
.wishlist-box,
.login-box,
.modal-box,
.popup-box{

    background:#fff;

    color:#111;

    border:1px solid var(--border);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

}


/* =========================================================
   LIGHT CARD HOVER
   ========================================================= */

.product-card:hover,
.card:hover,
.settings-card:hover,
.form-box:hover,
.wishlist-box:hover{

    box-shadow:var(--shadow-sm);

}


/* =========================================================
   PRODUCT SUPPORT
   ========================================================= */

.product-info h3,
.product-info p{

    color:#111;

}

.card-sizes span{

    border:1px solid #ccc;

    color:#111;

    background:#fff;

}


/* =========================================================
   POPUPS / MODALS
   ========================================================= */

.product-modal,
.wishlist-modal,
.login-modal{

    background:rgba(0,0,0,.55);

}

.modal-box,
.wishlist-box,
.login-box,
.popup-box{

    background:#fff;

    color:#111;

}


/* =========================================================
   TABLES
   ========================================================= */

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

}

thead{

    background:#f5f5f5;

}

th,
td{

    color:#111;

    border-bottom:1px solid #e7e7e7;

}

tbody tr:hover{

    background:#fafafa;

}


/* =========================================================
   FOOTER
   ========================================================= */

footer{

    background:#050505;

    color:#fff;

}

footer h2,
footer h3{

    color:#fff;

}

footer p,
footer a{

    color:#aaa;

}

footer a:hover{

    color:#fff;

}


/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */

.mobile-bottom-nav{

    display:none;

}

@media(max-width:768px){

    body{

        padding-bottom:82px;

    }

    .mobile-bottom-nav{

        position:fixed;

        left:0;
        bottom:0;

        width:100%;
        height:68px;

        display:flex;

        align-items:center;
        justify-content:space-around;

        padding:
            0 10px;

        background:#fff;

        /* NO TOP LINE */

        border:none;

        box-shadow:
            0 -5px 20px rgba(0,0,0,.10);

        z-index:99999;

    }

    .mobile-bottom-nav a{

        position:relative;

        width:46px;
        height:46px;

        display:flex;

        align-items:center;
        justify-content:center;

        color:#666;

        font-size:20px;

        border-radius:50%;

        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;

    }

    .mobile-bottom-nav a:hover{

        transform:translateY(-2px);

    }

    .mobile-bottom-nav a.active{

        background:#111;

        color:#fff;

    }

    .mobile-bottom-nav a i{

        pointer-events:none;

    }

    .mobile-bottom-nav span{

        position:absolute;

        top:-5px;
        right:-5px;

        min-width:18px;
        height:18px;

        padding:0 4px;

        display:flex;

        align-items:center;
        justify-content:center;

        background:#111;

        color:#fff;

        border-radius:50%;

        font-size:9px;

        font-weight:700;

    }

}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media(max-width:768px){

    .site-header{

        height:68px;

    }

    .header-container{

        padding:0 18px;

    }

    .logo{

        font-size:21px;

        letter-spacing:2.5px;

    }

    .desktop-nav,
    .nav-links{

        display:none;

    }

    .header-icons{

        gap:18px;

    }

    .header-icons a{

        font-size:17px;

    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:420px){

    .header-container{

        padding:0 14px;

    }

    .logo{

        font-size:19px;

    }

    .header-icons{

        gap:14px;

    }

    .mobile-bottom-nav{

        height:65px;

    }

    .mobile-bottom-nav a{

        width:43px;
        height:43px;

        font-size:19px;

    }

}


/* =========================================================
   DARK MODE — BODY
   ========================================================= */

body.dark{

    background:#0f0f0f;

    color:#fff;

}


/* =========================================================
   DARK MODE — HEADER
   ========================================================= */

body.dark header,
body.dark .header,
body.dark .site-header{

    background:#111;

    color:#fff;

    border-bottom:1px solid #222;

    box-shadow:none;

}

body.dark .logo,
body.dark .desktop-nav a,
body.dark .navbar a,
body.dark .header nav a,
body.dark .nav-links a,
body.dark .header-icons a,
body.dark .nav-icons a{

    color:#fff;

}

body.dark .desktop-nav a:hover,
body.dark .navbar a:hover,
body.dark .header nav a:hover{

    color:#ccc;

}

body.dark .desktop-nav a.active::after{

    background:#fff;

}


/* =========================================================
   DARK MODE — TEXT
   ========================================================= */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6{

    color:#fff;

}

body.dark p,
body.dark label,
body.dark small,
body.dark li{

    color:#ccc;

}

body.dark strong{

    color:#fff;

}

body.dark a{

    color:#fff;

}


/* =========================================================
   DARK MODE — SECTIONS
   ========================================================= */

body.dark section{

    color:#fff;

}


/* =========================================================
   DARK MODE — CARDS
   ========================================================= */

body.dark .product-card,
body.dark .collection-card,
body.dark .card,
body.dark .stats,
body.dark .stat-card,
body.dark .testimonial-card,
body.dark .faq-item,
body.dark .menu-item,
body.dark .settings-card,
body.dark .form-box,
body.dark .wishlist-box,
body.dark .login-box,
body.dark .modal-box,
body.dark .popup-box{

    background:#1b1b1b;

    color:#fff;

    border:1px solid #2a2a2a;

    box-shadow:none;

}


/* =========================================================
   DARK MODE — PRODUCT
   ========================================================= */

body.dark .product-info h3,
body.dark .product-info p{

    color:#fff;

}

body.dark .card-sizes span{

    border-color:#555;

    color:#fff;

    background:#1b1b1b;

}


/* =========================================================
   DARK MODE — INPUTS
   ========================================================= */

body.dark input,
body.dark textarea,
body.dark select{

    background:#222;

    color:#fff;

    border:1px solid #444;

}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus{

    border-color:#fff;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.06);

}

body.dark input::placeholder,
body.dark textarea::placeholder{

    color:#888;

}


/* =========================================================
   DARK MODE — BUTTONS
   ========================================================= */

body.dark button{

    color:#111;

    background:#fff;

}

body.dark .btn,
body.dark .cart-btn,
body.dark .wishlist-btn{

    background:#fff;

    color:#111;

    border-color:#fff;

}

body.dark .btn:hover,
body.dark .cart-btn:hover,
body.dark .wishlist-btn:hover{

    background:#e9e9e9;

}


/* =========================================================
   DARK MODE — SECONDARY BUTTONS
   ========================================================= */

body.dark .btn-secondary{

    background:#1b1b1b;

    color:#fff;

    border-color:#555;

}

body.dark .btn-secondary:hover{

    background:#fff;

    color:#111;

}


/* =========================================================
   DARK MODE — TABLES
   ========================================================= */

body.dark table{

    background:#1b1b1b;

}

body.dark thead{

    background:#181818;

}

body.dark tbody tr{

    border-color:#2a2a2a;

}

body.dark tbody tr:hover{

    background:#222;

}

body.dark td,
body.dark th{

    color:#fff;

    border-color:#2a2a2a;

}


/* =========================================================
   DARK MODE — FOOTER
   ========================================================= */

body.dark footer{

    background:#000;

    color:#fff;

}

body.dark footer h2,
body.dark footer h3{

    color:#fff;

}

body.dark footer p,
body.dark footer a{

    color:#bbb;

}

body.dark footer a:hover{

    color:#fff;

}


/* =========================================================
   DARK MODE — POPUPS
   ========================================================= */

body.dark .product-modal,
body.dark .wishlist-modal,
body.dark .login-modal{

    background:rgba(0,0,0,.82);

}

body.dark .modal-box,
body.dark .wishlist-box,
body.dark .login-box,
body.dark .popup-box{

    background:#1b1b1b;

    color:#fff;

}


/* =========================================================
   DARK MODE — BADGES
   ========================================================= */

body.dark #cartCount,
body.dark #wishlistCountNav,
body.dark #wishlistCountBadge,
body.dark .icon-badge span{

    background:#fff;

    color:#111;

}


/* =========================================================
   DARK MODE — ICONS
   ========================================================= */

body.dark i{

    color:inherit;

}


/* =========================================================
   DARK MODE — FAQ
   ========================================================= */

body.dark .faq-question{

    color:#fff;

}

body.dark .faq-answer{

    color:#ccc;

}


/* =========================================================
   DARK MODE — MOBILE NAV
   ========================================================= */

body.dark .mobile-bottom-nav{

    background:#111;

    /* STILL NO TOP LINE */

    border:none;

    box-shadow:
        0 -5px 20px rgba(0,0,0,.55);

}

body.dark .mobile-bottom-nav a{

    color:#aaa;

}

body.dark .mobile-bottom-nav a.active{

    background:#fff;

    color:#111;

}

body.dark .mobile-bottom-nav span{

    background:#fff;

    color:#111;

}


/* =========================================================
   DARK MODE — SCROLLBAR
   ========================================================= */

body.dark ::-webkit-scrollbar{

    width:9px;

}

body.dark ::-webkit-scrollbar-track{

    background:#111;

}

body.dark ::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:20px;

}

body.dark ::-webkit-scrollbar-thumb:hover{

    background:#666;

}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.order-summary{

    background:#fff;

    color:#111;

}

body.dark .order-summary{

    background:#1b1b1b;

    border:1px solid #2a2a2a;

    color:#fff;

}

body.dark .order-summary h1,
body.dark .order-summary h2,
body.dark .order-summary h3,
body.dark .order-summary p,
body.dark .order-summary span,
body.dark .order-summary strong,
body.dark .order-summary label{

    color:#fff;

}

body.dark .order-summary .total{

    color:#fff;

}

body.dark .order-summary hr{

    border-color:#333;

}

body.dark .order-summary button{

    background:#fff;

    color:#111;

}


/* =========================================================
   COMMON STATUS COLORS
   ========================================================= */

.status-badge{

    display:inline-flex;

    align-items:center;
    justify-content:center;

}

.status-badge.processing{

    background:#fff8e6;

    color:#d97706;

}

.status-badge.packed{

    background:#eff6ff;

    color:#2563eb;

}

.status-badge.shipped{

    background:#f3f4f6;

    color:#374151;

}

.status-badge.delivered{

    background:#ecfdf5;

    color:#059669;

}

.status-badge.cancelled{

    background:#fef2f2;

    color:#dc2626;

}


/* =========================================================
   DARK STATUS BADGES
   ========================================================= */

body.dark .status-badge.processing{

    background:#3a2b0d;

    color:#fbbf24;

}

body.dark .status-badge.packed{

    background:#102542;

    color:#60a5fa;

}

body.dark .status-badge.shipped{

    background:#292929;

    color:#d1d5db;

}

body.dark .status-badge.delivered{

    background:#0b3022;

    color:#34d399;

}

body.dark .status-badge.cancelled{

    background:#3a1515;

    color:#f87171;

}


/* =========================================================
   COMMON SHADOWS
   ========================================================= */

.shadow-sm{

    box-shadow:var(--shadow-sm);

}

.shadow-md{

    box-shadow:var(--shadow-md);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

body.dark .shadow-sm,
body.dark .shadow-md,
body.dark .shadow-lg{

    box-shadow:none;

}


/* =========================================================
   SELECTION
   ========================================================= */

::selection{

    background:#111;

    color:#fff;

}

body.dark ::selection{

    background:#fff;

    color:#111;

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:2px solid #111;

    outline-offset:3px;

}

body.dark button:focus-visible,
body.dark a:focus-visible,
body.dark input:focus-visible,
body.dark textarea:focus-visible,
body.dark select:focus-visible{

    outline-color:#fff;

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        transition:none !important;

        animation:none !important;

    }

}/* ============================================================
   PREVENT MOBILE ZOOM ON FORM FIELDS
============================================================ */

@media (max-width: 768px) {

    input,
    textarea,
    select {
        font-size: 16px !important;
    }

}