/* ============================================
   KITVIA QUICK ORDER - Version Responsive Finale
   ============================================ */

:root {
    --kqo-primary: #000000;
    --kqo-hover: #333333;
    --kqo-border: #e5e7eb;
    --kqo-gray-50: #f9fafb;
    --kqo-gray-100: #f3f4f6;
    --kqo-gray-500: #6b7280;
    --kqo-gray-700: #374151;
    --kqo-blue: #0ea5e9;
}

/* ============================================
   CONTENEUR - Déborde du thème
   ============================================ */

.kitvia-qo-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: max(20px, calc((100vw - 1400px) / 2)) !important;
    padding-right: max(20px, calc((100vw - 1400px) / 2)) !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ============================================
   HEADER
   ============================================ */

.kitvia-qo-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
}

.kitvia-qo-toggle-sidebar {
    display: none !important;
}

.kitvia-qo-search-container {
    display: none !important;
}

.kitvia-qo-cart-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 24px !important;
    background: var(--kqo-cart-button-color, #0ea5e9) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    transition: all 0.2s !important;
}

.kitvia-qo-cart-btn:hover {
    background: var(--kqo-cart-button-color, #0ea5e9) !important;
    filter: brightness(0.88) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    color: white !important;
}

.kitvia-qo-cart-icon {
    font-size: 20px !important;
}

.kitvia-qo-cart-total {
    font-weight: 700 !important;
}

.kitvia-qo-cart-count {
    opacity: 0.8 !important;
    font-size: 14px !important;
}

/* ============================================
   LAYOUT
   ============================================ */

.kitvia-qo-layout {
    display: flex !important;
    gap: 30px !important;
    align-items: flex-start !important;
}

/* ============================================
   SIDEBAR - NO STICKY en mobile
   ============================================ */

.kitvia-qo-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    background: white !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 12px !important;
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    display: block !important;
}

.kitvia-qo-sidebar-inner {
    padding: 20px !important;
}

.kitvia-qo-sidebar-title {
    display: none !important;
}

.kitvia-qo-categories {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kitvia-qo-category {
    margin-bottom: 4px !important;
}

.kitvia-qo-category-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    color: var(--kqo-gray-700) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.kitvia-qo-category-link:hover {
    background: var(--kqo-gray-50) !important;
    transform: translateX(3px) !important;
}

.kitvia-qo-category.active > .kitvia-qo-category-link {
    background: var(--kqo-active-cat, #f0f0f0) !important;
    color: var(--kqo-primary) !important;
    border-left: 4px solid var(--kqo-primary) !important;
    font-weight: 700 !important;
    padding-left: 12px !important;
}

.kitvia-qo-category-name {
    flex: 1 !important;
}

/* Compteur de produits - caché par défaut (optionnel: le montrer via CSS si besoin) */
.kitvia-qo-category-count {
    display: none !important;
}

.kitvia-qo-category-toggle {
    margin-right: 10px !important;
    transition: transform 0.2s !important;
    font-size: 10px !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    background: var(--kqo-gray-100) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.kitvia-qo-category-toggle:hover {
    background: var(--kqo-gray-200, #e5e7eb) !important;
    color: var(--kqo-primary) !important;
}

.kitvia-qo-category.expanded > .kitvia-qo-category-link .kitvia-qo-category-toggle {
    transform: rotate(90deg) !important;
    background: var(--kqo-primary) !important;
    color: white !important;
}

.kitvia-qo-subcategories {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    border-left: 2px solid var(--kqo-gray-200, #e5e7eb) !important;
    margin-left: 10px !important;
}

.kitvia-qo-category.expanded > .kitvia-qo-subcategories {
    max-height: 2000px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Sous-catégories - style plus compact */
.kitvia-qo-subcategories .kitvia-qo-category {
    margin-bottom: 0 !important;
}

.kitvia-qo-subcategories .kitvia-qo-category-link {
    padding: 10px 12px 10px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
}

.kitvia-qo-subcategories .kitvia-qo-category-link:hover {
    color: var(--kqo-primary) !important;
    background: var(--kqo-gray-50) !important;
}

.kitvia-qo-subcategories .kitvia-qo-category.active > .kitvia-qo-category-link {
    color: var(--kqo-primary) !important;
    font-weight: 600 !important;
    background: var(--kqo-active-cat, #f0f0f0) !important;
    border-left: 3px solid var(--kqo-primary) !important;
    padding-left: 13px !important;
}

/* Niveau 2 et plus - indentation */
.kitvia-qo-subcategories .kitvia-qo-subcategories {
    margin-left: 8px !important;
}

.kitvia-qo-subcategory {
    margin-left: 20px !important;
    margin-bottom: 3px !important;
}

.kitvia-qo-subcategory .kitvia-qo-category-link {
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* ============================================
   MAIN
   ============================================ */

.kitvia-qo-main {
    flex: 1 !important;
    min-width: 0 !important;
    background: white !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 12px !important;
    overflow: visible !important;
}

/* Barre de recherche + panier au-dessus du tableau */
.kitvia-qo-main-search {
    padding: 20px !important;
    background: var(--kqo-gray-50) !important;
    border-bottom: 2px solid var(--kqo-border) !important;
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

.kitvia-qo-main-search .kitvia-qo-search {
    flex: 1 !important;
    padding: 12px 20px 12px 45px !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background: white url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat 15px center !important;
}

.kitvia-qo-main-search .kitvia-qo-search:focus {
    outline: none !important;
    border-color: var(--kqo-blue) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}

/* Compteur de résultats */
.kitvia-qo-results-count {
    font-size: 14px !important;
    color: var(--kqo-gray-600) !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
}

.kitvia-qo-visible-count {
    font-weight: 700 !important;
    color: var(--kqo-gray-800) !important;
}

/* Panier dans le main-search (PC uniquement) */
.kitvia-qo-main-search .kitvia-qo-cart-btn {
    flex-shrink: 0 !important;
}

/* ============================================
   TABLE
   ============================================ */

.kitvia-qo-products-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.kitvia-qo-products-table thead {
    background: var(--kqo-gray-100) !important;
    border-bottom: 2px solid var(--kqo-border) !important;
    display: table-header-group !important;
}

.kitvia-qo-products-table th {
    padding: 12px 10px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: var(--kqo-gray-700) !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
}

.kitvia-qo-products-table th.col-image {
    width: 95px !important;
}

.kitvia-qo-products-table th.col-product {
    width: auto !important;
    min-width: 180px !important;
}

.kitvia-qo-products-table th.col-description {
    display: none !important;
}

.kitvia-qo-products-table th.col-price {
    width: 100px !important;
    text-align: center !important;
}

.kitvia-qo-products-table th.col-qty {
    width: 300px !important;
    text-align: center !important;
}

.kitvia-qo-products-table th.col-action {
    display: none !important;
    width: 0 !important;
}

.kitvia-qo-products-table tbody tr {
    border-bottom: 1px solid var(--kqo-border) !important;
    transition: background 0.2s !important;
}

.kitvia-qo-products-table tbody tr:hover {
    background: var(--kqo-gray-50) !important;
}

.kitvia-qo-products-table td {
    padding: 22px 10px !important;
    vertical-align: top !important;
    padding-top: 24px !important;
}

.kitvia-qo-products-table td.col-image {
    width: 95px !important;
    overflow: visible !important;
    position: relative !important;
    vertical-align: top !important;
    padding-top: 20px !important;
}

.kitvia-qo-products-table td.col-product {
    width: auto !important;
    min-width: 180px !important;
}

.kitvia-qo-products-table td.col-description {
    display: none !important;
}

.kitvia-qo-products-table td.col-price {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    text-align: center !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    vertical-align: middle !important;
}

.kitvia-qo-products-table td.col-qty {
    width: 300px !important;
    min-width: 300px !important;
    text-align: center !important;
}

/* Desktop: quantité + bouton en ligne, conditionnement en dessous */
@media (min-width: 969px) {
    .kitvia-qo-products-table td.col-qty {
        vertical-align: middle !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 12px !important;
        padding-right: 14px !important;
    }
    
    .kitvia-qo-products-table td.col-qty .kitvia-qo-quantity-cell {
        display: contents !important;
    }
    
    .kitvia-qo-products-table td.col-qty .kitvia-qo-quantity {
        order: 1 !important;
        flex-shrink: 0 !important;
    }
    
    .kitvia-qo-products-table td.col-qty .kitvia-qo-add-btn-mobile {
        order: 2 !important;
        flex-shrink: 0 !important;
    }
    
    .kitvia-qo-products-table td.col-qty .kitvia-qo-product-conditioning {
        order: 3 !important;
        flex-basis: 100% !important;
        margin-top: 6px !important;
        justify-content: flex-start !important;
    }
}

.kitvia-qo-products-table td.col-action {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   IMAGE - Avec swap hover + zoom x3
   ============================================ */

.kitvia-qo-product-image {
    width: 75px !important;
    height: 75px !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: visible !important;
    border: 2px solid var(--kqo-border) !important;
    background: white !important;
    box-sizing: border-box !important;
}

.kitvia-qo-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
}

/* Zoom x3 au survol sur PC avec swap d'image */
@media (min-width: 969px) {
    .kitvia-qo-products-table {
        overflow: visible !important;
    }
    
    .kitvia-qo-products-table tbody {
        overflow: visible !important;
    }
    
    .kitvia-qo-products-table tbody tr {
        overflow: visible !important;
    }
    
    .kitvia-qo-products-table td.col-image {
        overflow: visible !important;
        position: relative !important;
    }
    
    .kitvia-qo-product-image:hover {
        z-index: 9999 !important;
    }
    
    .kitvia-qo-product-image img {
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        transform-origin: top left !important;
    }
    
    .kitvia-qo-product-image:hover img {
        transform: scale(3) !important;
        z-index: 9999 !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        border-radius: 8px !important;
        position: relative !important;
    }
}

.kitvia-qo-product-image.kitvia-qo-no-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--kqo-gray-100) !important;
}

.kitvia-qo-product-image.kitvia-qo-no-image .dashicons {
    font-size: 30px !important;
    color: var(--kqo-gray-400) !important;
}

.kitvia-qo-cart-badge {
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    background: var(--kqo-cart-badge-color, #0ea5e9) !important;
    color: white !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25) !important;
    border: 3px solid white !important;
    z-index: 10 !important;
}

/* ============================================
   PRODUIT - Titre + Description inline
   ============================================ */

.kitvia-qo-product-info {
    min-width: 0 !important;
}

.kitvia-qo-product-name {
    margin: 0 0 6px 0 !important;
    line-height: 1.4 !important;
}

.kitvia-qo-product-name a {
    font-weight: 500 !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.kitvia-qo-product-name a:hover {
    color: var(--kqo-blue) !important;
    text-decoration: underline !important;
}

.kitvia-qo-product-sku {
    display: block !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    margin: 4px 0 !important;
    font-family: 'Monaco', 'Consolas', monospace !important;
}

/* Description sous le titre - 3 lignes max pour afficher plus */
.kitvia-qo-product-description-inline {
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    max-width: 100% !important;
}

/* Conditionnement sous la quantité */
.kitvia-qo-product-conditioning {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: var(--kqo-conditioning-color, #6b7280) !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.kitvia-qo-product-conditioning svg {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
}

.kitvia-qo-quantity-cell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Conditionnement en dessous */
.kitvia-qo-quantity-cell .kitvia-qo-product-conditioning {
    flex-basis: 100% !important;
}

.kitvia-qo-variations {
    width: 100% !important;
    max-width: 250px !important;
    padding: 8px 12px !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    margin-top: 8px !important;
}

/* ============================================
   PRIX
   ============================================ */

.kitvia-qo-price {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: block !important;
}

/* Prix promo : ancien prix barré + nouveau prix */
.kitvia-qo-price del {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    text-decoration: line-through !important;
}

.kitvia-qo-price ins {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    background: none !important;
}

.kitvia-qo-stock {
    display: block !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}

.kitvia-qo-stock.in-stock {
    color: #10b981 !important;
}

.kitvia-qo-stock.out-of-stock {
    color: #f59e0b !important;
}

/* ============================================
   QUANTITÉ
   ============================================ */

.kitvia-qo-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    width: fit-content !important;
}

.kitvia-qo-qty-btn {
    background: var(--kqo-gray-100) !important;
    border: none !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--kqo-gray-700) !important;
    transition: all 0.2s !important;
}

.kitvia-qo-qty-btn:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
}

.kitvia-qo-qty-btn:active {
    transform: scale(0.95) !important;
}

.kitvia-qo-qty-input {
    border: none !important;
    width: 50px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 0 !important;
    height: 34px !important;
    border-left: 1px solid var(--kqo-border) !important;
    border-right: 1px solid var(--kqo-border) !important;
    -moz-appearance: textfield !important; /* Firefox - enlève les flèches */
}

/* Enlever les flèches haut/bas sur Chrome, Safari, Edge */
.kitvia-qo-qty-input::-webkit-outer-spin-button,
.kitvia-qo-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

.kitvia-qo-qty-input:focus {
    outline: none !important;
    background: var(--kqo-gray-50) !important;
}

/* ============================================
   BOUTON
   ============================================ */

.kitvia-qo-add-btn {
    padding: var(--kqo-btn-padding, 10px 12px) !important;
    background: var(--kqo-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--kqo-btn-radius, 7px) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: fit-content !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.kitvia-qo-add-btn:hover:not(:disabled) {
    background: var(--kqo-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.kitvia-qo-add-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.kitvia-qo-add-btn.loading::after {
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid white !important;
    border-top-color: transparent !important;
    border-radius: 50% !important;
    animation: spin 0.6s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.kitvia-qo-add-btn.in-cart {
    background: var(--kqo-added-btn) !important;
}

.kitvia-qo-add-btn.in-cart:hover {
    background: var(--kqo-added-btn) !important;
    filter: brightness(0.85) !important;
}

/* ============================================
   TOAST
   ============================================ */

.kitvia-qo-toast {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 16px 24px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    z-index: 99999 !important;
    font-weight: 600 !important;
    animation: slideIn 0.3s ease !important;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.kitvia-qo-toast.success {
    border-left: 4px solid #10b981 !important;
    background: #d1fae5 !important;
    color: #065f46 !important;
}

.kitvia-qo-toast.error {
    border-left: 4px solid #ef4444 !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.kitvia-qo-empty {
    text-align: center !important;
    padding: 80px 20px !important;
    color: #6b7280 !important;
}

.kitvia-qo-empty-icon {
    font-size: 64px !important;
    margin-bottom: 20px !important;
    opacity: 0.3 !important;
}

/* Message aucun résultat de recherche */
.kitvia-qo-no-results {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #6b7280 !important;
    font-size: 16px !important;
}

.kitvia-qo-no-results p {
    margin: 0 0 15px 0 !important;
}

.kitvia-qo-clear-search {
    padding: 10px 24px !important;
    background: var(--kqo-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.kitvia-qo-clear-search:hover {
    background: #0284c7 !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.kitvia-qo-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 30px 20px !important;
    border-top: 2px solid var(--kqo-border) !important;
    background: var(--kqo-gray-50) !important;
}

.kitvia-qo-page-btn {
    padding: 10px 18px !important;
    background: white !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 8px !important;
    color: var(--kqo-gray-700) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.kitvia-qo-page-btn:hover {
    background: var(--kqo-primary) !important;
    border-color: var(--kqo-primary) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.kitvia-qo-page-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.kitvia-qo-page-num {
    min-width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    border: 2px solid var(--kqo-border) !important;
    border-radius: 8px !important;
    color: var(--kqo-gray-700) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.2s !important;
}

.kitvia-qo-page-num:hover {
    background: var(--kqo-gray-100) !important;
    border-color: var(--kqo-primary) !important;
    color: var(--kqo-primary) !important;
    transform: translateY(-1px) !important;
}

.kitvia-qo-page-num.active {
    background: var(--kqo-primary) !important;
    border-color: var(--kqo-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.kitvia-qo-page-dots {
    padding: 0 10px !important;
    color: var(--kqo-gray-400) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* ============================================
   RESPONSIVE - MOBILE COMPLET
   ============================================ */

/* Empêcher le scroll UNIQUEMENT quand sidebar ouverte EN MOBILE */
@media (max-width: 968px) {
    body.kitvia-qo-sidebar-active {
        overflow: hidden !important;
    }
}

@media (max-width: 968px) {
    /* Container mobile */
    .kitvia-qo-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* ============================================
       LAYOUT MOBILE - CARDS PROPRES 2 LIGNES
       ============================================ */
    
    /* Headers cachés en mobile */
    .kitvia-qo-products-table thead {
        display: none !important;
    }
    
    /* Table en block */
    .kitvia-qo-products-table,
    .kitvia-qo-products-table tbody {
        display: block !important;
        width: 100% !important;
    }
    
    /* ============================================
       CARD PRODUIT - Flexbox 2 lignes
       ============================================ */
    .kitvia-qo-products-table tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 14px 10px !important;
        border-bottom: 1px solid var(--kqo-border) !important;
        background: white !important;
        gap: 0 !important;
    }
    
    /* Reset toutes les cellules */
    .kitvia-qo-products-table td {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    
    /* Cacher description */
    .kitvia-qo-products-table td.col-description {
        display: none !important;
    }
    
    /* ============================================
       LIGNE 1: Image + Nom + Prix
       ============================================ */
    
    /* Image - fixe à gauche */
    .kitvia-qo-products-table td.col-image {
        width: 56px !important;
        flex-shrink: 0 !important;
        margin-right: 12px !important;
    }
    
    .kitvia-qo-product-image {
        width: 52px !important;
        height: 52px !important;
        border-radius: 8px !important;
        object-fit: cover !important;
    }
    
    .kitvia-qo-badge {
        top: -4px !important;
        right: -4px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }
    
    /* Nom - prend l'espace restant */
    .kitvia-qo-products-table td.col-product {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: left !important;
        padding-right: 10px !important;
    }
    
    .kitvia-qo-product-name {
        margin: 0 !important;
    }
    
    .kitvia-qo-product-name a {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: #1f2937 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Cacher SKU, stock, description */
    .kitvia-qo-stock,
    .kitvia-qo-product-sku,
    .kitvia-qo-product-description-inline {
        display: none !important;
    }
    
    /* Prix - fixe à droite */
    .kitvia-qo-products-table td.col-price {
        width: auto !important;
        flex-shrink: 0 !important;
        text-align: right !important;
    }
    
    .kitvia-qo-price {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 1px !important;
    }
    
    .kitvia-qo-price del {
        font-size: 11px !important;
        color: #9ca3af !important;
        text-decoration: line-through !important;
    }
    
    .kitvia-qo-price ins,
    .kitvia-qo-price > .woocommerce-Price-amount,
    .kitvia-qo-price > .amount,
    .kitvia-qo-price bdi {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        text-decoration: none !important;
        background: none !important;
    }
    
    /* ============================================
       LIGNE 2: Quantité + Conditionnement + Bouton
       ============================================ */
    
    /* Quantité - nouvelle ligne, alignée à gauche avec marge image */
    .kitvia-qo-products-table td.col-qty {
        width: 100% !important;
        margin-top: 12px !important;
        padding-left: 68px !important; /* 56px image + 12px gap */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .kitvia-qo-quantity-cell {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .kitvia-qo-quantity {
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .kitvia-qo-qty-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
        border-radius: 6px !important;
    }
    
    .kitvia-qo-qty-input {
        width: 40px !important;
        height: 30px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    /* Conditionnement à côté de la quantité */
    .kitvia-qo-product-conditioning {
        font-size: 11px !important;
        margin-top: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* Bouton mobile - CACHÉ car on le déplace via CSS */
    .kitvia-qo-products-table td.col-action {
        display: none !important;
    }
    
    /* Bouton mobile visible dans col-qty */
    .kitvia-qo-add-btn-mobile {
        display: inline-flex !important;
    }
    
    .kitvia-qo-add-btn {
        min-width: 90px !important;
        padding: var(--kqo-mobile-btn-padding, 12px 14px) !important;
        font-size: var(--kqo-mobile-btn-font-size, 13px) !important;
        font-weight: 600 !important;
        height: auto !important;
        border-radius: 6px !important;
        line-height: 1 !important;
    }
    
    /* ============================================
       HEADER MOBILE
       ============================================ */
    .kitvia-qo-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
    
    .kitvia-qo-toggle-sidebar {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        background: var(--kqo-primary) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        font-size: 14px !important;
    }
    
    .kitvia-qo-toggle-icon {
        font-size: 18px !important;
        line-height: 1 !important;
    }
    
    .kitvia-qo-cart-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    
    .kitvia-qo-cart-btn-desktop {
        display: none !important;
    }
    
    .kitvia-qo-main-search {
        padding: 12px !important;
    }
    
    .kitvia-qo-results-count {
        display: none !important;
    }
    
    .kitvia-qo-layout {
        flex-direction: column !important;
    }
    
    /* ============================================
       SIDEBAR OVERLAY
       ============================================ */
    
    .kitvia-qo-sidebar {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        z-index: 99999 !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .kitvia-qo-sidebar.open {
        display: block !important;
        animation: slideInLeft 0.3s ease !important;
    }
    
    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .kitvia-qo-sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 99998 !important;
        animation: fadeIn 0.3s ease !important;
    }
    
    body.kitvia-qo-sidebar-active .kitvia-qo-sidebar-overlay {
        display: block !important;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .kitvia-qo-close-sidebar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        font-size: 24px !important;
        color: #374151 !important;
        z-index: 10 !important;
        transition: all 0.2s !important;
    }
    
    .kitvia-qo-close-sidebar:hover {
        background: rgba(0, 0, 0, 0.1) !important;
        transform: rotate(90deg) !important;
    }
    
    .kitvia-qo-sidebar-inner {
        padding-top: 60px !important;
    }
}

@media (max-width: 640px) {
    /* Ultra compact pour très petits écrans */
    .kitvia-qo-products-table th.col-image,
    .kitvia-qo-products-table td.col-image {
        width: 55px !important;
    }
    
    .kitvia-qo-product-image {
        width: 45px !important;
        height: 45px !important;
    }
    
    .kitvia-qo-add-btn {
        width: 70px !important;
        padding: 6px !important;
        font-size: 10px !important;
    }
    
    /* Pagination mobile compacte */
    .kitvia-qo-pagination {
        gap: 4px !important;
        padding: 20px 10px !important;
    }
    
    .kitvia-qo-page-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .kitvia-qo-page-num {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }
}

/* Desktop: cacher bouton Trier et overlay et panier header */
@media (min-width: 969px) {
    .kitvia-qo-toggle-sidebar {
        display: none !important;
    }
    
    .kitvia-qo-sidebar-overlay {
        display: none !important;
    }
    
    .kitvia-qo-close-sidebar {
        display: none !important;
    }
    
    /* Cacher le bouton desktop du col-action (maintenant dans col-qty) */
    .kitvia-qo-add-btn-mobile {
        display: inline-flex !important;
    }
    
    .kitvia-qo-products-table td.col-action {
        display: none !important;
    }
    
    /* Cacher le panier du header sur desktop (il est dans le main-search) */
    .kitvia-qo-header .kitvia-qo-cart-btn {
        display: none !important;
    }
}