/* ==========================================================================
   FATTL BRAND - MASTER STYLESHEET
   FINAL ARCHITECTURE (ALIGNED, CENTERED & FULLY OPTIMIZED)
   ========================================================================== */

/* ========================================= 
   1. GLOBAL DESIGN TOKENS 
   ========================================= */
:root {
    --fattl-green: #344a35;
    --fattl-beige: #c5a76a;
    --fattl-beige-light: #E0C9B8;
}

/* ========================================= 
   2. GLOBAL CONTAINER FIXES 
   ========================================= */
html, body {
    overflow-x: hidden !important; /* Prevents horizontal scroll bug on mobile */
    max-width: 100vw !important;
}

.s-products-list-wrapper,
.s-products-list-vertical-cards,
.swiper,
.swiper-backface-hidden {
    overflow: visible !important; 
    padding: 10px;
}

.s-user-menu-trigger {
    background-color: transparent;
}

/* ========================================= 
   3. NAVIGATION & HEADER 
   ========================================= */
.top-navbar { display: none !important; }
.bg-inherit { background-color: var(--fattl-green) !important; }
.navbar-brand img { max-height: 85px !important; transition: all 0.3s ease; }

/* Force white icons on green header */
.s-header-icons i, .s-header-icons svg path, .s-header-icons span,
.header-btn__icon, .header-cart-price, .s-cart-summary-total, 
.s-cart-summary-currency, .s-cart-summary-wrapper *, .s-header-cart-total *,
.s-cart-summary-count, .s-user-menu-login-btn, .s-user-menu-login-btn i,
.s-user-menu-login-btn svg path, .s-user-menu-avatar, 
.s-user-menu-login-btn span, .header-btn__icon svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    border-color: #ffffff !important;
}

.main-menu li.root-level > a {
    color: #ffffff !important;  
    font-size: 16px !important; 
    font-weight: 600 !important; 
}

span.s-cart-summary-count {
    background-color: var(--fattl-beige) !important;
    color: #ffffff !important;            
}

/* ========================================= 
   4. GLOBAL SECTION ALIGNMENT & TITLES 
   ========================================= */
.s-reviews-display-all-icon,
.s-reviews-display-all {
    color: var(--fattl-green);
    fill: var(--fattl-green);
}

.s-block__title, 
.s-block__title h2, 
.s-slider-block__title h2, 
.s-reviews-header, 
h1.s-reviews-header,
.s-slider-block__title-right {
    color: var(--fattl-green) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
}

/* ========================================= 
   5. DROPDOWN & MOBILE MENUS 
   ========================================= */
.main-menu .sub-menu, .main-menu ul li ul {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #eeeeee !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.main-menu .sub-menu a, .main-menu ul li ul li a {
    color: var(--fattl-green) !important;
    font-size: 13px !important;
    font-weight: 550 !important; 
    padding: 10px 20px !important;
    display: block !important;
}

.main-menu .sub-menu a:hover, .main-menu ul li ul li a:hover {
    color: white !important;
    background-color: var(--fattl-green) !important;
}

.mm-ocd__content {
    background-color: #ffffff !important;
    border-radius: 0 0 0 25px !important;
}

.mm-spn li {
    color: var(--fattl-green) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-bottom: 0.1px solid var(--fattl-green) !important;
}

@media only screen and (max-width: 1024px) {
    .mm-spn.mm-spn--light {
        background: #fff;
        color: var(--fattl-green);
    }
}

/* ========================================= 
   6. PRODUCT CARDS & BUTTONS
   ========================================= */
.s-product-card-entry {
    padding: 0.625rem;
    outline: 1px solid var(--fattl-green);
    border-radius: 1rem;
    transition: all 0.3s ease !important;
}

.s-product-card-image-cover {
    border-radius: 0.375rem !important;
}

.s-product-card-entry:hover {
    box-shadow: 0px 8px 0px var(--fattl-green) !important;
    transform: translateY(-5px) !important;   
}

.s-product-card-content-title a, .s-product-card-title a {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--fattl-green) !important;
}

.s-product-card-content-subtitle, .s-product-card-subtitle {
    font-size: 12px !important;
    color: var(--fattl-green) !important;
    margin-top: 5px !important;
}

/* Button Styling */
.s-button-btn {
    border-color: var(--fattl-green) !important;
    align-items: center !important;
    border-radius: 12rem !important;
    border-style: solid !important;
    display: inline-flex !important;
    flex: 1 1 0% !important;
    flex-direction: row-reverse !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    line-height: 1.25rem !important;
    padding: .5rem 1.5rem .625rem !important;
    transition-duration: .3s !important; /* Fixed semicolon error */
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    white-space: nowrap !important;
}

.s-button-btn:hover {
    background-color: var(--fattl-green) !important;
    opacity: 1;
    color: white !important;
}

.\text-primary {
    color: #ffffff !important;
}

/* ========================================= 
   7. PRODUCT DESCRIPTION (SMART TAGS / CHIPS)
   ========================================= */
/* Target description container for Flexbox layout */
.product__description .article--main {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow tags to wrap to next line */
    gap: 10px !important;       /* Elegant spacing between tags */
    background: transparent !important; 
    padding: 10px 0 !important;
}

/* Transform paragraphs into smart tags/chips */
.product__description .article--main p {
    background-color: transparent !important;
    border: 1px solid rgba(52, 74, 53, 0.3) !important; /* Light green border */
    color: var(--fattl-green) !important;
    padding: 8px 16px !important;
    border-radius: 7px !important; /* Soft corners */
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    width: max-content !important; /* Fit the text exactly */
    max-width: 100% !important;    /* Prevent overflow on mobile */
    line-height: 1.6 !important;
    transition: all 0.3s ease !important;
}

/* Hover effect for smart tags */
.product__description .article--main p:hover {
    border-color: var(--fattl-green) !important;
    background-color: rgba(52, 74, 53, 0.03) !important; /* Very light transparent green */
    transform: translateY(-2px) !important;
}

/* ========================================= 
   8. CART & CHECKOUT PAGE
   ========================================= */
.s-cart-coupons-coupon-button-apply {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

section.cart-item.bg-white.p-5.xs\:p-7.rounded-md.mb-5.relative {
    background-color: #fff;
    border: 0.3px solid var(--fattl-green);
}

/* ========================================= 
   9. FOOTER (Floating White Card)
   ========================================= */
.store-footer {
    position: relative !important;
    background-color: transparent !important;
    margin-top: 80px !important;
    z-index: 1 !important;
}

.store-footer::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 60% !important;
    background-color: var(--fattl-green) !important;
    z-index: -1 !important;
}

.store-footer__inner {
    background-color: #ffffff !important;
    border: 1.5px solid var(--fattl-green) !important;
    border-radius: 30px !important;
    margin: 0 20px !important;
    padding: 45px 35px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Force Green text inside Footer Card */
.store-footer__inner, .store-footer__inner h1, .store-footer__inner h2,
.store-footer__inner h3, .store-footer__inner h4, .store-footer__inner .footer-title,
.store-footer__inner p, .store-footer__inner li, .store-footer__inner li a,
.store-footer__inner span, .store-footer__inner i, .store-footer__inner .contact-info {
    color: var(--fattl-green) !important;
}

.store-footer__inner .footer-main, .store-footer__inner > .container > .flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 40px !important;
}

.store-footer__bottom p, .store-footer__bottom span, .store-footer__bottom a {
    color: var(--fattl-beige-light) !important;
}

/* ========================================= 
   10. MOBILE & RESPONSIVE ADJUSTMENTS 
   ========================================= */
@media (max-width: 767px) {
    .s-block-header a, .s-slider-block__header a, a.s-reviews-display-all {
        position: relative !important;
        left: auto !important;
        display: block !important;
        margin-top: 10px !important;
    }

    /* Fix Mobile Footer Squeeze */
    .store-footer__inner .footer-main, 
    .store-footer__inner > .container > .flex {
        flex-direction: column !important; /* Stack columns vertically */
        align-items: center !important;
        text-align: center !important;
        gap: 25px !important; 
    }
    
    .store-footer__inner {
        padding: 30px 15px !important;
        margin: 0 10px !important;
        border-radius: 20px !important; 
    }

    /* Ensure text has full width to prevent squeezing */
    .store-footer__inner > div,
    .store-footer__inner .contact-info,
    .store-footer__inner .footer-list {
        width: 100% !important;
        justify-content: center !important;
    }
}