/* ==================================================
   RESET GLOBAL
================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;

}

/* ==================================================
   HEADER
================================================== */
.site-header {
    width: 100%;
    position: relative;
    z-index: 100;
}

/* ==================================================
   NAVBAR
================================================== */
.navbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    /* background: url(images/461185-nebula-galaxy-stars-digital-art-dark-matter.png)
        center / cover no-repeat; */
            background-color: #151414;
    color: #fff;
    justify-content: space-between;
}

/* LOGO */
.navbar-logo {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

/* ==================================================
   SEARCH
================================================== */
.navbar-search {
    flex: auto;
    display: flex;
    justify-content: center;
}

.navbar-search input {
    width: 100%;
    max-width: 340px;
    padding: 8px 12px;
    border-radius: 5px;
    border: none;
    outline: none;
}

/* ==================================================
   RIGHT AREA
================================================== */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
        flex-wrap: wrap;
}

.nav-contact
{
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.nav-contact:hover
 {
    color: #e53637;
}

/* ==================================================
   USER MENU
================================================== */
.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 260px;
    background: #111;
    color: #fff;
    padding: 14px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,.45);
    z-index: 3000;
}

.user-dropdown-header {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.user-dropdown-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.user-dropdown a {
    display: block;
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.user-dropdown a:hover {
    color: #e53637;
}

/* ==================================================
   CATEGORY BAR
================================================== */
.category-bar {
    background: #1e1e1e;
        padding: 8px 0;
    position: relative;
}

.category-list {
    display: flex;
    gap: 18px;
    padding: 8px 15px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.cat-item {
    position: relative;
}

.cat-toggle {
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    /* display: flex; */
    align-items: center;
    gap: 6px;
}

.cat-toggle:hover {
    color: #e53637;
}

/* ==================================================
   MEGA DROPDOWN BASE
================================================== */
.cat-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(0,0,0,.5);
    z-index: 2000;

    min-width: 600px;

    flex-wrap: wrap;
    gap: 30px;
    background-color: black;
}

.cat-item.open > .cat-dropdown {
    display: flex;
}

.cat-dropdown a {
    display: block;
    padding: 8px 14px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.cat-dropdown a:hover {
    background: rgba(229,54,55,.15);
}

.mega-col {
    min-width: 160px;
    flex: 1;
}

/* ==================================================
   MEGA INNER WRAPPER
================================================== */
.cat-dropdown-inner {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 40px;
    width: 100%;
}

/* ==================================================
   BURGER
================================================== */
.mobile-burger {
    display: none;
      font-size: 24px;
    cursor: pointer;
    color: #fff;
    border: none;
    line-height: normal;
}

/* ==================================================
   TABLET
================================================== */
@media (max-width: 768px) {

    .navbar {
        flex-wrap: wrap;
    }

    .navbar-search {
        order: 2;
        width: 100%;
        margin-top: 10px;
    }

    .navbar-search input {
        max-width: 100%;
    }
}

/* ==================================================
   MOBILE
================================================== */
@media (max-width: 550px) {

    .mobile-burger {
        display: block;
    }

    body.mobile-open .navbar {
        flex-wrap: wrap;
        /* gap: 10px; */
                padding: 12px 20px;
    }

    .navbar-right {
        flex-wrap: wrap;
        /* margin-left: auto; */
    }

    /* user dropdown mobile */
    .user-dropdown {
        position: relative;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    /* category bar hidden until burger */
    .category-bar {
        display: none;
        width: 100%;
    }

    body.mobile-open .category-bar {
        display: block;
        max-height: 65vh;
        overflow-y: auto;
    }

    /* vertical categories */
    .category-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .cat-item {
               width: 100%;
        border-bottom: 1px solid #222;
        padding: 14px 16px;
        padding-inline: inherit;
        display: ruby;
        color: white;
    }

    .cat-toggle {
       width: 100%;
        padding: 14px 16px;
        justify-content: space-between;
        margin-right: 10%;
    }

    /* mobile dropdown */
    .cat-dropdown {
        position: relative !important;
        top: auto;
        left: auto;
        min-width: 100%;
        width: 100%;
        padding: 6px 0;
        border-radius: 0;
        box-shadow: none;
        flex-direction: column;
        gap: 0;
                margin-top: 10px;
        
    }

    .cat-dropdown a {
        padding: 12px 18px;
    }

    /* product row full width */
    .product-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: black;
    }

    .product-row li,
    .product-row a {
        width: 100%;
        display: block;
    }
}

/* ==================================================
   DESKTOP MEGA FULL WIDTH
================================================== */
@media (min-width: 551px) {

    .cat-item {
        position: static;
                display: contents;
    }

    .cat-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-width: 100%;

        padding: 28px 40px;
        border-radius: 0;
        box-shadow: 0 12px 30px rgba(0,0,0,.55);
/*ancien style 
        max-height: 65vh;
        overflow-y: auto; */
                max-height: 100%;
        min-height: max-content;
                color: white;
    }
}

/* ==================================================
   MINI
================================================== */
@media (max-width: 320px) {
    .navbar-search input {
        font-size: 15px;
        padding: 12px;
    }
}






























































/* SYSTEME CART HEADER STYLE */

/* ==============================
   CART WRAPPER
============================== */

.cart-wrapper{
display:flex;
align-items:center;
gap:6px;
position:relative;
}

.cart-link{
display:flex;
align-items:center;
gap:8px;
color:#fff;
text-decoration:none;
}

.cart-icon-box{
position:relative;
font-size:20px;
line-height:1;
}

.cart-count{
position:absolute;
top:-6px;
right:-6px;
background:#e53637;
color:#fff;
font-size:11px;
padding:2px 5px;
border-radius:50%;
font-weight:700;
min-width:18px;
text-align:center;
}

.cart-total{
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    font-size: small;
}

.cart-toggle{
background:none;
border:none;
color:#fff;
cursor:pointer;
font-size:12px;
}


/* ==============================
   DROPDOWN BASE
============================== */

.cart-dropdown{
display:none;
background:#111;
color:#fff;
border-top:1px solid #222;
}

.cart-dropdown.active{
display:flex;
flex-direction:column;
}


/* ==============================
   DESKTOP — FLOAT RIGHT
============================== */

@media (min-width:551px){

.cart-dropdown{
position:absolute;
right:0;
/* top:calc(100% + 10px); */
width:380px;
border:1px solid #222;
border-radius:3px;
box-shadow:0 12px 30px rgba(0,0,0,.5);
z-index:9000;

}

}


/* ==============================
   MOBILE — PUSH LAYOUT
============================== */

@media (max-width:550px){



.cart-link{
width:100%;
}

.cart-dropdown{
position:relative;
width:100%;
border-bottom:1px solid #222;
}

}


/* ==============================
   ZONE PRODUITS — SCROLL AUTO
============================== */

.cart-dropdown-items{
overflow-y:auto;
overflow-x:hidden;
max-height:320px; /* scroll si trop de produits */
padding: 10px;
}


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

.cart-dropdown-items::-webkit-scrollbar{
width:10px;
}

.cart-dropdown-items::-webkit-scrollbar-track{
background:#111;
}

.cart-dropdown-items::-webkit-scrollbar-thumb{
background:#333;
border-radius:8px;
border:2px solid #111;
}

.cart-dropdown-items::-webkit-scrollbar-thumb:hover{
background:#555;
}

.cart-dropdown-items{
scrollbar-width:thin;
scrollbar-color:#333 #111;
}


/* ==============================
   ITEMS — COMPACT + RESPONSIVE
============================== */
.cart-item-title {
    display: inline-block;
    max-width: 140px;   /* largeur fixe à adapter */
    white-space: normal; /* autorise le retour à la ligne */
    word-wrap: break-word;
    font-weight: 600;
}

.cart-item{
display:flex;
gap:10px;
padding:10px;
border-bottom:1px solid #222;
text-decoration:none;
color:#fff;
align-items:flex-start;
flex-wrap: wrap;


}

.cart-item:hover{
background:#1a1a1a;
}

.cart-item img{
width:50px;
height:50px;
object-fit:cover;
border-radius:6px;
flex-shrink:0;
}

.cart-item-info{
flex:1;
/* width: min-content; */
font-size:13px;
line-height:1.2;
/* min-width:0; */
}

.cart-meta{
/* font-size:11px; */
opacity:.85;
margin-top:3px;
display:flex;
flex-wrap:wrap;
gap:6px;
align-items: baseline;
justify-self: right;
}

.cart-price-row{
/* display:flex; */
justify-content:space-between;
margin-top:4px;
font-weight:700;
font-size:12px;
justify-self: right;

}


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

.cart-dropdown-total{
display:flex;
justify-content:space-between;
padding:12px;
background:#000;
font-weight:700;
font-size:14px;
flex-shrink:0;
}

.cart-dropdown-btn{
display:block;
width:100%;
text-align:center;
padding:6px;
background:#e53637;
color:#fff !important;
text-decoration:none;
font-weight:700;
flex-shrink:0;
border-radius: 3px;
}

.cart-dropdown-btn:hover{
background:#c22c2d;
color:#fff !important;
}


/* ==============================
   ULTRA SMALL — STABLE
============================== */

@media (max-width:360px){

.cart-item img{
width:46px;
height:46px;
}

.cart-item-info{
font-size:12px;
}

.cart-price-row{
font-size:11px;
}

}


/* ==============================
   EMPTY
============================== */

.cart-empty{
padding:18px;
text-align:center;
opacity:.8;
}