/**
 * Custom Product List Styles
 * SKU, EAN and Stock Level display on category pages
 */

/* Product condition badge (product page, below title) */
.product-condition-badge {
    margin: 5px 0 10px;
}
.product-condition-badge span {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #ff5501;
    background: #fff0e6;
    padding: 3px 10px;
    border-radius: 3px;
}
.product-sku,
.product-ean {
    font-size: 12px;
    color: #333;
    display: inline;
    margin-right: 10px;
}

.sku-value,
.ean-value {
    font-weight: 700;
}

/* Stock Level Styles */
.product-stock-level {
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    display: block;
}

.product-stock-level::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.product-stock-level.out-of-stock {
    color: #dc3545;
}
.product-stock-level.out-of-stock::before {
    background-color: #dc3545;
}

.product-stock-level.low-stock {
    color: #e67e00;
}
.product-stock-level.low-stock::before {
    background-color: #e67e00;
}

.product-stock-level.in-stock {
    color: #28a745;
}
.product-stock-level.in-stock::before {
    background-color: #28a745;
}

.product-stock-level.high-stock {
    color: #28a745;
}
.product-stock-level.high-stock::before {
    background-color: #28a745;
}

/* Delivery Time */
.product-stock-level .delivery-time {
    font-weight: 400;
    color: inherit;
}

/* ==============================================
   PAGE PRODUIT - SKU, EAN, Stock
   ============================================== */

.product-info-ean-stock {
    margin: 10px 0;
}

.product-info-ean-stock .product-meta-line {
    margin-bottom: 6px;
}

.product-info-ean-stock .product-sku,
.product-info-ean-stock .product-ean {
    font-size: 12px;
    color: #666;
    display: inline;
    margin-right: 15px;
}

.product-info-ean-stock .sku-value,
.product-info-ean-stock .ean-value {
    font-weight: 700;
}

.product-info-ean-stock .product-stock-level {
    margin-top: 6px;
    font-size: 12px;
}

/* Fixed Product Taxes (Écotaxe, Copie Privée) */
.product-fpt-taxes {
    margin-top: 4px;
    margin-bottom: 4px;
}

.product-info-ean-stock .product-fpt-taxes {
    margin-top: 8px;
    margin-bottom: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.product-add-form .box-tocart {
    border: none;
}

.fpt-title {
    display: block;
    font-size: 11px;
    color: #666;
    margin-bottom: 0;
    line-height: 1.2;
}

.fpt-item {
    display: inline-block;
    font-size: 11px;
    color: #666;
    margin-right: 10px;
}

.fpt-item:last-child {
    margin-right: 0;
}

.fpt-label {
    font-weight: 400;
}

.fpt-value {
    font-weight: 600;
    color: #333;
}

/* FPT dans le listing grille */
.products-grid .product-fpt-taxes {
    margin-top: 2px;
    margin-bottom: 4px;
}

/* FPT dans le listing liste compact */
.list-price-box .product-fpt-taxes {
    flex-basis: 100%;
    margin-top: 2px;
    margin-bottom: 0;
    text-align: right;
}

/* ==============================================
   MODE LISTE COMPACT - Redesign
   ============================================== */

/* Container principal mode liste */
.products-list .list-compact-view {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 45px 15px;
    transition: box-shadow 0.2s ease;
}

.products-list .list-compact-view:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Structure flexbox horizontale */
.list-product-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    width: 100%;
}

/* Colonne 1: Image */
.list-product-image {
    flex: 0 0 180px;
    width: 180px;
    min-width: 180px;
}

.products-list .list-compact-view .list-product-image .product-image-link {
    display: block !important;
    position: relative !important;
    width: 180px !important;
    height: 180px !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.products-list .list-compact-view .list-product-image .product-image-photo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 178px !important;
    max-height: 178px !important;
    object-fit: contain !important;
}

/* Force image size in list mode - ultra specific */
.page-products .products-list .list-compact-view .list-product-image a.product-image-link {
    display: block !important;
    position: relative !important;
}

.page-products .products-list .list-compact-view .list-product-image img.product-image-photo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 178px !important;
    max-height: 178px !important;
    object-fit: contain !important;
}

/* Colonne 2: Informations produit */
.list-product-info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.list-product-info .product-item-name {
    display: block;
    margin-bottom: 4px;
}

.list-product-info .product-item-link {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.list-product-info .product-item-link:hover {
    color: #ff5501;
}

.list-product-info .product-meta-line {
    margin-bottom: 4px;
}

.list-product-info .product-sku,
.list-product-info .product-ean {
    font-size: 11px;
    color: #666;
    display: inline-block;
    margin-right: 12px;
}

.list-product-info .product-stock-level {
    font-size: 12px;
    margin-top: 4px;
}

/* Colonne 3: Prix et Actions */
.list-product-price-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-left: auto;
}

/* Box prix */
.list-price-box {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    min-width: 70px;
    flex-wrap: wrap;
}

.list-price-box .price-box {
    margin: 0;
}

.list-price-box .price-box .price {
    font-size: 21px;
    font-weight: 700;
    color: #333;
}

.list-price-box .price-box .old-price .price {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    text-decoration: line-through;
}

.list-price-box .price-box .special-price .price {
    color: #e74c3c;
}

.list-price-box .unit-label {
    display: inline;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    margin: 0;
}

/* Actions (quantité + panier) */
.list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-tocart-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Box quantité */
.list-qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.list-qty-box .qty-btn {
    width: 38px;
    height: 43px;
    border: none;
    background: #fff;
    color: #333;
    font-size: 22px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    padding: 0;
}

.list-qty-box .qty-btn:hover {
    color: #ff5501;
    background: #fff;
}

.list-qty-box .qty-btn:active {
    color: #cc4400;
    background: #fff;
}

.list-qty-box .qty-btn.disabled,
.list-qty-box .qty-btn:disabled {
    background: #fff;
    color: #ccc;
    cursor: not-allowed;
}

.list-qty-box .qty-btn.disabled:hover,
.list-qty-box .qty-btn:disabled:hover {
    background: #fff;
    color: #ccc;
}

.list-qty-box .qty {
    width: 54px;
    height: 43px;
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    -moz-appearance: textfield;
    padding: 0;
    margin: 0;
}

.list-qty-box .qty::-webkit-outer-spin-button,
.list-qty-box .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Bouton panier mode liste - icône seule */
.list-tocart-form .action.tocart {
    width: 43px;
    height: 43px;
    min-width: 43px;
    padding: 0 !important;
    background-color: #ff5501 !important;
    border-color: #ff5501 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.list-tocart-form .action.tocart:hover {
    background-color: #e64a00 !important;
    border-color: #e64a00 !important;
}

.list-tocart-form .action.tocart::before {
    margin: 0 !important;
    padding: 0 !important;
}

.list-tocart-form .action.tocart span {
    display: none;
}

/* Stock indisponible */
.list-actions .stock.unavailable {
    font-size: 12px;
    color: #dc3545;
    font-weight: 600;
}

/* Accessoires produit (related products) - centrage et styles */
.konect-accessory-details .list-product-price-actions {
    align-items: center !important;
    margin-left: 0 !important;
    margin-top: 10px;
    width: 100%;
}

.konect-accessory-details .list-price-box {
    justify-content: center;
}

.konect-accessory-details .list-actions {
    justify-content: center;
}

.konect-accessory-details .list-tocart-form {
    justify-content: center;
}

.konect-accessory-details .list-tocart-form .action.tocart {
    background-color: #222 !important;
    border-color: #222 !important;
}

.konect-accessory-details .list-tocart-form .action.tocart:hover {
    background-color: #000 !important;
    border-color: #000 !important;
}

.konect-accessory-details .list-price-box .price-box .price {
    color: #222;
}

/* ==============================================
   RESPONSIVE MODE LISTE
   ============================================== */

@media (max-width: 991px) {
    /* Responsive adjustments for tablets */
}

@media (max-width: 767px) {
    /* ==========================================================
       KONECT MOBILE: Forcer grille 2 colonnes + cacher sélecteur
       Réutilise le mode grille natif de Magento
       ========================================================== */

    /* Cacher le sélecteur de mode liste/grille sur mobile */
    .modes,
    .toolbar .modes,
    .toolbar-products .modes {
        display: none !important;
    }

    /* Forcer l'affichage en grille 2 colonnes pour TOUS les modes */
    .products.wrapper.list.products-list,
    .products.wrapper.grid.products-grid,
    .products-list,
    .products-grid,
    .products.list .product-items,
    .products.grid .product-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Items produits - adapter à la grille */
    .products-list .product-item,
    .products-grid .product-item,
    .products.list .product-item,
    .products.grid .product-item {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================
       MODE LISTE SUR MOBILE: Transformer en affichage type grille
       Spécificité élevée pour overrider styles-m.css de Porto
       ========================================================== */

    /* Structure interne: tout en colonne - ULTRA SPÉCIFIQUE */
    html body.page-products .products-list .product-item .list-compact-view .list-product-row,
    html body .products-list .product-item .list-compact-view .list-product-row,
    .page-products .products-list .list-compact-view .list-product-row,
    .products-list .list-compact-view .list-product-row {
        display: block !important;
        width: 100% !important;
        flex-direction: column !important;
    }

    /* Image: bloc, centrée - ULTRA SPÉCIFIQUE */
    html body .products-list .product-item .list-compact-view .list-product-image,
    html body.page-products .products-list .list-product-image,
    .products-list .list-compact-view .list-product-image {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        margin: 0 auto 8px auto !important;
        text-align: center !important;
    }

    html body .products-list .product-item .list-compact-view .list-product-image .product-image-link,
    html body.page-products .products-list .list-product-image .product-image-link,
    html body.page-products .products-list .list-product-image a,
    .products-list .list-compact-view .list-product-image .product-image-link {
        display: block !important;
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
        margin: 0 auto !important;
        position: relative !important;
        overflow: visible !important;
        border: none !important;
    }

    html body .products-list .product-item .list-compact-view .list-product-image img,
    html body.page-products .products-list .list-product-image img,
    html body.page-products .products-list .list-product-image .product-image-photo,
    .products-list .list-compact-view .list-product-image img {
        max-width: 80px !important;
        max-height: 80px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    /* Infos produit: bloc, pleine largeur - ULTRA SPÉCIFIQUE */
    html body .products-list .product-item .list-compact-view .list-product-info,
    .products-list .list-compact-view .list-product-info {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        text-align: center !important;
        margin-bottom: 5px !important;
    }

    html body .products-list .list-compact-view .list-product-info .product-item-name {
        display: block !important;
        margin-bottom: 4px !important;
    }

    html body .products-list .list-compact-view .list-product-info .product-item-link {
        font-size: 11px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Prix: bloc, pleine largeur - ULTRA SPÉCIFIQUE */
    html body .products-list .product-item .list-compact-view .list-product-price-actions,
    .products-list .list-compact-view .list-product-price-actions {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        text-align: center !important;
        margin-left: 0 !important;
    }

    html body .products-list .list-compact-view .list-price-box {
        display: block !important;
        text-align: center !important;
        margin: 5px 0 !important;
    }

    html body .products-list .list-compact-view .list-price-box .price {
        font-size: 14px !important;
        font-weight: 700 !important;
    }

    /* Stock: visible et compact */
    html body .products-list .list-compact-view .product-stock-level {
        font-size: 9px !important;
        margin-top: 4px !important;
    }

    /* Cacher les éléments non nécessaires sur mobile - ULTRA SPÉCIFIQUE */
    html body .products-list .product-item .list-compact-view .list-tocart-form,
    html body .products-list .product-item .list-compact-view .list-actions,
    html body .products-list .product-item .list-compact-view .list-qty-box,
    html body .products-list .product-item .list-compact-view .unit-label,
    html body .products-list .product-item .list-compact-view .product-sku,
    html body .products-list .product-item .list-compact-view .product-ean,
    html body .products-list .product-item .list-compact-view .product-meta-line {
        display: none !important;
    }

    /* ==========================================================
       MODE GRILLE SUR MOBILE: Ajustements mineurs
       ========================================================== */

    .products-grid .product-item .product-item-photo {
        text-align: center;
        margin-bottom: 8px;
    }

    .products-grid .product-item .product-item-photo img {
        max-width: 100%;
        height: auto;
        max-height: 150px;
        object-fit: contain;
    }

    .products-grid .product-item .product-item-name,
    .products-grid .product-item .product-item-link {
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .products-grid .product-item .price {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Masquer SKU/EAN sur mobile */
    .products-grid .product-item [class*="sku"],
    .products-grid .product-item [class*="ean"] {
        display: none !important;
    }

    .products-grid .product-item .stock,
    .products-grid .product-item .product-stock-level {
        font-size: 10px !important;
    }
}

/* Masquer l'ancienne structure en mode liste */
.products-list .list-compact-view ~ .product-item-info:not(.list-compact-view) {
    display: none;
}

/* ==============================================
   AUTOCOMPLETE - Listing Style
   ============================================== */

.autocomplete-suggestions .autocomplete-suggestion {
    padding: 0 !important;
    border-bottom: 1px solid #eee;
}

.autocomplete-suggestions .autocomplete-suggestion:last-child {
    border-bottom: none;
}

.autocomplete-suggestions .suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.autocomplete-suggestions .autocomplete-suggestion:hover,
.autocomplete-suggestions .autocomplete-suggestion.selected,
.autocomplete-suggestions .autocomplete-selected {
    background-color: #ffe8d6 !important;
}

/* Lien "Rechercher [terme]" */
.autocomplete-suggestions .mpsearch-search-all {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.autocomplete-suggestions .mpsearch-search-link {
    color: #333 !important;
    text-decoration: none;
    font-size: 14px;
    display: inline !important;
}

.autocomplete-suggestions .mpsearch-search-link:hover {
    color: #ff5501 !important;
}

.autocomplete-suggestions .mpsearch-search-link i {
    font-size: 16px;
    margin-right: 8px;
}

.autocomplete-suggestions .mpsearch-search-link strong {
    display: inline !important;
}

.autocomplete-suggestions .autocomplete-suggestion:hover .suggestion-item,
.autocomplete-suggestions .autocomplete-suggestion.selected .suggestion-item,
.autocomplete-suggestions .autocomplete-selected .suggestion-item {
    background-color: transparent;
}

/* Image */
.autocomplete-suggestions .suggestion-image {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.autocomplete-suggestions .suggestion-image img {
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
}

/* Infos produit (centre) */
.autocomplete-suggestions .suggestion-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.autocomplete-suggestions .suggestion-info .product-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.autocomplete-suggestions .suggestion-info .product-meta {
    font-size: 11px;
    color: #666;
    margin-bottom: 1px;
}

.autocomplete-suggestions .suggestion-info .product-meta .sku,
.autocomplete-suggestions .suggestion-info .product-meta .ean,
.autocomplete-suggestions .suggestion-info .product-meta .condition {
    display: inline-block;
    margin-right: 10px;
}

.autocomplete-suggestions .suggestion-info .product-meta .sku strong,
.autocomplete-suggestions .suggestion-info .product-meta .ean strong,
.autocomplete-suggestions .suggestion-info .product-meta .condition strong {
    font-weight: 700;
    color: #333;
}

/* Stock */
.autocomplete-suggestions .suggestion-info .product-stock {
    font-size: 11px;
    font-weight: 600;
}

.autocomplete-suggestions .suggestion-info .product-stock::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.autocomplete-suggestions .suggestion-info .product-stock.out-of-stock {
    color: #dc3545;
}
.autocomplete-suggestions .suggestion-info .product-stock.out-of-stock::before {
    background-color: #dc3545;
}

.autocomplete-suggestions .suggestion-info .product-stock.low-stock {
    color: #e67e00;
}
.autocomplete-suggestions .suggestion-info .product-stock.low-stock::before {
    background-color: #e67e00;
}

.autocomplete-suggestions .suggestion-info .product-stock.in-stock {
    color: #28a745;
}
.autocomplete-suggestions .suggestion-info .product-stock.in-stock::before {
    background-color: #28a745;
}

.autocomplete-suggestions .suggestion-info .product-stock.high-stock {
    color: #28a745;
}
.autocomplete-suggestions .suggestion-info .product-stock.high-stock::before {
    background-color: #28a745;
}

/* Prix (droite) */
.autocomplete-suggestions .suggestion-price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: right;
    padding-left: 10px;
}

.autocomplete-suggestions .suggestion-price .price-value {
    white-space: nowrap;
}

/* FPT dans les suggestions de recherche */
.autocomplete-suggestions .suggestion-fpt {
    margin-top: 2px;
    text-align: right;
}

.autocomplete-suggestions .suggestion-fpt .fpt-title {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #888;
    line-height: 1.2;
}

.autocomplete-suggestions .suggestion-fpt .fpt-item {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #666;
    white-space: nowrap;
    line-height: 1.3;
    margin-right: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .autocomplete-suggestions .suggestion-item {
        padding: 10px;
        gap: 10px;
    }

    .autocomplete-suggestions .suggestion-image {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }

    .autocomplete-suggestions .suggestion-image img {
        max-width: 48px;
        max-height: 48px;
    }

    .autocomplete-suggestions .suggestion-info .product-name {
        font-size: 12px;
    }

    .autocomplete-suggestions .suggestion-price {
        font-size: 14px;
    }
}

/* ==============================================
   MODE DENSE (TABLEAU)
   ============================================== */

/* Icone mode dense dans la toolbar */
.modes-mode.mode-dense::before {
    content: "\f0c9";
    font-family: "FontAwesome";
}

/* Table dense */
.products-dense {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dense-product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dense-product-table thead th {
    background: #f5f5f5;
    border-bottom: 2px solid #ddd;
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: #555;
    white-space: nowrap;
}

.dense-product-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s ease;
}

.dense-product-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.dense-product-table tbody tr:hover {
    background-color: #fff5ee;
}

.dense-product-table td {
    padding: 8px 12px;
    vertical-align: middle;
}

/* Colonne nom produit */
.dense-col-name {
    min-width: 250px;
}

.dense-product-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dense-product-thumb {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #eee;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.dense-product-thumb img {
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
}

.dense-product-link {
    font-weight: 600;
    color: #333;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dense-product-link:hover {
    color: #ff5501;
}

/* Colonne SKU / EAN */
.dense-col-sku,
.dense-col-ean {
    white-space: nowrap;
    font-size: 12px;
    color: #555;
}

/* Colonne stock - pastille */
.dense-col-stock {
    text-align: center;
    width: 60px;
}

.stock-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.stock-dot.out-of-stock {
    background-color: #dc3545;
}

.stock-dot.low-stock {
    background-color: #e67e00;
}

.stock-dot.in-stock {
    background-color: #28a745;
}

.stock-dot.high-stock {
    background-color: #28a745;
}

/* Colonne quantite + panier */
.dense-col-qty {
    white-space: nowrap;
}

.dense-tocart-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.dense-qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

.dense-qty-box .qty-btn {
    width: 28px;
    height: 32px;
    border: none;
    background: #fff;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s;
}

.dense-qty-box .qty-btn:hover {
    color: #ff5501;
}

.dense-qty-box .qty-btn.disabled,
.dense-qty-box .qty-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.dense-qty-box .qty {
    width: 36px;
    height: 32px;
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    -moz-appearance: textfield;
    padding: 0;
    margin: 0;
}

.dense-qty-box .qty::-webkit-outer-spin-button,
.dense-qty-box .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Bouton panier dense — spécificité élevée pour éviter les !important */
.products-dense .dense-tocart-form button.action.tocart.primary.dense-cart-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    background-color: #222;
    border-color: #222;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0;
    line-height: 1;
}

.products-dense .dense-tocart-form button.action.tocart.primary.dense-cart-btn::before {
    content: "\e80d";
    font-family: "porto-icons";
    font-size: 14px;
    color: #fff;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.products-dense .dense-tocart-form button.action.tocart.primary.dense-cart-btn:hover {
    background-color: #ff5501;
    border-color: #ff5501;
}

.products-dense .dense-tocart-form button.dense-cart-btn span {
    display: none;
}

.dense-out-of-stock {
    font-size: 11px;
    color: #dc3545;
    font-weight: 600;
}

/* Colonne prix */
.dense-col-price {
    white-space: nowrap;
    text-align: right;
    min-width: 80px;
}

.dense-col-price .price-box {
    margin: 0;
}

.dense-col-price .price {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.dense-col-price .old-price .price {
    font-size: 11px;
    color: #999;
    text-decoration: line-through;
    font-weight: 400;
}

.dense-col-price .special-price .price {
    color: #e74c3c;
}

/* Responsive dense */
@media (max-width: 767px) {
    .products-dense {
        margin: 0 -15px;
        padding: 0 15px;
    }

    .dense-product-table {
        font-size: 12px;
        min-width: 700px;
    }

    .dense-product-table thead th,
    .dense-product-table td {
        padding: 6px 8px;
    }

    .dense-col-name {
        min-width: 180px;
    }
}

/* ==============================================
   MASQUER LES LABELS WEEE/FPT PARTOUT
   ============================================== */

/* Masquer tous les éléments Weee avec data-label */
.weee[data-label],
.cart-tax-info,
.minicart-tax-info,
span[data-label*="Taxe"],
span[data-label*="DEEE"],
span[data-label*="TCP"] {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Masquer les pseudo-éléments ::before qui génèrent les labels */
.weee[data-label]::before,
.cart-tax-info::before,
span[data-label*="Taxe"]::before,
span[data-label*="DEEE"]::before,
span[data-label*="TCP"]::before {
    content: none !important;
    display: none !important;
}

/* Masquer les éléments weee dans les conteneurs de prix (sauf .price-container qui contient le prix) */
.price-wrapper .weee:not(.price-container),
.cart-price .weee:not(.price-container),
.minicart-price .weee:not(.price-container),
.price-including-tax .weee:not(.price-container),
.price-excluding-tax .weee:not(.price-container),
.product-item-inner .weee:not(.price-container),
.product-item-details .weee:not(.price-container),
td.subtotal .weee:not(.price-container),
td.col.subtotal .weee:not(.price-container),
td.col.price .weee:not(.price-container),
.cart.item .weee:not(.price-container) {
    display: none !important;
}

/* Spécifique panier Magento */
#shopping-cart-table .weee,
.cart-summary .weee,
.checkout-cart-index .weee,
.opc-block-summary .weee {
    display: none !important;
}

/* ==============================================
   MASQUER "Estimer la livraison et la TVA"
   ============================================== */
#block-shipping {
    display: none !important;
}

/* ==============================================
   Onglets catégories accessoires (pages téléphones)
   Style contrôle segmenté
   ============================================== */
.konect-accessories-tabs-wrap {
    display: inline-flex;
    background: #f3f3f3;
    border-radius: 8px;
    padding: 4px;
    position: relative;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
}

.konect-accessories-tabs-wrap .konect-tabs-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.konect-accessories-tabs {
    display: flex;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.konect-accessories-tabs .konect-tab {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: color 0.25s;
    background: none;
    border: none;
    border-radius: 6px;
    white-space: nowrap;
}

.konect-accessories-tabs .konect-tab:hover {
    color: #222;
}

.konect-accessories-tabs .konect-tab.active {
    color: #ff5501;
    font-weight: 600;
}

.konect-accessories-tabs .konect-tab .tab-count {
    font-weight: 400;
    font-size: 11.5px;
    opacity: 0.6;
}

.konect-accessories-tabs .konect-tab.active .tab-count {
    opacity: 0.8;
}

/* Désactiver l'image hover sur les accessoires (décalée car le conteneur est plus large que l'image) */
.konect-accessories-grid .product-item-photo img.hover_image,
.konect-accessories-grid .item.product-item .product-item-photo .hover_image {
    display: none !important;
    visibility: hidden !important;
}

/* Masquage des produits filtrés par onglet - surcharge le display:block !important de styles-m.css */
.konect-accessories-grid .item.product-item.konect-tab-hidden {
    display: none !important;
}

/* Masquage des produits paginés */
.konect-accessories-grid .item.product-item.konect-page-hidden {
    display: none !important;
}

/* ==============================================
   Pagination accessoires
   ============================================== */
.konect-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    padding: 0;
}

.konect-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.konect-page-btn:hover:not(:disabled) {
    border-color: #ff5501;
    color: #ff5501;
    background: #fff5f0;
}

.konect-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.konect-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.konect-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.konect-page-num:hover {
    border-color: #ff5501;
    color: #ff5501;
    background: #fff5f0;
}

.konect-page-num.active {
    background: #ff5501;
    border-color: #ff5501;
    color: #fff;
    font-weight: 600;
    cursor: default;
}

.konect-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    color: #999;
    font-size: 14px;
    letter-spacing: 2px;
}

/* Mobile: le wrapper .products-grid des accessoires ne doit PAS être une grille 2 colonnes */
@media (max-width: 767px) {
    .block.related .products.wrapper.grid.products-grid,
    .konect-phone-accessories .products.wrapper.grid.products-grid {
        display: block !important;
    }

    .konect-accessories-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 639px) {
    .konect-accessories-tabs {
        gap: 6px;
    }
    .konect-accessories-tabs .konect-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
}