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

.main-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:88px;

    display:flex;

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

    padding:0 42px;

    z-index:999999;

   transition:
transform .45s cubic-bezier(.76,0,.24,1),
background .45s ease,
backdrop-filter .45s ease,
height .45s ease,
border-color .45s ease;
}

.main-header.scrolled{

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    height:74px;
}

/* =========================================
LOGO
========================================= */

.header-logo{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    color:#ffffff;

    text-decoration:none;

    font-size:30px;

    font-weight:300;

    letter-spacing:.42em;

    text-transform:uppercase;

    transition:.4s ease;
}

.main-header.scrolled .header-logo{

    color:#000000;

    font-size:28px;
}

/* =========================================
MENU BUTTON
========================================= */

.menu-trigger{

    position:absolute;

    left:28px;

    height:48px;

    display:flex;

    align-items:center;

    gap:14px;

    cursor:pointer;

    border:none;

    background:none;

    padding:0;

    transition:.35s ease;
}

.menu-trigger:hover{

    opacity:.6;

    transform:translateY(-2px);
}

.menu-lines{

    display:flex;

    flex-direction:column;

    gap:4px;
}

.menu-lines span{

    width:17px;
    height:1.4px;

    background:#ffffff;

    transition:.35s ease;
}

.menu-text{

    color:#ffffff;

    font-size:10px;

    font-weight:400;

    letter-spacing:.34em;

    text-transform:uppercase;

    transition:.35s ease;
}

.main-header.scrolled .menu-lines span{
    background:#000000;
}

.main-header.scrolled .menu-text{
    color:#000000;
}

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

.header-icons{

    position:absolute;

    right:28px;

    display:flex;

    align-items:center;

    gap:18px;
}

.header-icon-btn{

    position:relative;

    width:40px;
    height:40px;

    display:flex;

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

    color:#ffffff;

    cursor:pointer;

    border:none;

    background:none;

    transition:.35s ease;
}

.header-icon-btn:hover{

    opacity:.6;

    transform:translateY(-2px);
}

.main-header.scrolled .header-icon-btn{
    color:#000000;
}

.header-icon-btn svg{

    width:20px;
    height:20px;

    stroke-width:1.6;
}

.bag-count{

    position:absolute;

    top:-2px;
    right:-4px;

    min-width:17px;
    height:17px;

    border-radius:100px;

    background:#ffffff;

    color:#000000;

    font-size:9px;

    font-weight:500;

    display:flex;

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

.main-header.scrolled .bag-count{

    background:#000000;

    color:#ffffff;
}

/* =========================================
LUXURY MENU
========================================= */

.luxury-menu{

    position:fixed;

    inset:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    z-index:99999999;

    transition:.4s ease;
}

.luxury-menu.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.menu-overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}

.menu-panel{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    max-width:1320px;

    height:100vh;

    overflow-y:auto;

    background:#f4f3f0;

    padding:80px;

    transform:translateX(-100%);

    transition:
    transform .6s cubic-bezier(.77,0,.175,1);
}

.luxury-menu.active .menu-panel{

    transform:translateX(0);
}

/* =========================================
MENU CLOSE
========================================= */

.menu-close{

    position:absolute;

    top:28px;
    right:28px;

    width:54px;
    height:54px;

    border:none;

    border-radius:100px;

    background:#000000;

    color:#ffffff;

    font-size:34px;

    cursor:pointer;

    display:flex;

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

    line-height:1;

    transition:.35s ease;
}

.menu-close:hover{

    transform:rotate(90deg);
}

/* =========================================
MENU GRID
========================================= */

.menu-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:120px;

    align-items:flex-start;
}

/* =========================================
MENU COLUMN
========================================= */

.menu-column{

    display:flex;

    flex-direction:column;
}

.menu-group{

    margin-bottom:18px;
}

/* =========================================
MENU CATEGORY
========================================= */

.menu-category{
    margin-bottom:70px;
}

/* CATEGORY TITLE */

.menu-category-title{

    font-size:13px;

    font-weight:600;

    letter-spacing:.34em;

    text-transform:uppercase;

    color:rgba(0,0,0,.45);

    margin-bottom:28px;
}

/* LINKS */

.menu-links{

    display:flex;

    flex-direction:column;

    gap:24px;
}

.menu-links a{

    text-decoration:none;

    color:#000000;

    font-size:42px;

    font-weight:300;

    line-height:1.2;

    transition:.35s ease;
}

.menu-links a:hover{

    opacity:.5;

    transform:translateX(10px);
}

/* =========================================
SIDE COLUMN
========================================= */

.menu-side-column{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding-top:6px;
}

.menu-editorial{

    max-width:760px;

    margin-bottom:28px;
}

.menu-small-title{

    display:block;

    font-size:11px;

    letter-spacing:.3em;

    text-transform:uppercase;

    color:rgba(0,0,0,.45);

    margin-bottom:22px;
}


.menu-extra-links{

    display:flex;

    flex-direction:column;

    gap:26px;

    margin-left:0;

    margin-top:10px;
}

.menu-extra-links a{

    width:fit-content;

    text-decoration:none;

    color:#000000;

    font-size:18px;

    transition:.35s ease;
}

.menu-extra-links a:hover{

    opacity:.6;

    transform:translateX(8px);
}

/* =========================================
PROFILE DROPDOWN
========================================= */

.profile-dropdown{

    position:fixed;

    top:74px;

    right:0;

    width:260px;

    background:#000000;

    padding:30px;

    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);

    transition:.35s ease;

    z-index:99999999;
}

.profile-dropdown.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

.profile-user-name{

    color:#ffffff;

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

    opacity:.45;

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.profile-dropdown a{

    display:block;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    line-height:3;
}

/* =========================================
BAG DRAWER
========================================= */

.bag-drawer{

    position:fixed;

    inset:0;

    z-index:99999999;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.4s ease;
}

.bag-drawer.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.bag-overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);
}

.bag-panel{

    position:absolute;

    top:0;
    right:0;

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

    height:100vh;

    background:#000000;

    color:#ffffff;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    transform:translateX(100%);

    transition:
    transform .55s cubic-bezier(.77,0,.175,1);
}

.bag-drawer.active .bag-panel{

    transform:translateX(0);
}

/* =========================================
TOP
========================================= */

.bag-top{

    height:92px;

    flex-shrink:0;

    display:flex;

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

    padding:0 36px;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.bag-top h2{

    font-size:20px;

    font-weight:500;
}

.bag-close{

    width:42px;
    height:42px;

    border:none;

    background:none;

    color:#ffffff;

    font-size:38px;

    cursor:pointer;

    display:flex;

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

    line-height:1;
}

/* =========================================
CONTENT
========================================= */

.bag-content{

    flex:1;

    overflow-y:auto;

    padding:0 36px;
}

/* =========================================
ITEM
========================================= */

.bag-item{

    display:flex;

    gap:24px;

    padding:34px 0;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.bag-item-image{

    width:126px;
    height:164px;

    overflow:hidden;

    flex-shrink:0;

    background:#111111;
}

.bag-item-image img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.bag-item-details{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;
}

.bag-item-title{

    color:#ffffff;

    text-decoration:none;

    font-size:17px;

    line-height:1.35;

    margin-bottom:8px;
}

.bag-item-meta{

    color:rgba(255,255,255,.5);

    font-size:14px;

    margin-bottom:14px;
}

.bag-item-price{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;
}

.old-price{

    color:rgba(255,255,255,.35);

    text-decoration:line-through;

    font-size:14px;
}

.new-price{

    font-size:18px;
}

/* =========================================
BOTTOM CONTROLS
========================================= */

.bag-item-bottom{

    margin-top:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;
}

.quantity-box{

    display:flex;

    align-items:center;

    gap:18px;
}

.quantity-label{

    color:rgba(255,255,255,.45);

    font-size:14px;
}

.quantity-controls{

    display:flex;

    align-items:center;

    gap:18px;
}

.quantity-btn{

    border:none;

    background:none;

    color:#ffffff;

    width:24px;
    height:24px;

    font-size:24px;

    cursor:pointer;

    display:flex;

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

.quantity-value{

    min-width:12px;

    text-align:center;

    font-size:16px;
}

.remove-item{

    border:none;

    background:none;

    color:#ffffff;

    text-decoration:underline;

    font-size:13px;

    cursor:pointer;

    white-space:nowrap;
}

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

.bag-footer{

    position:sticky;

    bottom:0;

    left:0;

    width:100%;

    flex-shrink:0;

    padding:28px 36px 34px;

    border-top:
    1px solid rgba(255,255,255,.08);

    background:#000000;

    z-index:50;
}

.bag-subtotal{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    margin-bottom:24px;
}

.subtotal-left{

    display:flex;

    flex-direction:column;

    gap:4px;
}

.subtotal-title{

    font-size:18px;
}

.subtotal-items{

    color:rgba(255,255,255,.45);

    font-size:14px;
}

.subtotal-price{

    font-size:20px;

    font-weight:500;
}

/* =========================================
CHECKOUT
========================================= */

.bag-checkout{

    width:100%;

    height:58px;

    display:flex;

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

    background:#ffffff;

    color:#000000;

    text-decoration:none;

    font-size:15px;

    transition:.35s ease;

    margin-bottom:20px;
}

.bag-checkout:hover{

    background:#ebebeb;
}

.bag-note{

    text-align:center;

    color:rgba(255,255,255,.5);

    font-size:13px;
}

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

.bag-empty{

    height:100%;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    padding:60px 20px;
}

.bag-empty h3{

    font-size:30px;

    margin-bottom:14px;

    font-weight:300;
}

.bag-empty p{

    color:rgba(255,255,255,.5);

    max-width:320px;

    line-height:1.8;
}

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

.bag-content::-webkit-scrollbar{
    width:4px;
}

.bag-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
}

/* =========================================
REMOVE TAP HIGHLIGHT
========================================= */

*{
    -webkit-tap-highlight-color:transparent;
}

*::selection{
    background:transparent;
    color:inherit;
}

button,
a,
img,
div,
span{
    -webkit-user-select:none;
    user-select:none;
}

input,
textarea{
    -webkit-user-select:auto;
    user-select:auto;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1100px){

    .menu-grid{

        grid-template-columns:1fr;

        gap:60px;
    }

}

@media(max-width:768px){

    .main-header{

        height:76px;

        padding:0 20px;
        
        
    }
    
    

    .header-logo{

        font-size:18px;

        letter-spacing:.34em;
    }

    .main-header.scrolled .header-logo{

        font-size:18px;
    }

    .menu-text{
        display:none;
    }

    .menu-trigger{
        left:18px;
    }

    .header-icons{
        right:14px;
    }

    .menu-panel{

        width:80%;

        max-width:80%;

        padding:88px 28px 40px;
    }

    .menu-grid{

    display:flex;

    flex-direction:column;

    gap:34px;
}


    .menu-close{

        width:48px;
        height:48px;

        top:20px;
        right:20px;
    }
    
    .menu-category{
    margin-bottom:46px;
}

.menu-category-title{

    font-size:11px;

    letter-spacing:.28em;

    margin-bottom:20px;
}

.menu-links{
    gap:18px;
}

.menu-links a{

    font-size:28px;

    line-height:1.25;
}

    .bag-panel{

        max-width:100%;
    }

    .bag-top{

        height:82px;

        padding:0 20px;
    }

    .bag-content{

        padding:0 20px;
    }

    .bag-footer{

        padding:24px 20px 28px;
    }

    .bag-item{

        gap:16px;
    }

    .bag-item-image{

        width:88px;
        height:118px;
    }

    .bag-item-title{

        font-size:16px;
    }

    .bag-item-bottom{

        align-items:center;

        gap:10px;
    }

    .quantity-box{

        gap:12px;
    }

    .quantity-controls{

        gap:12px;
    }

    .quantity-btn{

        font-size:22px;
    }

    .remove-item{

        font-size:12px;
    }

    .bag-checkout{

        height:54px;

        font-size:14px;
    }
    
    .menu-editorial{


    display:none !important;
}

/* =========================================
MENU FEATURE IMAGE
========================================= */

.menu-feature-image{

    width:100%;

    max-width:760px;

    height:320px;

    overflow:hidden;

    margin-top:-10px;

    margin-bottom:40px;

    border-radius:2px;
}

.menu-feature-image img{

    opacity:1;
    
    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
transform .8s ease,
opacity .35s ease;
}

.menu-feature-image:hover img{

    transform:scale(1.04);
}

.menu-extra-links{

    display:none !important;
}


.menu-side-column{

    display:none !important;
}

.menu-section-label{

    display:block;

    font-size:15px;

    font-weight:600;

    letter-spacing:.18em;

    color:#111111;

    margin-bottom:18px;
}

}

/* =========================================
LOCK BODY SCROLL
========================================= */

body.menu-open,
body.drawer-open{

    overflow:hidden;

    touch-action:none;

    overscroll-behavior:none;
}


.bag-item-size{

    font-size:11px;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:rgba(255,255,255,.55);

    margin-top:6px;

    margin-bottom:10px;
}


.bag-item-price{

    font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

    font-size:12px;

    font-weight:500;

    letter-spacing:.01em;

    color:#ffffff;

}


.subtotal-price{

    font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

    font-size:24px;

    font-weight:500;

    letter-spacing:.01em;
}