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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

/* ===================================
   VARIABLES
=================================== */

:root{

    --bg:#ececec;

    --surface:#F7F4EB;

    --primary:#C62828;

    --secondary:#B0BEC5;

    --text:#1A1A2E;

    --white:#ffffff;

    --shadow:#1A1A2E;

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;

}

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

body{

    background:var(--bg);

    color:var(--white);

    font-family:"Space Mono",monospace;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

button{

    font:inherit;

    border:none;

    cursor:pointer;

}

input,
textarea,
select{

    font:inherit;

}

/* ===================================
   TYPOGRAPHY
=================================== */

.pixel{

    font-family:"Press Start 2P",cursive;

}

/* ===================================
   UTILITIES
=================================== */

.center-text{

    text-align:center;

    line-height:1.8;

}

.order-number{

    text-align:center;

}

.tracking-steps{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.tracking-steps .done{

    color:#22c55e;

    font-weight:600;

}

.tracking-steps .active{

    color:#f59e0b;

    font-weight:700;

}

.tracking-steps .pending{

    color:#999;

}

.product-image{
    position:relative;
}

.sold-out-image{
    filter:grayscale(100%);
    opacity:.45;
}

.sold-out-badge{

    position:absolute;

    top:15px;
    left:-38px;

    width:150px;

    background:#d32f2f;

    color:#fff;

    text-align:center;

    font-weight:700;

    letter-spacing:2px;

    padding:8px 0;

    transform:rotate(-45deg);

    box-shadow:0 4px 12px rgba(0,0,0,.35);

    z-index:10;

}

.add-cart:disabled{
    background:#666 !important;
    cursor:not-allowed;
    opacity:.9;
}

.sold-out-card{
    cursor:not-allowed;
}

.sold-out-card:hover{
    transform:none !important;
    box-shadow:none !important;
}

.product-image{

    position:relative;

    overflow:hidden;

}

.sold-out-card .product-image::after{

    content:"";

    position:absolute;

    inset:0;

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

}

#side-menu{

position:fixed;
top:0;
left:-300px;
width:280px;
height:100vh;
background:#F7F4EB;
z-index:9999;
transition:.25s;
box-shadow:5px 0 20px rgba(0,0,0,.2);
display:flex;
flex-direction:column

}

#side-menu.open{

left:0

}

.menu-header{

display:flex;
justify-content:center;
align-items:center;
padding:24px;
border-bottom:2px solid #e8e8e8;
background:#F7F4EB;

}

.menu-header img{

width:170px;
height:auto;

}

#side-menu a{

display:flex;
align-items:center;
gap:12px;

padding:18px 24px;

font-size:16px;

font-weight:700;

color:#222;

border-bottom:1px solid #ececec;

transition:.2s;

}

#side-menu a:hover{

background:#ef3b4d;

color:#fff;

padding-left:34px;

}
/* =========================================================
   AEVAN INDEX — LIQUID GLASS VISUAL OVERRIDE
   Layout / JS / element positions unchanged
========================================================= */

:root{
    --bg:#f3f4f6 !important;
    --surface:rgba(255,255,255,.72) !important;
    --primary:#ef3b4d !important;
    --secondary:#e5e7eb !important;
    --text:#17181c !important;
    --white:#fff !important;
    --shadow:rgba(20,20,25,.08) !important;
}

html,body{
    background:
        radial-gradient(700px circle at 8% 0%, rgba(239,59,77,.09), transparent 55%),
        radial-gradient(650px circle at 92% 12%, rgba(255,255,255,.95), transparent 55%),
        linear-gradient(180deg,#f7f7f8 0%,#eef0f3 100%) !important;
    color:#17181c !important;
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
}

#header{
    background:rgba(255,255,255,.68) !important;
    backdrop-filter:blur(26px) saturate(155%) !important;
    -webkit-backdrop-filter:blur(26px) saturate(155%) !important;
    border-bottom:1px solid rgba(255,255,255,.86) !important;
    box-shadow:0 5px 28px rgba(20,20,25,.055) !important;
}

#menu-btn,
#cart-btn{
    background:rgba(255,255,255,.58) !important;
    border:1px solid rgba(0,0,0,.055) !important;
    border-radius:14px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#cart-count{
    background:#ef3b4d !important;
    color:#fff !important;
    border:2px solid rgba(255,255,255,.92) !important;
}

#hero{
    background:
        radial-gradient(600px circle at 50% 15%, rgba(255,255,255,.98), transparent 65%),
        linear-gradient(135deg,#f8f8f9 0%,#eceef1 100%) !important;
}

.hero-box{
    background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.58)) !important;
    backdrop-filter:blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(30px) saturate(150%) !important;
    border:1px solid rgba(255,255,255,.86) !important;
    border-radius:26px !important;
    box-shadow:0 25px 70px rgba(20,20,30,.10),0 5px 18px rgba(20,20,30,.045),inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.hero-box h1{
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif !important;
    font-weight:800 !important;
    letter-spacing:-1.8px !important;
    color:#141519 !important;
}

.hero-box p{
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
    color:#686c74 !important;
}

#shop-now{
    background:linear-gradient(145deg,#f04a5b,#e93448) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:14px !important;
    box-shadow:0 10px 25px rgba(239,59,77,.23),inset 0 1px 0 rgba(255,255,255,.2) !important;
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
    font-weight:800 !important;
}

#featured,
#featured-items{
    background:transparent !important;
}

#featured > h2{
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif !important;
    font-weight:800 !important;
    color:#17181c !important;
    letter-spacing:-.7px !important;
}

#product-list > *{
    background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,255,255,.58)) !important;
    backdrop-filter:blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
    border:1px solid rgba(255,255,255,.86) !important;
    border-radius:20px !important;
    box-shadow:0 18px 55px rgba(25,25,35,.08),0 3px 12px rgba(25,25,35,.04),inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#product-list img,
#product-list .product-image{
    border-radius:16px !important;
}

#product-list h1,
#product-list h2,
#product-list h3,
#product-list h4{
    font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif !important;
    color:#17181c !important;
}

#product-list p{
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
    color:#686c74 !important;
}

#product-list button,
#product-list .add-cart{
    background:linear-gradient(145deg,#f04a5b,#e93448) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.15) !important;
    border-radius:12px !important;
    box-shadow:0 7px 20px rgba(239,59,77,.19),inset 0 1px 0 rgba(255,255,255,.18) !important;
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
    font-weight:700 !important;
}

#cart-drawer{
    background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(248,249,250,.78)) !important;
    backdrop-filter:blur(32px) saturate(155%) !important;
    -webkit-backdrop-filter:blur(32px) saturate(155%) !important;
    border-left:1px solid rgba(255,255,255,.88) !important;
    box-shadow:-20px 0 60px rgba(20,20,30,.11) !important;
}

#close-cart{
    background:rgba(0,0,0,.045) !important;
    color:#22242a !important;
    border:1px solid rgba(0,0,0,.045) !important;
    border-radius:12px !important;
}

.drawer-footer{
    background:rgba(255,255,255,.58) !important;
    border-top:1px solid rgba(20,20,25,.07) !important;
}

#checkout-btn{
    background:linear-gradient(145deg,#f04a5b,#e93448) !important;
    color:#fff !important;
    border-radius:14px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 9px 25px rgba(239,59,77,.23),inset 0 1px 0 rgba(255,255,255,.18) !important;
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
    font-weight:800 !important;
}

#overlay{
    background:rgba(15,17,22,.25) !important;
    backdrop-filter:blur(5px) !important;
    -webkit-backdrop-filter:blur(5px) !important;
}

/* =========================================================
   SIDE MENU — IMPORTANT FIX
   Keeps the logo completely off-screen while closed.
========================================================= */

#side-menu{
    position:fixed !important;
    top:0 !important;
    left:-320px !important;
    width:280px !important;
    height:100vh !important;
    z-index:9999 !important;

    display:flex !important;
    flex-direction:column !important;

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

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(248,249,250,.78)) !important;
    backdrop-filter:blur(32px) saturate(155%) !important;
    -webkit-backdrop-filter:blur(32px) saturate(155%) !important;

    border-right:1px solid rgba(255,255,255,.88) !important;
    box-shadow:12px 0 45px rgba(20,20,30,.09) !important;

    transition:left .25s ease,opacity .25s ease,visibility .25s ease !important;
}

#side-menu.open{
    left:0 !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.menu-header{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    background:rgba(255,255,255,.52) !important;
    border-bottom:1px solid rgba(20,20,25,.07) !important;
}

.menu-header img{
    display:block !important;
    width:170px !important;
    height:auto !important;
    max-width:100% !important;
}

#side-menu a{
    color:#25262b !important;
    font-family:"Plus Jakarta Sans","Segoe UI",sans-serif !important;
    font-weight:600 !important;
    border-bottom:1px solid rgba(0,0,0,.045) !important;
}

#side-menu a:hover{
    background:rgba(239,59,77,.08) !important;
    color:#ef3b4d !important;
}

@media (max-width:768px){
    .hero-box{
        border-radius:20px !important;
        backdrop-filter:blur(22px) saturate(145%) !important;
        -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
    }

    #product-list > *{
        border-radius:18px !important;
        backdrop-filter:blur(18px) saturate(140%) !important;
        -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
    }

    #cart-drawer,
    #side-menu{
        backdrop-filter:blur(25px) saturate(145%) !important;
        -webkit-backdrop-filter:blur(25px) saturate(145%) !important;
    }
}