/* ============================================================
   Brimo — products.css
   Products-page-only styles (products.html).
   Loaded AFTER style.css.
   ============================================================ */

/* ==================== PAGE HEAD (shared look across sub-pages) ==================== */
.page-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem;
  background:
    radial-gradient(50rem 30rem at 100% -20%, color-mix(in srgb, var(--cat-citrus) 9%, transparent), transparent 60%),
    var(--paper);
}
.page-head__lede {
  font-size: 1.15rem;
  color: var(--mist);
  max-width: 40rem;
}

/* ==================== FILTER BAR ==================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.filter-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
/* Category color swatch (buttons except "All" set --swatch inline) */
.filter-bar__btn[style*="--swatch"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--swatch);
}
.filter-bar__btn:hover {
  border-color: color-mix(in srgb, var(--swatch, var(--ink)) 55%, var(--line));
  transform: translateY(-1px);
}
/* Active state: tint the button with its own category color */
.filter-bar__btn.is-active {
  color: #fff;
  border-color: transparent;
  background: var(--swatch, var(--ink));
}
/* The "All" button has no --swatch → falls back to a spectrum fill */
.filter-bar__btn.is-active:not([style*="--swatch"]) {
  background: var(--ink);
  position: relative;
}
.filter-bar__btn.is-active[style*="--swatch"]::before {
  background: #fff;
}

/* ==================== PRODUCTS GRID ==================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.35s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card:hover .bottle { transform: scale(1.06); }
.bottle { transition: transform 0.3s var(--ease); }

.product-card__media {
  /* Exactly where a real product <img> drops in 1:1. */
  height: 15rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__media .bottle-slot { width: 62%; height: 100%; }
.product-card .tag { align-self: flex-start; }
.product-card h3 { margin: 0; font-size: 1.1rem; }
.product-card p { margin: 0; color: var(--mist); font-size: 0.94rem; }

/* Filtering transition: JS adds .is-hidden to non-matching cards so they
   fade + scale down; once the fade finishes JS sets `hidden` to collapse
   them out of the grid. Incoming (matching) cards clear `hidden` first,
   then the .is-hidden class is removed on the next frame so they fade in. */
.product-card.is-hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
.product-card[hidden] { display: none; }
/* Incoming cards start from the faded state before animating in */
.product-card.is-entering {
  opacity: 0;
  transform: scale(0.9);
}

/* Fallback message shown by initProductsGrid() if the product data
   file fails to load (grid stays informative, never silently empty). */
.products-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mist);
  font-size: 1.05rem;
  padding: 2.5rem 1rem;
}

/* Cards are now <a> links — keep them free of the default link underline. */
.product-card,
.product-card:hover { text-decoration: none; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .products-grid { grid-template-columns: 1fr; }
}