/* ============================================================
   MAVISA — Responsive Styles
   Archivo central para cambios Desktop / Tablet / Mobile
   ============================================================

   BREAKPOINTS:
   ┌─────────────────────────────────────────────────────────┐
   │  Desktop Large    min-width: 1440px                     │
   │  Desktop          min-width: 1025px  (default)          │
   │  Tablet           max-width: 1024px                     │
   │  Mobile Large     max-width:  900px                     │
   │  Mobile           max-width:  768px  ← más usado        │
   │  Mobile Small     max-width:  480px                     │
   │  Mobile XSmall    max-width:  380px                     │
   └─────────────────────────────────────────────────────────┘

   USO:
   - Para cambios SOLO en desktop → usar dentro de @media (min-width: 1025px)
   - Para cambios SOLO en móvil  → usar dentro de @media (max-width: 768px)
   - Para cambios en ambos       → fuera de @media (en style.css)

   IMPORTANTE: NO mover estilos existentes de style.css aquí.
   Este archivo es para NUEVOS cambios organizados.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   DESKTOP LARGE (1440px+)
   Pantallas grandes, monitores 4K
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  /* Agregar estilos desktop large aquí */

}


/* ══════════════════════════════════════════════════════════
   DESKTOP ONLY (1025px+)
   Cambios exclusivos para desktop que no afectan móvil
   ══════════════════════════════════════════════════════════ */
/* Global: ocultar flaticon por defecto, lucide visible y grande */
.category-card-icon .cat-flaticon { display: none !important; }
.category-card-icon .cat-lucide,
.category-card-icon svg {
  display: flex !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* Global: flechas de categorías ocultas por defecto (se muestran solo en mobile) */
.cat-arrow { display: none !important; }

@media (min-width: 769px) {
  .cat-progress-wrap { display: none !important; }
}


/* ══════════════════════════════════════════════════════════
   TABLET (max 1024px)
   iPad, tablets en landscape
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Agregar estilos tablet aquí */

}


/* ══════════════════════════════════════════════════════════
   MOBILE LARGE (max 900px)
   Tablets en portrait, móviles grandes
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Agregar estilos mobile large aquí */

}


/* ══════════════════════════════════════════════════════════
   MOBILE (max 768px)  ← BREAKPOINT PRINCIPAL
   iPhone, Android, móviles estándar
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Grids de productos: 2 columnas en mobile ────────── */
  #featured-grid, #new-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    transform: none !important;
    width: 100% !important;
  }
  #featured-grid .product-card,
  #new-grid .product-card {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  /* También ocultar flechas del carrusel en mobile */
  .h-carousel-arrow { display: none !important; }

  /* ── Categorías mobile: cards con imagen + ícono + nombre ── */
  .categories-section .section-header .section-subtitle { display: none !important; }

  /* Flechas de categorías — visibles en mobile, flotando a los lados del título */
  .cat-scroll-outer { position: relative; }
  .cat-arrow {
    display: flex !important;
    position: absolute;
    top: -56px;
    z-index: 10;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(28,52,97,0.30);
    transition: background 0.2s;
  }
  .cat-arrow:active { background: var(--accent); }
  .cat-arrow-left  { left: 4px; }
  .cat-arrow-right { right: 4px; }

  /* Scroll horizontal */
  .categories-section .grid-4,
  .section.categories-section .grid-4 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding-bottom: 6px !important;
    padding-right: 16px !important;
    grid-template-columns: unset !important;
    -webkit-overflow-scrolling: touch;
  }
  .categories-section .grid-4::-webkit-scrollbar,
  .section.categories-section .grid-4::-webkit-scrollbar { display: none !important; }

  /* Card con imagen visible */
  .categories-section .category-card,
  .section.categories-section .category-card {
    flex-shrink: 0 !important;
    width: 44vw !important;
    min-width: 155px !important;
    max-width: 185px !important;
    border-radius: 18px !important;
    transform: none !important;
    box-shadow: 0 4px 16px rgba(28,52,97,0.12) !important;
  }

  /* Mostrar imagen superior */
  .categories-section .category-card .category-card-bg,
  .section.categories-section .category-card .category-card-bg {
    display: flex !important;
    height: 120px !important;
  }

  /* Contenido inferior */
  .categories-section .category-card .category-card-content,
  .section.categories-section .category-card .category-card-content {
    padding: 12px 14px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Ícono: mostrar lucide dorado, ocultar flaticon */
  .categories-section .category-card .category-card-icon,
  .section.categories-section .category-card .category-card-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    background: rgba(201,168,76,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  .categories-section .category-card .category-card-icon .cat-flaticon,
  .section.categories-section .category-card .category-card-icon .cat-flaticon {
    display: none !important;
  }
  .categories-section .category-card .category-card-icon .cat-lucide,
  .section.categories-section .category-card .category-card-icon .cat-lucide {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
  }

  /* Nombre */
  .categories-section .category-card .category-card-name,
  .section.categories-section .category-card .category-card-name {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* Ocultar count y flecha */
  .categories-section .category-card .category-card-count,
  .categories-section .category-card .category-card-arrow,
  .section.categories-section .category-card .category-card-count,
  .section.categories-section .category-card .category-card-arrow {
    display: none !important;
  }

}


/* ══════════════════════════════════════════════════════════
   MOBILE SMALL (max 480px)
   iPhone SE, móviles compactos
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Agregar estilos mobile small aquí */

}


/* ══════════════════════════════════════════════════════════
   MOBILE XSMALL (max 380px)
   Dispositivos muy pequeños
   ══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

  /* Agregar estilos mobile xsmall aquí */

}