/* Hide scrollbar for category nav */
.category-nav::-webkit-scrollbar {
        display: none;
    }

    .category-nav {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Smooth transitions */
    .hero-transition {
        transition: transform 0.3s ease-out;
    }
    /* Inline only the CSS needed for the LCP element */
    .text-sm { font-size: 0.875rem; }
    /* .md\:text-md { font-size: 1rem; } */
    .text-\[\#6E7D89\] { color: #6E7D89; }
    /* Add other critical styles */

/* Smart Sticky Sidebar - Clean CSS-only Implementation */
@media (min-width: 768px) {
    .smart-sticky-sidebar {
        position: sticky !important;
        top: 20px !important;
        align-self: flex-start;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overflow-x: hidden;
        /* Maintain fixed width when sticky - use flex basis */
        flex: 0 0 240px !important; /* Don't grow, don't shrink, fixed at 240px */
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    /* Hide scrollbar for Chrome, Safari, Opera */
    .smart-sticky-sidebar::-webkit-scrollbar {
        display: none;
    }

    /* Override any .initial class that might disable sticky */
    .smart-sticky-sidebar.initial {
        position: sticky !important;
        top: 20px !important;
    }
}

/* Ensure product grid takes proper width alongside sticky sidebar */
@media (min-width: 768px) {
    .smart-sticky-sidebar + div {
        /* Product grid container: calc full width minus sidebar (240px) minus gap (3.5rem = 56px) */
        flex: 1;
        width: calc(100% - 240px - 3.5rem);
        max-width: calc(100% - 240px - 3.5rem);
        min-width: 0; /* Important for grid layouts */
    }
}

.filter-section {
    transition: all 0.3s ease;
}
.product-grid {
    transition: all 0.3s ease;
}


  /* Line clamp for mobile */
  @media (max-width: 767px) {
    .line-clamp-\[20\] {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 20;
    }
  }


    .woocommerce img, .woocommerce-page img{
        /* height: auto !important; */
        max-width: 100%;
    }
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.rounded-full {
    border-radius: 9999px;
}

.info-pill {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 33, 71, 0.08);
    transition: all 0.3s ease;
}
.text-muted {
    color: #6E7D89;
}

.text-primary {
    color: #002147;
}

/* Hide scrollbar for category nav */
.category-nav::-webkit-scrollbar {
    display: none;
}

.category-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth transitions */
.hero-transition {
    transition: transform 0.3s ease-out;
}

/* 
========================================
URBANFLOWERS UNIFIED BADGE SYSTEM
========================================
Design Rules:
- All badges (except press) are pills
- Consistent fonts and spacing
- Unified color system
- Press badges remain circles

Color System:
Performance: #F6EEE2 bg, #BA7E30 text
Promotion: #FDEDEA bg, #C23A2B text  
Trust/Ethical: #F5F5F5 bg, #6C8650 text + border
Customer: #F5F5F5 bg, #002147 text + border
Seasonal: #FFE4E4 bg, #C23A2B text
Press: Original logos in circles
========================================
*/

/* Base Badge Styles - Unified Pill Shape */
.badge {
    position: absolute;
    font-family: 'Mulish', sans-serif;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 9999px;
    z-index: 10;
    line-height: 1;
    transition: all 0.2s ease;
}

/* Performance Badges - TOP LEFT */
.badge-bestseller,
.badge-new-arrival,
.badge-new,
.badge-featured,
.badge-trending,
.badge-deal-week {
    top: 12px;
    left: 12px;
    background: #F6EEE2;
    color: #BA7E30;
    border: none;
}

/* Occasion Badges - TOP LEFT */
.badge-favorite,
.badge-birthday,
.badge-anniversary {
    top: 12px;
    left: 12px;
    background: #F5F5F5;
    color: #002147;
    border: 1px solid #002147;
}

/* Seasonal Badges - TOP LEFT */
.badge-seasonal {
    top: 12px;
    left: 12px;
    background: #FFE4E4;
    color: #C23A2B;
    border: none;
}

/* Promotion Badges - TOP RIGHT */
.badge-sale,
.badge-limited,
.badge-flash {
    top: 12px;
    right: 12px;
    background: #FDEDEA;
    color: #C23A2B;
    font-weight: 700;
    border: none;
}

/* In-Store Only Badge - TOP RIGHT */
.badge-instore {
    top: 12px;
    right: 12px;
    background: #F6EEE2;
    color: #BA7E30;
    font-weight: 600;
    border: none;
}

/* Trust/Ethical Badges - BOTTOM LEFT */
.badge-ethical,
.badge-chef,
.badge-local {
    bottom: 12px;
    left: 12px;
    background: #F5F5F5;
    color: #6C8650;
    border: 1px solid #6C8650;
}

/* Press Badge Styles - BOTTOM RIGHT - Larger Size */
.press-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    padding: 1.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 20;
}

.press-badge svg {
    width: 100%;
    height: 100%;
}

/* Alcohol product styles - subtle */
.alcohol-product {
    position: relative;
}

.alcohol-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.alcohol-image {
    filter: brightness(0.92) saturate(0.9);
}

/* Store link style */
.store-link {
    color: #BA7E30;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

.store-link:hover {
    text-decoration: underline;
    color: #D4974A;
}

/* Mobile responsive badges */
@media (max-width: 640px) {
    .badge {
        font-size: 9px;
        padding: 4px 10px;
    }

    .press-badge {
        width: 60px;
        height: 60px;
    }
}

/* Other existing styles */
.text-sm {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .md\:text-md {
        font-size: 1rem;
        /* example value */
        line-height: 1.5rem;
        /* example value */
    }
}

.text-\[\#6E7D89\] {
    color: #6E7D89;
}

/* Duplicate sticky rules removed - see lines 22-57 for clean implementation */

@media (max-width: 767px) {
    .line-clamp-\[20\] {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 20;
    }
}
/* FAQ section styles */
.max-w-4xl {
    max-width: 56rem !important;
}
.rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-\[\#507197\] {
    --tw-bg-opacity: 1;
    background-color: rgb(80 113 151 / var(--tw-bg-opacity, 1));
}