/* =========================
   LISTADOS / CATEGORÍAS
   Restaurado según templates:
   - tienda/categorias.html
   - tienda/productos_todos.html
   - tienda/productos_por_marca.html
   ========================= */

/* ===== Árbol de categorías ===== */
.category-list{
  list-style:none;
  margin:0;
  padding:0;
}

.category-item{
  position:relative;
  padding:10px 12px;
  border:1px solid #e9e9e9;
  background:#fff;
  border-radius:12px;
  margin-bottom:10px;
}

.category-item > a{
  text-decoration:none;
  color:#222;
  font-weight:700;
  display:inline-block;
  padding-right:44px; /* espacio para la flecha */
}

.category-item > a:hover{
  text-decoration:underline;
}

.category-item ul{
  list-style:none;
  margin:10px 0 0 0;
  padding-left:14px;
  border-left:2px solid #f1f1f1;
}

/* Tu template usa class="hidden" para colapsar */
.hidden{
  display:none;
}

/* Flecha desplegable */
.arrow{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid #e6e6e6;
  background:#f8f9fa;
  cursor:pointer;
  user-select:none;
  font-size:14px;
}

.arrow:hover{
  background:#eef0f2;
}

/* ===== Botón VOLVER ARRIBA (id="backToTopBtn") ===== */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:52px;
  height:52px;
  border:0;
  border-radius:999px;

  /* El JS lo muestra/oculta */
  display:none;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  z-index:9999;

  background:#111;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.back-to-top:hover{
  transform:translateY(-2px);
}

@media (max-width:768px){
  .back-to-top{
    right:14px;
    bottom:14px;
    width:48px;
    height:48px;
  }
}

/* ===== Evitar choque con WhatsApp flotante del base.html =====
   WhatsApp usa: right:25px; bottom:25px; z-index:10000; width:60px
   Subimos el back-to-top para que quede encima (más arriba), sin tapar WhatsApp.
*/
.back-to-top{
  bottom: 95px;      /* 25 + 60 + ~10px margen */
  right: 25px;       /* alinear con WhatsApp */
  z-index: 9999;     /* WhatsApp queda arriba si llegaran a tocarse */
}

@media (max-width:768px){
  .back-to-top{
    bottom: 80px;
    right: 15px;
  }
}