/* Global styles */

@font-face {
    font-family: "Didot";
    src: url("../fonts/GFSDidot-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/avenir-next-LT-pro-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/avenir-next-LT-pro-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next";
    src: url("../fonts/avenir-next-LT-pro-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Farm House Greatness Script";
    src: url("../fonts/farmhouse-greatness.script.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Farm House Greatness Tall";
    src: url("../fonts/farmhouse-greatness.tall.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

 :root {
    --bieg: rgb(221, 202, 195, 255);
    --lighter-bieg: rgb(236, 224, 218, 255);
    /* Tan */
    --darker-tan: rgb(193, 191, 183, 255);
    --tan: rgb(217, 215, 207, 255);
    --lighter-tan: rgb(228, 224, 215, 255);
    /* Ice blue */
    --darker-ice-blue: rgb(163, 180, 190, 255);
    --ice-blue: rgb(196, 208, 218, 255);
    --lighter-ice-blue: rgb(228, 234, 239, 255);
    /* Mint Green */
    --mint-green: rgb(174, 188, 179, 255);
    --lighter-mint-green: rgb(210, 216, 213, 255);
    /* Neutral */
    --lavender: rgb(221, 215, 220, 255);
    --light-grey: rgb(220, 221, 217, 255);
}

html,
body {
    overflow-x: clip;
    background-color: var(--white-black);
}

body * {
    margin: 0;
}

body *:not(h1,
h2,
h3,
h4,
h5,
h6) {
    font-family: "Avenir Next";
    font-style: normal;
    font-size: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Didot";
}

a {
    color: black;
    text-decoration: none;
    transition: 0.3s;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input_group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input_group label {
    font-size: 12px;
}

.input_wrapper {
    display: flex;
    align-items: stretch;
    background-color: #ffffffaa;
    width: fit-content;
    padding: 5px 5px 5px 20px;
    border-radius: 100px;
}

input,
textarea {
    border: none;
    background: none;
    background-color: #ffffffaa;
    font-size: 12px !important;
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

select {
    border: none;
    outline: none !important;
    padding: 5px;
    cursor: pointer;
}

button {
    background: none;
    border: none;
}

.main_button {
    background-color: white;
    color: #000000;
    padding: 10px 30px;
    border: none;
    border-radius: 100px;
    font-size: 12px;
}

.main_button.blue {
    background-color: var(--darker-ice-blue);
    color: #ffffff;
}

.main_button.blue:hover {
    background-color: var(--darker-tan);
}

.main_button i {
    font-size: 10px !important;
}

.nav-underline .nav-link {
    font-weight: 400;
    color: #000000;
}

.nav-underline .nav-link.active {
    font-weight: 500;
}

.offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--light-grey);
}

.offcanvas.offcanvas-start {
    top: 10px;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    border-radius: 10px;
}

.offcanvas.offcanvas-end {
    top: 10px;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    border-radius: 10px;
}

section {
    padding: 50px clamp(20px, 5vw, 50px);
}

.section_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 20px);
}

.section_header h1 {
    font-size: clamp(36px, 3vw, 52px);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    background-color: var(--light-grey);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    transition: 0.3s;
}

.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover {
    background-color: var(--lighter-bieg);
    color: #000000;
}


/* Category Card */

.categories_grid {
    display: flex;
    gap: 20px;
}

.category_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category_image {
    flex: 1;
    max-height: 350px;
    aspect-ratio: 206 / 280;
}

.category_title {
    font-family: "Avenir Next";
    font-size: 12px;
    font-weight: 400;
}

@media(max-width: 992px) {
    .category_image {
        max-height: fit-content;
    }
}


/* Product Card */

.product_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.product_card * {
    margin: 0;
}

.product_image {
    position: relative;
    /* height: 350px; */
    aspect-ratio: 3/4;
    width: 100%;
}

.product_image img {
    position: absolute;
    left: 0;
    object-position: center;
    transition: 0.3s;
}

.product_card:hover .product_image img.top_image {
    opacity: 0;
}

.product_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product_title,
.product_price {
    font-family: "Avenir Next";
    font-size: 14px;
}

.product_slogan {
    font-size: 12px;
}

.product_variants {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0;
}

.product_variants .variant {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--variant);
    border: 1px solid #000000;
    outline: 2px solid #ffffff;
    cursor: pointer;
}

.product_variants .variant.active {
    box-shadow: 0 0 0 3px #000000;
}


/* Cart */

.cart_products_wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart_products_wrapper .cart_product {
    position: relative;
    display: flex;
    gap: 20px;
}

.cart_products_wrapper .cart_product .remove_product {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #bb5353;
}

.cart_products_wrapper .cart_product .product_image {
    height: auto;
    width: 100px;
}

.cart_products_wrapper .cart_product .product_info {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    padding: 10px 0;
}

.cart_products_wrapper .cart_product .product_variant {
    font-size: 12px;
}

.cart_products_wrapper .cart_product .quantity_price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cart_products_wrapper .cart_product .quantity_price * {
    font-size: 12px;
}

.cart_products_wrapper .cart_product .quantity_price .quantity_wrapper {
    display: flex;
    align-items: stretch;
    gap: 10px;
    border: 1px solid;
    padding: 2px 15px;
    border-radius: 5px;
}

.cart_products_wrapper .cart_product .quantity_price .quantity_wrapper .quantity_remove,
.cart_products_wrapper .cart_product .quantity_price .quantity_wrapper .quantity_add {
    cursor: pointer;
}

.cart_products_wrapper .cart_product .quantity_price .quantity_wrapper input {
    text-align: center;
    width: 30px;
}

#offcanvasCart .offcanvas-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    border-top: 1px solid var(--light-grey)
}

#offcanvasCart .offcanvas-footer * {
    font-size: 12px;
}

#offcanvasCart .offcanvas-footer .subtotal_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#offcanvasCart .offcanvas-footer .subtotal_wrapper * {
    font-weight: 500;
}

#offcanvasCart #empty_cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
    margin: 30px 0;
}

#offcanvasCart #empty_cart img {
    filter: opacity(0.2);
    width: 150px;
}


/* Filter */

.accordion-body {
    padding: 0 0 20px;
    font-size: 12px;
}

.accordion-body * {
    font-size: 12px;
}

.accordion-item {
    border: none;
    border-top: 1px solid var(--light-grey) !important;
}

.accordion-button {
    background-color: #ffffff !important;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 500;
    padding: 20px 0;
    box-shadow: none !important;
}

.filter_offcanvas .filter_options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter_offcanvas .filter_options label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    cursor: pointer;
}

.filter_offcanvas .filter_options label:has(input:checked) {
    font-weight: 600;
}

.filter_offcanvas #filter_colors .filter_options label::before {
    content: "";
    position: relative;
    width: 18px;
    height: 18px;
    background-color: var(--filter-color);
    border-radius: 50%;
}

.filter_offcanvas .filter_options label:has(input:checked)::before {
    border: 2px solid;
}

.filter_offcanvas .price_filter_wrapper {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.filter_offcanvas .price_filter_wrapper>* {
    flex: 1;
}

.filter_offcanvas .price_filter_wrapper .input_group {
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.filter_offcanvas .price_filter_wrapper .input_group input {
    border-bottom: 1px solid var(--light-grey);
    padding: 10px 0;
}


/* Header */

.header {
    position: fixed;
    width: 100%;
    z-index: 1010;
    transition: 0.3s;
    background-color: var(--mint-green);
}

body:has(.hero_section) .header:not(.fixed) {
    background-color: transparent;
}

.header.fixed {
    background-color: var(--mint-green);
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.2);
}

.header:has(.dropdown_nav:hover) {
    background-color: var(--mint-green) !important;
}

.header .brand_logo {
    width: 200px;
    padding: 15px 0;
}

.offcanvas .offcanvas-header .brand_logo {
    padding: 0;
}

.header .brand_logo img {
    object-fit: contain;
}

.header .navbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 30px;
    padding: 0 20px;
}

.header .navbar .navbar-nav {
    display: flex;
    align-items: center;
    width: 100%;
}

.header .navbar .offcanvas:not(.show) .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 25px 15px;
    color: rgba(255, 255, 255, 0.9);
}

.header .navbar .offcanvas:not(.show) .navbar-nav .nav-item a {
    color: rgba(255, 255, 255, 0.9);
}

.header .navbar .navbar-nav .dropdown_nav {
    display: flex;
    align-items: center;
}

.header .navbar .navbar-nav .dropdown_nav .nav-item {
    cursor: default;
}

.header .navbar .navbar-nav .dropdown_nav .nav-item:after {
    font-family: "Font Awesome 7 Free";
    content: "\f078";
    font-weight: 600;
    position: relative;
    font-size: 10px;
    color: #ffffff;
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: none;
    gap: 30px;
    background-color: #ffffff;
    margin: 0 -15px;
    padding: 30px;
    border-radius: 0 0 50px 50px;
}

.header .navbar .navbar-nav .dropdown_nav:hover .dropdown_menu {
    display: flex;
    box-shadow: 0 50px 60px 0 rgba(0, 0, 0, 0.1);
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu .categories_grid {
    width: 100%;
    justify-content: flex-end;
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu .categories_list {
    flex: 0 0 270px;
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu .categories_list .category_list_title {
    font-family: "Avenir Next";
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--light-grey);
    padding-bottom: 10px;
    font-weight: 600;
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu .categories_list .category_list_items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu .categories_list .category_list_items a {
    font-size: 12px;
}

.header .navbar .navbar-nav .dropdown_nav .dropdown_menu .categories_list .category_list_items a:hover {
    transform: translateX(10px);
}

.header .nav_actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-inline-start: auto;
    margin-block: auto;
}

.header .nav_actions * {
    color: #ffffff;
}

.header .nav_actions .cart_toggler {
    position: relative;
}

.header .nav_actions .cart_toggler:before {
    content: attr(data-count);
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: red;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    font-size: 10px;
}

.header .navbar .offcanvas.show {
    width: calc(var(--bs-offcanvas-width) - 10px);
}

.header .navbar .offcanvas.show .navbar-nav .nav-item {
    padding: 10px 0;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .nav-item:after {
    color: #000000;
    transition: 0.3s;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .nav-item.active:after {
    transform: rotate(180deg);
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .dropdown_menu {
    all: unset;
    position: relative;
    display: none;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .dropdown_menu.show {
    display: flex;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .dropdown_menu .categories_list {
    flex: auto;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .dropdown_menu .categories_grid {
    display: none;
}

.header .navbar .offcanvas.show .navbar-nav .dropdown_nav .dropdown_menu .categories_grid .category_image {
    flex: 0;
    aspect-ratio: 1;
    max-height: fit-content;
}

@media(max-width: 992px) {
    .header .navbar {
        padding: 0;
    }
    .header .navbar>* {
        flex: 1;
    }
    .header .navbar .navbar-nav {
        align-items: flex-start;
    }
    .header .navbar-toggler {
        order: -1;
        border: none;
        width: fit-content;
        text-align: start;
        box-shadow: none !important;
    }
    .header .navbar-toggler .navbar-toggler-icon {
        filter: brightness(0) invert(1);
    }
    .header .brand_logo {
        flex: 0 0 150px;
        order: 0;
        padding: 15px 0;
    }
    .header .navbar .nav_actions {
        justify-content: flex-end;
    }
}


/* Footer */

.footer {
    padding: 50px clamp(20px, 5vw, 50px);
    padding-bottom: 150px;
    background: url(../images/ripple-1.png) no-repeat left top / 350px, url(../images/ripple-2.png) no-repeat 30% calc(100% + 20px) / 500px, url(../images/ripple-5.png) no-repeat right bottom / 450px;
    background-color: var(--lighter-tan);
}

.footer .footer_inner {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.footer .footer_inner h4 {
    font-family: "Farm House Greatness tall";
    font-size: 52px;
}

.footer .footer_inner .footer_column {
    flex: 1 1 500px;
}

.footer .footer_inner .input_wrapper {
    background-color: #ffffff;
}

.footer .footer_inner .footer_column .nav_links {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 80px;
}

.footer .footer_inner .footer_column .links_group {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer .footer_inner .footer_column .links_group label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.footer .footer_inner .footer_column .links_group a {
    font-size: 12px;
}

.footer .footer_inner .footer_column .links_group a:hover {
    transform: translateX(10px);
}


/* Home Page - Hero */

.hero_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(120px, 20vw, 170px);
    gap: 15px;
    height: 100dvh;
    background: url(../images/EZZ04309.jpg) no-repeat center/ cover;
    box-shadow: inset 0 150px 60px -60px rgba(0, 0, 0, 0.6);
}

.hero_section .hero_title {
    color: white;
    text-align: center;
    font-size: clamp(38px, 5vw, 72px);
    letter-spacing: -2px;
    line-height: 1;
}

@media(max-width: 992px) {
    .hero_section {
        max-height: 650px;
    }
}


/* Animation */

.animate.fadeIn {
    opacity: 0;
    transform: translateY(0);
    transition: 1s;
}

.animate.fadeUp {
    opacity: 0;
    transform: translateY(50%);
    transition: 1s;
}

.animate.fadeDown {
    opacity: 0;
    transform: translateY(-50%);
    transition: 1s;
}

.animate.fadeRight {
    opacity: 0;
    transform: translate(-100%, 0);
    transition: 1s;
}

.animate.fadeLeft {
    opacity: 0;
    transform: translate(100%, 0);
    transition: 1s;
}

.animate.animated {
    opacity: 1;
    transform: translate(0, 0);
}

.animate.delay_100 {
    transition-delay: 0.1s
}

.animate.delay_200 {
    transition-delay: 0.2s
}

.animate.delay_300 {
    transition-delay: 0.3s
}

.animate.delay_400 {
    transition-delay: 0.4s
}

.animate.delay_500 {
    transition-delay: 0.5s
}

.animate.delay_600 {
    transition-delay: 0.6s
}

.animate.delay_700 {
    transition-delay: 0.7s
}

.animate.delay_800 {
    transition-delay: 0.8s
}

.animate.delay_900 {
    transition-delay: 0.9s
}

.animate.delay_1000 {
    transition-delay: 1s
}

.animate.delay_1500 {
    transition-delay: 1.5s
}

.animate.delay_2000 {
    transition-delay: 2s
}

.animate.delay_2500 {
    transition-delay: 2.5s
}


/* Home Page - Categories */

.categories_section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px;
}

.categories_section .category {
    position: relative;
    flex: 1 1 300px;
    height: 100%;
    padding: 20px;
    aspect-ratio: 1;
    max-height: 800px;
}

.categories_section .category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask: url(../images/mint-green-pattern-2.png) no-repeat center / cover;
    background-color: var(--c1);
    transition: 0.3s;
}

.categories_section .category:nth-child(2)::before {
    mask: url(../images/mint-green-pattern.png) no-repeat center / cover;
}

.categories_section .category:hover::before {
    background-color: var(--c2);
}

.categories_section .category .category_title {
    position: relative;
    font-size: clamp(20px, 3vw, 52px);
    color: white;
}


/* Home Page - Feature Product */

.feature_product_section {
    background: url(../images/ripple-2.png) no-repeat right center / 500px, url(../images/ripple-5.png) no-repeat -30px center / 600px;
    background-color: var(--lighter-bieg);
    text-align: center;
}

.feature_product_section .feature_product_section_title {
    font-family: "Farm House Greatness Script";
}

.feature_product_section .feature_product_wrapper {
    margin-top: 80px;
}

.feature_product_section .feature_product_wrapper .product {
    position: relative;
    flex: 0 1 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 3vw, 50px);
}

.feature_product_section .feature_product_wrapper .product * {
    position: relative;
}

.feature_product_section .feature_product_wrapper .product .index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid;
    transition: 0.3s;
}

.feature_product_section .feature_product_wrapper .product:hover .index {
    background-color: #000000;
    color: #ffffff;
}

.feature_product_section .feature_product_wrapper .product .product_image {
    height: auto;
    width: clamp(250px, 25vw, 350px);
    filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.2));
}

.feature_product_section .feature_product_wrapper .product .product_image img {
    object-fit: contain;
}

.feature_product_section .feature_product_wrapper .product .product_title {
    font-family: "Avenir Next";
    font-size: 15px;
}

.feature_product_section .feature_product_wrapper .product .age {
    font-size: 13px;
    opacity: 0;
    transition: 0.3s;
}

.feature_product_section .feature_product_wrapper .product:hover .age {
    opacity: 1;
}

.feature_product_section .feature_product_wrapper .product .particle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    opacity: 0;
    transition: 0.3s linear;
}

.feature_product_section .feature_product_wrapper .product.first:hover .particle {
    opacity: 1;
    transform: translate(-100%, -100%) rotate(-60deg);
    width: 200px;
}

.feature_product_section .feature_product_wrapper .product:hover .particle {
    opacity: 1;
    transform: translate(0%, -100%) rotate(60deg);
    width: 200px;
}

@media (max-width: 992px) {
    .feature_product_section {
        background: var(--lighter-bieg);
    }
}


/* Home Page - Banner 1 */

.banner_section {
    position: relative;
    height: 100dvh;
    background: no-repeat center / cover;
    /* padding: 5vw; */
}

.banner_section h6 {
    font-family: "Avenir Next";
    font-size: 12px;
}

@media (max-width: 992px) {
    .banner_section {
        max-height: 600px;
    }
    .banner_section .section_header {
        text-align: center !important;
        align-items: center !important;
    }
}


/* Home Page - Products Carousel */

.swiper {
    width: 100%;
    height: auto;
}

.products_carousel_section .products_carousel_section_inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
}

.products_carousel_section .products_carousel_section_inner .featured_product {
    flex: 0 0 clamp(250px, 25vw, 400px);
    background-color: var(--lighter-ice-blue);
    padding: 30px;
    transition: 0.3s;
}

.products_carousel_section .products_carousel_section_inner .featured_product:hover {
    background-color: var(--mint-green);
}

.products_carousel_section .products_carousel_section_inner .product_carousel_wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: calc(100% - 400px - 50px - 50px - 30px);
}

.products_carousel_section .products_carousel_section_inner .product_carousel_wrapper .carousel_title {
    font-family: "Farm House Greatness Tall";
    font-size: 42px;
}

@media(max-width: 768px) {
    .products_carousel_section .products_carousel_section_inner .featured_product {
        display: none;
    }
}


/* Home Page - Banner 2 */

.banner_section:has(.banner_inner) {
    background: var(--mint-green);
    overflow: clip;
}

.banner_section:has(.banner_inner)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150vw;
    height: 150vw;
    background: url(../images/fav-icon-pattern2.png) center / 200px;
    transform: rotate(-45deg);
    transform-origin: 0%;
    opacity: 0.6;
}

.banner_section .banner_inner {
    background: no-repeat center / cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 30px;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 50px 10px var(--mint-green);
}


/* Home Page - Banner 2 */

.banner_section.banner_3 {
    display: flex;
    align-items: center;
    align-items: center;
}


/* Home Page - Top Categories */

.top_categories_section {
    height: 100dvh;
}

.top_categories_section .top_categories_section_inner {
    background-color: var(--mint-green);
    height: 100%;
    display: flex;
    align-items: stretch;
    transition: 0.3s;
}

.top_categories_section .top_categories_section_inner:has(#kids-tab.active) {
    background-color: var(--ice-blue);
}

.top_categories_section .top_categories_section_inner .side_panel {
    display: flex;
    align-self: center;
    flex-direction: column;
    flex: 0 0 250px;
    gap: 15px;
    padding: 30px;
}

.top_categories_section .top_categories_section_inner .side_panel h6 {
    font-family: "Avenir Next";
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 3px;
    margin: 0;
}

.top_categories_section .top_categories_section_inner .side_panel .sub-categories {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.top_categories_section .top_categories_section_inner .side_panel .sub-categories .sub-category {
    display: flex;
    font-family: "Didot";
    font-size: 24px;
}

.top_categories_section .top_categories_section_inner .side_panel .sub-categories .sub-category:hover {
    transform: translateX(10px);
}

.top_categories_section .top_categories_section_inner .category_image {
    max-height: 100%;
}

.top_categories_section .top_categories_section_inner:has(#baby-tab.active) .kids_image {
    display: none;
}

.top_categories_section .top_categories_section_inner:has(#kids-tab.active) .baby_image {
    display: none;
}

@media(max-width: 768px) {
    .top_categories_section {
        height: auto;
    }
    .top_categories_section .top_categories_section_inner {
        flex-direction: column-reverse;
    }
    .top_categories_section .top_categories_section_inner .side_panel {
        align-self: flex-start;
    }
    .top_categories_section .top_categories_section_inner .category_image {
        flex: auto;
        height: 300px;
        aspect-ratio: auto;
    }
}


/* Home Page - Full Rooms */

.full_rooms_section {
    padding: 50px;
    background-color: var(--lighter-bieg);
}

.full_rooms_section .room_wrapper {
    display: flex;
    align-items: center;
}

.full_rooms_section .room_wrapper .room_components_wrapper {
    display: flex;
    flex-direction: column;
    height: 500px;
    aspect-ratio: 3/4;
    background-color: #ffffff;
    padding: 20px 20px 0;
    z-index: 1;
}

.full_rooms_section .room_wrapper .room_components_wrapper .room_component_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--light-grey);
}

.full_rooms_section .room_wrapper .room_components_wrapper .room_component_nav h6 {
    margin: 0;
    font-size: 20px;
}

.full_rooms_section .room_wrapper .room_components_wrapper .room_components {
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: auto;
    padding: 20px 0;
}

.full_rooms_section .room_wrapper .room_components_wrapper .component {
    display: flex;
    gap: 20px;
}

.full_rooms_section .room_wrapper .room_components_wrapper .component .component_image {
    flex: 0 0 120px;
    aspect-ratio: 1;
}

.full_rooms_section .room_wrapper .room_components_wrapper .component .component_info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.full_rooms_section .room_wrapper .room_components_wrapper .component .component_info .component_title {
    font-family: "Avenir Next";
    font-size: 14px;
}

.full_rooms_section .room_wrapper .room_components_wrapper .component .component_info .component_excerpt {
    font-size: 12px;
}

.full_rooms_section .room_wrapper .room_image {
    margin-inline-start: -100px;
    height: calc(100dvh - 100px);
    width: 100%;
}


/* Home Page - Blog */

.blog_section .section_title {
    font-size: 36px;
    font-family: "Farm House Greatness Tall";
}

.blog_section .blog_wrapper {
    margin-top: 30px;
}

.blog_section .blog_wrapper .blog_card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog_section .blog_wrapper:has(.blog_card:hover) .blog_card {
    filter: grayscale(1);
}

.blog_section .blog_wrapper:hover .blog_card:hover {
    filter: grayscale(0) contrast(1.2);
}

.blog_section .blog_wrapper .blog_card * {
    margin: 0;
}

.blog_section .blog_wrapper .blog_card .blog_image {
    aspect-ratio: 2/3;
}

.blog_section .blog_wrapper .blog_card .blog_info {
    display: flex;
    gap: 10px;
}

.blog_section .blog_wrapper .blog_card .blog_info>* {
    color: rgba(0, 0, 0, 0.6);
    font-size: 10px;
}

.blog_section .blog_wrapper .blog_card .blog_info .author {
    color: #000000;
    font-weight: 500;
}

.blog_section .blog_wrapper .blog_card .blog_title {
    font-family: "Avenir Next";
    font-size: 15px;
}


/* Shop Page - Subcategories */

.subcategories_section {
    padding-top: 90px;
    background-color: var(--lighter-bieg);
}

.subcategories_section .subcategories_section_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.subcategories_section .subcategories_section_inner .main_category_title {
    font-family: "Farm House Greatness Tall";
}

.subcategories_section .subcategories_section_inner .subcategories_carousel.owl-carousel .owl-stage-outer {
    overflow: visible;
}

@media(max-width: 768px) {
    .subcategories_section {
        display: none;
    }
}


/* Shop Page - Products Grid */

.products_grid_section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.products_grid_section .filter_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.products_grid_section .filter_nav * {
    font-size: 12px;
    white-space: nowrap;
    padding: 0;
}

.products_grid_section .filter_nav .filtering {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.products_grid_section .products_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

@media(max-width:1200px) {
    .products_grid_section .products_grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media(max-width:992px) {
    .products_grid_section .products_grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media(max-width:768px) {
    .products_grid_section {
        padding-top: 90px;
    }
    .products_grid_section .products_grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}


/* Shop Page - Recently Viewed */

.recently_viewed_section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recently_viewed_section h6 {
    font-family: "Farm House Greatness Tall";
    font-size: 42px;
}

.recently_viewed_section .recently_viewed_carousel.owl-carousel .owl-stage-outer {
    overflow: visible;
}


/* Product Details Page - Details section */

.product_details_section {
    padding: 0;
}

.product_details_wrapper {
    position: relative;
    display: flex;
    min-height: 100dvh;
}

.product_details_wrapper .gallery_wrapper {
    position: sticky;
    top: 0;
    flex: 50%;
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 50%;
    max-height: 100dvh;
}

.product_details_wrapper .gallery_wrapper .product_image_wrapper {
    flex: 1 1 80px;
    height: 100%;
    transition: 0.5s;
    aspect-ratio: auto;
}

.product_details_wrapper .gallery_wrapper .product_image_wrapper:hover {
    flex: 100%;
}

.product_details_wrapper .gallery_wrapper .product_image_wrapper .product_image {
    display: block;
    height: 100%;
    aspect-ratio: unset;
}

.product_details_wrapper .info_wrapper {
    flex: 50%;
}

.product_details_wrapper .info_wrapper .product_info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 120px 120px 20px;
}

.product_details_wrapper .info_wrapper .product_info .product_main_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.product_details_wrapper .info_wrapper .product_info .product_main_info>* {
    font-size: 20px;
}

.product_details_wrapper .info_wrapper .product_info .product_main_info .product_title {
    font-family: "Didot";
    font-size: 26px;
}

.product_details_wrapper .info_wrapper .product_info .products_variants .variant_title {
    font-size: 12px;
}

.product_details_wrapper .info_wrapper .product_info .products_variants .variant_options {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.product_details_wrapper .info_wrapper .product_info .products_variants .variant_options label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    cursor: pointer;
}

.product_details_wrapper .info_wrapper .product_info .products_variants .variant_options label::before {
    display: block;
    content: "";
    position: relative;
    width: 25px;
    height: 25px;
    background-color: var(--filter-color);
    border-radius: 50%;
}

.product_details_wrapper .info_wrapper .product_info .products_variants .variant_options label:has(input:checked)::before {
    border: 2px solid;
}

.product_details_wrapper .actions_wrapper {
    position: sticky;
    bottom: 0;
    padding: 20px 0;
    border-top: 1px solid var(--light-grey);
    background-color: #ffff;
    text-align: center;
    z-index: 10;
}

.product_details_wrapper .actions_wrapper button {
    width: 50%;
    background-color: var(--mint-green);
}

@media(max-width:992px) {
    .product_details_wrapper {
        flex-direction: column;
        padding-top: 60px;
    }
    .product_details_wrapper .gallery_wrapper {
        position: static;
        flex: auto;
        flex-direction: column;
        height: 450px;
        width: 100%;
        gap: 5px;
    }
    .product_details_wrapper .gallery_wrapper .product_image_wrapper .product_image {
        pointer-events: none;
    }
    .product_details_wrapper .gallery_wrapper .product_image_wrapper.active .product_image {
        pointer-events: all;
    }
    .product_details_wrapper .gallery_wrapper .product_image_wrapper {
        position: relative;
    }
    .product_details_wrapper .gallery_wrapper .product_image_wrapper.active {
        flex: 100%;
    }
    .product_details_wrapper .gallery_wrapper .product_image_wrapper:not(.active):before {
        font-family: "Font Awesome 7 Free";
        content: "\f424";
        font-weight: 600;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 20px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #ffffff;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }
    .product_details_wrapper .info_wrapper .product_info {
        padding: 30px;
    }
    .modal.lightbox .modal-content {
        aspect-ratio: 2/3;
        height: 100%;
    }
    .modal.lightbox .carousel,
    .modal.lightbox .carousel-inner,
    .modal.lightbox .carousel-item {
        height: 100%;
    }
    .modal.lightbox .ratio-16x9 {
        height: 100%;
        --bs-aspect-ratio: 100%
    }
}


/* Product Details Page - Reviews section */

.reviews_section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.reviews_section .section_title {
    font-size: 36px;
    font-family: "Farm House Greatness Tall";
}

.reviews_section .review_score * {
    white-space: nowrap;
}

.reviews_section .review_score .number {
    font-size: 18px;
    font-weight: 500;
}

.reviews_section .review_score .review_stars i {
    font-size: 12px;
}

.reviews_section .review_score small {
    font-size: 10px;
}

.reviews_section .reviews .nav-item {
    font-size: 12px;
}

.reviews_section .reviews .tab_actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.reviews_section .reviews .tab_actions * {
    white-space: nowrap;
}

.reviews_section .reviews .tab_actions .sorting {
    display: flex;
    align-items: center;
    gap: 5px;
}

.reviews_section .reviews .tab_actions .sorting * {
    font-size: 12px;
}

.reviews_section .reviews .reviews_table {
    width: 100%;
    margin-top: 20px;
}

.reviews_section .reviews .reviews_table .review td {
    padding: 30px 15px;
    border-top: 1px solid var(--light-grey);
    vertical-align: top;
}

.reviews_section .reviews .reviews_table .review td:first-child {
    white-space: nowrap;
}

.reviews_section .reviews .reviews_table .review td:last-child {
    white-space: nowrap;
    text-align: end;
    font-size: 10px;
}

.reviews_section .reviews .reviews_table .review .reviewed_product {
    display: flex;
    gap: 10px;
}

.reviews_section .reviews .reviews_table .review .reviewed_product img {
    width: 50px;
    height: 50px;
}

.reviews_section .reviews .reviews_table .review .reviewed_product * {
    font-size: 12px;
}

.reviews_section .reviews .reviews_table .review .reviewed_product a {
    text-decoration: underline;
}

.reviews_section .reviews .reviews_table .review * {
    font-size: 12px;
}

.reviews_section .reviews .reviews_table .review .short_review {
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
}

.reviews_section .reviews .reviews_table .review .full_review {
    margin-top: 10px;
}

@media(max-width: 992px) {
    .reviews_section .reviews .reviews_table .review {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 0 20px;
    }
    .reviews_section .reviews .reviews_table .review+.review {
        border-top: 1px solid var(--light-grey);
        padding: 30px 0 20px;
    }
    .reviews_section .reviews .reviews_table .review td {
        padding: 0;
        border: none;
    }
}


/* Checkout Page */

.checkout_wrapper {
    position: relative;
    display: flex;
    min-height: 100dvh;
}

.checkout_wrapper>* {
    flex: 1;
    padding-top: 80px;
}

.checkout_wrapper .customer_info {
    border-inline-end: 1px solid var(--light-grey);
}

.checkout_wrapper .order_info_inner,
.checkout_wrapper .customer_info_inner {
    display: flex;
    flex-direction: column;
    width: clamp(200px, 50vw, 500px);
    padding: 40px;
    gap: 20px;
}

.checkout_wrapper .customer_info_inner {
    margin-inline-start: auto;
}

.checkout_wrapper .customer_info_inner .inputs_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkout_wrapper .customer_info_inner .inputs_wrapper input,
.checkout_wrapper .customer_info_inner .inputs_wrapper select {
    font-size: 12px;
    border: 1px solid var(--light-grey);
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.checkout_wrapper .customer_info_inner .payment_methods {
    gap: 0;
}

.checkout_wrapper .customer_info_inner .payment_methods .method {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--light-grey);
    padding: 5px 10px 5px 35px;
    min-height: 40px;
    cursor: pointer;
}

.checkout_wrapper .customer_info_inner .payment_methods .method:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border: 1px solid var(--light-grey);
    border-radius: 50%;
}

.checkout_wrapper .customer_info_inner .payment_methods .method_wrapper:first-child .method {
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.checkout_wrapper .customer_info_inner .payment_methods .method_wrapper:last-child .method {
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

.checkout_wrapper .customer_info_inner .payment_methods .method span {
    font-size: 12px;
}

.checkout_wrapper .customer_info_inner .payment_methods .method_logo {
    height: 30px;
}

.checkout_wrapper .customer_info_inner .payment_methods .method_wrapper:has(input:checked) .method {
    background-color: var(--lighter-bieg);
    border: 1px solid rgb(84, 60, 49);
}

.checkout_wrapper .customer_info_inner .payment_methods .method_wrapper:has(input:checked) .method:before {
    box-shadow: inset 0 0 0 4px rgb(84, 60, 49);
}

.checkout_wrapper .customer_info_inner .payment_methods .method_wrapper .method_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 0;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid var(--light-grey);
    border-block: none;
    background-color: #f5f5f5;
    transition: 0.3s;
    interpolate-size: allow-keywords;
}

.checkout_wrapper .customer_info_inner .payment_methods .method_wrapper:has(input:checked) .method_inner {
    padding: 10px;
    height: auto;
}

.checkout_wrapper .customer_info_inner .useful_link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--light-grey);
    padding-top: 20px;
}

.checkout_wrapper .customer_info_inner .useful_link a {
    text-decoration: underline;
    font-size: 12px;
}

.checkout_wrapper .order_info {
    position: relative;
    background-color: #f5f5f5;
}

.checkout_wrapper .order_info_inner {
    position: sticky;
    top: 80px;
}

.checkout_wrapper .order_info_inner .product_image {
    position: relative;
    flex: 0 0 70px;
    aspect-ratio: 1;
}

.checkout_wrapper .order_info_inner .product_image .quantity {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transform: translate(-50%, -50%);
    background-color: #000000;
    border: 1px solid #ffffff;
    color: #fff;
    width: 20px;
    border-radius: 5px;
    height: 20px;
    border-radius: 5px;
    z-index: 1;
}

.checkout_wrapper .order_info_inner .copoun_code {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.checkout_wrapper .order_info_inner .copoun_code input {
    font-size: 12px;
    border: 1px solid var(--light-grey);
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.checkout_wrapper .order_info_inner .copoun_code .main_button {
    border-radius: 10px;
    background-color: var(--bieg);
}

.checkout_wrapper .order_info_inner .receipt_details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.checkout_wrapper .order_info_inner .receipt_details *:not(.grand_total *) {
    font-size: 12px;
}

.checkout_wrapper .order_info_inner .receipt_details .grand_total {
    margin-top: 10px;
}

@media(max-width: 768px) {
    .checkout_wrapper {
        flex-direction: column-reverse;
    }
    .checkout_wrapper .order_info_inner,
    .checkout_wrapper .customer_info_inner {
        padding: 20px;
        width: 100%;
    }
    .checkout_wrapper .order_info_inner {
        padding-top: 100px;
    }
    .checkout_wrapper .order_info,
    .checkout_wrapper .customer_info {
        padding: 0;
    }
}


/* Contact Info */

.contact_info_section {
    display: flex;
    min-height: 100dvh;
    padding: 0;
    background: url(../images/ripple-3.png) no-repeat bottom left / 700px;
}

.contact_info_section>* {
    flex: 1;
}

.contact_info_section .contact_info_wrapper {
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-top: 70px;
    gap: 20px;
}

.contact_info_section .contact_info_wrapper h6 {
    font-family: "Farm House Greatness Tall";
    font-size: 36px;
}

.contact_info_section .contact_info_inner,
.contact_info_section .social_media_inner {
    display: flex;
    flex-direction: column;
    width: clamp(200px, 50vw, 500px);
    gap: 20px;
    padding: 0 40px;
    margin-inline-start: auto;
}

.contact_info_section .contact_info_inner .info_wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--light-grey);
    padding: 10px 15px;
    border-radius: 20px;
    background-color: #ffffffaa;
}

.contact_info_section .contact_info_inner .info_wrapper * {
    font-size: 12px;
}

.contact_info_section .contact_info_inner .conatct_form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact_info_section .contact_info_inner input,
.contact_info_section .contact_info_inner textarea {
    border: 1px solid var(--light-grey);
    padding: 10px 15px;
    border-radius: 20px;
}

.contact_info_section .social_media_inner .socials {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 5px;
}

.contact_info_section .social_media_inner .socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--light-grey);
    border-radius: 10px;
    background-color: #ffffffaa;
}

.contact_info_section .social_media_inner .socials a:hover {
    background-color: var(--lighter-bieg);
    border-color: var(--lighter-bieg);
}

@media(max-width:768px) {
    .contact_info_section {
        background-size: contain;
        flex-direction: column-reverse;
    }
    .contact_info_section .contact_info_wrapper {
        width: 100%;
        padding: 40px 0;
    }
    .contact_info_section .contact_info_inner,
    .contact_info_section .social_media_inner {
        width: 100%;
        padding: 0 20px;
    }
    .contact_info_section .map_wrapper {
        flex: auto;
        height: 400px;
        padding-top: 60px;
    }
}


/* Content Pages */

.content_section {
    display: flex;
    min-height: 100dvh;
    padding: 0;
    background: url(../images/ripple-3.png) no-repeat bottom left / 700px;
}

.content_section>* {
    flex: 1;
}

.content_section .content_image {
    height: 100dvh;
    position: sticky;
    top: 0;
}

.content_section .content_wrapper {
    display: flex;
    flex-direction: column;
    align-self: center;
    padding-top: 80px;
    gap: 20px;
}

.content_section .content_wrapper h6 {
    font-family: "Farm House Greatness Tall";
    font-size: 36px;
}

.content_section .content_inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px clamp(20px, 5vw, 50px);
    margin-inline-start: auto;
}

.content_section .content_inner li {
    margin-top: 10px;
}

.content_section.return_policy .content_inner>ol {
    list-style: upper-alpha;
}

@media(max-width:992px) {
    .content_section {
        flex-direction: column-reverse;
    }
    .content_section .content_wrapper {
        padding: 0;
    }
    .content_section .content_image {
        position: static;
        flex: auto;
        height: 300px;
    }
}