/* =========================================
   NsStore.mx - custom.css CORREGIDO
   ========================================= */

/* TABLET Y DESKTOP (768px+): sidebar visible en 2 columnas */
@media (min-width: 768px) {

  /* Layout de 2 columnas correcto */
  #left_column.column.sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: left !important;
    width: 25% !important;
    max-width: 25% !important;
    min-height: 1px !important;
    position: relative !important;
  }

  #center_column {
    display: block !important;
    visibility: visible !important;
    float: left !important;
    width: 75% !important;
    max-width: 75% !important;
  }

  /* Contenido del sidebar siempre visible en desktop/tablet */
  #left_column .block_content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Títulos de los bloques del sidebar */
  #left_column .block,
  #left_column .title_block,
  #left_column ul,
  #left_column li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* Quitar el accordion en desktop - mostrar todo */
  #left_column.accordion .block .block_content {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Bloques específicos de categorías y filtros */
  #categories_block_left,
  #layered_block_left,
  #categories_block_left .block_content,
  #layered_block_left .block_content {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Quitar flex en desktop - Bootstrap float funciona mejor */
  #columns .row {
    display: block !important;
  }
}

/* MOBILE (hasta 767px): columnas apiladas */
@media (max-width: 767px) {
  #left_column.column.sidebar,
  #center_column {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* En mobile el sidebar va debajo del contenido */
  #columns .row {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
  }

  #center_column {
    -webkit-order: 1 !important;
    order: 1 !important;
  }

  #left_column {
    -webkit-order: 2 !important;
    order: 2 !important;
  }
}