/* =========================================================
   01 — ELITANO HOME HERO
========================================================= */

.elitano-home-hero,
.elitano-home-hero *{
    box-sizing:border-box;
}

.elitano-home-hero{
    position:relative;

    width:100vw !important;
    max-width:100vw !important;

    min-height:760px;

    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;

    overflow:hidden;

    background:#000;

    font-family:"Inter",sans-serif;
}


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

.elitano-home-slides{
    position:absolute;
    inset:0;
    z-index:0;
}

.elitano-home-slide{
    position:absolute;
    inset:0;

    overflow:hidden;

    opacity:0;

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

.elitano-home-slide.is-active{
    opacity:1;
}

.elitano-home-slide img{
    position:absolute;

    inset:-3%;

    width:106%;
    height:106%;

    object-fit:cover;

    filter:
        grayscale(100%)
        contrast(1.08)
        brightness(.78);

    transform:scale(1.02);

    will-change:transform;

    transition:
        transform
        7s
        cubic-bezier(.16,1,.3,1);
}

.elitano-home-slide.is-active img{
    transform:
        scale(1.10)
        translate3d(-1%,-.6%,0);
}

.elitano-home-slide:nth-child(2).is-active img{
    transform:
        scale(1.11)
        translate3d(1%,-.8%,0);
}

.elitano-home-slide:nth-child(3).is-active img{
    transform:
        scale(1.09)
        translate3d(-.5%,1%,0);
}

.elitano-home-slide:nth-child(4).is-active img{
    transform:
        scale(1.10)
        translate3d(.8%,-.4%,0);
}


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

.elitano-home-hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.58) 38%,
            rgba(0,0,0,.30) 66%,
            rgba(0,0,0,.18) 100%
        );
}

.elitano-home-hero::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    opacity:.12;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 3px
        );
}


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

.elitano-home-inner{
    position:relative;

    z-index:3;

    width:min(100%,1500px);

    min-height:760px;

    margin:0 auto;

    padding:
        120px
        64px
        85px;

    display:flex;

    align-items:center;
}

.elitano-home-content{
    max-width:860px;
}


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

.elitano-home-eyebrow{
    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

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

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

    letter-spacing:.31em;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(18px);

    animation:
        elitanoHeroReveal
        .75s
        .15s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.elitano-home-eyebrow::before{
    content:"";

    width:35px;
    height:1px;

    background:rgba(255,255,255,.62);
}


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

.elitano-home-title{
    margin:0;

    max-width:900px;

    color:#fff !important;

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(72px,9vw,138px);
    font-weight:400;

    line-height:.85;

    letter-spacing:.02em;

    text-transform:uppercase;

    opacity:0;

    transform:translateY(36px);

    animation:
        elitanoHeroReveal
        .9s
        .28s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


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

.elitano-home-subtitle{
    max-width:650px;

    margin:28px 0 0;

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

    font-size:16px;

    line-height:1.8;

    opacity:0;

    transform:translateY(24px);

    animation:
        elitanoHeroReveal
        .8s
        .48s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


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

.elitano-home-actions{
    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:38px;

    opacity:0;

    transform:translateY(22px);

    animation:
        elitanoHeroReveal
        .8s
        .64s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.elitano-home-btn{
    display:inline-flex;

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

    gap:16px;

    min-height:54px;

    padding:0 34px;

    border:1px solid rgba(255,255,255,.82);

    background:transparent;

    color:#fff !important;

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

    letter-spacing:.15em;

    text-decoration:none !important;

    text-transform:uppercase;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.elitano-home-btn:hover{
    background:#fff;

    color:#000 !important;

    transform:translateY(-3px);
}

.elitano-home-btn span{
    transition:transform .3s ease;
}

.elitano-home-btn:hover span{
    transform:translateX(5px);
}

.elitano-home-btn.secondary{
    border-color:rgba(255,255,255,.32);

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

    backdrop-filter:blur(5px);
}


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

.elitano-home-slider-ui{
    position:absolute;

    z-index:5;

    right:64px;
    bottom:65px;

    display:flex;

    align-items:center;

    gap:20px;

    opacity:0;

    transform:translateY(15px);

    animation:
        elitanoHeroReveal
        .8s
        .85s
        ease
        forwards;
}

.elitano-home-counter{
    color:rgba(255,255,255,.55);

    font-family:"Bebas Neue",sans-serif;

    font-size:20px;

    letter-spacing:.08em;
}

.elitano-home-counter strong{
    color:#fff;

    font-weight:400;
}

.elitano-home-dots{
    display:flex;

    align-items:center;

    gap:9px;
}

.elitano-home-dot{
    position:relative;

    width:30px;
    height:14px;

    padding:0;

    border:0;

    background:transparent;

    cursor:pointer;
}

.elitano-home-dot::before{
    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:100%;
    height:1px;

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

    transform:translateY(-50%);

    transition:
        background .25s ease,
        height .25s ease;
}

.elitano-home-dot:hover::before{
    background:rgba(255,255,255,.75);
}

.elitano-home-dot.is-active::before{
    height:2px;

    background:#fff;
}


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

.elitano-home-progress{
    position:absolute;

    z-index:5;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:rgba(255,255,255,.14);
}

.elitano-home-progress-bar{
    width:0;
    height:100%;

    background:#fff;
}

.elitano-home-progress-bar.is-running{
    animation:
        elitanoHeroProgress
        6s
        linear
        forwards;
}


/* =========================================================
   HERO SIDE LABEL
========================================================= */

.elitano-home-side-label{
    position:absolute;

    z-index:4;

    top:50%;
    right:18px;

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

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

    letter-spacing:.28em;

    text-transform:uppercase;

    transform:
        translateY(-50%)
        rotate(90deg);
}


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

@keyframes elitanoHeroReveal{

    to{
        opacity:1;

        transform:translateY(0);
    }

}

@keyframes elitanoHeroProgress{

    from{
        width:0;
    }

    to{
        width:100%;
    }

}


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

@media(max-width:1024px){

    .elitano-home-hero,
    .elitano-home-inner{
        min-height:690px;
    }

    .elitano-home-inner{
        padding-left:34px;
        padding-right:34px;
    }

    .elitano-home-slider-ui{
        right:34px;
        bottom:45px;
    }

}

@media(max-width:767px){

    .elitano-home-hero,
    .elitano-home-inner{
        min-height:690px;
    }

    .elitano-home-hero::before{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.20) 0%,
                rgba(0,0,0,.42) 45%,
                rgba(0,0,0,.84) 100%
            );
    }

    .elitano-home-inner{
        align-items:flex-end;

        padding:
            90px
            20px
            110px;
    }

    .elitano-home-title{
        font-size:
            clamp(
                62px,
                18vw,
                90px
            );
    }

    .elitano-home-subtitle{
        font-size:14px;

        line-height:1.7;
    }

    .elitano-home-actions{
        display:grid;

        grid-template-columns:1fr;

        width:100%;

        margin-top:30px;
    }

    .elitano-home-btn{
        width:100%;

        min-height:50px;
    }

    .elitano-home-slider-ui{
        left:20px;
        right:auto;

        bottom:45px;
    }

    .elitano-home-side-label{
        display:none;
    }

    .elitano-home-slide img{
        inset:0;

        width:100%;
        height:100%;
    }

}


/* =========================================================
   02 — ELITANO PREMIUM WOOCOMMERCE PRODUCT GRID
   Elementor CSS Class:
   elitano-category-products
========================================================= */

.elitano-category-products,
.elitano-category-products *{
    box-sizing:border-box;
}

.elitano-category-products{
    width:100%;

    font-family:"Inter",sans-serif;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.elitano-category-products .woocommerce ul.products,
.elitano-category-products ul.products{

    display:grid !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:54px 24px !important;

    width:100% !important;

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

    list-style:none !important;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.elitano-category-products
.woocommerce ul.products li.product,

.elitano-category-products
ul.products li.product{

    position:relative !important;

    float:none !important;
    clear:none !important;

    width:100% !important;
    max-width:none !important;

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

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

    min-width:0;

    background:transparent !important;

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

    box-shadow:none !important;

    opacity:0;

    transform:translateY(28px);

    animation:
        elitanoProductReveal
        .7s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.elitano-category-products li.product:nth-child(1){
    animation-delay:.03s;
}

.elitano-category-products li.product:nth-child(2){
    animation-delay:.07s;
}

.elitano-category-products li.product:nth-child(3){
    animation-delay:.11s;
}

.elitano-category-products li.product:nth-child(4){
    animation-delay:.15s;
}

.elitano-category-products li.product:nth-child(5){
    animation-delay:.19s;
}

.elitano-category-products li.product:nth-child(6){
    animation-delay:.23s;
}

.elitano-category-products li.product:nth-child(7){
    animation-delay:.27s;
}

.elitano-category-products li.product:nth-child(8){
    animation-delay:.31s;
}

.elitano-category-products li.product:nth-child(n+9){
    animation-delay:.34s;
}

@keyframes elitanoProductReveal{

    from{
        opacity:0;

        transform:translateY(28px);
    }

    to{
        opacity:1;

        transform:translateY(0);
    }

}


/* =========================================================
   LOOP PRODUCT LINK
========================================================= */

.elitano-category-products
li.product
a.woocommerce-LoopProduct-link{

    display:flex !important;

    flex-direction:column;

    width:100%;

    color:#111 !important;

    text-decoration:none !important;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.elitano-category-products
li.product
a.woocommerce-LoopProduct-link
img,

.elitano-category-products
li.product
img.attachment-woocommerce_thumbnail{

    display:block !important;

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

    aspect-ratio:1 / 1;

    margin:0 0 19px !important;

    padding:28px !important;

    object-fit:contain !important;

    background:
        linear-gradient(
            145deg,
            #ecece7 0%,
            #fafaf8 100%
        );

    border:1px solid rgba(0,0,0,.07);

    border-radius:0 !important;

    transform:scale(1);

    transition:
        transform .65s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease,
        background .35s ease;
}

.elitano-category-products
li.product:hover
img.attachment-woocommerce_thumbnail{

    transform:
        scale(1.035)
        translateY(-3px);

    background:#fff;

    border-color:rgba(0,0,0,.14);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.065);
}


/* =========================================================
   REMOVE OLD MAGNIFIER / LOUPE / QUICK VIEW
========================================================= */

.elitano-category-products
.yith-wcqv-button,

.elitano-category-products
.woosq-btn,

.elitano-category-products
.quick-view,

.elitano-category-products
.quickview,

.elitano-category-products
.product-quick-view,

.elitano-category-products
.product-zoom,

.elitano-category-products
.zoom,

.elitano-category-products
.zoom-icon,

.elitano-category-products
.magnifier,

.elitano-category-products
.magnify,

.elitano-category-products
[class*="quick-view"]:not(.elitano-product-quick),

.elitano-category-products
[class*="quickview"]:not(.elitano-product-quick),

.elitano-category-products
[class*="magnif"]{

    display:none !important;
}


/* =========================================================
   NEW EYE QUICK-VIEW ICON
========================================================= */

.elitano-product-quick{

    position:absolute;

    z-index:50;

    top:14px;
    right:14px;

    width:42px;
    height:42px;

    padding:0;

    display:flex;

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

    border:1px solid rgba(0,0,0,.12);

    border-radius:0;

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

    color:#111;

    cursor:pointer;

    box-shadow:
        0 8px 26px
        rgba(0,0,0,.08);

    backdrop-filter:blur(7px);

    opacity:0;

    transform:
        translateY(-8px)
        scale(.96);

    transition:
        opacity .28s ease,
        transform .4s cubic-bezier(.16,1,.3,1),
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.elitano-category-products
li.product:hover
.elitano-product-quick{

    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

.elitano-product-quick:hover{

    background:#111;

    color:#fff;

    border-color:#111;

    transform:
        translateY(-3px)
        scale(1) !important;
}

.elitano-product-quick svg{

    width:18px;
    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;
}


/* =========================================================
   SALE BADGE
========================================================= */

.elitano-category-products
li.product
.onsale{

    position:absolute !important;

    z-index:40 !important;

    top:14px !important;
    left:14px !important;
    right:auto !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;

    padding:9px 11px !important;

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

    background:#090909 !important;

    color:#fff !important;

    font-family:"Inter",sans-serif !important;

    font-size:8px !important;
    font-weight:700 !important;

    line-height:1 !important;

    letter-spacing:.13em;

    text-transform:uppercase;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.elitano-category-products
li.product
.woocommerce-loop-product__title{

    min-height:48px;

    margin:0 0 9px !important;

    padding:0 !important;

    color:#111 !important;

    font-family:"Inter",sans-serif !important;

    font-size:13px !important;
    font-weight:600 !important;

    line-height:1.55 !important;

    letter-spacing:0 !important;

    text-transform:none !important;

    transition:
        opacity .25s ease,
        transform .3s ease;
}

.elitano-category-products
li.product:hover
.woocommerce-loop-product__title{

    opacity:.60;

    transform:translateX(2px);
}


/* =========================================================
   PRICE
========================================================= */

.elitano-category-products
li.product
.price{

    display:block !important;

    min-height:25px;

    margin:
        auto
        0
        6px !important;

    color:#090909 !important;

    font-family:"Inter",sans-serif !important;

    font-size:14px !important;
    font-weight:700 !important;

    line-height:1.4 !important;
}

.elitano-category-products
li.product
.price del{

    margin-right:7px;

    color:rgba(0,0,0,.35) !important;

    font-size:11px !important;
    font-weight:500 !important;
}

.elitano-category-products
li.product
.price ins{

    color:#090909 !important;

    font-weight:700 !important;

    text-decoration:none !important;
}


/* =========================================================
   VAT
========================================================= */

.elitano-category-products
li.product
small.woocommerce-price-suffix,

.elitano-category-products
li.product
.woocommerce-price-suffix{

    display:block !important;

    margin-top:4px;

    color:rgba(0,0,0,.42) !important;

    font-size:8px !important;
    font-weight:500 !important;

    letter-spacing:.10em;

    text-transform:uppercase;
}


/* =========================================================
   ADD TO CART
========================================================= */

.elitano-category-products
li.product
.button,

.elitano-category-products
li.product
.add_to_cart_button{

    display:flex !important;

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

    width:100% !important;

    min-height:47px;

    margin:17px 0 0 !important;

    padding:0 16px !important;

    border:1px solid #111 !important;

    border-radius:0 !important;

    background:transparent !important;

    color:#111 !important;

    font-family:"Inter",sans-serif !important;

    font-size:9px !important;
    font-weight:700 !important;

    line-height:1 !important;

    letter-spacing:.12em;

    text-transform:uppercase;

    box-shadow:none !important;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.elitano-category-products
li.product
.button:hover,

.elitano-category-products
li.product
.add_to_cart_button:hover{

    background:#111 !important;

    color:#fff !important;

    transform:translateY(-3px);
}


/* =========================================================
   ADDED TO CART
========================================================= */

.elitano-category-products
li.product
.added_to_cart{

    display:flex;

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

    min-height:38px;

    margin-top:8px;

    color:#111 !important;

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

    letter-spacing:.12em;

    text-decoration:none !important;

    text-transform:uppercase;
}


/* =========================================================
   BOTTOM CARD LINE
========================================================= */

.elitano-category-products
li.product::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-24px;

    width:0;
    height:1px;

    background:#111;

    opacity:.14;

    transition:
        width
        .6s
        cubic-bezier(.16,1,.3,1);
}

.elitano-category-products
li.product:hover::after{
    width:100%;
}


/* =========================================================
   PAGINATION
========================================================= */

.elitano-category-products
.woocommerce-pagination{

    margin-top:70px !important;
}

.elitano-category-products
.woocommerce-pagination
ul.page-numbers{

    display:flex !important;

    justify-content:center;

    gap:8px;

    border:0 !important;
}

.elitano-category-products
.woocommerce-pagination
.page-numbers li{

    border:0 !important;
}

.elitano-category-products
.woocommerce-pagination
.page-numbers a,

.elitano-category-products
.woocommerce-pagination
.page-numbers span{

    display:flex !important;

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

    min-width:42px;
    height:42px;

    border:1px solid rgba(0,0,0,.14) !important;

    background:transparent !important;

    color:#111 !important;

    font-size:10px !important;

    transition:.25s ease;
}

.elitano-category-products
.woocommerce-pagination
.page-numbers .current,

.elitano-category-products
.woocommerce-pagination
.page-numbers a:hover{

    border-color:#111 !important;

    background:#111 !important;

    color:#fff !important;
}


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

@media(max-width:1100px){

    .elitano-category-products
    .woocommerce ul.products,

    .elitano-category-products
    ul.products{

        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        gap:
            42px
            20px !important;
    }

}


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

@media(max-width:767px){

    .elitano-category-products
    .woocommerce ul.products,

    .elitano-category-products
    ul.products{

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:
            32px
            12px !important;
    }


    .elitano-category-products
    li.product
    img.attachment-woocommerce_thumbnail{

        padding:14px !important;

        margin-bottom:14px !important;
    }


    .elitano-category-products
    li.product
    .woocommerce-loop-product__title{

        min-height:44px;

        font-size:11px !important;

        line-height:1.5 !important;
    }


    .elitano-category-products
    li.product
    .price{

        font-size:12px !important;
    }


    .elitano-category-products
    li.product
    .button,

    .elitano-category-products
    li.product
    .add_to_cart_button{

        min-height:42px;

        margin-top:13px !important;

        padding:0 7px !important;

        font-size:7.5px !important;

        letter-spacing:.07em;
    }


    .elitano-product-quick{

        top:9px;
        right:9px;

        width:36px;
        height:36px;

        opacity:1;

        transform:none;
    }


    .elitano-product-quick svg{

        width:16px;
        height:16px;
    }


    .elitano-category-products
    li.product
    .onsale{

        top:9px !important;
        left:9px !important;

        padding:7px 8px !important;

        font-size:7px !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .elitano-home-slide img,
    .elitano-home-eyebrow,
    .elitano-home-title,
    .elitano-home-subtitle,
    .elitano-home-actions,
    .elitano-home-slider-ui,
    .elitano-home-progress-bar,

    .elitano-category-products li.product,
    .elitano-category-products li.product img,
    .elitano-product-quick{

        animation:none !important;
        transition:none !important;
    }


    .elitano-home-eyebrow,
    .elitano-home-title,
    .elitano-home-subtitle,
    .elitano-home-actions,
    .elitano-home-slider-ui,

    .elitano-category-products li.product{

        opacity:1 !important;

        transform:none !important;
    }

}

<script>
(function(){

    "use strict";


    function getProductID(card){

        if(!card){
            return null;
        }


        for(const className of card.classList){

            const match =
                className.match(
                    /^post-(\d+)$/
                );


            if(match){

                return match[1];

            }

        }


        const cartButton =
            card.querySelector(
                "[data-product_id]"
            );


        if(cartButton){

            return cartButton.getAttribute(
                "data-product_id"
            );

        }


        return null;

    }



    function addElitanoQuickViewIcons(){

        const products =
            document.querySelectorAll(
                ".elitano-category-products li.product"
            );


        products.forEach(
            function(product){

                if(
                    product.querySelector(
                        ".elitano-product-quick"
                    )
                ){
                    return;
                }


                const productID =
                    getProductID(product);


                if(!productID){
                    return;
                }


                const button =
                    document.createElement(
                        "button"
                    );


                button.type =
                    "button";


                button.className =
                    "elitano-product-quick";


                button.dataset.productId =
                    productID;


                button.setAttribute(
                    "aria-label",
                    "Quick View"
                );


                button.innerHTML = `
                    <svg
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                    >
                        <path
                            d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6S2.5 12 2.5 12Z"
                        ></path>

                        <circle
                            cx="12"
                            cy="12"
                            r="2.8"
                        ></circle>
                    </svg>
                `;


                product.appendChild(
                    button
                );

            }
        );

    }



    addElitanoQuickViewIcons();



    const observer =
        new MutationObserver(
            function(){

                addElitanoQuickViewIcons();

            }
        );


    observer.observe(
        document.body,
        {
            childList:true,
            subtree:true
        }
    );


})();
</script>