/* =========================================================
   THE HOME AND BEAUTY HUB
   MAIN STYLESHEET
========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap'
);


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    scroll-padding-top: 90px;
}


body {
    margin: 0;

    min-height: 100vh;

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

    color: #1c1c1c;

    background: #ffffff;

    line-height: 1.6;
}


body,
button,
input,
textarea,
select {
    font-family:
        "Montserrat",
        sans-serif;
}


a {
    color: inherit;

    text-decoration: none;
}


img {
    display: block;

    max-width: 100%;
}


button,
input,
textarea,
select {
    box-sizing: border-box;
}



/* =========================================================
   COLOURS

   Brown: #b98b60
   Dark:  #1b1b1b
   Cream: #f8f4ef
========================================================= */



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

.site-header {
    width: 100%;

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(
            255,
            255,
            255,
            0.97
        );

    border-bottom:
        1px solid
        #eee8e2;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.navbar {
    width: 100%;

    max-width: 1450px;

    min-height: 82px;

    margin: 0 auto;

    padding:
        0 6%;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 30px;
}



/* =========================================================
   LOGO
========================================================= */

.logo {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 29px;

    font-weight: 600;

    line-height: 1;

    color: #171717;

    white-space: nowrap;

    transition:
        color
        0.25s ease;
}


.logo:hover {
    color: #b98b60;
}



/* =========================================================
   NAVIGATION
========================================================= */

.nav-links {
    display: flex;

    align-items: center;

    gap: 28px;
}


.nav-links > a {
    position: relative;

    font-size: 11px;

    font-weight: 600;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

    color: #333333;

    transition:
        color
        0.25s ease;
}


.nav-links
> a:not(.admin-link)::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 1px;

    background:
        #b98b60;

    transition:
        width
        0.25s ease;
}


.nav-links
> a:not(.admin-link):hover {

    color:
        #b98b60;
}


.nav-links
> a:not(.admin-link):hover::after {

    width: 100%;
}



/* =========================================================
   ADMIN LINK
========================================================= */

.admin-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        10px 16px;

    border:
        1px solid
        #252525;

    color:
        #252525;

    transition:
        background
        0.25s ease,
        color
        0.25s ease,
        transform
        0.25s ease;
}


.admin-link:hover {
    background:
        #1c1c1c;

    color:
        #ffffff;

    transform:
        translateY(-1px);
}



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

.hero {
    min-height:
        calc(
            100vh - 82px
        );

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        100px 25px;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(
                185,
                139,
                96,
                0.12
            ),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            #f7f2ec 0%,
            #fbf9f6 55%,
            #ffffff 100%
        );
}


.hero-content {
    width: 100%;

    max-width: 1050px;

    margin:
        0 auto;
}


.hero-small {
    margin-bottom:
        18px;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        5px;

    color:
        #a87448;
}


.hero h1 {
    margin:
        0 0 25px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            58px,
            8vw,
            108px
        );

    font-weight:
        600;

    line-height:
        0.95;

    letter-spacing:
        -2px;

    color:
        #181818;
}


.hero-description {
    max-width:
        700px;

    margin:
        0 auto 38px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        25px;

    font-weight:
        400;

    color:
        #68625d;
}


.hero-button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        51px;

    padding:
        0 31px;

    background:
        #1b1b1b;

    color:
        #ffffff;

    border:
        1px solid
        #1b1b1b;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        2px;

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


.hero-button:hover {
    background:
        #b98b60;

    border-color:
        #b98b60;

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(
            185,
            139,
            96,
            0.22
        );
}



/* =========================================================
   COMMON SECTION TEXT
========================================================= */

.section-small {
    margin:
        0 0 12px;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        4px;

    color:
        #a87448;
}



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

.products-section {
    width:
        100%;

    min-height:
        650px;

    padding:
        100px 6%
        120px;

    background:
        #ffffff;
}


.section-heading {
    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto 48px;

    text-align:
        center;
}


.section-heading h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            46px,
            5vw,
            60px
        );

    font-weight:
        600;

    line-height:
        1;

    color:
        #1b1b1b;
}


.section-description {
    margin:
        19px 0 0;

    font-size:
        13px;

    color:
        #77716c;
}



/* =========================================================
   CATEGORY FILTER
========================================================= */

.category-filter {
    width:
        100%;

    max-width:
        1100px;

    margin:
        0 auto 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.category-btn {
    appearance:
        none;

    -webkit-appearance:
        none;

    padding:
        13px 23px;

    border:
        1px solid
        #dfd2c6;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #161f30;

    font-size:
        13px;

    font-weight:
        500;

    line-height:
        1;

    cursor:
        pointer;

    white-space:
        nowrap;

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


.category-btn:hover {
    border-color:
        #b98b60;

    color:
        #9b6c44;

    transform:
        translateY(-1px);
}


.category-btn.active {
    background:
        #b98b60;

    border-color:
        #b98b60;

    color:
        #ffffff;

    box-shadow:
        0 6px 16px
        rgba(
            185,
            139,
            96,
            0.16
        );
}



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

.product-grid {
    width:
        100%;

    max-width:
        1320px;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                260px,
                1fr
            )
        );

    gap:
        30px;
}



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

.product-card {
    min-width:
        0;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid
        #ece6e0;

    transition:
        transform
        0.3s ease,
        box-shadow
        0.3s ease,
        border-color
        0.3s ease;
}


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

    border-color:
        #ded1c5;

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            0.08
        );
}



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

.product-image-wrapper {
    position:
        relative;

    width:
        100%;

    height:
        330px;

    overflow:
        hidden;

    background:
        #f4f1ed;
}


.product-image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        0.45s ease;
}


.product-card:hover
.product-image {

    transform:
        scale(1.035);
}



/* =========================================================
   PRODUCT CATEGORY BADGE
========================================================= */

.product-category {
    position:
        absolute;

    top:
        16px;

    left:
        16px;

    z-index:
        2;

    display:
        inline-block;

    padding:
        7px 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    border:
        1px solid
        #ece2d9;

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    color:
        #a87448;
}



/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-content {
    padding:
        24px;
}


.product-name {
    margin:
        0 0 9px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        27px;

    font-weight:
        600;

    line-height:
        1.1;

    color:
        #1d1d1d;
}


.product-description {
    min-height:
        44px;

    margin:
        0 0 17px;

    font-size:
        12px;

    line-height:
        1.75;

    color:
        #77716c;
}


.product-price {
    margin:
        0 0 18px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        25px;

    font-weight:
        700;

    color:
        #1c1c1c;
}



/* =========================================================
   PRODUCT WHATSAPP
========================================================= */

.product-whatsapp {
    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        12px 16px;

    border:
        1px solid
        #242424;

    color:
        #242424;

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        1.1px;

    text-transform:
        uppercase;

    transition:
        background
        0.25s ease,
        color
        0.25s ease,
        transform
        0.25s ease;
}


.product-whatsapp i {
    font-size:
        17px;
}


.product-whatsapp:hover {
    background:
        #1d1d1d;

    color:
        #ffffff;

    transform:
        translateY(-1px);
}



/* =========================================================
   PRODUCT LOADING / EMPTY
========================================================= */

.products-message {
    width:
        100%;

    max-width:
        600px;

    min-height:
        230px;

    margin:
        5px auto 0;

    padding:
        45px 20px;

    text-align:
        center;

    color:
        #827a73;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.products-message i {
    display:
        block;

    margin:
        0 auto 18px;

    font-size:
        32px;

    color:
        #b98b60;
}


.products-message h3 {
    margin:
        0 0 8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        31px;

    color:
        #1c1c1c;
}


.products-message p {
    font-size:
        13px;

    color:
        #827a73;
}



/* =========================================================
   PRODUCT ERROR
========================================================= */

.product-error {
    grid-column:
        1 / -1;

    padding:
        60px 20px;

    text-align:
        center;

    color:
        #77716c;
}


.product-error i {
    margin-bottom:
        15px;

    font-size:
        30px;

    color:
        #b98b60;
}


.product-error h3 {
    margin-bottom:
        8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        30px;

    color:
        #1b1b1b;
}



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

.delivery-section {
    width:
        100%;

    padding:
        105px 6%;

    background:
        #f8f4ef;
}


.delivery-container {
    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;
}



/* =========================================================
   DELIVERY TOP ICON
========================================================= */

.delivery-icon {
    width:
        70px;

    height:
        70px;

    margin:
        0 auto 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    border:
        1px solid
        #e6ddd4;

    color:
        #b98b60;

    font-size:
        27px;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            0.04
        );
}



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

.delivery-container h2 {
    margin:
        0 0 16px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            44px,
            5vw,
            62px
        );

    font-weight:
        600;

    line-height:
        1.05;

    color:
        #1b1b1b;
}


.delivery-intro {
    max-width:
        600px;

    margin:
        0 auto 42px;

    font-size:
        14px;

    line-height:
        1.8;

    color:
        #756e68;
}



/* =========================================================
   DELIVERY OPTIONS CONTAINER
========================================================= */

.delivery-options {
    width:
        100%;

    max-width:
        700px;

    margin:
        0 auto 30px;

    padding:
        34px 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        40px;

    background:
        #ffffff;

    border:
        1px solid
        #e7ddd4;

    border-radius:
        14px;

    box-shadow:
        0 14px 40px
        rgba(
            0,
            0,
            0,
            0.045
        );
}



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

.delivery-option {
    flex:
        1;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        17px;
}



/* =========================================================
   DELIVERY OPTION ICON
========================================================= */

.delivery-option-icon {
    width:
        50px;

    height:
        50px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f8f4ef;

    color:
        #b98b60;

    font-size:
        19px;
}



/* =========================================================
   DELIVERY OPTION CONTENT
========================================================= */

.delivery-option-content {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    text-align:
        left;

    gap:
        1px;
}



/* =========================================================
   DELIVERY SERVICE NAME
========================================================= */

.delivery-service-name {
    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        1px;

    color:
        #1b1b1b;
}



/* =========================================================
   DELIVERY SERVICE TYPE
========================================================= */

.delivery-service-type {
    margin-top:
        3px;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        1.1px;

    text-transform:
        uppercase;

    color:
        #a2978d;
}



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

.delivery-price-row {
    margin-top:
        5px;

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;
}


.delivery-from {
    font-size:
        11px;

    font-weight:
        400;

    color:
        #8a8179;
}


.delivery-price-row strong {
    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        32px;

    font-weight:
        600;

    line-height:
        1;

    color:
        #b98b60;
}



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

.delivery-divider-vertical {
    width:
        1px;

    height:
        75px;

    flex-shrink:
        0;

    background:
        #e4d9cf;
}



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

.delivery-notice {
    width:
        100%;

    max-width:
        700px;

    margin:
        0 auto;

    padding:
        20px 25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        1px solid
        #e3d8ce;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );
}


.delivery-notice i {
    flex-shrink:
        0;

    color:
        #b98b60;

    font-size:
        17px;
}


.delivery-notice p {
    margin:
        0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        19px;

    font-style:
        italic;

    line-height:
        1.5;

    color:
        #5f5954;
}



/* =========================================================
   DETAILS
========================================================= */

.details-section {
    width:
        100%;

    padding:
        110px 6%;

    background:
        #ffffff;
}


.details-container {
    width:
        100%;

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;
}


.details-icon {
    width:
        65px;

    height:
        65px;

    margin:
        0 auto 23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f8f4ef;

    color:
        #b98b60;

    font-size:
        24px;
}


.details-container h2 {
    max-width:
        700px;

    margin:
        0 auto 25px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(
            43px,
            5vw,
            60px
        );

    font-weight:
        600;

    line-height:
        1.05;

    color:
        #1b1b1b;
}


.details-container h2 span {
    color:
        #b98b60;
}


.details-description {
    max-width:
        620px;

    margin:
        0 auto;

    font-size:
        14px;

    line-height:
        1.9;

    color:
        #756f69;
}


.details-divider {
    width:
        60px;

    height:
        1px;

    margin:
        35px auto;

    background:
        #d8c7b7;
}



/* =========================================================
   DETAILS WHATSAPP
========================================================= */

.details-whatsapp {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        14px 25px;

    border:
        1px solid
        #1d1d1d;

    color:
        #1d1d1d;

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    transition:
        background
        0.25s ease,
        color
        0.25s ease,
        transform
        0.25s ease;
}


.details-whatsapp i {
    font-size:
        19px;
}


.details-whatsapp:hover {
    background:
        #1d1d1d;

    color:
        #ffffff;

    transform:
        translateY(-2px);
}



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

.site-footer {
    width:
        100%;

    padding:
        70px 6%
        30px;

    background:
        #171717;

    color:
        #ffffff;
}


.footer-content {
    width:
        100%;

    max-width:
        1320px;

    margin:
        0 auto;

    text-align:
        center;
}


.footer-brand h2 {
    margin:
        0 0 9px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        38px;

    font-weight:
        600;
}


.footer-brand p {
    font-size:
        12px;

    color:
        #aaa39c;
}


.footer-location {
    margin:
        28px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    font-size:
        12px;

    color:
        #c4bdb7;
}


.footer-location i {
    color:
        #b98b60;
}


.footer-bottom {
    padding-top:
        25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );
}


.footer-bottom p {
    font-size:
        10px;

    color:
        #817b76;
}



/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        999;

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #25D366;

    color:
        #ffffff;

    font-size:
        28px;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            0,
            0,
            0.2
        );

    transition:
        transform
        0.25s ease,
        box-shadow
        0.25s ease;
}


.floating-whatsapp:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.25
        );
}



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

@media
(max-width: 1000px) {

    .navbar {
        padding:
            0 4%;
    }


    .nav-links {
        gap:
            17px;
    }


    .logo {
        font-size:
            25px;
    }


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

}



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

@media
(max-width: 760px) {

    html {
        scroll-padding-top:
            150px;
    }


    .navbar {
        min-height:
            auto;

        padding:
            20px 22px;

        flex-direction:
            column;

        gap:
            18px;
    }


    .logo {
        white-space:
            normal;

        text-align:
            center;

        font-size:
            27px;
    }


    .nav-links {
        width:
            100%;

        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            16px 20px;
    }


    .nav-links > a {
        font-size:
            10px;
    }


    .admin-link {
        padding:
            8px 12px;
    }

}



/* =========================================================
   MOBILE HERO + PRODUCTS
========================================================= */

@media
(max-width: 650px) {

    .hero {
        min-height:
            620px;

        padding:
            80px 22px;
    }


    .hero h1 {
        font-size:
            clamp(
                51px,
                16vw,
                72px
            );

        letter-spacing:
            -1px;
    }


    .hero-description {
        font-size:
            21px;

        line-height:
            1.4;
    }


    .products-section {
        padding:
            75px 20px
            90px;
    }


    .section-heading {
        margin-bottom:
            35px;
    }


    .category-filter {
        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            8px;

        margin-bottom:
            40px;

        scrollbar-width:
            none;
    }


    .category-filter::-webkit-scrollbar {
        display:
            none;
    }


    .category-btn {
        flex-shrink:
            0;

        padding:
            12px 19px;

        font-size:
            12px;
    }


    .product-grid {
        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .product-image-wrapper {
        height:
            350px;
    }

}



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

@media
(max-width: 750px) {

    .delivery-section {
        padding:
            85px 25px;
    }


    .delivery-options {
        max-width:
            520px;

        padding:
            30px 25px;

        gap:
            25px;
    }


    .delivery-option {
        gap:
            12px;
    }


    .delivery-option-icon {
        width:
            45px;

        height:
            45px;

        font-size:
            17px;
    }


    .delivery-service-name {
        font-size:
            16px;
    }


    .delivery-price-row strong {
        font-size:
            29px;
    }

}



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

@media
(max-width: 600px) {

    .delivery-section {
        padding:
            75px 20px;
    }


    .delivery-container h2 {
        font-size:
            43px;

        line-height:
            1.05;
    }


    .delivery-intro {
        margin-bottom:
            32px;

        font-size:
            13px;
    }


    .delivery-options {
        flex-direction:
            column;

        gap:
            25px;

        padding:
            30px 25px;
    }


    .delivery-option {
        width:
            100%;

        justify-content:
            center;
    }


    .delivery-option-content {
        min-width:
            135px;
    }


    .delivery-divider-vertical {
        width:
            100px;

        height:
            1px;
    }


    .delivery-notice {
        align-items:
            flex-start;

        text-align:
            left;

        padding:
            18px 20px;
    }


    .delivery-notice i {
        margin-top:
            5px;
    }


    .delivery-notice p {
        font-size:
            18px;
    }

}



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

@media
(max-width: 650px) {

    .details-section {
        padding:
            80px 22px;
    }


    .details-container h2 {
        font-size:
            43px;
    }


    .details-description {
        font-size:
            13px;
    }


    .site-footer {
        padding:
            55px 22px
            25px;
    }


    .footer-brand h2 {
        font-size:
            32px;
    }


    .floating-whatsapp {
        right:
            18px;

        bottom:
            18px;

        width:
            54px;

        height:
            54px;

        font-size:
            25px;
    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media
(max-width: 420px) {

    .hero h1 {
        font-size:
            50px;
    }


    .hero-button {
        width:
            100%;

        max-width:
            310px;
    }


    .product-image-wrapper {
        height:
            310px;
    }


    .delivery-container h2 {
        font-size:
            39px;
    }


    .delivery-option {
        justify-content:
            flex-start;

        max-width:
            220px;

        margin:
            0 auto;
    }


    .delivery-service-name {
        font-size:
            16px;
    }


    .delivery-service-type {
        font-size:
            8px;
    }


    .delivery-price-row strong {
        font-size:
            30px;
    }

}