/*
Theme Name: WeeQub D2C Premium
Theme URI: https://weequb.com
Author: WeeQub Team
Author URI: https://weequb.com
Description: A luxury-grade, PWA-ready B2C e-commerce theme designed for brand owners. prioritizing calm, trust, and mobile performance.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: weequb
Tags: e-commerce, woocommerce, luxury, pwa, mobile-first, block-patterns, full-site-editing
*/

/* 
 * WEEQUB D2C - MASTER STYLESHEET
 * 
 * 1. TOKENS.........Reference to /assets/css/tokens/
 * 2. COMPONENTS.....Reference to /assets/css/components/
 * 3. PAGES..........Reference to /assets/css/pages/
 * 
 * Note: Actual styles are enqueued via /inc/core/enqueue.php to maintain 
 * strict modularity and performance. This file serves as the Theme Header 
 * and a fallback for WP editor styles.
 */

/* ===================================================================
  

   RITUAL DUOS SECTION


   =================================================================== */

.ritual-duos-section {
    padding: var(--spacing-2xl) 0;
    overflow: hidden;
    /* Prevent marquee spillover */
    background-color: #FEF5F0;
    /* Assuming matches page bg */
}

.ritual-duos-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    align-items: center;
}

.divider_text_collection {
    margin: 0px !important;
}

@media (min-width: 1024px) {
    .ritual-duos-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6rem;
    }
}

/* Left Side: Vertical Carousel */
.ritual-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 550px;
    /* Increased to fit card content content */
    height: 600px;
    /* Increased height */
    overflow: hidden;
    /* border-radius: 20px; Removed container radius, cards have radius */
    /* background-color: #fff; Removed background */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); Removed shadow */
    display: flex;
    flex-direction: column;
}

.ritual-carousel-track {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Increased gap */
    animation: scrollVertical 40s linear infinite;
    /* Slower animation for readability */
    padding: 20px 0;
}

/* Ensure images fill the width and maintain aspect ratio */
.ritual-carousel-track .carousel-item {
    width: 100%;
    padding: 0 10px;
    /* Reduced padding */
    flex-shrink: 0;
}

/* Card Styling */
.ritual-card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ritual-card img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    margin-bottom: 20px;
}

.ritual-card-content {
    padding: 4px 12px 12px 12px;
}

.ritual-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.ritual-card-title {
    font-family: 'Roxborough CF', serif;
    font-size: 1.5rem;
    color: #3d2e27;
    font-weight: 500;
    margin: 0;
}

.ritual-card-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #666;
}

.ritual-card-tags span {
    font-family: 'Roxborough CF', serif;
}

.ritual-card-tags span:not(.separator) {
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}

.ritual-card-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

@keyframes scrollVertical {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}


/* Using global .section-title and .section-description now */

.narrow-readable {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md, 20px);
    padding-right: var(--spacing-md, 20px);
}

.text-h1 {
    font-size: var(--text-h1, 2.5rem);
    line-height: 1.1;
    font-weight: 700;
}

.text-subtle {
    color: var(--color-text-light, #666);
}

.ritual-title {
    font-family: 'Roxborough CF', serif;
    font-size: 32px;
    color: #3d2e27;
    font-weight: 600;
    margin: 10px 0px;
}

/* Right Side: Content */
.ritual-content {
    text-align: center;
    max-width: 600px;
}

.ritual-content .eyebrow {
    font-size: 1rem;
    letter-spacing: 0.1em;
    font-weight: 400;
    color: var(--color-text-light);
    text-transform: uppercase;
}



.btn-ritual {
    display: inline-flex;
    align-items: center;
    background-color: #A06833;
    /* Brown/Gold matching design */
    color: #FFF;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-ritual:hover {
    background-color: #8c5a2b;
    color: #ffffff;
}

.btn-ritual img {
    margin-left: var(--space-2);
    transition: transform 0.3s ease;
}

.btn-ritual:hover img {
    transform: translateX(4px);
}



.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--color-bg);
    z-index: 2001;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.cart-drawer.is-open {
    transform: translateX(0);
}

.cart-drawer-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-bg);
}

.cart-drawer-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.cart-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    color: var(--color-text);
    transition: var(--transition);
}

.cart-drawer-close:hover {
    color: var(--color-error);
    transform: rotate(90deg);
}

.cart-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

/* WooCommerce Mini Cart Styles Override */
.cart-drawer .widget_shopping_cart_content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cart-drawer .woocommerce-mini-cart {
    flex: 1;
    margin-bottom: var(--spacing-md);
}

.cart-drawer .woocommerce-mini-cart-item {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.cart-drawer .woocommerce-mini-cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-left: 0 !important;
    /* Reset WP default */
}

.cart-drawer .woocommerce-mini-cart-item a.remove {
    position: absolute;
    top: var(--spacing-sm);
    right: 0;
    background: var(--color-bg-gray);
    color: var(--color-text-light) !important;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
}

.cart-drawer .woocommerce-mini-cart-item a.remove:hover {
    background: var(--color-error);
    color: white !important;
}

.cart-drawer .woocommerce-mini-cart__total {
    margin-top: auto;
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.cart-drawer .woocommerce-mini-cart__buttons {
    display: grid;
    gap: var(--spacing-sm);
    margin-bottom: 0;
}

.cart-drawer .woocommerce-mini-cart__buttons .button {
    width: 100%;
    margin: 0;
    padding: var(--spacing-sm);
    text-align: center;
    border-radius: var(--border-radius);
    background-color: var(--color-text);
    color: white;
    font-weight: 600;
}

.cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.cart-drawer .woocommerce-mini-cart__buttons .button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}





/* /-------------------------------------------------------------------------/ */
/*                               HERO SECTION                                */
/* /-------------------------------------------------------------------------/ */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 120vh;
    display: flex;
    align-items: center;
    background-image: url('assets/images/Hero_Bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: var(--space-20) 0;
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* Move block to the right */
    height: 100%;
    text-align: left;
}

/* Hero Content (Text) */
.hero-content {
    color: var(--color-text-inverse);
    text-align: left;
    max-width: 600px;
    /* Reduced width to nicer proportion on the right */
    margin: 0;
}

.hero-title {
    font-family: 'Roxborough CF', serif;
    font-size: 3rem;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: var(--weight-medium);
    line-height: 1.1;
    margin-bottom: var(--space-4);
    color: #FFF;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: var(--weight-light);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
    opacity: 0.9;
    color: #ffffff;
}

/* CTA Button */
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #B57A3C;
    /* Solid primary color */
    border: 1px solid #FFCD88;
    color: #FFF;
    padding: 12px 30px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 16px;
    /* Larger font */
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: none;
    background: #B57A3C;
    /* Fallback/Override */
}

.hero-cta:hover {
    color: #ffffff;
}

.hero-cta img {
    margin-left: var(--space-2);
    transition: transform 0.3s ease;
}

.hero-cta:hover img {
    transform: translateX(4px);
    color: #ffffff;
}

.arrow {
    margin: 0px 0px 0px 2px;
    width: 23px;
    height: 23px;
}


/* /-------------------------------------------------------------------------/ */
/*                         WHAT IS CALMISTRY SECTION                           */
/* /-------------------------------------------------------------------------/ */
.what_section {
    background-color: #FEF5F0;
}

.text_container {
    text-align: center;
    gap: 20px;
}

.text_container h2 {
    font-family: 'Roxborough CF', serif;
    font-size: var(--text-h3);
    /* AUDIT FIX: 3rem (48px) - Was 2rem */
    padding: 10px 0px;
    line-height: 1.2;
}

.divider_text {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
}

.divider_text img {
    margin: 0px 10px;
    height: 12px;
    width: 60px;
}

.text_container p {
    max-width: 700px;
    /* AUDIT FIX: Use max-width instead of padding */
    margin: 0 auto;
    padding: 0;
    line-height: 1.7;
}

/* what is calmistry - side image */
.text_image_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text_container2 {
    padding-left: 40px;
    gap: 20px;
}

.text_container2 h2 {
    font-family: 'Roxborough CF', serif;
    font-size: 2rem;
    padding: 10px 0px;
}

.text_container2 p {
    font-family: 'Baskervville', serif;
    font-size: 18px;
    font-weight: 500;
    font-style: italic;
    padding-bottom: 10px;
}

.text_container2 li {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0px;
}

.side_img img {
    width: 600px;
}

@media (max-width:768px) {
    .text_image_container {
        display: flex;
        flex-direction: column;
    }

    .side_img {
        order: 0;
        /* AUDIT FIX: Image first on mobile - Was: 1 */
    }

    .side_img img {
        width: 100%;
        /* AUDIT FIX: Responsive width */
        max-width: 400px;
    }

    .text_container2 {
        order: 1;
        /* AUDIT FIX: Text second on mobile - Was: 2 */
        padding-left: 0;
        /* AUDIT FIX: Remove desktop padding */
    }
}


/* /-------------------------------------------------------------------------/ */
/*                           SMALL DROPS SECTION                               */
/* /-------------------------------------------------------------------------/ */
.small-drops-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #FFFFFF;
    /* Light creamy background base */

}

.small-drops-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF);
    z-index: 5;
    pointer-events: none;
}

/* Background Image Feature */
.small-drops-container {
    max-width: var(--container-xl);
    padding: 0px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-10);
    position: relative;
    z-index: 2;
    background-image: url('assets/images/bg_candle.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 400px;
    /* Mobile minimum height */
    justify-content: center;
    /* Center content vertically on mobile if needed, or flex-start */
}



@media (min-width: 1024px) {
    .small-drops-container {
        flex-direction: row;
        justify-content: flex-end;
        /* Push content to right */
        align-items: center;
        min-height: 600px;
        /* Desktop minimum height for background visibility */
    }
}

/* Content Side */
.small-drops-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centered content block style */
    text-align: center;
    max-width: 600px;
}


.divider_text2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
}

.divider_text2 img {
    margin: 0px 10px;
    height: 12px;
    width: 60px;

}

.eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
}

.divider-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #3B2A1E;
    /* Dark brown */
    opacity: 0.3;
}

/* Typography */
.section-title {
    font-family: 'Roxborough CF', serif;
    font-size: var(--text-h2);
    /* AUDIT FIX: 3.5rem (56px) locked */
    font-weight: 400;
    color: #3B2A1E;
    margin: 10px 0px;
    line-height: 1.2;
}

.section-description {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: #6B6B6B;
    max-width: 550px;
}

/* Features Pill */
.features-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: 30px;
    padding: 12px 24px;
    border: 1px solid #A47B37;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.4);
}

.feature-item {
    font-family: 'Roxborough CF', serif;
    /* Or serif as per design look */
    font-size: 1rem;
    color: #3B2A1E;
    font-weight: 500;
}

.feature-separator {
    width: 20px;
    height: 20px;
}


/* /-------------------------------------------------------------------------/ */
/*                       COLLECTION SHOWCASE SECTION                         */
/* /-------------------------------------------------------------------------/ */
.collection-showcase-section {
    padding: 60px 0;
    background: #FEF8F4;

}

.collection-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 20px;
}

.collection-header {
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.divider_text_collection {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B2A1E;
    text-align: center;
}

.divider_text_collection h1 {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #3B2A1E;
}

.divider_text_collection img {
    margin: 0px 10px;
    height: 12px;
    width: 60px;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobile First */
    gap: 20px;
}

@media (min-width: 768px) {
    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .collection-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Product Card */
.product-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

.product-card:hover {
    transform: none;
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 320px;
    display: block;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
    /* Subtle zoom */
}

/* Wishlist Button */
.wishlist-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 5;
    transition: transform 0.2s;
}

.wishlist-btn:hover {
    transform: scale(1.1);
}

.wishlist-btn img {
    width: 32px;
    height: 32px;
}

/* Product Tags Carousel */
.product-tags {
    position: absolute;
    bottom: 110px;
    left: 20px;
    right: 20px;
    overflow: hidden;
    /* Mask the scrolling content */
    z-index: 5;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.product-tags-track {
    display: flex;
    gap: 10px;
    width: max-content;
    /* Allow track to take full width of children */
    animation: scrollMarquee 20s linear infinite;
}

.product-tags span {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-family: 'Roxborough CF', serif;
    font-size: 0.6rem;
    padding: 4px 6px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 400;
}

/* Pause on hover if needed, but user asked for "running" */
/* .product-card:hover .product-tags span {
    animation-play-state: paused;
} */

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Floating Details Card */
.card-details {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: #fff;
    border-radius: 16px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.details-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-name {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: #000;
    margin: 0;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
}

.original-price {
    font-size: 0.9rem;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

.current-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

/* Add to Cart Button */
.add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    padding: 0;
    background-color: transparent;
    border: none;
}

.add-to-cart-btn:hover {
    transform: scale(1.05);
}

.add-to-cart-btn img {
    width: 40px;
    height: 40px;
}

/* /-------------------------------------------------------------------------/ */
/*                       FEATURED SCENT SECTION                                */
/* /-------------------------------------------------------------------------/ */
.featured-scent-section {
    padding: 80px 0;
    background: linear-gradient(to bottom, #FFFFFF, #FEF8F4);
    text-align: center;
}

.featured-scent-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.featured-header {
    margin-bottom: 50px;
}

.featured-header .eyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: 1rem;
}

.featured-banner {
    position: relative;
    width: 100%;
    /* max-width: 1200px; Remove max-width if needs to be fullish, or keep */
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
}

.featured-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    min-height: 600px;
    /* Ensure height for the card area */
}

/* Card Overlay */
.featured-card {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 480px;
    height: 380px;
    /* Approximate based on visual */
    /* background: url(...) handled by img tag or css */
}

.card-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: fill;
    /* Ensure it fills container */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #3B2A1E;
}

.new-drop-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #A06833;
    color: white;
    padding: 5px 15px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
    transform: rotate(45deg);
    /* This needs a proper ribbon implementation, simplifying for now */
    display: none;
    /* Hide if not using image ribbon */
}

/* If New Drop is on the Text Box image, we don't need code for it. */
/* Assuming Text Box.webp HAS the "New Drop" ribbon visually? Or we need to code it. 
   Plan said "Only Add if not in image". I'll assume I need to handle layout mainly. 
   User said "exact design".
*/

.product-title {
    font-family: 'Roxborough CF', serif;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 15px;
    color: #3B2A1E;
}

.product-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #555;
    max-width: 90%;
}

.product-icons {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.icon-item img {
    width: 40px;
    height: 40px;
}

.icon-item span {
    font-family: 'Roxborough CF', serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3B2A1E;
    white-space: nowrap;
}

.vertical-divider {
    width: 0.01rem;
    height: 40px;
    background-color: #e7deda;
    /* padding: 0px 1px; */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .featured-card {
        left: 5%;
        width: 400px;
    }
}

@media (max-width: 768px) {
    .featured-banner {
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .featured-bg-img {
        min-height: 300px;
    }

    .featured-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 90%;
        margin: -50px auto 0;
        /* Overlap slightly */
        height: auto;
        min-height: 350px;
    }

    .card-bg {
        /* On mobile, maybe just white background if image doesn't scale well? */
        /* object-fit: cover; */
        border-radius: 10px;
    }
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.icon-circle {
    width: 40px;
    height: 40px;
}

.icon-circle svg {
    width: 20px;
    height: 20px;
    color: #3B2A1E;
}

.feature span {
    font-family: 'Roxborough CF', serif;
    font-size: 0.8rem;
    font-weight: bold;
    color: #3B2A1E;
}

/* Button */
.btn-choose-scent {
    display: inline-flex;
    align-items: center;
    background-color: #A06833;
    /* Brown/Gold matching design */
    color: #FFF;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-choose-scent:hover {
    background-color: #8c5a2b;
    color: #ffffff;
}

.btn-choose-scent img {
    margin-left: var(--space-2);
    transition: transform 0.3s ease;
}

.btn-choose-scent:hover img {
    transform: translateX(4px);
}

.arrow {
    margin: 0px 0px 0px 2px;
    width: 23px;
    height: 23px;
}

/* /-------------------------------------------------------------------------/ */
/*                         SCENT STORIES SECTION                               */
/* /-------------------------------------------------------------------------/ */
.scent-stories-section {
    padding: 60px 0;
    padding-bottom: 0px;
    background-color: #FEF8F4;
    overflow: hidden;
}

.scent-stories-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divider_text4 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: 1rem;
}

.divider_text4 img {
    margin: 0px 10px;
    height: 12px;
    width: 60px;
}

.section-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 10px 0px;
}

.scent-stories-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

/* Visualization Container */
.scent-stories-visuals {
    position: relative;
    width: 100%;
    max-width: 1000px;
    /* Constrain width for desktop layout */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
}

.central-image-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    /* Mobile max width */
    display: flex;
    align-items: center;
    justify-content: center;
}

.central-candle-img {
    width: 700px;
    height: 700px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* Story Cards - Base Mobile Styles (Stacked) */
.story-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.story-card:hover {
    transform: translateY(-5px);
}

.story-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.story-text h3 {
    font-family: 'Roxborough CF', serif;
    font-size: 1.1rem;
    margin: 0 0 4px 0;
    color: #3B2A1E;
}

.story-text p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin: 0;
    color: #666;
    line-height: 1.4;
    white-space: nowrap;
}

/* Desktop layout: Absolute Positioning */
@media (min-width: 1024px) {
    .scent-stories-visuals {
        display: block;
        /* Switch to block for absolute positioning context */
        height: 600px;
        /* Fixed height for canvas */
    }

    .central-image-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 380px;
    }

    .story-card {
        position: absolute;
        width: auto;
        max-width: 450px;
    }

    /* Card 1: Top Left */
    .card-left {
        top: 25%;
        left: 0;
    }

    /* Card 2: Center Right */
    .card-right {
        top: 45%;
        right: 0;
    }

    /* Card 3: Bottom Left */
    .card-bottom {
        bottom: 15%;
        left: 10%;
    }
}

/* /-------------------------------------------------------------------------/ */
/*                         FOUNDER NOTE SECTION                                */
/* /-------------------------------------------------------------------------/ */
.founder-note-section {
    background-color: #FEF8F4;
    /* Match Scent Stories bg or slightly different as per design */
    padding: 60px 0 0 0;
    /* Padding top only, image touches bottom */
    overflow: hidden;
}

.founder-note-container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
}

/* Content Side */
.founder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centered on mobile */
    justify-content: center;
    text-align: center;
    /* max-width: 800px; */
    z-index: 2;
    padding-left: 40px;
}


.divider_text3 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: 1rem;
}

.divider_text3 img {
    margin: 0px 10px;
    height: 12px;
    width: 60px;
}

.founder-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    color: #3B2A1E;
}

.founder-header .divider-line {
    width: 40px;
    height: 1px;
    background-color: #3B2A1E;
    opacity: 0.3;
}

.founder-header .eyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.founder-title {
    font-family: 'Roxborough CF', serif;
    font-size: 2rem;
    line-height: 1.1;
    color: #3B2A1E;
    margin: 10px 0px;
    text-align: center;
}

.quote-icon-wrapper {
    margin-bottom: 20px;
    align-self: flex-start;
    width: 100%;
    text-align: left;
}

.quote-icon-wrapper img {
    width: 100px;
}

.founder-text p {
    font-family: var(--font-body);
    line-height: 1.6;
    color: #555;
    margin-bottom: var(--space-4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Image Side */
.founder-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align to bottom */
    width: 100%;
    max-width: 600px;
    margin-bottom: -5px;
    /* Fix any gap at bottom */
}

.founder-img {
    width: 100%;
    height: auto;
    display: block;
    /* max-height: 600px; */
    /* Optional constraint */
    object-fit: contain;
}

/* Desktop Layout */
@media (min-width: 1024px) {
    .founder-note-container {
        flex-direction: row;
        align-items: center;
        /* Vertically center content */
        justify-content: space-between;
        text-align: left;
        gap: var(--space-20);
        padding-bottom: 0;
    }

    .founder-content {
        align-items: center;
        text-align: center;
        flex: 1.2;
    }

    .founder-text p {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .founder-image-wrapper {
        flex: 1;
        justify-content: flex-end;
    }
}


/* /-------------------------------------------------------------------------/ */
/*                       STAY CLOSE TO CALM SECTION                            */
/* /-------------------------------------------------------------------------/ */
.stay-close-section {
    /* margin-bottom: var(--space-20); */
    background-color: #FEF8F4;
    /* Or match surrounding bg */
}

.stay-close-container {
    max-width: var(--container-xl);
}

.stay-close-bg-wrapper {
    position: relative;
    width: 100%;
    border-radius: 20px;
    /* Removed overflow: hidden to allow side images to overlap */
    /* Allow side images to pop out if needed, but mockup shows them contained or overlapping border. If overlapping, use visible. If contained inside a box, use hidden. Mockup looks like they overlap the banner. */
    /* Actually mockup shows them 'inside' the banner area usually, or popping out. Let's assume contained for now to be safe with layout, or adjust if they need to float out. Wait, mockup shows white border, they look like polaroids thrown on top. */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #3B2A1E;
}

.stay-close-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* Apply rounded corners directly to the background image */
}

.stay-close-content {
    position: relative;
    z-index: 3;
    max-width: 600px;
    padding: 40px 20px;
}

.stay-close-title {
    font-family: 'Roxborough CF', serif;
    font-size: 2.5rem;
    color: #3B2A1E;
    margin-bottom: 20px;
}

.stay-close-description {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #3B2A1E;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Button */
.btn-stay-close {
    display: inline-flex;
    align-items: center;
    background-color: #A06833;
    color: #FFF;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-stay-close:hover {
    background-color: #8c5a2b;
    color: #fff;
}

.btn-stay-close img {
    margin-left: 10px;
    filter: brightness(0) invert(1);
    /* Make arrow white */
    transition: transform 0.3s ease;
}

.btn-stay-close:hover img {
    transform: translateX(4px);
}

/* Side Images (Polaroid style) */
.side-image-wrapper {
    position: absolute;
    z-index: 2;
    border-radius: 4px;
    /* Base size */
    transition: transform 0.3s ease;
}

.side-image-wrapper img {
    width: 160px;
    display: block;
    border: 8px solid #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(1, 1, 1, 0.2);
}

.side-1-img {
    transform: rotate(-20deg);
}

.side-2-img {
    transform: rotate(30deg);
}

.side-1 {
    top: -10%;
    left: 5%;
    margin-top: -100px;
}

.side-2 {
    bottom: -10%;
    right: 5%;
    margin-bottom: -130px;
}



/* Responsive */
@media (max-width: 768px) {
    .stay-close-section {
        padding: var(--space-10) 0;
    }

    .stay-close-bg-wrapper {
        flex-direction: column;
        min-height: auto;
        padding: 40px 0;
    }

    .stay-close-bg {
        /* On mobile, maybe we just let it cover or serve as bg. */
        border-radius: 12px;
    }

    .stay-close-title {
        font-size: 1.8rem;
    }

    .side-image-wrapper {
        /* On mobile, hide or make smaller */
        width: 100px;
        opacity: 0.8;
    }

    .side-1 {
        top: 0;
        left: 0;
        transform: translate(-10%, -10%) rotate(-10deg);
        display: none;
        /* Often cleaner to hide decorative overlap on small screens */
    }

    .side-2 {
        bottom: 0;
        right: 0;
        transform: translate(10%, 10%) rotate(10deg);
        display: none;
    }

    .stay-close-content {
        padding: 20px;
    }
}

@media (min-width: 1024px) {
    .side-image-wrapper {
        width: 220px;
    }

    .side-1 {
        left: 8%;
        top: 15%;
        /* Adjust based on valid space */
    }

    .side-2 {
        right: 8%;
        bottom: 15%;
    }
}


/* /-------------------------------------------------------------------------/ */
/*                           FAQ SECTION                                       */
/* /-------------------------------------------------------------------------/ */
.faq-section {
    padding: var(--space-20) 0;
    max-width: var(--container-xl);
    padding-top: 150px;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    background-color: #FEF8F4;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* Intro Column */
.faq-intro {
    flex: 0 0 35%;
    padding-left: 40px;
}

.faq-title {
    font-family: 'Roxborough CF', serif;
    font-size: 40px !important;
    line-height: 1.1;
    color: #3B2A1E;
    margin-bottom: var(--space-6);
}

.faq-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #3B2A1E;
    max-width: 300px;
    line-height: 1.5;
}

/* Accordion Column */
.faq-accordion {
    flex: 1;
}

.faq-item {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.faq-divider {
    width: 100%;
    height: 0.02rem;
    background-color: rgba(59, 42, 30, 0.03);
    margin: 10px 0;
}

.faq-item.active {
    background-color: #F8EDE9;
    /* Light highlight */
    border-bottom-color: transparent;
    border-radius: 10px;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
    cursor: pointer;
}

.faq-question h3 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #3B2A1E;
    font-weight: 500;
    margin: 0;
    padding-right: 20px;
}

.faq-icon {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-icon img {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Icon Swap Logic */
.icon-active {
    opacity: 0;
    transform: rotate(45deg);
    /* Start rotated if needed, or just fade */
}

.icon-inactive {
    opacity: 1;
}

.faq-item.active .icon-active {
    opacity: 1;
    transform: rotate(0);
}

.faq-item.active .icon-inactive {
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    opacity: 0;
    padding: 0 20px;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Adjust based on content */
    opacity: 1;
    padding-bottom: 30px;
}

.faq-answer p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Desktop Layout */
@media (min-width: 1024px) {
    .faq-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-20);
    }

    .faq-title {
        font-size: 4rem;
    }
}


/* /-------------------------------------------------------------------------/ */
/*                           MARQUEE SECTION                                   */
/* /-------------------------------------------------------------------------/ */
.marquee-section {
    width: 100%;
    overflow: hidden;
    background-color: #FEF8F4;
    /* Or match section below/above */
    padding: 40px 0 20px 0;
    display: flex;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 40s linear infinite;
    padding-left: 20px;
}

.marquee-content span {
    font-family: 'Roxborough CF', serif;
    font-size: 54px;
    font-weight: 900;
    color: #3B2A1E;
    margin-right: 20px;
}

.marquee-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 20px;
    margin-bottom: 24px;
}

.marquee-icon img {
    width: 40px;
    height: 40px;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Responsive Marquee */
@media (max-width: 768px) {
    .marquee-content span {
        font-size: 32px;
    }

    .marquee-icon img {
        width: 24px;
    }
}