/**
 * WooCommerce Overrides — Lovely Lili
 *
 * @file        assets/css/woocommerce.css
 * @package     LovelyLili
 * @version     1.3.0
 * @guide-step  Étape 1 + Étape 6 — Design System appliqué à WooCommerce
 * @depends     assets/css/main.css (tokens :root)
 * @used-by     inc/setup.php (enqueue)
 * @see         assets/css/main.css — source des tokens (Système B)
 *
 * Correctif C4 appliqué : tokens Système A (--color-*, --font-*, --space-*,
 * --transition-*, --radius-pill) remplacés par tokens Système B (--rose-*,
 * --text-*, --border, --warm-white, littéraux px/s).
 * Règle absolue : aucune valeur en dur — uniquement var(--*) de main.css
 */

/* =====================================================================
   TABLE DES MATIÈRES
   1.  Reset & utilitaires WC
   2.  Barre de résultats (archive)
   3.  Grille produits (PLP)
   4.  Card produit
   5.  Badges (Nouveau, Promo, Best-seller)
   6.  Bouton Ajouter au panier (loop)
   7.  Pagination
   8.  Fil d'Ariane (WooCommerce)
   9.  Fiche produit (PDP) — galerie
  10.  Fiche produit — summary (titre, prix, stock, variantes)
  11.  Onglets PDP (description, avis, livraison)
  12.  Avis clients (reviews)
  13.  Produits similaires / upsells
  14.  Panier (cart)
  15.  Checkout
  16.  Mon compte (my-account)
  17.  Messages (notices WooCommerce)
  18.  Badges de promotion (sale flash)
  19.  Responsive — breakpoints
   ===================================================================== */


/* =====================================================================
   1. RESET & UTILITAIRES WC
   ===================================================================== */

.woocommerce,
.woocommerce-page {
    font-family: 'Jost', system-ui, sans-serif;
    color: var(--text-dark);
}

/* Supprimer les styles inline WC sur les images */
.woocommerce a img,
.woocommerce-page a img {
    border: none;
}

/* Neutralise les clearfix WC natifs — incompatibles avec CSS Grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content: none;
    display: none;
}

/* =====================================================================
   2. BARRE DE RÉSULTATS (ARCHIVE)
   ===================================================================== */

.woocommerce-result-count {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 2.5;
}

.woocommerce-ordering {
    margin: 0;
}

.woocommerce-ordering select {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-dark);
    background-color: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2373726C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 36px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--rose-600);
}

/* Wrapper résultats + tri */
.woocommerce .woocommerce-products-header + nav.woocommerce-pagination,
.woocommerce-archive .ll-plp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

/* =====================================================================
   2b. LAYOUT PLP — Corps de page : panel fixe + grille pleine largeur
   ===================================================================== */

.woocommerce-shop .ll-main,
.woocommerce-archive .ll-main,
.tax-product_cat .ll-main,
.tax-product_tag .ll-main {
    padding-top: 0 !important;
}

.ll-plp__header {
    background: linear-gradient(145deg, var(--rose-50), var(--gold-50, #FBF5EC), var(--warm-white, #FAF6F0));

    /* Trick full-bleed : casse le max-width du parent .ll-container */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    padding: var(--space-2xl) 24px var(--space-xl);
    text-align: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
}

/* Eyebrow — même style que la page contact */
.ll-plp__eyebrow {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose-500);
    margin: 0 0 var(--space-sm);
}

.ll-plp__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 6vw, 3.25rem);
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 var(--space-md);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* Remplace .ll-plp__count-badge ET .ll-plp__cat-desc */
.ll-plp__subtitle {
    font-size: 15px;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.65;
}

.ll-plp__count-badge {
    font-size: 13px;
    color: var(--text-muted);
}

.ll-plp__cat-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
    max-width: 600px;
}

.ll-plp {
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 24px 0; /* ← était 0 24px */
}

/* Corps — le filter-panel est position:fixed, hors flux
   ll-plp__main prend donc 100% de la largeur disponible */
.ll-plp__body {
    display: block;
}

.ll-plp__main {
    width: 100%;
}

/* Toolbar : bouton filtrer + résultats + tri */
.ll-plp__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 32px;
}

.ll-plp__toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ll-plp__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ll-plp__filter-toggle:hover {
    border-color: var(--rose-600);
    color: var(--rose-600);
}

/* assets/css/woocommerce.css — Section 2b — Mobile PLP toolbar + breadcrumb */

@media (max-width: 768px) {

    /* ── 1. Fil d'Ariane : masqué sur les pages archive / boutique ── */
    .woocommerce-shop .ll-breadcrumb,
    .woocommerce-archive .ll-breadcrumb,
    .tax-product_cat .ll-breadcrumb,
    .tax-product_tag .ll-breadcrumb {
        display: none;
    }

    /* ── 2. Conteneur PLP ── */
    .ll-plp {
        padding: 0 12px;
    }

    /* ── 3. Toolbar : Filtrer + Tri côte à côte, centrés ── */
    .ll-plp__toolbar {
        flex-direction: row;          /* ligne unique */
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 20px;
    }

    /* La zone gauche (contient le bouton Filtrer + le select Tri)
       passe aussi en row pour aligner les deux éléments */
    .ll-plp__toolbar-left {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-bottom: none;          /* supprime la séparation verticale */
        padding: 0;
        flex: 1;
    }

    /* Bouton Filtrer — prend la moitié disponible */
    .ll-plp__filter-toggle {
        flex: 1;
        justify-content: center;
        width: auto;                  /* annule le width:100% desktop */
        padding: 9px 14px;
        background: var(--rose-50);
        border-color: var(--rose-300);
        color: var(--rose-700);
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
    }

    /* Select "Tri par défaut" — même largeur que Filtrer */
    .ll-plp__toolbar .woocommerce-ordering {
        flex: 1;
        margin: 0;
    }

    .ll-plp__toolbar .woocommerce-ordering select,
    .woocommerce-ordering select {
        width: 100%;
        font-size: 13px;
        padding: 9px 32px 9px 12px;  /* padding-right pour la flèche SVG */
        border-radius: var(--radius-sm);
    }

    /* Masquer : résultat count (déjà dans le header) + per-page sur mobile */
    .ll-plp__toolbar .woocommerce-result-count,
    .ll-plp__per-page {
        display: none;
    }

    /* Résultats count en petit texte sous la toolbar (si affiché ailleurs) */
    .ll-plp__count-inline {
        font-size: 12px;
        color: var(--text-muted);
        padding: 0 0 8px;
    }
}


/* =====================================================================
   3. GRILLE PRODUITS (PLP)
   ===================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 4 colonnes sur grands écrans */
@media (min-width: 1200px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 2 colonnes sur tablette */
@media (max-width: 900px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    clear: none !important;
}

@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        gap: 16px 10px;
    }
}

.woocommerce ul.products.columns-4,
.woocommerce-page ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================================
   4. CARD PRODUIT
   ===================================================================== */

.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Le ratio est porté par le wrapper, pas par les images elles-mêmes */
.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: opacity 0.4s ease;
    /* ❌ plus d'aspect-ratio ici — c'est .product-card__image-wrap qui le porte */
}

/* Wrapper image — contient le ratio ET les deux images superposées */
.product-card__image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--warm-white);
    aspect-ratio: 4 / 5;       /* ← ratio ici uniquement */
    text-decoration: none;
}

/* Les deux images en superposition absolue */
.product-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-md);
    transition: opacity 0.4s ease;
}

.product-card__img--main  { opacity: 1; z-index: 1; }
.product-card__img--hover { opacity: 0; z-index: 2; }

.product-card__image-wrap:hover .product-card__img--main,
.product-card__image-wrap:focus-visible .product-card__img--main {
    opacity: 0;
}
.product-card__image-wrap:hover .product-card__img--hover,
.product-card__image-wrap:focus-visible .product-card__img--hover {
    opacity: 1;
}

/* Titre produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-dark);
    margin: 16px 0 4px;
    padding: 0;
    line-height: 1.3;
}

/* Prix */
.woocommerce ul.products li.product .price {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.woocommerce ul.products li.product .price del {
    color: var(--text-muted);
    font-weight: 400;
    margin-right: 4px;
    opacity: 0.7;
}

.woocommerce ul.products li.product .price ins {
    color: var(--rose-500);
    text-decoration: none;
    font-weight: 600;
}

/* Rating (étoiles) dans la loop */
.woocommerce ul.products li.product .star-rating {
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--rose-600);
    /* Étoiles en couleur primaire */
    --star-color: var(--rose-600);
}

.woocommerce ul.products li.product .star-rating::before,
.woocommerce ul.products li.product .star-rating span::before {
    color: var(--rose-600);
}

/* Zone infos texte */
.product-card__info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 12px;
}

/* ── Zone actions — ATC seul, pleine largeur ── */
.product-card__actions {
    margin-top: auto;
    padding-top: 10px;
}

.product-card__actions .button,
.product-card__actions a.button,
.product-card__actions .add_to_cart_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 0;
    background: var(--rose-600);
    color: #fff;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--rose-600);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.product-card__actions .button:hover,
.product-card__actions a.button:hover,
.product-card__actions .add_to_cart_button:hover {
    background: var(--rose-700);
    border-color: var(--rose-700);
}

.product-card__actions .button:active,
.product-card__actions .add_to_cart_button:active {
    transform: translateY(1px);
}

.product-card__actions .button.loading {
    opacity: 0.75;
    pointer-events: none;
}

/* Produit variable — ghost */
.product-card__actions .button.product_type_variable {
    background: transparent;
    color: var(--rose-600);
    border-color: var(--rose-600);
}

.product-card__actions .button.product_type_variable:hover {
    background: var(--rose-50);
}

/* Épuisé */
.product-card__actions .button.disabled,
.product-card__actions .button:disabled {
    background: var(--text-light);
    border-color: var(--text-light);
    cursor: not-allowed;
    transform: none;
}

/* ── Quick view — overlay pleine largeur au hover ── */
.product-card__qv-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 10px 10px;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
    pointer-events: none;
}

.product-card__image-wrap:hover .product-card__qv-overlay,
.product-card__image-wrap:focus-within .product-card__qv-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.product-card__quick-view {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dark);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    text-align: center;
}

.product-card__quick-view:hover {
    background: #fff;
    color: var(--rose-600);
}

.product-card__quick-view:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* Masqué sur mobile tactile — tap va directement sur la PDP */
@media (hover: none) {
    .product-card__qv-overlay {
        display: none;
    }
}

/* Badges superposés sur l'image */
.product-card__badges {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Wishlist — toujours visible, coin supérieur droit ── */
.product-card__wishlist-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
}

/*
 * Le bouton wishlist est rendu via do_action('ll_product_card_wishlist').
 * Ces styles ciblent le bouton quel que soit le plugin wishlist utilisé.
 */
.product-card__wishlist-wrap button,
.product-card__wishlist-wrap .ll-wishlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.product-card__wishlist-wrap button:hover,
.product-card__wishlist-wrap .ll-wishlist-btn:hover {
    background: #fff;
    color: var(--rose-600);
    transform: scale(1.08);
}

.product-card__wishlist-wrap button.is-active,
.product-card__wishlist-wrap .ll-wishlist-btn.is-active {
    color: var(--rose-600);
    background: #fff;
}

.product-card__wishlist-wrap button:focus-visible,
.product-card__wishlist-wrap .ll-wishlist-btn:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

.product-card__badge {
    display: inline-block;
    padding: 4px 10px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    line-height: 1;
}

.product-card__badge--sale       { background-color: var(--rose-500); color: #FFFFFF; }
.product-card__badge--new        { background-color: var(--text-dark); color: #FFFFFF; }
.product-card__badge--bestseller { background-color: var(--rose-600); color: #FFFFFF; }
.product-card__badge--featured  { background-color: var(--rose-100); color: var(--rose-700); }
.product-card__badge--sold-out  { background-color: var(--linen);    color: var(--text-muted); }

/* Titre */
.product-card__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 4px;
    line-height: 1.3;
}

.product-card__title a {
    color: var(--text-dark);
    text-decoration: none;
}

.product-card__title a:hover { color: var(--rose-600); }

/* Prix */
.product-card__price {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 6px;
}

/* Stock */
.product-card__stock {
    font-size: 12px;
    margin: 0 0 8px;
}

.product-card__stock--low { color: var(--rose-500); }
.product-card__stock--out { color: var(--text-muted); }

/* ── Stock urgence — ambre, différencié du rose marque ── */
.product-card__stock-alert {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: 0.02em;
}

.product-card__stock-alert--urgent {
    color: var(--gold-600); /* #9A7025 — ambre, signal d'urgence distinct du rose */
}

/* =====================================================================
   5. BADGES (NOUVEAU, PROMO, BEST-SELLER)
   ===================================================================== */

/* Reset du onsale WC natif */
.woocommerce span.onsale {
    top: 8px;
    left: 8px;
    min-height: auto;
    min-width: auto;
    width: auto;
    height: auto;
    line-height: 1;
    border-radius: var(--radius-full);
    padding: 4px 10px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--rose-500);
    color: #FFFFFF;
}

/* Badge "Nouveau" — appliqué via classe JS ou is_featured() */
.woocommerce ul.products li.product .badge--new {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    background-color: var(--text-dark);
    color: #FFFFFF;
    z-index: 2;
}

/* Badge "Best-seller" */
.woocommerce ul.products li.product .badge--bestseller {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    background-color: var(--rose-600);
    color: #FFFFFF;
    z-index: 2;
}


/* =====================================================================
   6. BOUTON AJOUTER AU PANIER (LOOP)
   ===================================================================== */

/* Bouton natif WC dans la grille — 1 seule instance garantie */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 24px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--rose-600);
    color: #fff;
    border: 1.5px solid var(--rose-600);
    border-radius: var(--radius-sm);
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
    text-decoration: none;
    cursor: pointer;
    margin-top: auto;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
    background-color: var(--rose-600);
    color: #FFFFFF;
    border-color: var(--rose-600);
}

/* État "ajouté" (loading / added) */
.woocommerce ul.products li.product .button.loading,
.woocommerce ul.products li.product .button.added {
    background-color: var(--rose-50);
    color: var(--rose-600);
    border-color: var(--rose-600);
    pointer-events: none;
}

/* Focus visible — accessibilité */
.woocommerce ul.products li.product .button:focus-visible,
.woocommerce ul.products li.product a.button:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* Supprimer le doublon "Voir le produit" sur produits variables si présent */
.woocommerce ul.products li.product .added_to_cart {
    display: none; /* Géré via JS/mini-cart */
}


/* =====================================================================
   7. PAGINATION
   ===================================================================== */

.woocommerce nav.woocommerce-pagination {
    margin-top: 64px;
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    margin: 0;
    padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
    padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--rose-50);
    color: var(--rose-600);
    border-color: var(--rose-600);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--rose-600);
    color: #FFFFFF;
    border-color: var(--rose-600);
    font-weight: 600;
}

/* =====================================================================
   9b. FICHE PRODUIT — LAYOUT CUSTOM (pdp__layout)
   Remplace le grid natif WC (.woocommerce div.product) qui ne cible
   pas les <article> générés par le template custom single-product.php
   ===================================================================== */

/* Conteneur principal : 2 colonnes (galerie 46% + résumé) */
.pdp__layout {
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 48px;
    align-items: start;
}

/* Colonne galerie — sticky pendant le scroll du summary */
.pdp__gallery-col {
    position: sticky;
    top: calc(var(--header-h, 80px) + 24px);
}

/* Colonne résumé — flex vertical, gap géré par margin sur chaque enfant */
.pdp__summary-col {
    display: flex;
    flex-direction: column;
}

/* Responsive — empilement mobile */
@media (max-width: 768px) {
    .pdp__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pdp__gallery-col {
        position: static; /* annule le sticky sur mobile */
    }
}

/* =====================================================================
   8. FIL D'ARIANE (WOOCOMMERCE BREADCRUMB)
   ===================================================================== */

.woocommerce .woocommerce-breadcrumb {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 24px;
    padding: 0;
    background: none;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: var(--rose-600);
}

/* Séparateur entre items */
.woocommerce .woocommerce-breadcrumb .breadcrumb-separator {
    margin: 0 4px;
    color: var(--border);
}

/* =====================================================================
   8b. FIL D'ARIANE CUSTOM — .ll-breadcrumb
   Direction A  : scroll horizontal sur toutes les pages (mobile)
   Direction B  : parent seul sur PDP (.ll-breadcrumb--pdp) mobile
   ===================================================================== */

/* --- Base --- */
.ll-breadcrumb {
    margin-bottom: var(--space-md);   /* 16px — réduit vs défaut navigateur */
    padding: 0;
}

.ll-breadcrumb__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;                /* Force la ligne unique */
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ll-breadcrumb__item {
    display: flex;
    align-items: center;
    white-space: nowrap;              /* Chaque item reste sur une ligne */
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    color: var(--text-muted);
}

/* Lien parent */
.ll-breadcrumb__link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.ll-breadcrumb__link:hover {
    color: var(--color-primary);
}

/* Item courant (page active) */
.ll-breadcrumb__item--current .ll-breadcrumb__label {
    color: var(--text-body);
    font-weight: 500;
}

/* Séparateur › */
.ll-breadcrumb__sep {
    margin: 0 var(--space-xs);       /* 4px de chaque côté */
    color: var(--border);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}


/* --- Direction A : scroll horizontal sur mobile --- */
@media (max-width: 767px) {
    .ll-breadcrumb {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;  /* Scroll inertiel iOS */
        /* Masquer la scrollbar visuellement sans bloquer le scroll */
        scrollbar-width: none;              /* Firefox */
        -ms-overflow-style: none;           /* IE/Edge */
    }

    .ll-breadcrumb::-webkit-scrollbar {
        display: none;                      /* Chrome/Safari */
    }

    /* Padding-end pour que le dernier item ne soit pas collé au bord */
    .ll-breadcrumb__list {
        padding-right: var(--space-md);     /* 16px de respiration à droite */
    }
}


/* --- Direction B : PDP mobile — affiche uniquement le parent (N-1) --- */
@media (max-width: 767px) {
    /* Cacher tous les items par défaut */
    .ll-breadcrumb--pdp .ll-breadcrumb__item {
        display: none;
    }

    /*
     * Afficher uniquement l'avant-dernier item = parent direct de la page courante.
     * Structure garantie par breadcrumb.php : current est TOUJOURS le dernier <li>.
     * Donc le parent est :nth-last-child(2).
     */
    .ll-breadcrumb--pdp .ll-breadcrumb__item:nth-last-child(2) {
        display: flex;
    }

    /* Masquer le séparateur › sur cet item (pas de suite après lui) */
    .ll-breadcrumb--pdp .ll-breadcrumb__item:nth-last-child(2) .ll-breadcrumb__sep {
        display: none;
    }

    /* Remplacer par une flèche retour ‹ devant le lien */
    .ll-breadcrumb--pdp .ll-breadcrumb__item:nth-last-child(2) .ll-breadcrumb__link::before {
        content: '‹\00a0';  /* \00a0 = espace insécable pour l'espacement */
        color: var(--color-primary);
        font-size: 16px;
        line-height: 1;
        font-weight: 400;
    }
}


/* =====================================================================
   9. FICHE PRODUIT (PDP) — GALERIE
   v1.3.0 — La galerie utilise les classes custom ll-product-gallery__*
   générées par woocommerce/single-product/product-image.php.
   Les anciennes règles .woocommerce div.product div.images (WC natif)
   sont supprimées : elles ne s'appliquaient pas à ce template custom.
   ===================================================================== */

.ll-product-gallery {
    position: sticky;
    top: calc(var(--header-h) + 24px);
}


.ll-product-gallery__slides {
    max-height: 560px;
}

.ll-product-gallery__img {
    max-height: 560px;
}

.woocommerce-product-gallery__trigger {
    position: absolute;   
    top: 12px;
    right: 12px;             
    z-index: 4;
    width: 36px;
    height: 36px;
    opacity: 0;               
    pointer-events: none;   
}

/* assets/css/woocommerce.css — §9 Galerie PDP */

/* Conteneur image principale — contexte de positionnement pour les badges */
.ll-product-gallery__main-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* Badges superposés sur l'image — coin supérieur gauche */
.ll-product-gallery__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.ll-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 16px;          
    border-radius: var(--radius-full);
    font-size: 14px;           
    font-weight: 700;
    z-index: 3;
    text-transform: uppercase;
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.04em;
}

/* Les badges sont des enfants flex : on écrase le position:absolute de main.css */
.ll-product-gallery__badges .ll-badge {
    position: static;          /* neutralise le position:absolute de main.css */
    top: auto;
    left: auto;
}

/* Couleurs — cohérentes avec product-card__badge */
.ll-badge--sale { background-color: var(--rose-500); color: #fff; }
.ll-badge--new  { background-color: var(--text-dark); color: #fff; }
.ll-badge--out  { background-color: var(--linen);     color: var(--text-muted); }

/* Mobile — badges légèrement plus petits */
@media (max-width: 768px) {
    .ll-product-gallery__badges {
        top: 10px;
        left: 10px;
        gap: 4px;
    }

    .ll-product-gallery__badges .ll-badge {
        font-size: 12px;
        padding: 5px 15px;
    }
}


/* =====================================================================
   10. FICHE PRODUIT — SUMMARY
   v1.3.0 — Restructuration conversion :
     eyebrow · prix proéminent · urgency block · ATC full-width · réassurance grille
   ===================================================================== */

/* Layout 2 colonnes — galerie réduite à 46%, gap resserré */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 46% 1fr;
    gap: 48px;
    align-items: start;
}

.woocommerce div.product div.summary,.woocommerce article.product .pdp__summary-col {
    width: auto;
    float: none;
    display: flex;
    flex-direction: column;
    gap: 0; /* géré par margin sur chaque élément */
}

/* Description courte — typographie soignée pour donner envie de lire */
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: 20px;
}

/* Supprimer le style italic sur les balises strong dans la description */
.woocommerce div.product .woocommerce-product-details__short-description strong {
    font-style: normal;
    font-weight: 600;
    color: var(--text-dark);
}

/* Masquer les emojis décoratifs de fin (🎄✨) via CSS n'est pas possible proprement —
   voir recommandations éditoriales ci-dessous */

/* ---- Eyebrow collection ---- */
.ll-pdp-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose-500);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 150ms ease;
}

.ll-pdp-eyebrow:hover {
    color: var(--rose-700);
}

/* ---- Titre H1 PDP ---- */
.woocommerce div.product .product_title {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

/* ---- Prix PDP — élément clé, bien visible ---- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1;
}

/* Prix barré */
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 400;
    text-decoration: line-through;
}

/* Prix promo — couleur primaire + badge visuel */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    color: var(--rose-600);
    text-decoration: none;
    font-weight: 700;
}

/* ---- Rating PDP ---- */
.woocommerce div.product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

.woocommerce div.product .star-rating {
    color: var(--rose-600);
}

.woocommerce div.product .woocommerce-review-link {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 150ms ease, border-color 150ms ease;
}

.woocommerce div.product .woocommerce-review-link:hover {
    color: var(--rose-600);
    border-color: var(--rose-600);
}

/* ↑ Doublon .short-description supprimé v1.3.0 — règle active L.894 */

/* ---- Bloc urgency (stock limité + bestseller) ---- */
.ll-urgency-block {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.ll-urgency-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Stock faible — rouge chaud, urgence */
.ll-urgency-badge--stock {
    background-color: var(--rose-50);
    color: var(--rose-700);
    border: 1px solid var(--rose-200);
}

/* Rupture */
.ll-urgency-badge--out {
    background-color: #FFF3E0;
    color: #C45E00;
    border: 1px solid #FFD8A0;
}

/* Bestseller — gold */
.ll-urgency-badge--best {
    background-color: var(--gold-50);
    color: var(--gold-600);
    border: 1px solid var(--gold-200);
}

/* ---- Sélecteur de quantité ---- */
.woocommerce div.product form.cart .quantity .qty {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    width: 64px;
    height: 52px;
    text-align: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    background: #FFFFFF;
    transition: border-color 150ms ease;
}

.woocommerce div.product form.cart .quantity .qty:focus {
    outline: none;
    border-color: var(--rose-600);
    box-shadow: 0 0 0 3px rgba(194, 80, 107, 0.12);
}

/* ---- Bouton ATC — full-width, imposant, prioritaire ---- */
.woocommerce div.product form.cart, .woocommerce article.product form.cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce article.product form.cart .single_add_to_cart_button, .woocommerce article.product form.cart .single_add_to_cart_button {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background-color: var(--rose-600);
    color: #FFFFFF;
    border: 2px solid var(--rose-600);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        transform 150ms ease,
        box-shadow 200ms ease;
}

.woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce article.product form.cart .single_add_to_cart_button:hover {
    background-color: var(--rose-700);
    border-color: var(--rose-700);
    box-shadow: 0 6px 24px rgba(194, 80, 107, 0.28);
    transform: translateY(-1px);
}

.woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce article.product form.cart .single_add_to_cart_button:active {
    transform: translateY(0);
    box-shadow: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce article.product form.cart .single_add_to_cart_button:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 3px;
}

/* ---- Variantes ---- */
.woocommerce div.product .variations article.product {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 16px;
}

.woocommerce div.product .variations td,
.woocommerce div.product .variations th {
    padding: 4px 0;
    border: none;
    vertical-align: middle;
}

.woocommerce div.product .variations label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.woocommerce div.product .variations select {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    transition: border-color 150ms ease;
    width: 100%;
    cursor: pointer;
}

.woocommerce div.product .variations select:focus {
    outline: none;
    border-color: var(--rose-600);
}

.woocommerce div.product .reset_variations {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
    transition: color 150ms ease;
}

.woocommerce div.product .reset_variations:hover {
    color: var(--rose-600);
}

/* ---- Stock (affiché nativement par WooCommerce) ---- */
.woocommerce div.product .stock article.product {
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-bottom: 14px;
}

.woocommerce div.product .in-stock  { background: #EDF7EE; color: #2E7D32; }
.woocommerce div.product .out-of-stock { background: #FFF3E0; color: #E65100; }

/* ---- Méta produit (SKU, catégories) ---- */
.woocommerce div.product .product_meta article.product {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 4px;
    line-height: 1.8;
}

.woocommerce div.product .product_meta a {
    color: var(--rose-600);
    text-decoration: none;
    transition: opacity 150ms ease;
}

.woocommerce div.product .product_meta a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Badge artisan */
.ll-handmade-badge {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 6px;
    padding-top: 8px;
}

/* ---- Bloc réassurance PDP — grille 3 colonnes avec séparateurs ---- */
.pdp__reassurance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 28px;
    background: var(--warm-white);
}

.pdp__reassurance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 16px 12px;
    position: relative;
}

/* Séparateurs verticaux */
.pdp__reassurance-item + .pdp__reassurance-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--border);
}

.pdp__reassurance-icon {
    font-size: 18px;
    line-height: 1;
    display: block;
    /* Emojis acceptés ici : c'est un contenu de présentation, pas un H1 */
}

.pdp__reassurance-text {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* =====================================================================
   11. ONGLETS PDP — ll-product-tabs
   Cible les classes générées par woocommerce/single-product/tabs.php
   ===================================================================== */

/* Conteneur — pleine largeur sous le grid 2 colonnes */
.ll-product-tabs {
    grid-column: 1 / -1;
    margin-top: 56px;
}

/* ── Barre de navigation ── */
.ll-product-tabs__nav {
    border-bottom: 2px solid var(--border);
    margin-bottom: 40px;
}

.ll-product-tabs__list {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ll-product-tabs__item {
    margin: 0;
    padding: 0;
}

/* Bouton onglet — état par défaut */
.ll-product-tabs__btn {
    display: inline-block;
    padding: 16px 24px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
    white-space: nowrap;
}

.ll-product-tabs__btn:hover {
    color: var(--rose-600);
}

/* Bouton onglet — état actif */
.ll-product-tabs__btn--active {
    color: var(--rose-700);
    border-bottom-color: var(--rose-600);
}

.ll-product-tabs__btn:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Panneaux de contenu ── */
.ll-product-tabs__panel {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-dark);
}

/* Masquer les panneaux inactifs — l'attribut HTML [hidden] suffit normalement
   mais ce reset force le comportement en cas de conflit avec d'autres styles */
.ll-product-tabs__panel[hidden] {
    display: none !important;
}

/* Titres h2 dans les panneaux */
.ll-product-tabs__panel h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0 0 20px;
}

/* Mobile : scroll horizontal */
/* Fichier : assets/css/woocommerce.css
   Section 11 — ONGLETS PDP, breakpoint mobile — v2 */

@media (max-width: 768px) {

    /* Grid 3 colonnes égales — élimine tout problème de flex overflow */
    .ll-product-tabs__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
    }

    .ll-product-tabs__item {
        min-width: 0;
    }

    /* Bouton pleine largeur, texte centré, retour à la ligne autorisé */
    .ll-product-tabs__btn {
        width: 100%;
        padding: 12px 6px;
        font-size: 9px;
        letter-spacing: 0.04em;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        border-bottom-width: 2px; /* conserve l'indicateur actif */
    }
}

/* =====================================================================
   12. AVIS CLIENTS (REVIEWS)
   ===================================================================== */

#reviews .woocommerce-Reviews-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 24px;
}

#reviews .woocommerce-comment-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 16px;
    background-color: #FFFFFF;
}

#reviews .woocommerce-comment__author {
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
}

#reviews .woocommerce-comment__publishdate {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 8px;
}

#reviews .description {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-dark);
    margin-top: 8px;
}

/* Formulaire d'avis */
#review_form_wrapper {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

#review_form .comment-form-rating label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: block;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    width: 100%;
    transition: border-color .15s ease;
}

#review_form input[type="text"]:focus,
#review_form input[type="email"]:focus,
#review_form textarea:focus {
    outline: none;
    border-color: var(--rose-600);
}

#review_form .form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--rose-600);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .2s ease;
}

#review_form .form-submit .submit:hover {
    background-color: var(--rose-700);
}


/* =====================================================================
   13. PRODUITS SIMILAIRES / UPSELLS
   ===================================================================== */

.woocommerce .related,
.woocommerce .upsells {
    grid-column: 1 / -1;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 40px;
    text-align: center;
}

/* Grille related — 4 colonnes max */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
    grid-template-columns: repeat(4, 1fr);
}

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


/* =====================================================================
   14. PANIER (CART)
   ===================================================================== */

.woocommerce table.cart,
.woocommerce-page table.cart {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.woocommerce table.cart th {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 24px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

.woocommerce table.cart td {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
}

/* Image produit dans le panier */
.woocommerce table.cart td.product-thumbnail img {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Nom produit dans le panier */
.woocommerce table.cart td.product-name a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-dark);
    text-decoration: none;
    transition: color .15s ease;
}

.woocommerce table.cart td.product-name a:hover {
    color: var(--rose-600);
}

/* Supprimer l'icône × de suppression natif */
.woocommerce table.cart td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--warm-white);
    color: var(--text-muted);
    border-radius: 50%;
    font-size: 16px;
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.woocommerce table.cart td.product-remove a.remove:hover {
    background-color: var(--rose-500);
    color: #FFFFFF;
}

/* Totaux panier */
.woocommerce .cart-collaterals .cart_totals {
    width: 48%;
    float: right;
}

@media (max-width: 768px) {
    .woocommerce .cart-collaterals .cart_totals {
        width: 100%;
        float: none;
    }
}

.woocommerce .cart-collaterals .cart_totals h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 24px;
}

.woocommerce .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.woocommerce .cart_totals table tr.order-total th,
.woocommerce .cart_totals table tr.order-total td {
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: none;
    padding-top: 24px;
}

/* Bouton "Passer la commande" */
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    padding: 16px 40px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--rose-600);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color .2s ease;
    margin-top: 24px;
}

.woocommerce a.checkout-button:hover {
    background-color: var(--rose-700);
}

/* Coupon */
.woocommerce .coupon {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.woocommerce .coupon label {
    width: 100%;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.woocommerce .coupon input.input-text {
    flex: 1;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dark);
    background: #FFFFFF;
    transition: border-color .15s ease;
}

.woocommerce .coupon input.input-text:focus {
    outline: none;
    border-color: var(--rose-600);
}

.woocommerce .coupon button {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 24px;
    background-color: #FFFFFF;
    color: var(--text-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.woocommerce .coupon button:hover {
    background-color: var(--rose-50);
    color: var(--rose-600);
    border-color: var(--rose-600);
}

/* ── Barre d'étapes ── */
.ll-steps-bar {
    background: linear-gradient(135deg, var(--rose-50) 0%, var(--warm-white) 60%, var(--rose-50) 100%);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    text-align: center;
}

.ll-steps-bar__inner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.ll-steps-bar__step {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ll-steps-bar__step--active {
    color: var(--text-dark);
    border-bottom: 2px solid var(--rose-600);
    padding-bottom: 2px;
}

.ll-steps-bar__arrow {
    color: var(--border);
    font-size: 14px;
}

/* ── Barre de progression livraison ── */
.ll-shipping-progress {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 32px;
}

.ll-shipping-progress__label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-dark);
    margin: 0 0 10px;
}

.ll-shipping-progress__label strong {
    color: var(--rose-600);
    font-weight: 600;
}

.ll-shipping-progress__label--reached {
    color: var(--rose-600);
    font-weight: 500;
    margin-bottom: 0;
}

.ll-shipping-progress__bar {
    height: 6px;
    background: var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.ll-shipping-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rose-500), var(--rose-600));
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

/* ── Boutons +/− quantité ── */
.ll-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #FFFFFF;
}

.ll-qty__btn {
    width: 36px;
    height: 40px;
    background: var(--warm-white);
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    user-select: none;
    flex-shrink: 0;
}

.ll-qty__btn:hover {
    background: var(--rose-50);
    color: var(--rose-600);
}

.ll-qty__btn:active {
    background: var(--rose-600);
    color: #FFFFFF;
}

.ll-qty__input {
    width: 48px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    text-align: center;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    background: #FFFFFF;
    padding: 0;
    /* Masquer les flèches natives du navigateur */
    -moz-appearance: textfield;
}

.ll-qty__input::-webkit-outer-spin-button,
.ll-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ll-qty__input:focus {
    outline: none;
    background: var(--rose-50);
}

/* Remplacer le sélecteur natif WC dans le tableau panier */
.ll-cart__table .quantity {
    display: contents; /* neutralise le wrapper WC sans le casser */
}

/* ── Zone promo / coupon / carte cadeau ── */
.ll-cart__promo-zone {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ll-cart__giftcard-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--rose-50);
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-dark);
}

.ll-cart__giftcard-toggle {
    background: none;
    border: none;
    color: var(--rose-600);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ll-cart__giftcard-form {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

/* <details> coupon */
.ll-cart__coupon-details {
    list-style: none;
}

.ll-cart__coupon-details[open] .ll-cart__coupon-summary {
    border-bottom: 1px solid var(--border);
}

.ll-cart__coupon-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
    transition: background .15s ease;
}

.ll-cart__coupon-summary:hover { background: var(--rose-50); }
.ll-cart__coupon-summary::-webkit-details-marker { display: none; }

.ll-cart__coupon-body {
    padding: 16px 20px;
}

.ll-cart__coupon-field {
    display: flex;
    gap: 8px;
}

.ll-cart__coupon-input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: #FFFFFF;
    transition: border-color .15s ease;
}

.ll-cart__coupon-input:focus {
    outline: none;
    border-color: var(--rose-600);
}

/* ── Page-header panier (harmonisation avec les autres pages du site)
   La base [class*="ll-page-header--"] dans main.css fournit :
   background dégradé, padding, text-align:center, border-bottom.
   On surcharge uniquement ce qui est propre au contexte panier.
   ── */

.ll-page-header--cart {
    /* Padding bottom réduit : pas de subtitle long, les étapes prennent la place */
    padding-bottom: var(--space-md);
}

/* Badge "N article(s)" dans le titre H1 du header */
.ll-page-header--cart .ll-cart__count {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    vertical-align: middle;
    margin-left: 8px;
    backdrop-filter: blur(4px);
}

/* ── Étapes tunnel d'achat (.ll-checkout-steps)
   Migré ici depuis le <style> inline de form-checkout.php
   pour être disponible sur la page panier ET la page checkout.
   Sur form-checkout.php : supprimer le bloc <style id="ll-checkout-inline-css">
   correspondant (uniquement les règles .ll-checkout-steps).
   ── */

.ll-checkout-steps {
    margin-top: var(--space-lg);
    margin-bottom: 0;
}

.ll-checkout-steps__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ll-checkout-steps__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    position: relative;
}

/* Séparateur entre les étapes */
.ll-checkout-steps__item + .ll-checkout-steps__item::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--border);
    margin: 0 var(--space-sm);
    flex-shrink: 0;
}

/* Numéro de l'étape */
.ll-checkout-steps__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Étape active */
.ll-checkout-steps__item--active {
    color: var(--text-dark);
    font-weight: 700;
}

.ll-checkout-steps__item--active .ll-checkout-steps__number {
    background: var(--rose-600);
    border-color: var(--rose-600);
    color: #fff;
}

/* Étape validée (panier → step done sur checkout) */
.ll-checkout-steps__item--done {
    color: var(--text-muted);
}

.ll-checkout-steps__item--done .ll-checkout-steps__number {
    background: var(--rose-100);
    border-color: var(--rose-300);
    color: var(--rose-700);
}

.ll-checkout-steps__item--done a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.ll-checkout-steps__item--done a:hover {
    color: var(--rose-600);
}

/* ── Fil d'ariane Boutique / Panier dans le header cart ── */
.ll-page-header--cart .ll-cart__breadcrumb {
    margin-top: var(--space-sm);
    /* Les styles de base (.ll-cart__breadcrumb) existent déjà dans cette feuille */
}

/* ── Responsive — checkout steps ── */
@media (max-width: 480px) {
    .ll-checkout-steps__item {
        font-size: 10px;
        letter-spacing: 0.03em;
    }

    .ll-checkout-steps__item + .ll-checkout-steps__item::before {
        width: 20px;
        margin: 0 4px;
    }

    .ll-checkout-steps__number {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* =====================================================================
   15. CHECKOUT
   ===================================================================== */

/* =====================================================================
   15. CHECKOUT
   @harmonized-with cart (section 14) — même tokens, même sidebar
   ===================================================================== */

/* ── Fix flush header — neutralise le padding-top de ll-section
   sur la page checkout (le header gère lui-même son spacing interne) ── */
.woocommerce-checkout .ll-main {
    padding-top: 0;
}

/* ── Full-bleed breakout — même technique que .ll-plp__header
   permet au header de sortir du ll-container (padding: 0 24px) ── */
.ll-page-header--checkout {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ── Header de page checkout (miroir de ll-page-header--cart) ── */
.ll-page-header--checkout {
    /* Hérite du dégradé et du padding définis dans main.css via
       [class*="ll-page-header--"] — aucun override nécessaire */
    padding-bottom: var(--space-lg);
}

.ll-page-header--checkout .ll-checkout-steps {
    margin-top: var(--space-lg);
    margin-bottom: 0;
}

/* ── Wrapper principal ── */
.ll-checkout-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}

/* ── Barre de confiance ── */
.ll-checkout-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--linen);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
}

.ll-checkout-trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Layout 2 colonnes ── */
.ll-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-2xl);
    align-items: start;
}

#ll-checkout-coupon-form .woocommerce-form-coupon,
#ll-checkout-coupon-form .checkout_coupon {
    display: block !important;
}

/* ── Sections du formulaire ── */
.ll-checkout-section {
    margin-bottom: var(--space-xl);
}

.ll-checkout-section__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

/* ── Notice connexion ── */
.ll-checkout-login-notice {
    padding: var(--space-md) var(--space-lg);
    background: var(--linen);
    border-left: 3px solid var(--rose-600);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

/* ── Coupon toggle ── */
.ll-checkout-coupon-toggle {
    margin-bottom: var(--space-lg);
}

.ll-checkout-coupon-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: none;
    border: none;
    padding: 0;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    color: var(--rose-600);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}

.ll-checkout-coupon-toggle__btn:hover {
    color: var(--rose-700);
}

.ll-checkout-coupon-form {
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--linen);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

/* ── Récap commande — harmonisé avec .ll-cart__summary ── */
.ll-checkout-order-review {
    position: sticky;
    top: 100px;
    background: var(--warm-white);      /* identique à .ll-cart__summary */
    border: 1px solid var(--border);    /* identique */
    border-radius: var(--radius-lg);    /* identique */
    padding: 40px;                      /* identique */
}

.ll-checkout-order-review .ll-checkout-section__title {
    font-size: 1.375rem;                /* identique à .ll-cart__summary-title */
    margin-bottom: 24px;
    padding-bottom: 16px;
}

/* ── Champs de formulaire ── */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: var(--rose-600);
    box-shadow: 0 0 0 3px rgba(194, 80, 107, 0.10);
}

.woocommerce-checkout .form-row label {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: block;
}

.woocommerce-checkout .form-row label .required {
    color: var(--rose-600);
    text-decoration: none;
    margin-left: 2px;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: var(--rose-500);
}

/* ── Notes de commande ── */
.ll-checkout-section--notes .input-text {
    width: 100%;
    min-height: 80px;
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: #ffffff;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.ll-checkout-section--notes .input-text:focus {
    outline: none;
    border-color: var(--rose-600);
    box-shadow: 0 0 0 3px rgba(194, 80, 107, 0.10);
}

/* ── Tableau récapitulatif — harmonisé avec .cart_totals table ── */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
}

.woocommerce-checkout-review-order-table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.woocommerce-checkout-review-order-table .cart_item td {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    padding-top: var(--space-lg);
    border-bottom: none;
}

/* ── Méthodes de paiement ── */
.woocommerce-checkout #payment {
    background: var(--linen);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

.woocommerce-checkout #payment .payment_box {
    padding: var(--space-md);
    background: #ffffff;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

/* ── Bouton "Passer la commande" — harmonisé avec .checkout-button ── */
.woocommerce #place_order,
.woocommerce-checkout #place_order {
    display: block;
    width: 100%;
    padding: 16px 40px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--rose-600);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    margin-top: var(--space-lg);
}

.woocommerce #place_order:hover,
.woocommerce-checkout #place_order:hover {
    background-color: var(--rose-700);
}

.woocommerce #place_order:active {
    transform: translateY(1px);
}

.woocommerce #place_order:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* ── Logos de paiement ── */
.ll-checkout-payment-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.ll-checkout-payment-logos__label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 100%;
}

.ll-checkout-payment-logos__icon {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ll-checkout-payment-logos__stripe {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

/* ── Politique retour ── */
.ll-checkout-return-policy {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-md);
    line-height: 1.5;
}

.ll-checkout-return-policy .ll-link {
    color: var(--rose-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ll-checkout-layout {
        grid-template-columns: 1fr;
    }

    /* Récap en premier sur mobile */
    .ll-checkout-layout__right {
        order:1;
    }

    .ll-checkout-order-review {
        position: static;
    }
}

@media (max-width: 480px) {
    .ll-checkout-wrapper {
        padding: var(--space-lg) var(--space-sm);
    }

    .ll-checkout-trust-bar {
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }

    .ll-checkout-trust-bar__item {
        font-size: 11px;
    }

    .ll-checkout-order-review {
        padding: var(--space-lg);
    }
}

/* =====================================================================
   16. MON COMPTE (MY-ACCOUNT)
   ===================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 22%;
    float: left;
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 74%;
    float: right;
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--border);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 16px 24px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition:
        background-color .15s ease,
        color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--rose-50);
    color: var(--rose-600);
}

/* Tableau des commandes */
.woocommerce-account table.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-account table.woocommerce-orders-table th {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 16px 8px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

.woocommerce-account table.woocommerce-orders-table td {
    padding: 16px 8px;
    border-bottom: 1px solid var(--border);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
}

/* Statut de commande */
.woocommerce-account .woocommerce-orders-table__cell-order-status mark {
    background: none;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.woocommerce-account mark.order-status.status-completed {
    background-color: #EDF7EE;
    color: #2E7D32;
}

.woocommerce-account mark.order-status.status-processing {
    background-color: #E3F2FD;
    color: #1565C0;
}

.woocommerce-account mark.order-status.status-on-hold {
    background-color: #FFF8E1;
    color: #F57F17;
}

.woocommerce-account mark.order-status.status-cancelled,
.woocommerce-account mark.order-status.status-refunded {
    background-color: #FFEBEE;
    color: #C62828;
}


/* =====================================================================
   17. MESSAGES / NOTICES WOOCOMMERCE
   ===================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    padding: 16px 24px;
    border-radius: var(--radius-sm);
    border: none;
    border-left: 3px solid;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.woocommerce-message {
    background-color: #EDF7EE;
    border-left-color: #2E7D32;
    color: #1B5E20;
}

.woocommerce-info {
    background-color: #E3F2FD;
    border-left-color: #1565C0;
    color: #0D47A1;
}

.woocommerce-error {
    background-color: #FFEBEE;
    border-left-color: var(--rose-500);
    color: #B71C1C;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none; /* On retire les icônes WC par défaut */
}

/* Lien "Voir le panier" dans la notice */
.woocommerce-message a.button,
.woocommerce-message a.wc-forward {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 16px;
    background: none;
    color: currentColor;
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s ease;
}

.woocommerce-message a.button:hover,
.woocommerce-message a.wc-forward:hover {
    opacity: 0.7;
}


/* =====================================================================
   18. BADGE PROMO FLASH (ONSALE — LISTE ET PDP)
   ===================================================================== */

/* Déjà géré en section 5 pour la loop.
   Override sur la PDP si présent via WC natif */
.woocommerce div.product span.onsale {
    top: 16px;
    left: 16px;
    background-color: var(--rose-500);
    color: #FFFFFF;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    min-height: auto;
    min-width: auto;
    line-height: 1.4;
}


/* =====================================================================
   19. RESPONSIVE — BREAKPOINTS
   ===================================================================== */

/* Tablette : 769px–1024px */
@media (max-width: 1024px) {
    /* PDP : passe en 1 colonne */
    .woocommerce div.product,
    .pdp__layout {
        grid-template-columns: 1fr;
    }
    .pdp__gallery-col {
        position: static;
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary,.woocommerce article.product .pdp__summary-col {
        width: 100%;
    }

    /* Galerie custom : désactiver sticky sur tablette */
    .ll-product-gallery {
        position: static;
    }

    /* Onglets : pleine largeur */
    .ll-product-tabs {
        grid-column: 1 / -1;
    }

    /* Matériaux : 1 colonne sur tablette */
    .ll-tab-materiaux {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Cart collaterals */
    .woocommerce .cart-collaterals .cart_totals {
        width: 100%;
        float: none;
    }
}

/* Mobile : ≤ 768px */
@media (max-width: 768px) {
    /* Grille 2 colonnes — déjà défini en section 3 */

    /* Panier : masquer colonnes secondaires */
    .woocommerce table.cart thead {
        display: none;
    }

    .woocommerce table.cart tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr auto;
        grid-template-areas:
            "img name remove"
            "img price price"
            "img qty total";
        gap: 8px;
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
    }

    .woocommerce table.cart td {
        padding: 0;
        border: none;
    }

    .woocommerce table.cart td.product-thumbnail { grid-area: img; }
    .woocommerce table.cart td.product-name     { grid-area: name; }
    .woocommerce table.cart td.product-remove   { grid-area: remove; justify-self: end; }
    .woocommerce table.cart td.product-price    { grid-area: price; }
    .woocommerce table.cart td.product-quantity { grid-area: qty; }
    .woocommerce table.cart td.product-subtotal { grid-area: total; text-align: right; }

    /* Onglets custom ll-product-tabs : scroll horizontal sur mobile */
    .ll-product-tabs__list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .ll-product-tabs__list::-webkit-scrollbar {
        display: none;
    }

    .ll-product-tabs__btn {
        padding: 14px 18px;
        font-size: 11px;
    }

    /* Onglets WC natif fallback */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
        display: none;
    }

    /* My account : navigation en haut sur mobile */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 40px;
    }
	
	    /* ── Card : réduction des espaces ── */
    .product-card__info {
        padding-top: 8px;
    }

    /* Titre : taille réduite pour tenir sur 2 colonnes */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: 0.85rem;
        margin: 8px 0 3px;
        line-height: 1.25;
        /* 2 lignes max, avec ellipsis */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .woocommerce ul.products li.product .price {
        font-size: 0.82rem;
        margin-bottom: 4px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    .woocommerce ul.products li.product .stock {
        font-size: 10px;
        color: var(--rose-600);
        font-weight: 600;
        letter-spacing: 0.03em;
        background: var(--rose-50);
        border-radius: 3px;
        padding: 2px 5px;
        display: inline-block;
        margin-bottom: 6px;
    }

    .product-card__actions .button,
    .product-card__actions a.button,
    .product-card__actions .add_to_cart_button {
        font-size: 10px;
        padding: 9px 0;
        letter-spacing: 0.06em;
    }

    .product-card__qv-overlay {
        display: none;
    }
	
    .ll-plp__header {
        padding: 28px 16px 8px;
        border-bottom: none;
        margin-bottom: 0;
        text-align: center;
    }

	
	.ll-cat-pills {
		position: static !important;
		top: auto !important;
		background: linear-gradient(to bottom, var(--rose-50), var(--warm-white, #FAF6F0));
		border-bottom: 1px solid var(--border);
	}

    .ll-cat-pills__inner {
        padding-top: 8px;           
        padding-bottom: 14px;
    }

    .ll-plp__toolbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        padding: 10px 0;
        gap: 6px;
        margin-bottom: 20px;
        border-bottom: 1px solid var(--border);
    }

    .ll-plp__toolbar-left {
        flex: 1;
		display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        min-width: 0;              
    }


    .ll-plp__toolbar-left .ll-breadcrumb {
        order: 1;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
        color: var(--text-muted);
    }

    .ll-plp__toolbar-left .ll-breadcrumb a,
    .ll-plp__toolbar-left .ll-breadcrumb span,
    .ll-plp__toolbar-left .ll-breadcrumb li {
        font-size: 11px;
    }
	
    .ll-plp__filter-toggle {
        order: 2;
        flex-shrink: 0;
        width: auto;               
        padding: 6px 10px;
        font-size: 12px;
        background: transparent;
        border-color: var(--border);
        color: var(--text-dark);
        justify-content: center;
    }

    .ll-plp-bar {
        order: 3;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0;
    }

    .ll-plp-bar .woocommerce-result-count {
        display: none;
    }

    .woocommerce-ordering {
        margin: 0;
    }

    .woocommerce-ordering select {
        font-size: 12px;
        padding: 6px 28px 6px 10px;
        border-color: var(--border);
    }

    .woocommerce-ordering::after,
    .woocommerce-ordering .select2-spinner {
        display: none;
    }

    .ll-plp__per-page {
        display: none;
    }
	
	    /* Séparateur visuel entre description et zone d'achat */
    .pdp__cta-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-top: 14px;
        margin-top: 4px;
        margin-bottom: 12px;
        border-top: 1px solid var(--border);
        flex-wrap: nowrap;
    }

    /* Le lien guide des tailles passe en "pill secondaire" */
    .pdp__size-guide-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        border: 1px solid var(--border);
        border-radius: var(--radius-full);
        font-size: 11px;
        font-weight: 500;
        color: var(--text-body);
        text-decoration: none;
        background: var(--warm-white);
        white-space: nowrap;
        transition: border-color 150ms ease, color 150ms ease;
    }

    .pdp__size-guide-link:hover {
        border-color: var(--rose-400);
        color: var(--rose-600);
    }

    /* Le bloc urgency (badge stock) s'aligne à gauche — plus de margin-bottom */
    .ll-urgency-block {
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    /* Supprime le texte "N en stock" natif WC — doublon du badge */
    .woocommerce div.product .stock,
    .woocommerce article.product .stock {
        display: none;
    }
	
	   /* ── 1. CORRECTIF CRITIQUE : ligne d'actions ──────────────────────
       Le <tr class="ll-cart__actions-row"> héritait de display:grid,
       réduisant son unique <td colspan="6"> à la 1ère colonne (≈80px).
       On l'isole en display:block pour qu'il occupe toute la largeur.
    ── */
    .woocommerce table.cart tbody tr.ll-cart__actions-row {
        display: block;
        padding: 20px 0 8px;
        border-bottom: none;
    }

    .ll-cart__actions-row td.ll-cart__actions {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
    }

    /* ── 2. PSEUDO-LABELS data-title ─────────────────────────────────
       WooCommerce injecte un ::before { content: attr(data-title) }
       via woocommerce-smallscreen.css. On le neutralise globalement,
       puis on réinjecte un label court uniquement là où c'est utile.
    ── */
    .woocommerce table.cart td::before {
        display: none !important;
    }

    /* Label "Prix :" réinjecté devant la valeur — discret et inline */
    .woocommerce table.cart td.product-price::before {
        display: inline !important;
        content: "Prix :";
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-right: 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── 3. GRID LIGNES PRODUIT ──────────────────────────────────────
       Cible uniquement les lignes produit (pas la ligne d'actions).
       Colonnes : vignette fixe | info produit flexible | bouton ×
    ── */
    .woocommerce table.cart tbody tr:not(.ll-cart__actions-row) {
        grid-template-columns: 72px 1fr auto;
        grid-template-areas:
            "img  name    remove"
            "img  price   price"
            "img  qty     total";
        column-gap: 12px;
        row-gap: 6px;
        align-items: start;
    }

    /* Vignette : centrée verticalement */
    .woocommerce table.cart td.product-thumbnail {
        display: flex;
		align-items: center;     
		justify-content: flex-start;
		align-self: stretch; 
    }

    /* Vignette légèrement réduite */
    .woocommerce table.cart td.product-thumbnail .ll-cart__thumb {
        width: 72px;
        height: 90px;
    }

    /* Nom produit : plus compact */
    .woocommerce table.cart td.product-name .ll-cart__product-link {
        font-size: 13px;
        line-height: 1.35;
        display: block;
    }

    /* Bouton × : aligné en haut à droite */
    .woocommerce table.cart td.product-remove {
        align-self: start;
        padding-top: 2px;
    }

    /* Cellule prix : flex pour label + valeur sur une seule ligne */
    .woocommerce table.cart td.product-price {
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
        padding-top: 4px;
    }

    /* Quantité : centrée verticalement */
    .woocommerce table.cart td.product-quantity {
        display: flex;
        align-items: center;
    }

    /* Sous-total : aligné à droite, mis en valeur */
    .woocommerce table.cart td.product-subtotal {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-dark);
    }

    /* ── 4. ZONE CODE PROMO ──────────────────────────────────────────
       La <details> héritait d'une largeur contrainte.
       Le champ + bouton passent en colonne.
    ── */
    .ll-cart__promo-zone {
        width: 100%;
        margin-bottom: 0;
    }

    /* <details> pleine largeur, bordure en pointillés */
    .ll-cart__coupon-details {
        width: 100%;
        border: 1.5px dashed var(--border);
        border-radius: var(--radius-sm);
        background: var(--warm-white);
        overflow: hidden;
    }

    /* <summary> : bouton lisible pleine largeur */
    .ll-cart__coupon-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 14px 16px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-dark);
        cursor: pointer;
        list-style: none;
        background: transparent;
        border: none;
    }

    .ll-cart__coupon-summary::-webkit-details-marker {
        display: none; /* masque le triangle natif */
    }

    /* Corps du coupon : padding interne */
    .ll-cart__coupon-body {
        padding: 0 16px 16px;
    }

    /* Input + bouton : empilés en colonne */
    .ll-cart__coupon-field {
        flex-direction: column;
        gap: 8px;
    }

    /* Input pleine largeur */
    .ll-cart__coupon-input {
        width: 100%;
        padding: 12px 14px;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* Bouton "Appliquer" pleine largeur */
    .ll-cart__coupon-btn {
        width: 100%;
        padding: 12px;
        text-align: center;
        justify-content: center;
        font-size: 13px;
        box-sizing: border-box;
    }

    /* ── 5. BOUTON "METTRE À JOUR LE PANIER" ─────────────────────────
       Pleine largeur, bien lisible, espacé de la zone coupon.
    ── */
    .ll-cart__update-btn {
        display: block;
        width: 100%;
        padding: 13px 16px;
        font-size: 12px;
        letter-spacing: 0.05em;
        text-align: center;
        margin-top: 12px;
        box-sizing: border-box;
    }
}

/* Ultra-small : 375px */
@media (max-width: 390px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 8px;
    }

    .woocommerce div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }

    .woocommerce div.product form.cart .quantity {
        width: 100%;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce article.product form.cart .single_add_to_cart_button,.woocommerce article.product form.cart .single_add_to_cart_button {
        width: 100%;
    }
	
	.woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr;
    }
	
	.pdp__cta-meta {
        gap: 6px;
    }

    /* Réduction des pills pour tenir sur une ligne à 375px */
    .pdp__size-guide-link,
    .ll-urgency-badge {
        font-size: 10px;
        padding: 4px 8px;
        gap: 4px;
    }

    /* Empêche le texte du lien de déborder */
    .pdp__size-guide-link {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/**
 * === QUICK VIEW — Modal produit ===
 * Tous les tokens viennent de :root (assets/css/main.css).
 * Aucune valeur en dur.
 */

/* Overlay + animation d'entrée */
.ll-quick-view {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .2s ease,
        visibility .2s ease;
}
.ll-quick-view.is-open {
    opacity: 1;
    visibility: visible;
}

/* Backdrop */
.ll-quick-view__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 42, 0.55); /* --color-text à 55% */
    cursor: pointer;
}

/* Boîte de dialogue */
.ll-quick-view__container {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    max-width: 860px;
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(16px);
    transition: transform .2s ease;
    outline: none; /* géré par focus-visible dans quick-view.js */
}
.ll-quick-view.is-open .ll-quick-view__container {
    transform: translateY(0);
}

/* Bouton fermeture */
.ll-quick-view__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--text-dark);
    transition: background .15s ease, color .15s ease;
}
.ll-quick-view__close:hover { background: var(--rose-50); }
.ll-quick-view__close:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* Layout intérieur (2 colonnes sur desktop) */
.ll-quick-view__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 640px) {
    .ll-quick-view__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	
	.product-card__actions .button,
    .product-card__actions a.button {
        width: 100%;
    }

    .product-card__actions .button,
    .product-card__actions a.button {
        width: 100%;
    }
}

/* === Galerie === */
.ll-quick-view__gallery {
    padding: 24px;
    background: var(--warm-white);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 640px) {
    .ll-quick-view__gallery { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

.ll-quick-view__main-wrap {
    position: relative;
    aspect-ratio: 4 / 5; /* Guide §4 : portrait systématique */
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #FFFFFF;
}

.ll-quick-view__main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .2s ease;
}

/* Miniatures */
.ll-quick-view__thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ll-quick-view__thumb {
    width: 54px;
    height: 68px; /* ratio 4:5 */
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: none;
    flex-shrink: 0;
    transition: border-color .15s ease;
}
.ll-quick-view__thumb:hover,
.ll-quick-view__thumb--active {
    border-color: var(--rose-600);
}
.ll-quick-view__thumb:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}
.ll-quick-view__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === Info produit === */
.ll-quick-view__info {
    padding: 40px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 640px) {
    .ll-quick-view__info { padding: 24px; }
}

.ll-quick-view__categories {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rose-600);
}
.ll-quick-view__categories a { color: inherit; text-decoration: none; }

.ll-quick-view__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    color: var(--text-dark);
}
.ll-quick-view__title-link {
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.ll-quick-view__title-link:hover { color: var(--rose-600); }
.ll-quick-view__title-link:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.ll-quick-view__rating {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ll-quick-view__review-count {
    font-size: 13px;
    color: var(--text-muted);
}

.ll-quick-view__price {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
}
.ll-quick-view__price del {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 16px;
}
.ll-quick-view__price ins {
    text-decoration: none;
    color: var(--rose-500);
}

.ll-quick-view__short-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-muted);
}
.ll-quick-view__short-desc p { margin: 0; }

/* Stock */
.ll-quick-view__stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}
.ll-quick-view__stock-badge--in  { background: #EAF7EE; color: #2D7A3A; }
.ll-quick-view__stock-badge--low { background: #FFF4E5; color: #B45309; }
.ll-quick-view__stock-badge--out { background: #FEE2E2; color: #B91C1C; }

/* Bouton ATC — hérite de .btn-primary (main.css) */
.ll-quick-view__add-to-cart .button,
.ll-quick-view__add-to-cart .btn-primary,
.ll-quick-view__btn-options {
    width: 100%;
    justify-content: center;
}

/* Méta (SKU + lien PDP) */
.ll-quick-view__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.ll-quick-view__sku {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}
.ll-quick-view__sku-label { margin-right: 4px; }
.ll-quick-view__sku-value { font-weight: 500; }

.ll-quick-view__full-pdp-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--rose-600);
    text-decoration: none;
    transition: color .15s ease;
}
.ll-quick-view__full-pdp-link:hover { color: var(--rose-700); text-decoration: underline; }
.ll-quick-view__full-pdp-link:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Réassurance */
.ll-quick-view__trust {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--border);
}
.ll-quick-view__trust-item {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   QUICK VIEW — Overlay JS (créé dynamiquement par quick-view.js)
   #ll-qv-overlay / #ll-qv-modal / #ll-qv-inner
   CORRECTIF : masqué par défaut, visible uniquement avec --active
   @see assets/js/quick-view.js — createModalDOM()
   @version 1.0.1
   ============================================================ */

#ll-qv-overlay {
    display:          none;          /* Masqué par défaut — la classe --active le révèle */
    position:         fixed;
    inset:            0;
    z-index:          9999;
    background:       rgba(45, 31, 36, 0.55);
    align-items:      center;
    justify-content:  center;
    padding:          16px;
}

#ll-qv-overlay.ll-qv-overlay--active {
    display: flex;                   /* Révélé à l'ouverture via JS */
}

#ll-qv-modal {
    position:         relative;
    background:       #FFFFFF;
    border-radius:    var(--radius-lg);
    max-width:        860px;
    width:            100%;
    max-height:       92dvh;
    overflow-y:       auto;
    overscroll-behavior: contain;
    outline:          none;
    transform:        translateY(16px);
    opacity:          0;
    transition:
        transform .2s ease,
        opacity   .2s ease;
}

#ll-qv-modal.ll-qv-modal--active {
    transform: translateY(0);
    opacity:   1;
}

/* Bouton fermeture */
#ll-qv-close {
    position:      absolute;
    top:           16px;
    right:         16px;
    z-index:       2;
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         36px;
    height:        36px;
    background:    var(--warm-white);
    border:        1px solid var(--border);
    border-radius: var(--radius-full);
    color:         var(--text-dark);
    cursor:        pointer;
    transition:    background .15s ease;
}
#ll-qv-close:hover        { background: var(--rose-50); }
#ll-qv-close:focus-visible {
    outline:        2px solid var(--rose-600);
    outline-offset: 2px;
}

/* Zone de contenu chargée en AJAX */
#ll-qv-inner {
    padding: 24px;
}

/* État chargement */
.ll-qv-loading-msg {
    text-align:  center;
    color:       var(--text-muted);
    font-size:   14px;
    padding:     48px 24px;
}

/* État erreur */
.ll-qv-error {
    text-align:  center;
    color:       var(--rose-600);
    font-size:   14px;
    padding:     48px 24px;
}

/* Spinner pendant chargement (optionnel) */
#ll-qv-modal.ll-qv-modal--loading #ll-qv-inner {
    min-height: 200px;
    display:    flex;
    align-items: center;
    justify-content: center;
}

/* ===================================================================
   PANIER — woocommerce/cart/cart.php
   @guide-step Étape 10 + Section 3 UX — Tunnel de conversion
   @tokens     Système B — var(--rose-*), var(--text-*), var(--border),
               var(--warm-white), var(--radius-*), littéraux px/s
   =================================================================== */

/* ── Layout général ── */
.ll-cart {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 5px;
}

.ll-cart__header {
    margin-bottom: 40px;
}

.ll-cart__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ll-cart__count {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--warm-white);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

.ll-cart__breadcrumb {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.ll-cart__breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.ll-cart__breadcrumb a:hover {
    color: var(--rose-600);
}

/* ── Layout 2 colonnes ── */
.ll-cart__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 1024px) {
    .ll-cart__layout {
        grid-template-columns: 1fr 360px;
    }
}

/* ── Tableau articles ── */
.ll-cart__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.ll-cart__table thead tr {
    border-bottom: 2px solid var(--border);
}

.ll-cart__table thead th {
    padding: 8px 16px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
}

/* Surcharge spécificité : écrase la Section 14 (.woocommerce table.cart td) */
.woocommerce table.ll-cart__table td,
.ll-cart__row td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.ll-cart__row {
    transition: background .15s ease;
}

.ll-cart__row:hover {
    background: var(--warm-white);
}

/* Miniature — ratio portrait 4:5 (guide Section 6) */
.ll-cart__thumb {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
    aspect-ratio: 4 / 5;
}

/* Nom produit */
.ll-cart__product-link {
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: color .15s ease;
}

.ll-cart__product-link:hover {
    color: var(--rose-600);
}

.ll-cart__stock-notice {
    color: var(--rose-500);
    font-size: 0.8125rem;
    margin-top: 4px;
}

/* Bouton supprimer */
.ll-cart__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.ll-cart__remove-btn:hover {
    background: var(--rose-500);
    color: #FFFFFF;
}

/* ── Zone coupon + mise à jour ── */
.ll-cart__actions-row td {
    border-top: 2px solid var(--border);
}

.ll-cart__actions {
    padding: 24px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.ll-cart__coupon-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ll-cart__coupon-field {
    display: flex;
    gap: 8px;
}

.ll-cart__coupon-input {
    padding: 10px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 0.875rem;
    background: #FFFFFF;
    color: var(--text-dark);
    transition: border-color .15s ease;
    width: 200px;
}

.ll-cart__coupon-input:focus {
    outline: none;
    border-color: var(--rose-600);
}

/* Boutons actions */
.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 24px;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    text-decoration: none;
    border: none;
}

.ll-btn--secondary {
    background-color: var(--rose-600);
    color: #FFFFFF;
}

.ll-btn--secondary:hover {
    background-color: var(--rose-700);
}

.ll-btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
}

.ll-btn--ghost:hover {
    border-color: var(--text-muted);
    color: var(--text-dark);
}

/* Continuer les achats */
.ll-cart__continue {
    margin-top: 24px;
}

.ll-cart__continue-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.ll-cart__continue-link:hover {
    color: var(--rose-600);
}

/* ══════════════════════════════════════
   SIDEBAR — Récapitulatif
══════════════════════════════════════ */
.ll-cart__sidebar {
    position: sticky;
    top: 100px; /* Compenser la hauteur du header */
}

.ll-cart__summary {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.ll-cart__summary-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    color: var(--text-dark);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* ── CTA Commander ── */
.ll-cart__checkout-cta {
    margin-top: 24px;
}

/* Override natif WooCommerce pour le bouton checkout */
.ll-cart__checkout-cta .checkout-button,
.ll-cart__checkout-cta .wc-proceed-to-checkout a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 24px;
    background-color: var(--rose-600);
    color: #FFFFFF;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
    border: none;
    cursor: pointer;
}

.ll-cart__checkout-cta .checkout-button:hover,
.ll-cart__checkout-cta .wc-proceed-to-checkout a:hover {
    background-color: var(--rose-700);
}

.ll-cart__checkout-cta .checkout-button:active,
.ll-cart__checkout-cta .wc-proceed-to-checkout a:active {
    transform: translateY(1px);
}

.ll-cart__checkout-cta .checkout-button:focus-visible,
.ll-cart__checkout-cta .wc-proceed-to-checkout a:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* ── Logos de paiement ── */
.ll-cart__payment-logos {
    margin-top: 16px;
    text-align: center;
}

.ll-cart__payment-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}

.ll-cart__payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ll-payment-icon {
    width: 42px;
    height: 28px;
    border-radius: var(--radius-sm);
}

.ll-cart__ssl-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Badges de réassurance ── */
.ll-cart__reassurance {
    list-style: none;
    margin: 24px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ll-cart__reassurance-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.ll-cart__reassurance-item svg {
    flex-shrink: 0;
    color: var(--rose-600);
}

/* ── Responsive mobile ── */
@media (max-width: 767px) {
    .ll-cart__table thead {
        display: none;
    }

    .ll-cart__row,
    .ll-cart__row td {
        display: block;
        width: 100%;
    }

    .ll-cart__row td::before {
        content: attr(data-title) " : ";
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        display: block;
        margin-bottom: 4px;
    }

    .ll-cart__row td.product-thumbnail::before {
        display: none;
    }

    .ll-cart__thumb {
        width: 100%;
        height: auto;
        max-width: 140px;
    }

    .ll-cart__coupon-input {
        width: 100%;
    }

    .ll-cart__coupon-field {
        flex-wrap: wrap;
    }

    .ll-cart__summary {
        padding: 24px 16px;
    }
	
	    /* ── 1. IMAGE — centrée verticalement sur toute la hauteur de la ligne ──
       La td image est placée dans la grid-area "img" (span 3 rangées).
       display:block empêche le centrage → on repasse en flex.
    ── */
    .ll-cart__row td.product-thumbnail {
        display: flex;
        align-items: center;   /* centrage vertical dans les 3 rangées */
        justify-content: flex-start;
        height: 100%;          /* occupe bien toute la hauteur allouée */
        width: auto;           /* annule le width:100% hérité */
        padding: 0;
    }

    /* ── 2. QUANTITÉ — alignée avec le sous-total ──
       Le stepper +/− doit être sur le même axe horizontal que "28.00 €".
    ── */
    .ll-cart__row td.product-quantity {
        display: flex;
        align-items: center;
        width: auto;
        padding: 0;
    }

    /* ── 3. SOUS-TOTAL — aligné avec le stepper, affiché à droite ──
       display:block le faisait coller en haut de sa cellule.
    ── */
    .ll-cart__row td.product-subtotal {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        padding: 0;
        font-weight: 600;
        font-size: 14px;
        color: var(--text-dark);
    }

    /* ── 4. BOUTON SUPPRIMER — reste aligné en haut ──
       width:100% hérité lui ferait prendre toute la colonne "auto"
       et décalerait la croix visuellement.
    ── */
    .ll-cart__row td.product-remove {
        width: auto;
        padding: 0;
        align-self: start;
    }
}

/* ==========================================================================
   MON COMPTE — ll-myaccount
   Étape 2 — Surcharge woocommerce/myaccount/my-account.php
   @tokens  Système B — var(--rose-*), var(--text-*), var(--border),
            var(--warm-white), var(--radius-*), littéraux px/s
   ========================================================================== */

/* ---- Wrapper principal ---- */
.ll-myaccount {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 16px 80px;
}

/* ---- Breadcrumb ---- */
.ll-myaccount__breadcrumb {
    margin-bottom: 24px;
    font-size: 13px;
    color: var(--text-muted);
}

.ll-myaccount__breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.ll-myaccount__breadcrumb a:hover {
    color: var(--rose-600);
}

/* ---- En-tête ---- */
.ll-myaccount__header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.ll-myaccount__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    color: var(--text-dark);
    margin: 0 0 8px;
    line-height: 1.2;
}

.ll-myaccount__title-name {
    color: var(--rose-600);
    font-style: italic;
}

.ll-myaccount__subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* ---- Layout grille sidebar + contenu ---- */
.ll-myaccount__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
}

.ll-page-header--myaccount {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* Annule le padding horizontal hérité du ll-container */
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    .ll-myaccount__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ---- Sidebar ---- */
.ll-myaccount__sidebar {
    position: sticky;
    top: 40px;
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/* Avatar initiale */
.ll-myaccount__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--rose-600);
    margin: 0 auto 24px;
}

.ll-myaccount__avatar-initials {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1;
}

/* Navigation WooCommerce — overrides */
.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-dark);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--rose-50);
    color: var(--rose-600);
}

.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li.is-active a,
.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
    background: var(--rose-600);
    color: #FFFFFF;
    font-weight: 500;
}

/* Lien déconnexion */
.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: var(--text-muted);
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--rose-500);
    background: transparent;
}

/* ---- Zone de contenu ---- */
.ll-myaccount__content {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

/* Titres dans le contenu compte */
.ll-myaccount__content h2,
.ll-myaccount__content .woocommerce-column__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 24px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* Tableau des commandes */
.ll-myaccount__content .woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ll-myaccount__content .woocommerce-orders-table th {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 16px;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

.ll-myaccount__content .woocommerce-orders-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dark);
    vertical-align: middle;
}

.ll-myaccount__content .woocommerce-orders-table tr:last-child td {
    border-bottom: none;
}

/* Badges de statut de commande — harmonisés avec section 16 */
.ll-myaccount__content .woocommerce-orders-table .order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

.ll-myaccount__content mark.order-status.status-completed {
    background-color: #EDF7EE;
    color: #2E7D32;
}

.ll-myaccount__content mark.order-status.status-processing {
    background-color: #E3F2FD; /* aligné avec section 16 */
    color: #1565C0;
}

.ll-myaccount__content mark.order-status.status-on-hold {
    background-color: #FFF8E1;
    color: #F57F17;
}

.ll-myaccount__content mark.order-status.status-cancelled,
.ll-myaccount__content mark.order-status.status-refunded {
    background-color: #FFEBEE;
    color: #C62828;
}

/* Boutons dans le compte */
.ll-myaccount__content .woocommerce-Button,
.ll-myaccount__content .button,
.ll-myaccount__content input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--rose-600);
    color: #FFFFFF;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease;
}

.ll-myaccount__content .woocommerce-Button:hover,
.ll-myaccount__content .button:hover,
.ll-myaccount__content input[type="submit"]:hover {
    background: var(--rose-700);
}

.ll-myaccount__content .woocommerce-Button:focus-visible,
.ll-myaccount__content .button:focus-visible,
.ll-myaccount__content input[type="submit"]:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* Formulaires dans le compte */
.ll-myaccount__content .woocommerce-Input,
.ll-myaccount__content input[type="text"],
.ll-myaccount__content input[type="email"],
.ll-myaccount__content input[type="password"],
.ll-myaccount__content input[type="tel"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: #FFFFFF;
    transition: border-color .15s ease;
    box-sizing: border-box;
}

.ll-myaccount__content .woocommerce-Input:focus,
.ll-myaccount__content input[type="text"]:focus,
.ll-myaccount__content input[type="email"]:focus,
.ll-myaccount__content input[type="password"]:focus {
    outline: none;
    border-color: var(--rose-600);
    box-shadow: 0 0 0 3px rgba(200, 168, 130, 0.15); /* rose-600 à 15% — idem checkout L.1156 */
}

/* Messages de notification */
.ll-myaccount__content .woocommerce-message {
    border-left: 4px solid var(--rose-600);
    background: var(--rose-50);
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 24px;
}

.ll-myaccount__content .woocommerce-error {
    border-left: 4px solid var(--rose-500);
    background: #FFEBEE;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 24px;
}

/* ---- Responsive mobile ---- */
@media (max-width: 768px) {
    .ll-myaccount {
        padding: 24px 16px;
    }

    .ll-myaccount__sidebar {
        position: static;
    }

    .ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

    .ll-myaccount__sidebar .woocommerce-MyAccount-navigation ul li a {
        font-size: 13px;
        padding: 8px 8px;
    }

    .ll-myaccount__content {
        padding: 16px;
    }

    .ll-myaccount__content .woocommerce-orders-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── CARD PRODUIT — Mobile ≤ 480px ── */
@media (max-width: 480px) {

    /* Grille : gap réduit, colonnes équilibrées */
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 12px;
    }

    /* Image : ratio légèrement moins haut pour laisser de la place au texte */
    .product-card__image-wrap {
        aspect-ratio: 3 / 4;
    }

    /* Infos : padding réduit */
    .product-card__info {
        padding-top: 8px;
    }

    /* Titre : taille réduite, pas de retour à la ligne forcé */
    .product-card__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2 {
        font-size: 0.85rem;
        margin: 6px 0 3px;
        line-height: 1.25;
    }

    /* Prix */
    .product-card__price,
    .woocommerce ul.products li.product .price {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }

    /* Stock */
    .product-card__stock {
        font-size: 10px;
        margin-bottom: 6px;
    }

    /* Actions : bouton panier pleine largeur, aperçu masqué */
    .product-card__actions {
        flex-direction: column;
        gap: 0;
        padding-top: 6px;
    }

    .product-card__actions .button,
    .product-card__actions a.button,
    .woocommerce ul.products li.product .button {
    width: 100%;
    padding: 8px 6px;
    font-size: 9px;
    letter-spacing: 0.03em;
    white-space: normal;   /* autorise le retour à la ligne */
    line-height: 1.3;
    text-align: center;
    overflow: visible;
    text-overflow: unset;
    }

    /* Aperçu masqué sur mobile — peu pertinent, libère de l'espace */
    .product-card__quickview {
        display: none;
    }
	
	.woocommerce ul.products,
.woocommerce-page ul.products {
    padding-left: 16px;
    padding-right: 16px;
}
}

/* ===================================================================
   CATEGORY PILLS — Barre d'accès rapide aux catégories (PLP)
   @guide-step  Étape 5 — PLP · Navigation catégories
   @tokens      var(--rose-*), var(--text-*), var(--border),
                var(--radius-full), var(--transition-*)
   =================================================================== */

.ll-cat-pills {
    background: var(--warm-white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--header-h);
    z-index: 90;
}

.ll-cat-pills__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-block: 12px;
}

.ll-cat-pills__inner::-webkit-scrollbar {
    display: none;
}

/* Pill individuelle */
.ll-cat-pills__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
    flex-shrink: 0;
}

.ll-cat-pills__item:hover {
    border-color: var(--rose-300);
    background: var(--rose-50);
    color: var(--rose-700);
}

.ll-cat-pills__item:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* État actif — catégorie courante */
.ll-cat-pills__item--active {
    background: var(--rose-600);
    border-color: var(--rose-600);
    color: #fff;
    font-weight: 600;
}

.ll-cat-pills__item--active:hover {
    background: var(--rose-700);
    border-color: var(--rose-700);
    color: #fff;
}

/* Pills spéciales */
.ll-cat-pills__item--new {
    border-color: var(--rose-200);
    color: var(--rose-700);
}

.ll-cat-pills__item--sale {
    border-color: var(--gold-300);
    color: var(--gold-600);
}

.ll-cat-pills__item--sale:hover {
    background: var(--gold-50);
    border-color: var(--gold-400);
}

/* Compteur produit dans la pill */
.ll-cat-pills__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--linen);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.ll-cat-pills__item--active .ll-cat-pills__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Séparateur avant les pills éditoriales */
.ll-cat-pills__separator {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
    margin-inline: 4px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ll-cat-pills {
        top: var(--header-h);
    }

    .ll-cat-pills__inner {
        padding-inline: 16px;
        gap: 6px;
    }

    .ll-cat-pills__item {
        padding: 5px 12px;
        font-size: 12px;
    }

    .ll-cat-pills__count {
        display: none; /* Trop serré sur mobile — on masque le compteur */
    }
}

/* ── Pills dans le header PLP — identique desktop et mobile ── */
.ll-plp__hero-pills {
    margin-top: var(--space-md);
}

/* Reset : annule position sticky et fond de la nav injectée */
.ll-plp__hero-pills .ll-cat-pills {
    display: flex;          /* ré-affiche uniquement ici */
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    z-index: auto;
}

.ll-plp__hero-pills .ll-cat-pills__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0;
    overflow: visible;      /* annule le scroll horizontal de la barre sticky */
}

/* Style pill — même que .ll-guide-pill */
.ll-plp__hero-pills .ll-cat-pills__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border);
    color: var(--text-body);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.ll-plp__hero-pills .ll-cat-pills__item:hover {
    background: var(--rose-50);
    border-color: var(--rose-300);
    color: var(--rose-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

/* Pill active — catégorie sélectionnée */
.ll-plp__hero-pills .ll-cat-pills__item--active {
    background: var(--rose-600);
    border-color: var(--rose-600);
    color: #fff;
}

.ll-plp__hero-pills .ll-cat-pills__item--active:hover {
    background: var(--rose-700);
    border-color: var(--rose-700);
    color: #fff;
    transform: translateY(-1px);
}

/* Compteur produit — discret dans la pill */
.ll-plp__hero-pills .ll-cat-pills__count {
    font-size: 11px;
    opacity: 0.7;
}

/* Séparateur — masqué, le flex-wrap suffit */
.ll-plp__hero-pills .ll-cat-pills__separator {
    display: none;
}
/* =====================================================================
   20. FILTER PANEL — Off-canvas drawer + groupes + swatches
   @guide-step  Étape 5 — PLP · Sidebar filtres custom
   @tokens      var(--rose-*), var(--text-*), var(--border),
                var(--radius-*), var(--shadow-*), var(--transition-*)
   ===================================================================== */

/* ── Wrapper principal ── */
.ll-fpanel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
}

.ll-fpanel.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* ── Overlay ── */
.ll-fpanel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(45, 31, 36, 0.45);
    opacity: 0;
    transition: opacity 300ms ease;
    cursor: pointer;
}

.ll-fpanel.is-open .ll-fpanel__overlay {
    opacity: 1;
}

/* ── Drawer ── */
.ll-fpanel__drawer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 340px;
    max-width: 90vw;
    background: #fff;
    box-shadow: var(--shadow-hover);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.ll-fpanel.is-open .ll-fpanel__drawer {
    transform: translateX(0);
}

/* ── En-tête ── */
.ll-fpanel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.ll-fpanel__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.ll-fpanel__active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--rose-600);
    color: #fff;
    border-radius: var(--radius-full);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.ll-fpanel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-muted);
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}

.ll-fpanel__close:hover {
    background: var(--linen);
    color: var(--text-dark);
}

.ll-fpanel__close:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* ── Chips filtres actifs ── */
.ll-fpanel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--linen);
    flex-shrink: 0;
}

.ll-fpanel__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.ll-fpanel__chip:hover {
    background: var(--rose-50);
    border-color: var(--rose-300);
}

.ll-fpanel__chip span[aria-hidden] {
    font-size: 14px;
    line-height: 1;
    color: var(--text-muted);
    margin-left: 2px;
}

.ll-fpanel__reset-all {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--rose-600);
    text-decoration: none;
    align-self: center;
    margin-left: auto;
    white-space: nowrap;
    padding: 4px 0;
}

.ll-fpanel__reset-all:hover {
    text-decoration: underline;
}

/* ── Zone scrollable ── */
.ll-fpanel__form {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    display: flex;
    flex-direction: column;
}

.ll-fpanel__form::-webkit-scrollbar        { width: 4px; }
.ll-fpanel__form::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 2px; }

/* ── Groupe de filtres ── */
.ll-fpanel__group {
    border-bottom: 1px solid var(--border);
}

.ll-fpanel__group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dark);
    text-align: left;
    transition: background 150ms ease;
}

.ll-fpanel__group-toggle:hover {
    background: var(--linen);
}

.ll-fpanel__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 250ms ease;
}

.ll-fpanel__group-toggle[aria-expanded="false"] .ll-fpanel__chevron {
    transform: rotate(-90deg);
}

.ll-fpanel__group-content {
    padding: 4px 24px 16px;
    overflow: hidden;
    transition: max-height 250ms ease;
}

.ll-fpanel__group-toggle[aria-expanded="false"] + .ll-fpanel__group-content {
    display: none;
}

/* ── Prix — range slider double ── */
.ll-fpanel__price-range {
    padding-top: 4px;
}

.ll-fpanel__price-track {
    position: relative;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 12px;
}

.ll-fpanel__price-fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--rose-600);
    border-radius: 2px;
    /* left et right mis à jour par filters.js */
}

.ll-fpanel__price-thumbs {
    position: relative;
    height: 0;
}

.ll-fpanel__range {
    position: absolute;
    top: -10px;
    width: 100%;
    height: 20px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}

.ll-fpanel__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--rose-600);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(194, 80, 107, 0.25);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ll-fpanel__range::-webkit-slider-thumb:hover,
.ll-fpanel__range:focus-visible::-webkit-slider-thumb {
    border-color: var(--rose-700);
    box-shadow: 0 0 0 3px rgba(194, 80, 107, 0.15);
}

.ll-fpanel__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--rose-600);
    cursor: pointer;
}

.ll-fpanel__price-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body);
}

.ll-fpanel__price-sep {
    color: var(--text-muted);
}

/* ── Checkboxes ── */
.ll-fpanel__checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ll-fpanel__check-item { list-style: none; }

.ll-fpanel__check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 120ms ease;
}

.ll-fpanel__check-label:hover {
    padding-inline: 6px;
    margin-inline: -6px;
    background: var(--linen);
}

.ll-fpanel__checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    accent-color: var(--rose-600);
    cursor: pointer;
}

.ll-fpanel__check-name {
    font-size: 14px;
    color: var(--text-body);
    flex: 1;
}

.ll-fpanel__check-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

/* ── Swatches couleur ── */
.ll-fpanel__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.ll-fpanel__swatch-item { list-style: none; }

.ll-fpanel__swatch-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
}

.ll-fpanel__checkbox--swatch {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ll-fpanel__swatch-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--linen);
    transition: border-color 150ms ease, transform 150ms ease;
    display: block;
}

.ll-fpanel__swatch-label:hover .ll-fpanel__swatch-dot,
.ll-fpanel__swatch-label--active .ll-fpanel__swatch-dot {
    border-color: var(--rose-600);
    transform: scale(1.12);
}

.ll-fpanel__swatch-label--active .ll-fpanel__swatch-dot::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rose-600);
    margin: 8px auto 0;
}

.ll-fpanel__swatch-name {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    max-width: 52px;
    line-height: 1.2;
}

/* ── Toggles disponibilité ── */
.ll-fpanel__group--toggles .ll-fpanel__group-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ll-fpanel__toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.ll-fpanel__toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ll-fpanel__toggle-track {
    position: relative;
    display: flex;
    align-items: center;
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition: background 200ms ease;
}

.ll-fpanel__toggle-input:checked + .ll-fpanel__toggle-track {
    background: var(--rose-600);
}

.ll-fpanel__toggle-thumb {
    position: absolute;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 200ms ease;
}

.ll-fpanel__toggle-input:checked + .ll-fpanel__toggle-track .ll-fpanel__toggle-thumb {
    transform: translateX(18px);
}

.ll-fpanel__toggle-input:focus-visible + .ll-fpanel__toggle-track {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

.ll-fpanel__toggle-text {
    font-size: 14px;
    color: var(--text-body);
}

/* ── Footer boutons ── */
.ll-fpanel__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
    margin-top: auto;
}

.ll-fpanel__btn-reset {
    font-family: 'Jost', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    border: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.ll-fpanel__btn-reset:hover {
    color: var(--text-dark);
}

.ll-fpanel__btn-apply {
    flex: 1;
    justify-content: center;
}

/* ── Bouton toggle dans la toolbar ── */
.ll-filter-toggle__badge {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--rose-600);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 2px;
}

.ll-filter-toggle__badge.is-visible {
    display: inline-flex;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
    .ll-fpanel__drawer {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        transform: translateY(100%);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .ll-fpanel.is-open .ll-fpanel__drawer {
        transform: translateY(0);
    }

    .ll-fpanel__overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

/* ── Wrapper pages WooCommerce ── */
.ll-woocommerce-main {
    padding-top: 0; /* ll-cart gère son propre padding-top */
}

/* =====================================================================
   20. NAVIGATION PRODUIT — Précédent / Suivant (PDP)
       hooks.php → ll_pdp_product_navigation()
       Affichée via woocommerce_after_single_product, priority 5
   ===================================================================== */

.ll-product-nav {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    border-top: 1px solid var(--border);
}

.ll-product-nav__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    max-width: var(--container);
    margin-inline: auto;
}

/* ── Lien commun (prev & next) ── */
.ll-product-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-dark);
    background: #FFFFFF;
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease;
    min-width: 0; /* évite le débordement en grid */
    overflow: hidden;
}

.ll-product-nav__item:hover {
    border-color: var(--rose-500);
    box-shadow: 0 2px 12px rgba(194, 80, 107, 0.10);
}

.ll-product-nav__item:focus-visible {
    outline: 2px solid var(--rose-600);
    outline-offset: 2px;
}

/* Suivant : image à droite → aligner le contenu à droite */
.ll-product-nav__item--next {
    justify-content: flex-end;
    text-align: right;
}

/* ── Miniature ── */
.ll-product-nav__item img {
    flex-shrink: 0;
    width: 56px;
    height: 84px;       /* ratio 4:5 / 2:3 — cohérent avec la galerie */
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--warm-white);
    display: block;
}

/* ── Flèche ── */
.ll-product-nav__arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
    line-height: 1;
}

.ll-product-nav__item:hover .ll-product-nav__arrow {
    color: var(--rose-500);
}

.ll-product-nav__item--prev:hover .ll-product-nav__arrow {
    transform: translateX(-3px);
}

.ll-product-nav__item--next:hover .ll-product-nav__arrow {
    transform: translateX(3px);
}

/* ── Label (hint + titre) ── */
.ll-product-nav__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;       /* permet le text-overflow en grid */
}

.ll-product-nav__hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ll-product-nav__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Mobile : colonne unique, items plus compacts ── */
@media (max-width: 640px) {
    .ll-product-nav__inner {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .ll-product-nav__item--next {
        justify-content: flex-start;
        text-align: left;
    }

    .ll-product-nav__item img {
        width: 48px;
        height: 72px;
    }
}