/* ============================================================
   SKYDO SHOP — Catégorie v2 : refonte UX
   - Hero : breadcrumb dans eyebrow + image cat
   - Sliders Best-sellers / Nouveautés (skydo-similar style single product)
   - Bouton ajouter panier bleu AJAX
   - Pagination ergonomique
   - Vue grille / liste fonctionnelle
   - Carousels swipeables au pouce
   - Responsive mobile-first
   ============================================================ */

/* Variables Skydo (cohérence single product) */
:root {
    --skydo-blue:       #0264F7;
    --skydo-blue-dark:  #024fc5;
    --skydo-dark:       #0A1A2F;
    --skydo-gray-50:    #f9fafb;
    --skydo-gray-100:   #f3f4f6;
    --skydo-gray-200:   #e5e7eb;
    --skydo-gray-500:   #6b7280;
    --skydo-gray-700:   #374151;
    --skydo-gray-800:   #1f2937;
    --skydo-gray-900:   #111827;
    --skydo-shadow:     0 1px 3px rgba(0,0,0,0.06);
    --skydo-shadow-md:  0 8px 20px rgba(0,0,0,0.10);
}

/* === Espace au-dessus du hero pour le décoller du megamenu === */
.skydo-cat-page {
    padding-top: 24px;
}

/* === Largeur du container (Lionel demande 1400px desktop) === */
.skydo-cat-container {
    max-width: 1400px !important;
    margin: 0 auto;
}

/* === Produits en rupture : visuellement grisés === */
.product-row.is-out-of-stock {
    opacity: 0.7;
}
.product-row.is-out-of-stock .product-row-image,
.product-row.is-out-of-stock .product-row-info,
.product-row.is-out-of-stock .product-row-price,
.product-row.is-out-of-stock .product-row-price-info {
    filter: grayscale(1);
}
.product-row.is-out-of-stock .product-row-stock.out {
    color: var(--skydo-gray-500) !important;
}
.product-row.is-out-of-stock .product-row-stock.out i {
    color: var(--skydo-gray-500) !important;
}
.product-row.is-out-of-stock .product-row-cart.disabled {
    background: var(--skydo-gray-100) !important;
    color: var(--skydo-gray-500) !important;
    border: 1px solid var(--skydo-gray-200) !important;
}
/* Garde les badges Promo/Top visibles (utile pour préco) */
.product-row.is-out-of-stock .product-row-badges {
    filter: none;
}

/* === "Trier par :" sur une seule ligne === */
.toolbar-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.toolbar-sort label {
    white-space: nowrap;
    flex-shrink: 0;
}

/* === Stock : sur desktop on garde le texte complet === */
.product-row-stock .stock-long { display: inline; }
.product-row-stock .stock-short { display: inline; }

/* === Sidebar filtres : sticky sur desktop (offset adapté au megamenu) === */
@media (min-width: 768px) {
    .filters-sidebar {
        position: sticky !important;
        top: 20px !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
    }
    /* Scrollbar fine si la sidebar dépasse la viewport */
    .filters-sidebar::-webkit-scrollbar { width: 6px; }
    .filters-sidebar::-webkit-scrollbar-track { background: transparent; }
    .filters-sidebar::-webkit-scrollbar-thumb { background: var(--skydo-gray-200); border-radius: 3px; }
}

/* ============================================================
   FILTRE PRIX — range slider double pouce + valeurs
   ============================================================ */
.filter-price .filter-group-content {
    padding-top: 4px;
}
.price-range-bar {
    position: relative;
    height: 36px;
    margin: 10px 8px 0;
    padding: 0 9px; /* compense le rayon du pouce pour qu'il ne dépasse pas */
}
/* Track gris : fine ligne alignée sur le centre des pouces des input range natifs */
.price-range-track {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 32%;
    transform: translateY(-50%);
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    pointer-events: none;
}
/* Fill bleu : entre les 2 thumbs (left/right définis en JS) */
.price-range-fill {
    position: absolute;
    top: 32%;
    transform: translateY(-50%);
    height: 4px;
    background: #0264F7;
    border-radius: 2px;
    pointer-events: none;
    /* left/right définis dynamiquement en JS */
}
/* Les 2 input range superposés : invisibles sauf le pouce */
.price-range-input {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100% !important;
    height: 36px !important;
    background: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    pointer-events: none; /* track invisible, on réactive pointer sur le pouce */
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    z-index: 2;
}
/* Tracks natifs : COMPLÈTEMENT transparents (sinon iOS dessine son propre track) */
.price-range-input::-webkit-slider-runnable-track {
    background: transparent !important;
    border: 0 !important;
    height: 36px;
    box-shadow: none !important;
}
.price-range-input::-moz-range-track {
    background: transparent !important;
    border: 0 !important;
    height: 36px;
}
/* Pouce blanc avec bord bleu — visible et cliquable */
.price-range-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2.5px solid #0264F7;
    box-shadow: 0 2px 6px rgba(2,100,247,0.25);
    cursor: grab;
    pointer-events: auto;
    margin-top: 0;
    transition: transform .12s, box-shadow .12s;
}
.price-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2.5px solid #0264F7;
    box-shadow: 0 2px 6px rgba(2,100,247,0.25);
    cursor: grab;
    pointer-events: auto;
    box-sizing: border-box;
}
.price-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(2,100,247,0.35);
}
.price-range-input::-webkit-slider-thumb:active { cursor: grabbing; }

.price-range-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 13px;
    color: var(--skydo-gray-800);
    font-weight: 600;
}
.price-range-values .price-sep {
    color: var(--skydo-gray-500);
    font-weight: 400;
}

/* === "Voir N de plus" pour le filtre Marques === */
.filter-option.is-collapsed-overflow { display: none; }
.filter-brands.is-expanded .filter-option.is-collapsed-overflow { display: flex; }
.filter-show-more {
    margin-top: 8px;
    background: transparent;
    border: 0;
    color: var(--skydo-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s;
}
.filter-show-more:hover { opacity: 0.8; }
.filter-show-more i { font-size: 10px; transition: transform .2s; }
.filter-brands.is-expanded .filter-show-more i { transform: rotate(180deg); }

/* ============================================================
   HERO BREADCRUMB (remplace "Catégorie" en eyebrow)
   ============================================================ */
.cat-hero-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--skydo-blue) !important;
    line-height: 1.4;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    margin-bottom: 12px;
}
.cat-hero-breadcrumb a {
    color: var(--skydo-blue);
    text-decoration: none;
    transition: color .15s;
}
.cat-hero-breadcrumb a:hover { color: var(--skydo-blue-dark); }
.cat-hero-breadcrumb .sep {
    color: #9ca3af;
    font-weight: 400;
}
.cat-hero-breadcrumb .current {
    color: var(--skydo-dark);
    text-transform: uppercase;
}

/* Masque l'ancien breadcrumb WC ailleurs si vestiges */
.skydo-cat-page .skydo-cat-breadcrumb,
.skydo-cat-page > .woocommerce-breadcrumb {
    display: none !important;
}

/* ============================================================
   HERO : alignement contenu — TOUJOURS à gauche en desktop.
   On force aussi le grid parent pour ne pas laisser un autre CSS
   le passer en flex/center implicit.
   ============================================================ */
@media (min-width: 768px) {
    .cat-hero {
        display: grid !important;
        grid-template-columns: 1fr 320px !important;
        grid-template-rows: auto !important;
        gap: 32px !important;
        align-items: center !important;
        justify-items: stretch !important;
        place-items: center stretch !important; /* center vertical, stretch horizontal */
    }
    .cat-hero-content {
        display: block !important;
        text-align: left !important;
        justify-self: start !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cat-hero-content > * {
        text-align: left !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    .cat-hero h1,
    .cat-hero-desc,
    .cat-hero-breadcrumb {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: start !important;
    }
    .cat-hero-meta {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
}

/* ============================================================
   HERO : image catégorie remplaçant illustration
   ============================================================ */
.cat-hero-image {
    flex: 0 0 280px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: var(--skydo-gray-100);
    align-self: center;
}
.cat-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   HERO BANNIÈRE (pages virtuelles : Nouveautés, Promos)
   Notre bannière est en ratio 3:2 (1200×800) → on ouvre la zone
   image et on respecte le ratio (pas de recadrage qui coupe).
   Le contenu (titre, desc, badges) reste ferme à gauche.
   ============================================================ */
.cat-hero-image--banner {
    flex: 0 0 460px;
    width: 100%;
    aspect-ratio: 3 / 2;       /* match notre WebP 1200×800 */
    max-width: 100%;
    align-self: center;
}
.cat-hero-image--banner img {
    object-fit: cover;          /* léger crop des bords si la grille étire */
}
/* La grille parent doit accommoder une image plus large.
   On garde le `1fr X` pattern, mais X passe à 460px pour ce cas. */
.cat-hero:has(.cat-hero-image--banner) {
    grid-template-columns: 1fr 460px !important;
}
/* S'assure que le contenu reste aligné à gauche (au cas où un autre style
   force un center sur de petits viewports + grille élastique). */
.cat-hero:has(.cat-hero-image--banner) .cat-hero-content {
    text-align: left;
    justify-self: start;
    width: 100%;
}

/* Tablette : la bannière passe au-dessus du titre */
@media (max-width: 1023px) {
    .cat-hero:has(.cat-hero-image--banner) {
        grid-template-columns: 1fr !important;
    }
    .cat-hero-image--banner {
        flex: none;
        max-width: 560px;
        margin: 0 auto;
    }
}

/* ============================================================
   CAROUSELS BEST-SELLERS / NOUVEAUTÉS (style skydo-similar)
   ============================================================ */
.skydo-cat-tabs {
    background: white;
    border-radius: 14px;
    padding: 28px 24px;
    margin-bottom: 20px;
    box-shadow: var(--skydo-shadow);
}
.skydo-cat-tabs .skydo-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
}
.skydo-cat-tabs .skydo-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--skydo-gray-900);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.skydo-cat-tabs .skydo-title-accent {
    width: 4px;
    height: 22px;
    background: var(--skydo-blue);
    border-radius: 2px;
    flex-shrink: 0;
}
.skydo-cat-tabs .skydo-carousel-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.skydo-cat-tabs .skydo-carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--skydo-gray-200);
    color: var(--skydo-gray-700);
    font-size: 14px;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.skydo-cat-tabs .skydo-carousel-btn:hover:not(:disabled) {
    border-color: var(--skydo-blue);
    color: var(--skydo-blue);
}
.skydo-cat-tabs .skydo-carousel-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.skydo-cat-tabs .skydo-carousel-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -6px;
    /* swipe natif tactile + scroll snap */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.skydo-cat-tabs .skydo-carousel-wrap::-webkit-scrollbar { display: none; }
.skydo-cat-tabs .skydo-carousel-track {
    display: flex;
    gap: 14px;
    padding: 4px 6px;
}
.skydo-cat-tabs .skydo-card {
    flex: 0 0 calc(25% - 11px);
    background: white;
    border: 1px solid var(--skydo-gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}
.skydo-cat-tabs .skydo-card:hover {
    border-color: var(--skydo-blue);
    transform: translateY(-3px);
    box-shadow: var(--skydo-shadow-md);
}
.skydo-cat-tabs .skydo-card-image {
    aspect-ratio: 1;
    background: var(--skydo-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.skydo-cat-tabs .skydo-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform .3s;
}
.skydo-cat-tabs .skydo-card:hover .skydo-card-image img { transform: scale(1.05); }
.skydo-cat-tabs .skydo-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.skydo-cat-tabs .skydo-card-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--skydo-gray-800);
    line-height: 1.4;
    margin-bottom: 10px;
    height: 54px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.skydo-cat-tabs .skydo-card-footer { margin-top: auto; }
.skydo-cat-tabs .skydo-card-price {
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--skydo-gray-900);
}
.skydo-cat-tabs .skydo-card-price .woocommerce-Price-amount {
    font-family: 'Manrope', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--skydo-gray-900) !important;
}

/* === Onglets Meilleures ventes / Nouveautés === */
.skydo-cat-tabs-header {
    flex-wrap: wrap;
}
.skydo-cat-tabs-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.skydo-cat-tab {
    background: transparent;
    border: 0;
    padding: 6px 4px 10px;
    cursor: pointer;
    position: relative;
    transition: opacity .15s;
    opacity: 0.45;
}
.skydo-cat-tab:hover {
    opacity: 0.8;
}
.skydo-cat-tab.is-active {
    opacity: 1;
}
/* Le span.skydo-section-title à l'intérieur du bouton garde le style global,
   mais on neutralise les défauts d'un bouton (margin, font, etc). */
.skydo-cat-tab .skydo-section-title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--skydo-gray-900);
}
.skydo-cat-tab .skydo-title-accent {
    width: 4px;
    height: 22px;
    background: #d1d5db; /* gray-300 — onglet inactif */
    border-radius: 2px;
    flex-shrink: 0;
    transition: background .15s;
}
.skydo-cat-tab.is-active .skydo-title-accent {
    background: var(--skydo-blue);
}
/* Soulignement subtil sous l'onglet actif */
.skydo-cat-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 4px;
    height: 2px;
    background: var(--skydo-blue);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}
.skydo-cat-tab.is-active::after {
    transform: scaleX(1);
}

/* Panels : on n'affiche que le panel actif */
.skydo-cat-tab-panel {
    display: none;
}
.skydo-cat-tab-panel.is-active {
    display: block;
}

/* ============================================================
   BOUTON AJOUTER PANIER (bleu, cohérent single product)
   ============================================================ */
.product-row-cart {
    background: var(--skydo-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none !important;
    white-space: nowrap;
}
.product-row-cart:hover {
    background: var(--skydo-blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(2,100,247,0.30);
}
.product-row-cart:active { transform: translateY(0); }
.product-row-cart.disabled,
.product-row-cart.disabled:hover {
    background: var(--skydo-gray-200) !important;
    color: var(--skydo-gray-500) !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.product-row-cart.is-loading {
    opacity: 0.8;
    pointer-events: none;
}
.product-row-cart.is-loading i {
    animation: skydo-spin 0.8s linear infinite;
}
.product-row-cart.is-added {
    background: #16a34a !important;
}
@keyframes skydo-spin { to { transform: rotate(360deg); } }

/* ============================================================
   PAGINATION ERGONOMIQUE
   ============================================================ */
.skydo-cat-pagination {
    margin-top: 28px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--skydo-shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}
.skydo-cat-pagination .pagination-info {
    font-size: 13px;
    color: var(--skydo-gray-500);
    text-align: center;
}
.skydo-cat-pagination .pagination-info strong {
    color: var(--skydo-gray-900);
    font-weight: 700;
}
.skydo-cat-pagination .pagination-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.skydo-cat-pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    background: white;
    border: 1.5px solid var(--skydo-gray-200);
    color: var(--skydo-gray-700);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: all .15s;
}
.skydo-cat-pagination a.page-numbers:hover {
    border-color: var(--skydo-blue);
    color: var(--skydo-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(2,100,247,0.18);
}
.skydo-cat-pagination .page-numbers.current {
    background: var(--skydo-blue);
    border-color: var(--skydo-blue);
    color: white;
    box-shadow: 0 4px 10px rgba(2,100,247,0.30);
}
.skydo-cat-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--skydo-gray-500);
    pointer-events: none;
}
.skydo-cat-pagination .page-numbers.prev,
.skydo-cat-pagination .page-numbers.next {
    padding: 0 16px;
    font-weight: 700;
}
.skydo-cat-pagination .pag-label {
    display: inline;
}

/* ============================================================
   VUE GRILLE (toggle grid/list)
   ============================================================ */
.products-list[data-view="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.products-list[data-view="grid"] .product-row {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--skydo-gray-200);
    border-radius: 14px;
    background: white;
    overflow: hidden;
    transition: all .2s;
}
.products-list[data-view="grid"] .product-row:hover {
    border-color: var(--skydo-blue);
    transform: translateY(-3px);
    box-shadow: var(--skydo-shadow-md);
}
.products-list[data-view="grid"] .product-row-image {
    width: 100%;
    aspect-ratio: 1;
    flex: none;
    padding: 22px;
    background: var(--skydo-gray-50);
}
.products-list[data-view="grid"] .product-row-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.products-list[data-view="grid"] .product-row-info {
    padding: 14px 16px 8px;
    min-height: 100px;
}
.products-list[data-view="grid"] .product-row-name {
    font-size: 14px;
    margin: 4px 0 8px;
}
.products-list[data-view="grid"] .product-row-specs {
    display: none;
}
.products-list[data-view="grid"] .product-row-buy {
    padding: 0 16px 16px;
    border: 0;
}
.products-list[data-view="grid"] .product-row-price-block {
    margin-bottom: 10px;
}

/* Toggle vue liste/grille : pill compact (override du conteneur gris hérité de category.css) */
.toolbar-view {
    display: inline-flex !important;
    gap: 4px !important;
    padding: 3px !important;
    background: var(--skydo-gray-100) !important;
    border-radius: 8px !important;
    border: 1px solid var(--skydo-gray-200);
}
.toolbar-view-btn {
    width: 34px !important;
    height: 30px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--skydo-gray-500) !important;
    font-size: 13px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    padding: 0 !important;
    box-shadow: none !important;
}
.toolbar-view-btn:hover:not(.active) {
    color: var(--skydo-gray-700) !important;
}
.toolbar-view-btn.active {
    background: white !important;
    color: var(--skydo-blue) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}

/* ============================================================
   RESPONSIVE — mobile-first complet
   ============================================================ */

/* === MOBILE (< 768px) === */
@media (max-width: 767px) {
    .skydo-cat-container {
        padding: 0 12px;
    }
    /* Hero compact mobile — IMAGE EN HAUT, puis breadcrumb + titre + meta + desc */
    .cat-hero {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 16px !important;
        padding: 16px !important;
        border-radius: 14px !important;
        align-items: stretch !important;
    }
    .cat-hero-content {
        width: 100%;
        order: 2;
    }
    .cat-hero-image {
        order: 1;
        flex: none !important;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16/9;
        margin: 0 !important;
        border-radius: 12px !important;
    }
    .cat-hero-illustration {
        order: 1;
        font-size: 64px !important;
        align-self: center !important;
        padding: 24px !important;
    }
    .cat-hero-breadcrumb {
        font-size: 11px;
        gap: 4px;
        margin-bottom: 8px;
    }
    .cat-hero h1 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        margin: 0 0 8px !important;
        letter-spacing: -0.02em;
    }
    .cat-hero-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin: 0 0 12px !important;
        color: var(--skydo-gray-700);
    }
    .cat-hero-meta {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .cat-hero-meta-item {
        padding: 5px 9px !important;
        font-size: 11.5px !important;
        gap: 5px !important;
        background: var(--skydo-gray-100);
        border-radius: 8px;
    }

    /* Sliders : 1.4 cards visibles + swipe */
    .skydo-cat-tabs {
        padding: 20px 12px 20px 16px;
        border-radius: 12px;
    }
    .skydo-cat-tabs .skydo-section-header {
        margin-bottom: 14px;
    }
    .skydo-cat-tabs .skydo-section-title { font-size: 17px; }
    .skydo-cat-tabs .skydo-card {
        flex: 0 0 65%;
    }
    .skydo-cat-tabs .skydo-card-image { padding: 14px; }
    .skydo-cat-tabs .skydo-card-body { padding: 10px 12px 12px; }
    .skydo-cat-tabs .skydo-card-name {
        font-size: 12.5px;
        height: 48px;
        -webkit-line-clamp: 2;
    }
    .skydo-cat-tabs .skydo-card-price,
    .skydo-cat-tabs .skydo-card-price .woocommerce-Price-amount {
        font-size: 15px !important;
    }
    /* Sur mobile, on cache les flèches : la nav se fait au swipe */
    .skydo-cat-tabs .skydo-carousel-nav { display: none; }

    /* Layout : sidebar masquée par défaut, drawer ouvrable */
    .main-layout {
        display: block !important;
        gap: 0 !important;
    }
    .filters-sidebar {
        position: fixed !important;
        top: 0; left: -100%;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: white;
        z-index: 999;
        overflow-y: auto;
        padding: 16px;
        transition: left .25s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.12);
    }
    .filters-sidebar.is-open { left: 0; }

    /* Sur la page single catégorie (et la recherche produits qui partage le
       même template), on cache le header global pour récupérer la hauteur en
       favoris du scroll long (infinity scroll). Les filtres / tri / vue restent
       accessibles via la toolbar sticky juste en dessous. */
    body.tax-product_cat .sk-header,
    body.tax-product_cat .skydo-megamenu,
    body.post-type-archive-product .sk-header,
    body.post-type-archive-product .skydo-megamenu,
    body.search-results .sk-header,
    body.search-results .skydo-megamenu {
        display: none !important;
    }
    /* Compense le padding-top que le header peut induire sur le body */
    body.tax-product_cat,
    body.post-type-archive-product,
    body.search-results {
        padding-top: 0 !important;
    }

    /* Toolbar : compacte, scrollable, ET STICKY au top du viewport pour
       que tri / vue / filtres restent accessibles pendant l'infinity scroll. */
    .products-toolbar {
        position: sticky;
        top: 0;
        z-index: 50;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
        /* Petit margin négatif pour que le shadow déborde au-delà du padding
           du conteneur parent (évite que la toolbar paraisse "rentrée"). */
        margin-left: -2px;
        margin-right: -2px;
    }
    .toolbar-results { width: 100%; font-size: 13px; }
    .toolbar-actions {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .toolbar-sort label { display: none; }
    .toolbar-sort select { padding: 8px 28px 8px 10px; font-size: 13px; }
    .mobile-filter-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: var(--skydo-blue);
        color: white;
        border-radius: 8px;
        border: 0;
        font-weight: 600;
        font-size: 13px;
    }

    /* Liste produits : carte mobile horizontale (image | info+buy stacked) */
    .products-list { gap: 10px !important; }
    .products-list[data-view="list"] .product-row,
    .products-list .product-row {
        /* display:flex écrase le `display:grid` (avec colonnes 140px/1fr/auto)
           hérité de category.css en desktop — sinon la 1re colonne reste à 140px
           alors que l'image mobile fait 92px → ~48px de vide fantôme à droite
           de l'image. flex-direction n'a aucun effet sur un grid container. */
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 12px !important;
        align-items: center !important;
    }
    .product-row-image {
        width: 92px !important;
        height: 92px !important;
        flex: none !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }
    .product-row-info {
        padding: 0 !important;
        min-height: 0 !important;
        flex: 1 1 0% !important;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .product-row-brand {
        font-size: 10.5px !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        color: var(--skydo-gray-500) !important;
        font-weight: 600;
    }
    .product-row-name {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: 600;
    }
    .product-row-specs { display: none !important; }
    .product-row-stock {
        font-size: 10.5px !important;
        margin: 2px 0 0 !important;
        gap: 4px;
    }
    .product-row-stock i { font-size: 7px !important; }
    /* Sur mobile on cache la partie longue du texte stock */
    .product-row-stock .stock-long { display: none; }
    .product-row-stock .stock-short { display: inline; }

    .product-row-buy {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-end !important;
        flex: none !important;
        padding: 0 !important;
        min-width: 92px;
        max-width: 110px;
    }
    .product-row-price-block { width: 100%; text-align: right; }
    .product-row-price { font-size: 16px !important; line-height: 1.1 !important; }
    .product-row-price-info { display: none !important; }
    .product-row-cart {
        padding: 9px 12px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        width: 100% !important;
        gap: 6px !important;
    }
    .product-row-cart .cart-btn-label { display: none; }
    .product-row-cart i { font-size: 15px; }

    /* Grille mobile : 1 colonne */
    .products-list[data-view="grid"] {
        grid-template-columns: 1fr;
    }
    .products-list[data-view="grid"] .product-row {
        flex-direction: column !important;
    }
    .products-list[data-view="grid"] .product-row-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
    }
    .products-list[data-view="grid"] .product-row-buy {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .products-list[data-view="grid"] .product-row-cart .cart-btn-label {
        display: inline;
    }

    /* ============================================================
       INFINITY SCROLL MOBILE
       On cache la pagination classique (mais on la garde dans le DOM pour
       détecter via JS qu'il reste une page suivante) et on affiche un loader
       pendant le chargement automatique de la suite.
       ============================================================ */
    .skydo-cat-pagination { display: none !important; }

    .skydo-infinity-sentinel {
        display: block;
        padding: 28px 0 32px;
        text-align: center;
    }
    .skydo-infinity-loader {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }
    .skydo-infinity-loader .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--skydo-blue);
        opacity: 0.4;
        animation: skydo-infinity-pulse 1.4s ease-in-out infinite;
    }
    .skydo-infinity-loader .dot:nth-child(2) { animation-delay: 0.2s; }
    .skydo-infinity-loader .dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes skydo-infinity-pulse {
        0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
        40%           { transform: scale(1);   opacity: 1; }
    }

    /* Pagination mobile : compact (gardé pour si un jour on veut la réactiver) */
    .skydo-cat-pagination {
        padding: 14px;
        gap: 10px;
    }
    .skydo-cat-pagination .page-numbers {
        min-width: 40px;
        min-height: 40px;
        font-size: 13px;
    }
    .skydo-cat-pagination .page-numbers.prev .pag-label,
    .skydo-cat-pagination .page-numbers.next .pag-label {
        display: none;
    }

    /* Description longue : marges réduites */
    .cat-long-desc {
        padding: 22px 18px !important;
        margin-top: 24px !important;
        font-size: 14.5px !important;
    }
    .cat-long-desc h2 { font-size: 18px !important; }
    .cat-long-desc h3 { font-size: 16px !important; }
}

/* === TABLETTE (768-1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
    .cat-hero-image { flex: 0 0 220px; }
    .skydo-cat-tabs .skydo-card { flex: 0 0 calc(33.333% - 10px); }
    .product-row-cart .cart-btn-label { display: inline; }
}

/* === OVERLAY DRAWER FILTRES (mobile) === */
.filters-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 26, 47, 0.45);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.filters-sidebar-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
/* Wrapper "Réinitialiser + ×" dans le filters-header */
.filters-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Croix de fermeture : masquée TOUJOURS sur desktop, visible mobile uniquement */
.filters-mobile-close {
    display: none !important;
    background: transparent;
    border: 0;
    color: var(--skydo-dark);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
@media (max-width: 767px) {
    /* Drawer FULLY OPAQUE — désactive le ::before overlay du base CSS (conflit avec mon overlay JS) */
    .filters-sidebar {
        background: #ffffff !important;
        opacity: 1 !important;
        z-index: 1000 !important;
        padding: 16px !important;
    }
    .filters-sidebar.is-open::before {
        display: none !important;
        content: none !important;
    }

    .filters-mobile-close { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; }
    .filters-mobile-close:hover { background: #f1f5f9; }
    .filters-sidebar .filters-header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 2;
        padding-bottom: 12px;
        border-bottom: 1px solid #eef2f7;
    }

    /* Compteurs de marques (170, 34…) : assez contrastés pour être lisibles dans le drawer */
    .filters-sidebar .filter-option { color: #1f2937 !important; font-size: 14px !important; }
    .filters-sidebar .filter-option-count {
        color: #6b7280 !important;
        font-size: 12.5px !important;
        font-weight: 600;
    }
    .filters-sidebar .filter-group-title { font-size: 15px !important; }

    /* Bouton "Appliquer" : bleu solide en sticky bas du drawer, par-dessus tout */
    .filters-sidebar .filter-apply-btn {
        position: sticky !important;
        bottom: 0 !important;
        background: #0264F7 !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 10px !important;
        padding: 14px !important;
        width: 100% !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        margin-top: 16px !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08) !important;
        z-index: 3 !important;
    }
    .filters-sidebar .filter-apply-btn:hover {
        background: #024fc5 !important;
    }
}

/* === DESKTOP (>= 1024px) === */
@media (min-width: 1024px) {
    .skydo-cat-pagination {
        flex-direction: row;
        justify-content: space-between;
        padding: 18px 24px;
    }
    .skydo-cat-pagination .pagination-info {
        text-align: left;
    }
    .mobile-filter-toggle {
        display: none !important;
    }
    .filters-sidebar-overlay { display: none !important; }
}

/* ============================================================
   PAGE DE RECHERCHE PRODUITS
   ============================================================ */

/* Hero search : ressemble à cat-hero mais sans image (pas une cat précise) */
.skydo-search-hero {
    background: white;
    border-radius: 18px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--skydo-shadow);
}
.skydo-search-title {
    font-family: 'Manrope', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--skydo-gray-900);
    letter-spacing: -0.02em;
    margin: 6px 0 10px;
    line-height: 1.15;
}
.skydo-search-term {
    color: var(--skydo-blue);
}
.skydo-search-desc {
    color: var(--skydo-gray-500);
    font-size: 14.5px;
    margin: 0 0 22px;
    line-height: 1.5;
}
.skydo-search-desc strong {
    color: var(--skydo-gray-900);
    font-weight: 700;
}

/* Formulaire de recherche dans le hero */
.skydo-search-form {
    position: relative;
    max-width: 660px;
    display: flex;
    align-items: stretch;
}
.skydo-search-form input[type="search"] {
    flex: 1;
    background: var(--skydo-gray-50);
    border: 1.5px solid var(--skydo-gray-200);
    border-radius: 30px 0 0 30px;
    padding: 14px 16px 14px 46px;
    font-size: 14.5px;
    color: var(--skydo-gray-900);
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
    min-width: 0;
}
.skydo-search-form input[type="search"]::placeholder {
    color: var(--skydo-gray-500);
}
.skydo-search-form input[type="search"]:focus {
    border-color: var(--skydo-blue);
    background: white;
    box-shadow: 0 0 0 3px rgba(2, 100, 247, 0.12);
}
.skydo-search-form-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--skydo-gray-500);
    z-index: 1;
    pointer-events: none;
}
.skydo-search-form-btn {
    background: var(--skydo-blue);
    color: white;
    border: 0;
    padding: 0 26px;
    border-radius: 0 30px 30px 0;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.skydo-search-form-btn:hover {
    background: var(--skydo-blue-dark);
}

/* État vide : aucun résultat */
.skydo-search-empty {
    background: white;
    border-radius: 18px;
    padding: 48px 32px;
    box-shadow: var(--skydo-shadow);
    text-align: center;
}
.skydo-search-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--skydo-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}
.skydo-search-empty-title {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--skydo-gray-900);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.skydo-search-tips {
    text-align: left;
    max-width: 480px;
    margin: 14px auto 28px;
    padding-left: 22px;
    color: var(--skydo-gray-700);
    font-size: 14.5px;
    line-height: 1.7;
}
.skydo-search-tips em {
    background: var(--skydo-gray-100);
    padding: 1px 8px;
    border-radius: 4px;
    font-style: normal;
    font-weight: 600;
    color: var(--skydo-gray-900);
}

/* Suggestions catégories en cards */
.skydo-search-cat-suggestions {
    margin-top: 36px;
}
.skydo-search-cat-suggestions h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--skydo-gray-900);
    margin: 0 0 16px;
}
.skydo-search-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.skydo-search-cat-card {
    background: white;
    border: 1px solid var(--skydo-gray-200);
    border-radius: 12px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.skydo-search-cat-card:hover {
    border-color: var(--skydo-blue);
    transform: translateY(-2px);
    box-shadow: var(--skydo-shadow-md);
}
.skydo-search-cat-image {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--skydo-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.skydo-search-cat-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.skydo-search-cat-name {
    font-weight: 700;
    color: var(--skydo-gray-900);
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.skydo-search-cat-count {
    font-size: 11.5px;
    color: var(--skydo-gray-500);
}

/* Mobile : hero search compact */
@media (max-width: 767px) {
    .skydo-search-hero {
        padding: 22px 16px;
        border-radius: 14px;
        margin-bottom: 18px;
    }
    .skydo-search-title {
        font-size: 22px;
    }
    .skydo-search-form {
        flex-wrap: wrap;
    }
    .skydo-search-form input[type="search"] {
        border-radius: 30px;
        padding-right: 16px;
        margin-bottom: 8px;
        flex: 1 1 100%;
    }
    .skydo-search-form-btn {
        border-radius: 30px;
        padding: 12px 22px;
        width: 100%;
    }
    .skydo-search-empty {
        padding: 30px 18px;
    }
    .skydo-search-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .skydo-search-cat-image {
        width: 60px;
        height: 60px;
    }
}

/* ============================================================
   TOUS LES PRODUITS — variante SANS filtres (page boutique)
   Réutilise le template catégorie mais sans la colonne filtres :
   liste produits en pleine largeur. Le bouton "Filtres" (mobile)
   est masqué car il n'y a aucune sidebar à ouvrir.
   ============================================================ */
.main-layout--no-filters {
    grid-template-columns: 1fr;
}
.main-layout--no-filters .mobile-filter-toggle {
    display: none !important;
}
@media (max-width: 1023px) {
    .main-layout--no-filters {
        display: block !important;
    }
}