/*
 * OG e-Commerce — woocommerce.css
 * Boutique 5 colonnes, sidebar accordéon élégante, bannière fallback.
 */

/* ════════════════════════════════════════════════════════════════════════
   1. BANNIÈRE BOUTIQUE — Fallback élégant sans image
   ════════════════════════════════════════════════════════════════════════ */
.og-shop-banner {
    min-height: 260px;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(204,0,0,0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%),
        linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 40%, #2a1a1a 70%, #1a0808 100%);
    position: relative;
    overflow: hidden;
}

/* Motif géométrique décoratif */
.og-shop-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 40px,
            rgba(204,0,0,0.03) 40px,
            rgba(204,0,0,0.03) 41px
        );
    pointer-events: none;
}

/* Cercle déco droite */
.og-shop-banner::after {
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid rgba(204,0,0,0.12);
    box-shadow: 0 0 0 60px rgba(204,0,0,0.04),
                0 0 0 120px rgba(204,0,0,0.02);
    pointer-events: none;
}

/* Ligne accent bas */
.og-shop-banner .og-page-banner__overlay {
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.1) 100%
    );
}

/* ════════════════════════════════════════════════════════════════════════
   2. LAYOUT BOUTIQUE
   ════════════════════════════════════════════════════════════════════════ */
.og-shop-wrap { padding-block: var(--ci-space-xl) var(--ci-space-3xl); }

.og-shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--ci-space-xl);
    align-items: flex-start;
    margin-top: var(--ci-space-xl);
}

/* ════════════════════════════════════════════════════════════════════════
   3. SIDEBAR CATÉGORIES — Design accordéon élégant
   ════════════════════════════════════════════════════════════════════════ */
.og-shop-sidebar__inner {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: var(--ci-space-md);
}

.og-shop-filter {
    background: #fff;
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--ci-radius-xl);
    padding: var(--ci-space-lg);
    overflow: hidden;
}

.og-shop-filter__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ci-text-muted);
    margin-bottom: var(--ci-space-md);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: var(--ci-space-sm);
    border-bottom: 1px solid var(--ci-gray-100);
}
.og-shop-filter__title i { color: var(--ci-red); font-size: 0.8rem; }

/* ── Sidebar catégories — reset total bullets WooCommerce ─────────── */
.og-shop-filter ul.product-categories,
.og-shop-filter ul.product-categories li,
.og-shop-filter ul.product-categories ul,
.widget_product_categories ul,
.widget_product_categories li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Supprimer le ::marker et le ::before natifs */
.og-shop-filter ul.product-categories li::marker,
.og-shop-filter ul.product-categories li::before {
    content: none !important;
    display: none !important;
}
.og-shop-filter .product-categories {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Chaque item catégorie */
.og-shop-filter .product-categories > li {
    position: relative;
    border-radius: var(--ci-radius);
    overflow: visible;
}

/* Lien catégorie mère */
.og-shop-filter .product-categories > li > a {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ci-text);
    border-radius: var(--ci-radius);
    text-decoration: none;
    transition: background 0.18s, color 0.18s, padding-left 0.18s;
    position: relative;
    z-index: 1;
}

.og-shop-filter .product-categories > li > a:hover {
    background: var(--ci-red-100);
    color: var(--ci-red);
    padding-left: 14px;
}

/* Item actif */
.og-shop-filter .product-categories > li.current-cat > a,
.og-shop-filter .product-categories > li.current-cat-parent > a,
.og-shop-filter .product-categories > li.og-cat-active > a {
    background: var(--ci-red-100);
    color: var(--ci-red);
    font-weight: 700;
}

/* Bordure gauche sur actif */
.og-shop-filter .product-categories > li.current-cat > a::before,
.og-shop-filter .product-categories > li.current-cat-parent > a::before,
.og-shop-filter .product-categories > li.og-cat-active > a::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--ci-red);
    border-radius: 0 3px 3px 0;
}

/* Compteur — badge pill discret */
.og-shop-filter .product-categories > li > a .count,
.og-shop-filter .product-categories > li .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    background: var(--ci-gray-100);
    color: var(--ci-text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: var(--ci-radius-full);
    margin-left: auto;
    flex-shrink: 0;
}
.og-shop-filter .product-categories > li.current-cat > a .count,
.og-shop-filter .product-categories > li.og-cat-active > a .count {
    background: var(--ci-red);
    color: #fff;
}

/* Bouton flèche accordéon */
.og-cat-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--ci-radius-sm);
    color: var(--ci-text-muted);
    font-size: 0.6rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.28s ease;
    z-index: 2;
    padding: 0;
}
.og-cat-arrow:hover { background: var(--ci-gray-100); color: var(--ci-red); }

/* Flèche rotée quand ouvert */
.og-cat-open > .og-cat-arrow { transform: translateY(-50%) rotate(-180deg); color: var(--ci-red); }
.og-cat-open > .og-cat-arrow i { color: var(--ci-red); }

/* Ajuster le padding du lien si flèche présente */
.og-shop-filter .product-categories > li.cat-parent > a { padding-right: 36px; }

/* Sous-catégories */
.og-shop-filter .product-categories .children {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 4px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.og-shop-filter .product-categories .children li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ci-text-light);
    border-radius: var(--ci-radius);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.og-shop-filter .product-categories .children li a::before {
    content: '—';
    font-size: 0.6rem;
    color: var(--ci-red);
    flex-shrink: 0;
    opacity: 0.5;
}
.og-shop-filter .product-categories .children li a:hover {
    background: var(--ci-gray-100);
    color: var(--ci-red);
    padding-left: 24px;
}
.og-shop-filter .product-categories .children li a:hover::before { opacity: 1; }
.og-shop-filter .product-categories .children li.current-cat a {
    color: var(--ci-red);
    font-weight: 700;
    background: var(--ci-red-100);
}

/* CTA devis sidebar */
.og-shop-sidebar__cta {
    background: linear-gradient(135deg, var(--ci-red-100) 0%, rgba(204,0,0,0.05) 100%);
    border-color: rgba(204,0,0,0.15);
}
.og-shop-sidebar__cta p {
    font-size: 0.8125rem;
    color: var(--ci-red);
    font-weight: 600;
    margin-bottom: var(--ci-space-sm);
    line-height: 1.4;
}

/* ── Catégories sidebar — rendu manuel sans bullets ─────────────────── */
.og-cat-list { display: flex; flex-direction: column; gap: 2px; }
.og-cat-item { position: relative; }
.og-cat-link {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 36px 8px 10px;
    font-size: 0.875rem; font-weight: 600; color: var(--ci-text);
    border-radius: var(--ci-radius); text-decoration: none;
    transition: background 0.18s, color 0.18s, padding-left 0.18s;
}
.og-cat-link:hover { background: var(--ci-red-100); color: var(--ci-red); padding-left: 14px; }
.og-cat-link--active { background: var(--ci-red-100); color: var(--ci-red); font-weight: 700; }
.og-cat-item.og-cat-link--active::before,
.og-cat-item:has(.og-cat-link--active) > .og-cat-link--active::before {
    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; background: var(--ci-red); border-radius: 0 3px 3px 0;
}
.og-cat-link__name { flex: 1; }
.og-cat-link__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 5px;
    background: var(--ci-gray-100); color: var(--ci-text-muted);
    font-size: 0.6875rem; font-weight: 700; border-radius: var(--ci-radius-full); flex-shrink: 0;
}
.og-cat-link--active .og-cat-link__count { background: var(--ci-red); color: #fff; }
.og-cat-arrow {
    position: absolute; right: 6px; top: 7px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: var(--ci-radius-sm);
    color: var(--ci-text-muted); font-size: 0.6rem; cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.28s ease; padding: 0;
}
.og-cat-arrow:hover { background: var(--ci-gray-100); color: var(--ci-red); }
.og-cat-item.og-cat-open > .og-cat-arrow { transform: rotate(-180deg); color: var(--ci-red); }
.og-cat-children {
    overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease;
    display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px;
}
.og-cat-child-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 20px;
    font-size: 0.8125rem; font-weight: 500; color: var(--ci-text-light);
    border-radius: var(--ci-radius); text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.og-cat-child-link span:first-child { color: var(--ci-red); opacity: 0.5; font-size: 0.65rem; flex-shrink: 0; }
.og-cat-child-link:hover { background: var(--ci-gray-100); color: var(--ci-red); }
.og-cat-child-link:hover span:first-child { opacity: 1; }
.og-cat-child-link.og-cat-link--active { color: var(--ci-red); font-weight: 700; background: var(--ci-red-100); }
/* Bouton Toutes les catégories */
.og-cat-all-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: var(--ci-red);
    border-radius: var(--ci-radius);
    text-decoration: none;
    transition: background 0.18s;
}
.og-cat-all-btn:hover { background: var(--ci-red-hover); color: #fff; }
.og-cat-all-btn i { font-size: 0.75rem; }

/* Séparation légère entre catégories */
.og-cat-item {
    border-bottom: 1px solid var(--ci-gray-100);
    padding-bottom: 2px;
}
.og-cat-item:last-child { border-bottom: none; }


/* ════════════════════════════════════════════════════════════════════════
   4. TOOLBAR
   ════════════════════════════════════════════════════════════════════════ */
.og-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ci-space-lg);
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--ci-gray-200);
    border-radius: var(--ci-radius-lg);
    flex-wrap: wrap;
    gap: var(--ci-space-sm);
}
.og-shop-count { font-size: 0.8125rem; color: var(--ci-text-light); font-weight: 500; }
.woocommerce-ordering select {
    padding: 7px 28px 7px 10px;
    border: 1.5px solid var(--ci-gray-200);
    border-radius: var(--ci-radius);
    font-size: 0.8125rem; color: var(--ci-text); background: #fff;
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    transition: border-color 0.2s;
}
.woocommerce-ordering select:focus { border-color: var(--ci-red); outline: none; }

/* ════════════════════════════════════════════════════════════════════════
   5. GRILLE PRODUITS — 5 colonnes forcées
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce .products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
    list-style: none !important;
    margin: 0 0 var(--ci-space-xl) !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

/* ── Carte produit — compacte et élégante ────────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: #fff;
    border-radius: var(--ci-radius-lg);
    border: 1px solid var(--ci-gray-200);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    margin: 0 !important;
    opacity: 0;
    transform: translateY(16px);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease,
                opacity 0.45s ease !important;
}
.woocommerce ul.products li.product.og-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* ── Fix WooCommerce li.first/last float natif ───────────────────────── */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
    clear: none !important;
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.woocommerce .columns-5 ul.products li.product,
.woocommerce ul.products.columns-5 li.product {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.11) !important;
    transform: translateY(-4px) !important;
    border-color: var(--ci-gray-300) !important;
}

/* Zone image — SEULEMENT l'image, pas le titre ni le prix */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    background: transparent !important;
    aspect-ratio: unset !important;
    text-decoration: none !important;
}

/* Wrapper image uniquement */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0.75rem !important;
    background: var(--ci-gray-100) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    transition: transform 0.38s ease !important;
    display: block !important;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.07) !important; }

/* Titre — compact */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--ci-text) !important;
    padding: 0.6rem 0.75rem 0.2rem !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.4em;
}

/* Prix — forcé visible dans TOUS les cas */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
ul.products li.product .price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0.1rem 0.75rem 0.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: var(--ci-red) !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1.5em !important;
}
.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: var(--ci-text-muted) !important;
    text-decoration: line-through !important;
    visibility: visible !important;
    opacity: 0.7 !important;
    display: inline !important;
}
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--ci-red) !important;
    font-weight: 800 !important;
    display: inline !important;
    background: none !important;
}
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price > .amount,
ul.products li.product .price ins .amount,
ul.products li.product .price > .amount {
    color: var(--ci-red) !important;
    font-weight: 800 !important;
    font-size: 0.9375rem !important;
    display: inline !important;
}

/* Actions boutons — Voir au-dessus, Ajouter au panier en dessous */
.og-ec-card-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 0.625rem 0.75rem;
    margin-top: auto;
}

/* Bouton "Voir le produit 👁" — icône à la FIN */
.og-ec-card-actions .og-ec-btn--outline {
    width: 100%;
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--ci-radius);
    text-align: center;
    justify-content: center;
    flex-direction: row-reverse; /* icône passe à droite */
    gap: 5px;
}

/* Bouton "Ajouter au panier +" — ligne du bas */
.og-ec-card-actions .button.add_to_cart_button {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0.45rem 0.5rem !important;
    background: var(--ci-red) !important;
    color: #fff !important;
    font-family: var(--ci-font) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: var(--ci-radius) !important;
    border: 2px solid var(--ci-red) !important;
    transition: background 0.2s !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}
.og-ec-card-actions .button.add_to_cart_button::after {
    content: '\f067';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    opacity: 0.9;
}
.og-ec-card-actions .button.add_to_cart_button:hover {
    background: var(--ci-red-hover) !important;
    border-color: var(--ci-red-hover) !important;
}
.og-ec-card-actions .added_to_cart { display: none !important; }

/* Badge sale WC */
.woocommerce span.onsale {
    background: #f59e0b !important; color: #fff !important;
    font-size: 0.65rem !important; font-weight: 700 !important;
    border-radius: var(--ci-radius-full) !important;
    padding: 2px 7px !important; min-height: auto !important; min-width: auto !important;
    line-height: 1.5 !important; top: 8px !important; left: 8px !important; right: auto !important;
}

/* Pagination */
.og-shop-pagination { margin-top: var(--ci-space-xl); }
.woocommerce-pagination ul { display: flex; gap: 5px; list-style: none; justify-content: center; flex-wrap: wrap; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--ci-radius);
    border: 1.5px solid var(--ci-gray-200);
    font-size: 0.875rem; font-weight: 600; color: var(--ci-text); transition: var(--ci-transition);
}
.woocommerce-pagination ul li a:hover { border-color: var(--ci-red); color: var(--ci-red); }
.woocommerce-pagination ul li span.current { background: var(--ci-red); border-color: var(--ci-red); color: #fff; }

/* Vide */
.og-shop-empty { text-align: center; padding: var(--ci-space-3xl) var(--ci-space-lg); }
.og-shop-empty i { font-size: 3rem; color: var(--ci-gray-light); margin-bottom: var(--ci-space-lg); }
.og-shop-empty h2 { font-size: 1.375rem; margin-bottom: var(--ci-space-sm); }
.og-shop-empty p { max-width: 400px; margin: 0 auto var(--ci-space-xl); font-size: 0.9375rem; }
.og-shop-empty__actions { display: flex; gap: var(--ci-space-md); justify-content: center; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════
   6. FICHE PRODUIT
   ════════════════════════════════════════════════════════════════════════ */
.og-single-product-wrap { padding-block: var(--ci-space-2xl) var(--ci-space-3xl); }
.og-product-single__main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-space-3xl); margin-bottom: var(--ci-space-3xl); align-items: flex-start; }
.woocommerce div.product div.images { position: sticky; top: 90px; }
.woocommerce-product-gallery__image img { border-radius: var(--ci-radius-xl); border: 1px solid var(--ci-gray-200); }
.woocommerce-product-gallery__trigger { background: var(--ci-red) !important; border-radius: var(--ci-radius) !important; }
.og-product-single__summary-inner .product_title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--ci-text); margin-bottom: var(--ci-space-sm); line-height: 1.2; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 1.875rem !important; font-weight: 800 !important; color: var(--ci-red) !important; margin-bottom: var(--ci-space-md) !important; }
.woocommerce div.product p.price del { font-size: 1rem !important; font-weight: 400 !important; color: var(--ci-text-muted) !important; opacity: 0.7; margin-right: 8px; }
.woocommerce div.product .woocommerce-product-details__short-description { font-size: 0.9375rem; color: var(--ci-text-light); line-height: 1.7; margin-bottom: var(--ci-space-lg); }
/* ── Fiche produit : boutons harmonisés ─────────────────────────────── */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .single_add_to_cart_button {
    background: var(--ci-red) !important;
    color: #fff !important;
    font-family: var(--ci-font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: var(--ci-radius) !important;
    border: none !important;
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: var(--ci-space-sm) !important;
    transition: background 0.2s, transform 0.2s !important;
    cursor: pointer !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: var(--ci-red-hover) !important;
    transform: translateY(-1px) !important;
}

/* Bouton WhatsApp fiche produit — même taille exacte que add to cart */
.woocommerce div.product .og-ec-btn--whatsapp,
.woocommerce div.product .og-ec-btn--whatsapp.og-ec-btn--block,
.og-product-single__summary-inner .og-ec-btn--whatsapp,
.og-product-single__summary .og-ec-btn--whatsapp {
    min-height: 52px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.875rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    border-radius: var(--ci-radius) !important;
    margin-bottom: var(--ci-space-sm) !important;
    background: var(--ci-whatsapp) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.woocommerce div.product .og-ec-btn--whatsapp:hover,
.og-product-single__summary-inner .og-ec-btn--whatsapp:hover {
    background: var(--ci-whatsapp-dark) !important;
}
.woocommerce div.product form.cart .qty { width: 80px; padding: 0.65rem 1rem; border: 1.5px solid var(--ci-gray-200); border-radius: var(--ci-radius); font-size: 1rem; font-weight: 600; text-align: center; }
.woocommerce div.product .product_meta { font-size: 0.875rem; color: var(--ci-text-muted); padding-top: var(--ci-space-md); border-top: 1px solid var(--ci-gray-200); margin-top: var(--ci-space-md); }
.woocommerce div.product .product_meta a { color: var(--ci-red); }
.og-product-single__trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-space-sm); margin-top: var(--ci-space-lg); padding: var(--ci-space-md); background: var(--ci-gray-100); border-radius: var(--ci-radius-lg); }
.og-product-single__trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ci-text-light); font-weight: 500; }
.og-product-single__trust-item i { color: var(--ci-red); font-size: 0.875rem; flex-shrink: 0; }
.og-product-single__tabs { margin-top: var(--ci-space-2xl); }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 4px; list-style: none; border-bottom: 2px solid var(--ci-gray-200); margin-bottom: var(--ci-space-xl); padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 0.75rem 1.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--ci-text-light); border-radius: var(--ci-radius) var(--ci-radius) 0 0; transition: color 0.2s, background 0.2s; }
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a { color: var(--ci-red); background: var(--ci-gray-100); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ci-red); border-bottom: 2px solid var(--ci-red); margin-bottom: -2px; }

/* ════════════════════════════════════════════════════════════════════════
   7. PANIER & CHECKOUT
   ════════════════════════════════════════════════════════════════════════ */
.og-cart-wrap { padding-block: var(--ci-space-2xl) var(--ci-space-3xl); }
.og-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--ci-space-2xl); align-items: flex-start; }
.og-cart-table { width: 100%; border-collapse: collapse; }
.og-cart-table th { padding: var(--ci-space-md); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ci-text-muted); border-bottom: 2px solid var(--ci-gray-200); text-align: left; }
.og-cart-table td { padding: var(--ci-space-md); border-bottom: 1px solid var(--ci-gray-100); vertical-align: middle; }
.og-cart-table tr:last-child td { border-bottom: none; }
.og-cart-table__img { width: 80px; }
.og-cart-table__img img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--ci-radius); background: var(--ci-gray-100); padding: 6px; }
.og-cart-item__name { font-weight: 600; color: var(--ci-text); font-size: 0.9375rem; }
.og-cart-remove { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--ci-gray-100); border-radius: 50%; color: var(--ci-text-muted); font-size: 0.875rem; transition: background 0.2s, color 0.2s; }
.og-cart-remove:hover { background: #fef2f2; color: var(--ci-red); }
.og-cart-actions { display: flex; align-items: center; gap: var(--ci-space-md); padding-top: var(--ci-space-md); flex-wrap: wrap; }
.og-cart-coupon { display: flex; align-items: center; gap: var(--ci-space-sm); flex: 1; }
.og-cart-coupon__label { font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.og-cart-coupon__field { display: flex; gap: 6px; flex: 1; }
.og-cart-coupon__input { flex: 1; padding: 0.6rem 1rem; border: 1.5px solid var(--ci-gray-200); border-radius: var(--ci-radius); font-size: 0.9rem; transition: border-color 0.2s; }
.og-cart-coupon__input:focus { border-color: var(--ci-red); outline: none; }
.og-cart-totals-col { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--ci-space-md); }
.og-cart-totals { background: #fff; border: 1px solid var(--ci-gray-200); border-radius: var(--ci-radius-xl); padding: var(--ci-space-xl); }
.og-cart-totals__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--ci-space-lg); padding-bottom: var(--ci-space-md); border-bottom: 1px solid var(--ci-gray-200); }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th, .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--ci-gray-100); font-size: 0.9375rem; }
.cart_totals table tr:last-child th, .cart_totals table tr:last-child td { border-bottom: none; font-size: 1.0625rem; font-weight: 800; color: var(--ci-red); padding-top: var(--ci-space-md); }
.cart_totals .wc-proceed-to-checkout { margin-top: var(--ci-space-md); }
.cart_totals .checkout-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; padding: 1rem !important; background: var(--ci-red) !important; color: #fff !important; font-family: var(--ci-font) !important; font-size: 1rem !important; font-weight: 700 !important; border-radius: var(--ci-radius) !important; border: none !important; transition: background 0.2s !important; }
.cart_totals .checkout-button:hover { background: var(--ci-red-hover) !important; }
.og-cart-payment-note { display: flex; align-items: flex-start; gap: 8px; padding: var(--ci-space-md); background: var(--ci-gray-100); border-radius: var(--ci-radius); font-size: 0.8125rem; color: var(--ci-text-light); margin-top: var(--ci-space-md); }
.og-cart-payment-note i { color: var(--ci-red); margin-top: 2px; flex-shrink: 0; }
.og-cart-help { background: #fff; border: 1px solid var(--ci-gray-200); border-radius: var(--ci-radius-xl); padding: var(--ci-space-lg); text-align: center; }
.og-cart-help p { font-size: 0.875rem; color: var(--ci-text-light); margin-bottom: var(--ci-space-md); }
.og-cart-empty { text-align: center; padding: var(--ci-space-3xl) var(--ci-space-lg); }
.og-cart-empty__icon { font-size: 3.5rem; color: var(--ci-gray-light); margin-bottom: var(--ci-space-lg); }
.og-cart-empty h2 { font-size: 1.5rem; margin-bottom: var(--ci-space-sm); }
.og-cart-empty p { max-width: 420px; margin: 0 auto var(--ci-space-xl); }
.og-cart-empty__actions { display: flex; gap: var(--ci-space-md); justify-content: center; flex-wrap: wrap; }
.og-checkout-wrap { padding-block: var(--ci-space-2xl) var(--ci-space-3xl); }
.og-checkout-steps { display: flex; align-items: center; margin-bottom: var(--ci-space-2xl); }
.og-checkout-step { display: flex; align-items: center; gap: var(--ci-space-sm); flex: 1; position: relative; padding-right: var(--ci-space-xl); }
.og-checkout-step:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: calc(var(--ci-space-xl) - 6px); height: 2px; background: var(--ci-gray-200); }
.og-checkout-step--done::after, .og-checkout-step--active::after { background: var(--ci-red); }
.og-checkout-step__num { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.875rem; font-weight: 700; background: var(--ci-gray-200); color: var(--ci-text-muted); flex-shrink: 0; }
.og-checkout-step--done .og-checkout-step__num, .og-checkout-step--active .og-checkout-step__num { background: var(--ci-red); color: #fff; }
.og-checkout-layout { display: grid; grid-template-columns: 1fr 420px; gap: var(--ci-space-2xl); align-items: flex-start; }
.og-checkout-section { background: #fff; border: 1px solid var(--ci-gray-200); border-radius: var(--ci-radius-xl); padding: var(--ci-space-xl); margin-bottom: var(--ci-space-lg); }
.og-checkout-section__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--ci-space-sm); display: flex; align-items: center; gap: 10px; }
.og-checkout-section__title i { color: var(--ci-red); }
.og-checkout-section__subtitle { font-size: 0.875rem; color: var(--ci-text-muted); margin-bottom: var(--ci-space-lg); }
.woocommerce-billing-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ci-space-md); }
.woocommerce-billing-fields .form-row { margin: 0 !important; }
.woocommerce-billing-fields .form-row-wide, .woocommerce-billing-fields .form-row-last { grid-column: span 2; }
.woocommerce form .form-row label { font-size: 0.875rem; font-weight: 600; color: var(--ci-text); margin-bottom: 5px; display: block; }
.woocommerce form .form-row label .required { color: var(--ci-red); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select { width: 100% !important; padding: 0.7rem 1rem !important; border: 1.5px solid var(--ci-gray-300) !important; border-radius: var(--ci-radius) !important; font-family: var(--ci-font) !important; font-size: 0.9375rem !important; color: var(--ci-text) !important; background: #fff !important; min-height: 48px !important; box-shadow: none !important; transition: border-color 0.2s !important; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row select:focus { border-color: var(--ci-red) !important; outline: none !important; box-shadow: 0 0 0 3px var(--ci-red-100) !important; }
.og-checkout-order-review { background: #fff; border: 1px solid var(--ci-gray-200); border-radius: var(--ci-radius-xl); padding: var(--ci-space-xl); position: sticky; top: 90px; }
.og-checkout-order-table { width: 100%; border-collapse: collapse; margin-bottom: var(--ci-space-lg); }
.og-checkout-order-table th, .og-checkout-order-table td { padding: 10px 0; border-bottom: 1px solid var(--ci-gray-100); font-size: 0.875rem; }
.og-checkout-order-table__total-row th, .og-checkout-order-table__total-row td { font-size: 1.0625rem; font-weight: 800; color: var(--ci-red); padding-top: var(--ci-space-md); border-top: 2px solid var(--ci-gray-200); border-bottom: none; }
.og-checkout-payment-note { display: flex; gap: 10px; align-items: flex-start; background: var(--ci-gray-100); border-radius: var(--ci-radius); padding: var(--ci-space-md); margin-bottom: var(--ci-space-md); font-size: 0.875rem; }
.og-checkout-payment-note i { color: var(--ci-red); flex-shrink: 0; }
.og-checkout-payment-note strong { display: block; color: var(--ci-text); margin-bottom: 2px; }
.og-checkout-payment-note p { color: var(--ci-text-light); margin: 0; }
#place_order { margin-top: var(--ci-space-sm) !important; }
.og-checkout-wa-fallback { margin-top: var(--ci-space-md); padding: var(--ci-space-lg); background: var(--ci-gray-100); border-radius: var(--ci-radius-lg); text-align: center; }
.og-checkout-wa-fallback p { font-size: 0.875rem; color: var(--ci-text-light); margin-bottom: var(--ci-space-sm); }

/* ════════════════════════════════════════════════════════════════════════
   8. NOTICES WC
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-message, .woocommerce-error, .woocommerce-info { border-radius: var(--ci-radius-lg) !important; border: none !important; padding: var(--ci-space-md) var(--ci-space-lg) !important; font-size: 0.9375rem !important; display: flex !important; align-items: center !important; gap: var(--ci-space-md) !important; margin-bottom: var(--ci-space-md) !important; }
.woocommerce-message { background: #f0fdf4 !important; color: #166534 !important; }
.woocommerce-error   { background: #fef2f2 !important; color: #991b1b !important; }
.woocommerce-info    { background: #eff6ff !important; color: #1e40af !important; }
.woocommerce-message::before { display: none !important; }
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button { background: var(--ci-red) !important; color: #fff !important; border-radius: var(--ci-radius) !important; padding: 6px 14px !important; font-size: 0.875rem !important; font-weight: 700 !important; border: none !important; margin-left: auto !important; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .woocommerce ul.products { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1024px) {
    .og-shop-layout { grid-template-columns: 1fr; }
    .og-shop-sidebar { display: none; }
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
    .og-product-single__main { grid-template-columns: 1fr; gap: var(--ci-space-xl); }
    .og-cart-layout { grid-template-columns: 1fr; }
    .og-cart-totals-col { position: static; }
    .og-checkout-layout { grid-template-columns: 1fr; }
    .og-checkout-order-review { position: static; }
}
@media (max-width: 767px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .og-cart-table thead { display: none; }
    .og-cart-table td { display: block; padding: 6px var(--ci-space-md); }
    .og-checkout-step__label { display: none; }
    .woocommerce-billing-fields .form-row { grid-column: span 2; }
    .og-product-single__trust { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/*
 * ══════════════════════════════════════════════════════════════════════════
 * OG e-Commerce — woocommerce-additions.css  (v2 — design clair Connect SA)
 * À AJOUTER à la fin de assets/css/woocommerce.css
 *
 * Palette appliquée strictement :
 *   #CC0000  →  rouge Connect (--ci-red)
 *   #A50000  →  rouge hover  (--ci-red-hover)
 *   #F2F4F6  →  fond gris clair (--ci-gray-100)
 *   #E5E7EB  →  gris bordure   (--ci-gray-200)
 *   #1F2937  →  texte principal (--ci-text)
 *   #6B7280  →  texte secondaire (--ci-text-light)
 *   #111111  →  réservé footer  (--ci-dark)
 *   #FFFFFF  →  blanc
 * ══════════════════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════════════════
   FIX — ::before/::after parasites sur ul.products
   Ces pseudo-éléments générés par WooCommerce deviennent des grid items
   et décalent les produits : 4 au lieu de 5 sur la première ligne.
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
    display: none !important;
    content: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   B1 — SLIDER PROMOTIONS — Design clair, couleurs Connect SA
   ══════════════════════════════════════════════════════════════════════════ */

.og-promo-slider-wrap {
    background: var(--ci-red);             /* Rouge Connect */
    border-radius: var(--ci-radius-xl);
    padding: var(--ci-space-lg) var(--ci-space-xl);
    margin-bottom: var(--ci-space-xl);
    position: relative;
    overflow: hidden;
}

/* Motif géométrique discret en overlay */
.og-promo-slider-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 40px,
        rgba(0,0,0,0.04) 40px,
        rgba(0,0,0,0.04) 41px
    );
    pointer-events: none;
}

/* Cercle déco coin droit */
.og-promo-slider-wrap::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 0 44px rgba(255,255,255,0.04),
                0 0 0 88px rgba(255,255,255,0.02);
    pointer-events: none;
}

/* ── En-tête slider ────────────────────────────────────────────────────── */
.og-promo-slider__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ci-space-md);
    margin-bottom: var(--ci-space-lg);
    flex-wrap: wrap;
    position: relative;         /* passe au-dessus des pseudo-éléments */
    z-index: 1;
}

.og-promo-slider__title {
    display: flex;
    align-items: center;
    gap: var(--ci-space-md);
    flex-wrap: wrap;
}

.og-promo-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--ci-radius-full);
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.og-promo-slider__title h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ── Boutons nav ───────────────────────────────────────────────────────── */
.og-promo-slider__nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.og-slider-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.og-slider-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.28);
    transform: scale(1.1);
}

.og-slider-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* ── Track & slides ───────────────────────────────────────────────────── */
.og-promo-track-wrap {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.og-promo-track {
    display: flex;
    gap: 12px;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 4 slides visibles par défaut (desktop) */
.og-promo-slide {
    flex: 0 0 calc(25% - 9px);
    min-width: 0;
}

/* Carte produit promo — fond blanc sur rouge */
.og-promo-slide__inner {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--ci-radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    height: 100%;
}

.og-promo-slide__inner:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    transform: translateY(-3px);
}

/* Zone image */
.og-promo-slide__img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ci-gray-100);
    overflow: hidden;
    flex-shrink: 0;
}

.og-promo-slide__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.75rem;
    transition: transform 0.38s ease;
    display: block;
}

.og-promo-slide__inner:hover .og-promo-slide__img-wrap img {
    transform: scale(1.07);
}

/* Badge % remise */
.og-promo-slide__discount {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--ci-red);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: var(--ci-radius-sm);
    z-index: 2;
    line-height: 1;
}

/* Corps carte */
.og-promo-slide__body {
    padding: 0.65rem 0.8rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.og-promo-slide__body h3 {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ci-text);
    margin: 0;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.15em;
}

/* Prix */
.og-promo-slide__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
}

.og-promo-slide__old,
.og-promo-slide__old .woocommerce-Price-amount {
    font-size: 0.75rem !important;
    color: var(--ci-text-muted) !important;
    text-decoration: line-through !important;
}

.og-promo-slide__new,
.og-promo-slide__new .woocommerce-Price-amount {
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: var(--ci-red) !important;
    text-decoration: none !important;
}

/* CTA "Voir l'offre" */
.og-promo-slide__cta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ci-text-muted);
    transition: color 0.2s ease, gap 0.2s ease;
    margin-top: auto;
}

.og-promo-slide__inner:hover .og-promo-slide__cta {
    color: var(--ci-red);
    gap: 8px;
}

/* ── Responsive slider ─────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .og-promo-slide { flex: 0 0 calc(33.333% - 8px); }
}
@media (max-width: 900px) {
    .og-promo-slide { flex: 0 0 calc(50% - 6px); }
}
@media (max-width: 580px) {
    .og-promo-slider-wrap { padding: var(--ci-space-md); }
    .og-promo-slider__title h2 { font-size: 0.875rem; }
    .og-promo-slide { flex: 0 0 100%; }
}



/* ════════════════════════════════════════════════════════════════════════
   MOBILE DEEP FIX v4 — Android 360-480px
   Slider promo : 2 slides visibles = même taille que les cartes produits
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. CONTAINMENT GLOBAL ────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* NE PAS mettre overflow-x:hidden sur html/body — ça casse position:sticky du header.
       On contient le débordement uniquement sur les wrappers internes. */
    .og-ec-container,
    .og-shop-wrap,
    .og-homepage,
    .og-page-banner {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .og-ec-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-inline: 12px !important;
    }

    .og-shop-wrap,
    .og-shop-layout,
    .og-shop-main {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* ── 2. SLIDER : 2 slides visibles = aligné sur la grille produits ────── */
@media (max-width: 767px) {

    .og-promo-slider-wrap {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 14px 12px !important;
        border-radius: 12px !important;
    }

    .og-promo-track-wrap {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .og-promo-track { gap: 10px !important; }

    /*  Calcul : même largeur qu'une carte produit dans la grille 2 colonnes
        Container padding : 12px × 2 = 24px
        Slider padding   : 12px × 2 = 24px
        Gap inter-slides : 10px
        Largeur slide    = (100vw - 24px - 24px - 10px) / 2 = (100vw - 58px) / 2
    */
    .og-promo-slide {
        flex: 0 0 calc((100vw - 58px) / 2) !important;
        width: calc((100vw - 58px) / 2) !important;
        max-width: calc((100vw - 58px) / 2) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Image : même ratio 4:3 que les cartes produits */
    .og-promo-slide__img-wrap {
        aspect-ratio: 4 / 3 !important;
        max-height: none !important;   /* ratio contrôle la hauteur */
    }

    /* Corps carte : compact pour tenir dans la petite carte */
    .og-promo-slide__body {
        padding: 0.4rem 0.5rem 0.5rem !important;
        gap: 3px !important;
    }

    .og-promo-slide__body h3 {
        font-size: 0.68rem !important;
        min-height: unset !important;
        -webkit-line-clamp: 2 !important;
        line-height: 1.3 !important;
    }

    .og-promo-slide__old,
    .og-promo-slide__old .woocommerce-Price-amount {
        font-size: 0.62rem !important;
    }

    .og-promo-slide__new,
    .og-promo-slide__new .woocommerce-Price-amount {
        font-size: 0.8rem !important;
        font-weight: 800 !important;
    }

    .og-promo-slide__cta {
        font-size: 0.6rem !important;
        margin-top: 3px !important;
    }

    /* Badge % : petit */
    .og-promo-slide__discount {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
    }

    /* Boutons nav discrets */
    .og-promo-slider__nav { gap: 5px !important; }
    .og-slider-btn { width: 26px !important; height: 26px !important; font-size: 0.55rem !important; }

    /* Titre section compact */
    .og-promo-slider__title h2 { font-size: 0.8rem !important; }
    .og-promo-slider__header   { margin-bottom: 10px !important; }
}

/* ── 3. GRILLE PRODUITS : 2 colonnes forcées ──────────────────────────── */
@media (max-width: 767px) {

    html body .woocommerce ul.products,
    html body .woocommerce-page ul.products,
    html body ul.products,
    .og-shop-main ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body .woocommerce ul.products li.product,
    html body .woocommerce-page ul.products li.product,
    html body ul.products li.product {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Image produit : même ratio 4:3 que le slider */
    html body .woocommerce ul.products li.product
        a.woocommerce-loop-product__link img {
        aspect-ratio: 4 / 3 !important;
        max-height: none !important;
        padding: 0.4rem !important;
        object-fit: contain !important;
    }

    html body .woocommerce ul.products li.product
        .woocommerce-loop-product__title {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.45rem 0.1rem !important;
        min-height: unset !important;
        line-height: 1.3 !important;
    }

    html body .woocommerce ul.products li.product .price {
        font-size: 0.78rem !important;
        padding: 0 0.45rem 0.2rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1px !important;
    }

    .og-ec-card-actions { padding: 0 0.35rem 0.4rem !important; gap: 3px !important; }
    .og-ec-card-actions .og-ec-btn--outline,
    .og-ec-card-actions .button.add_to_cart_button {
        font-size: 0.6rem !important;
        padding: 0.28rem 0.3rem !important;
    }
    .og-ec-card-actions .button.add_to_cart_button::after { display: none !important; }

    .og-shop-toolbar { flex-direction: column !important; gap: 8px !important; padding: 10px 12px !important; }
    .woocommerce-ordering, .woocommerce-ordering select { width: 100% !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   10. FILTRE PRIX — Slider double poignée
   Utilisé dans : woocommerce/archive-product.php (.og-price-filter)
   JS associé   : OGEC.initPriceSlider() dans assets/js/main.js
   ════════════════════════════════════════════════════════════════════════ */

/* Bloc conteneur — même style que .og-shop-filter */
.og-price-filter {
    /* Hérite de .og-shop-filter : background, border, radius, padding */
}

/* Indicateur "filtre actif" — juste une légère bordure, fond blanc */
.og-price-filter--active {
    background: var(--ci-white);
    border-color: rgba(204, 0, 0, 0.25);
}

/* ── Saisie manuelle des bornes de prix ─────────────────────────────────── */
.og-price-inputs {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: var(--ci-space-md);
}

.og-price-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.og-price-input-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ci-text-muted);
    cursor: default;
    margin-bottom: 4px;
}

/* "FCFA" aligné à droite dans le label, même ligne que Min/Max */
.og-price-input-currency {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ci-red);
    opacity: 0.75;
}

.og-price-input-field {
    position: relative;
    display: flex;
    align-items: center;
}

/* Champ numérique éditable */
.og-price-input {
    width: 100%;
    padding: 6px 8px;
    font-family: var(--ci-font);
    font-size: 0.75rem;              /* police réduite pour lisibilité */
    font-weight: 600;
    color: var(--ci-text);
    background: var(--ci-white);
    border: 1.5px solid var(--ci-gray-200);
    border-radius: var(--ci-radius);
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: text;
    min-width: 0;
}

/* Masquer les spin buttons sur WebKit */
.og-price-input::-webkit-inner-spin-button,
.og-price-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.og-price-input:focus {
    border-color: var(--ci-red);
    box-shadow: 0 0 0 3px var(--ci-red-100);
    outline: none;
}

/* État invalide (valeur hors bornes) */
.og-price-input.og-price-input--error {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

/* Séparateur — entre les deux champs */
.og-price-inputs__sep {
    font-size: 0.875rem;
    color: var(--ci-text-muted);
    flex-shrink: 0;
    padding-bottom: 8px;         /* aligner avec les inputs */
    line-height: 1;
}

/* ── Wrapper slider ─────────────────────────────────────────────────────── */
.og-price-slider {
    position: relative;
    height: 28px;           /* hauteur suffisante pour le thumb */
    margin: var(--ci-space-sm) 4px var(--ci-space-md);
    user-select: none;
}

/* ── Piste visuelle ─────────────────────────────────────────────────────── */
.og-price-slider__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 5px;
    transform: translateY(-50%);
    background: var(--ci-gray-200);
    border-radius: var(--ci-radius-full);
    overflow: hidden;       /* pour que .og-price-slider__range soit clippé */
    pointer-events: none;
}

/* Partie colorée entre les deux poignées */
.og-price-slider__range {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--ci-red);
    border-radius: var(--ci-radius-full);
    /* left et right mis à jour dynamiquement par le JS */
    transition: left 0.05s, right 0.05s;
}

/* ── Inputs range superposés ────────────────────────────────────────────── */
.og-price-slider__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;   /* désactivé sur la piste — uniquement sur le thumb */
}

/* ── Thumb — WebKit (Chrome, Safari, Edge) ──────────────────────────────── */
.og-price-slider__input::-webkit-slider-runnable-track {
    background: transparent;
    height: 5px;
}

.og-price-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;    /* cliquable uniquement sur le thumb */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ci-white);
    border: 2.5px solid var(--ci-red);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    margin-top: -7.5px;    /* centrage vertical sur la piste de 5px */
}

.og-price-slider__input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 10px rgba(204, 0, 0, 0.35);
    border-color: var(--ci-red-hover);
}

.og-price-slider__input:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(204, 0, 0, 0.12),
                0 2px 10px rgba(204, 0, 0, 0.25);
}

.og-price-slider__input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--ci-red);
    outline-offset: 3px;
}

/* ── Thumb — Firefox ────────────────────────────────────────────────────── */
.og-price-slider__input::-moz-range-track {
    background: transparent;
    height: 5px;
}

.og-price-slider__input::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ci-white);
    border: 2.5px solid var(--ci-red);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.og-price-slider__input::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 10px rgba(204, 0, 0, 0.35);
}

.og-price-slider__input:active::-moz-range-thumb {
    cursor: grabbing;
}

/* Supprimer la piste native Firefox (on a la nôtre) */
.og-price-slider__input::-moz-range-progress {
    background: transparent;
}

/* ── Boutons action ─────────────────────────────────────────────────────── */
.og-price-filter__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: var(--ci-space-sm);
}

/* Bouton Appliquer */
.og-price-filter__apply {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--ci-red);
    color: var(--ci-white);
    font-family: var(--ci-font);
    font-size: 0.8125rem;
    font-weight: 700;
    border: none;
    border-radius: var(--ci-radius);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
}

.og-price-filter__apply:hover {
    background: var(--ci-red-hover);
    transform: translateY(-1px);
}

.og-price-filter__apply:active {
    transform: translateY(0);
}

.og-price-filter__apply i {
    font-size: 0.7rem;
}

/* Bouton Réinitialiser */
.og-price-filter__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 10px;
    background: transparent;
    color: var(--ci-text-muted);
    font-family: var(--ci-font);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid var(--ci-gray-200);
    border-radius: var(--ci-radius);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.og-price-filter__reset:hover {
    color: var(--ci-red);
    border-color: var(--ci-red);
    background: var(--ci-red-light);
}

.og-price-filter__reset i {
    font-size: 0.65rem;
}

/* ── Responsive mobile ─────────────────────────────────────────────────── */
/* Sur mobile la sidebar est cachée — le slider sera pleine largeur
   quand il sera exposé dans le drawer (Fonctionnalité 3)             */
@media (max-width: 1024px) {
    /* La sidebar est masquée à ce breakpoint (voir règle existante).
       Les styles ci-dessous s'appliquent quand le drawer sera ajouté. */
    .og-price-filter {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .og-price-slider {
        margin-inline: 8px;
    }

    .og-price-filter__actions {
        flex-direction: row;
    }

    .og-price-filter__apply {
        flex: 1;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   11. FILTRE MARQUES — Checkboxes custom
   Utilisé dans : woocommerce/archive-product.php (.og-brand-filter)
   JS associé   : OGEC.initBrandFilter() dans assets/js/main.js
   ════════════════════════════════════════════════════════════════════════ */

/* Indicateur filtre actif */
.og-brand-filter--active {
    background: var(--ci-white);
    border-color: rgba(204, 0, 0, 0.25);
}

/* ── Liste des marques ─────────────────────────────────────────────────── */
.og-brand-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--ci-space-sm);
}

/* ── Item marque (label cliquable) ─────────────────────────────────────── */
.og-brand-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--ci-radius);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    position: relative;
}

.og-brand-item:hover {
    background: var(--ci-gray-100);
}

.og-brand-item--checked {
    background: var(--ci-red-100);
}

.og-brand-item--checked:hover {
    background: var(--ci-red-100);
}

/* ── Input checkbox natif — masqué visuellement ────────────────────────── */
.og-brand-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ── Checkbox custom ────────────────────────────────────────────────────── */
.og-brand-check__box {
    width: 16px;
    height: 16px;
    border-radius: var(--ci-radius-sm);
    border: 2px solid var(--ci-gray-300);
    background: var(--ci-white);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.og-brand-item--checked .og-brand-check__box {
    background: var(--ci-red);
    border-color: var(--ci-red);
}

.og-brand-item:hover .og-brand-check__box {
    border-color: var(--ci-red);
}

/* Coche ✓ */
.og-brand-check__icon {
    font-size: 0.5rem;
    color: var(--ci-white);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.og-brand-item--checked .og-brand-check__icon {
    opacity: 1;
    transform: scale(1);
}

/* Focus visible pour accessibilité clavier */
.og-brand-check:focus-visible ~ .og-brand-check__box {
    outline: 2px solid var(--ci-red);
    outline-offset: 2px;
}

/* ── Nom de la marque ───────────────────────────────────────────────────── */
.og-brand-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ci-text);
    transition: color 0.15s ease;
    line-height: 1.3;
}

.og-brand-item--checked .og-brand-name {
    font-weight: 700;
    color: var(--ci-red);
}

/* ── Compteur de produits ───────────────────────────────────────────────── */
.og-brand-count {
    font-size: 0.6875rem;
    color: var(--ci-text-muted);
    font-weight: 500;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.og-brand-item--checked .og-brand-count {
    color: var(--ci-red);
}

/* ── Bouton "Toutes les marques" (reset) ────────────────────────────────── */
.og-brand-filter__reset {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    margin-top: var(--ci-space-xs);
    background: transparent;
    color: var(--ci-text-muted);
    font-family: var(--ci-font);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1.5px solid var(--ci-gray-200);
    border-radius: var(--ci-radius);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    justify-content: center;
}

.og-brand-filter__reset:hover {
    color: var(--ci-red);
    border-color: var(--ci-red);
    background: var(--ci-red-light);
}

.og-brand-filter__reset i {
    font-size: 0.65rem;
}

/* Marque sans produits dans le contexte courant — grisée, non-cliquable */
.og-brand-item--empty {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.og-brand-item--empty .og-brand-name {
    color: var(--ci-text-muted);
}

.og-brand-item--empty:hover {
    background: transparent;
}


/* ════════════════════════════════════════════════════════════════════════
   FIXES FICHE PRODUIT — v2
   1. Bouton "Ajouter au panier" → rouge (écrase WC 10.x + Gutenberg)
   2. Bouton WhatsApp → même largeur que le bouton panier
   3. Produits similaires → grille lisible 4 colonnes
   ════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1 : Bouton Ajouter au panier — rouge forcé ────────────────────
   WooCommerce 10.x injecte des styles via .wp-element-button et des
   sélecteurs de blocs Gutenberg qui écrasent nos styles.
   On cible tous les cas possibles avec la spécificité maximale.      */

body.woocommerce-page .woocommerce div.product form.cart button.single_add_to_cart_button,
body.woocommerce-page .woocommerce div.product form.cart button.button,
body .woocommerce div.product form.cart .single_add_to_cart_button.button,
body .woocommerce div.product form.cart button[type="submit"],
body .single-product .cart button.single_add_to_cart_button,
body .single-product button.wp-element-button,
.woocommerce form.cart .single_add_to_cart_button {
    background-color: var(--ci-red) !important;
    background: var(--ci-red) !important;
    color: #ffffff !important;
    border-color: var(--ci-red) !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    min-height: 52px !important;
    font-family: var(--ci-font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: var(--ci-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: var(--ci-space-sm) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
}

body.woocommerce-page .woocommerce div.product form.cart button.single_add_to_cart_button:hover,
body .woocommerce div.product form.cart button[type="submit"]:hover,
body .single-product button.wp-element-button:hover,
.woocommerce form.cart .single_add_to_cart_button:hover {
    background-color: var(--ci-red-hover) !important;
    background: var(--ci-red-hover) !important;
    border-color: var(--ci-red-hover) !important;
    transform: translateY(-1px) !important;
}

/* Neutraliser les styles Gutenberg/WC qui injectent du violet */
.woocommerce div.product form.cart .single_add_to_cart_button.wp-element-button,
.single-product .wp-element-button:not(.og-ec-btn--whatsapp) {
    background: var(--ci-red) !important;
    color: #fff !important;
}

/* ── FIX 2 : Bouton WhatsApp — même largeur que le bouton panier ────────
   On s'assure que le bouton WhatsApp est bien en display:flex et
   width:100% dans TOUS les contextes de la fiche produit.           */

.single-product .og-ec-btn--whatsapp,
.woocommerce div.product .og-ec-btn--whatsapp,
.woocommerce-page .og-ec-btn--whatsapp.og-ec-btn--block,
.og-product-single__summary .og-ec-btn--whatsapp,
.og-product-single__summary-inner .og-ec-btn--whatsapp {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: var(--ci-radius) !important;
    background: var(--ci-whatsapp) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    margin-bottom: var(--ci-space-sm) !important;
    text-decoration: none !important;
}

.single-product .og-ec-btn--whatsapp:hover,
.woocommerce div.product .og-ec-btn--whatsapp:hover {
    background: var(--ci-whatsapp-dark) !important;
    color: #fff !important;
}

/* ── FIX 3 : Produits similaires — grille lisible 4 colonnes ────────────
   Sans style dédié, les related products héritent de la grille 5col
   de la boutique et s'affichent écrasés sur la fiche produit.       */

/* Conteneur section */
.woocommerce .related.products,
.woocommerce .upsells.products {
    margin-top: var(--ci-space-3xl);
    padding-top: var(--ci-space-2xl);
    border-top: 1px solid var(--ci-gray-200);
    clear: both;
}

/* Titre de section */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: var(--ci-text) !important;
    margin-bottom: var(--ci-space-xl) !important;
    padding-bottom: var(--ci-space-sm) !important;
    border-bottom: 3px solid var(--ci-red) !important;
    display: inline-block !important;
}

/* Grille : 4 colonnes sur desktop, lisible et aérée */
.woocommerce .related.products ul.products,
.woocommerce .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
}

/* Carte produit — réinitialiser l'héritage de la boutique */
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product {
    width: auto !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    background: var(--ci-white) !important;
    border: 1px solid var(--ci-gray-200) !important;
    border-radius: var(--ci-radius-lg) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.woocommerce .related.products ul.products li.product:hover,
.woocommerce .upsells.products ul.products li.product:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.11) !important;
    transform: translateY(-3px) !important;
}

/* Image produit */
.woocommerce .related.products ul.products li.product img,
.woocommerce .upsells.products ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    padding: 0.75rem !important;
    background: var(--ci-gray-100) !important;
    display: block !important;
}

/* Titre */
.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
.woocommerce .upsells.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ci-text) !important;
    padding: 0.6rem 0.875rem 0.2rem !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Prix */
.woocommerce .related.products ul.products li.product .price,
.woocommerce .upsells.products ul.products li.product .price {
    padding: 0.2rem 0.875rem 0.5rem !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--ci-red) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
}

.woocommerce .related.products ul.products li.product .price del,
.woocommerce .upsells.products ul.products li.product .price del {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var(--ci-text-muted) !important;
    opacity: 0.7 !important;
}

/* Boutons carte */
.woocommerce .related.products ul.products li.product .og-ec-card-actions,
.woocommerce .upsells.products ul.products li.product .og-ec-card-actions {
    padding: 0 0.75rem 0.875rem !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

/* ── Responsive produits similaires ────────────────────────────────────── */
@media (max-width: 1024px) {
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .woocommerce .related.products ul.products,
    .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
    .woocommerce .upsells.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.5rem 0.1rem !important;
    }

    .woocommerce .related.products ul.products li.product .price,
    .woocommerce .upsells.products ul.products li.product .price {
        font-size: 0.85rem !important;
        padding: 0.1rem 0.5rem 0.3rem !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   FIX PRODUITS SIMILAIRES v2 — Spécificité maximale
   Écrase les sélecteurs "html body" du mobile deep fix de la boutique
   ════════════════════════════════════════════════════════════════════════ */

/* Reset complet de la grille pour les related/upsells
   — spécificité "html body" + ".related.products" = gagne sur tout */
html body .woocommerce .related.products ul.products,
html body .woocommerce .upsells.products ul.products,
html body .woocommerce-page .related.products ul.products,
html body .woocommerce-page .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* Cartes produits dans related — reset des surcharges "html body" */
html body .woocommerce .related.products ul.products li.product,
html body .woocommerce .upsells.products ul.products li.product,
html body .woocommerce-page .related.products ul.products li.product,
html body .woocommerce-page .upsells.products ul.products li.product {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--ci-white) !important;
    border: 1px solid var(--ci-gray-200) !important;
    border-radius: var(--ci-radius-lg) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

html body .woocommerce .related.products ul.products li.product:hover,
html body .woocommerce .upsells.products ul.products li.product:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.11) !important;
    transform: translateY(-3px) !important;
}

/* Image — ratio carré, fond gris clair */
html body .woocommerce .related.products ul.products li.product
    a.woocommerce-loop-product__link img,
html body .woocommerce .upsells.products ul.products li.product
    a.woocommerce-loop-product__link img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    object-fit: contain !important;
    padding: 0.75rem !important;
    background: var(--ci-gray-100) !important;
    display: block !important;
    max-height: none !important;
}

/* Titre */
html body .woocommerce .related.products ul.products li.product
    .woocommerce-loop-product__title,
html body .woocommerce .upsells.products ul.products li.product
    .woocommerce-loop-product__title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ci-text) !important;
    padding: 0.6rem 0.75rem 0.2rem !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.5em !important;
}

/* Prix */
html body .woocommerce .related.products ul.products li.product .price,
html body .woocommerce .upsells.products ul.products li.product .price {
    padding: 0.2rem 0.75rem 0.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: var(--ci-red) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .woocommerce .related.products ul.products li.product .price del,
html body .woocommerce .upsells.products ul.products li.product .price del {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var(--ci-text-muted) !important;
    opacity: 0.7 !important;
}

/* ── Responsive related products ───────────────────────────────────────── */
@media (max-width: 1024px) {
    html body .woocommerce .related.products ul.products,
    html body .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    html body .woocommerce .related.products ul.products,
    html body .woocommerce .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    html body .woocommerce .related.products ul.products li.product
        .woocommerce-loop-product__title,
    html body .woocommerce .upsells.products ul.products li.product
        .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.5rem 0.1rem !important;
        min-height: unset !important;
    }

    html body .woocommerce .related.products ul.products li.product .price,
    html body .woocommerce .upsells.products ul.products li.product .price {
        font-size: 0.8rem !important;
        padding: 0.1rem 0.5rem 0.3rem !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   FIX PRODUITS SIMILAIRES v3 — Cible section.related directement
   Sans dépendance au parent .woocommerce (non fiable selon le template)
   ════════════════════════════════════════════════════════════════════════ */

/* Section conteneur — pleine largeur dans tous les contextes */
html body section.related.products,
html body section.upsells.products {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    margin-top: var(--ci-space-3xl) !important;
    padding-top: var(--ci-space-2xl) !important;
    border-top: 1px solid var(--ci-gray-200) !important;
    box-sizing: border-box !important;
    /* Sortir d'un éventuel grid parent */
    grid-column: 1 / -1 !important;
}

/* Titre */
html body section.related.products > h2,
html body section.upsells.products > h2 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: var(--ci-text) !important;
    margin-bottom: var(--ci-space-xl) !important;
    padding-bottom: var(--ci-space-sm) !important;
    border-bottom: 3px solid var(--ci-red) !important;
    display: inline-block !important;
}

/* Grille — 4 colonnes, sans dépendance au parent */
html body section.related.products ul.products,
html body section.upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Cartes */
html body section.related.products ul.products li.product,
html body section.upsells.products ul.products li.product {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: var(--ci-white) !important;
    border: 1px solid var(--ci-gray-200) !important;
    border-radius: var(--ci-radius-lg) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    transform: none !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

html body section.related.products ul.products li.product:hover,
html body section.upsells.products ul.products li.product:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.11) !important;
    transform: translateY(-3px) !important;
}

/* Image */
html body section.related.products ul.products li.product img,
html body section.upsells.products ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    padding: 0.75rem !important;
    background: var(--ci-gray-100) !important;
    display: block !important;
    max-height: none !important;
}

/* Titre produit */
html body section.related.products ul.products li.product .woocommerce-loop-product__title,
html body section.upsells.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--ci-text) !important;
    padding: 0.6rem 0.75rem 0.25rem !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.5em !important;
}

/* Prix */
html body section.related.products ul.products li.product .price,
html body section.upsells.products ul.products li.product .price {
    padding: 0.2rem 0.75rem 0.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    color: var(--ci-red) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1.5em !important;
}

html body section.related.products ul.products li.product .price del,
html body section.upsells.products ul.products li.product .price del {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: var(--ci-text-muted) !important;
    opacity: 0.7 !important;
}

html body section.related.products ul.products li.product .price ins,
html body section.upsells.products ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--ci-red) !important;
    font-weight: 800 !important;
}

/* Boutons */
html body section.related.products ul.products li.product .og-ec-card-actions,
html body section.upsells.products ul.products li.product .og-ec-card-actions {
    padding: 0 0.625rem 0.75rem !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    html body section.related.products ul.products,
    html body section.upsells.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767px) {
    html body section.related.products ul.products,
    html body section.upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    html body section.related.products ul.products li.product .woocommerce-loop-product__title,
    html body section.upsells.products ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.45rem 0.1rem !important;
        min-height: unset !important;
    }

    html body section.related.products ul.products li.product .price,
    html body section.upsells.products ul.products li.product .price {
        font-size: 0.8rem !important;
        padding: 0.1rem 0.45rem 0.3rem !important;
    }

    html body section.related.products ul.products li.product .og-ec-card-actions,
    html body section.upsells.products ul.products li.product .og-ec-card-actions {
        padding: 0 0.35rem 0.4rem !important;
        gap: 3px !important;
    }

    html body section.related.products ul.products li.product .og-ec-card-actions .og-ec-btn--outline,
    html body section.related.products ul.products li.product .og-ec-card-actions .button.add_to_cart_button {
        font-size: 0.6rem !important;
        padding: 0.28rem 0.3rem !important;
    }
}