/* ==========================================================================   SITE-WIDE BACKGROUND PATTERN   ========================================================================== */body {    /* Fallback background color (matches your new nav bar) */    background-color: #F9F8F4;         /* The leaf pattern image */    background-image: url('https://dna3n15iwxmh8.cloudfront.net/d6ff02285bf2d89b2bafbf5468fdeab4/media/images/themes/b5458fe958a0b7ecc79bec7a60d0c019/33f172f4f3ffa93f89c38a2312284491_1779873873.png');        /* Ensures the pattern repeats continuously across all screen sizes */    background-repeat: repeat;         /* Keeps the background stationary while the user scrolls */    background-attachment: fixed;         background-position: top left;}/* ==========================================================================   HEADER & NAVIGATION BAR STYLES   ========================================================================== */header#header {    background-color: #F9F8F4 !important;    background-image: none !important; /* Removes gradients */    box-shadow: 0 2px 10px rgba(0,0,0,0.15);    position: sticky !important;    top: 0;    z-index: 1000;    transition: box-shadow 0.3s ease;}/* Header Wrapper Typography */.header-wrapper {    color: #36454F !important;    text-transform: uppercase;    letter-spacing: 1px;    font-weight: 500; /* Medium weight */}/* Navigation Links & Icons */.header-wrapper a, .header-wrapper button, .header-wrapper span:not(.cart-item-count) {    color: inherit !important;    text-transform: inherit;    letter-spacing: inherit;    font-weight: inherit;}/* Ensure Icons Match */.header-wrapper svg {    stroke: #36454F !important;    color: #36454F !important;}/* Remove the gap below header */.header-wrapper + div, header#header + div {    margin-top: 0 !important;}/* Cart Badge Styling */.cart-item-count {    background-color: #36454F !important;}.right-header.flex.items-center {    color: #b4b4b4;}a#login-button {    color: #b4b4b4;}.horizontal-menu-wrapper.relative {    margin-left: auto;}#header .category-list-wrapper ul li {    list-style: none;}/* Target the links and category text inside the header */header#header a, header#header .category-name {    font-family: 'Playfair Display', serif !important;    text-transform: uppercase !important;    /* Optional: Adjust letter spacing for better uppercase readability */    letter-spacing: 0.05em;}/* ==========================================================================   BUTTON STYLES   ========================================================================== */a.inline-flex.items-center.justify-center.bg-\[\#4d4d4d\].text-white.uppercase.tracking-\[2px\].text-\[14px\].md\:text-\[15px\].px-12.md\:px-20.py-4.hover\:bg-black.transition.duration-300 {    background-color: #797979;    border-radius: 8px;    color: #ffff;}a.inline-flex.items-center.justify-center.bg-\[\#4d4d4d\].text-white.uppercase.tracking-\[2px\].text-\[14px\].md\:text-\[15px\].px-12.md\:px-20.py-4.hover\:bg-black.transition.duration-300:hover {    background-color: #1b453a;}/* ==========================================================================   DIVIDERS & IMAGES   ========================================================================== */.tea-divider {    width: 100%;    display: flex;    justify-content: center;    align-items: center;    margin: 80px auto;    padding: 0 20px;}.tea-divider img {    width: 100%;    max-width: 900px;    height: auto;    display: block;    object-fit: contain;}/* tablet */@media (max-width: 768px) {    .tea-divider {        margin: 60px auto;    }    .tea-divider img {        max-width: 650px;    }}/* mobile */@media (max-width: 480px) {    .tea-divider {        margin: 40px auto;        padding: 0 10px;    }    .tea-divider img {        max-width: 100%;    }}/* ==========================================================================   TYPOGRAPHY & GLOBAL LAYOUT   ========================================================================== */@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');/* Apply Lato to everything by default */html, body, button, input, select, textarea {    font-family: 'Lato', sans-serif;}/* Apply Playfair Display specifically to all headings */h1, h2, h3, h4, h5, h6 {    font-family: 'Playfair Display', serif !important;}/* 1. Remove the white background from the main content wrapper */.cms-page.content-wrapper {    background-color: transparent !important;    padding: 0;}/* 2. Remove the light gray background from the outer container */.bg-gray-50 {    background-color: transparent !important;}.cj-loader__bar {    background-color: #000000;}.cj-loader__ball {    background-color: #000000;}span.block.border-b.border-gray-100.curser-pointer {    display: none;}/* ==========================================================================   PRODUCT ITEM STYLES   ========================================================================== *//*Image size increase*/.custom-product-item .thumb-wrp {    height: auto;    width: 100%;}.custom-product-item .thumb {    height: 315px;}h3.text-heading.font-semibold.mb-1.md\:mb-1\.5.text-sm.sm\:text-base.md\:text-sm.xl\:text-base.line-clamp-1.line-clamp-1 {    font-size: 0.9rem;}.text-gray-500.description.text-body.text-xs.xl\:text-sm.leading-normal.mb-0\.5.xl\:mb-2.line-clamp-1 {    display: none;}.description.text-body.text-xs.lg\:text-sm.leading-normal.xl\:leading-relaxed.line-clamp-2.mb-1\.5 {    display: none;}.description-wrapper.row.w-full {    display: none;}/* ==========================================================================   FOOTER STYLES   ========================================================================== */.container {    width: 90%;    margin-left: auto;    margin-right: auto;}.footer-highlights span, .text-body {    color: #505050;}.page-footer {    background-color: #e8e8e8;    background-position: top right;    background-repeat: no-repeat;}.footer-highlights {    margin-bottom: 30px;    justify-content: space-between;}.footer-highlights .icon {    width: 70px;    height: 70px;    display: block;    margin-right: 10px;    background-position: center;    background-repeat: no-repeat;    background-image: url(https://d3fgegizptfhv.cloudfront.net/954503bf65849e29cb62997abb475a42/media/images/e441c3316a8993007b3814b12c325d38_1671764657.png);}.footer-highlights .h-2 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/954503bf65849e29cb62997abb475a42/media/images/b21c00fc65395cae99e58c0a961f5daa_1671764658.png);}.footer-highlights .h-3 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/954503bf65849e29cb62997abb475a42/media/images/8bdc1abb4809bec8143f31a677797d0a_1671764654.png);}.footer-highlights .h-4 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/954503bf65849e29cb62997abb475a42/media/images/a349dbf52afe9b47eacdc9acbf5388ba_1671764654.png);}.footer-highlights .h-5 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/954503bf65849e29cb62997abb475a42/media/images/1f8717b71eebf4b3f2aa91015a4b7a6d_1671764658.png);}.footer-middle {    padding: 40px 0 16px;    border-bottom: 2px solid #cccccc;}.footer-nav {    display: grid;    grid-template-columns: auto auto auto;    gap: 10px;}.footer-nav .item-4 {    grid-column: 2;}.footer-nav>div {    width: 100%;    margin: 0 auto 20px;}.footer-nav li {    margin-top: 6px;}.social-block ul {    margin-top: 12px;}.social-block li {    margin-right: 12px;}.social-block a {    display: block;}.social-block svg {    width: 24px;    height: 24px;}.newsletter-block {    margin-top: 55px;}.newsletter-block form {    margin-top: 10px;    display: flex;}.newsletter-block input {    padding: 12px;    font-size: 12px;    height: 44px;    width: 100%;    border: none;    outline: none;}.newsletter-block button {    height: 44px;    min-width: 40px;    background-color: #fff;}.newsletter-block button svg {    margin: 0 auto;}.footer-bottom {    padding: 12px 0;    font-size: 12px;}.footer-bottom .copyright {    margin-right: 40px;}.pm {    width: 36px;    height: 24px;    margin-left: 10px;    background-position: center;    background-repeat: no-repeat;    background-image: url(https://d3fgegizptfhv.cloudfront.net/25d760091090d8dc96ce5a228a152986/media/images/themes/p-1.png);}.pm-2 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/25d760091090d8dc96ce5a228a152986/media/images/themes/p-2.png);}.pm-3 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/25d760091090d8dc96ce5a228a152986/media/images/themes/p-3.png);}.pm-4 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/25d760091090d8dc96ce5a228a152986/media/images/themes/p-4.png);}.pm-5 {    background-image: url(https://d3fgegizptfhv.cloudfront.net/25d760091090d8dc96ce5a228a152986/media/images/themes/p-5.png);}/* ==========================================================================   PAGE SPECIFIC OVERRIDES   ========================================================================== */h1.title.m-0.text-primary.text-2xl.md\:text-3xl.lg\:text-4xl.xl\:text-5xl.xl\:leading-10.font-bold.p-\[50px\].sm\:p-\[90px\].md\:p-\[100px\].lg\:p-\[130px\].bg-gray-200.text-center {    background-color: #E8E8E8;    color: black;}.cms-page.content-wrapper.content.mt-\[90px\].p-\[16px\] {    background-color: #FFFFFF;}.sitemap-wrapper.content-wrapper.mx-auto.max-w-\[1920px\].mt-\[90px\].mb-8.lg\:mb-16 {    background-color: transparent;}/* ==========================================================================   MEDIA QUERIES   ========================================================================== */div#app {    min-height: calc(100vh - 300px);}@media only screen and (min-width: 768px) {    .cart-drawer-body.flex.flex-col {        height: calc(100vh - 100px);    }    div#app {        min-height: calc(100vh - 250px);    }    .md\:w-1\/4 {        width: 25%;    }    .md\:w-3\/4 {        width: 75%;    }    .md\:h-\[240px\] {        height: 240px;    }    .md\:flex-wrap {        flex-wrap: wrap;    }    .md\:mt-0 {        margin-top: 0;    }}@media only screen and (min-width: 1024px) {    .lg\:h-\[720px\] {        height: 550px;    }    .lg\:h-\[200px\] {        height: 200px;    }    .lg\:h-\[450px\] {        height: 450px;    }}@media only screen and (max-width: 1023px) {    .footer-highlights h4 {        font-size: 13px;    }    .footer-highlights span {        font-size: 12px;        line-height: 1.1;        display: block;    }    .footer-middle h4 {        font-size: 15px;    }    .social-block li {        margin-right: 5px;    }}@media only screen and (max-width: 767px) {    .cart-drawer-body.flex.flex-col {        height: calc(100vh - 100px);    }    div#app {        min-height: calc(100vh - 250px);    }    .mt-28 {        margin-top: 4rem;    }    .footer-highlights {        display: block;    }    .footer-highlights .hightlight-block {        margin-bottom: 8px;    }    .footer-nav {        grid-template-columns: auto auto;    }    .footer-bottom {        text-align: center;    }    .footer-bottom .powered-by,        .footer-bottom .copyright {        margin: 0 0 8px;    }    .footer-bottom .payment-methods-wrp {        justify-content: center;    }    .footer-address-bottom {        margin-top: 20px;        flex-wrap: wrap;    }}@media only screen and (min-width: 1280px) {    .container {        max-width: 1600px;    }}/* --- Icon Replacement via CSS Mask --- *//* 1. Universal Icon Styling */.header-wrapper i.bi, .header-wrapper .menuBtn svg {    background-color: #36454F !important; /* The Charcoal Color */    -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;    -webkit-mask-size: contain;    mask-size: contain;    -webkit-mask-position: center;    mask-position: center;    width: 24px !important;    height: 24px !important;    display: inline-block !important;}/* 2. Hamburger Icon */.header-wrapper .menuBtn svg, .header-wrapper .menuBtn i {    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E");    background-image: none !important;}/* 3. Search Icon */.header-wrapper .bi-search {    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");}/* 4. User/Login Icon & Hide Text */.login-button span {    display: none !important; /* Hides the "Login" text */}.login-button::before {    content: "";    display: inline-block;    width: 24px;    height: 24px;    background-color: #36454F;    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");}/* 5. Cart Icon */.header-wrapper .bi-cart3 {    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'%3E%3C/path%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'%3E%3C/path%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'%3E%3C/path%3E%3C/svg%3E");}/* 6. Cart Badge */.cart-item-count {    background-color: #36454F !important;}/* Hide original font icon glyphs */.header-wrapper i.bi::before {    display: none !important;}/* 7. Dropdown Arrow Icon (Chevron Down) */.header-wrapper .bi-chevron-down {    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");    width: 14px !important; /* Scaled down slightly so it doesn't overpower the text */    height: 14px !important;    margin-left: 4px; /* Adds a little breathing room from the category name */    vertical-align: middle;}/* ==========================================================================   FINAL ICON FIXES (Close Buttons, Mobile Arrows, Stray Blocks)   ========================================================================== *//* 1. Hide the stray black box next to the login icon */.login-button i.bi,a#login-button i.bi {    display: none !important;}/* 2. 'X' Close Icon (for Mobile Menu & Shopping Cart Drawers) */.header-wrapper .bi-x,.header-wrapper .bi-x-lg,.cart-drawer-body .bi-x,.cart-drawer-body .bi-x-lg,button.close i.bi,.close-btn i.bi {    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");    background-color: #36454F !important;    -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;    -webkit-mask-position: center;    mask-position: center;    width: 24px !important;    height: 24px !important;    display: inline-block !important;}/* 3. Mobile Menu Category Expansion Arrows */.header-wrapper .bi-chevron-right,.cart-drawer-body .bi-chevron-down,.mobile-menu i.bi,aside i.bi {    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");    background-color: #36454F !important;    -webkit-mask-repeat: no-repeat;    mask-repeat: no-repeat;    -webkit-mask-position: center;    mask-position: center;    width: 16px !important;    height: 16px !important;}/* ==================== PREMIUM LOGO NEXT TO THE MAIN LOGO ==================== *//* 1. Setup the container to fit two logos side-by-side */.logo-wrapper {    display: flex !important;    align-items: center !important;    gap: 1.5rem !important;}/* 3. Inject the second logo using the ::after pseudo-element */.logo-wrapper::after {    content: "";    display: block;    width: 80px; /* Same as the height for a square logo */    height: 80px;    background-image: url('https://dna3n15iwxmh8.cloudfront.net/d6ff02285bf2d89b2bafbf5468fdeab4/media/images/themes/b5458fe958a0b7ecc79bec7a60d0c019/0d5ec745a03fc030448b5805c00a4361_1780636693.png');    background-size: contain;    background-repeat: no-repeat;    background-position: center;    }/* 4. Ensure the header doesn't hide the larger logos */.relative.flex.items-center.justify-between.h-16 {    overflow: visible !important;}/* MAKE 'Explore Collection' SECTION HOVARABLE *//* 1. Global transitions for Image and Text */[class*="rounded-2xl"] img {  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;}[class*="rounded-2xl"] .z-10 {  transition: transform 0.4s ease !important;  transform-origin: left bottom;}/* 2. Interaction: Zoom Effect (Works on Hover, Mobile Tap, and Focus) */[class*="rounded-2xl"]:hover img,[class*="rounded-2xl"]:active img,[class*="rounded-2xl"]:focus img {  transform: scale(1.1) !important;}[class*="rounded-2xl"]:hover .z-10,[class*="rounded-2xl"]:active .z-10,[class*="rounded-2xl"]:focus .z-10 {  transform: scale(1.05) !important;}