/* =========================================
   KUUSTE MAIN PAGE UPGRADE
========================================= */


/* =========================================
   BODY
========================================= */

body {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(0, 0, 0, .045),
            transparent 28%
        ),
        #f4f1eb;

    overflow-x: hidden;
}


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

.header {
    top: 18px;
    left: 50%;

    width: calc(100% - 60px);
    max-width: 1400px;

    height: 68px;

    padding: 0 18px 0 24px;

    transform: translateX(-50%);

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

    border-radius: 16px;

    background:
        rgba(244, 241, 235, .78);

    -webkit-backdrop-filter:
        blur(24px);

    backdrop-filter:
        blur(24px);

    box-shadow:
        0 12px 50px rgba(0, 0, 0, .06);

    transition:
        top .35s cubic-bezier(.2,.8,.2,1),
        width .35s cubic-bezier(.2,.8,.2,1),
        height .35s cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* SCROLLED HEADER */

.header.header-scrolled {
    top: 10px;

    width: calc(100% - 90px);
    height: 60px;

    background:
        rgba(244, 241, 235, .9);

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

    box-shadow:
        0 14px 45px
        rgba(0, 0, 0, .09);

    -webkit-backdrop-filter:
        blur(30px);

    backdrop-filter:
        blur(30px);
}


.logo {
    letter-spacing: -1.4px;

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


.logo:hover {
    transform:
        translateY(-1px);

    opacity: .72;
}


.header nav {
    gap: 12px;
}


.header nav a {
    position: relative;

    padding: 10px 14px;

    border-radius: 10px;

    color: #6c6c6c;

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


.header nav a:hover {
    background:
        rgba(0, 0, 0, .05);

    color: #111;

    transform:
        translateY(-1px);
}


/* =========================================
   CART BUTTON
========================================= */

.cart-button {
    min-height: 42px;

    padding:
        8px 10px
        8px 17px;

    display: flex;
    align-items: center;

    border-radius: 11px;

    transition:
        transform .25s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease,
        background .25s ease;
}


.cart-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .16);
}


/* CART NUMBER */

#cartCount {
    transform:
        scale(1);

    transition:
        transform .2s ease;
}


#cartCount.cart-count-pop {
    animation:
        cartCountPop .45s
        cubic-bezier(.2,.9,.3,1.35);
}


@keyframes cartCountPop {

    0% {
        transform:
            scale(1);
    }

    35% {
        transform:
            scale(1.45)
            rotate(-7deg);
    }

    65% {
        transform:
            scale(.9)
            rotate(3deg);
    }

    100% {
        transform:
            scale(1)
            rotate(0);
    }

}


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

.hero {
    min-height: 100vh;

    padding:
        180px 8%
        120px;

    isolation: isolate;

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


/* HERO GRID */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background-image:
        linear-gradient(
            rgba(0,0,0,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.035) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );
}


/* HERO GLOW */

.hero::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -250px;
    top: 120px;

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.8),
            rgba(0,0,0,.035) 35%,
            transparent 68%
        );

    filter:
        blur(10px);

    pointer-events: none;

    animation:
        heroGlowFloat
        8s ease-in-out
        infinite alternate;
}


@keyframes heroGlowFloat {

    from {
        transform:
            translate3d(
                0,
                -15px,
                0
            )
            scale(.96);
    }

    to {
        transform:
            translate3d(
                -35px,
                30px,
                0
            )
            scale(1.05);
    }

}


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

.hero-small {
    width: fit-content;

    padding:
        10px 13px;

    margin-bottom:
        30px;

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

    border-radius:
        999px;

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

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);

    font-size:
        9px;

    letter-spacing:
        2.4px;
}


.hero h1 {
    position: relative;

    max-width:
        1150px;

    text-shadow:
        0 10px 40px
        rgba(0,0,0,.035);
}


.hero h1 span {
    -webkit-text-stroke:
        1.7px #151515;

    transition:
        color .3s ease,
        -webkit-text-stroke .3s ease;
}


.hero > p {
    padding-left:
        18px;

    border-left:
        2px solid #151515;

    color:
        #5f5f5f;
}


/* =========================================
   HERO INTRO ANIMATION
========================================= */

.hero-intro {
    opacity: 0;

    transform:
        translate3d(
            0,
            calc(
                28px +
                var(--parallax-y, 0px)
            ),
            0
        );

    filter:
        blur(5px);

    transition:
        opacity .8s
        cubic-bezier(.2,.8,.2,1)
        var(--hero-delay, 0ms),

        transform .9s
        cubic-bezier(.2,.8,.2,1)
        var(--hero-delay, 0ms),

        filter .8s ease
        var(--hero-delay, 0ms);
}


.hero-intro.hero-intro-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            var(--parallax-y, 0px),
            0
        );

    filter:
        blur(0);
}


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

.hero-button {
    position: relative;

    overflow: hidden;

    padding:
        18px 20px
        18px 24px;

    border-radius:
        12px;

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

    transform:
        translate3d(
            var(--button-x, 0px),
            calc(
                var(--parallax-y, 0px) +
                var(--button-y, 0px)
            ),
            0
        );

    transition:
        transform .25s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease;
}


.hero-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .55s ease;
}


.hero-button:hover::before {
    left:
        130%;
}


.hero-button:hover {
    box-shadow:
        0 20px 45px
        rgba(0,0,0,.18);
}


.hero-button span {
    display:
        inline-block;

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1);
}


.hero-button:hover span {
    transform:
        translateY(4px);
}


/* =========================================
   HERO BACKGROUND WORD
========================================= */

.hero-word {
    right:
        -20px;

    bottom:
        -65px;

    font-size:
        clamp(
            150px,
            18vw,
            310px
        );

    color:
        rgba(0,0,0,.03);

    user-select:
        none;

    will-change:
        transform;
}


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

.products {
    position:
        relative;

    padding:
        150px 8%
        160px;

    background:
        radial-gradient(
            circle at 50% -20%,
            #2a2a2a,
            #151515 40%
        );

    overflow:
        hidden;
}


.products::before {
    content:
        "";

    position:
        absolute;

    width:
        550px;

    height:
        550px;

    right:
        -250px;

    top:
        150px;

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

    border-radius:
        50%;

    filter:
        blur(1px);

    pointer-events:
        none;
}


/* =========================================
   SECTION HEADING
========================================= */

.section-heading {
    position:
        relative;

    z-index:
        2;
}


.section-heading span {
    display:
        inline-block;

    padding:
        8px 11px;

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

    border-radius:
        999px;

    color:
        #888;
}


.section-heading h2 {
    max-width:
        900px;

    margin-top:
        20px;

    line-height:
        .93;
}


.section-heading p {
    margin-top:
        18px;

    font-size:
        14px;
}


/* =========================================
   SCROLL REVEAL
========================================= */

.reveal-element {
    opacity:
        0;

    transform:
        translate3d(
            0,
            42px,
            0
        );

    filter:
        blur(5px);

    transition:
        opacity .8s
        cubic-bezier(.2,.8,.2,1)
        var(--reveal-delay, 0ms),

        transform .85s
        cubic-bezier(.2,.8,.2,1)
        var(--reveal-delay, 0ms),

        filter .75s ease
        var(--reveal-delay, 0ms);
}


.reveal-element.is-visible {
    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    filter:
        blur(0);
}


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

.product-grid {
    position:
        relative;

    z-index:
        2;

    gap:
        24px;

    margin-top:
        75px;

    perspective:
        1500px;
}


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

.product-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --mouse-x: 50%;
    --mouse-y: 50%;

    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #212121,
            #191919
        );

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.28);

    transform-style:
        preserve-3d;

    transition:
        transform .4s
        cubic-bezier(.2,.8,.2,1),

        border-color .35s ease,

        box-shadow .4s ease;
}


/* MOUSE LIGHT */

.product-card::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        5;

    pointer-events:
        none;

    opacity:
        0;

    background:
        radial-gradient(
            500px circle
            at var(--mouse-x)
            var(--mouse-y),
            rgba(255,255,255,.065),
            transparent 42%
        );

    transition:
        opacity .35s ease;
}


.product-card:hover::after {
    opacity:
        1;
}


.product-card:hover {
    transform:
        perspective(1200px)
        rotateX(
            var(--tilt-x)
        )
        rotateY(
            var(--tilt-y)
        )
        translateY(-8px);

    border-color:
        rgba(255,255,255,.17);

    box-shadow:
        0 42px 110px
        rgba(0,0,0,.42);
}


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

.product-image {
    position:
        relative !important;

    width:
        100%;

    height:
        520px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        45px !important;

    overflow:
        hidden !important;

    background:
        #ffffff !important;

    background-image:
        none !important;
}


/* NO GRID BEHIND HOODIES */

.product-image::before,
.product-image::after {
    display:
        none !important;

    content:
        none !important;

    background:
        none !important;

    background-image:
        none !important;
}


/* =========================================
   HOODIE IMAGE
========================================= */

.product-image img {
    position:
        relative;

    z-index:
        2;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        430px !important;

    max-height:
        430px !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    display:
        block !important;

    margin:
        auto !important;

    opacity:
        1;

    filter:
        blur(0);

    transform:
        scale(1);

    will-change:
        transform,
        opacity,
        filter;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1),

        opacity .22s ease,

        filter .22s ease;
}


/* PRODUCT HOVER */

.product-card:hover
.product-image img {
    transform:
        scale(1.035);
}


/* =========================================
   IMAGE COLOR SWITCH ANIMATION
========================================= */

.product-image img.image-switch-out {
    opacity:
        0;

    filter:
        blur(4px);

    transform:
        scale(.965) !important;
}


.product-image img.image-switch-in {
    animation:
        hoodieImageIn
        .5s
        cubic-bezier(.2,.8,.2,1);
}


@keyframes hoodieImageIn {

    0% {
        opacity:
            0;

        filter:
            blur(4px);

        transform:
            scale(.965);
    }

    55% {
        opacity:
            1;

        filter:
            blur(0);

        transform:
            scale(1.015);
    }

    100% {
        opacity:
            1;

        filter:
            blur(0);

        transform:
            scale(1);
    }

}


/* =========================================
   LARGE HOODIE SIZE
========================================= */

.product-card:first-child
.product-image {
    padding:
        70px !important;
}


.product-card:first-child
.product-image img {
    width:
        86% !important;

    height:
        86% !important;

    max-width:
        86% !important;

    max-height:
        86% !important;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


.product-card:first-child:hover
.product-image img {
    transform:
        scale(1.035);
}


/* =========================================
   PRODUCT TAG
========================================= */

.product-tag {
    z-index:
        10;

    top:
        18px;

    left:
        18px;

    padding:
        10px 13px;

    border-radius:
        999px;

    box-shadow:
        0 6px 25px
        rgba(0,0,0,.12);

    transition:
        transform .35s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease;
}


.product-card:hover
.product-tag {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.16);
}


/* =========================================
   PRODUCT INFO
========================================= */

.product-info {
    position:
        relative;

    z-index:
        6;

    padding:
        32px;
}


.product-top {
    align-items:
        flex-start;
}


.product-top h3 {
    font-size:
        30px;

    letter-spacing:
        -1.3px;
}


.product-top > strong {
    padding:
        8px 11px;

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

    border-radius:
        10px;

    font-size:
        20px;

    transition:
        background .25s ease,
        border-color .25s ease;
}


.product-card:hover
.product-top > strong {
    background:
        rgba(255,255,255,.045);

    border-color:
        rgba(255,255,255,.2);
}


.product-info > p {
    padding-bottom:
        5px;

    line-height:
        1.7;
}


/* =========================================
   LABELS
========================================= */

.product-info label {
    margin-top:
        20px;

    color:
        #969696;

    letter-spacing:
        1.5px;
}


/* =========================================
   SELECT
========================================= */

.product-info select {
    height:
        51px;

    padding:
        0 15px;

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

    border-radius:
        11px;

    background:
        #151515;

    color:
        #fff;

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


.product-info select:hover {
    border-color:
        rgba(255,255,255,.25);

    background:
        #181818;
}


.product-info select:focus {
    border-color:
        rgba(255,255,255,.4);

    background:
        #181818;

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.045);

    outline:
        none;
}


/* =========================================
   ADD BUTTON
========================================= */

.add-button {
    --button-x: 0px;
    --button-y: 0px;

    min-height:
        55px;

    margin-top:
        28px;

    padding:
        0 18px;

    align-items:
        center;

    border-radius:
        11px;

    transform:
        translate3d(
            var(--button-x),
            var(--button-y),
            0
        );

    transition:
        transform .22s
        cubic-bezier(.2,.8,.2,1),
        background .2s ease,
        box-shadow .25s ease;
}


.add-button span {
    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #111;

    color:
        white;

    font-size:
        15px;

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1);
}


.add-button:hover {
    background:
        #fff;

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.22);
}


.add-button:hover span {
    transform:
        rotate(90deg)
        scale(1.05);
}


.add-button:active {
    transform:
        translate3d(
            var(--button-x),
            calc(
                var(--button-y) + 2px
            ),
            0
        )
        scale(.985);
}


/* =========================================
   ABOUT
========================================= */

.about {
    min-height:
        730px;

    padding:
        150px 8%;

    overflow:
        hidden;

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


.about::after {
    content:
        "KUUSTE";

    position:
        absolute;

    right:
        -55px;

    bottom:
        -65px;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            120px,
            20vw,
            330px
        );

    font-weight:
        800;

    letter-spacing:
        -18px;

    color:
        rgba(0,0,0,.025);

    pointer-events:
        none;
}


.about > span {
    width:
        fit-content;

    padding:
        9px 12px;

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

    border-radius:
        999px;
}


.about h2 {
    position:
        relative;

    z-index:
        2;

    max-width:
        1200px;
}


.about h2 em {
    color:
        transparent;

    -webkit-text-stroke:
        1.5px #777;
}


.about p {
    position:
        relative;

    z-index:
        2;

    padding-left:
        18px;

    border-left:
        2px solid #151515;
}


/* =========================================
   DELIVERY
========================================= */

.delivery {
    gap:
        1px;

    padding:
        1px;

    background:
        #292929;
}


.delivery > div {
    position:
        relative;

    min-height:
        340px;

    padding:
        48px;

    overflow:
        hidden;

    border:
        0;

    background:
        #151515;

    transition:
        background .35s ease,
        transform .35s
        cubic-bezier(.2,.8,.2,1);
}


.delivery > div::before {
    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -130px;

    bottom:
        -130px;

    border-radius:
        50%;

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

    transform:
        scale(.6);

    opacity:
        0;

    transition:
        transform .5s
        cubic-bezier(.2,.8,.2,1),
        opacity .35s ease;

    pointer-events:
        none;
}


.delivery > div::after {
    content:
        "→";

    position:
        absolute;

    right:
        35px;

    top:
        35px;

    color:
        #444;

    font-size:
        25px;

    transform:
        rotate(-45deg);

    transition:
        transform .35s
        cubic-bezier(.2,.8,.2,1),
        color .3s ease;
}


.delivery > div:hover {
    background:
        #1c1c1c;
}


.delivery > div:hover::before {
    opacity:
        1;

    transform:
        scale(1);
}


.delivery > div:hover::after {
    color:
        #fff;

    transform:
        rotate(0deg)
        translateX(3px);
}


.delivery > div > span {
    display:
        flex;

    width:
        36px;

    height:
        36px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #333;

    border-radius:
        50%;

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


.delivery > div:hover > span {
    background:
        #fff;

    color:
        #111;

    border-color:
        #fff;

    transform:
        scale(1.08);
}


.delivery h3 {
    margin-top:
        65px;

    font-size:
        29px;

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1);
}


.delivery > div:hover h3 {
    transform:
        translateY(-3px);
}


.delivery p {
    line-height:
        1.7;
}


.delivery strong {
    color:
        #fff;
}


/* =========================================
   CART
========================================= */

.cart-overlay {
    -webkit-backdrop-filter:
        blur(5px);

    backdrop-filter:
        blur(5px);
}


.cart {
    background:
        #f4f1eb;

    box-shadow:
        -30px 0 100px
        rgba(0,0,0,.18);
}


.cart-header {
    padding:
        30px 32px;

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


.cart-header button {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    transition:
        background .2s ease,
        transform .25s ease;
}


.cart-header button:hover {
    background:
        rgba(0,0,0,.07);

    transform:
        rotate(90deg);
}


/* =========================================
   CHECKOUT BUTTON
========================================= */

.checkout-button {
    --button-x: 0px;
    --button-y: 0px;

    min-height:
        57px;

    border-radius:
        12px;

    transform:
        translate3d(
            var(--button-x),
            var(--button-y),
            0
        );

    transition:
        transform .22s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease;
}


.checkout-button:hover {
    box-shadow:
        0 14px 35px
        rgba(0,0,0,.17);
}


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

footer {
    min-height:
        280px;

    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 20% 0%,
            #202020,
            #090909 45%
        );
}


.footer-logo {
    font-size:
        42px;

    letter-spacing:
        -2px;

    transition:
        letter-spacing .4s
        cubic-bezier(.2,.8,.2,1);
}


footer:hover
.footer-logo {
    letter-spacing:
        -.5px;
}


/* =========================================
   RESPONSIVE — TABLET
========================================= */

@media (max-width: 900px) {

    .header {
        width:
            calc(100% - 28px);

        top:
            14px;

        padding:
            0 10px
            0 18px;
    }


    .header.header-scrolled {
        width:
            calc(100% - 36px);

        top:
            8px;
    }


    .hero {
        padding:
            150px 6%
            100px;
    }


    .products,
    .about {
        padding-left:
            6%;

        padding-right:
            6%;
    }


    .product-grid {
        gap:
            22px;
    }


    .product-image {
        height:
            440px !important;

        padding:
            35px !important;
    }


    .product-image img {
        max-width:
            360px !important;

        max-height:
            360px !important;
    }


    .product-card:first-child
    .product-image {
        padding:
            55px !important;
    }

}


/* =========================================
   RESPONSIVE — MOBILE
========================================= */

@media (max-width: 800px) {

    .hero h1 {
        font-size:
            clamp(
                58px,
                17vw,
                105px
            );

        line-height:
            .87;

        letter-spacing:
            -5px;
    }


    .hero > p {
        max-width:
            420px;
    }


    .products {
        padding-top:
            110px;
    }


    .product-grid {
        margin-top:
            50px;
    }


    .about {
        min-height:
            600px;
    }


    .about h2 {
        font-size:
            clamp(
                52px,
                13vw,
                90px
            );

        line-height:
            .93;
    }


    .delivery > div {
        min-height:
            280px;
    }


    /* NO TILT ON MOBILE */

    .product-card:hover {
        transform:
            translateY(-4px);
    }

}


/* =========================================
   PHONE
========================================= */

@media (max-width: 600px) {

    .header {
        height:
            62px;

        width:
            calc(100% - 20px);

        top:
            10px;
    }


    .header.header-scrolled {
        height:
            58px;

        width:
            calc(100% - 20px);

        top:
            7px;
    }


    .logo {
        font-size:
            20px;
    }


    .cart-button {
        font-size:
            10px;
    }


    .hero {
        min-height:
            93vh;

        padding:
            135px 22px
            80px;
    }


    .hero-small {
        margin-bottom:
            22px;
    }


    .hero h1 {
        font-size:
            clamp(
                53px,
                17vw,
                80px
            );

        letter-spacing:
            -4px;
    }


    .hero > p {
        margin-top:
            28px;

        font-size:
            13px;
    }


    .hero-button {
        width:
            100%;

        justify-content:
            space-between;

        display:
            flex;
    }


    .hero-word {
        bottom:
            -25px;

        font-size:
            120px;
    }


    .products {
        padding:
            90px 18px;
    }


    .section-heading h2 {
        font-size:
            47px;

        letter-spacing:
            -3px;
    }


    .product-card {
        border-radius:
            15px;
    }


    .product-image {
        height:
            360px !important;

        padding:
            28px !important;
    }


    .product-image img {
        max-width:
            300px !important;

        max-height:
            300px !important;
    }


    .product-card:first-child
    .product-image {
        padding:
            45px !important;
    }


    .product-info {
        padding:
            24px;
    }


    .product-top h3 {
        font-size:
            25px;
    }


    .product-top > strong {
        font-size:
            17px;
    }


    .about {
        min-height:
            570px;

        padding:
            90px 22px;
    }


    .about h2 {
        font-size:
            clamp(
                47px,
                14vw,
                70px
            );

        letter-spacing:
            -4px;
    }


    .about p {
        font-size:
            13px;
    }


    .delivery > div {
        padding:
            38px 28px;
    }


    footer {
        min-height:
            250px;

        padding:
            55px 25px;
    }

}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    .hero-intro,
    .reveal-element {
        opacity:
            1 !important;

        filter:
            none !important;

        transform:
            none !important;
    }

}