/* Estilos propios (lo demás sale de Tailwind: assets/tailwind.css) */

/* Carrito lateral */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 400px;
  height: 100%;
  z-index: 999;
  visibility: hidden;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}
.cart-drawer.open {
  right: 0;
  visibility: visible;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 0, 0, 0.5);
}
.cart-overlay.active { display: block; }

/* Modal de producto */
.product-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 900;
  align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}
.product-modal.active { display: flex; }
@media (min-width: 768px) { .product-modal { align-items: center; } }

/* Foto de atrás: aparece al pasar el mouse (PC) o con el botón ↻ (celular) */
.card-img-back { opacity: 0; }
.product-card.show-back .card-img-front { opacity: 0; }
.product-card.show-back .card-img-back { opacity: 1; }
@media (hover: hover) {
  .product-card[role="button"]:hover .card-img-front { opacity: 0; }
  .product-card[role="button"]:hover .card-img-back { opacity: 1; }
}

/* Foco visible para navegar con teclado */
.product-card:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #E10600;
  outline-offset: 2px;
}

/* Ocultar scrollbar de las filas de filtros en móviles */
.filter-bar { scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }

/* Preguntas frecuentes */
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 900; font-size: 1.25rem; color: #E10600; line-height: 1; }
.faq[open] summary::after { content: "−"; }

/* Miniaturas de la galería: la seleccionada se ve completa, las demás semitransparentes */
.m-thumb { opacity: 0.5; transition: opacity 0.2s; }
.m-thumb:hover { opacity: 0.8; }
.m-thumb[aria-pressed="true"], .m-thumb[aria-pressed="true"]:hover { opacity: 1; }