/* ============================================
   DESDE USA — CSS Principal
   Rediseño completo - Estilo limpio Gap-inspired
   ============================================ */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

/* ══════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #1a1a2e;
}
h1, h2, h3, h4, h5, h6,
.font-weight-bold,
.product-item__title a {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
}

/* ══════════════════════════════════════════════
   TOPBAR (primera cinta - azul oscuro)
   ══════════════════════════════════════════════ */
.u-header-topbar {
    background-color: #002147 !important;
    font-family: 'Inter', sans-serif !important;
}
.u-header-topbar__nav-link,
.u-header-topbar a {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
.u-header-topbar__nav-link:hover {
    color: #f5a623 !important;
}
.du-topbar-text {
    color: #e0dadb !important;
    font-size: 13px !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

/* Dropdown topbar */
.dropdown-menu.dropdown-unfold {
    background-color: #002147 !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.dropdown-menu.dropdown-unfold .dropdown-item {
    color: #e0dadb !important;
}
.dropdown-menu.dropdown-unfold .dropdown-item:hover {
    background-color: #bb133e !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════
   CINTA PRINCIPAL (segunda - fondo blanco)
   ══════════════════════════════════════════════ */
.du-main-bar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eee;
}

/* Logo */
.du-logo {
    height: 50px;
    width: auto;
}

/* Hamburger (mobile) - oscuro sobre blanco */
.u-hamburger__inner,
.u-hamburger__inner::before,
.u-hamburger__inner::after {
    background-color: #002147 !important;
}

/* ── BUSCADOR INTEGRADO ── */
.du-search-bar {
    display: flex;
    align-items: center;
    border: 2px solid #002147;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}
.du-search-bar:focus-within {
    border-color: #bb133e;
    box-shadow: 0 0 0 3px rgba(187, 19, 62, 0.1);
}
.du-search-select {
    border: none;
    background: #f5f5f5;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #002147;
    cursor: pointer;
    outline: none;
    border-right: 2px solid #002147;
    font-family: 'Inter', sans-serif;
    min-width: 140px;
    -webkit-appearance: auto;
}
.du-search-select:focus {
    background: #eee;
}
.du-search-input {
    flex: 1;
    border: none;
    padding: 10px 16px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: #333;
    outline: none;
    background: transparent;
}
.du-search-input::placeholder {
    color: #999;
    font-weight: 400;
}
.du-search-btn {
    border: none;
    background: #bb133e;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s ease;
}
.du-search-btn:hover {
    background: #8e0e2d;
}

/* ── ICONOS HEADER ── */
.du-header-icon {
    color: #002147 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.du-header-icon:hover {
    color: #bb133e !important;
}
.du-header-cart {
    color: #002147 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}
.du-header-cart:hover {
    color: #bb133e !important;
}
.du-cart-badge {
    background: #bb133e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -6px;
    font-family: 'Inter', sans-serif;
}
.du-cart-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #002147;
}

/* ══════════════════════════════════════════════
   CINTA NAV (tercera - azul oscuro)
   ══════════════════════════════════════════════ */
.du-nav-bar {
    background-color: #002147;
    padding: 0;
}
.du-btn-ofertas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #bb133e;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 28px;
    text-decoration: none !important;
    transition: background 0.2s ease;
    letter-spacing: 0.02em;
}
.du-btn-ofertas:hover {
    background: #d4164a;
    color: #fff !important;
}
.du-nav-links {
    display: flex;
    align-items: center;
    margin-left: 24px;
}
.du-nav-links a {
    color: #e0dadb !important;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 18px;
    transition: color 0.2s ease;
}
.du-nav-links a:hover {
    color: #f5a623 !important;
}
.du-entrega-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #f5a623 0%, #f7b731 100%) !important;
    color: #002147 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25) !important;
    letter-spacing: 0.01em !important;
}
.du-entrega-badge:hover {
    background: linear-gradient(135deg, #002147 0%, #003366 100%) !important;
    color: #f5a623 !important;
    box-shadow: 0 3px 12px rgba(0, 33, 71, 0.4) !important;
}

/* ══════════════════════════════════════════════
   OVERRIDE de estilos Electro que chocan
   ══════════════════════════════════════════════ */

/* El header section ya no es azul (lo manejan las sub-cintas) */
.u-header__section {
    background-color: transparent !important;
}

/* Quitar el azul de bg-primary-down-lg (ya no se usa) */
.bg-primary-down-lg {
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════
   BOTONES GENERALES
   ══════════════════════════════════════════════ */
.btn-primary {
    background-color: #002147 !important;
    border-color: #002147 !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}
.btn-primary:hover {
    background-color: #bb133e !important;
    border-color: #bb133e !important;
}
.btn-primary-dark-w {
    background-color: #002147 !important;
    border-color: #002147 !important;
    color: #ffffff !important;
}
.btn-primary-dark-w:hover {
    background-color: #bb133e !important;
    border-color: #bb133e !important;
}

/* ══════════════════════════════════════════════
   COLORES GENERALES
   ══════════════════════════════════════════════ */
.bg-primary { background-color: #002147 !important; }
.border-primary { border-color: #002147 !important; }
.text-blue { color: #002147 !important; }
.text-blue:hover { color: #bb133e !important; }
.text-red, ins { color: #bb133e !important; }
.badge-primary { background-color: #bb133e !important; color: #ffffff !important; }

/* ══════════════════════════════════════════════
   PRODUCTOS — Cards
   ══════════════════════════════════════════════ */
.product-item__title a {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
.prodcut-price ins {
    font-family: 'Montserrat', sans-serif !important;
}

/* ══════════════════════════════════════════════════════
   FOOTER NUEVO — pegar al final de desdeusa.css
   Usa IDs (#du-footer-*) para ganar a los !important
   del template Electro que usa selectores "footer"
   ══════════════════════════════════════════════════════ */

/* Reset del template: neutralizar reglas de "footer" */
#du-footer { background: transparent !important; border-top: none !important; }

/* ── FRANJA SUPERIOR ── */
#du-footer-top {
    background: #f8f9fb !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 24px 0 !important;
}
.du-fv-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 4px 8px !important;
}
.du-fv-icon {
    font-size: 20px !important;
    color: #bb133e !important;
    flex-shrink: 0 !important;
}
#du-footer-top .du-fv-item strong {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #002147 !important;
    line-height: 1.3 !important;
}
#du-footer-top .du-fv-item span {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}

/* ── CUERPO ── */
#du-footer-body {
    background: #ffffff !important;
    padding: 44px 0 32px !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.du-footer-col { margin-bottom: 28px !important; }

.du-footer-logo {
    height: 36px !important;
    display: block !important;
    margin-bottom: 14px !important;
}
#du-footer-body .du-footer-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
    max-width: 260px !important;
}

/* Social */
.du-footer-social { display: flex !important; gap: 8px !important; }
.du-social-btn {
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    background: #f0f2f5 !important;
    display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
    font-size: 13px !important;
    color: #002147 !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
}
.du-social-btn:hover { background: #002147 !important; color: #fff !important; text-decoration: none !important; }

/* Headings */
#du-footer-body .du-footer-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #002147 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin-bottom: 14px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #e5e7eb !important;
    display: block !important;
}

/* Listas de nav */
.du-footer-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.du-footer-list li { margin-bottom: 9px !important; }
.du-footer-list a {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important; color: #4b5563 !important;
    text-decoration: none !important; transition: color 0.15s !important;
}
.du-footer-list a:hover { color: #bb133e !important; text-decoration: none !important; }

/* Contacto */
.du-footer-contact-list { list-style: none !important; padding: 0 !important; margin: 0 0 18px !important; }
.du-footer-contact-list li {
    display: flex !important; align-items: center !important; gap: 9px !important;
    margin-bottom: 10px !important;
    font-family: 'Inter', sans-serif !important; font-size: 13px !important; color: #4b5563 !important;
}
.du-footer-contact-list i { color: #bb133e !important; font-size: 13px !important; width: 16px !important; flex-shrink: 0 !important; }
.du-footer-contact-list a { color: #4b5563 !important; text-decoration: none !important; }
.du-footer-contact-list a:hover { color: #bb133e !important; }
.du-footer-contact-list span { color: #4b5563 !important; }

/* Pagos */
.du-payments-label {
    font-family: 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 600 !important;
    color: #9ca3af !important; text-transform: uppercase !important; letter-spacing: 0.06em !important;
    display: block !important; margin-bottom: 7px !important;
}
.du-payments-row { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.du-pay-chip {
    font-family: 'Inter', sans-serif !important; font-size: 11px !important; font-weight: 600 !important;
    color: #002147 !important; background: #f0f2f5 !important;
    border: 1px solid #d1d5db !important; border-radius: 5px !important; padding: 3px 9px !important;
}

/* ── FRANJA INFERIOR ── */
#du-footer-bottom {
    background: #f8f9fb !important;
    padding: 14px 0 !important;
}
.du-footer-bottom-inner {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important;
}
#du-footer-bottom .du-copy {
    font-family: 'Inter', sans-serif !important; font-size: 12px !important;
    color: #9ca3af !important; margin: 0 !important;
}
.du-legal-links { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.du-legal-links a { font-family: 'Inter', sans-serif !important; font-size: 12px !important; color: #6b7280 !important; text-decoration: none !important; }
.du-legal-links a:hover { color: #bb133e !important; }
.du-legal-links span { font-size: 12px !important; color: #d1d5db !important; }

/* ── BOTÓN VOLVER ARRIBA ── */
#du-go-top {
    position: fixed !important; bottom: 28px !important; right: 28px !important;
    width: 38px !important; height: 38px !important;
    background: #002147 !important; color: #fff !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; cursor: pointer !important;
    opacity: 0 !important; transform: translateY(8px) !important;
    transition: opacity 0.3s, transform 0.3s, background 0.2s !important;
    z-index: 1000 !important; box-shadow: 0 4px 14px rgba(0,33,71,0.22) !important;
}
#du-go-top.visible { opacity: 1 !important; transform: translateY(0) !important; }
#du-go-top:hover { background: #bb133e !important; }

/* ══════════════════════════════════════════════
   SIDEBAR (mobile menu + account)
   ══════════════════════════════════════════════ */
#sidebarHeader1,
#sidebarHeader1 .u-sidebar__container,
#sidebarHeader1 .u-sidebar__scroller,
#headerSidebarContent {
    background-color: #002147 !important;
}
.u-header-collapse__nav-link { color: #e0dadb !important; }
.u-header-collapse__nav-link:hover { color: #f5a623 !important; }

/* ══════════════════════════════════════════════
   MISCELÁNEOS
   ══════════════════════════════════════════════ */

/* Form focus states */
.form-control:focus {
    border-color: #bb133e !important;
    box-shadow: 0 0 0 2px rgba(187, 19, 62, 0.1) !important;
}

/* Cart dropdown */
.cart-dropdown {
    border-top-color: #bb133e !important;
}

/* ══════════════════════════════════════════════
   STICKY HEADER
   ══════════════════════════════════════════════ */
.du-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ══════════════════════════════════════════════
   DIRECCIÓN DE ENTREGA (selector en nav bar)
   ══════════════════════════════════════════════ */
.du-direccion-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.du-direccion-badge:hover {
    background: rgba(255,255,255,0.2) !important;
    color: #f5a623 !important;
    border-color: rgba(245,166,35,0.4) !important;
}
.du-direccion-badge .fas {
    color: #f5a623 !important;
}

/* ══════════════════════════════════════════════
   TOPBAR LINKS — toda el área clickeable
   ══════════════════════════════════════════════ */
.u-header-topbar__nav-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.u-header-topbar__nav-link:hover {
    color: #f5a623 !important;
}

/* ══════════════════════════════════════════════
   BODY padding for sticky header
   ══════════════════════════════════════════════ */
body {
    padding-top: 0 !important;
}

/* Fix: Sidebar de cuenta no bloquea clicks cuando está cerrado */
#sidebarContent.u-unfold--hidden,
#sidebarContent:not(.fadeInRight):not(.fadeOutRight) {
    pointer-events: none !important;
    visibility: hidden !important;
}
#sidebarContent.fadeInRight {
    pointer-events: auto !important;
    visibility: visible !important;
}
#sidebarContent.fadeOutRight {
    pointer-events: auto !important;
    visibility: visible !important;
}

/* ══════════════════════════════════════════════
   PÁGINA DE CUENTA
   Agregar al final de desdeusa.css
   ══════════════════════════════════════════════ */

/* Sidebar de cuenta */
.du-cuenta-sidebar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 24px;
}
.du-cuenta-user {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.du-cuenta-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #002147;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 24px;
}
.du-cuenta-nav {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}
.du-cuenta-nav-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s ease;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.du-cuenta-nav-item:hover {
    background: #f5f5f5;
    color: #002147 !important;
}
.du-cuenta-nav-item.active {
    background: #002147;
    color: #fff !important;
}
.du-cuenta-nav-item.active .badge {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
.du-nav-logout {
    margin-top: 8px;
    border-top: 1px solid #eee;
    padding-top: 16px;
    color: #bb133e !important;
}
.du-nav-logout:hover {
    background: #fef2f2 !important;
    color: #bb133e !important;
}

/* Cards de contenido */
.du-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}
.du-card-header {
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    font-family: 'Montserrat', sans-serif;
}
.du-card-header h4 {
    font-size: 18px;
    font-weight: 700;
    color: #002147;
}
.du-card-body {
    padding: 24px;
}

/* Labels */
.du-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
    display: block;
    font-family: 'Inter', sans-serif;
}

/* Direcciones */
.du-direccion-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.15s ease;
}
.du-direccion-card:hover {
    border-color: #002147;
    box-shadow: 0 2px 8px rgba(0,33,71,0.08);
}
.du-dir-predeterminada {
    border-color: #002147;
    border-width: 2px;
    background: #f8faff;
}
.du-dir-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #002147;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}
.du-dir-predeterminada .du-dir-icon {
    background: #002147;
    color: #fff;
}
.du-dir-actions {
    flex-shrink: 0;
    margin-left: 12px;
}

/* Pedidos */
.du-pedido-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.du-pedido-card:hover {
    border-color: #002147;
    box-shadow: 0 2px 8px rgba(0,33,71,0.08);
    background: #fafafa;
}

/* Estado badges */
.du-estado-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}
.du-estado-pendiente {
    background: #fff3cd;
    color: #856404;
}
.du-estado-comprado {
    background: #cce5ff;
    color: #004085;
}
.du-estado-en_camino {
    background: #d4edda;
    color: #155724;
}
.du-estado-entregado {
    background: #002147;
    color: #fff;
}
.du-estado-cancelado {
    background: #f8d7da;
    color: #721c24;
}

/* Fix: Sidebar por encima del header sticky */
#sidebarContent,
#sidebarHeader1 {
    z-index: 1050 !important;
}

/* Fix: Sidebar de cuenta - fondo oscuro para mejor contraste */
#sidebarContent .u-sidebar__body,
#sidebarContent .u-sidebar__content {
    background-color: #002147 !important;
    color: #fff !important;
}
#sidebarContent .h4,
#sidebarContent h2,
#sidebarContent header p {
    color: #e0dadb !important;
}
#sidebarContent .form-group .input-group-text {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
#sidebarContent .form-control {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
#sidebarContent .form-control::placeholder {
    color: rgba(255,255,255,0.5) !important;
}
#sidebarContent .small.text-muted {
    color: #aab !important;
}
#sidebarContent .small.text-dark {
    color: #f5a623 !important;
}
#sidebarContent .btn-soft-primary {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
#sidebarContent .btn-soft-primary:hover {
    background: rgba(255,255,255,0.2) !important;
}
#sidebarContent .btn-outline-danger {
    border-color: #bb133e !important;
    color: #bb133e !important;
}
#sidebarContent .btn-outline-danger:hover {
    background: #bb133e !important;
    color: #fff !important;
}
#sidebarContent .close {
    color: #fff !important;
    opacity: 0.7 !important;
}
#sidebarContent .close:hover {
    opacity: 1 !important;
}

/* Fix: Modal de selección de dirección */
#du-direccion-modal .du-dir-opcion strong {
    color: #002147 !important;
}
#du-direccion-modal .du-dir-opcion .text-muted {
    color: #666 !important;
}
#du-direccion-modal h5 {
    color: #002147 !important;
}
#du-direccion-modal .btn-outline-primary {
    color: #002147 !important;
    border-color: #002147 !important;
}
#du-direccion-modal .btn-outline-primary:hover {
    background: #002147 !important;
    color: #fff !important;
}
#du-direccion-modal .badge-primary {
    background: #002147 !important;
}

/* Fix: Espacio para que el título no se superponga con la X de cerrar */
#sidebarContent .u-sidebar__content {
    padding-top: 60px !important;
}

/* Fix: Botón de login visible en sidebar oscuro */
#sidebarContent .btn-primary {
    background-color: #bb133e !important;
    border-color: #bb133e !important;
    color: #fff !important;
}
#sidebarContent .btn-primary:hover {
    background-color: #d4164a !important;
    border-color: #d4164a !important;
}

/* ══════════════════════════════════════════════
   STORES STRIP (tercera cinta)
   Agregar al final de desdeusa.css
   ══════════════════════════════════════════════ */

/* Strip de tiendas */
.du-stores-strip {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
.du-stores-label {
    color: #f5a623 !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 12px;
    white-space: nowrap;
}
.du-store {
    color: rgba(255,255,255,0.6);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}
.du-store::after {
    content: '·';
    margin: 0 8px;
    color: rgba(255,255,255,0.25);
}
.du-store:last-of-type::after,
.du-stores-more + .du-store::after {
    content: '';
    margin: 0;
}
.du-store:hover {
    color: #fff;
}

/* Tiendas extra (ocultas por defecto) */
.du-store-extra {
    display: none;
}
.du-store-extra.du-store-show {
    display: inline;
}

/* Botón +4 más */
.du-stores-more {
    color: #f5a623 !important;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    white-space: nowrap;
    transition: color 0.2s ease;
    text-decoration: none;
}
.du-stores-more:hover {
    color: #fff !important;
}

/* Quitar estilos viejos de Super Ofertas y nav-links que ya no se usan */
.du-btn-ofertas,
.du-nav-links {
    display: none !important;
} 

/* ══════════════════════════════════════════════
   PLACEHOLDER ROTATIVO DEL BUSCADOR
   ══════════════════════════════════════════════ */
.du-search-input::placeholder {
    transition: opacity 0.3s ease;
}
.du-search-input.du-placeholder-fade::placeholder {
    opacity: 0;
}

/* Responsive: tiendas strip en pantallas medianas */
@media (max-width: 1400px) {
    .du-store {
        font-size: 11px;
    }
    .du-store::after {
        margin: 0 5px;
    }
    .du-stores-label {
        font-size: 10px;
        margin-right: 8px;
    }
}
@media (max-width: 1200px) {
    .du-store {
        font-size: 10px;
    }
    .du-store::after {
        margin: 0 4px;
    }
    .du-stores-label {
        font-size: 9px;
        margin-right: 6px;
    }
    .du-stores-more {
        font-size: 10px;
    }
}

/* Buscador mobile (teléfono < 768px) */
.du-search-input-mobile {
    font-size: 14px !important;
    padding: 10px 12px !important;
}

/* Buscador tablet (768-1199px) - más compacto */
@media (min-width: 768px) and (max-width: 1199px) {
    .du-search-select {
        min-width: 100px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    .du-search-input {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
    .du-search-btn {
        padding: 8px 14px !important;
        font-size: 15px !important;
    }
    .du-logo {
        height: 38px !important;
    }
}

/* Fix: Márgenes del buscador en teléfono */
@media (max-width: 767px) {
    .d-md-none .col-12.px-3 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ── HOME SECTIONS — agregar al final de desdeusa.css ── */

/* Skeleton mientras cargan los productos */
.du-skeleton-card {
    border-radius: 8px;
    height: 280px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: du-shimmer 1.4s infinite;
    margin: 4px;
}
@keyframes du-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Altura fija para imágenes en homepage (evita cards de tamaños distintos) */
.home-product-img {
    height: 160px;
    object-fit: contain;
}

/* ══════════════════════════════════════════════
   HOME SECTIONS — agregar al final de desdeusa.css
   ══════════════════════════════════════════════ */

/* Cabecera de sección */
.du-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #002147;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.du-section-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.du-section-header__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #002147 !important;
    margin: 0 !important;
    letter-spacing: -0.3px;
}
.du-section-header__badge {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.du-section-header__badge--red   { background: #fde8ec; color: #9b1030; }
.du-section-header__badge--blue  { background: #e0eaf7; color: #0a3d7a; }
.du-section-header__badge--green { background: #e0f4ea; color: #145c32; }

.du-section-header__link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #002147;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.du-section-header__link:hover {
    color: #bb133e;
    text-decoration: none;
}

/* Mensaje de error */
.du-section-error {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #888;
    padding: 12px 0;
}
.du-section-error a {
    color: #002147;
    font-weight: 500;
}

/* Skeleton loader */
.du-skeleton-card {
    border-radius: 8px;
    height: 280px;
    background: linear-gradient(90deg, #f4f4f4 25%, #e8e8e8 50%, #f4f4f4 75%);
    background-size: 200% 100%;
    animation: du-shimmer 1.4s infinite;
    margin: 4px;
}
@keyframes du-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Imagen de producto en homepage — altura fija para cards uniformes */
.du-home-img {
    height: 160px;
    width: 100%;
    object-fit: contain;
}

/* Badges sobre la imagen */
.du-product-badges {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}
.du-product-badge {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.3;
}
.du-product-badge--label    { background: #002147; color: #fff; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-product-badge--discount { background: #bb133e; color: #fff; margin-left: auto; }

/* Rating */
.du-product-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    color: #f5a623;
}
.du-product-rating .fa-star,
.du-product-rating .fa-star-half-alt,
.du-product-rating .far { color: #f5a623; }
.du-product-rating__count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #888;
    margin-left: 3px;
}

/* ══════════════════════════════════════════════
   HOME SECTIONS — agregar al final de desdeusa.css
   ══════════════════════════════════════════════ */

/* Cabecera de sección */
.du-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #002147;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.du-section-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.du-section-header__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #002147 !important;
    margin: 0 !important;
    letter-spacing: -0.3px;
}
.du-section-header__badge {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.du-section-header__badge--red   { background: #fde8ec; color: #9b1030; }
.du-section-header__badge--blue  { background: #e0eaf7; color: #0a3d7a; }
.du-section-header__badge--green { background: #e0f4ea; color: #145c32; }

.du-section-header__link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #002147;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.du-section-header__link:hover {
    color: #bb133e;
    text-decoration: none;
}

/* Mensaje de error */
.du-section-error {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #888;
    padding: 12px 0;
}
.du-section-error a {
    color: #002147;
    font-weight: 500;
}

/* Skeleton loader */
.du-skeleton-card {
    border-radius: 8px;
    height: 220px;
    background: linear-gradient(90deg, #f4f4f4 25%, #e8e8e8 50%, #f4f4f4 75%);
    background-size: 200% 100%;
    animation: du-shimmer 1.4s infinite;
    margin: 4px;
}
@keyframes du-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Imagen de producto en homepage — altura fija para cards uniformes */
.du-home-img {
    height: 120px;
    width: 100%;
    object-fit: contain;
}

/* Badges sobre la imagen */
.du-product-badges {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}
.du-product-badge {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    line-height: 1.3;
}
.du-product-badge--label    { background: #002147; color: #fff; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-product-badge--discount { background: #bb133e; color: #fff; margin-left: auto; }

/* Rating */
.du-product-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    color: #f5a623;
}
.du-product-rating .fa-star,
.du-product-rating .fa-star-half-alt,
.du-product-rating .far { color: #f5a623; }
.du-product-rating__count {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #888;
    margin-left: 3px;
}

/* ── BANNER LATERAL (sidebar) — agregar al final de desdeusa.css ── */
.du-sidebar-banner {
    position: sticky;
    top: 100px; /* queda fijo al hacer scroll, debajo del header sticky */
    width: 200px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,33,71,0.10);
}
.du-sidebar-banner iframe {
    display: block;
    border: 0;
    width: 200px;
    height: 800px;
}

/* ══════════════════════════════════════════════
   CARRITO — agregar al final de desdeusa.css
   ══════════════════════════════════════════════ */

/* ── Item del carrito ── */
.du-carrito-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.du-carrito-item:last-child { border-bottom: none; }

.du-carrito-item__img {
    width: 100px;
    height: 100px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}
.du-carrito-item__img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.du-carrito-item__titulo {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #002147;
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.du-carrito-item__titulo:hover { color: #bb133e; text-decoration: none; }
.du-carrito-item__precio {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}
.du-carrito-item__controles {
    display: flex;
    align-items: center;
    gap: 12px;
}
.du-carrito-item__subtotal {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #002147;
    white-space: nowrap;
}
.du-carrito-item__eliminar {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    transition: color 0.15s;
}
.du-carrito-item__eliminar:hover { color: #bb133e; }

/* Control de cantidad */
.du-qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}
.du-qty-btn {
    background: #f9fafb;
    border: none;
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    color: #002147;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.du-qty-btn:hover { background: #e5e7eb; }
.du-qty-val {
    width: 34px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #002147;
    border-left: 1px solid #d1d5db;
    border-right: 1px solid #d1d5db;
    line-height: 30px;
}

/* ── Opciones de envío ── */
.du-envio-opcion {
    display: block;
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    transition: border-color 0.2s;
    margin: 0;
}
.du-envio-opcion:hover { border-color: #002147; }
.du-envio-opcion--activa {
    border-color: #002147 !important;
    background: #f0f4fa;
}
.du-envio-opcion input[type="radio"] { display: none; }

.du-envio-opcion__body { width: 100%; }
.du-envio-opcion__header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.du-envio-opcion__icono { font-size: 20px; flex-shrink: 0; }
.du-envio-opcion__nombre {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #002147;
    display: block;
}
.du-envio-opcion__tiempo {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6b7280;
}
.du-envio-opcion__precio {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #bb133e;
    white-space: nowrap;
}
.du-envio-opcion__formula {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    padding-left: 30px;
}

@media (max-width: 576px) {
    .du-carrito-item { grid-template-columns: 80px 1fr; }
    .du-carrito-item__subtotal { grid-column: 2; }
}

/* ══════════════════════════════════════════════
   CHECKOUT + CONFIRMACIÓN — agregar al final de desdeusa.css
   ══════════════════════════════════════════════ */

/* ── Pasos del proceso ── */
.du-checkout-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 0;
}
.du-checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.du-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.du-checkout-step--active .du-step-num {
    background: #002147;
    color: #fff;
}
.du-checkout-step--done .du-step-num {
    background: #1a7a4a;
    color: #fff;
}
.du-step-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #9ca3af;
}
.du-checkout-step--active .du-step-label,
.du-checkout-step--done .du-step-label { color: #002147; font-weight: 600; }
.du-checkout-step-line {
    width: 60px;
    height: 2px;
    background: #e5e7eb;
    margin-bottom: 16px;
}
.du-checkout-step-line--done { background: #1a7a4a; }

/* ── Opciones de dirección ── */
.du-dir-opcion {
    display: block;
    cursor: pointer;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.du-dir-opcion:hover { border-color: #002147; }
.du-dir-opcion--activa { border-color: #002147 !important; background: #f0f4fa; }
.du-dir-opcion input[type="radio"] { display: none; }
.du-dir-opcion__etiqueta {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #002147;
}
.du-dir-opcion__texto {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* ── Resumen items en checkout ── */
.du-resumen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}
.du-resumen-item:last-child { border-bottom: none; }
.du-resumen-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    flex-shrink: 0;
}
.du-resumen-item__info {
    flex: 1;
    min-width: 0;
}
.du-resumen-item__titulo {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #374151;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.du-resumen-item__qty {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #9ca3af;
}
.du-resumen-item__precio {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #002147;
    white-space: nowrap;
}
.du-resumen-linea {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Página de confirmación ── */
.du-confirm-icono {
    font-size: 72px;
    color: #1a7a4a;
    line-height: 1;
}
.du-confirm-paso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.du-confirm-paso:last-child { margin-bottom: 0; }
.du-confirm-paso__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #002147;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}