@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
    
    /* Estilo general */
    body {
      background: #fff;
      font-family: Arial, sans-serif;
    }

    /* Contenedor general */
    .productos-container {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 20px;
      margin: 40px auto;
      max-width: 1300px;
      padding: 0 15px;
    }

    /* Sidebar PC */
    .sidebar {
      background: #ffffff;
      color: #000000;
      padding: 20px;
      border-radius: 10px;
      height: fit-content;
    }

    .sidebar h5 {
      border-bottom: 1px solid #444;
      padding-bottom: 10px;
      margin-bottom: 15px;
      font-weight: bold;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
    }

    .sidebar ul li {
      padding: 4px 0;
      font-size: 14px;
      cursor: pointer;
    }

    .sidebar ul li:hover {
      color: var(--tks-primary, #0d6efd);
    }

    /* Barra superior */
    .top-bar {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 25px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .top-bar input {
      max-width: 300px;
    }

    .top-bar .form-select {
      max-width: 200px;
    }

    .btn-filtros-movil {
      white-space: nowrap;
      background-color: var(--tks-primary, #0d6efd);
      border-color: var(--tks-primary, #0d6efd);
      color: #fff;
    }

    .btn-filtros-movil:hover,
    .btn-filtros-movil:focus,
    .btn-filtros-movil:active {
      background-color: var(--tks-primary-dark, #0a58ca) !important;
      border-color: var(--tks-primary-dark, #0a58ca) !important;
      color: #fff !important;
    }

    #loader-header {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(3px);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    #loader-header .loader-spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #555;
      border-top-color: var(--tks-primary, #0d6efd);
      border-radius: 50%;
      animation: giro 1s linear infinite;
    }

    @keyframes giro {
      to {
        transform: rotate(360deg);
      }
    }

    /* ═══════════════════════════════════════════════
       PRODUCTOS GRID — Premium Redesign
       ═══════════════════════════════════════════════ */

    .productos-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 22px;
    }

    /* ── Tarjeta ──────────────────────────────── */
    .producto-card {
      background: #fff;
      color: inherit;
      text-decoration: none;
      border: none;
      border-radius: 16px;
      padding: 14px;
      text-align: center;
      transition: transform 0.25s cubic-bezier(.4,0,.2,1),
                  box-shadow 0.25s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 4px 15px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 310px;
      position: relative;
      cursor: pointer;
    }

    .producto-card:hover {
      color: inherit;
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    }

    /* ── Contenedor de imagen 1:1 ─────────────── */
    .producto-card .producto-img-container {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .producto-card .producto-img-container img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }

    /* Imagen agotada */
    .producto-card .producto-img-container img.img-agotado {
      opacity: 0.5;
      filter: grayscale(100%);
    }

    /* Fallback para img directa (compatibilidad) */
    .producto-card > img {
      max-width: 100%;
      height: 150px;
      object-fit: contain;
      margin-bottom: 10px;
    }

    /* ── Nombre (line-clamp 2) ────────────────── */
    .producto-nombre {
      font-family: 'Poppins', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      margin: 6px 0 4px;
      color: #333;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.4;
      min-height: 2.8em;
      flex-grow: 1;
    }

    /* ── Precio ────────────────────────────────── */
    .producto-precio {
      color: #111;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      font-size: 15px;
      margin-top: auto;
      padding-top: 4px;
    }

    /* ═══════════════════════════════════════════════
       BADGES DE PRODUCTO — Minimalistas
       ═══════════════════════════════════════════════ */
    .producto-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 4px 10px;
      border-radius: 6px;
      font-family: 'Poppins', sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      z-index: 10;
      line-height: 1.4;
    }

    .badge-agotado {
      background: #dc3545;
      color: #fff;
    }

    .badge-ultimas {
      background: #fd7e14;
      color: #fff;
    }

    .badge-destacado {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
    }

    .badge-mas-vendido {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: #fff;
    }

    .badge-nuevo {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
      color: #fff;
    }

    /* ═══════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════ */

    /* Tablet y menor — sidebar oculto */
    @media (max-width: 768px) {
      .productos-container {
        grid-template-columns: 1fr;
      }
      .sidebar {
        display: none;
      }
    }

    /* ── Móvil: forzar 2 columnas exactas ─────── */
    @media (max-width: 576px) {
      .productos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .producto-card {
        min-height: auto;
        padding: 10px;
        border-radius: 12px;
      }
      .producto-card .producto-img-container {
        border-radius: 10px;
        margin-bottom: 8px;
      }
      .producto-nombre {
        font-size: 12px;
        min-height: 2.4em;
      }
      .producto-precio {
        font-size: 13px;
      }
      .producto-badge {
        font-size: 8.5px;
        padding: 3px 6px;
        border-radius: 5px;
      }
    }

    /* ── Botón filtros móvil ──────────────────── */
    @media (min-width: 761px) {
      .btn-filtros-movil {
        display: none !important;
      }
    }

    @media (max-width: 760px) {
      .top-bar {
        gap: 0.5rem;
      }

      .btn-filtros-movil {
        display: inline-block !important;
        padding: 8px 14px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
      }
    }

 .offcanvas-body ul {
  list-style: none !important; /* Quita los puntos de la lista */
  padding-left: 0 !important;  /* Opcional: elimina el espacio extra a la izquierda */
}


/* --- Estilos Generales para la lista de filtros (PC y Móvil) --- */
.lista-de-filtros .filter-item {
  /* 1. Fuente más bonita y legible */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  
  /* 2. Cursor de puntero al pasar por encima */
  cursor: pointer;

  /* 3. Diseño base y transiciones suaves */
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 4px; /* Un pequeño espacio base */
  transition: background-color 0.2s ease, color 0.2s ease;
  user-select: none; /* Evita que el texto se seleccione al hacer clic rápido */
  
  /* 4. Flexbox para icono + texto */
  display: flex;
  align-items: center;
  gap: 10px;
}

.lista-de-filtros .filter-item i {
  font-size: 1rem;
  opacity: 0.7;
  width: 20px;
  text-align: center;
}

.lista-de-filtros .filter-item.active i {
  opacity: 1;
}

/* Apariencia mejorada para offcanvas (móvil) */
.offcanvas {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.14);
}
.offcanvas .offcanvas-header {
  border-bottom: none;
}
.offcanvas .offcanvas-title {
  font-weight: 700;
  font-size: 1.15rem;
}

/* Ajustes más amables visualmente para cada item en móvil */
.offcanvas .lista-de-filtros .filter-item {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.04);
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 12px;
  color: #222;
}
.offcanvas .lista-de-filtros .filter-item:hover {
  background: #f7f7f8;
}
.offcanvas .lista-de-filtros .filter-item.active {
  background: var(--tks-primary, #0d6efd);
  color: #fff;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.06);
}

/* Estilos específicos y no invasivos para el offcanvas de filtros en esta página
   Usamos el ID para no afectar otros offcanvas del sitio (ej. menú principal). */
#offcanvasFiltros {
  background: #ffffff; /* fondo claro */
  color: #222;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
#offcanvasFiltros .offcanvas-header {
  border-bottom: none;
}
#offcanvasFiltros .offcanvas-title {
  color: #111;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}
#offcanvasFiltros .btn-close {
  filter: brightness(0.6);
}

/* Asegurar que el estado activo dentro del offcanvas sea claramente visible */
#offcanvasFiltros .lista-de-filtros .filter-item.active {
  background: var(--tks-primary, #0d6efd) !important;
  color: #ffffff !important;
  border-color: rgba(0,0,0,0.06) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.06) !important;
}

/* --- Efecto Hover para PC --- */
/* Solo se aplica en pantallas grandes */
@media (min-width: 769px) {
  .lista-de-filtros .filter-item:hover {
    background-color: #f4f4f4; /* Un fondo gris claro sutil */
  }
}

/* --- Estilo para el filtro activo (seleccionado) --- */
.lista-de-filtros .filter-item.active {
  background-color: var(--tks-primary, #0d6efd);
  color: white;
  font-weight: 600;
}
.lista-de-filtros .filter-item.active:hover {
  background-color: var(--tks-primary-dark, #0a58ca);
}


/* --- Estilos Específicos para Móvil --- */
/* Se aplican solo en pantallas de 768px de ancho o menos */
@media (max-width: 768px) {
  /* Apuntamos específicamente a la lista dentro del offcanvas */
  .offcanvas .lista-de-filtros .filter-item {
    
    /* 4. Más interlineado (espacio) entre cada elemento */
    margin-bottom: 12px;
    
    /* Hacemos el texto y el padding un poco más grandes para que sea más fácil de tocar */
    font-size: 1.1rem;
    padding: 14px 20px;
  }

  /* 5. Efecto "hover" en móvil (se activa al tocar) */
  .offcanvas .lista-de-filtros .filter-item:hover {
    background-color: #f8f9fa; /* Un fondo muy claro para dar feedback al tocar */
  }
}

/* --- Lógica de visibilidad para PC y Móvil --- */

/* En pantallas de 761px o más (PC), el botón está oculto */
@media (min-width: 761px) {
  .btn-filtros-movil {
    display: none !important;
  }
}

/* En pantallas de 760px o menos (móvil), mostramos el botón */
@media (max-width: 760px) {
  .btn-filtros-movil {
    display: inline-block !important;
    padding: 8px 14px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
}