/* ==========================================================================
   PRODUCTS PAGE — page banner + category filter chips
   Core .product-grid / .product-card / .modal-* styles are shared in
   components.css. This file holds what's unique to the Products page.
   ========================================================================== */

.page-banner {
  padding-top: calc(var(--nav-h) + var(--sp-7));
  padding-bottom: var(--sp-6);
  text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--accent-soft), transparent 65%);
}
.page-banner .eyebrow { justify-content: center; }
.page-banner h1 { font-size: var(--fs-3xl); }
.page-banner p { max-width: 560px; margin-inline: auto; font-size: var(--fs-md); }

.section--catalog { padding-top: var(--sp-3); }

/* ---------------- Free delivery badge ----------------
   The single, site-wide delivery indicator for the catalog — replaces
   the old per-card/per-product "Free Delivery" labels entirely. */
.free-delivery-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-6);
}

.free-delivery-badge {
  width: min(100%, 480px);
  padding: var(--sp-4) var(--sp-6);
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 120% 160% at 30% 20%, var(--accent-strong), var(--accent) 70%);
  box-shadow: 0 0 0 1px var(--accent-strong), 0 0 30px var(--accent-soft), 0 0 70px var(--accent-soft),
    inset 0 2px 10px rgba(255, 255, 255, 0.25), inset 0 -8px 18px rgba(0, 0, 0, 0.18);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.free-delivery-badge:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 1px var(--accent-strong), 0 0 40px var(--accent-soft), 0 0 90px var(--accent-soft),
    inset 0 2px 10px rgba(255, 255, 255, 0.25), inset 0 -8px 18px rgba(0, 0, 0, 0.18);
}

.free-delivery-badge span {
  color: #06170a;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -0.01em;
  /* Scales with the badge (via vw) so the phrase always renders on one
     line and never overflows the rectangle, on any screen size. */
  font-size: clamp(0.85rem, 2.6vw, 1.3rem);
}

@media (max-width: 640px) {
  .free-delivery-badge { width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: 28px; }
  .free-delivery-badge span { font-size: clamp(0.7rem, 4vw, 0.95rem); }
}

/* ---------------- Category filter chips ---------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.filter-chip {
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--accent); color: var(--text-0); }

.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.products-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-2);
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}

/* ---------------- Sort dropdown ---------------- */
.sort-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.sort-label {
  font-size: var(--fs-xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sort-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sort-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.6rem 2.4rem 0.6rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sort-select:hover { border-color: var(--accent); }
.sort-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.sort-select-icon {
  position: absolute;
  right: 0.9rem;
  width: 14px; height: 14px;
  color: var(--text-2);
  pointer-events: none;
  transition: color var(--dur-fast) var(--ease);
}
.sort-select-wrap:hover .sort-select-icon { color: var(--accent); }

.catalog-note {
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-sm);
  margin-top: var(--sp-6);
}