/**
 * GLITCH Products Section - CSS Styles
 * 
 * Reproduction pixel-perfect des composants Next.js + Tailwind :
 * - ProductsSection (layout container)
 * - ProductsFilters (sidebar)
 * - ProductsGrid (grille/liste)
 * - ProductsPagination
 * 
 * Variables CSS principales exposées au wrapper {{WRAPPER}}
 * Scope strict pour éviter les conflits de thème
 * Équivalents Tailwind → CSS pur
 * 
 * @package GlitchElementorComponents
 * @since 1.0.0
 */

/* ===== RESET SCOPÉ ===== */
.glitch-products-section.glitch-scope,
.glitch-products-section.glitch-scope *,
.glitch-products-section.glitch-scope *::before,
.glitch-products-section.glitch-scope *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: none !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
    list-style: none !important;
    vertical-align: baseline !important;
}

/* ===== VARIABLES CSS PRINCIPALES ===== */
.glitch-products-section.glitch-scope {
    /* Couleurs principales */
    --color-primary: #E2AD3B;
    --color-secondary: #EAC966;
    --text-white: #FFFFFF;
    --text-muted: #E1E1E1;
    --bg-dark: #020202;
    --panel-color: #1A1A1A;
    
    /* Couleurs dérivées */
    --border-primary-10: rgba(226, 173, 59, 0.1);
    --border-primary-20: rgba(226, 173, 59, 0.2);
    --border-primary-50: rgba(226, 173, 59, 0.5);
    --bg-primary-10: rgba(226, 173, 59, 0.1);
    --bg-primary-20: rgba(226, 173, 59, 0.2);
    --bg-dark-30: rgba(2, 2, 2, 0.3);
    --bg-dark-40: rgba(2, 2, 2, 0.4);
    --bg-dark-60: rgba(2, 2, 2, 0.6);
    --bg-dark-95: rgba(2, 2, 2, 0.95);
    --muted-10: rgba(225, 225, 225, 0.1);
    --muted-20: rgba(225, 225, 225, 0.2);
    --muted-30: rgba(225, 225, 225, 0.3);
    --muted-60: rgba(225, 225, 225, 0.6);
    
    /* Espacements (équivalents Tailwind) */
    --space-1: 0.25rem; /* space-1 = 4px */
    --space-2: 0.5rem;  /* space-2 = 8px */
    --space-3: 0.75rem; /* space-3 = 12px */
    --space-4: 1rem;    /* space-4 = 16px */
    --space-5: 1.25rem; /* space-5 = 20px */
    --space-6: 1.5rem;  /* space-6 = 24px */
    --space-8: 2rem;    /* space-8 = 32px */
    --space-12: 3rem;   /* space-12 = 48px */
    
    /* Rayons (équivalents Tailwind) */
    --rounded-sm: 0.125rem;    /* rounded-sm = 2px */
    --rounded: 0.25rem;        /* rounded = 4px */
    --rounded-md: 0.375rem;    /* rounded-md = 6px */
    --rounded-lg: 0.5rem;      /* rounded-lg = 8px */
    --rounded-xl: 0.75rem;     /* rounded-xl = 12px */
    --rounded-2xl: 1rem;       /* rounded-2xl = 16px */
    --rounded-3xl: 1.5rem;     /* rounded-3xl = 24px */
    --rounded-full: 9999px;    /* rounded-full */
    
    /* Ombres (équivalents Tailwind) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --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);
    --shadow-primary: 0 25px 50px -12px rgba(226, 173, 59, 0.1);
    
    /* Transitions */
    --transition-all: all 0.3s ease;
    --transition-colors: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    --transition-transform: transform 0.3s ease;
    
    /* Largeurs sidebar */
    --sidebar-width: 320px;
    
    /* Hauteurs */
    --filter-section-min-height: 3rem;
    
    /* Typographie de base */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--text-white) !important;
    background: transparent !important;
}

/* ===== CONTAINER PRINCIPAL ===== */
/* container mx-auto px-4 py-8 */
.glitch-products-section .glitch-products__container {
    display: flex !important;
    gap: var(--space-8) !important; /* gap-8 = 2rem */
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--space-8) var(--space-4) !important; /* py-8 px-4 */
    margin: 0 !important;
}

/* ===== SIDEBAR FILTRES ===== */
/* w-80 flex-shrink-0 */
.glitch-products-section .glitch-products__sidebar {
    width: var(--sidebar-width) !important;
    flex: 0 0 var(--sidebar-width) !important;
    min-width: 0 !important;
}

/* space-y-6 */
.glitch-products-section .glitch-products__filters {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-6) !important;
}

/* ===== HEADER FILTRES ===== */
/* flex items-center justify-between */
.glitch-products-section .glitch-products__filters-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--space-3) !important;
}

/* flex items-center space-x-3 */
.glitch-products-section .glitch-products__filters-title-group {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

/* w-5 h-5 text-[#E2AD3B] */
.glitch-products-section .glitch-products__filters-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: var(--color-primary) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* text-xl font-black text-white */
.glitch-products-section .glitch-products__filters-title {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: var(--text-white) !important;
    margin: 0 !important;
}

/* bg-[#E2AD3B] text-[#020202] text-xs font-black px-2 py-1 rounded-full */
.glitch-products-section .glitch-products__filters-count {
    background-color: var(--color-primary) !important;
    color: var(--bg-dark) !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: var(--rounded-full) !important;
    min-width: 1.5rem !important;
    text-align: center !important;
    display: none !important; /* Caché si count = 0 */
}

.glitch-products-section .glitch-products__filters-count:not([data-count="0"]) {
    display: inline-block !important;
}

/* flex items-center space-x-2 */
.glitch-products-section .glitch-products__filters-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* ===== SECTION FILTRES ===== */
/* space-y-4 p-4 bg-[#020202]/30 rounded-2xl border border-[#E1E1E1]/10 */
.glitch-products-section .glitch-products__filter-section {
    padding: var(--space-4) !important;
    background: var(--bg-dark-30) !important;
    border-radius: var(--rounded-2xl) !important;
    border: 1px solid var(--muted-10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* flex items-center justify-between w-full text-left */
.glitch-products-section .glitch-products__filter-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: var(--transition-colors) !important;
}

.glitch-products-section .glitch-products__filter-toggle:hover .glitch-products__filter-section-title {
    color: var(--color-primary) !important;
}

/* text-white font-black */
.glitch-products-section .glitch-products__filter-section-title {
    font-size: 1rem !important;
    font-weight: 900 !important;
    color: var(--text-white) !important;
    transition: var(--transition-colors) !important;
    margin-bottom: var(--space-2) !important;
}

/* w-4 h-4 text-[#E2AD3B] */
.glitch-products-section .glitch-products__chevron {
    width: 1rem !important;
    height: 1rem !important;
    color: var(--color-primary) !important;
    transition: var(--transition-transform) !important;
}

.glitch-products-section .glitch-products__filter-content--collapsed .glitch-products__chevron {
    transform: rotate(-90deg) !important;
}

/* Contenu des filtres */
.glitch-products-section .glitch-products__filter-content {
    margin-top: var(--space-3) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.glitch-products-section .glitch-products__filter-content--collapsed {
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
}

.glitch-products-section .glitch-products__filter-content--expanded {
    max-height: 1000px !important;
    opacity: 1 !important;
}

/* ===== VIEW MODE & SORT ===== */
.glitch-products-section .glitch-products__view-sort {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
}

/* View Mode */
.glitch-products-section .glitch-products__view-mode {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.glitch-products-section .glitch-products__label {
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    color: var(--text-muted) !important;
}

.glitch-products-section .glitch-products__view-buttons {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* Button size="sm" */
.glitch-products-section .glitch-products__view-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: var(--rounded) !important;
    border: none !important;
    background: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
}

.glitch-products-section .glitch-products__view-btn:hover {
    color: var(--text-white) !important;
    background: var(--muted-10) !important;
}

.glitch-products-section .glitch-products__view-btn--active {
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
}

.glitch-products-section .glitch-products__view-icon {
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Sort Options */
.glitch-products-section .glitch-products__sort {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-2) !important;
}

.glitch-products-section .glitch-products__sort-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

/* variant="ghost" size="sm" */
.glitch-products-section .glitch-products__sort-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--rounded) !important;
    border: none !important;
    background: none !important;
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
    gap: 0.5rem !important;
}

.glitch-products-section .glitch-products__sort-btn:hover {
    color: var(--text-white) !important;
    background: var(--muted-10) !important;
}

.glitch-products-section .glitch-products__sort-btn--active {
    background: var(--bg-primary-20) !important;
    color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__sort-btn i {
    width: 1rem !important;
    height: 1rem !important;
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ===== OPTIONS FILTRES ===== */
.glitch-products-section .glitch-products__filter-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

/* Button filter option */
.glitch-products-section .glitch-products__filter-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--rounded) !important;
    border: none !important;
    background: none !important;
    color: var(--text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
}

.glitch-products-section .glitch-products__filter-option:hover {
    color: var(--text-white) !important;
    background: var(--muted-10) !important;
}

.glitch-products-section .glitch-products__filter-option--active {
    background: var(--bg-primary-20) !important;
    color: var(--color-primary) !important;
}

/* ===== FILTRE PRIX (SLIDER) ===== */
.glitch-products-section .glitch-products__price-slider {
    position: relative !important;
    padding: var(--space-6) 0 var(--space-4) 0 !important;
    margin-top: var(--space-3) !important;
}

.glitch-products-section .glitch-products__price-range {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0.25rem !important;
    background: var(--muted-20) !important;
    border-radius: var(--rounded-full) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.glitch-products-section .glitch-products__price-range::-webkit-slider-thumb {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: var(--rounded-full) !important;
    background: var(--color-primary) !important;
    cursor: pointer !important;
    border: 2px solid var(--text-white) !important;
    box-shadow: var(--shadow-md) !important;
}

.glitch-products-section .glitch-products__price-range::-moz-range-thumb {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-radius: var(--rounded-full) !important;
    background: var(--color-primary) !important;
    cursor: pointer !important;
    border: 2px solid var(--text-white) !important;
    box-shadow: var(--shadow-md) !important;
}

.glitch-products-section .glitch-products__price-range--max {
    z-index: 2 !important;
}

.glitch-products-section .glitch-products__price-values {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: var(--space-4) !important;
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
}

/* ===== FILTRE COULEURS (SWATCHES) ===== */
/* grid grid-cols-4 gap-3 */
.glitch-products-section .glitch-products__color-swatches {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.75rem !important;
}

/* w-8 h-8 rounded-full border-2 transition-all duration-200 */
.glitch-products-section .glitch-products__color-swatch {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: var(--rounded-full) !important;
    border: 2px solid var(--muted-30) !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
    position: relative !important;
}

.glitch-products-section .glitch-products__color-swatch:hover {
    border-color: var(--border-primary-50) !important;
}

.glitch-products-section .glitch-products__color-swatch--active {
    border-color: var(--color-primary) !important;
    transform: scale(1.1) !important;
}

/* ===== CHECKBOXES ===== */
.glitch-products-section .glitch-products__filter-checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.glitch-products-section .glitch-products__checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    cursor: pointer !important;
}

.glitch-products-section .glitch-products__checkbox-input {
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid var(--muted-30) !important;
    border-radius: var(--rounded-sm) !important;
    background: none !important;
    cursor: pointer !important;
    position: relative !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.glitch-products-section .glitch-products__checkbox-input:checked {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__checkbox-input:checked::before {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--bg-dark) !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
}

.glitch-products-section .glitch-products__checkbox-label {
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: var(--transition-colors) !important;
}

.glitch-products-section .glitch-products__checkbox:hover .glitch-products__checkbox-label {
    color: var(--text-white) !important;
}

/* ===== CONTENU PRINCIPAL ===== */
/* flex-1 */
.glitch-products-section .glitch-products__main {
    flex: 1 !important;
    min-width: 0 !important;
}

/* ===== HEADER RÉSULTATS ===== */
/* flex items-center justify-between */
.glitch-products-section .glitch-products__results-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: var(--space-6) !important;
}

.glitch-products-section .glitch-products__results-info {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
}

/* text-[#E1E1E1] */
.glitch-products-section .glitch-products__results-count {
    font-size: 1rem !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
}

/* text-white font-black */
.glitch-products-section .glitch-products__count-number {
    color: var(--text-white) !important;
    font-weight: 900 !important;
}

/* ===== GRILLE PRODUITS ===== */
/* grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 */
.glitch-products-section .glitch-products__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-6) !important;
}

/* Vue liste */
.glitch-products-section .glitch-products__grid[data-view="list"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
}

/* ===== CARTES PRODUITS ===== */
/* group relative */
.glitch-products-section .glitch-products__card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: var(--rounded-3xl) !important;
    background: linear-gradient(to bottom, var(--bg-dark-40), var(--bg-dark-60)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--muted-10) !important;
    transition: var(--transition-all) !important;
    cursor: pointer !important;
}

.glitch-products-section .glitch-products__card:hover {
    border-color: var(--border-primary-50) !important;
    box-shadow: var(--shadow-2xl), var(--shadow-primary) !important;
    transform: translateY(-2px) !important;
}

/* Vue liste */
.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card {
    flex-direction: row !important;
    border-radius: var(--rounded-2xl) !important;
}

/* ===== IMAGE CONTAINER ===== */
/* relative aspect-[3/4] overflow-hidden */
.glitch-products-section .glitch-products__card-image-container {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

.glitch-products-section .glitch-products__card-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3/4 !important;
    overflow: hidden !important;
}

.glitch-products-section .glitch-products__card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.7s ease !important;
}

.glitch-products-section .glitch-products__card:hover .glitch-products__card-img {
    transform: scale(1.1) !important;
}

/* Vue liste - image fixe */
.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-image-container {
    width: 12rem !important; /* w-48 = 192px */
    flex-shrink: 0 !important;
}

.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-image {
    width: 12rem !important;
    height: 12rem !important; /* h-48 = 192px */
    aspect-ratio: 1/1 !important;
}

/* ===== HOVER OVERLAY ===== */
/* absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center space-x-4 */
.glitch-products-section .glitch-products__card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    opacity: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-4) !important;
    transition: opacity 0.3s ease !important;
    z-index: 10 !important;
}

.glitch-products-section .glitch-products__card:hover .glitch-products__card-overlay {
    opacity: 1 !important;
}

.glitch-products-section .glitch-products__card-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-4) !important;
}

/* size="icon" */
.glitch-products-section .glitch-products__action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: var(--rounded-full) !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
    transform: scale(0) !important;
}

.glitch-products-section .glitch-products__card:hover .glitch-products__action-btn {
    transform: scale(1) !important;
}

.glitch-products-section .glitch-products__action-btn--view {
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
    transition-delay: 0.1s !important;
}

.glitch-products-section .glitch-products__action-btn--view:hover {
    background: rgba(226, 173, 59, 0.8) !important;
}

.glitch-products-section .glitch-products__action-btn--cart {
    background: var(--color-secondary) !important;
    color: var(--bg-dark) !important;
    transition-delay: 0.2s !important;
}

.glitch-products-section .glitch-products__action-btn--cart:hover {
    background: rgba(234, 201, 102, 0.8) !important;
}

.glitch-products-section .glitch-products__action-btn--like {
    background: transparent !important;
    border: 2px solid var(--text-white) !important;
    color: var(--text-white) !important;
    transition-delay: 0.3s !important;
}

.glitch-products-section .glitch-products__action-btn--like:hover {
    background: var(--text-white) !important;
    color: var(--bg-dark) !important;
}

.glitch-products-section .glitch-products__action-btn--like--active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-white) !important;
}

.glitch-products-section .glitch-products__action-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ===== BADGES ===== */
.glitch-products-section .glitch-products__badge {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--rounded-full) !important;
    font-size: 0.875rem !important;
    font-weight: 900 !important;
    z-index: 5 !important;
}

/* Promo badge - top-4 left-4 */
.glitch-products-section .glitch-products__badge--promo {
    top: 1rem !important;
    left: 1rem !important;
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
}

/* New badge - top-4 right-4 */
.glitch-products-section .glitch-products__badge--new {
    top: 1rem !important;
    right: 1rem !important;
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
}

/* Stock badge - bottom-4 left-4 */
.glitch-products-section .glitch-products__badge--stock {
    bottom: 1rem !important;
    left: 1rem !important;
    background: rgba(225, 225, 225, 0.9) !important;
    color: var(--bg-dark) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.glitch-products-section .glitch-products__badge-icon {
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ===== CONTENU CARTE ===== */
/* p-6 space-y-4 */
.glitch-products-section .glitch-products__card-content {
    padding: var(--space-6) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
    flex: 1 !important;
}

/* Vue liste */
.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-content {
    justify-content: space-between !important;
}

/* text-[#E2AD3B] text-sm font-light italic */
.glitch-products-section .glitch-products__card-category {
    font-size: 0.875rem !important;
    font-weight: 300 !important;
    font-style: italic !important;
    color: var(--color-primary) !important;
}

/* text-white font-black text-lg group-hover:text-[#E2AD3B] transition-colors duration-300 line-clamp-2 */
.glitch-products-section .glitch-products__card-title {
    font-size: 1.125rem !important;
    font-weight: 900 !important;
    color: var(--text-white) !important;
    transition: var(--transition-colors) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.glitch-products-section .glitch-products__card:hover .glitch-products__card-title {
    color: var(--color-primary) !important;
}

/* Liens sur les éléments du produit */
.glitch-products-section .glitch-products__card-image-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.glitch-products-section .glitch-products__card-link {
    text-decoration: none !important;
    color: inherit !important;
    transition: var(--transition-colors) !important;
}

.glitch-products-section .glitch-products__card-link:hover {
    color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__card-description-link {
    text-decoration: none !important;
    color: inherit !important;
    transition: var(--transition-colors) !important;
}

.glitch-products-section .glitch-products__card-description-link:hover {
    color: var(--text-white) !important;
}

.glitch-products-section .glitch-products__card-price-link {
    text-decoration: none !important;
    color: inherit !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    transition: var(--transition-colors) !important;
}

.glitch-products-section .glitch-products__card-price-link:hover {
    transform: scale(1.02) !important;
}

.glitch-products-section .glitch-products__card-link {
    color: inherit !important;
    text-decoration: none !important;
}

/* text-[#E1E1E1] text-sm line-clamp-1 */
.glitch-products-section .glitch-products__card-description {
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ===== PRIX ===== */
.glitch-products-section .glitch-products__card-price-container {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    flex-wrap: wrap !important;
}

/* Vue liste - layout différent */
.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-price-container {
    align-items: flex-start !important;
    gap: var(--space-4) !important;
}

/* text-[#E1E1E1]/60 line-through text-sm */
.glitch-products-section .glitch-products__card-price-original {
    font-size: 0.875rem !important;
    color: var(--muted-60) !important;
    text-decoration: line-through !important;
}

/* Vue liste */
.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-price-original {
    font-size: 1.125rem !important;
}

/* text-[#E2AD3B] font-black text-xl */
.glitch-products-section .glitch-products__card-price {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: var(--color-primary) !important;
}

/* Vue liste */
.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-price {
    font-size: 1.5rem !important;
}

/* Stock status - liste seulement */
.glitch-products-section .glitch-products__card-stock {
    font-size: 0.875rem !important;
    font-weight: 900 !important;
}

.glitch-products-section .glitch-products__card-stock--in {
    color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__card-stock--out {
    color: var(--text-muted) !important;
}

/* ===== CTA BOUTONS ===== */
.glitch-products-section .glitch-products__card-cta {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

/* ===== BOUTONS GÉNÉRIQUES ===== */
.glitch-products-section .glitch-products__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--rounded-lg) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
    border: none !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
}

/* Primary Button */
.glitch-products-section .glitch-products__btn--primary {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
    color: var(--bg-dark) !important;
}

.glitch-products-section .glitch-products__btn--primary:hover {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary)) !important;
    transform: scale(1.05) !important;
}

/* Outline Button */
.glitch-products-section .glitch-products__btn--outline {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__btn--outline:hover {
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
}

/* Ghost Button */
.glitch-products-section .glitch-products__btn--ghost {
    background: transparent !important;
    color: var(--text-muted) !important;
}

.glitch-products-section .glitch-products__btn--ghost:hover {
    color: var(--text-white) !important;
    background: var(--muted-10) !important;
}

/* Disabled Button */
.glitch-products-section .glitch-products__btn--disabled {
    background: var(--muted-30) !important;
    color: var(--muted-60) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.glitch-products-section .glitch-products__btn--disabled:hover {
    transform: none !important;
}

/* Sizes */
.glitch-products-section .glitch-products__btn--sm {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
}

.glitch-products-section .glitch-products__btn--full {
    width: 100% !important;
}

.glitch-products-section .glitch-products__btn--icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
}

.glitch-products-section .glitch-products__btn-icon {
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ===== ÉLÉMENTS MASQUÉS SELON LA VUE ===== */
.glitch-products-section .glitch-products__list-only {
    display: none !important;
}

.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__list-only {
    display: block !important;
}

.glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-overlay {
    display: none !important;
}

/* ===== EMPTY STATE ===== */
/* text-center py-16 */
.glitch-products-section .glitch-products__empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 4rem 1rem !important;
    gap: var(--space-6) !important;
    min-height: 400px !important;
    width: 100% !important;
    grid-column: 1 / -1 !important; /* Prend toute la largeur de la grille */
}

/* w-24 h-24 bg-[#020202]/50 rounded-full flex items-center justify-center mx-auto mb-6 */
.glitch-products-section .glitch-products__empty-icon {
    width: 6rem !important;
    height: 6rem !important;
    background: var(--bg-dark-40) !important;
    border-radius: var(--rounded-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.glitch-products-section .glitch-products__empty-icon-svg {
    width: 3rem !important;
    height: 3rem !important;
    color: var(--muted-60) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* text-2xl font-black text-white mb-4 */
.glitch-products-section .glitch-products__empty-title {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    color: var(--text-white) !important;
    margin: 0 !important;
}

/* text-[#E1E1E1] mb-6 */
.glitch-products-section .glitch-products__empty-text {
    font-size: 1rem !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ===== PAGINATION ===== */
/* flex items-center justify-center space-x-2 mt-12 */
.glitch-products-section .glitch-products__pagination {
    margin-top: var(--space-12) !important;
}

.glitch-products-section .glitch-products__pagination-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
}

.glitch-products-section .glitch-products__pagination-pages {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

/* Boutons pagination */
.glitch-products-section .glitch-products__pagination-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background: var(--panel-color) !important;
    border: 1px solid var(--muted-20) !important;
    border-radius: var(--rounded-2xl) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
}

.glitch-products-section .glitch-products__pagination-btn:hover:not(:disabled) {
    border-color: var(--border-primary-50) !important;
    color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__pagination-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.glitch-products-section .glitch-products__pagination-btn--active {
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
    border-color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__pagination-btn--page {
    min-width: 2.5rem !important;
    padding: 0.5rem !important;
}

.glitch-products-section .glitch-products__pagination-text {
    font-size: 0.875rem !important;
}

.glitch-products-section .glitch-products__pagination-dots {
    padding: 0.5rem 0.75rem !important;
    color: var(--text-muted) !important;
}

.glitch-products-section .glitch-products__pagination-info {
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
    margin-left: var(--space-6) !important;
}

/* ===== BOUTONS SHOW/HIDE FILTERS ===== */
.glitch-products-section .glitch-products__show-filters,
.glitch-products-section .glitch-products__hide-filters {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: var(--rounded) !important;
    cursor: pointer !important;
    transition: var(--transition-all) !important;
}

.glitch-products-section .glitch-products__show-filters {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.glitch-products-section .glitch-products__show-filters:hover {
    background: var(--color-primary) !important;
    color: var(--bg-dark) !important;
}

.glitch-products-section .glitch-products__hide-filters,
.glitch-products-section .glitch-products__clear-filters {
    background: transparent !important;
    border: none !important;
    color: var(--text-muted) !important;
}

.glitch-products-section .glitch-products__hide-filters:hover,
.glitch-products-section .glitch-products__clear-filters:hover {
    color: var(--text-white) !important;
    background: var(--muted-10) !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
    .glitch-products-section .glitch-products__container {
        flex-direction: column !important;
        gap: var(--space-6) !important;
    }
    
    .glitch-products-section .glitch-products__sidebar {
        width: 100% !important;
        flex: none !important;
    }
    
    .glitch-products-section .glitch-products__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .glitch-products-section .glitch-products__pagination-info {
        margin-left: 0 !important;
        margin-top: var(--space-4) !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .glitch-products-section .glitch-products__container {
        padding: var(--space-4) var(--space-2) !important;
        gap: var(--space-4) !important;
    }
    
    .glitch-products-section .glitch-products__grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }
    
    .glitch-products-section .glitch-products__filters-header {
        flex-wrap: wrap !important;
        gap: var(--space-2) !important;
    }
    
    .glitch-products-section .glitch-products__filters-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .glitch-products-section .glitch-products__results-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-3) !important;
    }
    
    .glitch-products-section .glitch-products__pagination-container {
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }
    
    .glitch-products-section .glitch-products__pagination-text {
        display: none !important;
    }
    
    .glitch-products-section .glitch-products__card-content {
        padding: var(--space-4) !important;
    }
    
    .glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card {
        flex-direction: column !important;
    }
    
    .glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-image-container {
        width: 100% !important;
    }
    
    .glitch-products-section .glitch-products__grid[data-view="list"] .glitch-products__card-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
    }
}

/* ===== ÉTATS FOCUS POUR ACCESSIBILITÉ ===== */
.glitch-products-section .glitch-products__btn:focus,
.glitch-products-section .glitch-products__filter-toggle:focus,
.glitch-products-section .glitch-products__filter-option:focus,
.glitch-products-section .glitch-products__sort-btn:focus,
.glitch-products-section .glitch-products__view-btn:focus,
.glitch-products-section .glitch-products__action-btn:focus,
.glitch-products-section .glitch-products__pagination-btn:focus,
.glitch-products-section .glitch-products__color-swatch:focus,
.glitch-products-section .glitch-products__checkbox-input:focus {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}

/* ===== ANIMATIONS AVANCÉES ===== */
.glitch-products-section .glitch-products__card {
    animation: fadeInUp 0.6s ease-out !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

.glitch-products-section .glitch-products__filter-content {
    will-change: max-height, opacity !important;
}

/* ===== LOADING STATES ===== */
.glitch-products-section .glitch-products__loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--space-12) !important;
    color: var(--text-muted) !important;
}

.glitch-products-section .glitch-products__spinner {
    width: 2rem !important;
    height: 2rem !important;
    border: 2px solid var(--muted-20) !important;
    border-top: 2px solid var(--color-primary) !important;
    border-radius: var(--rounded-full) !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

/* ===== MOBILE FILTERS BEHAVIOR ===== */
@media (max-width: 768px) {
    /* Mobile: Masquer la sidebar par défaut */
    .glitch-products-section .glitch-products__sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: var(--bg-dark) !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        padding: var(--space-6) var(--space-4) !important;
        border-right: 2px solid var(--color-primary) !important;
    }
    
    /* Sidebar visible en mobile */
    .glitch-products-section .glitch-products__sidebar--mobile-visible {
        left: 0 !important;
    }
    
    /* Overlay sombre derrière la sidebar */
    .glitch-products-section .glitch-products__mobile-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.7) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    .glitch-products-section .glitch-products__mobile-overlay--visible {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Bouton fermer en mobile */
    .glitch-products-section .glitch-products__mobile-close {
        position: absolute !important;
        top: var(--space-4) !important;
        right: var(--space-4) !important;
        background: var(--color-primary) !important;
        color: var(--bg-dark) !important;
        border: none !important;
        border-radius: var(--rounded-full) !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        transition: var(--transition-all) !important;
    }
    
    .glitch-products-section .glitch-products__mobile-close:hover {
        background: var(--color-secondary) !important;
        transform: scale(1.1) !important;
    }
    
    /* Titre en mobile */
    .glitch-products-section .glitch-products__sidebar-title {
        font-size: 1.5rem !important;
        font-weight: 900 !important;
        color: var(--text-white) !important;
        margin-bottom: var(--space-6) !important;
        padding-right: var(--space-12) !important; /* Espace pour le bouton fermer */
    }
    
    /* Bouton Filtre mobile dans le header */
    .glitch-products-section .glitch-products__mobile-filters-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: var(--space-2) !important;
        background: var(--color-primary) !important;
        color: var(--bg-dark) !important;
        border: none !important;
        border-radius: var(--rounded-lg) !important;
        padding: var(--space-3) var(--space-4) !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: var(--transition-all) !important;
        font-size: 0.875rem !important;
    }
    
    .glitch-products-section .glitch-products__mobile-filters-btn:hover {
        background: var(--color-secondary) !important;
        transform: translateY(-1px) !important;
    }
    
    .glitch-products-section .glitch-products__mobile-filters-btn .glitch-products__mobile-filters-icon {
        width: 1rem !important;
        height: 1rem !important;
    }
    
    /* Masquer les éléments desktop en mobile */
    .glitch-products-section .glitch-products__show-filters,
    .glitch-products-section .glitch-products__hide-filters,
    .glitch-products-section .glitch-products__filters-header {
        display: none !important;
    }
    
    /* Afficher les éléments mobile uniquement en mobile */
    .glitch-products-section .glitch-products__mobile-filters-btn {
        display: inline-flex !important;
    }
    
    .glitch-products-section .glitch-products__sidebar-title,
    .glitch-products-section .glitch-products__mobile-close {
        display: block !important;
    }
    
    /* Ajuster le main content en mobile */
    .glitch-products-section .glitch-products__main {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Éviter le scroll du body quand la sidebar est ouverte */
    body.glitch-mobile-filters-open {
        overflow: hidden !important;
    }
}

/* Masquer les éléments mobile sur desktop */
@media (min-width: 769px) {
    .glitch-products-section .glitch-products__mobile-filters-btn,
    .glitch-products-section .glitch-products__sidebar-title,
    .glitch-products-section .glitch-products__mobile-close,
    .glitch-products-section .glitch-products__mobile-overlay {
        display: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .glitch-products-section .glitch-products__filters,
    .glitch-products-section .glitch-products__pagination {
        display: none !important;
    }
    
    .glitch-products-section .glitch-products__container {
        flex-direction: column !important;
    }
    
    .glitch-products-section .glitch-products__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
}