/* =========================================================
   PRODUCT LIST PAGE
========================================================= */

.product-page-container{
    width:min(1280px,calc(100% - 48px));
    margin:auto;
}


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

.products-page-hero{
    position:relative;

    height:430px;
    min-height:430px;

    display:grid;
    grid-template-columns:42% 58%;

    overflow:hidden;

    background:#fffaf2;
}


.products-page-hero-copy{
    position:relative;
    z-index:4;

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

    background:
        radial-gradient(
            circle at 80% 45%,
            rgba(220,158,44,.09),
            transparent 40%
        ),
        #fffaf2;
}


.products-page-hero-copy::after{
    content:"";

    position:absolute;

    z-index:-1;

    top:-160px;
    right:-125px;

    width:320px;
    height:680px;

    border-radius:
        0 0 90% 75% /
        0 0 62% 48%;

    background:
        linear-gradient(
            160deg,
            #fffaf1,
            #fff4df
        );

    transform:
        rotate(10deg);

    box-shadow:
        9px 0 0 #d89a28,
        18px 0 0 rgba(238,188,86,.40);
}


.products-page-hero-inner{
    width:min(
        490px,
        calc(100% - 65px)
    );

    position:relative;
    z-index:3;
}


.product-page-label{
    display:block;

    color:#b96d04;

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

    letter-spacing:1.2px;
}


.product-page-small-rule{
    width:32px;
    height:2px;

    margin:13px 0 17px;

    background:#c77b05;
}


.products-page-hero h1{
    margin:0;

    color:#241a13;

    font:
        600 47px/1.04
        "Playfair Display",
        serif;

    letter-spacing:-1.3px;
}


.products-page-hero h1 em{
    color:#b96c04;
    font-style:normal;
}


.product-heading-rule{
    width:90px;

    display:flex;
    align-items:center;

    margin:
        22px 0;
}


.product-heading-rule span{
    flex:1;
    height:1px;

    background:#c77b05;
}


.product-heading-rule i{
    width:6px;
    height:6px;

    border:1px solid #c77b05;

    background:#fffaf2;

    transform:
        rotate(45deg);
}


.products-page-hero p{
    max-width:420px;

    margin:
        0 0 25px;

    color:#62594f;

    font-size:13px;
    line-height:1.75;
}


.product-page-btn{
    min-height:48px;

    padding:0 23px;

    border-radius:5px;

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

    gap:15px;

    color:#fff;

    background:
        linear-gradient(
            90deg,
            #b86b00,
            #d48b06
        );

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

    letter-spacing:.6px;

    box-shadow:
        0 11px 25px
        rgba(178,105,0,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.product-page-btn:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 17px 32px
        rgba(178,105,0,.25);
}


.product-page-btn svg{
    width:17px;
    height:17px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}


/* HERO IMAGE */

.products-page-hero-image{
    position:relative;

    height:475px;

    overflow:hidden;
}


.products-page-hero-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1.2s ease;
}


.products-page-hero:hover
.products-page-hero-image img{
    transform:
        scale(1.025);
}


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

.product-list-section{
    padding:
        55px 0
        48px;

    background:#fffdf9;
}


.product-list-heading{
    max-width:700px;

    margin:
        0 auto
        34px;

    text-align:center;
}


.product-list-heading > span{
    color:#b96d04;

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

    letter-spacing:1.25px;
}


.product-list-heading h2{
    margin:
        7px 0
        9px;

    color:#251a13;

    font:
        600 37px/1.1
        "Playfair Display",
        serif;
}


.product-list-heading p{
    margin:0;

    color:#766d64;

    font-size:12px;
}


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

.products-list-grid{
    display:grid;

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

    gap:20px;
}


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

.catalog-product-card{
    min-width:0;

    border:
        1px solid
        #ebd8b8;

    border-radius:14px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 9px 25px
        rgba(63,42,17,.06);

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


.catalog-product-card:hover{
    transform:
        translateY(-7px);

    border-color:
        #dda146;

    box-shadow:
        0 20px 40px
        rgba(63,42,17,.12);
}


/* =========================================================
   MEDIA
========================================================= */

.catalog-product-media{
    position:relative;

    height:225px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            #fff,
            #f4eee5
        );
}


.catalog-product-track{
    width:100%;
    height:100%;

    display:flex;

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

    will-change:transform;
}


.catalog-product-slide{
    flex:0 0 100%;

    width:100%;
    height:100%;

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


.catalog-product-slide img{
    width:100%;
    height:100%;

    /* padding:14px; */

    object-fit:cover;

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


.catalog-product-card:hover
.catalog-product-slide img{
    transform:
        scale(1.045);
}


/* =========================================================
   IMAGE COUNT
========================================================= */

.catalog-image-count{
    position:absolute;

    z-index:5;

    left:10px;
    top:10px;

    height:28px;

    padding:0 9px;

    display:flex;
    align-items:center;

    gap:5px;

    border-radius:20px;

    color:#875006;

    background:
        rgba(255,249,237,.92);

    border:
        1px solid
        rgba(211,157,69,.28);

    backdrop-filter:
        blur(8px);

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


.catalog-image-count svg{
    width:13px;
    height:13px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;
}


/* =========================================================
   ARROWS
========================================================= */

.catalog-slider-arrow{
    position:absolute;

    z-index:6;

    top:50%;

    width:34px;
    height:34px;

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

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    background:
        rgba(24,16,10,.58);

    opacity:0;

    cursor:pointer;

    transform:
        translateY(-50%)
        scale(.86);

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


.catalog-product-card:hover
.catalog-slider-arrow{
    opacity:1;

    transform:
        translateY(-50%)
        scale(1);
}


.catalog-slider-arrow:hover{
    background:#b96d04;
}


.catalog-slider-arrow svg{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

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


.catalog-prev{
    left:10px;
}


.catalog-next{
    right:10px;
}


/* =========================================================
   DOTS
========================================================= */

.catalog-slider-dots{
    position:absolute;

    z-index:7;

    left:50%;
    bottom:10px;

    transform:
        translateX(-50%);

    display:flex;
    align-items:center;

    gap:4px;

    padding:
        4px 6px;

    border-radius:20px;

    background:
        rgba(18,12,8,.25);

    backdrop-filter:
        blur(6px);
}


.catalog-slider-dots button{
    width:5px;
    height:5px;

    border:0;

    padding:0;

    border-radius:20px;

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

    cursor:pointer;

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


.catalog-slider-dots button.active{
    width:15px;

    background:#fff;
}


/* =========================================================
   COPY
========================================================= */

.catalog-product-copy{
    padding:
        15px 15px
        14px;
}


.catalog-product-category{
    display:block;

    margin-bottom:6px;

    color:#b36b05;

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

    letter-spacing:.75px;

    text-transform:uppercase;
}


.catalog-product-copy h3{
    min-height:42px;

    margin:0;

    color:#261b13;

    font:
        600 16px/1.15
        "Playfair Display",
        serif;
}


.catalog-product-bottom{
    margin-top:13px;

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


.catalog-product-bottom > span{
    color:#8b8175;

    font-size:9px;
}


.catalog-product-bottom a{
    width:31px;
    height:31px;

    border:
        1px solid
        #d48b15;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#bd7005;

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


.catalog-product-bottom a:hover{
    transform:
        translateX(3px);

    color:#fff;

    background:#c77b05;
}


.catalog-product-bottom svg{
    width:14px;
    height:14px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;
}


/* =========================================================
   CTA
========================================================= */

.product-page-cta{
    padding:
        0 0
        36px;

    background:#fffdf9;
}


.product-page-cta-inner{
    min-height:95px;

    padding:
        18px 30px;

    border:
        1px solid
        rgba(231,203,155,.55);

    border-radius:11px;

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:22px;

    background:
        linear-gradient(
            100deg,
            #fff8eb,
            #fff0d4
        );
}


.product-page-cta-icon{
    width:58px;
    height:58px;

    border-radius:50%;

    display:grid;
    place-items:center;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #ad6200,
            #d78e10
        );
}


.product-page-cta-icon svg{
    width:27px;
    height:27px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;
}


.product-page-cta h2{
    margin:
        0 0 4px;

    font-size:19px;
}


.product-page-cta p{
    margin:0;

    color:#645c53;

    font-size:11px;
}


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

@media(max-width:1100px){

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

}


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

@media(max-width:760px){

    .product-page-container{
        width:
            calc(100% - 26px);
    }


    .products-page-hero{
        height:auto;
        min-height:auto;

        display:flex;
        flex-direction:column;
    }


    .products-page-hero-image{
        order:1;

        height:270px;
    }


    .products-page-hero-copy{
        order:2;

        justify-content:flex-start;
    }


    .products-page-hero-copy::after{
        display:none;
    }


    .products-page-hero-inner{
        width:100%;

        padding:
            32px 18px
            38px;
    }


    .products-page-hero h1{
        font-size:36px;
    }


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

        gap:12px;
    }


    .catalog-product-media{
        height:190px;
    }


    .catalog-product-copy{
        padding:
            12px;
    }


    .catalog-product-copy h3{
        min-height:36px;

        font-size:14px;
    }


    .catalog-slider-arrow{
        opacity:1;

        width:30px;
        height:30px;

        transform:
            translateY(-50%)
            scale(1);
    }


    .product-page-cta-inner{
        grid-template-columns:
            auto 1fr;
    }


    .product-page-cta-inner
    .product-page-btn{
        grid-column:1/-1;

        width:100%;
    }

}


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

@media(max-width:480px){

    .products-page-hero-image{
        height:270px;
    }


    .products-page-hero h1{
        font-size:32px;
    }


    .product-list-heading h2{
        font-size:29px;
    }


    .products-list-grid{
        grid-template-columns:1fr;
    }


    .catalog-product-media{
        height:245px;
    }


    .catalog-product-copy h3{
        min-height:auto;

        font-size:17px;
    }


    .catalog-product-bottom > span{
        font-size:9px;
    }

}

/* =========================================================
   PREMIUM SLOW PRODUCT REVEAL
========================================================= */

.catalog-product-card.reveal{
    opacity:0;

    transform:
        translate3d(
            0,
            48px,
            0
        )
        scale(.975);

    filter:
        blur(3px);

    transition:
        opacity 1s
            cubic-bezier(.16,1,.3,1),
        transform 1.05s
            cubic-bezier(.16,1,.3,1),
        filter .85s ease,
        border-color .35s ease,
        box-shadow .35s ease;

    transition-delay:
        var(
            --reveal-delay,
            0ms
        );
}


.catalog-product-card.reveal.show{
    opacity:1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    filter:
        blur(0);
}


.catalog-product-card.reveal.show:hover{
    transform:
        translate3d(
            0,
            -8px,
            0
        )
        scale(1);
}


/* image slider also slower */

.catalog-product-track{
    transition:
        transform .9s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );
}


/* product description */

.catalog-short-description{
    margin:9px 0 0;

    color:#71675e;

    font-size:10px;

    line-height:1.55;
}


.catalog-product-copy h3 a{
    color:inherit;

    transition:
        color .25s ease;
}


.catalog-product-copy h3 a:hover{
    color:#b96c04;
}


/* accessibility */

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

    .catalog-product-card.reveal{
        opacity:1;

        transform:none;

        filter:none;

        transition:none;

        transition-delay:0ms;
    }

}