#footer{
    background-color: #f2528d;
}

body > div.sticky.top-0.z-50 > header{
    background-color:#f7d7e3;
}

#body{
    background: #fff5f8;
}

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

@media (max-width: 768px) {

    #main > section:nth-child(1),
    #main > section:nth-child(5),
    #main > section:nth-child(8){
        padding: 0 !important;
        min-height: 180px !important;
    }

    .section-hero img {
        object-fit: cover !important;
        height: 180px !important;
    }
}

/* =====================================
   CARD STYLE DEFAULTS (DESKTOP CAROUSEL)
===================================== */

#main > section:nth-child(3) .products-embla__slide,
#main > section:nth-child(3) .products-embla__slide .group,
#main > section:nth-child(3) .product-card,
#main > section:nth-child(3) .card,

#main > section:nth-child(6) .products-embla__slide,
#main > section:nth-child(6) .products-embla__slide .group,
#main > section:nth-child(6) .product-card,
#main > section:nth-child(6) .card,

#main > section:nth-child(9) .products-embla__slide,
#main > section:nth-child(9) .products-embla__slide .group,
#main > section:nth-child(9) .product-card,
#main > section:nth-child(9) .card {

    min-width: 0 !important;

    background: #fff !important;

    border: 1px solid #e5e5e5 !important;

    box-shadow: none !important;

    outline: none !important;

    border-radius: 10px !important;

    padding: 0 !important;

    overflow: hidden !important;

    transition: all 0.3s ease;
}

/* REMOVE INNER FRAME */

#main > section:nth-child(3) .group,
#main > section:nth-child(3) .card-body,
#main > section:nth-child(3) .product-card-content,

#main > section:nth-child(6) .group,
#main > section:nth-child(6) .card-body,
#main > section:nth-child(6) .product-card-content,

#main > section:nth-child(9) .group,
#main > section:nth-child(9) .card-body,
#main > section:nth-child(9) .product-card-content {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}

/* =====================================
   HOVER
===================================== */

#main > section:nth-child(3) .products-embla__slide:hover,
#main > section:nth-child(3) .product-card:hover,
#main > section:nth-child(3) .card:hover,

#main > section:nth-child(6) .products-embla__slide:hover,
#main > section:nth-child(6) .product-card:hover,
#main > section:nth-child(6) .card:hover,

#main > section:nth-child(9) .products-embla__slide:hover,
#main > section:nth-child(9) .product-card:hover,
#main > section:nth-child(9) .card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important;
}

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

#main > section:nth-child(3) img,
#main > section:nth-child(6) img,
#main > section:nth-child(9) img {

    width: 100% !important;

    height: 220px !important;

    object-fit: contain !important;

    background: #fff !important;

    border-radius: 0 !important;

    padding: 12px;
}

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

#main > section:nth-child(3) .content,
#main > section:nth-child(3) .card-content,
#main > section:nth-child(3) .product-content,

#main > section:nth-child(6) .content,
#main > section:nth-child(6) .card-content,
#main > section:nth-child(6) .product-content,

#main > section:nth-child(9) .content,
#main > section:nth-child(9) .card-content,
#main > section:nth-child(9) .product-content {

    padding: 12px;
}

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

#main > section:nth-child(3) h2,
#main > section:nth-child(3) h3,
#main > section:nth-child(3) .title,

#main > section:nth-child(6) h2,
#main > section:nth-child(6) h3,
#main > section:nth-child(6) .title,

#main > section:nth-child(9) h2,
#main > section:nth-child(9) h3,
#main > section:nth-child(9) .title {

    font-size: 14px !important;

    font-weight: 500 !important;

    line-height: 1.4;
}

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

#main > section:nth-child(3) .price,
#main > section:nth-child(3) .product-price,

#main > section:nth-child(6) .price,
#main > section:nth-child(6) .product-price,

#main > section:nth-child(9) .price,
#main > section:nth-child(9) .product-price {

    font-weight: 600 !important;
}

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

#main > section:nth-child(3) button,
#main > section:nth-child(3) .btn,
#main > section:nth-child(3) .button,
#main > section:nth-child(3) .add-to-cart,
#main > section:nth-child(3) [type="submit"],

#main > section:nth-child(6) button,
#main > section:nth-child(6) .btn,
#main > section:nth-child(6) .button,
#main > section:nth-child(6) .add-to-cart,
#main > section:nth-child(6) [type="submit"],

#main > section:nth-child(9) button,
#main > section:nth-child(9) .btn,
#main > section:nth-child(9) .button,
#main > section:nth-child(9) .add-to-cart,
#main > section:nth-child(9) [type="submit"] {

    background: #f2528d !important;

    color: #ffffff !important;

    border: none !important;

    transition: all 0.3s ease;
}

/* BUTTON HOVER */

#main > section:nth-child(3) button:hover,
#main > section:nth-child(3) .btn:hover,
#main > section:nth-child(3) .button:hover,
#main > section:nth-child(3) .add-to-cart:hover,
#main > section:nth-child(3) [type="submit"]:hover,

#main > section:nth-child(6) button:hover,
#main > section:nth-child(6) .btn:hover,
#main > section:nth-child(6) .button:hover,
#main > section:nth-child(6) .add-to-cart:hover,
#main > section:nth-child(6) [type="submit"]:hover,

#main > section:nth-child(9) button:hover,
#main > section:nth-child(9) .btn:hover,
#main > section:nth-child(9) .button:hover,
#main > section:nth-child(9) .add-to-cart:hover,
#main > section:nth-child(9) [type="submit"]:hover {

    opacity: 0.9;
}

/* =====================================
   TABLET RESPONSIVE (BREAKS SLIDER TO GRID)
===================================== */

@media (max-width: 991px) {

    #main > section:nth-child(3) .products-embla__container,
    #main > section:nth-child(6) .products-embla__container,
    #main > section:nth-child(9) .products-embla__container {

        display: grid !important;

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

        gap: 14px !important;

        transform: none !important;
    }
}

/* =====================================
   MOBILE RESPONSIVE (2 ROWS MAXIMUM)
===================================== */

@media (max-width: 767px) {

    #main > section:nth-child(3) .products-embla__container,
    #main > section:nth-child(6) .products-embla__container,
    #main > section:nth-child(9) .products-embla__container {

        display: grid !important;

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

        gap: 10px !important;

        transform: none !important;
    }

    #main > section:nth-child(3) .products-embla__slide,
    #main > section:nth-child(3) .products-embla__slide .group,
    #main > section:nth-child(3) .product-card,
    #main > section:nth-child(3) .card,

    #main > section:nth-child(6) .products-embla__slide,
    #main > section:nth-child(6) .products-embla__slide .group,
    #main > section:nth-child(6) .product-card,
    #main > section:nth-child(6) .card,

    #main > section:nth-child(9) .products-embla__slide,
    #main > section:nth-child(9) .products-embla__slide .group,
    #main > section:nth-child(9) .product-card,
    #main > section:nth-child(9) .card {

        width: 100% !important;

        max-width: 100% !important;

        border-radius: 8px !important;
    }

    #main > section:nth-child(3) img,
    #main > section:nth-child(6) img,
    #main > section:nth-child(9) img {

        height: 120px !important;

        padding: 8px;
    }

    #main > section:nth-child(3) .content,
    #main > section:nth-child(3) .card-content,
    #main > section:nth-child(3) .product-content,

    #main > section:nth-child(6) .content,
    #main > section:nth-child(6) .card-content,
    #main > section:nth-child(6) .product-content,

    #main > section:nth-child(9) .content,
    #main > section:nth-child(9) .card-content,
    #main > section:nth-child(9) .product-content {

        padding: 8px;
    }

    #main > section:nth-child(3) h2,
    #main > section:nth-child(3) h3,
    #main > section:nth-child(3) .title,

    #main > section:nth-child(6) h2,
    #main > section:nth-child(6) h3,
    #main > section:nth-child(6) .title,

    #main > section:nth-child(9) h2,
    #main > section:nth-child(9) h3,
    #main > section:nth-child(9) .title {

        font-size: 12px !important;

        line-height: 1.3;
    }

    #main > section:nth-child(3) .price,
    #main > section:nth-child(3) .product-price,

    #main > section:nth-child(6) .price,
    #main > section:nth-child(6) .product-price,

    #main > section:nth-child(9) .price,
    #main > section:nth-child(9) .product-price {

        font-size: 12px !important;
    }

    /* LIMITS VIEW TO EXACTLY 2 ROWS (4 ITEMS TOTAL) ONLY ON MOBILE */
    #main > section:nth-child(3) .products-embla__slide:nth-child(n+5),
    #main > section:nth-child(6) .products-embla__slide:nth-child(n+5),
    #main > section:nth-child(9) .products-embla__slide:nth-child(n+5) {
        display: none !important;
    }
}

/* =====================================
   FIX HERO BANNER GAP - SECTION 5 & 8
===================================== */

#main > section:nth-child(5),
#main > section:nth-child(8) {

    padding-bottom: 0 !important;

    margin-bottom: 0 !important;

    line-height: 0 !important;
}

/* REMOVE EXTRA SPACE FROM CONTAINERS */
#main > section:nth-child(5) > div,
#main > section:nth-child(8) > div {

    padding-bottom: 0 !important;

    margin-bottom: 0 !important;
}

/* FIX IMAGE SPACING */
#main > section:nth-child(5) img,
#main > section:nth-child(8) img {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    margin-bottom: 0 !important;
}

/* FOOTER TEXT */
#footer,
#footer * {

    color: #ffffff !important;
}

/* =====================================
   SECTION 7 IMAGE FIT FIX
===================================== */

#main > section:nth-child(7) img {

    width: 100% !important;

    height: 100% !important;

object-fit: contain !important;
background: #fff5f8 !important;
    display: block !important;

    border-radius: 10px !important;
}

/* if the image container has fixed height */
#main > section:nth-child(7) .group,
#main > section:nth-child(7) .card,
#main > section:nth-child(7) .product-card,
#main > section:nth-child(7) .overflow-hidden {

    overflow: hidden !important;

    border-radius: 10px !important;
}


/* =====================================
   REMOVE GAP IN SECTION 7
===================================== */

#main > section:nth-child(7) {

    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#main > section:nth-child(7) > div {

    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#main > section:nth-child(7) img {

    display: block !important;
    margin: 0 !important;
}

/* removes spacing caused by cards/containers */
#main > section:nth-child(7) .group,
#main > section:nth-child(7) .card,
#main > section:nth-child(7) .product-card {

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