/**
 * Ayu Mini Cart - Styles
 * Plugin léger de mini-cart pour WooCommerce
 * EN: Lightweight mini-cart plugin for WooCommerce
 * 
 * @package Ayu_Mini_Cart
 * @version 1.0.0
 */

/* ==========================================================================
   Variables CSS
   EN: CSS Variables
   ========================================================================== */
:root {
    --ayumc-primary: #E76F51;
    --ayumc-primary-hover: #d05a3d;
    --ayumc-text: #2d3436;
    --ayumc-text-light: #636e72;
    --ayumc-border: #e0e0e0;
    --ayumc-bg: #ffffff;
    --ayumc-bg-light: #f8f9fa;
    --ayumc-success: #00b894;
    --ayumc-error: #d63031;
    --ayumc-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --ayumc-radius: 8px;
    --ayumc-panel-width: 700px;
    --ayumc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Bouton flottant du panier
   EN: Floating cart button
   ========================================================================== */
.ayumc-cart-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--ayumc-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99998;
    box-shadow: var(--ayumc-shadow);
    transition: transform var(--ayumc-transition), background var(--ayumc-transition);
}

.ayumc-cart-toggle:hover {
    transform: scale(1.05);
    background: var(--ayumc-primary-hover);
}

.ayumc-cart-icon {
    width: 24px;
    height: 24px;
    color: #fff;
}

.ayumc-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    background: var(--ayumc-text);
    color: #fff;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ayumc-cart-count.ayumc-hidden {
    display: none;
}

/* ==========================================================================
   Icône du panier pour menu (Shortcode/Widget)
   Styles robustes pour compatibilité avec tous les thèmes
   EN: Cart icon for menu (Shortcode/Widget)
   Robust styles for compatibility with all themes
   ========================================================================== */
.ayumc-cart-trigger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 8px;
    position: relative !important;
    text-decoration: none !important;
    color: inherit;
    cursor: pointer !important;
    padding: 8px 12px;
    transition: opacity 0.2s ease;
    pointer-events: auto !important;
    z-index: 100 !important;
}

.ayumc-cart-trigger:hover {
    opacity: 0.8 !important;
    text-decoration: none !important;
}

.ayumc-icon-svg {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    display: inline-block !important;
    visibility: visible !important;
}

/* Icône personnalisée (image) */
/* EN: Custom icon (image) */
img.ayumc-icon-svg,
.ayumc-icon-custom {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    object-fit: contain;
    display: inline-block !important;
    visibility: visible !important;
}

.ayumc-icon-text {
    font-size: 14px;
    font-weight: 500;
}

.ayumc-icon-count {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 18px !important;
    height: 18px !important;
    background: var(--ayumc-primary, #ed6a5b) !important;
    color: #ffffff !important;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600 !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 50% !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 101 !important;
}

.ayumc-icon-count.ayumc-icon-zero {
    display: none !important;
}

.ayumc-cart-loader {
    position: absolute;
    inset: 0;
    background: var(--ayumc-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayumc-spinner {
    width: 24px;
    height: 24px;
    color: #fff;
    animation: ayumc-spin 1s linear infinite;
}

@keyframes ayumc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Overlay
   EN: Overlay
   ========================================================================== */
.ayumc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ayumc-transition), visibility var(--ayumc-transition);
}

.ayumc-overlay.ayumc-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Panel du panier
   EN: Cart panel
   ========================================================================== */
.ayumc-cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--ayumc-panel-width);
    max-width: 100%;
    height: 100%;
    background: var(--ayumc-bg);
    z-index: 99999;
    transform: translateX(100%);
    transition: transform var(--ayumc-transition);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.ayumc-cart-panel.ayumc-open {
    transform: translateX(0);
}

/* Header */
/* EN: Header */
.ayumc-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 20px;
    border-bottom: 1px solid var(--ayumc-border);
    flex-shrink: 0;
}

.ayumc-cart-title {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    color: var(--ayumc-text);
    margin: 0;
}

.ayumc-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--ayumc-primary);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: all var(--ayumc-transition);
    padding: 0 !important;
    margin-right: 0;
}

.ayumc-close-btn:hover {
    background: var(--ayumc-primary-hover);
    transform: scale(1.05);
    color: #ffffff !important;
}

.ayumc-close-btn svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff !important;
    stroke-width: 2.5;
}

/* Contenu scrollable */
/* EN: Scrollable content */
.ayumc-cart-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ayumc-cart-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ==========================================================================
   Barre de livraison gratuite
   EN: Free shipping bar
   ========================================================================== */
.ayumc-free-shipping {
    padding: 10px 20px;
    background: linear-gradient(135deg, #fff5f3 0%, #fff 100%);
    border-bottom: 1px solid var(--ayumc-border);
    flex-shrink: 0;
}

.ayumc-free-shipping.ayumc-achieved {
    background: linear-gradient(135deg, #e8f8f5 0%, #fff 100%);
}

.ayumc-fs-text {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    color: var(--ayumc-text);
    margin-bottom: 10px;
    line-height: 1.4;
}

.ayumc-fs-text .ayumc-fs-icon {
    display: inline-flex;
    vertical-align: -4px;
    margin-right: 6px;
}

.ayumc-fs-text .woocommerce-Price-amount {
    white-space: nowrap;
}

.ayumc-fs-text strong {
    display: inline;
}

.ayumc-fs-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--ayumc-primary);
}

.ayumc-free-shipping.ayumc-achieved .ayumc-fs-icon {
    color: var(--ayumc-success);
}

.ayumc-fs-icon svg {
    width: 100%;
    height: 100%;
}

.ayumc-fs-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.ayumc-fs-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--ayumc-primary) 0%, #ff8a65 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.ayumc-fs-progress.ayumc-complete {
    background: linear-gradient(90deg, var(--ayumc-success) 0%, #55efc4 100%);
}

/* ==========================================================================
   Panier vide
   EN: Empty cart
   ========================================================================== */
.ayumc-empty-cart {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.ayumc-empty-icon {
    width: 80px;
    height: 80px;
    color: var(--ayumc-border);
    margin-bottom: 20px;
}

.ayumc-empty-icon svg {
    width: 100%;
    height: 100%;
}

.ayumc-empty-text {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    color: var(--ayumc-text-light);
    margin: 0 0 20px;
}

.ayumc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 9px;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}

.ayumc-btn-outline {
    display: inline-block;
    width: 100%;
    max-width: 280px;
    padding: 13px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    background-color: #ed6a5b;
    color: #ffffff !important;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
}

.ayumc-btn-outline:hover {
    background-color: #d85a4b;
    color: #ffffff !important;
    text-decoration: none;
}

/* ==========================================================================
   Articles du panier
   EN: Cart items
   ========================================================================== */
.ayumc-cart-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Zone défilable enveloppant liste + suggestions.
   Par défaut TRANSPARENTE (display:contents) : la liste garde son propre scroll et la reco
   reste un bloc séparé — comportement historique, inchangé pour les autres sites.
   Le preset Ayuin la transforme en vrai conteneur défilable (voir CSS dynamique).
   EN: Scroll area wrapping list + suggestions. Transparent by default (display:contents), so
   behaviour is unchanged; the Ayuin preset turns it into a real scroll container. */
.ayumc-scroll-area {
    display: contents;
}

.ayumc-cart-item {
    display: grid;
    grid-template-columns: 72px 1fr auto auto;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ayumc-border);
    align-items: center;
}

.ayumc-item-image {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ayumc-bg-light);
}

.ayumc-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ayumc-item-details {
    min-width: 0;
}

.ayumc-item-name {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 500;
    color: var(--ayumc-text);
    margin-bottom: 4px;
    line-height: 1.3;
    padding-right: 15px;
}

.ayumc-item-name a {
    color: inherit;
    text-decoration: none;
}

.ayumc-item-name a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.ayumc-item-variation {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    color: var(--ayumc-text-light);
    margin-bottom: 2px;
}

.ayumc-item-qty-row {
    margin-top: 8px;
}

.ayumc-qty-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
}

/* Quantité pour les produits bundled (non modifiable) */
/* EN: Quantity for bundled products (not editable) */
.ayumc-bundled-qty {
    font-size: 13px;
    font-weight: 500;
    color: var(--ayumc-text-light);
    padding: 4px 8px;
}

.ayumc-qty-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background-color: #ed6a5b !important;
    border-radius: 9px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    transition: all 0.2s;
    padding: 0 !important;
}

.ayumc-qty-btn:hover:not(.ayumc-disabled) {
    background-color: #d85a4b;
}

.ayumc-qty-btn:active:not(.ayumc-disabled) {
    transform: scale(0.95);
}

.ayumc-qty-btn.ayumc-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ayumc-qty-value {
    min-width: 24px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    color: var(--ayumc-text);
    padding: 0 4px;
}

.ayumc-item-price {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    color: var(--ayumc-text);
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

/* ==========================================================================
   Reset des styles WooCommerce à l'intérieur du mini-cart
   Empêche les thèmes d'écraser les styles du mini-cart via des sélecteurs
   globaux sur .woocommerce-Price-amount, .amount, del, ins, bdi, etc.
   EN: WooCommerce styles reset inside the mini-cart
   EN: Prevents themes from overriding mini-cart styles via global selectors
   ========================================================================== */
.ayumc-cart-panel .woocommerce-Price-amount,
.ayumc-cart-panel .woocommerce-Price-amount.amount,
.ayumc-cart-panel .woocommerce-Price-amount bdi,
.ayumc-cart-panel .woocommerce-Price-currencySymbol,
.ayumc-cart-panel del .woocommerce-Price-amount,
.ayumc-cart-panel ins .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    font-family: inherit !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset des balises ins/del dans le mini-cart — les thèmes appliquent souvent
   des styles globaux (ex: ins { font-size: 36px }) qu'il faut neutraliser */
/* EN: Reset ins/del tags in mini-cart — themes often apply global styles
   (e.g. ins { font-size: 36px }) that must be neutralized */
.ayumc-cart-panel ins,
.ayumc-cart-panel del {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Prix barré (ancien prix / prix régulier) */
/* EN: Strikethrough price (old price / regular price) */
.ayumc-item-price del,
.ayumc-item-price .ayumc-price-was {
    color: var(--ayumc-text-light) !important;
    font-weight: 400 !important;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    text-decoration: line-through;
    opacity: 0.7;
}

/* Prix actuel (promo ou 0€ pour bundle) */
/* EN: Current price (promo or 0€ for bundle) */
.ayumc-item-price ins,
.ayumc-item-price .ayumc-price-now {
    text-decoration: none !important;
    color: var(--ayumc-primary) !important;
    font-weight: 600 !important;
}

.ayumc-item-price ins .woocommerce-Price-amount,
.ayumc-item-price .ayumc-price-now .woocommerce-Price-amount {
    color: inherit;
}

.ayumc-remove-item {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background-color: #ed6a5b !important;
    border-radius: 9px !important;
    cursor: pointer;
    color: #ffffff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ayumc-remove-item:hover {
    background-color: #d85a4b;
    color: #ffffff;
}

.ayumc-remove-item:active {
    transform: scale(0.95);
}

.ayumc-remove-item svg {
    width: 14px;
    height: 14px;
}

/* ==========================================================================
   Produits suggérés - Carousel
   EN: Suggested products - Carousel
   ========================================================================== */
.ayumc-recommendations {
    padding: 10px 0px;
    background: var(--ayumc-bg-light);
    border-bottom: 1px solid var(--ayumc-border);
    flex-shrink: 0;
    overflow: hidden;
}

.ayumc-rec-title {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    color: var(--ayumc-text-light);
    margin: 0 0 5px;
    text-align: center;
    text-transform: none !important;
    letter-spacing: 0.5px;
}

/* Conteneur du carousel */
/* EN: Carousel container */
.ayumc-rec-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px 4px;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.ayumc-rec-slider:active {
    cursor: grabbing;
}

/* État pendant le drag */
/* EN: State during drag */
.ayumc-rec-slider.ayumc-dragging {
    cursor: grabbing !important;
    scroll-snap-type: none; /* Désactiver le snap pendant le drag / EN: Disable snap during drag */
    scroll-behavior: auto !important;
}

.ayumc-rec-slider.ayumc-dragging .ayumc-rec-item {
    pointer-events: none; /* Empêcher les clics pendant le drag / EN: Prevent clicks during drag */
    transition: none !important;
}

.ayumc-rec-slider.ayumc-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.ayumc-rec-slider::-webkit-scrollbar {
    display: none;
}

/* Élément du carousel - Style carte */
/* EN: Carousel item - Card style */
.ayumc-rec-item {
    flex: 0 0 calc(100% - 60px);
    min-width: 0;
    max-width: 340px;
    display: flex;
    /* Colonne : [image + texte] puis le bouton en pleine largeur dessous. */
    /* EN: Column: [image + text] then the full-width button underneath. */
    flex-direction: column;
    gap: 9px;
    background: var(--ayumc-bg);
    border-radius: var(--ayumc-radius);
    padding: 12px;
    scroll-snap-align: start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform var(--ayumc-transition), box-shadow var(--ayumc-transition);
}

/* Ligne haute de la carte : vignette + nom/prix */
/* EN: Card top row: thumbnail + name/price */
.ayumc-rec-top {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.ayumc-rec-item:last-child {
    margin-right: 20px;
}

.ayumc-rec-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.ayumc-rec-image {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ayumc-bg-light);
}

.ayumc-rec-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ayumc-transition);
}

.ayumc-rec-item:hover .ayumc-rec-image img {
    transform: scale(1.05);
}

.ayumc-rec-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ayumc-rec-name {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 500;
    color: var(--ayumc-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    margin-bottom: 4px;
}

.ayumc-rec-name:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.ayumc-rec-price {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    color: var(--ayumc-text);
    margin-bottom: 8px;
}

.ayumc-rec-price del {
    color: #b2bec3;
    font-weight: 400;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
}

.ayumc-rec-price ins {
    text-decoration: none;
    font-weight: 600;
    color: var(--ayumc-primary);
}

/* Indicateurs du carousel */
/* EN: Carousel indicators */
.ayumc-rec-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0 16px;
}

.ayumc-rec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ayumc-border);
    transition: all var(--ayumc-transition);
    cursor: pointer;
}

.ayumc-rec-dot.active {
    width: 18px;
    border-radius: 3px;
    background: var(--ayumc-primary);
}

.ayumc-add-rec,
.ayumc-add-rec.button,
.ayumc-add-rec.add_to_cart_button,
.ayumc-add-rec.ajax_add_to_cart {
    display: block !important;
    width: 100% !important;
    padding: 13px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    background-color: #ed6a5b !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 9px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    line-height: 1 !important;
}

.ayumc-add-rec:hover,
.ayumc-add-rec.button:hover,
.ayumc-add-rec.add_to_cart_button:hover {
    background-color: #d85a4b !important;
    color: #ffffff !important;
}

.ayumc-add-rec:active {
    transform: scale(0.98);
}

.ayumc-add-rec.loading {
    pointer-events: none;
    opacity: 0.7;
}

.ayumc-add-rec.ayumc-select-options {
    background-color: #ed6a5b !important;
    color: #ffffff !important;
}

.ayumc-add-rec.ayumc-select-options:hover {
    background-color: #d85a4b !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Footer du panier
   EN: Cart footer
   ========================================================================== */
.ayumc-cart-footer {
    padding: 16px 20px;
    background: var(--ayumc-bg);
    border-top: 1px solid var(--ayumc-border);
    flex-shrink: 0;
}

/* Section coupon */
/* EN: Coupon section */
.ayumc-coupon-section {
    margin-bottom: 16px;
}

.ayumc-applied-coupons {
    margin-bottom: 12px;
}

.ayumc-applied-coupon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #e8f8f5;
    border-radius: 20px;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    color: var(--ayumc-success);
    margin-right: 8px;
    margin-bottom: 4px;
}

.ayumc-coupon-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.ayumc-coupon-tag svg {
    color: var(--ayumc-success);
}

.ayumc-remove-coupon {
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: var(--ayumc-success);
    opacity: 0.7;
    transition: opacity var(--ayumc-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ayumc-remove-coupon:hover {
    opacity: 1;
}

.ayumc-coupon-toggle {
    border-top: 1px solid var(--ayumc-border);
    padding-top: 12px;
}

.ayumc-coupon-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border: 1px dashed var(--ayumc-border);
    border-radius: var(--ayumc-radius);
    background: var(--ayumc-bg-light);
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 500;
    color: var(--ayumc-text);
    cursor: pointer;
    transition: all var(--ayumc-transition);
}

.ayumc-coupon-trigger:hover {
    border-color: var(--ayumc-primary);
    color: var(--ayumc-primary);
    background: #fff5f3;
}

.ayumc-coupon-trigger svg {
    width: 18px;
    height: 18px;
    transition: transform var(--ayumc-transition);
}

.ayumc-coupon-toggle.ayumc-open .ayumc-coupon-trigger {
    border-color: var(--ayumc-primary);
    background: #fff5f3;
}

.ayumc-coupon-toggle.ayumc-open .ayumc-coupon-trigger svg {
    transform: rotate(180deg);
}

.ayumc-coupon-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.ayumc-coupon-input {
    flex: 1;
    padding: 12px 14px;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    border: 2px solid var(--ayumc-border);
    border-radius: var(--ayumc-radius);
    outline: none;
    transition: all var(--ayumc-transition);
    background: var(--ayumc-bg);
}

.ayumc-coupon-input:focus {
    border-color: var(--ayumc-primary);
    box-shadow: 0 0 0 3px rgba(231, 111, 81, 0.15);
}

.ayumc-coupon-input::placeholder {
    color: #b2bec3;
}

.ayumc-apply-coupon {
    padding: 12px 18px;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    background: var(--ayumc-text);
    color: #fff;
    border: none;
    border-radius: var(--ayumc-radius);
    cursor: pointer;
    transition: all var(--ayumc-transition);
    white-space: nowrap;
}

.ayumc-apply-coupon:hover {
    background: var(--ayumc-primary);
    transform: translateY(-1px);
}

.ayumc-apply-coupon:active {
    transform: translateY(0);
}

/* Notices */
/* EN: Notices */
.ayumc-notices {
    margin-bottom: 0px !important;
}

.ayumc-notice {
    padding: 10px 12px;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    border-radius: var(--ayumc-radius);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ayumc-notice-error {
    background: #ffeaea;
    color: var(--ayumc-error);
    border: 1px solid #ffcccc;
}

.ayumc-notice-success {
    background: #e8f8f5;
    color: var(--ayumc-success);
    border: 1px solid #b8e6d5;
}

.ayumc-notice-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    opacity: 0.7;
}

.ayumc-notice-close:hover {
    opacity: 1;
}

/* Sous-total */
/* EN: Subtotal */
.ayumc-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ayumc-subtotal-label {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600;
    color: var(--ayumc-text);
}

.ayumc-subtotal-amount {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 700;
    color: var(--ayumc-text);
}

.ayumc-shipping-notice {
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    color: var(--ayumc-text-light);
    margin: 0 0 16px;
}

/* Bouton Checkout */
/* EN: Checkout button */
.ayumc-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #ed6a5b;
    color: #ffffff !important;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.ayumc-checkout-btn:hover {
    background-color: #d85a4b;
    color: #ffffff !important;
}

.ayumc-lock-icon {
    width: 18px;
    height: 18px;
}

.ayumc-arrow-icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   États de chargement
   EN: Loading states
   ========================================================================== */
.ayumc-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Animation de recalcul sur le footer */
/* EN: Recalculation animation on footer */
.ayumc-cart-footer.ayumc-recalculating {
    position: relative;
    pointer-events: none;
}

.ayumc-cart-footer.ayumc-recalculating::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--ayumc-primary) 50%, 
        transparent 100%
    );
    animation: ayumc-loading-bar 1s ease-in-out infinite;
}

.ayumc-cart-footer.ayumc-recalculating .ayumc-subtotal-amount,
.ayumc-cart-footer.ayumc-recalculating .ayumc-checkout-btn {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

@keyframes ayumc-loading-bar {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Pulse subtil sur le montant pendant le recalcul */
/* EN: Subtle pulse on amount during recalculation */
.ayumc-subtotal-amount.ayumc-updating {
    animation: ayumc-pulse 0.8s ease-in-out infinite;
}

@keyframes ayumc-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

.ayumc-cart-item.ayumc-removing {
    animation: ayumc-slide-out 0.3s ease-out forwards;
    pointer-events: none;
    /*
     * Le padding de .ayumc-cart-item est posé en !important par le CSS dynamique.
     * Dans la cascade CSS, un !important AUTEUR l'emporte sur une animation @keyframes,
     * donc le `padding:0` du keyframe est IGNORÉ : l'article ne descend jamais sous
     * ~32px (2×padding), puis ce résidu est écrasé d'un coup quand l'AJAX (lent, ~1s)
     * remplace le contenu → glitch de reflow « en deux étapes ».
     * Les TRANSITIONS, elles, battent les !important auteur : on anime donc le padding
     * par transition (en phase avec le keyframe), ce qui écrase l'article jusqu'à 0.
     * EN: The item padding is set !important by the dynamic CSS; an !important author
     * rule beats @keyframes in the cascade, so the keyframe's `padding:0` is ignored and
     * the item floors at ~32px, then snaps when the slow AJAX replaces the content.
     * Transitions DO beat !important author rules, so we collapse the padding via transition.
     */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    transition: padding 0.3s ease-out !important;
}

@keyframes ayumc-slide-out {
    0% {
        opacity: 1;
        transform: translateX(0);
        max-height: 150px;
    }
    50% {
        opacity: 0.5;
        transform: translateX(50%);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        border: none;
    }
}

/* Skeleton loader */
/* EN: Skeleton loader */
.ayumc-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ayumc-skeleton 1.5s infinite;
    border-radius: 4px;
}

@keyframes ayumc-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ayumc-skeleton-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ayumc-border);
}

.ayumc-skeleton-thumb {
    width: 72px;
    height: 72px;
}

.ayumc-skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ayumc-skeleton-line {
    height: 14px;
}

.ayumc-skeleton-line.medium {
    width: 80%;
}

.ayumc-skeleton-line.short {
    width: 50%;
}

/* ==========================================================================
   Responsive
   EN: Responsive
   ========================================================================== */

@media (max-width: 1536px) {
    .ayumc-cart-panel {
        width: 650px;
        max-width: 652px;
    }
}

@media (max-width: 1280px) {
    .ayumc-cart-panel {
        width: 482px;
        max-width: 482px;
    }
}

@media (max-width: 1024px) {
    .ayumc-cart-panel {
        max-width: 452px;
        width: 452px;
    }
}

@media (max-width: 767px) {
    .ayumc-cart-panel {
        width: 100%!important;
    }
    
    .ayumc-cart-header {
        position: relative;
        padding-right: 12px !important;
        padding-left: 20px !important;
    }
    
    .ayumc-cart-title {
        flex: 1;
        margin-right: 0 !important;
    }
    
    .ayumc-close-btn {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin-right: 0 !important;
        /* margin-top: 5px !important;
        margin-bottom: 5px !important; */
        z-index: 10;
    }
    
    .ayumc-cart-toggle {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
    }
    
    .ayumc-cart-item {
        grid-template-columns: 64px 1fr;
        gap: 10px;
        position: relative;
        padding-right: 90px; /* Espace pour prix + corbeille / EN: Space for price + trash */
    }
    
    .ayumc-item-image {
        width: 64px;
        height: 64px;
    }
    
    .ayumc-item-price {
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
        margin-top: 0;
    }
    
    .ayumc-remove-item {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
    }
    
    .ayumc-qty-btn {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
    
    .ayumc-qty-value {
        min-width: 22px;
        /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    }
    
    .ayumc-rec-item {
        flex: 0 0 82%;
        min-width: 260px;
    }
    
    .ayumc-coupon-form {
        flex-direction: column;
    }
    
    .ayumc-apply-coupon {
        width: 100%;
    }
    
    /* Masquer les recommandations au scroll */
    /* EN: Hide recommendations on scroll */
    .ayumc-recommendations {
        transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
        max-height: 500px;
        overflow: hidden;
    }
    
    .ayumc-recommendations.ayumc-rec-hidden {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        pointer-events: none;
    }
}

/* ==========================================================================
   Compatibilité Elementor sticky header - correction du doublon d'icône
   Elementor crée un spacer clone (visibility:hidden) pour les sections sticky.
   Notre `visibility: visible !important` sur .ayumc-cart-trigger traverse
   l'héritage CSS et rend visible l'icône dans le spacer invisible → doublon.
   EN: Elementor sticky header compatibility - fix icon duplication
   Elementor creates a hidden spacer clone for sticky sections. Our
   `visibility: visible !important` on .ayumc-cart-trigger pierces the CSS
   inheritance, making the icon visible inside the hidden spacer → duplicate.
   ========================================================================== */
.elementor-sticky__spacer .ayumc-cart-trigger,
.elementor-sticky__spacer .ayumc-icon-count {
    display: none !important;
}

/* ==========================================================================
   Correction de l'icône sur les pages panier et checkout WooCommerce
   EN: Icon fix on WooCommerce cart and checkout pages
   ========================================================================== */
.woocommerce-cart .ayumc-cart-trigger,
.woocommerce-checkout .ayumc-cart-trigger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    transform: none !important;
    float: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 99999 !important;
}

/* Forcer le clic sur tous les éléments enfants */
/* EN: Force click on all child elements */
.woocommerce-cart .ayumc-cart-trigger *,
.woocommerce-checkout .ayumc-cart-trigger * {
    pointer-events: auto !important;
}

.woocommerce-cart .ayumc-cart-trigger .ayumc-icon-svg,
.woocommerce-checkout .ayumc-cart-trigger .ayumc-icon-svg,
.woocommerce-cart .ayumc-cart-trigger img.ayumc-icon-svg,
.woocommerce-checkout .ayumc-cart-trigger img.ayumc-icon-svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-cart .ayumc-cart-trigger .ayumc-icon-count,
.woocommerce-checkout .ayumc-cart-trigger .ayumc-icon-count {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    min-width: 18px !important;
    width: auto !important;
    height: 18px !important;
    max-width: none !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 4px !important;
    background: var(--ayumc-primary, #ed6a5b) !important;
    color: #ffffff !important;
    /* font-size géré par CSS dynamique / EN: font-size managed by dynamic CSS */
    font-weight: 600 !important;
    line-height: 18px !important;
    border-radius: 50% !important;
    z-index: 101 !important;
}

.woocommerce-cart .ayumc-cart-trigger .ayumc-icon-count.ayumc-icon-zero,
.woocommerce-checkout .ayumc-cart-trigger .ayumc-icon-count.ayumc-icon-zero {
    display: none !important;
}

/* === Redesign (piloté par variables, cf. generate_custom_css) === */
.ayumc-cart-panel { width: var(--ayumc-panel-width, 700px); max-width: 100%; background: var(--ayumc-panel-bg, #fff); }
.ayumc-free-shipping, .ayumc-recommendations { background: var(--ayumc-surface-alt, #fff5f3); }
.ayumc-cart-title, .ayumc-item-name, .ayumc-item-name a, .ayumc-rec-title, .ayumc-item-price {
  font-family: var(--ayumc-heading-font, var(--ayumc-font-family, inherit)) !important;
  color: var(--ayumc-heading-color, var(--ayumc-text-color, #29323c)) !important;
}
.ayumc-checkout-btn, .ayumc-btn-outline, .ayumc-add-rec { letter-spacing: var(--ayumc-btn-letter-spacing, 0) !important; }
.ayumc-fs-progress, .ayumc-fs-progress.ayumc-complete { background: var(--ayumc-accent, #ed6a5b) !important; }
.ayumc-item-count { color: var(--ayumc-text-color, #29323c); opacity: .7; font-weight: 400; }

/* Tag CONSEILLÉ */
.ayumc-rec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ayumc-rec-tag { color: var(--ayumc-accent, #33998a); font-size: 11px; letter-spacing: 1.76px; text-transform: uppercase; font-weight: 600; }

/* Ligne livraison footer */
.ayumc-footer-ship { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ayumc-text-color, #29323c); margin-top: 4px; }
.ayumc-footer-ship.ayumc-achieved { color: var(--ayumc-accent, #33998a); }
.ayumc-footer-ship .ayumc-ui-icon { flex: 0 0 auto; }

/* Badges de réassurance : toujours côte à côte sur UNE rangée (alignement standalone
   08/2026). Sur écran étroit, le texte se replie À L'INTÉRIEUR de chaque badge plutôt
   que d'empiler les badges. EN: badges always share one row; on narrow screens the
   text wraps INSIDE each badge instead of stacking the badges. Les deux badges sont CENTRÉS
   ensemble au milieu (largeur naturelle + justify-content:center, comme le standalone), pas
   étirés sur toute la largeur ; `flex:0 1 auto` + `min-width:0` = ils rétrécissent et le texte
   se replie à l'intérieur sur écran étroit tout en restant sur une rangée.
   EN: the two badges are CENTERED together (natural width + justify-content:center, like the
   standalone), not stretched full-width; flex:0 1 auto + min-width:0 lets them shrink and wrap
   text inside on narrow screens while staying on one row. */
.ayumc-trust-badges { display: flex; gap: 18px; justify-content: center; flex-wrap: nowrap; padding: 12px 0 4px; }
.ayumc-badge { display: flex; align-items: center; justify-content: center; text-align: center; flex: 0 1 auto; min-width: 0; gap: 6px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--ayumc-text-color, #29323c); opacity: .75; }
@media (max-width: 380px) {
    .ayumc-trust-badges { gap: 10px; }
    .ayumc-badge { font-size: 10px; letter-spacing: .2px; }
}
.ayumc-badge .ayumc-ui-icon { color: var(--ayumc-accent, #33998a); }

/* ==========================================================================
   Accessibilité tactile — zones de tap
   EN: Touch accessibility — tap targets
   ==========================================================================
   Les boutons +/- (32px) et la corbeille (28px) sont sous les 44px recommandés par
   Apple (HIG) et les 48dp de Material. Plutôt que d'agrandir les boutons (ce qui
   déformerait le design), on étend la ZONE CLIQUABLE avec un pseudo-élément invisible :
   la taille visuelle ne bouge pas, la cible devient conforme.
   `pointer: coarse` cible le doigt et non une largeur d'écran : ça couvre les tablettes,
   qui reçoivent le CSS desktop tout en étant tactiles. La condition `max-width: 767px`
   complète pour les navigateurs/contextes où `pointer` n'est pas fiable.
   EN: Expand the HIT AREA with an invisible pseudo-element instead of enlarging the
   buttons, so the visual design is untouched. `pointer: coarse` targets the finger rather
   than a viewport width, which also covers tablets (desktop CSS, but touch input). */
@media (pointer: coarse), (max-width: 767px) {
    .ayumc-qty-btn,
    .ayumc-remove-item,
    .ayumc-close-btn {
        position: relative;
    }

    .ayumc-qty-btn::after,
    .ayumc-remove-item::after,
    .ayumc-close-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        /* Invisible : n'agrandit que la surface de tap. */
        /* EN: Invisible: only enlarges the tap surface. */
    }
}