/**
 * Millezo.in - Professional Responsive Homepage CSS
 * Responsive breakpoints for Desktop, Laptop, Tablet, Mobile
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ======================================== */
:root {
    /* Colors */
    --color-primary: #20533B;
    --color-primary-dark: #163d2a;
    --color-primary-light: #2d7a52;
    --color-secondary: #CB5439;
    --color-accent: #F4A261;
    --color-background: #FCF6F5;
    --color-white: #FFFFFF;
    --color-text: #333333;
    --color-text-light: #656565;
    --color-border: #E3E3E3;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;

    /* Typography */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font Sizes - Desktop (base) */
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-base: 1rem;     /* 16px */
    --fs-lg: 1.125rem;   /* 18px */
    --fs-xl: 1.25rem;    /* 20px */
    --fs-2xl: 1.5rem;    /* 24px */
    --fs-3xl: 1.875rem;  /* 30px */
    --fs-4xl: 2.25rem;   /* 36px */
    --fs-5xl: 3rem;      /* 48px */
    --fs-6xl: 3.75rem;   /* 60px */

    /* Spacing */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Container */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
/* 
   Mobile:     < 640px
   Tablet:     640px - 1023px
   Laptop:     1024px - 1279px
   Desktop:    >= 1280px
   Large Desktop: >= 1536px
*/

/* ========================================
   BASE STYLES & RESET
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-primary);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-light);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   CONTAINER & LAYOUT UTILITIES
   ======================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--space-16) 0;
}

.section-sm {
    padding: var(--space-10) 0;
}

.section-lg {
    padding: var(--space-20) 0;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.btn-accent:hover {
    background-color: #e8904e;
    border-color: #e8904e;
    color: var(--color-white);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--fs-lg);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
}

.btn-full {
    width: 100%;
}

/* ========================================
   HOMEPAGE SECTIONS - ELEMENTOR OVERRIDES
   ======================================== */

/* Features Section - Professional Card Layout */
.elementor-section[data-id="4abad17"] {
    background-color: var(--color-background) !important;
    border-bottom: 1px solid var(--color-border) !important;
    position: relative !important;
}

.elementor-section[data-id="4abad17"] > .elementor-container {
    max-width: var(--container-max) !important;
    padding: 0 var(--container-padding) !important;
}

.elementor-section[data-id="4abad17"] .elementor-widget-bfres_features_box {
    padding: var(--space-10) 0 !important;
}

/* Features Grid - fix Bootstrap row spacing */
.widget-features-box .list-vertical {
    margin-left: -12px !important;
    margin-right: -12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.widget-features-box .list-vertical > .item {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
}

/* Individual Feature Card */
.widget-features-box .item .item-inner-features {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: var(--space-8) var(--space-6) !important;
    background: var(--color-white) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-base) !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
}

.widget-features-box .item .item-inner-features::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.widget-features-box .item .item-inner-features:hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-xl) !important;
}

/* Icon Circle */
.widget-features-box .features-box-image.icon {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: var(--space-5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%) !important;
    border-radius: var(--radius-full) !important;
    color: var(--color-white) !important;
    font-size: 32px !important;
    flex-shrink: 0 !important;
    transition: all var(--transition-base) !important;
}

.widget-features-box .item .item-inner-features:hover .features-box-image.icon {
    transform: rotate(10deg) scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(32, 83, 59, 0.3) !important;
}

/* Feature Title */
.widget-features-box .features-box-content .title {
    font-size: var(--fs-lg) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin: 0 0 var(--space-3) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

/* Feature Description */
.widget-features-box .features-box-content .description {
    font-size: var(--fs-sm) !important;
    color: var(--color-text-light) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    max-width: 280px !important;
}

/* Tablet: 2 columns */
@media (max-width: 1023px) {
    .widget-features-box .item .item-inner-features {
        padding: var(--space-6) var(--space-4) !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 639px) {
    .widget-features-box .list-vertical > .item {
        margin-bottom: 16px !important;
    }
    
    .widget-features-box .item .item-inner-features {
        padding: var(--space-6) var(--space-4) !important;
    }
    
    .widget-features-box .features-box-image.icon {
        width: 64px !important;
        height: 64px !important;
        font-size: 26px !important;
        margin-bottom: var(--space-4) !important;
    }
    
    .widget-features-box .features-box-content .title {
        font-size: var(--fs-base) !important;
    }
    
    .widget-features-box .features-box-content .description {
        font-size: var(--fs-xs) !important;
    }
}

/* Image Carousel Section */
.elementor-container[data-id="18bf887"] {
    padding: var(--space-10) var(--container-padding) !important;
    max-width: var(--container-max);
    margin: 0 auto;
}

.elementor-widget-image-carousel .swiper {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.elementor-widget-image-carousel .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.elementor-widget-image-carousel .swiper-pagination-bullet {
    background: var(--color-white) !important;
    opacity: 0.6;
    width: 12px !important;
    height: 12px !important;
    margin: 0 var(--space-2) !important;
    transition: all var(--transition-fast);
}

.elementor-widget-image-carousel .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary) !important;
    transform: scale(1.2);
}

/* Categories Section */
.elementor-section[data-id="e035175"] {
    background-color: var(--color-background) !important;
    padding-top: var(--space-16) !important;
    padding-bottom: var(--space-16) !important;
}

.elementor-widget-bfres_woo_categories {
    padding: 0 var(--container-padding);
}

.elementor-widget-bfres_woo_categories .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    height: 100%;
    text-decoration: none;
}

.elementor-widget-bfres_woo_categories .category-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.elementor-widget-bfres_woo_categories .category-image {
    width: 100px;
    height: 100px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
}

.elementor-widget-bfres_woo_categories .category-image img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.elementor-widget-bfres_woo_categories .category-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    transition: color var(--transition-fast);
}

.elementor-widget-bfres_woo_categories .category-item:hover .category-title {
    color: var(--color-secondary);
}

.elementor-widget-bfres_woo_categories .category-count {
    font-size: var(--fs-xs);
    color: var(--color-text-light);
    margin-top: var(--space-1);
}

/* Banner Sections */
.elementor-section[data-id="091a826"] {
    padding: var(--space-16) 0 !important;
}

/* Center the 2-image banner row to match the boxed width used by the
   carousel and reviews sections above/below it, instead of stretching
   edge-to-edge. */
.elementor-element-2dd9ca2 > .elementor-container {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
}

/* Lock each banner's box to the source image's own aspect ratio (795:375)
   so it always fills the card completely - no cropping, no empty letterbox
   gaps - at any responsive width. */
.elementor-element-0e0ff1b .content-banner,
.elementor-element-9bd33c7 .content-banner {
    aspect-ratio: 795 / 375 !important;
    height: auto !important;
}

.elementor-widget-bfres_banner {
    height: 100% !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    transition: all var(--transition-base) !important;
}

.elementor-widget-bfres_banner:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl) !important;
}

.elementor-widget-bfres_banner .banner-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) !important;
}

.elementor-widget-bfres_banner .banner-title {
    font-size: var(--fs-3xl) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    margin-bottom: var(--space-3) !important;
    line-height: 1.1 !important;
}

.elementor-widget-bfres_banner .banner-subtitle {
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: var(--space-6) !important;
}

.elementor-widget-bfres_banner .banner-btn {
    padding: var(--space-3) var(--space-6) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    transition: all var(--transition-base) !important;
    align-self: flex-start !important;
}

.elementor-widget-bfres_banner .banner-btn:hover {
    transform: translateX(4px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Reviews Section */
.elementor-container[data-id="3ae761e"] {
    padding: var(--space-16) var(--container-padding) !important;
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile First - Base styles are for mobile (< 640px) */

/* Tablet: 640px - 1023px */
@media (min-width: 640px) {
    :root {
        --fs-5xl: 3.5rem;   /* 56px */
        --fs-4xl: 2.5rem;   /* 40px */
        --fs-3xl: 2rem;     /* 32px */
        --fs-2xl: 1.75rem;  /* 28px */
    }

    .container {
        --container-padding: 2rem;
    }

    .section {
        padding: var(--space-20) 0;
    }

    .section-lg {
        padding: var(--space-24) 0;
    }

    /* Features - 2 columns on tablet */
    .elementor-widget-bfres_features_box .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Categories - 4 columns on tablet */
    .elementor-widget-bfres_woo_categories .categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Banners - side by side on tablet */
    .elementor-section[data-id="091a826"] .elementor-row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .elementor-section[data-id="091a826"] .elementor-column {
        width: 50% !important;
    }
}

/* Laptop: 1024px - 1279px */
@media (min-width: 1024px) {
    :root {
        --fs-6xl: 4rem;     /* 64px */
        --fs-5xl: 3.75rem;  /* 60px */
        --fs-4xl: 2.75rem;  /* 44px */
        --fs-3xl: 2.25rem;  /* 36px */
    }

    .container {
        --container-padding: 2.5rem;
    }

    /* Features - 3 columns on laptop */
    .elementor-widget-bfres_features_box .features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Categories - 6 columns on laptop */
    .elementor-widget-bfres_woo_categories .categories-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    /* Carousel - show more slides */
    .elementor-widget-image-carousel .swiper {
        --slides-per-view: 1;
    }
}

/* Desktop: 1280px - 1535px */
@media (min-width: 1280px) {
    :root {
        --fs-6xl: 4.5rem;   /* 72px */
        --fs-5xl: 4rem;     /* 64px */
    }

    .container {
        --container-padding: 3rem;
    }

    .section {
        padding: var(--space-24) 0;
    }
}

/* Large Desktop: >= 1536px */
@media (min-width: 1536px) {
    :root {
        --container-max: 1440px;
    }
}

/* ========================================
   MOBILE SPECIFIC OVERRIDES (< 640px)
   ======================================== */
@media (max-width: 639px) {
    :root {
        --fs-5xl: 2.5rem;   /* 40px */
        --fs-4xl: 2rem;     /* 32px */
        --fs-3xl: 1.75rem;  /* 28px */
        --fs-2xl: 1.5rem;   /* 24px */
        --fs-xl: 1.125rem;  /* 18px */
        --fs-lg: 1rem;      /* 16px */
        --space-16: 3rem;   /* 48px */
        --space-20: 3.5rem; /* 56px */
    }

    .container {
        --container-padding: 1rem;
    }

    .section {
        padding: var(--space-12) 0;
    }

    .section-lg {
        padding: var(--space-16) 0;
    }

    /* Features - single column on mobile */
    .elementor-widget-bfres_features_box .features-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    .elementor-widget-bfres_features_box .feature-item {
        padding: var(--space-4);
    }

    .elementor-widget-bfres_features_box .feature-icon {
        width: 60px;
        height: 60px;
        font-size: var(--fs-2xl);
    }

    /* Carousel adjustments */
    .elementor-container[data-id="18bf887"] {
        padding: var(--space-6) var(--container-padding) !important;
    }

    .elementor-widget-image-carousel .swiper-pagination {
        bottom: var(--space-4) !important;
    }

    /* Categories - 2 columns on mobile */
    .elementor-widget-bfres_woo_categories .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .elementor-widget-bfres_woo_categories .category-item {
        padding: var(--space-4);
    }

    .elementor-widget-bfres_woo_categories .category-image {
        width: 70px;
        height: 70px;
    }

    .elementor-widget-bfres_woo_categories .category-title {
        font-size: var(--fs-xs);
    }

    /* Banners - stacked on mobile */
    .elementor-section[data-id="091a826"] .elementor-row {
        flex-direction: column !important;
    }

    .elementor-section[data-id="091a826"] .elementor-column {
        width: 100% !important;
        margin-bottom: var(--space-4) !important;
    }

    .elementor-section[data-id="091a826"] .elementor-column:last-child {
        margin-bottom: 0 !important;
    }

    .elementor-widget-bfres_banner {
        min-height: 200px !important;
    }

    .elementor-widget-bfres_banner .banner-title {
        font-size: var(--fs-2xl) !important;
    }

    .elementor-widget-bfres_banner .banner-subtitle {
        font-size: var(--fs-xs) !important;
    }

    .elementor-widget-bfres_banner .banner-btn {
        padding: var(--space-2) var(--space-4) !important;
        font-size: var(--fs-xs) !important;
    }

    /* Reviews */
    .elementor-container[data-id="3ae761e"] {
        padding: var(--space-10) var(--container-padding) !important;
        margin: 0 !important;
    }
}

/* ========================================
   TABLET SPECIFIC (640px - 1023px)
   ======================================== */
@media (min-width: 640px) and (max-width: 1023px) {
    .elementor-widget-bfres_features_box .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .elementor-widget-bfres_woo_categories .categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .elementor-section[data-id="091a826"] .elementor-column {
        width: 50% !important;
    }
}

/* ========================================
   LAPTOP SPECIFIC (1024px - 1279px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .elementor-widget-bfres_features_box .features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .elementor-widget-bfres_woo_categories .categories-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .elementor-widget-image-carousel,
    .elementor-widget-bfres_banner .banner-btn,
    .goal-page-loading {
        display: none !important;
    }
    
    .elementor-widget-bfres_banner {
        box-shadow: none !important;
        border: 1px solid var(--color-border) !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
/* Focus styles */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #003d1f;
        --color-secondary: #8b3a26;
        --color-border: #000;
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease forwards;
}

/* Staggered animations */
.animate-delay-1 { animation-delay: 100ms; }
.animate-delay-2 { animation-delay: 200ms; }
.animate-delay-3 { animation-delay: 300ms; }
.animate-delay-4 { animation-delay: 400ms; }
.animate-delay-5 { animation-delay: 500ms; }

/* ========================================
   ELEMENTOR SPECIFIC FIXES
   ======================================== */
/* Fix Elementor container widths */
.elementor-container[data-element_type="container"] {
    max-width: var(--container-max) !important;
    margin: 0 auto !important;
    padding-left: var(--container-padding) !important;
    padding-right: var(--container-padding) !important;
}

/* Fix stretched sections */
.elementor-section.elementor-section-stretched {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Fix column gaps */
.elementor-row {
    --elementor-column-gap: var(--space-6) !important;
}

/* Fix widget spacing */
.elementor-widget-wrap {
    padding: 0 !important;
}

/* ========================================
   HEADER & FOOTER RESPONSIVE
   ======================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-lg);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

@media (max-width: 1023px) {
    .site-header .container {
        height: 64px;
    }
}

.site-footer {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-16) 0 var(--space-8);
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

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

@media (min-width: 1024px) {
    .site-footer .footer-grid {
        grid-template-columns: 2fr repeat(3, 1fr);
    }
}

.site-footer .footer-brand {
    max-width: 300px;
}

.site-footer .footer-title {
    color: var(--color-white);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.site-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer .footer-links li {
    margin-bottom: var(--space-2);
}

.site-footer .footer-links a {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-sm);
    transition: color var(--transition-fast);
}

.site-footer .footer-links a:hover {
    color: var(--color-white);
}

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    text-align: center;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   CATEGORIES CAROUSEL FIXES
   ======================================== */
/* Fix for bfres_woo_categories slick carousel - ensure left items are visible */
.widget-categories-box.style1 .slick-carousel,
.widget-categories-box.style2 .slick-carousel {
    overflow: visible !important;
    padding: var(--space-4) 0 !important;
}

.widget-categories-box .slick-list {
    overflow: visible !important;
}

.widget-categories-box .slick-track {
    display: flex !important;
    gap: var(--space-4) !important;
}

.widget-categories-box .categories-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Ensure proper column widths for carousel */
.widget-categories-box .slick-carousel[data-items="6"] .categories-item {
    width: calc(100% / 6 - var(--space-4) * 5 / 6) !important;
}

.widget-categories-box .slick-carousel[data-items="4"] .categories-item {
    width: calc(100% / 4 - var(--space-4) * 3 / 4) !important;
}

.widget-categories-box .slick-carousel[data-items="2"] .categories-item {
    width: calc(100% / 2 - var(--space-4) / 2) !important;
}

/* Fix for grid layout */
.widget-categories-box.style1 .row,
.widget-categories-box.style2 .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: calc(var(--space-4) * -1) !important;
}

.widget-categories-box.style1 .col-md-2,
.widget-categories-box.style1 .col-sm-3,
.widget-categories-box.style1 .col-xs-6,
.widget-categories-box.style2 .col-md-2,
.widget-categories-box.style2 .col-sm-3,
.widget-categories-box.style2 .col-xs-6 {
    padding: var(--space-4) !important;
    box-sizing: border-box !important;
}

/* Ensure categories are visible and not clipped */
.widget-categories-box .categories-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.widget-categories-box .cate-image {
    flex-shrink: 0 !important;
}

.widget-categories-box .cate-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: var(--space-3) !important;
}

.widget-categories-box .cat-title {
    margin: 0 0 var(--space-2) !important;
    font-size: var(--fs-base) !important;
    line-height: 1.3 !important;
}

.widget-categories-box .product-nb {
    font-size: var(--fs-xs) !important;
    color: var(--color-text-light) !important;
}

/* Responsive column adjustments for categories carousel */
@media (max-width: 639px) {
    .widget-categories-box .slick-carousel[data-items="6"] .categories-item {
        width: calc(100% / 2 - var(--space-4) / 2) !important;
    }
    
    .widget-categories-box .slick-carousel[data-items="4"] .categories-item {
        width: calc(100% / 2 - var(--space-4) / 2) !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .widget-categories-box .slick-carousel[data-items="6"] .categories-item {
        width: calc(100% / 4 - var(--space-4) * 3 / 4) !important;
    }
    
    .widget-categories-box .slick-carousel[data-items="4"] .categories-item {
        width: calc(100% / 4 - var(--space-4) * 3 / 4) !important;
    }
}

@media (min-width: 1024px) {
    .widget-categories-box .slick-carousel[data-items="6"] .categories-item {
        width: calc(100% / 6 - var(--space-4) * 5 / 6) !important;
    }
}

/* Fix for hidden left side in carousel - ensure first items are visible */
.widget-categories-box .slick-slide {
    opacity: 1 !important;
    visibility: visible !important;
}

.widget-categories-box .slick-slide.slick-active {
    opacity: 1 !important;
}

/* Ensure arrows and dots are visible */
.widget-categories-box .slick-prev,
.widget-categories-box .slick-next {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
}

.widget-categories-box .slick-dots {
    display: flex !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    margin-top: var(--space-6) !important;
}

.widget-categories-box .slick-dots li button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--color-border) !important;
    opacity: 0.6 !important;
    transition: all var(--transition-fast) !important;
}

.widget-categories-box .slick-dots li.slick-active button {
    background: var(--color-primary) !important;
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

/* ========================================
   SEARCH FORM FIXES
   ======================================== */
/* Fix search form container - border radius, alignment, width */
.goal-search-form-inner form {
    border: 1px solid var(--color-border) !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    background-color: #fff !important;
    overflow: hidden !important;
}

/* Fix the main search input wrapper */
.goal-search-form-inner form .main-search {
    width: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Fix input field - prevent text cutoff, proper height.
   line-height is set in px (not a multiplier) to exactly match the
   content-box height (44px height - 12px*2 padding = 20px), so the text
   line box never exceeds the available space and can't get clipped
   top/bottom. */
.goal-search-form-inner form .form-control {
    border: none !important;
    border-radius: 50px !important;
    height: 44px !important;
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--color-text) !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Mobile offcanvas search box is narrower (panel capped at 85vw) and its
   placeholder "Search products here..." is the longest of the three site
   search placeholders, so it's the one most likely to run out of width on
   small phones - shrink it slightly here so it fits instead of clipping. */
#goal-mobile-menu .goal-search-form-inner form .form-control::placeholder {
    font-size: 13px !important;
}

/* Fix placeholder text color */
.goal-search-form-inner form .form-control::placeholder {
    color: #999 !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

/* Fix for mobile search in offcanvas */
#goal-mobile-menu .goal-search-form-inner form {
    border: 1px solid var(--color-border) !important;
    border-radius: 50px !important;
    background: #fff !important;
}

#goal-mobile-menu .goal-search-form-inner form .form-control {
    height: 40px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
}

/* Fix search button */
.goal-search-form-inner form .btn-search {
    border: 0 !important;
    background: transparent !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    color: var(--color-primary) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.goal-search-form-inner form .btn-search:hover {
    color: var(--color-primary-dark) !important;
}

/* Fix header mobile search form */
.header-mobile .goal-search-form {
    padding: 10px 15px !important;
}

.header-mobile .goal-search-form form {
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 50px !important;
    background: #fff !important;
    overflow: hidden !important;
}

.header-mobile .goal-search-form form .form-control {
    height: 38px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
}

.header-mobile .goal-search-form .btn {
    height: 38px !important;
    padding: 0 15px !important;
    border-radius: 0 50px 50px 0 !important;
    flex-shrink: 0 !important;
}

/* Fix search form in footer mobile */
.goal-footer-mobile .goal-search-form form {
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 50px !important;
    background: #fff !important;
    overflow: hidden !important;
}

.goal-footer-mobile .goal-search-form form .form-control {
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    border: none !important;
    background: transparent !important;
}

.goal-footer-mobile .goal-search-form .btn {
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 0 50px 50px 0 !important;
    flex-shrink: 0 !important;
}

/* Fix select category dropdown in search */
.goal-search-form .select-category {
    position: relative !important;
    flex-shrink: 0 !important;
}

.goal-search-form .select-category select {
    height: 44px !important;
    border: none !important;
    background: #f5f5f5 !important;
    padding: 0 30px 0 15px !important;
    font-size: 14px !important;
    color: var(--color-text) !important;
    border-right: 1px solid var(--color-border) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* ========================================
   DESKTOP HEADER SEARCH BAR (style1) - unified design
   Three segments in one pill: category select | text input | submit button.
   Scoped to .style1 only, so the mobile offcanvas and footer search bars
   (which have their own tuned rules above) are untouched.
   ======================================== */
.goal-search-form-inner.style1 form {
    height: 46px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--transition-base), border-color var(--transition-base) !important;
}

.goal-search-form-inner.style1 form:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Category select: stretches to the bar's full height so its background
   reaches edge to edge with no gap above/below, custom chevron replaces
   the native arrow removed by appearance:none. */
.goal-search-form-inner.style1 .select-category {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
}

.goal-search-form-inner.style1 .select-category select {
    height: 100% !important;
    width: 100px !important;
    max-width: 100px !important;
    background: #f7f7f7 !important;
    font-size: 12px !important;
    padding: 0 22px 0 12px !important;
    border-right: 1px solid var(--color-border) !important;
    transition: background var(--transition-fast) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* This header search column is only ~350px wide (the Elementor header
   container is capped at 1140px, and this is 1 of 3 equal columns) - the
   select and icon-only button are kept deliberately compact above/below
   so the input (the actually important part) keeps the rest. */
.goal-search-form-inner.style1 .main-search,
.goal-search-form-inner.style1 .twitter-typeahead,
.goal-search-form-inner.style1 .tt-input,
.goal-search-form-inner.style1 .tt-hint {
    flex: 1 1 auto !important;
    min-width: 90px !important;
    width: 100% !important;
}

.goal-search-form-inner.style1 form .form-control {
    padding-left: 16px !important;
    padding-right: 10px !important;
}

.goal-search-form-inner.style1 .select-category select:hover {
    background: #f0f0f0 !important;
}

.goal-search-form-inner.style1 .select-category::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid var(--color-text-light) !important;
    border-bottom: 2px solid var(--color-text-light) !important;
    transform: translateY(-60%) rotate(45deg) !important;
    pointer-events: none !important;
}

/* Submit button: restore the solid brand-color fill (an earlier fix had
   flattened it to transparent text, which made it disappear visually
   into the input instead of reading as a clear call-to-action) and
   stretch it to the bar's full height for a seamless capsule look. */
.goal-search-form-inner.style1 form .btn-search {
    align-self: stretch !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
    transition: background var(--transition-fast) !important;
}

.goal-search-form-inner.style1 form .btn-search:hover {
    background: var(--color-primary-dark) !important;
    color: #fff !important;
}

/* Icon-only button (no "Search" text) - text label is visually hidden but
   kept in the DOM for screen readers, freeing ~55px back for the input,
   which is the tight budget in this narrow 350px-wide header column. */
.goal-search-form-inner.style1 form .btn-search {
    width: 46px !important;
    padding: 0 !important;
    justify-content: center !important;
}

.goal-search-form-inner.style1 form .btn-search .text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.goal-search-form-inner.style1 form .btn-search::before {
    font-family: "FontAwesome" !important;
    content: "\f002" !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #fff !important;
}

/* Fix autocomplete wrapper */
.autocompleate-wrapper {
    width: 100% !important;
}

/* Fix Twitter typeahead (autocomplete) */
.goal-search-form-inner .twitter-typeahead {
    width: 100% !important;
}

/* Header mobile search fixes */
@media (max-width: 639px) {
    .header-mobile .goal-search-form form .form-control {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
    
    .goal-search-form .select-category {
        display: none !important;
    }
}