/* ============================================================
   ComercioYa — DESKTOP.CSS
   Adaptación exclusiva para pantallas >= 1024px.
   No modifica nada del estilos.css ni del mobile.
   ============================================================ */

@media (min-width: 1024px) {

  /* ══ CENTRADO GLOBAL ══ */
  #store-v {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* Header centrado */
  header {
    padding-left: max(2rem, calc((100vw - 1300px) / 2));
    padding-right: max(2rem, calc((100vw - 1300px) / 2));
  }
  header.catalog-mode {
    padding-left: max(2rem, calc((100vw - 1300px) / 2)) !important;
    padding-right: max(2rem, calc((100vw - 1300px) / 2)) !important;
  }

  /* ══ BANNER ══ */
  .banner-slider {
    border-radius: 18px;
    overflow: hidden;
  }

  /* ══ NAV BAR INFERIOR: ocultar en desktop ══ */
  .fnav {
    display: none !important;
  }

  /* ══ HERO: ocultar ══ */
  .hero {
    display: none !important;
  }

  /* ══ MODAL DE PRODUCTO ══
     Centrado en pantalla, imagen más grande */
  #mod-ov {
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
  }
  #mod-box {
    max-width: 960px !important;
    width: calc(100vw - 120px) !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 24px !important;
    transform: translateY(16px) !important;
    opacity: 0 !important;
    transition: transform .3s cubic-bezier(.32,1,.6,1), opacity .22s ease !important;
  }
  #mod-ov.open #mod-box {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  .mod-handle {
    display: none !important;
  }
  /* Imagen grande */
  .mod-img {
    height: 500px !important;
    object-fit: contain !important;
  }
  .mod-img-ph {
    height: 460px !important;
  }

  /* ══ CHIPS BAR (modo catálogo): override JS inline styles ══ */
  /* El JS pone maxHeight:0px y opacity:0 como inline — lo forzamos con !important
     y cortamos la transición para que no se anime a esconderse */
  body.catalog-active #cat-chips-bar,
  body.catalog-active.cy-hd-fixed #cat-chips-bar,
  body.catalog-active.cy-hd-split #cat-chips-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    max-height: 9999px !important;
    min-height: 40px !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    padding: 10px 0 16px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1 !important;
    background: transparent !important;
    border-bottom: none !important;
    gap: 8px !important;
    width: 100% !important;
    /* Cortar la transición del JS para que no se esconda */
    transition: none !important;
  }
  /* En modo normal ocultar chips (usamos sidebar) */
  body:not(.catalog-active) #cat-chips-bar {
    display: none !important;
  }

  /* ══ MODO CATÁLOGO: sin sidebar, chips arriba ══ */
  body.catalog-active .store-wrap {
    display: block !important;
    padding-bottom: 4rem !important;
  }
  body.catalog-active #homeCats {
    display: none !important;
  }
  body.catalog-active #catView {
    display: block !important;
  }

  /* ══ MODO NORMAL/LISTA/GRILLA: layout sidebar + productos ══ */
  body:not(.catalog-active) .store-wrap {
    display: grid !important;
    grid-template-columns: 420px 1fr !important;
    gap: 28px !important;
    padding-bottom: 4rem !important;
    align-items: start !important;
  }

  /* Sidebar */
  body:not(.catalog-active) #homeCats {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: calc(var(--cy-hd-height, 64px) + 12px) !important;
    width: 420px !important;
    min-width: 420px !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
    display: block !important;
    background: var(--s1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  /* JS pone display:none en homeCats al entrar a una cat — revertir */
  body:not(.catalog-active) #homeCats[style*="display: none"],
  body:not(.catalog-active) #homeCats[style*="display:none"] {
    display: block !important;
  }

  /* catView: columna derecha */
  body:not(.catalog-active) #catView {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* Footer en columna derecha */
  body:not(.catalog-active) #store-footer {
    grid-column: 2 !important;
    padding-bottom: 2rem !important;
  }

  /* ── Sidebar: título categorías ── */
  body:not(.catalog-active) #homeCats .sec-hd {
    margin: 0 0 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  body:not(.catalog-active) #homeCats .sec-hd-right {
    display: none !important;
  }

  /* ── Sidebar: cat-grid vertical ── */
  body:not(.catalog-active) #homeCats .cat-grid,
  body:not(.catalog-active) #homeCats .cat-grid.grid-mode {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    grid-template-columns: unset !important;
  }

  /* ── Cat cards: igual que mobile pero ancho completo y más altas ──
     NO se toca el diseño interno — imagen/shade/texto igual que mobile */
  body:not(.catalog-active) #homeCats .cat-card {
    width: 100% !important;
    height: 110px !important;
    min-height: 110px !important;
    box-sizing: border-box !important;
  }

  /* ── Botón Volver: fijo ── */
  body:not(.catalog-active) #catView .sec-hd {
    position: sticky !important;
    top: calc(var(--cy-hd-height, 64px) + 8px) !important;
    z-index: 50 !important;
    background: var(--bg) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    border: 1px solid var(--line) !important;
  }

  /* ══ GRILLA DE PRODUCTOS: más columnas ══ */
  .prod-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .prod-catalog {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  /* Vista lista: 2 columnas */
  #prodWrap .plist {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Subcat chips: wrap */
  .subcat-bar {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

}

/* ══ TABLET 768-1023px ══ */
@media (min-width: 768px) and (max-width: 1023px) {
  #store-v {
    padding: 0 1.5rem;
  }
  .prod-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  .prod-catalog {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .banner-slider {
    border-radius: 16px;
  }
}

/* ══ PANTALLA GRANDE >= 1400px: 4 columnas ══ */
@media (min-width: 1400px) {
  #store-v {
    max-width: 1500px;
  }
  .prod-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .prod-catalog {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  body:not(.catalog-active) .store-wrap {
    grid-template-columns: 440px 1fr !important;
  }
  body:not(.catalog-active) #homeCats {
    width: 440px !important;
    min-width: 440px !important;
    max-width: 440px !important;
  }
}