/* ==========================================
            MEDIA QUERIES (RESPONSIVE)
   ========================================== */
@media (max-width: 768px) {
    .checkout-wrapper {
        grid-template-columns: 1fr;
    }
    
  

  #variant-image {
    width: 100%;
    max-width: 300px;
  }

  .notes-grid-layout {
    grid-template-columns: 1fr;
  }

  .footer-legal-links {
    flex-direction: column;
    gap: 15px;
  }
  .footer-divider {
     display: none;
  }  
   /* Header */

   .main-navbar {
        min-height: 70px !important; 
        padding: 10px 15px !important;
    }

    .header-content {
        padding: 0 5px;
        /* Quitamos las restricciones para que flexbox alinee de forma natural */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 2. Rompemos el posicionamiento absoluto del logo en móviles */
    .logo-wrapper {
        position: static !important; /* Vuelve al flujo normal de flexbox */
        transform: none !important;
        left: auto !important;
    }

    /* 3. Hacemos el logo significativamente más pequeño en teléfonos */
    #logo {
        max-width: 100px !important;
        max-height: 70px !important;
    }

    /* 4. Reducimos la separación del bloque derecho */
    .header-right {
        gap: 12px !important;
    }

    /* 5. Ajustamos el botón del carrito para que no ocupe tanto espacio */
    #cartBtn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    #auth-status .nav-link {
        font-size: 0 !important; /* Esconde el texto de forma limpia */
        letter-spacing: 0 !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #auth-status .user-icon {
        font-size: 20px !important; /* Hace el icono un poco más fácil de tocar */
    }


  /* Product grid */
  #productGrid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px; 
        padding: 10px; 
  }

  .product-info {
    width: 100%;
  }

  .product-view {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
    
  .product-card {
        padding: 12px; 
        border-radius: 12px;
  }

  .product-card img, .product-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; 
    }

    .product-img-container {
        padding: 6px; 
        border-radius: 8px;
    }

    .product-card h3 {
        font-size: 14px;
        min-height: 40px; 
        margin: 10px 0 2px 0;
    }
    
    .in-stock, .out-of-stock {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .sold-out-badge {
        padding: 6px 12px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    /* Product details */

    #variant-image {
        max-height: 350px !important;
        object-fit: contain !important;
    }

    /* Grid de opciones de tamaño: de vertical a 2 o 3 columnas interactivas */
    #variantGrid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Ajustamos las tarjetas de opciones de tamaño para el móvil */
    .size-option {
        padding: 12px 8px !important;
        border: 1px solid #e0d5ba !important;
        border-radius: 10px !important;
        background-color: #ffffff !important;
    }

    .size-option img.variant-thumb-img {
        width: 65px !important; /* Miniaturas más compactas en celular */
        height: 65px !important;
        margin-bottom: 8px !important;
    }

    .size-option p strong {
        font-size: 0.9rem !important;
    }

    .size-option .price {
        font-size: 0.95rem !important;
    }

    /* Ajustes para la sección inferior de marketing */
    .pdp-marketing-fullwide {
        margin-top: 30px !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }

    .marketing-header {
        padding: 30px 15px !important;
    }

    .marketing-header h3 {
        font-size: 1.2rem !important;
    }

    .tagline {
        font-size: 1rem !important;
    }

    .description-text {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .specs-bar {
        flex-direction: column !important; /* Familia y tipo uno abajo del otro en móvil */
        gap: 8px !important;
        align-items: center !important;
    }

    .specs-bar .separator {
        display: none !important; /* Ocultamos la barra divisora horizontal */
    }

    .notes-grid {
        grid-template-columns: 1fr !important; /* Una sola columna para las notas de salida, corazón y fondo */
        gap: 12px !important;
    }

 /* ==========================================================================
       1. ESTRUCTURA Y CONTENEDORES PRINCIPALES
       ========================================================================== */
    
    /* Desactiva el comportamiento flex horizontal de escritorio */
    .profile-grid-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* CORRECCIÓN: Centrado absoluto del título "Mi Cuenta" */
    .dashboard-title,
    .profile-grid-layout h2,
    #profile-tab-container h2,
    .dashboard-view h2 {
        text-align: center !important;
        margin-top: 15px !important;
        margin-bottom: 24px !important;
        font-size: 26px !important;
        width: 100% !important;
        display: block !important;
    }

    /* Asegura que el contenedor interno absorba todo el ancho disponible */
    .profile-main-content-v2,
    #profile-tab-container,
    .dashboard-view {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

   /* ==========================================================================
       2. BOTÓN DE APERTURA DEL MENÚ (Corrección de Visibilidad Absoluta)
       ========================================================================== */
    
    /* El uso de selectores encadenados y el atributo garantiza ganarle a scripts de JS */
    #menu-toggle-btn,
    button#menu-toggle-btn.menu-toggle-btn,
    [id="menu-toggle-btn"] {
        display: flex !important;       /* Fuerza la visibilidad anulando 'none' */
        visibility: visible !important; /* Previene bloqueos por opacidad o visibilidad */
        opacity: 1 !important;
        
        /* Ajustes de Caja e Integración en el flujo */
        align-items: center;
        justify-content: center;   
        gap: 10px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto 20px auto !important; /* Separación limpia bajo el título */
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        
        /* Estilos Estéticos de la Marca */
        background-color: #fdfaf4 !important; /* Fondo crema suave premium */
        border: 1px solid #e0d7c6 !important; /* Borde sutil */
        border-radius: 8px !important;
        color: #bfa36a !important;            /* Dorado característico */
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(191, 163, 106, 0.08) !important;
    }

    /* ==========================================================================
       3. PANEL LATERAL DESLIZABLE (Account Sidebar Drawer)
       ========================================================================== */
    
    .account-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important; /* Oculto inicialmente a la izquierda */
        width: 280px !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15) !important;
        z-index: 10000 !important; 
        padding: 24px !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid #eae6df !important;
        box-sizing: border-box !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Clase activa controlada por tu archivo profile.js */
    .account-sidebar.mobile-open {
        left: 0 !important;
    }

    /* Cabecera interna del menú (Navegación + Botón cerrar X) */
    .sidebar-mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid #eae6df;
        margin-bottom: 20px;
    }

    .sidebar-mobile-header h3 {
        margin: 0;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #3d342d;
    }

    /* Botón X de cierre */
    #menu-close-btn {
        background: transparent;
        border: none;
        color: #8a8a8a;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 4px;
    }

    .sidebar-menu {
        display: block !important;
        width: 100% !important;
    }

    .sidebar-menu .menu-item {
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    .sidebar-sub-menu {
        padding-left: 24px !important;
        margin-bottom: 12px;
    }

    /* ==========================================================================
       4. CORTINA OSCURA TRASLÚCIDA (Overlay)
       ========================================================================== */
    
    .sidebar-overlay {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3) !important;
        z-index: 9999 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Activado mediante JS */
    .sidebar-overlay.active {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ==========================================================================
       5. CUADRÍCULAS Y COLUMNAS DE TARJETAS
       ========================================================================== */

    /* Fuerza el apilamiento vertical de Recompensas y Direcciones */
    .dashboard-grid-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .dashboard-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ==========================================================================
   Purchase history
   ========================================================================== */
    .order-row-card {
        padding: 16px;
    }
    
    .o-head {
        align-items: flex-start;
    }
    
    .status-badge {
        padding: 4px 10px;
        font-size: 10px;
    }

    /* ==========================================================================
   Vault rewards
   ========================================================================== */
    .loyalty-main-title {
        font-size: 22px;
    }
    
    .loyalty-tiers-grid {
        grid-template-columns: 1fr; /* Colapsa limpiamente a lista en móviles */
        gap: 12px;
    }
    
    .tier-item {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: 16px;
        gap: 16px;
    }
    
    .tier-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-bottom: 0;
    }
    
    .tier-item.active::after {
        top: 12px;
        right: 16px;
    }
    
    .progress-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .balance-display {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    
    .balance-display button {
        width: 100%;
    }
    
    .referral-action {
        flex-direction: column;
    }
    
    .referral-action button {
        width: 100%;
    }

    /* ==========================================================================
   Profile settings
   ========================================================================== */

    .form-container-box {
        padding: 20px;
    }

    .form-grid {
        grid-template-columns: 1fr; /* Una sola columna fluida en móvil */
        gap: 16px;
    }
    
    .form-container-box button.gold-btn {
        align-self: stretch; /* Se estira a todo el ancho solo en pantallas pequeñas */
        width: 100%;
        margin-top: 24px;
    }

    /* ==========================================================================
   Address page
   ========================================================================== */

    .address-view-header {
        flex-direction: row;
    }

    .address-grid {
        grid-template-columns: 1fr; /* Una sola columna fluida en móvil */
        gap: 14px;
    }

    /* ==========================================================================
   wishlist
   ========================================================================== */
    
    .wishlist-page .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .wishlist-page .product-card {
        padding: 12px;
        border-radius: 10px;
    }

    .wishlist-page .product-card img {
        height: 120px;
        margin-bottom: 12px;
    }

    .wishlist-page .product-card h3 {
        font-size: 12px;
        min-height: 34px;
        margin-bottom: 12px;
    }

    .wishlist-page .product-card button.gold-btn {
        padding: 8px 0;
        font-size: 11px;
    };

     /* ==========================================================================
    Checkout
   ========================================================================== */

    .checkout-wrapper {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
        gap: 24px;
        margin: 20px auto;
    }

    /* Mandamos el resumen de compra arriba en pantallas móviles para mejor UX */
    .checkout-right {
        grid-row: 1; 
    }
    
    .checkout-left {
        grid-row: 2;
        padding: 20px;
    }

         /* ==========================================================================
    landing page
   ========================================================================== */

    .final-cta-btn {
        padding: 1rem 1.5rem !important;
        font-size: 0.9rem !important;
        width: 100%; /* Se adapta elegantemente al ancho de la pantalla del celular */
        max-width: 320px;
    }

    .feature-card {
        width: 90%;
        margin: 1rem auto;
    }

    .hero-content h1 { font-size: 2.2rem; }
    .features-grid { gap: 1.5rem; }
}


@media (max-width: 1024px) {
    .profile-sidebar-spacer {
        display: none;
    }
    .profile-page-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .user-greeting {
        display: none;              
    }
    
    .account-icon-only {
        display: block;             
    }

    .header-logo img {
        max-height: 30px;           
    }

     /* ==========================================================================
    Checkout
   ========================================================================== */


    .coupon-input-field {
        flex-direction: column;
        gap: 10px;
    }
    
    .coupon-input-field button.gold-btn {
        width: 100%;
        padding: 12px 0;
    }

     /* ==========================================================================
    cart/drawer
   ========================================================================== */

    .cart-item {
        grid-template-columns: 75px 1fr; /* 2 columnas en lugar de 3 */
        gap: 14px;
        padding: 16px 0;
    }

    /* 2. Escalamos levemente la imagen del decant para optimizar espacio */
    .cart-item-img {
        width: 75px;
        height: 75px;
        object-fit: contain; /* Evita que se recorten los tapones o frascos */
    }

    /* 3. Reorganizamos la info en un flujo vertical limpio y simétrico */
    .cart-item-info {
        position: relative; /* Permite posicionar el botón de remover de forma exacta */
        gap: 2px;
    }

    .cart-name {
        font-size: 13px;
        padding-right: 24px; /* Espacio de cortesía para que el texto no choque con la X */
    }

    /* Ajuste de espaciados caóticos en los textos */
    .cart-size {
        font-size: 11px;
        font-weight: 600;
        color: #bfa36a; /* Dorado característico */
        margin-top: 0 !important; /* Eliminamos el margin de 20px que rompía el interlineado */
    }

    .cart-price {
        font-size: 13px;
        margin-top: 2px !important;
        margin-bottom: 6px !important;
    }

    /* 4. Controles de cantidad más limpios y fáciles de pulsar con el pulgar */
    .qty-controls {
        gap: 16px;
        margin-top: 4px;
    }

    .qty-btn {
        font-size: 16px;
        padding: 4px 8px;
        background: #faf9f6;
        border-radius: 4px;
        transition: background 0.2s;
    }

    /* 5. Transformamos el texto plano "Remove" en una discreta y elegante 'X' de boutique */
    .remove-btn {
        position: absolute;
        top: -2px;
        right: 0;
        padding: 4px;
        margin: 0;
        font-size: 0; /* Oculta la palabra "Remove" */
        color: #a8a29e;
        line-height: 1;
    }

    /* Inyectamos la X minimalista visualmente */
    .remove-btn::before {
        content: "✕";
        font-size: 14px;
        font-weight: 400;
        display: block;
    }

    .remove-btn:hover {
        color: #c95b5b;
        text-decoration: none;
    }

    /* 6. Optimización del botón de Checkout inferior */
    .cart-footer {
        padding: 16px 20px 24px 20px; /* Margen de seguridad inferior para gestos de navegación de Android/iOS */
    }

    #checkoutBtn {
        padding: 12px;
        font-size: 13px;
    }

     /* ==========================================================================
    landing page
   ========================================================================== */

    .final-cta-btn {
        padding: 1rem 1.5rem !important;
        font-size: 0.9rem !important;
        width: 100%; /* Se adapta elegantemente al ancho de la pantalla del celular */
        max-width: 320px;
    }
    
}