/**
 * Dunes Parfums - Estilos Responsivos (CSS Media Queries)
 * Asegura la perfecta visualización y usabilidad en todos los tamaños de pantalla.
 */

/* ==========================================================================
   Dispositivos de Escritorio Medianos y Laptops (Máx 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  .container {
    padding: 0 32px;
  }

  .hero-perfume-img {
    max-height: 420px;
  }

  .offer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .offer-content-side {
    padding: 32px;
  }
}

/* ==========================================================================
   Navegación de Escritorio y Laptops (Min 992px) - Aislamiento Estricto
   ========================================================================== */
@media screen and (min-width: 992px) {
  /* Ocultar elementos exclusivos del menú móvil en Escritorio */
  .mobile-drawer-header,
  .mobile-drawer-brand,
  .mobile-drawer-close,
  #mobile-menu-close,
  .burger-menu-btn,
  #mobile-menu-toggle,
  .nav-menu-overlay,
  #nav-menu-overlay,
  .nav-link-icon,
  .nav-link-chevron {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Asegurar que el body recupere el scroll normal en escritorio */
  body,
  body.menu-open,
  body.no-scroll {
    overflow: auto !important;
  }

  /* Restablecer el contenedor de navegación horizontal en escritorio */
  .nav-menu,
  .nav-menu[hidden] {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .nav-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    background: transparent !important;
    list-style: none !important;
  }

  .nav-list li,
  .nav-item {
    width: auto !important;
    margin: 0 !important;
    display: inline-block !important;
    position: relative !important;
  }

  .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    position: relative !important;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .nav-link:hover,
  .nav-link.active {
    color: #D4AF37 !important;
    background: transparent !important;
    border: none !important;
  }

  .nav-link.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: #D4AF37 !important;
    border-radius: 2px !important;
  }

  /* Dropdown Flotante para CATÁLOGO en Escritorio */
  .nav-item-has-submenu {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
  }

  .nav-submenu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    min-width: 250px !important;
    max-height: none !important;
    background: #181818 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    padding: 16px !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease !important;
    z-index: 1050 !important;
    border-left: none !important;
  }

  .nav-item-has-submenu:hover .nav-submenu,
  .nav-submenu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(2px) !important;
  }

  .submenu-inner {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .submenu-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .submenu-group-title {
    font-size: 0.68rem !important;
    color: #D4AF37 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 4px !important;
    display: block !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
    padding-bottom: 4px !important;
    padding-left: 6px !important;
    font-weight: 700 !important;
  }

  .submenu-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    color: #E5E5E5 !important;
    font-size: 0.8rem !important;
    background: transparent !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background 150ms ease, color 150ms ease !important;
    text-decoration: none !important;
  }

  .submenu-link:hover {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #D4AF37 !important;
    border: none !important;
  }

  .submenu-link-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(212, 175, 55, 0.5) !important;
    flex-shrink: 0 !important;
  }

  .submenu-link:hover .submenu-link-dot {
    background: #D4AF37 !important;
  }
}

/* ==========================================================================
   Tablets y Dispositivos Medianos (Máx 991px)
   ========================================================================== */
@media screen and (max-width: 991px) {
  .section-padding {
    padding: 72px 0;
  }

  .ubicacion-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ubicacion-mapa,
  .mapa-iframe-wrapper {
    min-height: 350px;
    height: 350px;
  }

  /* Header y Navegación Móvil (Fase 5) */
  .header-container {
    height: 64px;
  }

  .logo-img {
    height: 36px;
    background: transparent !important;
  }

  .logo-container {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .burger-menu-btn {
    display: flex;
  }

  /* Overlay semitransparente detrás del panel con desenfoque suave */
  .nav-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 1000 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease, visibility 250ms ease;
  }

  .nav-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Ocultamiento absoluto cuando se aplica el atributo hidden en pantallas móviles */
  .nav-menu[hidden],
  .nav-menu-overlay[hidden],
  #nav-menu[hidden],
  #nav-menu-overlay[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ═══ FIX: Ocultar TODO .header-actions (Favoritos, Carrito, Hamburguesa)
     mientras el panel móvil esté abierto.
     CAUSA RAÍZ: .header-actions (z-index:1002) es un hermano posterior a .nav-menu
     (también z-index:1002) en el DOM, por lo que pinta POR ENCIMA del panel,
     haciendo que Favoritos y Carrito aparezcan visualmente dentro del drawer
     y que intercepten los clics destinados al botón X de cierre.
     Al cerrar el menú, body.menu-open se elimina y .header-actions vuelve
     automáticamente a ser visible con todos sus contadores intactos. ═══ */
  body.menu-open .header-actions,
  body.no-scroll .header-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 120ms ease, visibility 120ms ease !important;
  }

  /* Asegurar que la cabecera cuando el menú está abierto mantenga nivel de z-index superior al overlay */
  body.menu-open .header-main,
  body.no-scroll .header-main {
    z-index: 1001 !important;
  }

  /* Panel lateral desplegable sólido desde la derecha (Drawer Premium) */
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: min(86vw, 360px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    background: #171717 !important;
    background-image: none !important;
    border-left: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.5) !important;
    z-index: 1002 !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    transform: translateX(100%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-menu.active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 20px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    background: #1C1B19 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
    flex-shrink: 0 !important;
  }

  .mobile-drawer-brand {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    gap: 3px !important;
  }

  .mobile-drawer-brand-title {
    font-family: var(--font-heading, 'Cormorant Garamond', serif) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.6px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  .mobile-drawer-brand-sub {
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #D4AF37 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Botón X de cierre con área táctil ampliada (50px x 50px) y centrado perfecto */
  .mobile-drawer-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    border-radius: 12px !important;
    background: rgba(35, 35, 35, 0.85) !important;
    border: 1px solid rgba(213, 197, 161, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #FFFEFC !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, color 180ms ease !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    outline: none !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 1005 !important;
  }

  .mobile-drawer-close svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  /* Todos los hijos internos del botón X (líneas SVG, spans) no deben capturar eventos */
  .mobile-drawer-close svg *,
  .mobile-drawer-close span {
    pointer-events: none !important;
  }

  .mobile-drawer-close:hover,
  .mobile-drawer-close:focus-visible {
    background: rgba(50, 50, 50, 0.95) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #D5C5A1 !important;
    outline: 2px solid #B18225 !important;
    outline-offset: 2px !important;
  }

  .mobile-drawer-close:active {
    transform: scale(0.95) !important;
    background: rgba(20, 20, 20, 0.95) !important;
  }

  .nav-list {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px !important;
    gap: 10px !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  .nav-list li {
    width: 100% !important;
    margin: 0 !important;
  }

  .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    background: #222222 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #F4F0EA !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 200ms ease !important;
    position: relative !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .nav-link-icon {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    color: #D4AF37 !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    transition: color 200ms ease, transform 200ms ease !important;
  }

  .nav-link-text {
    flex: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    color: #F4F0EA !important;
    opacity: 1 !important;
  }

  .nav-link-chevron {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    transition: color 200ms ease, transform 200ms ease !important;
  }

  .nav-link:hover {
    background: #2A2A2A !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    color: #FFFFFF !important;
  }

  .nav-link:hover .nav-link-text {
    color: #FFFFFF !important;
  }

  .nav-link:hover .nav-link-chevron {
    color: #FFFFFF !important;
    transform: translateX(3px) !important;
  }

  /* Estado Activo Premium */
  .nav-link.active {
    background: rgba(177, 130, 37, 0.18) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    border-left: 4px solid #D4AF37 !important;
    color: #D4AF37 !important;
    font-weight: 700 !important;
  }

  .nav-link.active .nav-link-text {
    color: #D4AF37 !important;
    font-weight: 700 !important;
  }

  .nav-link.active .nav-link-icon {
    color: #D4AF37 !important;
  }

  .nav-link.active .nav-link-chevron {
    color: #D4AF37 !important;
    transform: translateX(3px) !important;
  }

  /* Submenú Acordeón en Catálogo Móvil */
  .nav-item-has-submenu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .nav-link-accordion {
    cursor: pointer !important;
    user-select: none !important;
  }

  .accordion-chevron {
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .nav-link-accordion.is-open .accordion-chevron,
  .nav-link-accordion[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg) !important;
    color: #D4AF37 !important;
  }

  .nav-submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease, visibility 220ms ease;
    margin-left: 10px;
    margin-top: 6px;
    border-left: 2px solid rgba(212, 175, 55, 0.35);
    border-radius: 0 0 0 6px;
  }

  .nav-submenu.is-open {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
  }

  .submenu-inner {
    padding: 8px 0 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .submenu-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .submenu-group-title {
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-left: 8px;
    margin-bottom: 2px;
    user-select: none;
    display: block;
  }

  .submenu-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    color: #D1D1D1 !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 180ms ease !important;
    box-sizing: border-box !important;
  }

  .submenu-link-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: background 180ms ease, transform 180ms ease;
  }

  .submenu-link-text {
    flex: 1;
    text-align: left;
  }

  .submenu-link:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(212, 175, 55, 0.35) !important;
    color: #FFFFFF !important;
  }

  .submenu-link:hover .submenu-link-dot {
    background: #D4AF37;
    transform: scale(1.3);
  }

  .submenu-link.active {
    background: rgba(177, 130, 37, 0.22) !important;
    border-color: rgba(212, 175, 55, 0.5) !important;
    color: #D4AF37 !important;
    font-weight: 700 !important;
  }

  .submenu-link.active .submenu-link-dot {
    background: #D4AF37;
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.6);
  }

  /* Reorganización de Cuadrícula en Hero */
  .hero-section {
    padding-top: 84px;
    min-height: auto;
    padding-bottom: 32px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }

  .hero-content {
    align-items: center;
    gap: 12px;
  }

  .hero-title {
    font-size: 1.85rem;
    line-height: 1.15;
    margin: 0;
  }

  .hero-description {
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 360px;
  }

  .hero-btn-row {
    justify-content: center;
    width: 100%;
    margin-top: 8px; /* 12px gap + 8px margin-top = 20px espacio entre descripción y VER CATÁLOGO */
  }

  .btn-hero-cta {
    width: 100%;
    max-width: 280px;
    min-height: 48px;
    padding: 14px 24px;
    font-size: 0.92rem;
    font-weight: 700;
    justify-content: center;
  }

  .hero-image-wrapper {
    order: -1;
    /* Muestra la imagen arriba en móviles */
  }

  .hero-perfume-img {
    max-height: 240px;
    object-fit: contain;
  }

  /* Transformación del Icono de Hamburguesa a X */
  .burger-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .burger-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .burger-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  /* Oferta Semanal */
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .offer-img-side {
    min-height: 300px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  /* Footer Base Mobile Grid */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==========================================================================
   Celulares Grandes y Smartphones en Vertical (Máx 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
  .logo-img {
    height: 38px;
    max-width: 170px;
  }

  /* Beneficios en Carrusel Horizontal Móvil (Nuestra Garantía Dunes) */
  .benefits-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .benefits-section .section-header {
    margin-bottom: 18px !important;
  }

  .benefits-carousel-wrapper {
    position: relative;
    width: 100%;
  }

  #benefits-carousel.benefits-grid,
  #page-index .benefits-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 14px !important;
    padding: 4px 2px 10px 2px !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #benefits-carousel.benefits-grid::-webkit-scrollbar,
  #page-index .benefits-grid::-webkit-scrollbar {
    display: none;
  }

  #benefits-carousel .benefit-card,
  #page-index .benefits-section .benefit-card {
    flex: 0 0 84% !important;
    max-width: 310px !important;
    scroll-snap-align: start !important;
    padding: 16px 14px !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 12px;
    height: auto !important;
    min-height: 160px;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }

  .benefit-icon-wrapper {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.2rem !important;
    margin-bottom: 2px;
  }

  .benefit-icon-wrapper svg {
    width: 22px !important;
    height: 22px !important;
  }

  .benefit-title {
    font-size: 0.98rem !important;
    margin-bottom: 2px !important;
  }

  .benefit-desc {
    font-size: 0.82rem !important;
    line-height: 1.38 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .benefits-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 6px;
  }

  .benefits-counter {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary, #D4AF37);
    letter-spacing: 0.5px;
  }

  .benefits-dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .benefits-dots .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
  }

  .benefits-dots .dot.active {
    width: 20px;
    border-radius: 4px;
    background-color: var(--color-primary, #D4AF37);
  }

  /* Footer Móvil en Acordeones Compactos */
  .footer-main {
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .footer-col--brand {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-about-text {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .footer-col--accordion {
    gap: 0 !important;
  }

  .footer-accordion-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 4px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18) !important;
    color: var(--color-text-light, #FFFFFF) !important;
    font-family: var(--font-heading, 'Montserrat', sans-serif) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  .footer-accordion-btn:focus-visible {
    outline: 2px solid var(--color-primary, #D4AF37);
    outline-offset: 2px;
  }

  .footer-accordion-icon {
    display: block !important;
    transition: transform 0.25s ease, color 0.25s ease;
    color: rgba(255, 255, 255, 0.6);
  }

  .footer-accordion-btn[aria-expanded="true"] {
    color: var(--color-primary, #D4AF37) !important;
    border-bottom-color: rgba(212, 175, 55, 0.4) !important;
  }

  .footer-accordion-btn[aria-expanded="true"] .footer-accordion-icon {
    transform: rotate(180deg);
    color: var(--color-primary, #D4AF37);
  }

  .footer-accordion-content {
    display: none;
    padding: 12px 6px 14px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .footer-accordion-content.active {
    display: block !important;
    animation: fadeInAccordion 0.22s ease forwards;
  }

  @keyframes fadeInAccordion {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .footer-disclaimer {
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    line-height: 1.38 !important;
    margin-top: 14px !important;
  }

  .footer-bottom {
    padding-top: 14px !important;
    gap: 6px !important;
    text-align: center;
    justify-content: center !important;
  }

  .container {
    padding: 0 20px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  #page-producto main.section-padding {
    padding-top: 76px !important;
    padding-bottom: 32px !important;
  }

  #page-carrito main.section-padding,
  #page-favoritos main.section-padding {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  #page-catalogo .section-header,
  #page-producto .section-header {
    margin-bottom: 20px !important;
  }

  #page-carrito .section-header {
    margin-bottom: 14px !important;
    gap: 4px !important;
  }

  #page-carrito .section-subtitle {
    font-size: 0.72rem !important;
    letter-spacing: 2px !important;
    margin-bottom: 0 !important;
  }

  #page-carrito .section-title {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  #page-carrito .section-header p {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    max-width: 480px !important;
  }

  /* Cuadrícula de Categorías a 2 columnas compacta */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .category-card {
    height: 160px !important;
    border-radius: 12px !important;
  }

  .category-overlay {
    padding: 12px !important;
  }

  .category-name {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }

  .category-desc {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .category-btn {
    padding: 4px 10px !important;
    font-size: 0.64rem !important;
    gap: 4px !important;
  }

  /* Cuadrícula de Productos a 2 columnas */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .product-image-container {
    height: 200px;
    padding: 12px;
  }

  .product-info {
    padding: 12px;
  }

  .product-brand {
    font-size: 0.65rem;
    margin-bottom: 4px;
  }

  .product-title {
    font-size: 0.9rem;
  }

  .product-volume {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  .price-current {
    font-size: 1.05rem;
  }

  .price-old {
    font-size: 0.8rem;
  }

  /* Botones en móviles */
  .btn {
    padding: 10px 20px;
    font-size: 0.8rem;
  }

  .product-card-footer .btn {
    padding: 10px;
    font-size: 0.75rem;
  }

  /* --- Carrito de Compras en Móvil (Fase 10) --- */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .cart-items-column,
  .cart-summary-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Rediseño del Carrito en Celular (Formato Horizontal Compacto & Estructura Limpia) */
  .cart-table-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .cart-table, 
  .cart-table thead, 
  .cart-table tbody, 
  .cart-table th, 
  .cart-table td, 
  .cart-table tr { 
    display: block !important; 
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  .cart-table thead {
    display: none !important;
  }
  
  #cart-table-container .cart-table tr,
  .cart-table tr {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-areas:
      "image info"
      "qty subtotal" !important;
    background-color: var(--surface-card, #FFFEFC) !important;
    border: var(--border-card, 1px solid var(--catalog-gold-border, #E7D3A5)) !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
    gap: 8px 12px !important;
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(31, 24, 12, 0.05)) !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }
  
  #cart-table-container .cart-table td,
  .cart-table td {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  
  #cart-table-container .cart-td-product,
  .cart-td-product {
    display: contents !important;
  }
  
  #cart-table-container .cart-item-img,
  .cart-item-img {
    grid-area: image !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
    background: radial-gradient(circle at center, rgba(196, 154, 62, 0.12), transparent 68%), #fffdf8 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  
  #cart-table-container .cart-item-meta,
  .cart-item-meta {
    grid-area: info !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 38px !important;
    box-sizing: border-box !important;
  }

  #cart-table-container .cart-item-brand,
  .cart-item-brand {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--catalog-gold, #B18225) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
  
  #cart-table-container .cart-item-title,
  .cart-item-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--catalog-text, #171717) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  #cart-table-container .cart-item-volume,
  .cart-item-volume {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    color: var(--catalog-text-secondary, #6F6F6F) !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }

  #cart-table-container .cart-td-price,
  .cart-td-price {
    display: none !important;
  }

  #page-carrito #cart-table-container .cart-td-remove,
  #page-carrito .cart-td-remove,
  #cart-table-container .cart-td-remove,
  .cart-td-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 5 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #page-carrito #cart-table-container .btn-remove-item,
  #page-carrito .btn-remove-item,
  #cart-table-container .btn-remove-item,
  .btn-remove-item {
    font-size: 1.1rem !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: #DC3545 !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* Fila inferior: Cantidad (abajo izquierda) y Subtotal (abajo derecha) */
  #cart-table-container .cart-td-qty,
  .cart-td-qty {
    grid-area: qty !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-top: 1px solid #F0E6D2 !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  
  #cart-table-container .cart-td-qty::before,
  .cart-td-qty::before {
    display: none !important;
  }
  
  #cart-table-container .cart-td-subtotal,
  .cart-td-subtotal {
    grid-area: subtotal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--catalog-text, #171717) !important;
    border-top: 1px solid #F0E6D2 !important;
    padding-top: 8px !important;
    margin-top: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  
  #cart-table-container .cart-td-subtotal::before,
  .cart-td-subtotal::before {
    content: "Subtotal: " !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--catalog-text-secondary, #6F6F6F) !important;
    margin-right: 4px !important;
  }
  
  .qty-picker.compact {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 92px !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    background-color: #F8F6F0 !important;
    border: 1px solid #E5D8B8 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .qty-picker.compact .qty-btn {
    width: 30px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #171717 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  .qty-picker.compact .qty-btn:first-child {
    border-right: 1px solid #E5D8B8 !important;
  }

  .qty-picker.compact .qty-btn:last-child {
    border-left: 1px solid #E5D8B8 !important;
  }

  .qty-picker.compact .qty-input-cart {
    width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 32px !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    color: #171717 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
  }

  .summary-box {
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .summary-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .summary-row-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: var(--color-text-secondary, #6F6F6F) !important;
  }

  .summary-row-value {
    flex: 0 0 auto !important;
    max-width: 60% !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: var(--color-text-dark, #171717) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  
  .cart-actions-row {
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }
  
  .cart-actions-row .btn {
    width: 100%;
    justify-content: center;
  }
  
  #page-carrito .zone-selector-group,
  .zone-selector-group {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  #page-carrito .summary-box,
  .summary-box {
    padding: 20px !important;
  }
}

/* ==========================================================================
   Celulares Pequeños (Máx 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
  /* Ajustes generales de tamaño */
  html {
    font-size: 14px;
  }

  .hero-title {
    font-size: 1.7rem;
    line-height: 1.15;
  }

  .hero-description {
    font-size: 0.88rem;
    line-height: 1.42;
  }

  .hero-perfume-img {
    max-height: 210px;
  }

  /* Categorías en 2 columnas compactas */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ==========================================================================
     COMPACTAR ESPACIO SUPERIOR DE DETALLE DE PRODUCTO EN MÓVIL
     ========================================================================== */
  #page-producto main.section-padding,
  #page-producto main.container {
    padding-top: 24px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #page-producto #product-detail-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* ==========================================================================
     COMPACTACIÓN Y ELIMINACIÓN DE ESPACIOS INTERNOS DEL CHECKOUT EN CELULAR (FASE U8.3)
     ========================================================================== */
  #page-carrito main.section-padding {
    padding-top: 40px !important;
    padding-bottom: 24px !important;
    padding-inline: 14px !important;
  }

  #page-carrito .cart-layout {
    gap: 16px !important;
  }

  #page-carrito .cart-summary-column,
  #page-carrito .summary-box,
  #page-carrito #customer-form,
  #page-carrito .delivery-section,
  #page-carrito #block-delivery-options,
  #page-carrito #block-agencia,
  #page-carrito #block-recojo-local,
  #page-carrito #block-total-pagar {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
  }

  #page-carrito .summary-box {
    padding: 16px 14px !important;
    margin-bottom: 18px !important;
    border-radius: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-content: start !important;
  }

  #page-carrito .summary-box-title {
    font-size: 1.12rem !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    padding-bottom: 10px !important;
    line-height: 1.25 !important;
  }

  #page-carrito .summary-box h2,
  #page-carrito .summary-box h3,
  #page-carrito .summary-title {
    font-size: 1.12rem !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    line-height: 1.25 !important;
  }

  #page-carrito .summary-details {
    gap: 0 !important;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #page-carrito .coupon-section {
    margin-top: 10px !important;
    padding-top: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-carrito .coupon-entry-row {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
  }

  #page-carrito .coupon-input {
    height: 40px !important;
    font-size: 0.84rem !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  #page-carrito .btn-coupon-apply {
    height: 40px !important;
    padding: 0 14px !important;
    min-width: 120px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
  }

  #page-carrito .coupon-applied-state {
    padding: 8px 10px !important;
    margin-top: 6px !important;
    border-radius: 8px !important;
  }

  #page-carrito .summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-bottom: 1px solid rgba(231, 211, 165, 0.35) !important;
    font-size: 0.88rem !important;
  }

  #page-carrito .summary-details .summary-row:last-child {
    border-bottom: none !important;
  }

  #page-carrito .summary-row-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    color: var(--catalog-text-secondary, #6F6F6F) !important;
    margin: 0 !important;
  }

  #page-carrito .summary-row-value {
    flex: 0 0 auto !important;
    max-width: 62% !important;
    text-align: right !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--catalog-text, #171717) !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #page-carrito .summary-total-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 6px !important;
    border-top: 2px solid var(--color-primary-dark, #8E671D) !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #page-carrito .summary-total-row span:first-child {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--catalog-text, #171717) !important;
  }

  #page-carrito .summary-total-price {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: var(--color-primary-dark, #8E671D) !important;
  }

  #page-carrito .checkout-form {
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #page-carrito .checkout-warning-box {
    margin-bottom: 14px !important;
  }

  #page-carrito .form-section-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  #page-carrito .delivery-options-grid {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  #page-carrito .delivery-option-card {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    height: auto !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  #page-carrito .delivery-option-card input[type="radio"] {
    grid-column: 1 !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  #page-carrito .delivery-option-icon {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    color: var(--catalog-gold, #B18225) !important;
    flex-shrink: 0 !important;
  }

  #page-carrito .delivery-option-meta {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  #page-carrito .delivery-option-title {
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  #page-carrito .delivery-option-desc {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
  }

  #page-carrito .delivery-option-badge {
    grid-column: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    padding: 2px 7px !important;
  }

  #page-carrito .zone-selector-group {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #page-carrito .zone-option-btn {
    padding: 9px 11px !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  #page-carrito #block-agencia,
  #page-carrito #block-recojo-local {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 8px !important;
  }

  #page-carrito .agencia-conditions-wrapper {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  #page-carrito .agencia-condition-row {
    padding: 8px 10px !important;
  }

  #page-carrito #agencia-free-info {
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
  }

  #page-carrito #customer-form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #page-carrito .form-group {
    margin-bottom: 10px !important;
    gap: 3px !important;
  }

  #page-carrito label {
    font-size: 0.8rem !important;
    margin-bottom: 2px !important;
  }

  #page-carrito input[type="text"],
  #page-carrito input[type="tel"] {
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 0.86rem !important;
    border-radius: 8px !important;
  }

  #page-carrito #block-total-pagar {
    padding: 12px 14px !important;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
  }

  #page-carrito #total-monto-pagar {
    font-size: 1.45rem !important;
  }

  #page-carrito .btn-checkout {
    min-height: 46px !important;
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    border-radius: 8px !important;
  }

  #page-carrito .checkout-note,
  #page-carrito .footer-disclaimer,
  #page-carrito .cart-info-note {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  /* ==========================================================================
     REDISEÑO ULTRA COMPACTO DEL CATÁLOGO EN MÓVIL (PRODUCTOS MÁS ARRIBA)
     ========================================================================== */
  #page-catalogo main.section-padding {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  #page-catalogo .catalog-header,
  #page-catalogo .section-header {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    gap: 2px !important;
  }

  #page-catalogo .catalog-header .section-subtitle,
  #page-catalogo .section-subtitle,
  #page-catalogo #catalogo-subtitulo {
    display: none !important;
  }

  #page-catalogo .catalog-header .section-title,
  #page-catalogo .section-title,
  #page-catalogo #catalogo-titulo {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }

  #page-catalogo .section-title::after {
    width: 32px !important;
    height: 2px !important;
    bottom: 0 !important;
    margin: 0 auto !important;
  }

  #page-catalogo #catalogo-descripcion {
    font-size: 0.8rem !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
    max-width: 95% !important;
    padding: 0 !important;
  }

  /* Tarjeta de Filtros Móvil Ultra Compacta */
  #page-catalogo .catalog-filters-bar {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 8px !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    background-color: var(--surface-card, #FFFEFC) !important;
    border: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-shadow: 0 2px 6px rgba(31, 24, 12, 0.04) !important;
  }

  /* Buscador Full Width y Altura Compacta */
  #page-catalogo .filter-search-box {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-search-box input {
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 10px 4px 32px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    border-color: var(--catalog-gold-border, #E7D3A5) !important;
    box-sizing: border-box !important;
  }

  #page-catalogo .filter-search-box .search-icon {
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  #page-catalogo .filter-search-box .search-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Categorías en 2 Filas en Móvil sin Desplazamiento Horizontal */
  #page-catalogo .filter-categories-group {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-categories-group::-webkit-scrollbar {
    display: none !important;
  }

  #page-catalogo .filter-category-btn {
    width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 2px 2px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-category-btn[data-categoria="todos"] {
    grid-column: span 2 !important;
  }

  #page-catalogo .filter-category-btn[data-categoria="arabe"] {
    grid-column: span 2 !important;
  }

  #page-catalogo .filter-category-btn[data-categoria="disenador"] {
    grid-column: span 2 !important;
  }

  #page-catalogo .filter-category-btn[data-categoria="nicho"] {
    grid-column: span 3 !important;
  }

  #page-catalogo .filter-category-btn[data-categoria="decants"] {
    grid-column: span 3 !important;
  }

  #page-catalogo .filter-category-btn.active {
    background: var(--color-gold-gradient, linear-gradient(135deg, #C49A3E 0%, #8E671D 100%)) !important;
    color: #FFFFFF !important;
    border-color: #8E671D !important;
  }

  /* Filtro por Género en 1 Fila (4 Botones Distribuidos Uniformemente) */
  #page-catalogo .filter-gender-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  #page-catalogo .filter-gender-label {
    font-size: 0.68rem !important;
    color: var(--color-primary-dark, #9E721D) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 2px !important;
  }

  #page-catalogo .filter-gender-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-gender-group::-webkit-scrollbar {
    display: none !important;
  }

  #page-catalogo .filter-gender-btn {
    width: 100% !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 2px 2px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background-color: var(--color-bg-light, #FFFDF8) !important;
  }

  #page-catalogo .filter-gender-btn.active {
    background: var(--color-gold-gradient, linear-gradient(135deg, #C49A3E 0%, #8E671D 100%)) !important;
    color: #FFFFFF !important;
    border-color: #8E671D !important;
  }

  /* Ordenación y Disponibilidad en 1 Sola Fila */
  #page-catalogo .filter-controls-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  #page-catalogo .filter-sort-box {
    width: 100% !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-sort-box select {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
    font-size: 0.76rem !important;
    border-radius: 6px !important;
    border-color: var(--catalog-gold-border, #E7D3A5) !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
  }

  #page-catalogo .filter-available-box {
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  #page-catalogo .checkbox-container {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: var(--catalog-text, #171717) !important;
    white-space: nowrap !important;
    padding-left: 22px !important;
    margin: 0 !important;
  }

  #page-catalogo .catalog-results-counter {
    margin-top: 14px !important;
    margin-bottom: 10px !important;
    font-size: 0.8rem !important;
  }

  /* Rediseño del Catálogo en Móvil (Formato Horizontal Compacto & Estructura Equilibrada) */
  #catalogo-productos-grid,
  .products-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-items: start !important;
  }

  #catalogo-productos-grid .product-card,
  .products-grid .product-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 120px !important;
    grid-template-areas:
      "info image"
      "actions actions" !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 12px 14px !important;
    align-items: start !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    background-color: var(--catalog-card-background, #FFFEFC) !important;
    border: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-shadow: 0 4px 12px rgba(31, 24, 12, 0.06) !important;
    transition: var(--transition-base) !important;
    position: relative !important;
  }

  /* Botones de Ubicación Móviles */
  .btn-location-maps,
  .btn-location-wa {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    font-size: 0.85rem !important;
    gap: 8px !important;
  }

  #catalogo-productos-grid .product-card.out-of-stock,
  .products-grid .product-card.out-of-stock,
  #catalogo-productos-grid .product-card.is-soldout,
  .products-grid .product-card.is-soldout {
    background: linear-gradient(180deg, rgba(255, 244, 244, 0.95), rgba(255, 250, 250, 0.98)) !important;
    border: 1px solid #e6b8b8 !important;
    border-top: 4px solid #c96b6b !important;
    box-shadow: 0 4px 14px rgba(120, 40, 40, 0.08) !important;
  }

  #catalogo-productos-grid .product-card.out-of-stock .product-image-container,
  .products-grid .product-card.out-of-stock .product-image-container,
  #catalogo-productos-grid .product-card.is-soldout .product-image-container {
    background: radial-gradient(circle at center, rgba(190, 70, 70, 0.10), transparent 65%), #fff8f8 !important;
  }

  #catalogo-productos-grid .product-image-container,
  .products-grid .product-image-container {
    grid-area: image !important;
    position: relative !important;
    height: 125px !important;
    width: 120px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: radial-gradient(circle at center, rgba(196, 154, 62, 0.12), transparent 68%), #fffdf8 !important;
    margin: 0 !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #catalogo-productos-grid .product-image,
  .products-grid .product-image,
  #catalogo-productos-grid .product-img,
  .products-grid .product-img {
    height: 100% !important;
    width: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
  }

  /* Ocultar insignia sobre imagen en celular */
  #catalogo-productos-grid .product-category-badge,
  .products-grid .product-category-badge {
    display: none !important;
  }

  /* Etiqueta de categoría móvil dentro de info (ÁRABE, DISEÑADOR, NICHO, DECANT) */
  #catalogo-productos-grid .product-category-mobile,
  .products-grid .product-category-mobile {
    display: inline-block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--catalog-gold, #B18225) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }

  #catalogo-productos-grid .product-tag.promo-tag,
  .products-grid .product-tag.promo-tag {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 9px !important;
    padding: 3px 6px !important;
    line-height: 1 !important;
    z-index: 3 !important;
  }

  #catalogo-productos-grid .product-tag.out-tag,
  .products-grid .product-tag.out-tag {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    font-size: 9px !important;
    padding: 3px 6px !important;
    line-height: 1 !important;
    z-index: 3 !important;
    background-color: #3A3D42 !important;
    color: #FFFFFF !important;
    border: 1px solid #525860 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  }

  #catalogo-productos-grid .product-actions-overlay,
  .products-grid .product-actions-overlay {
    display: none !important;
  }

  #catalogo-productos-grid .product-info,
  .products-grid .product-info {
    grid-area: info !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  #catalogo-productos-grid .product-brand,
  .products-grid .product-brand {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--catalog-gold, #B18225) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  #catalogo-productos-grid .product-title,
  .products-grid .product-title,
  #catalogo-productos-grid .product-title-link,
  .products-grid .product-title-link {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    color: var(--catalog-text, #171717) !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  #catalogo-productos-grid .product-volume,
  .products-grid .product-volume {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: var(--catalog-text-secondary, #6F6F6F) !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }

  #catalogo-productos-grid .product-stock-row,
  .products-grid .product-stock-row {
    margin: 2px 0 0 !important;
  }

  #catalogo-productos-grid .product-stock-status,
  .products-grid .product-stock-status {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  #catalogo-productos-grid .product-price-row,
  .products-grid .product-price-row {
    margin-top: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #catalogo-productos-grid .prices,
  .products-grid .prices {
    display: flex !important;
    align-items: center !important;
    gap: 6px 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #catalogo-productos-grid .price-current,
  .products-grid .price-current {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--catalog-text, #171717) !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #catalogo-productos-grid .price-old,
  .products-grid .price-old {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: #777777 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
  }

  #catalogo-productos-grid .discount-badge,
  .products-grid .discount-badge {
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 12px !important;
  }

  #catalogo-productos-grid .product-card-footer,
  .products-grid .product-card-footer {
    grid-area: actions !important;
    display: grid !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #catalogo-productos-grid .product-card-footer .card-buttons-flex,
  .products-grid .product-card-footer .card-buttons-flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #catalogo-productos-grid .btn-details-compact,
  .products-grid .btn-details-compact,
  #catalogo-productos-grid .product-card-footer .btn,
  .products-grid .product-card-footer .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding-inline: 10px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.5px !important;
    position: static !important;
    margin: 0 !important;
    transform: none !important;
  }

  #catalogo-productos-grid .product-card-footer .btn-query-wa,
  .products-grid .product-card-footer .btn-query-wa,
  .btn-query-wa {
    background-color: #4A2828 !important;
    border: 1px solid #8C4444 !important;
    color: #FFFFFF !important;
  }

  #catalogo-productos-grid .btn-details-compact .btn-icon-svg,
  .products-grid .btn-details-compact .btn-icon-svg,
  #catalogo-productos-grid .product-card-footer .btn-icon-svg,
  .products-grid .product-card-footer .btn-icon-svg {
    position: static !important;
    margin: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Ajustes específicos para 360px y 320px */
  @media screen and (max-width: 360px) {
    #catalogo-productos-grid .product-card,
    .products-grid .product-card {
      grid-template-columns: minmax(0, 1fr) 105px !important;
      padding: 10px 12px !important;
      gap: 8px 10px !important;
    }

    #catalogo-productos-grid .product-image-container,
    .products-grid .product-image-container {
      height: 110px !important;
      width: 105px !important;
    }

    #catalogo-productos-grid .product-title,
    .products-grid .product-title,
    #catalogo-productos-grid .product-title-link,
    .products-grid .product-title-link {
      font-size: 17px !important;
    }

    #catalogo-productos-grid .price-current,
    .products-grid .price-current {
      font-size: 18px !important;
    }

    #catalogo-productos-grid .product-card-footer .btn,
    .products-grid .product-card-footer .btn {
      padding-inline: 8px !important;
      font-size: 10.5px !important;
      gap: 4px !important;
    }
  }

/* ==========================================================================
   RESTAURACIÓN Y AISLAMIENTO DE ESCRITORIO Y LAPTOP (Min-width 769px)
   Garantiza cuadrícula vertical de 3 y 4 columnas y filtros horizontales
   ========================================================================== */
@media screen and (min-width: 769px) {
  #page-catalogo main.section-padding {
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }

  #page-catalogo .section-header {
    margin-bottom: 28px !important;
  }

  #page-catalogo .section-subtitle,
  #page-catalogo #catalogo-subtitulo {
    display: block !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--color-primary-dark) !important;
    font-weight: 700 !important;
  }

  #page-catalogo .section-title,
  #page-catalogo #catalogo-titulo {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
    color: var(--color-text-dark) !important;
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }

  #page-catalogo .section-title::after {
    width: 60px !important;
    height: 2px !important;
    bottom: 0 !important;
    margin: 0 auto !important;
  }

  #page-catalogo #catalogo-descripcion {
    font-size: 1rem !important;
    margin-top: 10px !important;
    line-height: 1.5 !important;
    max-width: 600px !important;
    color: var(--color-text-muted) !important;
    display: block !important;
    -webkit-line-clamp: none !important;
  }

  /* Panel de Filtros en Escritorio */
  #page-catalogo .catalog-filters-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    gap: 16px !important;
    border-radius: var(--border-radius-md, 12px) !important;
    margin-bottom: 30px !important;
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,0.05)) !important;
  }

  #page-catalogo .filter-search-box {
    width: auto !important;
    flex: 0 0 300px !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-search-box input {
    height: 42px !important;
    min-height: 42px !important;
    padding: 10px 16px 10px 42px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
  }

  #page-catalogo .filter-categories-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #page-catalogo .filter-category-btn {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 8px !important;
    grid-column: auto !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-gender-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-gender-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-gender-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  #page-catalogo .filter-gender-btn {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
  }

  #page-catalogo .filter-controls-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    width: auto !important;
    margin: 0 !important;
  }

  #page-catalogo .filter-sort-box select {
    width: 170px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }

  #page-catalogo .checkbox-container {
    font-size: 0.85rem !important;
    padding-left: 28px !important;
  }

  #page-catalogo .catalog-results-counter {
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    font-size: 0.95rem !important;
  }

  /* Cuadrícula Vertical de Productos en Escritorio */
  #catalogo-productos-grid,
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #catalogo-productos-grid .product-card,
  .products-grid .product-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(31, 24, 12, 0.08) !important;
  }

  #catalogo-productos-grid .product-image-container,
  .products-grid .product-image-container {
    width: 100% !important;
    height: 270px !important;
    min-height: 270px !important;
    position: relative !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px 18px 0 0 !important;
  }

  #catalogo-productos-grid .product-category-badge,
  .products-grid .product-category-badge {
    display: block !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
  }

  #catalogo-productos-grid .product-category-mobile,
  .products-grid .product-category-mobile {
    display: none !important;
  }

  #catalogo-productos-grid .product-info,
  .products-grid .product-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 18px !important;
    flex: 1 1 auto !important;
  }

  #catalogo-productos-grid .product-card-footer,
  .products-grid .product-card-footer {
    margin-top: auto !important;
    padding: 0 18px 18px 18px !important;
    width: 100% !important;
  }

  #catalogo-productos-grid .product-card-footer .card-buttons-flex,
  .products-grid .product-card-footer .card-buttons-flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #catalogo-productos-grid .product-card-footer .btn,
  .products-grid .product-card-footer .btn {
    flex: 1 !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
  }
}

@media screen and (min-width: 1400px) {
  #catalogo-productos-grid,
  .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

/* ==========================================================================
   FASE M11 — ESTILOS SKELETON Y ANIMACIÓN SHIMMER DE CARGA (AISLADOS)
   ========================================================================== */
@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-pulse {
  background: linear-gradient(90deg, #F6F1E7 25%, #E9DFC9 50%, #F6F1E7 75%) !important;
  background-size: 200% 100% !important;
  animation: skeletonShimmer 1.5s linear infinite !important;
  border-radius: 6px !important;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-pulse {
    animation: none !important;
    background: #EDE4D3 !important;
  }
}

#page-catalogo .product-card-skeleton {
  box-sizing: border-box !important;
}

@media screen and (max-width: 768px) {
  #page-catalogo .product-card-skeleton {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 105px !important;
    grid-template-areas:
      "info image"
      "actions actions" !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background-color: var(--surface-card, #FFFEFC) !important;
    border: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-shadow: 0 4px 12px rgba(31, 24, 12, 0.06) !important;
  }
}

@media screen and (min-width: 769px) {
  #page-catalogo .product-card-skeleton {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 18px !important;
    background-color: var(--surface-card, #FFFEFC) !important;
    border: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(31, 24, 12, 0.08) !important;
  }
}

/* ==========================================================================
   FASE M12 — BARRA MÓVIL DE COMPRA RÁPIDA EN EL DETALLE (AISLADA)
   ========================================================================== */
#page-producto .mobile-purchase-bar {
  display: none;
}

@media screen and (max-width: 768px) {
  #page-producto .mobile-purchase-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 72px !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background-color: var(--surface-card, #FFFEFC) !important;
    border-top: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-shadow: 0 -4px 16px rgba(31, 24, 12, 0.12) !important;
    z-index: 990 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease, visibility 220ms ease !important;
    pointer-events: none !important;
  }

  #page-producto .mobile-purchase-bar.is-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #page-producto .mobile-purchase-bar__info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  #page-producto .mobile-purchase-bar__variant {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #6F6F6F !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #page-producto .mobile-purchase-bar__price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-primary-dark, #171717) !important;
    line-height: 1.2 !important;
  }

  #page-producto .mobile-purchase-bar__action {
    height: 44px !important;
    padding: 0 22px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-button, 10px) !important;
  }

  /* Elevación del WhatsApp Flotante cuando la barra móvil está visible */
  #page-producto body.has-mobile-purchase-bar-visible #whatsapp-floating-btn,
  #page-producto body.has-mobile-purchase-bar-visible .wa-float-btn {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    transition: bottom 220ms ease !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-producto .mobile-purchase-bar {
    transition: opacity 180ms ease, visibility 180ms ease !important;
    transform: none !important;
  }
}

@media screen and (min-width: 769px) {
  #page-producto .mobile-purchase-bar {
    display: none !important;
  }
}

/* ==========================================================================
   FASE M13 — BARRA MÓVIL FIJA DE TOTAL Y CONFIRMACIÓN EN CARRITO (AISLADA)
   ========================================================================== */
#page-carrito .mobile-checkout-bar,
.mobile-checkout-bar {
  display: none !important;
}

@media screen and (max-width: 767px) {
  #page-carrito .mobile-checkout-bar,
  .mobile-checkout-bar {
    display: none !important;
  }

  #page-carrito .mobile-checkout-bar:not([hidden]).is-visible,
  .mobile-checkout-bar:not([hidden]).is-visible {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 74px !important;
    box-sizing: border-box !important;
    padding: 10px 16px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background-color: var(--surface-card, #FFFEFC) !important;
    border-top: 1px solid var(--catalog-gold-border, #E7D3A5) !important;
    box-shadow: 0 -4px 16px rgba(31, 24, 12, 0.12) !important;
    z-index: 990 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease, visibility 220ms ease !important;
  }

  .mobile-checkout-bar__total {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .mobile-checkout-bar__label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #6F6F6F !important;
    text-transform: uppercase !important;
  }

  .mobile-checkout-bar__amount {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--color-primary-dark, #171717) !important;
    line-height: 1.2 !important;
  }

  .mobile-checkout-bar__button {
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-button, 10px) !important;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
  }

  /* Estado Incompleto (Continuar Pedido) */
  .mobile-checkout-bar__button.is-incomplete {
    background-color: var(--color-primary, #B18225) !important;
    color: #FFFFFF !important;
    border: none !important;
  }

  /* Estado Completo (Confirmar por WhatsApp) */
  .mobile-checkout-bar__button.is-complete {
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;
  }

  /* Elevación del WhatsApp flotante cuando la barra del carrito está visible */
  body.has-mobile-checkout-bar-visible #whatsapp-floating-btn,
  body.has-mobile-checkout-bar-visible .wa-float-btn {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    transition: bottom 220ms ease !important;
  }

  /* Espacio inferior adicional en el carrito móvil cuando la barra está activa */
  body.has-mobile-checkout-bar-visible main.section-padding {
    padding-bottom: 90px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-checkout-bar {
    transition: opacity 180ms ease, visibility 180ms ease !important;
    transform: none !important;
  }
}

@media screen and (min-width: 768px) {
  .mobile-checkout-bar,
  .mobile-checkout-bar.is-visible {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.has-mobile-checkout-bar-visible main.section-padding {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   FASE MEJORA UX — RESALTADO MUCHO MÁS CLARO DEL PASO FALTANTE EN CHECKOUT
   ========================================================================== */
@keyframes stepPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(177, 130, 37, 0.35), 0 4px 16px rgba(177, 130, 37, 0.18);
    border-color: #B18225;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(177, 130, 37, 0.16), 0 8px 24px rgba(177, 130, 37, 0.3);
    border-color: #D4AF37;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(177, 130, 37, 0.35), 0 4px 16px rgba(177, 130, 37, 0.18);
    border-color: #B18225;
  }
}

.checkout-delivery-step {
  padding: 12px;
  border-radius: var(--radius-control, 12px);
  margin-bottom: 20px;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}

.is-step-required {
  border: 2px solid var(--catalog-gold, #B18225) !important;
  background-color: #FFFDF9 !important;
  border-radius: var(--radius-control, 12px) !important;
  box-shadow: 0 4px 20px rgba(177, 130, 37, 0.2) !important;
  padding: 14px !important;
  animation: stepPulseGlow 1.8s ease-in-out 2 !important;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease !important;
}

.checkout-validation-alert,
.step-alert-banner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #FFF8F6 0%, #FDEEE9 100%) !important;
  border: 1px solid #F3C4B6 !important;
  border-left: 4px solid #C0392B !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.08) !important;
  animation: fadeInDown 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.checkout-validation-alert__icon,
.step-alert-banner__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background-color: rgba(192, 57, 43, 0.14) !important;
  color: #C0392B !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.checkout-validation-alert__text,
.step-alert-banner__text {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #8A1C14 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

@media (prefers-reduced-motion: reduce) {
  .is-step-required {
    animation: none !important;
  }
  .step-alert-banner {
    animation: none !important;
  }
}

.checkout-step-transition {
  transition: opacity 220ms ease, transform 220ms ease;
}

.recojo-alert-card .btn-recojo-maps:hover {
  background-color: var(--color-primary-dark, #8E671D) !important;
  border-color: var(--color-primary-dark, #8E671D) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(142, 103, 29, 0.25);
}

  /* Tarjetas de Beneficios */
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .benefit-card {
    padding: 16px;
  }

  /* Oferta Semanal */
  .offer-content-side {
    padding: 24px;
  }

  .offer-price-new {
    font-size: 1.8rem;
  }

  /* Footer a una columna */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Botón flotante */
  .wa-float-btn {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }

  .wa-float-btn .icon-whatsapp,
  .wa-float-btn .whatsapp-icon-svg,
  .wa-float-btn svg {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  /* Notificaciones emergentes */
  #toast-container {
    left: 20px;
    right: 20px;
    top: 80px;
  }

  .toast-premium {
    min-width: 0;
    width: 100%;
    padding: 10px 16px;
  }
}

/* ==========================================================================
   Página de Detalle del Producto - Ajustes Responsivos Móviles (Fase U4)
   Garantiza estructura de 1 sola columna sin desbordamientos ni cortes en <= 767px
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* 1. Contenedor principal en móvil */
  #page-producto main.container,
  #page-producto #product-detail-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    padding-inline: 14px !important;
    margin-top: 0 !important;
    padding-bottom: 24px !important;
  }

  /* 2. Tarjeta de detalle (1 sola columna limpia) */
  #page-producto .product-detail-layout,
  .product-detail-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 16px !important;
    gap: 16px !important;
    border-radius: 16px !important;
    background-color: var(--color-bg-card-light, #FFFEFC) !important;
    border: 1px solid var(--color-border, #E7D3A5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    margin: 0 auto !important;
  }

  /* 3. Lado de la imagen compacta */
  #page-producto .detail-image-side,
  .detail-image-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 220px !important;
    max-height: 220px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #f8f6f0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
  }

  #page-producto .detail-product-img,
  .detail-product-img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: contain !important;
    padding: 2px !important;
    min-height: 0 !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08)) !important;
    transform: none !important;
    transition: none !important;
  }

  /* 4. Bloque de información compacta */
  #page-producto .detail-info-side,
  .detail-info-side {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 2px 0 0 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .detail-brand {
    font-size: 0.78rem !important;
    letter-spacing: 1.2px !important;
    margin-bottom: 2px !important;
    word-break: break-word !important;
  }

  .detail-title {
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .detail-volume {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
  }

  .detail-price-box {
    margin-bottom: 4px !important;
  }

  .detail-price {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
  }

  .detail-stock-badge {
    margin-bottom: 6px !important;
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
  }

  .detail-divider {
    height: 1px !important;
    margin: 8px 0 !important;
    background-color: var(--color-border, #E5E5E5) !important;
  }

  /* Acordeón Móvil de Descripción de Fragancia */
  #page-producto .detail-description-accordion,
  .detail-description-accordion {
    width: 100% !important;
    margin-top: 2px !important;
  }

  #page-producto .description-accordion-btn,
  .description-accordion-btn {
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
    color: var(--color-text-dark, #171717) !important;
    font-family: var(--font-heading, 'Montserrat', sans-serif) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
  }

  #page-producto .description-accordion-btn .accordion-chevron-icon,
  .description-accordion-btn .accordion-chevron-icon {
    display: block !important;
    transition: transform 0.25s ease !important;
    color: var(--color-primary-dark, #8E671D) !important;
  }

  #page-producto .description-accordion-btn[aria-expanded="true"] .accordion-chevron-icon,
  .description-accordion-btn[aria-expanded="true"] .accordion-chevron-icon {
    transform: rotate(180deg) !important;
  }

  #page-producto .description-accordion-content,
  .description-accordion-content {
    display: none !important;
    padding: 8px 0 4px 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-secondary, #6F6F6F) !important;
  }

  #page-producto .description-accordion-content.active,
  .description-accordion-content.active {
    display: block !important;
    animation: fadeInDesc 0.2s ease forwards !important;
  }

  @keyframes fadeInDesc {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 5. Selector de Presentaciones (Decants: 3ml, 5ml, 10ml) */
  #page-producto .detail-variant-selector,
  .detail-variant-selector {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
  }

  .variant-selector-title {
    font-size: 0.82rem !important;
    margin-bottom: 6px !important;
  }

  .variant-options-row,
  .presentation-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 6px !important;
  }

  .variant-option-btn,
  .presentation-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    position: relative !important;
  }

  .variant-ml {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }

  .variant-price {
    font-size: 0.85rem !important;
  }

  /* 6. Control de Cantidad compacto y centrado */
  #page-producto .detail-qty-picker-row,
  .detail-qty-picker-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
  }

  .qty-label {
    font-size: 0.85rem !important;
  }

  .qty-picker {
    height: 38px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  .qty-btn {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 1rem !important;
  }

  .qty-picker input {
    width: 44px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0.9rem !important;
  }

  /* 7. Botones de acción inferiores */
  #page-producto .detail-btn-row,
  .detail-btn-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }

  #page-producto .detail-btn-row .btn,
  .detail-btn-row .btn,
  .btn-add-cart-detail,
  .btn-query-detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
  }

  /* 8. Botón flotante de WhatsApp sin obstrucción */
  #page-producto .wa-float-btn,
  .wa-float-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 99 !important;
  }

  #page-producto .wa-float-btn .icon-whatsapp,
  #page-producto .wa-float-btn .whatsapp-icon-svg,
  #page-producto .wa-float-btn svg,
  .wa-float-btn .icon-whatsapp,
  .wa-float-btn .whatsapp-icon-svg,
  .wa-float-btn svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }

  #page-producto footer.footer-main {
    padding-bottom: 70px !important;
  }
}

/* Ajustes adicionales seguros en 390px o menos */
@media screen and (max-width: 390px) {
  #page-producto main.container,
  #page-producto #product-detail-container {
    padding-inline: 8px !important;
  }

  #page-producto .product-detail-layout,
  .product-detail-layout {
    padding: 12px !important;
    gap: 10px !important;
  }

  #page-producto .detail-image-side,
  .detail-image-side {
    max-height: 190px !important;
    height: 190px !important;
  }

  #page-producto .detail-product-img,
  .detail-product-img {
    max-height: 175px !important;
  }

  .detail-title {
    font-size: 1.35rem !important;
  }

  .detail-price {
    font-size: 1.5rem !important;
  }

  .detail-btn-row {
    gap: 8px !important;
  }

  .detail-btn-row .btn,
  .btn-add-cart-detail,
  .btn-query-detail {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
    font-size: 0.84rem !important;
  }
}

/* ==========================================================================
   FASE U7 — Optimización del Ancho Útil en Pantallas Móviles (320px a 480px)
   ========================================================================== */

/* 1. Reglas generales de aprovechamiento de ancho para dispositivos móviles (hasta 480px) */
@media screen and (max-width: 480px) {
  /* Contenedores principales ocupan el 100% del espacio con box-sizing uniforme */
  .container,
  .page-container,
  .section-container,
  .cart-container,
  .product-detail-container,
  .faq-container,
  .references-container,
  #page-catalogo main.section-padding,
  #page-carrito main.section-padding,
  #page-producto main.section-padding,
  #page-producto main.container,
  #page-ayuda main.section-padding,
  main.section-padding {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Eliminación de paddings o márgenes laterales duplicados en contenedores/layouts internos */
  .cart-layout,
  .cart-items-column,
  .cart-summary-column,
  .cart-table-wrapper,
  .product-detail-layout,
  .product-detail-info,
  .faq-category-block,
  .all-references-container,
  .categories-grid,
  .products-grid,
  .checkout-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tarjetas principales ocupan el 100% del ancho útil interno sin salirse ni encogerse */
  .cart-table tr,
  .cart-item-card,
  .summary-box,
  .product-detail-layout,
  .delivery-option-card,
  .cupon-card,
  .product-card,
  .category-card,
  .faq-item,
  .reference-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* 2. Ajuste de margen lateral exacto para celulares pequeños (320px a 390px) */
@media screen and (max-width: 390px) {
  .container,
  .page-container,
  .section-container,
  .cart-container,
  .product-detail-container,
  .faq-container,
  .references-container,
  #page-catalogo main.section-padding,
  #page-carrito main.section-padding,
  #page-producto main.section-padding,
  #page-producto main.container,
  #page-ayuda main.section-padding,
  main.section-padding {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .logo-img {
    max-width: 140px !important;
    height: auto !important;
  }

  #page-carrito .delivery-zone-name {
    font-size: 0.78rem !important;
  }

  #page-carrito .delivery-zone-price {
    font-size: 0.78rem !important;
  }

  #page-carrito .agencia-condition-row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .hero-title {
    font-size: 1.85rem !important;
  }
}

/* 3. Ajuste de margen lateral exacto para celulares medianos y grandes (391px a 480px) */
@media screen and (min-width: 391px) and (max-width: 480px) {
  .container,
  .page-container,
  .section-container,
  .cart-container,
  .product-detail-container,
  .faq-container,
  .references-container,
  #page-catalogo main.section-padding,
  #page-carrito main.section-padding,
  #page-producto main.section-padding,
  #page-producto main.container,
  #page-ayuda main.section-padding,
  main.section-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .logo-img {
    max-width: 160px !important;
  }
}

/* 3. Ajustes para Laptops y Pantallas Anchas (1366px, 1440px, 1920px) */
@media screen and (min-width: 1366px) {
  .container {
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (min-width: 1440px) {
  .container {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

@media screen and (min-width: 1920px) {
  .container {
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .products-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 28px !important;
  }
}

/* Reglas de Escritorio (≥ 769px) - Garantiza layout intacto en desktop */
@media screen and (min-width: 769px) {
  .benefits-mobile-controls {
    display: none !important;
  }

  .footer-accordion-btn {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    cursor: default !important;
    color: inherit !important;
    font: inherit !important;
    text-align: left !important;
    width: 100% !important;
  }

  .footer-accordion-btn span {
    color: var(--color-text-light, #FFFFFF);
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    display: block;
  }

  .footer-accordion-btn span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1.5px;
    background-color: var(--color-primary);
  }

  .footer-accordion-icon {
    display: none !important;
  }

  .footer-accordion-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   REPARACIÓN EXCLUSIVA DE LAPTOP (>= 768px) — ALERTAS DE VALIDACIÓN Y ESPACIADOS
   ========================================================================== */
@media (min-width: 768px) {
  #page-carrito .checkout-validation-alert,
  #page-carrito .step-alert-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #FFF8F6 0%, #FDEEE9 100%) !important;
    border: 1px solid #F3C4B6 !important;
    border-left: 4px solid #C0392B !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 12px rgba(192, 57, 43, 0.08) !important;
  }

  #page-carrito .checkout-validation-alert__icon,
  #page-carrito .step-alert-banner__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background-color: rgba(192, 57, 43, 0.14) !important;
    color: #C0392B !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
  }

  #page-carrito .checkout-validation-alert__text,
  #page-carrito .step-alert-banner__text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #8A1C14 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #page-carrito #seccion-entrega {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.25 !important;
  }

  #page-carrito .seccion-entrega-subtitle {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    line-height: 1.4 !important;
    font-size: 0.85rem !important;
    color: var(--color-text-muted, #666666) !important;
  }

  /* Compactación de Encabezados Internos (Catálogo, Producto y Ayuda) */
  #page-catalogo main.section-padding,
  #page-producto main.section-padding {
    padding-top: 78px !important;
    padding-bottom: 32px !important;
  }

  #page-catalogo main.section-padding,
  #page-favoritos main.section-padding,
  #page-carrito main.section-padding,
  #page-producto main.section-padding {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #page-catalogo .section-header,
  #page-favoritos .section-header,
  #page-carrito .section-header,
  #page-producto .section-header,
  .page-heading {
    margin-bottom: 12px !important;
    gap: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ayuda-hero-section {
    padding-top: 24px !important;
    padding-bottom: 16px !important;
  }

  .ayuda-badge {
    margin-bottom: 6px !important;
  }

  .ayuda-title {
    font-size: 2.1rem !important;
    margin-bottom: 4px !important;
  }

  .ayuda-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }
}