/* ============================================================
   LAYOUT GLOBAL — 2 colonnes desktop
   ============================================================ */

@media (min-width: 1024px) {
    .woocommerce-cart .page-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 40px;
        align-items: start;
        max-width: 1440px;
        margin: 0px auto;
    }

    .woocommerce-cart .woocommerce {
        display: contents;
    }

    .woocommerce-cart .woocommerce-cart-form {
        grid-column: 1;
    }

    .woocommerce-cart .cart-collaterals {
        grid-column: 2;
        position: sticky;
        top: 20px;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}


/* ============================================================
   CARTE PRODUIT — 2 colonnes (image | infos)
   ============================================================ */

.woocommerce-cart .shop_table.cart {
    border: 0;
    background: transparent;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.woocommerce-cart .shop_table.cart thead {
    display: none;
}

.woocommerce-cart .shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
    gap: 32px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    margin-bottom: 16px;
    align-items: start;
    position: relative;
}

.woocommerce-cart .shop_table.cart tr.cart_item td {
    border: 0 !important;
    padding: 0;
    background: transparent;
}


/* ============================================================
   COLONNE 1 — Image dans un cadre style fiche produit
   ============================================================ */

.woocommerce-cart .shop_table.cart .product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.woocommerce-cart .shop_table.cart .product-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    aspect-ratio: auto;
}


/* ============================================================
   COLONNE 2, ROW 1 — Cellule produit-name (flex column)
   contient : titre / prix unitaire / options
   ============================================================ */

.woocommerce-cart .shop_table.cart .product-name {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* TITRE — order 1 */
.woocommerce-cart .shop_table.cart .product-name > a {
    order: 1;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-primary, #1FA8DC);
    text-decoration: none;
    text-transform: none;
    line-height: 1.2;
    letter-spacing: 0;
    display: block;
    margin: 0 0 10px;
    padding: 0;
    width: max-content;
    max-width: calc(100% - 40px);
}

.woocommerce-cart .shop_table.cart .product-name > a:hover {
    color: #1888b3;
}

/* Lien "→ Modifier les options pour ce produit" — entre titre et prix unitaire */
.lbp-edit-options,
.lbp-edit-options:link,
.lbp-edit-options:visited,
.lbp-edit-options:hover,
.lbp-edit-options:focus,
.lbp-edit-options:active {
    order: 1;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto;
    max-width: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1 !important;
    color: #888 !important;
    text-decoration: none !important;
    margin: 0 0 8px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.lbp-edit-options:hover {
    opacity: 0.7;
}

.lbp-edit-options__arrow,
.lbp-edit-options img.lbp-edit-options__arrow {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    /* Teinte le SVG noir en gris #888 */
    filter: invert(58%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(91%) contrast(83%);
}

/* PRIX UNITAIRE — order 2 (injecté par cart.js dans .product-name) */
.lbp-unit-price {
    order: 2;
    font-size: 14px;
    color: #888;
    margin: 0 0 8px;
}

.lbp-unit-price-label {
    color: #555;
    font-weight: 600;
}

.lbp-unit-price .woocommerce-Price-amount {
    color: #888;
}

/* OPTIONS — order 3 */
.woocommerce-cart dl.variation {
    order: 3;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
}

.woocommerce-cart dl.variation dt {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #555;
}

.woocommerce-cart dl.variation dd {
    margin: 0;
    padding: 0;
    color: #2c2c2c;
}

.woocommerce-cart dl.variation dd p {
    margin: 0;
}

.woocommerce-cart dl.variation dd a {
    color: var(--color-primary, #1FA8DC);
    text-decoration: none;
}

.woocommerce-cart dl.variation dd a:hover {
    text-decoration: underline;
}


/* ============================================================
   COLONNE 2, ROW 2 — Quantité + Sous-total côte à côte
   Le sous-total est cloné DANS .product-quantity par cart.js
   pour s'aligner naturellement à droite du sélecteur via flex+gap
   ============================================================ */

.woocommerce-cart .shop_table.cart .product-quantity {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    position: relative; /* pour le toast .lbp-qty-message en absolute */
}

/* Le sous-total cloné, juste à droite du sélecteur */
.lbp-subtotal-inline {
    font-size: 18px;
    font-weight: 700;
    color: #2c2c2c;
}

.lbp-subtotal-inline del {
    display: none !important;
}

/* Message contextuel min/max au-dessus du sélecteur quantité
   Apparaît brièvement quand l'utilisateur essaie de dépasser une borne */
.lbp-qty-message {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    padding: 8px 12px;
    background: #fff8e1;
    border: 1px solid #ffd54f;
    border-radius: 6px;
    color: #6d4c00;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}

.lbp-qty-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cacher le sous-total original (cloné par cart.js dans .product-quantity) */
.woocommerce-cart .shop_table.cart .product-subtotal {
    display: none !important;
}

/* Cacher le prix unitaire original (déplacé par JS dans .product-name) */
.woocommerce-cart .shop_table.cart .product-price {
    display: none !important;
}


/* ============================================================
   SÉLECTEUR QUANTITÉ — même look que fiche produit
   Cadre arrondi, boutons − et + plats, input central sans bordure
   ============================================================ */

.woocommerce-cart .cart_item .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    padding: 0 4px;
    height: 40px;
}

.woocommerce-cart .cart_item .quantity .minus,
.woocommerce-cart .cart_item .quantity .plus {
    background: transparent;
    border: 0;
    color: #6b6b6b;
    font-size: 16px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.woocommerce-cart .cart_item .quantity .minus:hover,
.woocommerce-cart .cart_item .quantity .plus:hover {
    color: var(--color-primary, #1FA8DC);
}

.woocommerce-cart .cart_item .quantity input.qty {
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 15px;
    color: #333;
    width: 60px;
    padding: 0;
    -moz-appearance: textfield;
}

.woocommerce-cart .cart_item .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .cart_item .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ============================================================
   CROIX SUPPRESSION — en haut à droite
   ============================================================ */

.woocommerce-cart .shop_table.cart .product-remove {
    position: absolute;
    top: 16px;
    right: 16px;
    grid-column: unset;
    grid-row: unset;
    padding: 0;
    margin: 0;
    z-index: 2;
}

.woocommerce-cart .shop_table.cart .product-remove a.remove {
    color: #999 !important;
    font-size: 28px;
    text-decoration: none;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    display: inline-block;
}

.woocommerce-cart .shop_table.cart .product-remove a.remove:hover {
    color: #c00 !important;
    background: transparent !important;
}


/* ============================================================
   Ligne actions (coupon + update) — cases arrondies cohérentes
   ============================================================ */

.woocommerce-cart .shop_table.cart .actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    background: transparent;
    border: 0;
}

.woocommerce-cart .coupon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Champ "Code promo" */
.woocommerce-cart .coupon input#coupon_code,
.woocommerce-cart input[name="coupon_code"] {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    padding: 0 16px;
    height: 48px;
	width: auto;
    font-size: 14px;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
}

.woocommerce-cart .coupon input#coupon_code:focus,
.woocommerce-cart input[name="coupon_code"]:focus {
    border-color: var(--color-primary, #1FA8DC);
}

/* Bouton "Appliquer le code promo" */
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart button[name="apply_coupon"] {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    padding: 0 20px;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
}

.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
.woocommerce-cart button[name="apply_coupon"]:hover {
    border-color: var(--color-primary, #1FA8DC);
    color: var(--color-primary, #1FA8DC);
}

/* Bouton "Mettre à jour le panier" — CACHÉ : la mise à jour est automatique
   via AJAX au changement de quantité, le bouton n'apporte rien */
.woocommerce-cart button[name="update_cart"] {
    display: none !important;
}


/* ============================================================
   RÉCAP TOTAUX (sidebar droite)
   ============================================================ */

.woocommerce-cart .cart-collaterals .cart_totals {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 24px;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-display, 'Couture Bold', sans-serif);
    font-size: 18px;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #2c2c2c;
    letter-spacing: 0.02em;
}

/* Reset complet de toutes les bordures de la table récap */
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table tbody,
.woocommerce-cart .cart_totals table thead,
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    border: 0 !important;
    background: transparent !important;
}

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

.woocommerce-cart .cart_totals table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    padding: 0;
    flex: 0 0 auto;
    text-align: left;
    font-size: 15px;
    color: #2c2c2c;
}

.woocommerce-cart .cart_totals table th {
    font-weight: 600;
    color: #555;
}

/* Sous-total : trait gris fin dessous */
.woocommerce-cart .cart_totals .cart-subtotal {
    border-bottom: 1px solid #eee !important;
}

/* Total : pas de trait, padding-top léger */
.woocommerce-cart .cart_totals .order-total {
    padding-top: 16px !important;
    border: 0 !important;
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 18px;
    font-weight: 700;
    color: #2c2c2c;
}


/* Bouton "Valider la commande" */
.woocommerce-cart .wc-proceed-to-checkout {
    padding-top: 16px !important;
}

.woocommerce-cart a.checkout-button {
    display: block;
    width: 100%;
    background: var(--color-primary, #1FA8DC) !important;
    color: #fff !important;
    padding: 16px 20px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    transition: background 0.15s !important;
}

.woocommerce-cart a.checkout-button:hover {
    background: #1888b3 !important;
}


/* ============================================================
   NOTIFICATIONS WC (info / success / error)
   Style cohérent : carte blanche, trait coloré à gauche, ombre douce
   ============================================================ */

/* Panier vide : pas de carte, juste le texte centré
   Sélecteur double-classe pour battre la spécificité de .woocommerce-info */
.woocommerce-cart .woocommerce-info.cart-empty,
.woocommerce-cart .cart-empty {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #555 !important;
    margin: 0 0 24px !important;
}

/* Notifications WC (info / success / error) hors panier vide */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error {
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-left: 4px solid var(--color-primary, #1FA8DC) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    color: #333 !important;
    font-size: 15px !important;
    list-style: none !important;
    margin: 0 0 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Notif success (Ballon supprimé, Code promo appliqué…) : trait bleu primaire */
.woocommerce-cart .woocommerce-message {
    border-left-color: var(--color-primary, #1FA8DC) !important;
}

/* Notif erreur : trait rouge */
.woocommerce-cart .woocommerce-error {
    border-left-color: #c00 !important;
}

/* Cacher les pseudo-elements WC moches (icônes) */
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-error::before {
    display: none !important;
}

/* Lien "Annuler ?" dans la notif de suppression */
.woocommerce-cart .woocommerce-message a.restore-item {
    color: var(--color-primary, #1FA8DC) !important;
    font-weight: 600 !important;
    margin-left: 8px !important;
    text-decoration: none !important;
}

.woocommerce-cart .woocommerce-message a.restore-item:hover {
    text-decoration: underline !important;
}


/* ============================================================
   PANIER VIDE — layout centré, bouton retour brandé
   ============================================================ */

/* Si le panier est vide, on casse la grille 2-cols et on centre */
.woocommerce-cart .page-content:has(.cart-empty) {
    display: block !important;
    max-width: 600px !important;
    margin: 60px auto !important;
    text-align: center !important;
}

.woocommerce-cart .page-content:has(.cart-empty) .woocommerce {
    display: block !important;
}

/* Bouton "Retour à la boutique" : style bleu primaire */
.woocommerce-cart .return-to-shop {
    margin-top: 24px !important;
    text-align: center !important;
}

.woocommerce-cart .return-to-shop a.wc-backward,
.woocommerce-cart a.wc-backward {
    display: inline-block !important;
    background: var(--color-primary, #1FA8DC) !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    border: 0 !important;
    transition: background 0.15s !important;
}

.woocommerce-cart .return-to-shop a.wc-backward:hover,
.woocommerce-cart a.wc-backward:hover {
    background: #1888b3 !important;
    color: #fff !important;
}


/* ============================================================
   RESPONSIVE — mobile et tablette
   ============================================================ */

@media (max-width: 1023px) {
    .woocommerce-cart .shop_table.cart tr.cart_item {
        grid-template-columns: 120px 1fr;
        gap: 16px;
        padding: 16px;
    }

    .woocommerce-cart .shop_table.cart .product-thumbnail {
        grid-column: 1;
        grid-row: 1;
        padding: 8px;
    }

    .woocommerce-cart .shop_table.cart .product-name > a {
        font-size: 22px;
    }

    .woocommerce-cart .shop_table.cart .product-quantity {
        grid-column: 1 / -1;
        gap: 20px;
    }
}
/* ============================================================
   FIX — Ligne "Expédition" qui déborde du cadre
   ============================================================ */

/* La ligne Expédition contient plusieurs éléments (libellé, prix, texte
   d'info, bouton "Calculer les frais d'expédition"). En flex space-between
   ils débordent à droite. On la passe en wrap + colonne pour le td. */
.woocommerce-cart .cart_totals table tr.shipping,
.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals {
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Le th "Expédition" reste compact à gauche */
.woocommerce-cart .cart_totals table tr.shipping th,
.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals th {
    flex: 0 0 auto;
    min-width: 90px;
}

/* Le td prend toute la largeur restante, et son contenu s'aligne à droite,
   en colonne pour que le texte d'info passe sous le prix */
.woocommerce-cart .cart_totals table tr.shipping td,
.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Les éléments enfants du td (méthode + texte d'info + bouton calculator)
   s'empilent verticalement, alignés à droite */
.woocommerce-cart .cart_totals table tr.shipping td > *,
.woocommerce-cart .cart_totals table tr.woocommerce-shipping-totals td > * {
    display: block;
    text-align: right;
}

/* Texte d'info "Les options de livraison seront mises à jour..." :
   plus petit, gris, sur une nouvelle ligne */
.woocommerce-cart .cart_totals .shipping-calculator-button,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping ul.woocommerce-shipping-methods {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 6px;
    line-height: 1.4;
    text-align: right;
}

/* Bouton "Calculer les frais d'expédition" stylé en lien discret */
.woocommerce-cart .cart_totals .shipping-calculator-button {
    color: var(--color-primary, #1FA8DC);
    text-decoration: underline;
    font-size: 12px;
}

/* Sécurité globale : aucun élément du récap totaux ne déborde du cadre */
.woocommerce-cart .cart-collaterals .cart_totals {
    overflow: hidden;
}
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table * {
    max-width: 100%;
    box-sizing: border-box;
}
/* ============================================================
   FIX MOBILE — débordement horizontal de la carte produit
   Cause : grid-template-columns "1fr" ne rétrécit pas si le contenu
   interne a des white-space:nowrap ou width:max-content.
   Solution : minmax(0, 1fr) + autorisation du wrap.
   ============================================================ */

@media (max-width: 600px) {

	/* Marge haute au-dessus du 1er card produit */
	.woocommerce-cart .shop_table.cart tbody tr.cart_item:first-child {
		margin-top: 24px !important;
	}

	/* Marge basse sous le card "Total panier" */
	.woocommerce-cart .cart-collaterals .cart_totals {
		margin-bottom: 32px !important;
	}
	
	/* Cache les labels data-title injectés par WC */
	.woocommerce-cart .shop_table.cart td::before {
		display: none !important;
	}

	/* Layout : image | (titre/Modifier/prix), options pleine largeur, quantité pleine largeur */
	.woocommerce-cart .shop_table.cart tr.cart_item {
		grid-template-columns: 110px minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto !important;
		grid-template-areas:
			"image  details"
			"opts   opts"
			"qty    qty" !important;
		gap: 14px !important;
		padding: 14px !important;
		align-items: start;
	}

	/* Image gauche, taille naturelle */
	.woocommerce-cart .shop_table.cart .product-thumbnail {
		grid-area: image !important;
		grid-row: auto !important;
		align-self: start;
		padding: 6px;
		max-width: 110px;
		max-height: 110px;
	}

	/* À droite de l'image : titre + Modifier + prix unitaire (flex column) */
	.woocommerce-cart .shop_table.cart .product-name {
		grid-area: details !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 4px !important;
	}

	.woocommerce-cart .shop_table.cart .product-name > a:not(.lbp-edit-options) {
		order: 1 !important;
		width: auto !important;
		max-width: 100% !important;
		text-align: left !important;
		font-size: 18px !important;
		margin: 0 !important;
		padding-right: 32px !important;
	}

	.woocommerce-cart .lbp-edit-options {
		order: 2 !important;
		text-align: left !important;
		margin: 8px 0 0 0 !important;
		padding-right: 14px !important;     /* ne touche plus le bord droit */
		font-size: 13px !important;
		white-space: normal !important;     /* override original nowrap → wrap si long */
	}

	/* Cellule mobile (créée par cart.js) : prix unitaire + options en pleine largeur */
	.woocommerce-cart .shop_table.cart .product-options-mobile {
		grid-area: opts !important;
		display: block !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		margin-top: 4px;
	}

	/* Prix unitaire dans la cellule mobile */
	.woocommerce-cart .product-options-mobile .lbp-unit-price {
		display: block !important;
		margin: 0 0 4px 0 !important;       /* aligné avec le row-gap des options (4px) */
		text-align: left !important;
		font-size: 13px !important;
	}

	/* Options dans la cellule mobile */
	.woocommerce-cart .product-options-mobile dl.variation {
		margin: 0 !important;
		text-align: left !important;
		grid-template-columns: max-content 1fr !important;
		gap: 4px 12px !important;
		font-size: 13px !important;
		width: 100%;
	}

	/* Quantité : pleine largeur tout en bas */
	.woocommerce-cart .shop_table.cart .product-quantity {
		grid-area: qty !important;
		justify-self: stretch !important;
		justify-content: space-between !important;
		margin-top: 8px;
	}

	/* Croix de suppression : haut droite */
	.woocommerce-cart .shop_table.cart .product-remove {
		top: 8px !important;
		right: 8px !important;
	}
	.woocommerce-cart .shop_table.cart .product-remove a.remove {
		font-size: 22px !important;
	}
}