@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
    --black:#080808;
    --white:#fff;
    --lime:#d7ff36;
    --grey:#f2f2f0;
    --muted:#777;
    --line:#dedede;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:#fff;
    color:#0a0a0a;
    font-family:Inter,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    width:100%;
}

button,
input{
    font:inherit;
}


/* ===========================
   ANNOUNCEMENT
=========================== */

.store-announcement{
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    background:var(--lime);
    color:#0a0a0a;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}


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

.store-header{
    height:76px;
    padding:0 3.2vw;
    position:absolute;
    z-index:100;
    top:30px;
    left:0;
    right:0;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.22);
}

.store-logo{
    font-size:19px;
    font-weight:900;
    letter-spacing:-1px;
}

.store-logo span{
    padding:3px 5px;
    background:var(--lime);
    color:#050505;
}

.store-nav{
    display:flex;
    align-items:center;
    gap:30px;
}

.store-nav a{
    position:relative;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.store-nav a:after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:-8px;
    height:1px;
    background:currentColor;
    transition:.25s;
}

.store-nav a:hover:after{
    right:0;
}

.store-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
}

.store-action{
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
}

.bag-count{
    min-width:18px;
    height:18px;
    margin-left:3px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:var(--lime);
    color:#111;
    font-size:8px;
    font-weight:900;
}

.store-menu-button{
    display:none;
}


/* ===========================
   HERO
=========================== */

.street-hero{
    height:max(720px,100vh);
    min-height:680px;
    position:relative;
    overflow:hidden;
    background:#111;
    color:#fff;
}

.street-hero-media{
    position:absolute;
    inset:0;
}

.street-hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 25%;
}

.street-hero-placeholder{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 70% 30%,#444 0,#1b1b1b 30%,#080808 68%);
}

.street-hero-placeholder:after{
    content:"BOUYAZZEM";
    position:absolute;
    right:-30px;
    bottom:-35px;
    color:rgba(255,255,255,.035);
    font-size:15vw;
    font-weight:900;
    letter-spacing:-1vw;
}

.street-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 58%),
        linear-gradient(0deg,rgba(0,0,0,.42),transparent 55%);
}

.street-hero-content{
    width:min(1500px,93.6vw);
    height:100%;
    margin:auto;
    padding-top:150px;
    padding-bottom:60px;
    position:relative;
    z-index:3;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
}

.hero-kicker{
    margin-bottom:14px;
    font-size:10px;
    font-weight:800;
    letter-spacing:2.3px;
}

.street-hero h1{
    max-width:950px;
    margin:0;
    font-size:clamp(64px,8.2vw,140px);
    line-height:.79;
    letter-spacing:-.075em;
    text-transform:uppercase;
}

.street-hero h1 span{
    display:block;
}

.street-hero-copy{
    width:min(470px,100%);
    margin:27px 0 30px;
    font-size:13px;
    line-height:1.65;
    color:rgba(255,255,255,.78);
}

.street-button{
    min-height:48px;
    padding:0 25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    background:#fff;
    color:#080808;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;

    transition:.2s;
}

.street-button:hover{
    background:var(--lime);
}

.hero-index{
    position:absolute;
    right:0;
    bottom:62px;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
}


/* ===========================
   MARQUEE
=========================== */

.street-marquee{
    height:47px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#080808;
    color:#fff;
    white-space:nowrap;
}

.street-marquee-track{
    display:flex;
    align-items:center;
    gap:45px;
    min-width:max-content;
    animation:marquee 24s linear infinite;
}

.street-marquee span{
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
}

.street-marquee b{
    color:var(--lime);
}

@keyframes marquee{
    to{transform:translateX(-50%)}
}


/* ===========================
   SECTIONS
=========================== */

.street-section{
    padding:90px 3.2vw;
}

.street-section-head{
    margin-bottom:32px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.section-index{
    display:block;
    margin-bottom:8px;
    color:#8a8a8a;
    font-size:9px;
    font-weight:700;
    letter-spacing:1.5px;
}

.street-section h2{
    margin:0;
    font-size:clamp(32px,4vw,64px);
    line-height:.9;
    letter-spacing:-.06em;
    text-transform:uppercase;
}

.view-all{
    padding-bottom:5px;
    border-bottom:1px solid #111;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
}


/* ===========================
   PRODUCTS
=========================== */

.street-products{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
}

.street-product{
    min-width:0;
}

.street-product-media{
    aspect-ratio:3/4;
    position:relative;
    overflow:hidden;
    background:#efefed;
}

.street-product-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.2,.7,.2,1);
}

.street-product:hover .street-product-media img{
    transform:scale(1.035);
}

.street-product-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(135deg,#ececea,#d8d8d4);
}

.street-product-placeholder span{
    color:#b5b5b0;
    font-size:12px;
    font-weight:900;
    letter-spacing:3px;
}

.product-badge{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    padding:6px 8px;
    background:#0a0a0a;
    color:#fff;
    font-size:7px;
    font-weight:800;
    letter-spacing:1px;
}

.product-heart{
    width:32px;
    height:32px;
    position:absolute;
    top:10px;
    right:10px;
    z-index:2;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.88);
    font-size:15px;
}

.street-product-info{
    padding:14px 8px 25px 3px;
}

.product-meta{
    margin-bottom:6px;
    color:#969696;
    font-size:8px;
    font-weight:700;
    letter-spacing:.9px;
    text-transform:uppercase;
}

.product-line{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.product-line h3{
    margin:0;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.product-price{
    flex:0 0 auto;
    font-size:11px;
    font-weight:700;
}


/* ===========================
   EDITORIAL
=========================== */

.street-editorial{
    min-height:760px;
    position:relative;
    overflow:hidden;
    background:#111;
    color:#fff;
}

.street-editorial-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 30% 40%,#444,#171717 45%,#080808 80%);
}

.street-editorial-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.street-editorial:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 60%);
}

.street-editorial-content{
    width:93.6%;
    margin:auto;
    padding-bottom:60px;
    position:absolute;
    z-index:2;
    left:3.2%;
    right:3.2%;
    bottom:0;
}

.street-editorial small{
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

.street-editorial h2{
    max-width:850px;
    margin:14px 0 28px;
    font-size:clamp(55px,7vw,115px);
    line-height:.82;
    letter-spacing:-.07em;
    text-transform:uppercase;
}


/* ===========================
   CATEGORIES
=========================== */

.category-list{
    border-top:1px solid #111;
}

.category-row{
    min-height:100px;
    display:grid;
    grid-template-columns:60px 1fr auto;
    align-items:center;
    gap:20px;
    border-bottom:1px solid #111;
    transition:.2s;
}

.category-row:hover{
    padding-left:14px;
    background:var(--lime);
}

.category-number{
    color:#888;
    font-size:9px;
    font-weight:700;
}

.category-name{
    font-size:clamp(28px,4vw,60px);
    font-weight:800;
    letter-spacing:-.055em;
    text-transform:uppercase;
}

.category-arrow{
    font-size:25px;
}


/* ===========================
   BENEFITS
=========================== */

.street-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

.street-benefit{
    min-height:150px;
    padding:35px 3.2vw;
    border-right:1px solid #ddd;
}

.street-benefit:last-child{
    border-right:0;
}

.street-benefit small{
    color:#888;
    font-size:8px;
    font-weight:800;
    letter-spacing:1px;
}

.street-benefit h3{
    margin:22px 0 5px;
    font-size:15px;
    text-transform:uppercase;
}

.street-benefit p{
    margin:0;
    color:#777;
    font-size:10px;
}


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

.store-footer{
    padding:75px 3.2vw 25px;
    background:#080808;
    color:#fff;
}

.footer-main{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:70px;
}

.footer-brand{
    font-size:clamp(45px,7vw,105px);
    font-weight:900;
    line-height:.75;
    letter-spacing:-.075em;
}

.footer-brand span{
    color:var(--lime);
}

.footer-col strong{
    display:block;
    margin-bottom:22px;
    color:#777;
    font-size:8px;
    letter-spacing:1.5px;
}

.footer-col a{
    display:block;
    width:max-content;
    margin:11px 0;
    font-size:10px;
    font-weight:600;
}

.footer-bottom{
    margin-top:75px;
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #282828;
    color:#777;
    font-size:8px;
    letter-spacing:1px;
}


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

@media(max-width:900px){

    .store-header{
        height:65px;
        grid-template-columns:1fr auto;
        padding:0 18px;
    }

    .store-nav{
        display:none;
    }

    .store-actions .store-action:not(.bag-link){
        display:none;
    }

    .store-menu-button{
        width:32px;
        height:32px;
        padding:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:0;
        background:transparent;
        color:#fff;
    }

    .store-menu-button span{
        width:18px;
        height:1px;
        background:currentColor;
    }

    .street-hero{
        height:90svh;
        min-height:650px;
    }

    .street-hero-content{
        width:auto;
        margin:0 18px;
        padding-bottom:38px;
    }

    .street-hero h1{
        font-size:clamp(52px,16vw,82px);
    }

    .street-hero-copy{
        max-width:330px;
        margin-top:20px;
        font-size:11px;
    }

    .hero-index{
        right:0;
        bottom:40px;
    }

    .street-section{
        padding:65px 18px;
    }

    .street-section-head{
        margin-bottom:23px;
    }

    .street-products{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:2px;
    }

    .street-product-info{
        padding:10px 5px 22px 1px;
    }

    .product-line{
        display:block;
    }

    .product-price{
        display:block;
        margin-top:5px;
    }

    .street-editorial{
        min-height:78svh;
    }

    .street-editorial-content{
        left:18px;
        right:18px;
        width:auto;
        padding-bottom:35px;
    }

    .category-row{
        min-height:78px;
        grid-template-columns:35px 1fr auto;
    }

    .category-name{
        font-size:27px;
    }

    .street-benefits{
        grid-template-columns:1fr;
    }

    .street-benefit{
        min-height:auto;
        border-right:0;
        border-bottom:1px solid #ddd;
    }

    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:50px 20px;
    }

    .footer-brand{
        grid-column:1/-1;
        margin-bottom:20px;
    }

}

@media(max-width:520px){

    .store-announcement{
        font-size:7px;
    }

    .store-logo{
        font-size:16px;
    }

    .street-products{
        margin-left:-18px;
        margin-right:-18px;
    }

    .street-product-info{
        padding-left:10px;
        padding-right:8px;
    }

    .product-badge{
        top:8px;
        left:8px;
    }

    .street-editorial h2{
        font-size:15vw;
    }

    .footer-bottom{
        display:block;
        line-height:2;
    }

}


/* =========================================================
   BOUYAZZEM — SHOP CATEGORY DROPDOWN
   ========================================================= */

.store-nav{
    overflow:visible !important;
}

.store-header{
    overflow:visible !important;
}

.store-nav-dropdown{
    position:relative;
    display:flex;
    align-items:center;
    height:100%;
}

.store-nav-dropdown-trigger{
    display:flex;
    align-items:center;
    gap:5px;

    border:0;
    padding:0;

    background:transparent;
    color:inherit;

    font:inherit;
    font-size:inherit;
    font-weight:inherit;

    text-transform:uppercase;
    cursor:pointer;
}

.store-nav-dropdown-trigger svg{
    width:10px;
    height:10px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;

    transition:transform .2s ease;
}

.store-nav-dropdown:hover
.store-nav-dropdown-trigger svg,
.store-nav-dropdown.open
.store-nav-dropdown-trigger svg{
    transform:rotate(180deg);
}


/* DROPDOWN */

.store-dropdown-panel{
    position:absolute;
    z-index:9999;

    top:calc(100% + 20px);
    left:50%;

    width:310px;

    opacity:0;
    visibility:hidden;

    transform:
        translate(-50%,8px);

    background:#0a0a0a;
    color:#fff;

    border:1px solid #282828;

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.28);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}


/*
 * Invisible bridge keeps hover alive
 * between nav item and dropdown.
 */
.store-dropdown-panel:before{
    content:"";

    position:absolute;

    left:0;
    right:0;

    top:-24px;
    height:24px;
}


.store-nav-dropdown:hover
.store-dropdown-panel,
.store-nav-dropdown.open
.store-dropdown-panel{
    opacity:1;
    visibility:visible;

    transform:
        translate(-50%,0);
}


.store-dropdown-head{
    padding:19px 18px 15px;

    border-bottom:
        1px solid #242424;
}

.store-dropdown-head span{
    display:block;

    margin-bottom:5px;

    color:#777;

    font-size:7px;
    font-weight:800;

    letter-spacing:1.7px;
}

.store-dropdown-head strong{
    display:block;

    font-size:16px;
    line-height:1;

    letter-spacing:-.03em;
}


.store-dropdown-categories{
    padding:6px 0;
}


.store-dropdown-category{
    min-height:45px;

    padding:0 17px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    color:#fff !important;

    border-bottom:
        1px solid #171717;

    text-decoration:none !important;

    transition:
        background .15s ease,
        padding .15s ease;
}


.store-dropdown-category:last-child{
    border-bottom:0;
}


.store-dropdown-category:hover,
.store-dropdown-category.active{
    padding-left:21px;

    background:#d7ff36;

    color:#080808 !important;
}


.store-dropdown-category-name{
    font-size:10px;
    font-weight:850;

    letter-spacing:.03em;
}


.store-dropdown-category-right{
    display:flex;
    align-items:center;
    gap:10px;
}


.store-dropdown-category-right small{
    color:#777;

    font-size:8px;
    font-weight:700;
}


.store-dropdown-category:hover
.store-dropdown-category-right small,
.store-dropdown-category.active
.store-dropdown-category-right small{
    color:#4b5200;
}


.store-dropdown-category-right b{
    font-size:15px;
    font-weight:400;
}


.store-dropdown-all{
    min-height:51px;

    padding:0 18px;

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

    background:#fff;

    color:#080808 !important;

    text-decoration:none !important;

    font-size:9px;
    font-weight:900;

    letter-spacing:.06em;
}


.store-dropdown-all:hover{
    background:#d7ff36;
}


.store-dropdown-empty{
    padding:20px;

    color:#777;

    font-size:9px;
}


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

.store-mobile-nav,
.store-mobile-overlay{
    display:none;
}


@media(max-width:800px){

    .store-nav{
        display:none !important;
    }


    .store-mobile-overlay{
        display:block;

        position:fixed;
        z-index:99998;

        inset:0;

        opacity:0;
        visibility:hidden;

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

        backdrop-filter:blur(4px);

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


    .store-mobile-overlay.open{
        opacity:1;
        visibility:visible;
    }


    .store-mobile-nav{
        display:block;

        position:fixed;
        z-index:99999;

        top:0;
        right:0;
        bottom:0;

        width:min(88vw,390px);

        overflow-y:auto;

        transform:translateX(102%);

        background:#090909;
        color:#fff;

        transition:
            transform .3s
            cubic-bezier(.22,.61,.36,1);
    }


    .store-mobile-nav.open{
        transform:translateX(0);
    }


    body.store-menu-open{
        overflow:hidden;
    }


    .store-mobile-nav-top{
        height:70px;

        padding:0 19px;

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

        border-bottom:
            1px solid #252525;
    }


    .store-mobile-nav-top span{
        color:#777;

        font-size:8px;
        font-weight:900;

        letter-spacing:2px;
    }


    .store-mobile-nav-top button{
        width:38px;
        height:38px;

        border:0;

        background:transparent;
        color:#fff;

        font-size:28px;

        cursor:pointer;
    }


    .store-mobile-main-link{
        min-height:65px;

        padding:0 19px;

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

        border-bottom:
            1px solid #222;

        color:#fff !important;

        text-decoration:none !important;

        font-size:17px;
        font-weight:850;

        letter-spacing:-.03em;
    }


    .store-mobile-main-link span{
        color:#d7ff36;
    }


    .store-mobile-shop{
        border-bottom:
            1px solid #222;
    }


    .store-mobile-shop > button{
        width:100%;
        min-height:65px;

        padding:0 19px;

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

        border:0;

        background:#090909;
        color:#fff;

        font-size:17px;
        font-weight:850;

        text-align:left;

        cursor:pointer;
    }


    .store-mobile-shop > button b{
        color:#d7ff36;

        font-size:22px;
        font-weight:400;
    }


    .store-mobile-categories{
        display:none;

        padding:0 12px 12px;
    }


    .store-mobile-categories.open{
        display:block;
    }


    .store-mobile-categories a{
        min-height:49px;

        padding:0 12px;

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

        border-bottom:
            1px solid #222;

        color:#aaa !important;

        text-decoration:none !important;

        font-size:10px;
        font-weight:800;
    }


    .store-mobile-categories a:hover{
        background:#d7ff36;
        color:#080808 !important;
    }


    .store-mobile-categories small{
        color:#666;

        font-size:8px;
    }


    .store-mobile-categories
    .mobile-view-all{
        margin-top:8px;

        background:#d7ff36;

        color:#080808 !important;

        border-bottom:0;
    }


    .store-mobile-categories
    .mobile-view-all small{
        color:#080808;
    }

}