/* ============================================================================
 * modals.css  —  MercaDGO
 * Estilos de TODOS los modales / overlays / toasts del marketplace.
 * (Antes se inyectaban por JS; ahora viven aquí y usan tus tokens de diseño.)
 * Variables heredadas de merca-layout.css: --primary, --secondary, --radius,
 * --font-body, --white, --gray-light, --gray-mid, --text, --shadow.
 * ========================================================================== */

/* ---------- Capa de pulido común a todos los overlays ---------------------- */
.wl-modal-overlay,
.wishlist-modal-overlay,
.checkout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 47, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  opacity: 0;
  padding: 20px;
  transition: opacity 0.22s ease;
  font-family: var(--font-body, 'Arimo', sans-serif);
}
.wl-modal-overlay.show,
.wishlist-modal-overlay.show,
.checkout-modal-overlay { opacity: 1; }

/* ---------- Modal de LOGIN del carrito (.wishlist-modal-*) ----------------- */
/* Estas clases venían del diseño original; aquí las rediseñamos al estilo Merca */
.wishlist-modal {
  background: var(--white, #fff);
  width: 100%;
  max-width: 440px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
  animation: mercaModalIn 0.24s ease forwards;
}
@keyframes mercaModalIn { to { transform: translateY(0) scale(1); } }

.wishlist-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: var(--secondary, #0A192F);
  color: #fff;
}
.wishlist-modal-header h3 {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.wishlist-modal-header h3 i { color: var(--primary, #FF7800); }
.wishlist-modal-close {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.wishlist-modal-close:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(90deg); }
.wishlist-modal-body { padding: 26px 22px; color: var(--text, #1a1a1a); }
.wishlist-modal-body p { line-height: 1.5; color: var(--gray-dark, #444); }
.wishlist-modal-footer {
  display: flex;
  padding: 0 22px 22px;
  gap: 12px;
}

/* Botones del modal de login */
.wish_insignia__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  font-family: var(--font-body, 'Arimo', sans-serif);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.wish_insignia__btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.wish_insignia__btn--primary { background: var(--primary, #FF7800); color: #fff; }
.wish_insignia__btn--secondary {
  background: transparent;
  color: var(--secondary, #0A192F);
  border: 1.5px solid var(--gray-light, #D9D8D8);
}
.wish_insignia__btn--secondary:hover { background: #f4f7fe; }

/* ---------- Notificación / toast del carrito (.cart-notification) ---------- */
.cart-notification {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 100001;
  background: var(--secondary, #0A192F);
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  font-family: var(--font-body, 'Arimo', sans-serif);
  max-width: 340px;
}
.cart-notification.show { transform: translateY(0); opacity: 1; }
.cart-notification.warning { background: #b7791f; }
.cart-notification.error { background: #c53030; }
.cart-notification .notification-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-notification .notification-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--primary, #FF7800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.cart-notification .notification-message { font-size: 14px; font-weight: 600; line-height: 1.35; }

/* Toast móvil reutilizado por carrito y wishlist (.mc-toast) — refuerzo */
.mc-toast {
  font-family: var(--font-body, 'Arimo', sans-serif);
}



/* ============================================================================
 * CHECKOUT — modal unificado (dirección + pago) y modal de éxito
 * ========================================================================== */
/* ── Overlay ── */
        .checkout-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .checkout-modal-overlay.show { opacity: 1; }

        /* ── Modal ── */
        .checkout-modal {
            background: #fff;
            border-radius: 16px;
            max-width: 680px;
            width: 95%;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }

        /* ── Header ── */
        .checkout-modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .checkout-modal-header h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: #111827;
        }
        .checkout-modal-close {
            width: 32px; height: 32px;
            border-radius: 8px;
            border: none;
            background: #f3f4f6;
            color: #6b7280;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
            transition: all 0.2s;
        }
        .checkout-modal-close:hover { background: #e5e7eb; color: #111827; }

        /* ── Body ── */
        .checkout-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }
        .checkout-modal-body::-webkit-scrollbar { width: 6px; }
        .checkout-modal-body::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 10px; }
        .checkout-modal-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

        /* ── Secciones ── */
        .checkout-section {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid #e5e7eb;
        }
        .checkout-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .checkout-section h3 {
            font-size: 16px;
            font-weight: 700;
            color: #111827;
            margin: 0 0 16px 0;
        }

        /* ── Items del pedido ── */
        .checkout-items-list { display: flex; flex-direction: column; gap: 10px; }
        .quick-checkout-product {
            display: flex;
            gap: 14px;
            padding: 14px;
            background: #f9fafb;
            border-radius: 10px;
            align-items: center;
        }
        .quick-checkout-product img {
            width: 72px; height: 72px;
            object-fit: cover;
            border-radius: 8px;
        }
        .quick-checkout-product-details { flex: 1; }
        .quick-checkout-product-name { font-weight: 600; color: #111827; margin-bottom: 4px; font-size: 14px; }
        .quick-checkout-product-qty { font-size: 12px; color: #9ca3af; margin-top: 2px; }
        .quick-checkout-product-price { font-weight: 700; font-size: 16px; color: #111827; white-space: nowrap; }

        /* ── Selector de direcciones ── */
        .address-selector { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
        .address-option { display: block; cursor: pointer; }
        .address-option input[type="radio"] { display: none; }
        .address-card {
            padding: 14px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .address-option:hover .address-card { border-color: #d1d5db; }
        .address-option.selected .address-card,
        .address-option input[type="radio"]:checked ~ .address-card {
            border-color: #111827;
            background: #fafafa;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .default-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            background: #111827;
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            border-radius: 6px;
            width: fit-content;
        }
        .address-details { font-size: 13px; color: #374151; line-height: 1.6; }
        .address-details strong { font-size: 14px; font-weight: 600; color: #111827; }

        /* ── Botón agregar dirección ── */
        .btn-add-address {
            width: 100%;
            padding: 12px;
            background: #fff;
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            gap: 8px;
            transition: all 0.2s;
            margin-top: 8px;
        }
        .btn-add-address:hover { background: #f9fafb; border-color: #9ca3af; color: #374151; }

        /* ── Formulario nueva dirección ── */
        .new-address-form {
            margin-top: 16px;
            padding: 18px;
            background: #f9fafb;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
        }
        .new-address-form h4 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: #111827; }

        /* ── Form groups ── */
        .form-group { margin-bottom: 14px; }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 12px;
            font-weight: 600;
            color: #374151;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px 14px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            color: #111827;
            font-family: inherit;
            transition: border-color 0.2s;
            box-sizing: border-box;
            background: #fff;
        }
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #111827;
            box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
        }
        .form-group input[readonly] { background: #f3f4f6; cursor: not-allowed; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

        /* ── Checkbox ── */
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: #fff;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 14px;
            border: 1px solid #e5e7eb;
        }
        .checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #111827; cursor: pointer; }
        .checkbox-label span { font-size: 13px; color: #374151; font-weight: 500; }

        /* ── Métodos de pago ── */
        .payment-methods { display: flex; gap: 10px; flex-wrap: wrap; }
        .payment-method {
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        .payment-method input[type="radio"] { width: 16px; height: 16px; accent-color: #111827; }

        /* ── Resumen ── */
        .checkout-summary .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f3f4f6;
            font-size: 14px;
            color: #374151;
        }
        .checkout-summary .summary-total {
            display: flex;
            justify-content: space-between;
            padding: 14px 0 0;
            font-size: 18px;
            font-weight: 700;
            color: #111827;
        }

        /* ── Footer ── */
        .checkout-modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #e5e7eb;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            background: #fff;
        }
        .btn-primary, .btn-secondary {
            padding: 11px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }
        .btn-primary { background: #111827; color: #fff; }
        .btn-primary:hover { background: #1f2937; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .btn-secondary { background: #f3f4f6; color: #374151; }
        .btn-secondary:hover { background: #e5e7eb; }

        /* ── Modal de éxito ── */
        .success-modal {
            text-align: center;
            padding: 48px 40px;
        }
        .success-icon { font-size: 64px; color: #10b981; margin-bottom: 20px; }
        .success-modal h2 { font-size: 28px; font-weight: 700; color: #111827; margin-bottom: 10px; }
        .success-modal p { font-size: 15px; color: #6b7280; margin-bottom: 28px; }
        .order-details { background: #f9fafb; padding: 18px; border-radius: 12px; margin-bottom: 28px; }
        .order-details p { margin: 6px 0; color: #374151; font-size: 14px; }
        .success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
        .success-actions a { text-decoration: none; }

        /* ── Loading overlay ── */
        #loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
        }
        .loading-spinner { text-align: center; color: #fff; }
        .loading-spinner .spinner {
            width: 48px; height: 48px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: mpSpin 0.8s linear infinite;
            margin: 0 auto 14px;
        }
        .loading-spinner p { font-size: 15px; font-weight: 500; }
        @keyframes mpSpin { to { transform: rotate(360deg); } }

        /* ── Responsive ── */
        @media (max-width: 640px) {
            .checkout-modal { width: 100%; max-height: 100vh; border-radius: 0; }
            .form-row { grid-template-columns: 1fr; }
            .checkout-modal-footer { flex-direction: column; }
            .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
            .success-actions { flex-direction: column; }
            .success-actions a, .success-actions button { width: 100%; justify-content: center; }
        }

/* ============================================================================
 * WISHLIST — modales (crear/renombrar/eliminar), dropdown y estado vacío
 * ========================================================================== */
/* ── Botón corazón ── */
    [data-wl-product-id] {
        cursor: pointer; transition: color 0.2s, transform 0.2s;
    }
    [data-wl-product-id]:hover { transform: scale(1.05); }
    [data-wl-product-id].wl-active i.fa-heart { color: #e91e63 !important; font-weight: 900; }

    /* ── Dropdown — fixed al body, posicionado con JS ── */
    .wl-dropdown-menu {
        position: fixed;
        z-index: 99999;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.18);
        min-width: 240px;
        max-width: 300px;
        overflow: hidden;
        display: none;
        border: 1px solid #f0f0f0;
        pointer-events: auto;
    }
    .wl-dropdown-menu.show {
        display: block;
        animation: wlFadeIn 0.16s ease;
    }
    @keyframes wlFadeIn {
        from { opacity:0; transform:translateY(-8px); }
        to   { opacity:1; transform:translateY(0); }
    }

    .wl-dropdown-title {
        padding: 12px 16px 8px;
        font-size: 11px; font-weight: 700;
        color: #aaa; text-transform: uppercase; letter-spacing: 0.8px;
        border-bottom: 1px solid #f5f5f5;
        background: #fafafa;
    }
    .wl-dropdown-lists { max-height: 240px; overflow-y: auto; }
    .wl-dropdown-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 14px; cursor: pointer;
        transition: background 0.15s; border-bottom: 1px solid #fafafa;
    }
    .wl-dropdown-item:last-child { border-bottom: none; }
    .wl-dropdown-item:hover:not(.wl-in-list) { background: #fdf0f5; }
    .wl-dropdown-item.wl-in-list { background: #fff8fb; cursor: default; }
    .wl-dropdown-item i.fa-heart { font-size: 14px; color: #e91e63; flex-shrink: 0; }
    .wl-item-info { flex: 1; min-width: 0; }
    .wl-item-name { display: block; font-size: 13px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wl-item-count { display: block; font-size: 11px; color: #bbb; margin-top: 1px; }
    .wl-item-check { color: #2e7d32; font-size: 13px; flex-shrink: 0; }
    .wl-item-add {
        font-size: 11px; font-weight: 700; color: #e91e63;
        background: #fce4ec; padding: 3px 8px; border-radius: 10px;
        flex-shrink: 0; white-space: nowrap;
        transition: background 0.15s;
    }
    .wl-dropdown-item:hover .wl-item-add { background: #f48fb1; color: #fff; }
    .wl-dropdown-loading {
        padding: 20px 16px; text-align: center; color: #aaa;
        font-size: 13px; display: flex; align-items: center;
        justify-content: center; gap: 8px;
    }
    .wl-dropdown-empty {
        padding: 20px 16px; text-align: center; color: #aaa; font-size: 13px;
    }
    .wl-dropdown-empty i {
        font-size: 28px; display: block; margin-bottom: 8px; color: #f0c0d0;
    }
    .wl-dropdown-empty p { margin: 0 0 4px; font-weight: 600; color: #555; }
    .wl-dropdown-empty small { color: #aaa; }
    .wl-dropdown-create {
        display: flex; align-items: center; gap: 8px; width: 100%;
        padding: 12px 16px; border: none;
        font-size: 13px; font-weight: 600;
        cursor: pointer; transition: background 0.15s;
        border-top: 1px solid #f0f0f0;
    }
    .wl-dropdown-create--primary {
        background: #e91e63; color: #fff;
    }
    .wl-dropdown-create--primary:hover { background: #c2185b; }
    .wl-dropdown-create--secondary {
        background: #fafafa; color: #777;
    }
    .wl-dropdown-create--secondary:hover { background: #f0f0f0; }

    /* ── Modal ── */
    .wl-modal-overlay {
        position: fixed; inset: 0; z-index: 99998;
        background: rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.2s;
    }
    .wl-modal-overlay.show { opacity: 1; }
    .wl-modal {
        background: #fff; border-radius: 16px; padding: 28px;
        width: 100%; max-width: 400px; margin: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }
    .wl-modal-title { font-size: 17px; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; }
    .wl-modal-input {
        width: 100%; padding: 12px 14px; border: 1.5px solid #e0e0e0;
        border-radius: 8px; font-size: 14px; color: #333; margin-bottom: 16px;
        outline: none; transition: border-color 0.2s; box-sizing: border-box;
    }
    .wl-modal-input:focus { border-color: #e91e63; }
    .wl-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
    .wl-btn {
        padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
        cursor: pointer; border: none; transition: opacity 0.2s; text-decoration: none;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .wl-btn:hover { opacity: 0.85; }
    .wl-btn-primary { background: #e91e63; color: #fff; }
    .wl-btn-cancel  { background: #f5f5f5; color: #666; }

    /* ── Página wishlist ── */
    .wl-page { background: #f4f6f9; min-height: 70vh; padding: 40px 0 60px; }
    .wl-page-title { font-size: 22px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
    .wl-page-subtitle { font-size: 13px; color: #888; margin-bottom: 28px; }

    .wl-page-list {
        background: #fff; border-radius: 14px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.07); margin-bottom: 24px; overflow: hidden;
    }
    .wl-page-list-header {
        display: flex; align-items: center; gap: 12px; padding: 14px 20px;
        background: linear-gradient(135deg,
            var(--main-secondary_color,#e91e63) 0%,
            var(--main-primary_color,#c2185b) 100%);
    }
    .wl-page-list-icon { color: #fff; font-size: 18px; }
    .wl-page-list-name { font-size: 16px; font-weight: 700; color: #fff; flex: 1; }
    .wl-page-list-count {
        font-size: 12px; color: rgba(255,255,255,0.75);
        background: rgba(255,255,255,0.2); padding: 3px 10px; border-radius: 20px;
    }
    .wl-page-list-actions { display: flex; gap: 6px; }
    .wl-page-list-action-btn {
        background: rgba(255,255,255,0.2); border: none; border-radius: 6px;
        color: #fff; cursor: pointer; padding: 6px 10px; font-size: 12px;
        transition: background 0.15s; display: flex; align-items: center; gap: 5px;
    }
    .wl-page-list-action-btn:hover { background: rgba(255,255,255,0.35); }
    .wl-page-list-action-btn.danger:hover { background: rgba(229,57,53,0.6); }

    /* Producto en wishlist */
    .wl-product {
        display: grid; grid-template-columns: 80px 1fr auto;
        gap: 16px; align-items: center;
        padding: 16px 20px; border-bottom: 1px solid #f0f0f0;
        transition: background 0.15s;
    }
    .wl-product:last-of-type { border-bottom: none; }
    .wl-product:hover { background: #fafafa; }

    .wl-product-img {
        width: 80px; height: 80px; object-fit: cover;
        border-radius: 10px; border: 1px solid #eee; background: #f7f7f7;
    }
    .wl-product-img-placeholder {
        width: 80px; height: 80px; border-radius: 10px; background: #f0f0f0;
        display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 24px;
    }
    .wl-product-info { min-width: 0; }
    .wl-product-name {
        font-size: 14px; font-weight: 600; color: #1a1a2e;
        margin-bottom: 4px; line-height: 1.3;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .wl-product-name a { color: inherit; text-decoration: none; }
    .wl-product-name a:hover { color: #e91e63; }
    .wl-product-store { font-size: 11px; color: #aaa; margin-bottom: 4px; }
    .wl-product-price { font-size: 16px; font-weight: 700; color: #e91e63; margin-bottom: 10px; }
    .wl-product-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .wl-btn-cart {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
        background: var(--main-primary_color,#1a1a2e); color: #fff;
        border: none; cursor: pointer; transition: opacity 0.2s;
    }
    .wl-btn-cart:hover { opacity: 0.85; }
    .wl-product-remove {
        background: none; border: none; color: #ddd; font-size: 18px;
        cursor: pointer; padding: 6px; border-radius: 6px; transition: color 0.15s, background 0.15s;
        flex-shrink: 0; align-self: center;
    }
    .wl-product-remove:hover { color: #e53935; background: #ffeaea; }

    /* Vacío */
    .wl-empty-state { text-align: center; padding: 60px 20px; }
    .wl-empty-icon { font-size: 64px; color: #f0e0e8; margin-bottom: 20px; }
    .wl-empty-title { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 10px; }
    .wl-empty-text { font-size: 14px; color: #999; margin-bottom: 28px; }
    .wl-empty-btn-primary {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--main-primary_color,#1a1a2e); color: #fff;
        padding: 12px 24px; border-radius: 30px; text-decoration: none;
        font-size: 14px; font-weight: 600; transition: opacity 0.2s;
    }
    .wl-empty-btn-primary:hover { opacity: 0.85; color: #fff; }
    .wl-empty-btn-secondary {
        display: inline-flex; align-items: center; gap: 8px;
        background: transparent; color: #555; border: 1.5px solid #ddd;
        padding: 12px 24px; border-radius: 30px;
        font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.2s;
    }
    .wl-empty-btn-secondary:hover { border-color: #e91e63; color: #e91e63; }

    @media (max-width: 575px) {
        .wl-product { grid-template-columns: 60px 1fr; gap: 10px; }
        .wl-product-remove { grid-column: 1 / -1; justify-self: end; }
        .wl-product-img { width: 60px; height: 60px; }
        .wl-page-list-header { flex-wrap: wrap; }
        .wl-page-list-actions { width: 100%; justify-content: flex-end; }
    }

/* ============================================================================
 * CARRITO — items, mini-cart y toast (.mc-*)
 * ========================================================================== */
/* ── CABECERA DE TIENDA ── */
        .mc-store-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: linear-gradient(135deg,var(--main-secondary_color,#f0f0f0),var(--main-primary_color,#e0e0e0));
            border-radius: 6px;
            margin: 10px 0 6px;
        }
        .mc-store-header:first-child { margin-top: 0; }
        .mc-store-logo {
            width: 28px; height: 28px;
            object-fit: contain;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.7);
            background: #fff;
        }
        .mc-store-name {
            font-weight: 700;
            font-size: 13px;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
            flex: 1;
        }
        .mc-store-icon {
            color: #fff;
            font-size: 15px;
        }

        /* ── PRODUCTO EN EL MINI-CART ── */
        .mc-product {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 10px;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        .mc-product:last-of-type { border-bottom: none; }
        .mc-product-img {
            width: 52px; height: 52px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #eee;
            flex-shrink: 0;
            background: #f7f7f7;
        }
        .mc-product-info { flex: 1; min-width: 0; }
        .mc-product-name {
            font-size: 12px;
            font-weight: 600;
            color: #333;
            line-height: 1.3;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .mc-product-variants {
            font-size: 10px;
            color: #999;
            margin-bottom: 4px;
        }
        .mc-product-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
        }
        .mc-product-price {
            font-size: 12px;
            font-weight: 700;
            color: var(--main-primary_color, #333);
        }
        .mc-qty-controls {
            display: flex;
            align-items: center;
            gap: 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }
        .mc-qty-btn {
            background: #f5f5f5;
            border: none;
            width: 22px; height: 22px;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            color: #555;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s;
        }
        .mc-qty-btn:hover { background: var(--main-primary_color,#ddd); color: #fff; }
        .mc-qty-input {
            width: 28px; height: 22px;
            border: none;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #333;
            -moz-appearance: textfield;
        }
        .mc-qty-input::-webkit-outer-spin-button,
        .mc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
        .mc-remove-btn {
            position: absolute;
            top: 6px; right: 8px;
            background: none;
            border: none;
            color: #ccc;
            font-size: 16px;
            cursor: pointer;
            line-height: 1;
            padding: 0 2px;
            transition: color 0.15s;
        }
        .mc-remove-btn:hover { color: #e53935; }

        /* ── SUBTOTAL POR TIENDA ── */
        .mc-store-subtotal {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 10px 10px;
            font-size: 12px;
            color: #888;
        }
        .mc-store-subtotal strong { color: #333; font-size: 13px; }

        /* ── DIVIDER ENTRE TIENDAS ── */
        .mc-store-group + .mc-store-group {
            border-top: 2px solid #f0f0f0;
            margin-top: 4px;
            padding-top: 4px;
        }

        /* ── TOTAL GLOBAL EN EL FOOTER ── */
        .mc-grand-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px 4px;
            border-top: 2px solid #f0f0f0;
            font-size: 13px;
            color: #555;
        }
        .mc-grand-total strong {
            font-size: 15px;
            font-weight: 700;
            color: var(--main-primary_color, #333);
        }

        /* ── CARRITO VACÍO ── */
        .mc-empty {
            text-align: center;
            padding: 30px 20px;
            color: #bbb;
        }
        .mc-empty i { font-size: 38px; margin-bottom: 10px; display: block; }
        .mc-empty p { font-size: 13px; margin: 0; }

        /* ══════════════════════════════════════
           MOBILE CART — con controles de cantidad
        ══════════════════════════════════════ */
        .mobile-mc-store-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            background: linear-gradient(135deg,var(--main-secondary_color,#f0f0f0),var(--main-primary_color,#e0e0e0));
            border-radius: 6px;
            margin: 8px 0 4px;
        }
        .mobile-mc-store-header:first-child { margin-top: 0; }
        .mobile-mc-logo {
            width: 24px; height: 24px;
            object-fit: contain; border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.6);
            background: #fff;
        }
        .mobile-mc-name {
            font-weight: 700; font-size: 12px; color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .mobile-mc-item {
            display: grid;
            grid-template-columns: 48px 1fr auto;
            gap: 8px;
            align-items: center;
            padding: 8px 8px;
            border-bottom: 1px solid #f0f0f0;
        }
        .mobile-mc-item:last-of-type { border-bottom: none; }
        .mobile-mc-item-img {
            width: 48px; height: 48px;
            object-fit: cover; border-radius: 6px;
            border: 1px solid #eee; background: #f7f7f7;
        }
        .mobile-mc-item-info { min-width: 0; }
        .mobile-mc-item-name {
            font-size: 11px; font-weight: 600;
            color: #333; line-height: 1.3;
            margin-bottom: 2px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .mobile-mc-item-variants {
            font-size: 10px; color: #aaa; margin-bottom: 3px;
        }
        .mobile-mc-item-price {
            font-size: 11px; color: var(--main-primary_color,#333);
            font-weight: 700; margin-bottom: 4px;
        }
        /* controles cantidad mobile */
        .mobile-mc-qty {
            display: flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            width: fit-content;
        }
        .mobile-mc-qty-btn {
            background: #f5f5f5;
            border: none;
            width: 24px; height: 24px;
            font-size: 15px; line-height: 1;
            cursor: pointer; color: #555;
            display: flex; align-items: center; justify-content: center;
            transition: background 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .mobile-mc-qty-btn:hover,
        .mobile-mc-qty-btn:active { background: var(--main-primary_color,#ccc); color: #fff; }
        .mobile-mc-qty-input {
            width: 30px; height: 24px;
            border: none;
            border-left: 1px solid #ddd; border-right: 1px solid #ddd;
            text-align: center; font-size: 12px; font-weight: 600; color: #333;
            -moz-appearance: textfield;
        }
        .mobile-mc-qty-input::-webkit-outer-spin-button,
        .mobile-mc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
        /* botón eliminar mobile */
        .mobile-mc-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .mobile-mc-remove {
            background: none; border: none;
            color: #ccc; font-size: 15px; cursor: pointer;
            padding: 4px; line-height: 1;
            transition: color 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .mobile-mc-remove:hover,
        .mobile-mc-remove:active { color: #e53935; }
        .mobile-mc-subtotal {
            font-size: 11px; color: #888;
            text-align: right; padding: 5px 8px 8px;
        }
        .mobile-mc-subtotal strong { color: #333; }
        .mobile-mc-grand {
            display: flex; justify-content: space-between;
            padding: 10px 8px 4px;
            border-top: 2px solid #f0f0f0;
            font-size: 13px; color: #555; font-weight: 600;
        }
        .mobile-mc-grand strong {
            color: var(--main-primary_color,#333); font-weight: 700; font-size: 14px;
        }

        /* ══════════════════════════════════════
           TOAST DE FEEDBACK (mobile + desktop)
        ══════════════════════════════════════ */
        .mc-toast {
            position: fixed;
            bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
            background: #333; color: #fff;
            padding: 10px 18px; border-radius: 24px;
            font-size: 13px; font-weight: 500;
            white-space: nowrap;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            opacity: 0;
            transition: opacity 0.25s, transform 0.25s;
            z-index: 99999;
            pointer-events: none;
            display: flex; align-items: center; gap: 8px;
        }
        .mc-toast.mc-toast--success { background: #2e7d32; }
        .mc-toast.mc-toast--error   { background: #c62828; }
        .mc-toast.mc-toast--warning { background: #e65100; }
        .mc-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }