/**
 * Shop archive filter bar.
 *
 * Deliberately not a form: no dropdowns, no "Bruk filter" button, nothing to
 * submit. One glass card holding rows of chips, each row labelled, so the
 * whole catalogue can be narrowed in a single tap. Same liquid-glass surface
 * and accent gradient as the CTAs elsewhere on the site.
 */

.dp-shop-filters {
  --dp-chip-radius: 999px;

  width: var(--dp-width);
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 18px 20px 14px;
  border: 1px solid rgba(19, 36, 64, 0.07);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow:
    0 14px 40px rgba(57, 44, 115, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.dp-shop-filters__groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dp-shop-filters__group {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.dp-shop-filters__group-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

.dp-shop-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-shop-filters__chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: var(--dp-chip-radius);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #202341;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease,
    box-shadow 0.2s ease, color 0.18s ease;
}

.dp-shop-filters__chip:hover {
  border-color: rgba(106, 90, 224, 0.35);
  background: rgba(255, 255, 255, 0.94);
}

.dp-shop-filters__chip:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: 2px;
}

.dp-shop-filters__chip:active {
  transform: scale(0.97);
}

.dp-shop-filters__chip.is-active {
  border-color: rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.96), rgba(79, 70, 229, 0.97));
  box-shadow:
    0 8px 20px rgba(79, 70, 229, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 700;
}

.dp-shop-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(19, 36, 64, 0.07);
}

.dp-shop-filters__count {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dp-text-muted);
}

.dp-shop-filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(19, 36, 64, 0.1);
  border-radius: var(--dp-chip-radius);
  background: rgba(255, 255, 255, 0.7);
  color: var(--dp-text-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.dp-shop-filters__reset:hover {
  border-color: rgba(106, 90, 224, 0.35);
  background: #fff;
  color: var(--dp-accent-strong);
}

.dp-shop-filters__reset[hidden] {
  display: none;
}

/* ── Grid interaction ─────────────────────────────────────────────────── */

.dp-product-tile.is-filtered-out {
  display: none;
}

.dp-product-grid[data-filter-grid] {
  transition: opacity 0.18s ease;
}

.dp-product-grid[data-filter-grid].is-empty {
  display: none;
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.dp-shop-filters__empty {
  width: var(--dp-width);
  max-width: 520px;
  margin: 8px auto 0;
  padding: 32px 28px;
  border: 1px dashed rgba(19, 36, 64, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.dp-shop-filters__empty[hidden] {
  display: none;
}

.dp-shop-filters__empty-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.dp-shop-filters__empty-copy {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dp-text-soft);
}

.dp-shop-filters__empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--dp-chip-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(135deg, rgba(111, 92, 246, 0.96), rgba(79, 70, 229, 0.97));
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .dp-shop-filters {
    padding: 16px 0 12px;
    border-radius: 20px;
  }

  .dp-shop-filters__group {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .dp-shop-filters__group-label {
    padding-inline: 16px;
  }

  /* Chips scroll horizontally instead of stacking into four cramped rows.
     The negative padding lets the first and last chip sit flush with the
     card edge while still having breathing room while scrolling. */
  .dp-shop-filters__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .dp-shop-filters__chips::-webkit-scrollbar {
    display: none;
  }

  .dp-shop-filters__chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .dp-shop-filters__foot {
    margin-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-shop-filters__chip,
  .dp-product-grid[data-filter-grid] {
    transition: none;
  }

  .dp-shop-filters__chip:active {
    transform: none;
  }
}