/* ═══════════════════════════════════════════════════════════════
   Glowérieve — shop.html extras
   Only for the product listing page. Links AFTER components.css.
   ═══════════════════════════════════════════════════════════════ */

/* Hidden elements must lose their component display values */
.product-card[hidden], .products__grid[hidden] { display: none; }

/* Card description line (shop grid only) */
.product-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

/* Filter fieldsets */
.filters__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.filters__group legend { padding: 0; }
.filters__note { font-size: var(--fs-caption); color: var(--color-text-muted); }
.filters__reset {
  justify-self: start;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast);
}
.filters__reset:hover { color: var(--color-primary-dark); }

/* Empty state */
.shop-empty {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
}
.shop-empty[hidden] { display: none; }
.shop-empty__icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-primary-light);
}
.shop-empty__icon .icon { width: 28px; height: 28px; }
.shop-empty h3 { font-size: var(--fs-h4); color: var(--color-text-strong); }
.shop-empty p { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 42ch; }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.pagination__btn {
  min-width: 44px; height: 44px;
  padding-inline: var(--space-3);
  display: inline-grid; place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.pagination__btn:hover { border-color: var(--color-primary-light); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.pagination__btn[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.pagination__btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pagination__btn .icon { width: 16px; height: 16px; }
.pagination__gap { color: var(--color-text-muted); font-size: var(--fs-sm); padding-inline: var(--space-1); }

@media (max-width: 1199px) {
  .filters { padding: var(--space-5); }
}