.cs-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;

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

    background:#fff;
    border-bottom:2px solid #111;

    z-index:1000;
}
.cs-logo img{
    width:90%;
    display:block;
    text-align:center;
    margin:auto;
}
/* IZQUIERDA */

.cs-nav-left{
    position:absolute;
    left:32px;
    display:flex;
    gap:10px;
}
.cs-menu-item{
    cursor:pointer;
    font-size:15px;
}
.cs-menu-item{
    position: relative;
    background: none;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    color: #111;
    z-index: 1;
    transition: color .25s ease;
}

.cs-menu-item.active{
    color: #fff;
}

.cs-menu-item.active::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    padding: 8px 16px;
    z-index: -1;
}
/* DERECHA */

.cs-nav-right{
    position:absolute;
    right:20px;
    display:flex;
    gap:20px;
    align-items:center;
}

.cs-nav-right a{
    color:#000;
    text-decoration:none;
    font-size:16px;
}
.cs-cart-icon{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#FF9D00;
    color:transparent;
    font-size:0;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .2s ease;
}

.cs-cart-icon.has-items{
    width:30px;
    height:30px;
    color:#fff;
    font-size:15px;
}

.cs-cart-icon:hover{
    transform:scale(1.1);
}
.cs-btn-login{
    padding:0px 5px;
}

/* ==========================
   MEGA MENU 
========================== */
.cs-mega-menu{
    position:fixed;
    top:64px;
    left:0;

    width:100%;

    background:#fff;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.3s;

    z-index:999;
}


.cs-mega-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.cs-mega-column{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:30px 0 30px 8px;
    transition:all .25s ease;
}
.cs-mega-column a{
    text-decoration:none;
    color:#111;
    font-size:15px;
    line-height:1.3;
    transition:.25s ease;
}

.cs-mega-column a:hover{
    opacity:.6;
}
.cs-menu-item{
    background:none;
    border:none;
    padding: 6px 8px;
    cursor:pointer;
    color:inherit;
    font:inherit;
}

.cs-menu-item:focus{
    outline:none;
}
.hamburger,
.audio-toggle{
    display:none;
}
.audio-toggle svg{
    width:20px;
    height:20px;
    fill:black;
}
.icon-pause{
    display:none;
}
.cs-mobile-boutique {
    display: none;
    color: inherit;
    text-decoration: none;
    font-size: 16px;
}

@media (max-width: 1400px) {
    .cs-mobile-boutique {
        display: block;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
}
@media (max-width: 628px) {
    .cs-mobile-boutique {
        font-size: 14px;
    }
}

.hamburger{
    border:none;
    background:none;
    cursor:pointer;
}
.hamburger span{
    display:block;
    width:24px;
    height:2px;
    background:#000;
    transition:.25s;
}
.cs-mobile-menu{
    display:none;
    background:#fff;
    border-bottom:1px solid #ddd;
    padding:24px;

    position:fixed;
    top:64px;
    left:0;
    width:100%;
    z-index:999;
}

.cs-mobile-menu.open{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.cs-mobile-menu a{
    color:#111;
    text-decoration:none;
    transition:.25s;
    font-size: 14px;
}

.cs-mobile-menu a:hover{
    opacity:.6;
}

.cs-mobile-menu hr{
    width:100%;
    border:none;
    border-top:1px solid #ddd;
}
@media(max-width:1400px){
    .cs-nav-left,
    .cs-nav-right{
        display:none;
    }
   .cs-logo img{
        width:70%;
    }
    .hamburger{
        display:flex;
        flex-direction:column;
        gap:4px;

        position:absolute;
        left:20px;
    }
    .audio-toggle{
        display:flex;
        align-items:center;
        justify-content:center;

        position:absolute;
        right:20px;

    }
    .cs-mega-menu{
        display:none !important;
    }
}
@media (max-width: 768px) {
    .cs-logo img{
        width: 55%;
    }
}
.mobile-title{
    width:100%;
    background:none;
    border:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
     font-size: 14px;
}

.mobile-submenu{
    display:none;
}

.mobile-submenu.open{
    display:block;
}

.mobile-submenu a{
    display:block;
    padding:6px 0 6px 20px;
}
.cs-lang-active{
    color:#FF9D00 !important;
}
.cs-lang-switcher{
    display: flex;
    align-items: center;
    gap: 4px;
}
/* ====  AUDIO TOGGLE  ==== */
.audio-toggle{
    border:none;
    background:none;
    cursor:pointer;
}
.audio-toggle svg{
    width:16px;
    height:16px;
    fill:#000;
}
.icon-pause{
    display:none;
}
.audio-toggle.playing .icon-play{
    display:none;
}
.audio-toggle.playing .icon-pause{
    display:block;
}
.cs-secondary-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 10;

    display: flex;
    justify-content: center;
    gap: 30px;
    border-bottom: 2px solid #000000;
    margin-bottom: 64px;
    padding: 20px 0;
    background-color: white;
}

@media (max-width: 768px) {

    .cs-secondary-menu {
        justify-content: flex-start;
        gap: 24px;

        padding: 23px 16px;
        margin-bottom: 48px;

        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cs-secondary-menu::-webkit-scrollbar {
        display: none;
    }

    .cs-secondary-menu a {
        flex: 0 0 auto;
    }

}

.cs-secondary-menu a {
    position: relative;
    color: #111;
    text-decoration: none;

    font-size: clamp(0.7rem, 2vw, 16px);
    letter-spacing: 2px;
    border-bottom: 1px solid transparent;
}
.cs-secondary-menu a:hover {
    border-bottom: 1px solid #000;
}
.cs-secondary-menu a.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;

    width: 100%;
    height: 1px;

    background: #000;
    transform: translateX(-50%);
}

/*==================================================
    MODAL AGE Y COOKIES
==================================================*/

.cs-modal{
    position: fixed;
    inset:0;

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

    overflow:hidden;
    padding:64px;

    background:rgba(0,0,0,.92);
    z-index:1000000000;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.cs-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/*==================================================
    WINDOW
==================================================*/

.cs-modal__window{
    width:auto;
    max-width:1200px;

    max-height:calc(100vh - 128px);

    overflow:hidden;

    padding:70px 80px;
    text-align:center;
}

.cs-modal__window::-webkit-scrollbar{
    width:8px;
}

.cs-modal__window::-webkit-scrollbar-thumb{
    background:#cfcfcf;
}
.cs-cookies{
    width: 100%;
    max-width: 900px;
    background:#fff;
    padding:64px;

    height:500px;
    overflow-y:scroll;
  
}
.cs-cookies::-webkit-scrollbar {
    width: 4px;
}

.cs-cookies::-webkit-scrollbar-track {
    background: #fdfdfd;
    width: 2px;
}

.cs-cookies::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 0; /* Quita las esquinas redondeadas */
}

.cs-cookies::-webkit-scrollbar-thumb:hover {
    background: #020202;
}
.cs-cookie-config{
    margin-top:40px;
    border-top:1px solid #000;

    display: none;
}

.cs-cookie-config.show{
    display: block;
}
.cs-cookies h2{
    font-family: "Europa Grotesk SH Con", sans-serif;
}
.cs-check input[type="checkbox"]{
        border-width: 2px !important;
}
.cs-check input[type="checkbox"] {
    appearance: none;
    width: 12px;
    height: 12px;
    border: 2px solid #000;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.cs-check input[type="checkbox"]:checked {
    background: #000;
    border-color: #000;
}
/*==================================================
    TYPOGRAPHY
==================================================*/

.cs-modal h2{
    margin:0;
    margin-bottom: 60px;
    font-size:28px;
    font-weight:700;
    letter-spacing:.17em;
}
.cs-modal p{
    margin:16px auto;
    font-size:14px;
    max-width:700px;
    line-height:1.5;
    letter-spacing:.1em;
}
.cs-modal span{
   
    font-size:14px;
    max-width:700px;
    line-height:1.2;
    letter-spacing:.06em;
}
.cs-menu-source{
    display:none;
}

/*==================================================
    ACTIONS MODAL COOKIES
==================================================*/
.cs-actions{
    margin-top:40px;
}
.cs-modal__actions{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:60px;
    flex-wrap:wrap;

}

.cs-btn{
    min-width: 200px;
    height: 24px;
    background:transparent;
    color:white;
    border:0;
    font-size: 14px;
    font-family: "SuisseIntlMono-Regular", sans-serif;
}
.cs-btn:hover{
    border:1px solid white;
    background:#ffffff;
    color:#000000;

}

.cs-btn--outline{
    font-family: "SuisseIntlMono-Regular", sans-serif;
    background:#fff;
    border:0;
    color:#111;
    min-width:220px;
    height:24px;
    cursor:pointer;
    font-size:14px;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:.25s;

}

.cs-btn--outline:hover{
    background:#FF9D00;
    color:#fff;
}


.cs-cookie-item {
    border-bottom: 1px solid #000;
}


.cs-cookie-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 10px;
}


.cs-collapse {
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    background:none;
    border:0;
    font-size:35px;
    line-height:1;
    cursor:pointer;
    font-weight:300;
}


.cs-cookie-content {
    display:none;
    padding:0 33px 40px;
}


.cs-cookie-item.active .cs-cookie-content {
    display:block;
}


.cs-cookie-content p {
    margin:0;
    font-size:14px;
    line-height:1.5;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-align: left;
}

.cs-check {
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    text-transform:uppercase;
    font-size:16px;
    
}

.cs-check input {
    appearance:none;
    width:13px;
    height:13px;
    border:1px solid #000;
    cursor:pointer;
    position:relative;
}

.cs-check input:checked::after {
    content:"";
    position:absolute;
    inset:3px;
    background:#000;
}


.cs-check input:disabled {
    cursor:not-allowed;
}

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

@media(max-width:768px){
    .cs-modal{
        padding:32px;
    }
    .cs-modal__window{
        padding:32px 0px;
    }
    .cs-modal__birthday{
        flex-direction:column;
        align-items:center;
    }
    .cs-modal__birthday input{
        width:100%;
        max-width:220px;
    }
    .cs-cookies{
        padding: 48px;
    }
}
.cs-agegate{
    color:#fff;
    width:100%;
}
.cs-modal__window.age{
    background:#000;
}
.cs-agegate h2{
    font-size:64px;
    text-transform:uppercase;
    line-height:.95;
    margin-bottom:45px;
}
.cs-agegate p{
    max-width:750px;
    margin:0 auto;
    color:#fff;
    font-size:14px;
    line-height: 1.2;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:40px;
}
.cs-agegate h3{
    margin:50px 0 40px;
    font-size:clamp(24px, 5vw, 54px);
    color:#fff;
    font-weight:600;
    line-height:1;
    letter-spacing: 4px !important;
     font-family: "Europa Grotesk SH Con", sans-serif;
}