/* ==========================================================================
   DAYANA — Products page layout
   Page-specific only: selection panel, filter bar, filterable grid, empty
   state. Cards, chips, hero and CTA strip come from components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter bar — overlaps the hero edge, sticks under the header on desktop
   -------------------------------------------------------------------------- */
.products { position: relative; padding-block-end: clamp(3.5rem, 8vw, 6.5rem); }
.filter-bar {
  position: relative; z-index: 20; margin-block-start: calc(-1 * (var(--cut) + 1.5rem));
  background: var(--c-card); border: 1px solid var(--c-border); border-block-start: 3px solid var(--c-accent); border-radius: 2px;
}
.filter-bar__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem; }
.filter-bar__title { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.filter-bar__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding-inline: 1rem;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-heading);
  border: 1px solid var(--c-border); border-radius: 2px; touch-action: manipulation;
}
.filter-bar__toggle svg { inline-size: 18px; block-size: 18px; color: var(--c-secondary); }
.filter-bar__toggle[aria-expanded="true"] { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.filter-bar__toggle[aria-expanded="true"] svg { color: #fff; }
.filter-bar__badge { display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 0.35rem; font-size: 0.75rem; background: var(--c-accent); color: #fff; border-radius: 2px; }

/* Body collapses on mobile (height animated through grid rows on a single inner wrapper) */
.filter-bar__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.filter-bar__inner { min-block-size: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.45s; }
.filter-bar.is-open .filter-bar__body { grid-template-rows: 1fr; }
.filter-bar.is-open .filter-bar__inner { visibility: visible; transition-delay: 0s; }
.filter-bar__inner > .filter-group { padding: 0 1.25rem 1rem; }
.filter-bar__inner .site-search { inline-size: 100%; max-inline-size: 100%; }
.filter-bar__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--c-border); }
.filter-bar__count { font-size: 0.875rem; color: var(--c-muted); }
.filter-bar__reset { background: none; }

/* Inline product search reuses the site-search skin without the dropdown */
.site-search--inline .site-search__input { min-block-size: 46px; }
.site-search--inline [data-filter-search-icon] { color: var(--c-muted); }

@media (min-width: 1024px) {
  .filter-bar { position: sticky; inset-block-start: 88px; }
  .filter-bar__head { padding-block-end: 0; }
  .filter-bar__toggle { display: none; }
  .filter-bar__body { grid-template-rows: 1fr; }
  .filter-bar__inner { visibility: visible; overflow: visible; display: grid; grid-template-columns: minmax(280px, 1.2fr) auto auto; gap: 1rem 2rem; align-items: start; padding: 1rem 1.25rem 0; }
  .filter-bar__inner > .filter-group { padding: 0; }
  .filter-bar__status { grid-column: 1 / -1; margin-inline: -1.25rem; margin-block-start: 0.25rem; }
}

/* --------------------------------------------------------------------------
   Filterable grid — 2 columns on phones (compact cards), 3 on tablet, 5 desktop
   -------------------------------------------------------------------------- */
.products__head { margin-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; text-align: center; }
.products__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.family-card.is-hidden { display: none; }

@media (max-width: 639.98px) {
  .products__grid .family-card p { display: none; }              /* Compact: image + title only */
  .products__grid .family-card__body { padding: 0.9rem 0.9rem 0.5rem; }
  .products__grid .family-card__title { font-size: 0.9375rem; }
  .products__grid .family-card__arrow { margin: 0 0.9rem 0.9rem; inline-size: 32px; block-size: 32px; }
}
@media (min-width: 768px) {
  .products__head { text-align: start; }
  .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1200px) {
  .products__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Empty state */
.products__empty { display: grid; justify-items: center; gap: 1rem; max-inline-size: 560px; margin: 2rem auto 0; padding: 2.5rem 1.5rem; text-align: center; background: var(--c-card); border: 1px dashed var(--c-border); border-radius: 2px; }
.products__empty svg { inline-size: 40px; block-size: 40px; color: var(--c-secondary); }
.products__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }