.products-page {
  margin: 80px auto 60px auto;
}


.products-page .content-panel {
  padding: 24px;           
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.products-page .show-mobile { display: none; }

.products-page .catalog-layout { 
  position: relative; 
  z-index: 1; 
  display: flex;      
  gap: 24px;          
}

.products-page .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: none; z-index: 50; }
.products-page .overlay.visible { display: block; }
.products-page .sidebar { transition: transform 0.3s ease-in-out; z-index: 60; }

@media (max-width: 900px) {
  .products-page .catalog-layout { display: block; }
  .products-page .show-mobile { display: inline-block; }
  .products-page .sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    width: 80%;
    max-width: 320px;
    height: calc(100% - 70px);
    background: #fff;
    box-shadow: 2px 0 8px rgba(0,0,0,0.25);
    overflow-y: auto;
    padding: 18px;
    transform: translateX(-100%);
  }
  .products-page .sidebar.open { transform: translateX(0); }
}

.products-page .filtro-busqueda { position: relative; width: 100%; max-width: 350px; margin: 10px 0; }
.products-page .filtro-busqueda input[type="search"] {
  width: 100%; padding: 11px 40px 11px 15px; font-size: 15px; color: #000;
  background: #fff; border: 1px solid rgba(0,255,100,0.3); border-radius: 25px;
  outline: none; transition: all 0.3s ease;
}
.products-page .filtro-busqueda input[type="search"]:focus {
  border-color: rgba(0,255,100,0.8);
  box-shadow: 0 0 10px rgba(0,255,100,0.4);
}
.products-page .filtro-busqueda::after { content: '🔍'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #777; font-size: 18px; }

.products-page .range input,
.products-page .select {
  width: 100%; padding: 10px 15px; font-size: 15px; color: #000;
  background: #fff; border: 1px solid rgba(0,255,100,0.3); border-radius: 25px;
  outline: none; transition: all 0.3s ease; margin-bottom: 8px;
}
.products-page .range input:focus,
.products-page .select:focus {
  border-color: rgba(0,255,100,0.8);
  box-shadow: 0 0 10px rgba(0,255,100,0.4);
}

.products-page .prod-desc {
  font-size: 14px; color: #555; margin: 4px 0 8px 0; line-height: 1.3;
  height: 38px; overflow: hidden;
}