/* =================================================================
   DABDASH SHOP COMPONENT - FLAT GREYSCALE MOBILE-FIRST DESIGN
   Totally flat, no cards, minimal greyscale aesthetic

   CSS CUSTOM PROPERTIES (for theme overrides):
   --dabdash-font-size-base: 16px (base font size for component)
   --dabdash-font-family: system fonts
   --dabdash-color-text: #333
   --dabdash-color-text-muted: #666
   --dabdash-color-border: #d0d0d0
   --dabdash-color-bg: transparent
   --dabdash-color-primary: #333
   ================================================================= */

/* Global box-sizing fix for mobile */
.dabdash-shop-component *,
.dabdash-shop-component *::before,
.dabdash-shop-component *::after {
    box-sizing: border-box !important;
}

.dabdash-shop-component {
    /* CSS Custom Properties with sensible defaults - themes can override these */
    --dabdash-font-size-base: 16px;
    --dabdash-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dabdash-color-text: #333;
    --dabdash-color-text-muted: #666;
    --dabdash-color-border: #d0d0d0;
    --dabdash-color-bg: transparent;
    --dabdash-color-primary: #333;

    /* Establish base font size to protect against theme pollution */
    font-size: var(--dabdash-font-size-base) !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    background: var(--dabdash-color-bg) !important;
    color: var(--dabdash-color-text) !important;
    font-family: var(--dabdash-font-family) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    line-height: 1.5 !important;
}

/* Make filters extend to component edges */
.dabdash-shop-component .dabdash-filters-container {
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* =================================================================
   ZONE SELECTOR STATE - MOBILE FIRST
   ================================================================= */

.dabdash-zone-selector-state {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 40vh !important;
    padding: 1rem 0 !important;
}

.dabdash-empty-state {
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 0.5rem !important;
    box-sizing: border-box !important;
}

.dabdash-empty-icon {
    font-size: 48px !important; /* Fixed px */
    margin-bottom: 2rem !important;
    opacity: 0.6 !important;
}

.dabdash-empty-state h2,
.dabdash-empty-state h3 {
    color: var(--dabdash-color-text, #333) !important;
    font-size: 24px !important; /* Fixed px to resist theme pollution */
    font-weight: 600 !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.3 !important;
}

.dabdash-empty-state p {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 16px !important; /* Fixed px to resist theme pollution */
    line-height: 1.5 !important;
    margin: 0 0 1.5rem 0 !important;
}

/* =================================================================
   MAIN SHOP INTERFACE - FLAT DESIGN
   ================================================================= */

.dabdash-shop-interface {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

/* Current Zone Display - Minimal */
.dabdash-current-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.dabdash-current-zone .zone-label {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.dabdash-current-zone .zone-name {
    color: var(--dabdash-color-text, #333) !important;
    font-weight: 600 !important;
    font-size: 16px !important; /* Fixed px to resist theme pollution */
    line-height: 1.4 !important;
}

/* =================================================================
   FILTERS SECTION - ULTRA MINIMAL MOBILE-FIRST
   ================================================================= */

.dabdash-filters-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding-bottom: 1rem !important;
}

.dabdash-filters-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.dabdash-filters-header h3 {
    color: var(--dabdash-color-text, #333) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
}

.dabdash-filters-actions {
    display: flex !important;
    gap: 0.25rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide/Show Filters Button Styling */
.dabdash-filters-actions .dabdash-btn {
    font-size: 11px !important; /* Fixed px */
    padding: 0.375rem 0.625rem !important;
    border-radius: 4px !important;
}

.dabdash-filters-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    transition: opacity 0.3s ease, max-height 0.3s ease !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Collapsed State Animation */
.dabdash-filters-form[style*="display: none"] {
    opacity: 0 !important;
    max-height: 0 !important;
    pointer-events: none !important;
}

.dabdash-filter-row {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.dabdash-filter-field {
    flex: 1 !important;
    min-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.dabdash-filter-field--compact {
    min-width: 100% !important;
}

.dabdash-filter-label {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 11px !important; /* Fixed px to resist theme pollution */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.dabdash-filter-input,
.dabdash-filter-select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem !important;
    background: #fff !important;
    border: 1px solid var(--dabdash-color-border, #d0d0d0) !important;
    border-radius: 4px !important;
    color: var(--dabdash-color-text, #333) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    font-family: inherit !important;
    transition: border-color 0.15s ease !important;
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 1.4 !important;
}

.dabdash-filter-input:focus,
.dabdash-filter-select:focus {
    outline: none !important;
    border-color: #666 !important;
}

.dabdash-filter-input::placeholder {
    color: #aaa !important;
    font-style: italic !important;
}

.dabdash-filter-select option {
    background: #fff !important;
    color: #333 !important;
    padding: 0.5rem !important;
}

/* Range Inputs */
.dabdash-range-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.dabdash-filter-input--range {
    flex: 1 !important;
    min-width: 50px !important;
    max-width: 80px !important;
}

/* Price Range Field Styling */
.dabdash-filter-field--price-range {
    min-width: 200px !important;
    flex: 0 0 auto !important;
}

.dabdash-price-range-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}

.dabdash-filter-input--price {
    flex: 1 !important;
    min-width: 70px !important;
    max-width: 90px !important;
    text-align: center !important;
}

.dabdash-price-separator {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 14px !important; /* Fixed px */
    font-weight: 500 !important;
    flex-shrink: 0 !important;
}

.dabdash-range-inputs span {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 14px !important; /* Fixed px */
    white-space: nowrap !important;
}

/* Advanced Toggle Button - Match filter action button sizing */
.dabdash-advanced-toggle {
    width: 100% !important;
    padding: 0.375rem 0.625rem !important;
    /* Match filter action buttons */
    background: #f5f5f5 !important;
    color: var(--dabdash-color-text, #333) !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 6px !important;
    font-size: 11px !important; /* Fixed px - match filter action buttons */
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: auto !important;
    /* Remove fixed height to match other buttons */
}

.dabdash-advanced-toggle:hover {
    background: #e8e8e8 !important;
    border-color: #bbb !important;
}

/* Advanced Filters Container - Remove HR and add more spacing */
.dabdash-advanced-filters {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Filter Sections */
.dabdash-filter-section {
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dabdash-filter-section-title {
    color: var(--dabdash-color-text, #333) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1.4 !important;
}

/* Checkboxes */
.dabdash-filter-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.dabdash-filter-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--dabdash-color-text, #333) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    line-height: 1.4 !important;
}

.dabdash-filter-checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

.dabdash-filter-checkbox span {
    font-size: 13px !important; /* Fixed px to resist theme pollution */
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* =================================================================
   LOADING AND ERROR STATES
   ================================================================= */

.dabdash-loading-state,
.dabdash-error-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3rem 1rem !important;
    text-align: center !important;
    min-height: 200px !important;
}

.dabdash-loading-spinner {
    width: 32px !important;
    height: 32px !important;
    border: 2px solid #f0f0f0 !important;
    border-left: 2px solid #333 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    margin-bottom: 1rem !important;
}

.dabdash-error-icon {
    font-size: 40px !important; /* Fixed px */
    margin-bottom: 1rem !important;
    opacity: 0.6 !important;
}

.dabdash-loading-state p,
.dabdash-error-state p {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    margin: 0 0 1rem 0 !important;
    line-height: 1.5 !important;
}

/* =================================================================
   PRODUCTS SECTION - SHOP LAYOUT ONLY
   ================================================================= */

.dabdash-products-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.dabdash-products-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.dabdash-products-count {
    color: var(--dabdash-color-text-muted, #666) !important;
    font-size: 14px !important; /* Fixed px to resist theme pollution */
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.dabdash-view-controls {
    display: flex !important;
    gap: 0.5rem !important;
}

/* Products Grid - Mobile First List */
.dabdash-products-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    /* Smooth fade-in transition for product grid updates */
    animation: dabdash-fadeIn 0.3s ease-in-out;
}

/* Fade-in animation for smooth product loading */
@keyframes dabdash-fadeIn {
    from {
        opacity: 0.8;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dabdash-products-grid--grid,
.dabdash-products-grid--list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* =================================================================
   PAGINATION - MINIMAL
   ================================================================= */

.dabdash-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 2rem 0 !important;
    border-top: none !important;
    margin-top: 1rem !important;
}

/* Pagination ellipsis styling */
.dabdash-pagination-ellipsis {
    padding: 0.5rem !important;
    color: #999 !important;
    user-select: none !important;
}

.dabdash-page-numbers {
    display: flex !important;
    gap: 0.25rem !important;
}

/* =================================================================
   LAZY LOADING / INFINITE SCROLL
   ================================================================= */

.dabdash-lazy-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2.5rem 1rem !important;
    gap: 1rem !important;
}

.dabdash-lazy-loading .dabdash-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #e5e5e5 !important;
    border-top-color: #333 !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}

.dabdash-lazy-loading p {
    margin: 0 !important;
    color: var(--dabdash-color-text-muted, #888) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
}

.dabdash-end-of-products {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1rem !important;
    color: var(--dabdash-color-text-muted, #999) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-top: 1px solid #eee !important;
    margin-top: 1rem !important;
}

/* =================================================================
   BUTTONS - MINIMAL FLAT GREYSCALE
   ================================================================= */

.dabdash-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    padding: 0.5rem 0.875rem !important;
    background: #f5f5f5 !important;
    color: var(--dabdash-color-text, #333) !important;
    border: 1px solid #d5d5d5 !important;
    border-radius: 6px !important;
    font-size: 12px !important; /* Fixed px to resist theme pollution */
    font-weight: 500 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    line-height: 1.4 !important;
}

.dabdash-btn:hover {
    background: #e8e8e8 !important;
    border-color: #bbb !important;
}

.dabdash-btn-primary {
    background: #333 !important;
    color: white !important;
    border-color: #333 !important;
}

.dabdash-btn-primary:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

.dabdash-btn-secondary,
.dabdash-btn-ghost {
    background: transparent !important;
    color: #666 !important;
    border-color: #d0d0d0 !important;
}

.dabdash-btn-secondary:hover,
.dabdash-btn-ghost:hover {
    background: #f8f8f8 !important;
    border-color: #999 !important;
    color: #333 !important;
}

.dabdash-btn-ghost.active {
    background: #333 !important;
    color: white !important;
    border-color: #333 !important;
}

.dabdash-btn-sm {
    padding: 0.375rem 0.625rem !important;
    font-size: 11px !important; /* Fixed px */
    border-radius: 4px !important;
}

.dabdash-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #f8f8f8 !important;
    color: #aaa !important;
    border-color: #e5e5e5 !important;
}

/* =================================================================
   FILTER CHIPS - CANNABINOIDS, EFFECTS, FLAVORS & AROMAS - MINIMAL FLAT
   ================================================================= */
.dabdash-cannabinoid-chips,
.dabdash-effects-chips,
.dabdash-flavors-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dabdash-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.5rem !important;
    background: #f5f5f5 !important;
    color: var(--dabdash-color-text-muted, #666) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    font-size: 11px !important; /* Fixed px to resist theme pollution */
    font-weight: 500 !important;
    font-family: inherit !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    line-height: 1.4 !important;
}

.dabdash-chip:hover {
    background: #e8e8e8 !important;
    border-color: #bbb !important;
    color: #333 !important;
}

.dabdash-chip--active {
    background: #333 !important;
    color: white !important;
    border-color: #333 !important;
}

.dabdash-chip--active:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
}

/* =================================================================
   TABLET RESPONSIVE (768px+) - SAVE VERTICAL SPACE
   ================================================================= */

@media (min-width: 768px) {
    .dabdash-shop-component {
        padding: 1.5rem !important;
    }

    .dabdash-filters-container {
        padding: 0 !important;
        margin-bottom: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .dabdash-filter-field {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dabdash-filter-field--compact {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dabdash-filter-field--price-range {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dabdash-filter-row {
        display: grid !important;
        grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr 1fr 1fr !important;
        gap: 0.75rem !important;
        align-items: flex-end !important;
    }

    .dabdash-filter-checkboxes {
        flex-direction: row !important;
        gap: 1rem !important;
    }

    /* Advanced filters container should span full width on tablet */
    .dabdash-advanced-filters {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .dabdash-products-grid--grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 1px !important;
        background: #f5f5f5 !important;
    }
}

/* =================================================================
   DESKTOP RESPONSIVE (1024px+) - ULTRA COMPACT VERTICAL SPACE
   ================================================================= */

@media (min-width: 1024px) {
    .dabdash-shop-component {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1rem !important;
    }

    .dabdash-filters-container {
        padding: 0 !important;
        margin-bottom: 0.75rem !important;
        border-radius: 0 !important;
        padding-bottom: 0.75rem !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .dabdash-current-zone {
        justify-content: flex-start !important;
        gap: 2rem !important;
        padding: 0.5rem 0 !important;
    }

    .dabdash-filters-header {
        justify-content: space-between !important;
        margin-bottom: 0.5rem !important;
    }

    .dabdash-filters-header h3 {
        font-size: 12px !important; /* Fixed px */
        margin: 0 !important;
    }

    .dabdash-filters-form {
        gap: 0.375rem !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 0.5rem !important;
    }

    .dabdash-filter-row {
        gap: 0.5rem !important;
        align-items: flex-end !important;
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 2fr 1.5fr 1.5fr 1.6fr 1.5fr 1fr !important;
    }

    /* Much tighter price inputs at desktop breakpoint */
    .dabdash-filter-input--price {
        min-width: 50px !important;
        max-width: 70px !important;
        padding: 0.375rem 0.25rem !important;
        font-size: 12px !important; /* Fixed px */
    }

    /* Hide number input spinners */
    .dabdash-filter-input--price::-webkit-inner-spin-button,
    .dabdash-filter-input--price::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    .dabdash-filter-input--price[type="number"] {
        -moz-appearance: textfield !important;
    }

    .dabdash-filter-field {
        gap: 0.125rem !important;
    }

    .dabdash-filter-label {
        font-size: 10px !important; /* Fixed px */
        margin-bottom: 0.125rem !important;
    }

    .dabdash-filter-input,
    .dabdash-filter-select {
        padding: 0.375rem 0.5rem !important;
        font-size: 13px !important; /* Fixed px */
        min-height: 32px !important;
        border-radius: 3px !important;
    }

    .dabdash-btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 10px !important; /* Fixed px */
        min-height: 28px !important;
    }

    .dabdash-filter-checkboxes {
        gap: 0.25rem !important;
        margin-top: 0.125rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .dabdash-filter-checkbox {
        font-size: 11px !important; /* Fixed px */
        gap: 0.25rem !important;
        padding: 0.125rem 0 !important;
        line-height: 1.2 !important;
    }

    .dabdash-filter-checkbox input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    .dabdash-filter-section {
        padding-top: 0.375rem !important;
        border-top: none !important;
        grid-column: span 1 !important;
    }

    .dabdash-filter-section-title {
        font-size: 11px !important; /* Fixed px */
        margin-bottom: 0.25rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--dabdash-color-text-muted, #666) !important;
        font-weight: 600 !important;
    }

    /* Full-width sections */
    .dabdash-filter-section:first-child {
        grid-column: 1 / -1 !important;
    }

    .dabdash-cannabinoid-chips,
    .dabdash-effects-chips,
    .dabdash-flavors-chips {
        gap: 0.25rem !important;
        margin-top: 0.25rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .dabdash-chip {
        padding: 0.1875rem 0.375rem !important;
        font-size: 10px !important; /* Fixed px */
        border-radius: 3px !important;
    }

    /* Advanced filters container should span full width */
    .dabdash-advanced-filters {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Chip sections should span full width */
    .dabdash-filter-section:has(.dabdash-cannabinoid-chips),
    .dabdash-filter-section:has(.dabdash-effects-chips),
    .dabdash-filter-section:has(.dabdash-flavors-chips) {
        grid-column: 1 / -1 !important;
    }

    .dabdash-products-header {
        justify-content: space-between !important;
        padding: 0.5rem 0 !important;
    }

    .dabdash-products-grid--grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 1rem !important;
        background: transparent !important;
    }


    /* Collapse/Expand Animation for Filters */
    .dabdash-filters-form {
        transition: all 0.3s ease !important;
        overflow: hidden !important;
    }

    /* When collapsed, hide all content inside */
    .dabdash-filters-form[style*="display: none"] {
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* =================================================================
   LARGE DESKTOP (1440px+) - MORE COLUMNS FOR WIDE SCREENS
   ================================================================= */

@media (min-width: 1440px) {
    .dabdash-products-grid--grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    }
}

/* =================================================================
   EXTRA LARGE DESKTOP (1920px+) - MAXIMUM DENSITY
   ================================================================= */

@media (min-width: 1920px) {
    .dabdash-products-grid--grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

/* =================================================================
   MOBILE EXTRA SMALL (320px-374px - iPhone SE, etc.)
   ================================================================= */

@media (max-width: 374px) {
    .dabdash-shop-component {
        padding: 0.75rem !important;
    }

    .dabdash-filters-container {
        padding: 0 !important;
        border-radius: 0 !important;
        padding-bottom: 0.75rem !important;
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .dabdash-empty-state {
        padding: 0 0.5rem !important;
    }

    .dabdash-empty-state h2,
    .dabdash-empty-state h3 {
        font-size: 20px !important; /* Fixed px */
    }

    .dabdash-filter-input,
    .dabdash-filter-select {
        padding: 0.5rem !important;
        font-size: 14px !important; /* Fixed px */
        border-radius: 4px !important;
    }


    .dabdash-filter-input--range {
        min-width: 40px !important;
        max-width: 60px !important;
    }

    .dabdash-btn {
        padding: 0.375rem 0.625rem !important;
        font-size: 10px !important; /* Fixed px */
        border-radius: 4px !important;
    }

    .dabdash-chip {
        padding: 0.1875rem 0.375rem !important;
        font-size: 10px !important; /* Fixed px */
        border-radius: 3px !important;
    }
}

/* Animation keyframes */
@keyframes spin {
    from {
        transform: rotate(0deg) !important;
    }

    to {
        transform: rotate(360deg) !important;
    }
}