/* =========================================================
   WAFRA PERFORMANCE — home-index.css
   Static CSS extracted from Blade.
   ========================================================= */

/* ============================================================
   ZAKAS CINEMATIC
   ============================================================ */

html{
    scroll-behavior:smooth;
}

body.zk-cinema-mode{
    background:#090909;
}

.zk-cinema{
    --black:#080808;
    --soft-black:#111;
    --white:#f7f4ef;
    --muted:#9d9993;
    --gold:#c5a66f;
    --line:rgba(255,255,255,.12);

    background:var(--black);
    color:var(--white);
    overflow:hidden;
}


/* ============================================================
   HEADER OVER HERO
   ============================================================ */

body.zk-cinema-mode .header-area,
body.zk-cinema-mode .site-header,
body.zk-cinema-mode header.header{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:9998!important;

    background:var(--brand)!important;
    border:0!important;
    box-shadow:none!important;

    transition:
        background .35s ease,
        backdrop-filter .35s ease;
}

body.zk-cinema-mode.zk-header-scrolled .header-area,
body.zk-cinema-mode.zk-header-scrolled .site-header,
body.zk-cinema-mode.zk-header-scrolled header.header{
    position:fixed!important;
    background:var(--brand)!important;
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08)!important;
}

body.zk-cinema-mode .mainmenu__link,
body.zk-cinema-mode .mainmenu__item > a{
    color:#fff!important;
    font-size:12px!important;
    font-weight:600!important;
}

body.zk-cinema-mode .mainmenu__link:hover,
body.zk-cinema-mode .mainmenu__item > a:hover{
    color:#d0ae75!important;
}

body.zk-cinema-mode .site-branding img{
    max-height:58px!important;
    width:auto!important;
}

body.zk-cinema-mode .header-toolbar a,
body.zk-cinema-mode .header-toolbar button,
body.zk-cinema-mode .toolbar-btn,
body.zk-cinema-mode .header-icon{
    color:#fff!important;
}


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

.zk-cinema-hero{
    position:relative;
    width:100%;
    height:100vh;
    min-height:720px;
    max-height:1080px;
    overflow:hidden;
    background:#090909;
}

.zk-cinema-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.zk-cinema-slide.is-active{
    opacity:1;
    visibility:visible;
}


/* BACKGROUND SCENE */

.zk-cinema-scene{
    position:absolute;
    inset:-3%;

    background:
        radial-gradient(
            circle at 50% 45%,
            #47231a 0%,
            #19100e 37%,
            #060606 76%
        );

    transform:scale(1.04);
    transition:transform 8s linear;
}

.zk-cinema-slide.is-active .zk-cinema-scene{
    transform:scale(1.10);
}

.zk-cinema-scene img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:
        brightness(.57)
        saturate(1.15)
        contrast(1.05);
}

.zk-cinema-scene::after{
    content:'';
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.86) 0%,
            rgba(0,0,0,.28) 40%,
            rgba(0,0,0,.13) 62%,
            rgba(0,0,0,.68) 100%
        );
}

[dir="rtl"] .zk-cinema-scene::after{
    background:
        linear-gradient(
            270deg,
            rgba(0,0,0,.86) 0%,
            rgba(0,0,0,.28) 40%,
            rgba(0,0,0,.13) 62%,
            rgba(0,0,0,.68) 100%
        );
}


/* PRODUCT BOTTLE */

.zk-cinema-bottle{
    position:absolute;
    z-index:3;

    left:50%;
    top:52%;

    width:min(31vw,500px);
    height:min(68vh,690px);

    transform:
        translate(-50%,-50%)
        translateY(30px);

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

    opacity:0;

    transition:
        opacity 1.1s ease .15s,
        transform 1.3s cubic-bezier(.16,.8,.25,1);
}

.zk-cinema-slide.is-active .zk-cinema-bottle{
    opacity:1;
    transform:
        translate(-50%,-50%)
        translateY(0);
}

.zk-cinema-bottle::after{
    content:'';

    position:absolute;
    z-index:-1;

    left:14%;
    right:14%;
    bottom:5%;

    height:45px;

    border-radius:50%;

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

    filter:blur(27px);
}

.zk-cinema-bottle img{
    width:100%;
    height:100%;

    object-fit:contain;

    filter:
        drop-shadow(0 34px 35px rgba(0,0,0,.55));
}


/* CONTENT */

.zk-cinema-copy{
    position:absolute;
    z-index:6;

    top:50%;
    inset-inline-start:6vw;

    width:min(38vw,620px);

    transform:translateY(-48%);
}

.zk-cinema-eyebrow{
    display:block;

    margin-bottom:12px;

    color:#d2ae73;

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

    letter-spacing:2.8px;

    text-transform:uppercase;
}

.zk-cinema-collection{
    display:block;

    margin-bottom:12px;

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

    font-size:11px;

    letter-spacing:1.2px;
}

.zk-cinema-title{
    margin:0;

    color:#fff;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:clamp(74px,10vw,168px);

    line-height:.78;

    font-weight:900;

    letter-spacing:-5px;

    text-transform:uppercase;

    text-shadow:
        0 10px 45px rgba(0,0,0,.27);
}

[dir="rtl"] .zk-cinema-title{
    font-family:inherit;
    font-size:clamp(60px,8vw,124px);
    line-height:.94;
    letter-spacing:-4px;
    font-weight:900;
}

.zk-cinema-story{
    max-width:470px;

    margin-top:28px;

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

    font-size:12px;

    line-height:1.9;
}

.zk-cinema-buy{
    display:inline-flex;

    align-items:center;

    margin-top:23px;

    padding-bottom:4px;

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

    color:#fff!important;

    text-decoration:none!important;

    font-size:10px;

    font-weight:900;

    letter-spacing:1.6px;

    text-transform:uppercase;
}


/* NOTES */

.zk-cinema-notes{
    position:absolute;
    z-index:6;

    inset-inline-end:5.2vw;

    top:50%;

    width:200px;

    transform:translateY(-45%);
}

.zk-cinema-note{
    padding:18px 0;

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

.zk-cinema-note:first-child{
    border-top:
        1px solid rgba(255,255,255,.16);
}

.zk-cinema-note small{
    display:block;

    margin-bottom:7px;

    color:#c7a56c;

    font-size:9px;

    letter-spacing:2px;

    text-transform:uppercase;
}

.zk-cinema-note strong{
    color:#fff;

    font-size:11px;

    font-weight:500;

    line-height:1.45;
}


/* COUNTER */

.zk-cinema-counter{
    position:absolute;
    z-index:7;

    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:10px;

    letter-spacing:1px;
}

.zk-cinema-line{
    width:85px;
    height:1px;

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

    overflow:hidden;
}

.zk-cinema-line span{
    display:block;

    width:0;
    height:100%;

    background:#fff;
}

.zk-cinema-slide.is-active
~ .zk-cinema-counter
.zk-cinema-line span{
    animation:
        zkProgress 7s linear forwards;
}

@keyframes zkProgress{
    to{width:100%}
}


/* ============================================================
   CURSOR FIRE / SMOKE CANVAS
   ============================================================ */

#zkFireCanvas{
    position:absolute;

    z-index:5;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    mix-blend-mode:screen;

    opacity:.92;
}


/* ============================================================
   COLLECTIONS — BIG EDITORIAL IMAGES
   ============================================================ */

.zk-collections{
    padding:82px 28px 90px;
    background:#090909;
}

.zk-collections-grid{
    display:grid;

    max-width:1760px;
    margin:0 auto;
    gap:3px;

    grid-template-columns:
        repeat(3,1fr);
}

.zk-collection{
    position:relative;

    min-height:720px;

    overflow:hidden;

    color:#fff!important;

    text-decoration:none!important;

    background:#151515;
}

.zk-collection img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        brightness(.65)
        saturate(1.1);

    transition:
        transform .9s ease,
        filter .6s ease;
}

.zk-collection:hover img{
    transform:scale(1.055);

    filter:
        brightness(.78)
        saturate(1.2);
}

.zk-collection::after{
    content:'';

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.73),
            transparent 58%
        );
}

.zk-collection-content{
    position:absolute;

    z-index:3;

    left:38px;
    right:38px;
    bottom:38px;
}

.zk-collection-content small{
    display:block;

    color:#d1aa6e;

    font-size:9px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}

.zk-collection-content h3{
    margin:
        8px 0 0;

    color:#fff;

    font-size:
        clamp(18px,1.55vw,26px);

    font-weight:650;

    letter-spacing:-.35px;

    
    line-height:1.35;

    
    /* ZAKAS_COLLECTION_TITLE_COMPACT_V1 */
}

.zk-collection-content span{
    display:inline-block;

    margin-top:18px;

    padding-bottom:4px;

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

    font-size:9px;

    font-weight:900;

    letter-spacing:1.5px;
}


/* ============================================================
   WHITE ECOMMERCE SECTION
   ============================================================ */

.zk-products{
    padding:
        120px 0;

    background:#f5f3ef;

    color:#151515;
}

.zk-products-head{
    display:flex;

    align-items:end;

    justify-content:
        space-between;

    gap:35px;

    margin-bottom:50px;
}

.zk-products-head h2{
    margin:0;

    color:#151515;

    font-size:
        clamp(45px,5vw,78px);

    line-height:1;

    font-weight:650;

    letter-spacing:-2.6px;
}

.zk-products-head a{
    color:#151515!important;

    text-decoration:none!important;

    padding-bottom:4px;

    border-bottom:
        1px solid #151515;

    font-size:10px;

    font-weight:900;

    letter-spacing:1.2px;
}

.zk-products-grid{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:16px;
}

.zk-product{
    color:#151515!important;

    text-decoration:none!important;
}

.zk-product-media{
    position:relative;

    aspect-ratio:.84/1;

    padding:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#ebe8e1;
}

.zk-product-media img{
    width:100%;
    height:100%;

    object-fit:contain;

    transition:
        transform .6s ease;
}

.zk-product:hover
.zk-product-media img{
    transform:
        scale(1.055);
}

.zk-product-info{
    padding:
        16px 2px 25px;
}

.zk-product-info small{
    color:#8c857d;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:1.2px;
}

.zk-product-info h3{
    margin:
        6px 0 0;

    color:#171513;

    font-size:15px;

    font-weight:700;
}

.zk-product-price{
    display:block;

    margin-top:7px;

    font-size:12px;

    font-weight:650;
}

.zk-product-price del{
    margin-inline-start:6px;

    color:#9e9993;

    font-size:10px;
}


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

body.zk-cinema-mode footer{
    background:var(--footer-color)!important;

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

    color:#aaa49d!important;
}

body.zk-cinema-mode footer a{
    color:#aaa49d!important;
}

body.zk-cinema-mode footer a:hover{
    color:#fff!important;
}


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

@media(max-width:1100px){

    .zk-cinema-title{
        font-size:
            clamp(62px,10vw,110px);
    }

    .zk-cinema-bottle{
        width:
            min(37vw,430px);
    }

    .zk-cinema-notes{
        width:170px;
    }

    .zk-collections-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .zk-products-grid{
        grid-template-columns:
            repeat(3,1fr);
    }
}

@media(max-width:767px){

    .zk-collections{
        padding:36px 14px 42px;
    }


    .zk-cinema-hero{
        min-height:760px;
        height:100svh;
    }

    .zk-cinema-scene::after{
        background:
            linear-gradient(
                0deg,
                rgba(0,0,0,.93) 0%,
                rgba(0,0,0,.24) 65%,
                rgba(0,0,0,.22) 100%
            )!important;
    }

    .zk-cinema-bottle{
        width:66vw;
        height:45vh;

        top:37%;
    }

    .zk-cinema-copy{
        top:auto;

        bottom:65px;

        inset-inline-start:20px;

        width:
            calc(100% - 40px);

        transform:none;
    }

    .zk-cinema-title{
        font-size:
            clamp(52px,16vw,82px);

        letter-spacing:-2.5px;
    }

    [dir="rtl"]
    .zk-cinema-title{
        font-size:
            clamp(48px,14vw,76px);
    }

    .zk-cinema-story{
        max-width:100%;

        margin-top:15px;

        font-size:11px;

        line-height:1.7;
    }

    .zk-cinema-notes{
        display:none;
    }

    .zk-cinema-counter{
        display:none;
    }

    .zk-wrap{
        width:
            calc(100% - 30px);
    }

    .zk-brand{
        padding:
            90px 0;
    }

    .zk-brand-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .zk-brand-image{
        height:470px;
    }

    .zk-collections-grid{
        grid-template-columns:1fr;
    }

    .zk-collection{
        min-height:520px;
    }

    .zk-story{
        grid-template-columns:1fr;
    }

    .zk-story-media{
        min-height:500px;
    }

    .zk-story-copy{
        padding:
            70px 25px;
    }

    .zk-products{
        padding:
            80px 0;
    }

    .zk-products-head{
        display:block;
    }

    .zk-products-head a{
        display:inline-block;

        margin-top:18px;
    }

    .zk-products-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:8px;
    }

    .zk-final-banner{
        min-height:650px;
    }

    .zk-final-copy{
        width:
            calc(100% - 35px);
    }

    .zk-final-copy h2{
        font-size:
            clamp(58px,18vw,95px);

        letter-spacing:-3px;
    }

    #zkFireCanvas{
        opacity:.65;
    }
}



/* ============================================================
   ZAKAS DASHBOARD ARTWORK HERO V3
   ============================================================ */

.zk-dashboard-hero{
    position:relative !important;

    width:100% !important;

    height:100vh !important;
    min-height:700px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#050505 !important;
}


.zk-dashboard-slide{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
}


.zk-dashboard-picture{
    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;
}


.zk-dashboard-picture img{
    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    outline:0 !important;

    opacity:1 !important;

    filter:none !important;

    transform:none !important;

    animation:none !important;
}


/*
 * Banner itself already contains its design.
 * No dark overlay / text / bottle / product graphics.
 */

.zk-dashboard-slide::before,
.zk-dashboard-slide::after,
.zk-dashboard-picture::before,
.zk-dashboard-picture::after{
    display:none !important;
    content:none !important;
}


/*
 * Fire / smoke remains above artwork.
 */

.zk-dashboard-hero #zkFireCanvas{
    position:absolute !important;

    inset:0 !important;

    z-index:5 !important;

    width:100% !important;
    height:100% !important;

    pointer-events:none !important;

    mix-blend-mode:screen !important;
}


/*
 * Slider progress.
 */

.zk-dashboard-hero
.zk-cinema-counter{
    z-index:8 !important;
}


/*
 * Mobile uses the dedicated dashboard mobile image
 * supplied by <picture><source>.
 */

@media(max-width:767px){

    .zk-dashboard-hero{
        height:100svh !important;

        min-height:560px !important;
    }

    .zk-dashboard-picture img{
        object-fit:cover !important;
        object-position:center center !important;
    }
}




/* ============================================================
   ZAKAS LUXURY TYPE SCALE V1
   Keep headings elegant and mostly one line on desktop.
   ============================================================ */

.zk-cinema,
.zk-dashhero,
.zk-featured{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}


/* Hero dashboard title */

.zk-dashhero__copy{
    width:min(560px,38vw) !important;
}

.zk-dashhero__copy h1{
    max-width:100% !important;

    font-size:
        clamp(38px,4vw,62px) !important;

    line-height:1.08 !important;

    font-weight:650 !important;

    letter-spacing:-1.4px !important;

    text-wrap:balance;
}

.zk-dashhero__copy p{
    max-width:500px !important;

    margin-top:16px !important;

    font-size:13px !important;

    line-height:1.85 !important;
}


/* Dynamic middle banners */

.zk-cinema
h1,
.zk-cinema
h2,
.zk-cinema
h3{
    text-wrap:balance;
}


/* Featured products heading */

.zk-featured__head h2{
    font-size:
        clamp(34px,3.5vw,52px) !important;

    line-height:1.05 !important;

    letter-spacing:-1px !important;
}


@media(min-width:992px){

    .zk-dashhero__copy h1{
        white-space:normal;
    }

}


@media(max-width:767px){

    .zk-dashhero__copy{
        width:calc(100% - 40px) !important;
    }

    .zk-dashhero__copy h1{
        font-size:
            clamp(32px,9vw,46px) !important;

        line-height:1.1 !important;

        letter-spacing:-.8px !important;
    }

    .zk-dashhero__copy p{
        font-size:11px !important;
        line-height:1.7 !important;
    }

}

/* ============================================================
   ZAKAS HOME — FINAL VISUAL SYSTEM
   ============================================================ */

.zk-cinema{
    background:#090909;
}


/* ---------------- HERO ---------------- */

.zk-cinema .zk-dashboard-hero,
.zk-cinema .zk-dashhero{
    margin:0!important;
}


/* ---------------- CATEGORIES ---------------- */

.zk-cinema .zk-collections{
    padding:72px 28px 78px!important;
    background:#090909!important;
}

.zk-cinema .zk-collections-grid{
    max-width:1740px!important;
    margin:0 auto!important;

    gap:14px!important;
}

.zk-cinema .zk-collection{
    min-height:590px!important;
}

.zk-cinema .zk-collection-content{
    left:32px!important;
    right:32px!important;
    bottom:32px!important;
}


/* ---------------- MIDDLE BAND 1 ---------------- */

.zk-cinema .zk-editorial-band{
    padding:78px 28px!important;
    background:#090909!important;
}

.zk-cinema .zk-editorial-band__grid{
    max-width:1680px!important;
    margin:0 auto!important;
}


/* ---------------- MIDDLE BANNERS 2 ---------------- */

.zk-cinema .zk-editorial-promos{
    padding:72px 28px 82px!important;
    background:#090909!important;
}

.zk-cinema .zk-editorial-promos__grid{
    max-width:1740px!important;
    margin:0 auto!important;

    gap:14px!important;
}

.zk-cinema .zk-editorial-promo{
    min-height:550px!important;
}


/* ---------------- FEATURED PRODUCTS ---------------- */

.zk-cinema .zk-featured{
    padding:
        92px 24px
        105px!important;

    background:#fff!important;
}

.zk-cinema .zk-featured__head{
    margin-bottom:46px!important;
}

.zk-cinema .zk-featured__viewport{
    max-width:1740px!important;
}

.zk-cinema .zk-featured__track{
    gap:16px!important;
}

.zk-cinema .zk-featured-card{
    flex:
        0 0
        calc(
            (100% - 48px)
            / 4
        )!important;
}


/* Give products a more premium amount of air */

.zk-cinema .zk-featured-card__body{
    padding-top:15px!important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:991px){

    .zk-cinema .zk-collections{
        padding:
            55px 20px
            62px!important;
    }

    .zk-cinema .zk-collection{
        min-height:520px!important;
    }

    .zk-cinema .zk-editorial-promos{
        padding:
            58px 20px
            65px!important;
    }

    .zk-cinema .zk-editorial-promo{
        min-height:500px!important;
    }

}


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

@media(max-width:767px){

    .zk-cinema .zk-collections{
        padding:
            42px 14px
            48px!important;
    }

    .zk-cinema .zk-collections-grid{
        gap:14px!important;
    }

    .zk-cinema .zk-collection{
        min-height:430px!important;
    }

    .zk-cinema .zk-collection-content{
        left:22px!important;
        right:22px!important;
        bottom:24px!important;
    }


    .zk-cinema .zk-editorial-band{
        padding:
            48px 14px!important;
    }


    .zk-cinema .zk-editorial-promos{
        padding:
            44px 14px
            52px!important;
    }

    .zk-cinema .zk-editorial-promos__grid{
        gap:14px!important;
    }

    .zk-cinema .zk-editorial-promo{
        min-height:440px!important;
    }


    .zk-cinema .zk-featured{
        padding:
            72px 12px
            82px!important;
    }

    .zk-cinema .zk-featured__head{
        margin-bottom:34px!important;
    }

    .zk-cinema .zk-featured__head h2{
        font-size:
            clamp(30px,9vw,42px)!important;
    }

    .zk-cinema .zk-featured__track{
        gap:10px!important;
    }

    .zk-cinema .zk-featured-card{
        flex:
            0 0
            calc(
                (100% - 10px)
                / 2
            )!important;
    }

    .zk-cinema .zk-featured-card__media{
        padding:14px!important;
    }

    .zk-cinema .zk-featured-card h3{
        font-size:12px!important;
    }

    .zk-cinema .zk-featured-card__price strong{
        font-size:13px!important;
    }

    .zk-cinema .zk-featured__arrow{
        width:32px!important;
        height:32px!important;
    }

}