/* src/css/catalogo.css */
:root {
  --header-height: 80px; /* se actualiza vía JS en el HTML */
}

body { font-family: 'Inter', sans-serif; }

/* ====== LAYOUT PRINCIPAL ====== */
.catalog-layout {
  display: grid;
  gap: 2rem;
}

/* En escritorio: 2 columnas (cambia 320px si quieres otro ancho de filtros) */
@media (min-width: 1024px) {
  .catalog-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start; /* evita que la grilla copie alturas */
  }
}

/* ====== PANEL DE FILTROS ====== */
/* Base (mobile/tablet): NO sticky para que no tape los productos */
.filters-panel {
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
}

/* En escritorio (lg+): sticky con su propia altura y scroll interno
   Ajusta 194vh si quieres el filtro más/menos largo en desktop */
@media (min-width: 1024px) {
  .filters-panel {
    position: sticky;
    top: calc(var(--header-height) + 16px);
    max-height: min(194vh, calc(100vh - (var(--header-height) + 32px)));
    overflow-y: auto;
  }
}

/* ====== GRILLA DE PRODUCTOS ====== */
.product-grid {
  display: grid;
  gap: 2rem;
  justify-items: stretch;
}

/* columnas responsivas */
@media (min-width: 640px) { /* sm */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { /* lg */
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ====== CARD ====== */
.card-perfume {
  background: #fff;
  border-radius: 0.75rem;      /* rounded-xl */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  overflow: hidden;
  padding: 1.5rem;             /* p-6 */
  width: 100%;
  max-width: 22rem;            /* ancho máximo visual de la card */
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  height: 100%;                /* llena la celda => alturas parejas por fila */
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Si quieres las cards más largas, puedes fijar una altura mínima:
.card-perfume { min-height: 520px; }
*/

.card-perfume:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12), 0 10px 10px rgba(0,0,0,.08);
}

/* Imagen 1:1 con cover (ajusta aspect-ratio para hacer la card más alta) */
.card-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* cambia a 3 / 4 o 2 / 3 para cards más altas */
  object-fit: cover;
  border-radius: .5rem;
  margin-bottom: 1rem;
}

/* Contenido y spacer para empujar CTAs al fondo */
.card-body   { display: flex; flex-direction: column; flex: 1 1 auto; }
.card-spacer { flex: 1 1 auto; }

/* ====== SLIDER PRECIO ====== */
.price-range {
  appearance: none;
  width: 100%;
  height: 8px;
  background: #e5e7eb;       /* gray-200 */
  border-radius: 8px;
  cursor: pointer;
}
.price-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #1f2937;       /* gray-800 */
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  cursor: pointer;
}
.price-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #1f2937; border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  cursor: pointer;
}

/* ====== CHECKBOX LISTA CON SCROLL ====== */
.checkbox-container {
  max-height: 12rem;          /* ~192px */
  overflow-y: auto;
  padding-right: .5rem;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-radius: .5rem;
}

/* Scrollbar WebKit */
.checkbox-container::-webkit-scrollbar { width: 6px; }
.checkbox-container::-webkit-scrollbar-track { background: transparent; }
.checkbox-container::-webkit-scrollbar-thumb {
  background-color: #e5e7eb; border-radius: 9999px;
}
.checkbox-container::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

/* Scrollbar Firefox */
.checkbox-container { scrollbar-width: thin; scrollbar-color: #9ca3af transparent; }

/* ====== CHECKBOX LOOK ====== */
.checkbox-container input[type="checkbox"] {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 1rem; height: 1rem; border: 2px solid #d1d5db; border-radius: 4px;
  transition: all .2s; position: relative; cursor: pointer; outline: none;
}
.checkbox-container input[type="checkbox"]:checked {
  background-color: #1f2937; border-color: #1f2937;
}
.checkbox-container input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
}