/* Campo Alto — estilos complementarios a Tailwind CDN */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon {
  font-variation-settings: 'FILL' 1;
}

html {
  scroll-behavior: smooth;
}

/* Oculta la scrollbar en tabs de categoría y carruseles, sin perder el swipe táctil */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animación de apertura del panel/drawer */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

/* ---------- Carruseles de producto ---------- */

.carousel-track {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.product-card {
  scroll-snap-align: start;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: #3e4c1e;
  color: #ffffff;
  border: 2px solid #f6f1e7;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.carousel-arrow .material-symbols-outlined {
  font-size: 26px;
}
.carousel-arrow:hover {
  background: #8a6d0a;
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow--left {
  left: -10px;
}
.carousel-arrow--right {
  right: -10px;
}
.carousel-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Drawer del carrito ---------- */
/* Controlado por una única clase .is-open (en vez de clases Tailwind con prefijo
   md:, que classList.toggle no puede apuntar directamente por nombre). */
.cart-drawer {
  transform: translateY(100%);
}
.cart-drawer.is-open {
  transform: translateY(0);
}
@media (min-width: 768px) {
  .cart-drawer {
    transform: translateX(100%);
  }
  .cart-drawer.is-open {
    transform: translateX(0);
  }
}

/* Acento dorado bajo cada título de categoría, tomado de la línea decorativa de la gráfica de marca */
.category-section h2 {
  display: inline-block;
}
.category-section h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 8px;
  background: #b8960c;
  border-radius: 9999px;
}

/* Categorías: ocultar secciones que no coinciden con el filtro activo */
.category-section.is-hidden {
  display: none;
}

/* Buscador: ocultar tarjetas de producto que no coinciden con la búsqueda */
.product-card.is-hidden {
  display: none;
}

/* Buscador: mientras hay texto escrito se ocultan Packs/Destacados para que
   los resultados queden justo debajo de la barra de búsqueda */
.search-hidden {
  display: none;
}

/* Buscador: ocultar la "x" nativa del navegador (ya tenemos el botón propio de borrar) */
#productSearch::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Inputs del formulario de envío (plugin @tailwindcss/forms ya aporta la base) */
#cartDrawer input[type="text"] {
  border-width: 1px;
}

/* Line clamp de nombres de producto (fallback si el navegador no soporta el plugin) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Espacio seguro inferior para el drawer en dispositivos con notch */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Lupa de zoom sobre fotos de producto (solo mouse/desktop) ---------- */

@media (hover: hover) and (pointer: fine) {
  .product-card .relative.aspect-square {
    cursor: zoom-in;
  }
}

/* La foto y el nombre abren el modal de detalle (ver openProductModal en script.js) */
.product-card h3 {
  cursor: pointer;
}

.zoom-result {
  position: fixed;
  display: none;
  width: 280px;
  height: 280px;
  border: 3px solid #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  background-color: #f6f1e7;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 100;
}