/* =============================================================
   Genzee Jewels — archive-product.css
   WooCommerce collection/archive styles.
   Merged from original scaffold + design-file alignment pass.
   ============================================================= */

.archive-collection {
  padding: 0 0 var(--space-16);
  background: var(--color-paper);
}

.archive-collection__notices {
  padding-top: var(--space-6);
}

.archive-collection__notices .woocommerce-message,
.archive-collection__notices .woocommerce-info,
.archive-collection__notices .woocommerce-error {
  margin: 0 0 var(--space-5);
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
}

.archive-collection__notices .woocommerce-error {
  border-color: rgba(225, 24, 85, 0.25);
}

.archive-collection__main {
  padding-top: 1.5rem;
}

/* ── Archive header (full-bleed gradient strip, no card) ─── */

.archive-header {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: linear-gradient(135deg, var(--color-butter) 0%, var(--color-tangerine) 50%, var(--color-hot) 100%);
  box-shadow: none;
}

.archive-header::before,
.archive-header::after {
  display: none;
}

.archive-header__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2.5rem var(--container-pad) 2rem;
}

.archive-header__art {
  position: absolute;
  top: 1.25rem;
  right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  width: clamp(8rem, 16vw, 13.75rem);
  height: clamp(8rem, 16vw, 13.75rem);
  opacity: 0.3;
  pointer-events: none;
}

.archive-header__breadcrumb,
.archive-header__content {
  position: relative;
  z-index: 1;
}

.archive-header__breadcrumb {
  margin-bottom: 0.5rem;
}

.archive-header__breadcrumb-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.72);
}

.archive-header__breadcrumb-item--current {
  color: var(--color-ink);
}

.archive-header__breadcrumb-sep {
  opacity: 0.45;
}

.archive-header__title {
  margin: 0;
  font-size: clamp(3.75rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.archive-header__title-dot {
  color: var(--color-hot);
}

.archive-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
  margin-top: 1rem;
}

.archive-header__count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(10, 10, 10, 0.9);
}

.archive-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--color-ink);
  color: var(--color-butter);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: none;
}

/* ── Sticky toolbar strip ─────────────────────────────────── */

.archive-collection__sticky-tools {
  position: sticky;
  top: 100px;
  z-index: var(--z-sticky-tools);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-white);
}

.archive-collection__tools-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Layout: sidebar + content ────────────────────────────── */

.archive-collection__layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 0;
  align-items: start;
}

.archive-collection__sidebar {
  position: sticky;
  top: 9rem;
}

.archive-filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archive-filters__intro-title {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.05;
  color: var(--color-ink);
}

.archive-filters__intro-copy {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.archive-filters__eyebrow,
.archive-filters__group-title,
.archive-filters__promo-eyebrow {
  margin: 0;
}

.archive-filters__eyebrow,
.archive-filters__promo-eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hot);
}

.archive-filters__stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archive-filters__card {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-md);
  background: var(--color-white);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.archive-filters__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.archive-filters__group-title {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.archive-filters__group-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.archive-filters__price-track {
  position: relative;
  height: 0.25rem;
  margin: 1rem 0 0.875rem;
  border-radius: var(--r-pill);
  background: var(--color-line-soft);
  overflow: visible;
}

.archive-filters__price-track-fill {
  position: absolute;
  inset: 0;
  width: auto;
  height: 100%;
  border-radius: inherit;
  background: var(--color-hot);
}

.archive-filters__price-thumb {
  position: absolute;
  top: -0.3125rem;
  width: 0.875rem;
  height: 0.875rem;
  border: 3px solid var(--color-hot);
  border-radius: var(--r-pill);
  background: var(--color-white);
}

.archive-filters__price-thumb--min {
  left: 0;
  transform: translateX(-50%);
}

.archive-filters__price-thumb--max {
  right: 0;
  transform: translateX(50%);
}

.archive-filters__pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}

.archive-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.375rem;
  border: 1px solid var(--color-line);
  border-radius: 0.375rem;
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 0.625rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.archive-filter-pill:hover,
.archive-filter-pill:focus-visible {
  color: var(--color-ink);
  transform: translateY(-1px);
}

.archive-filter-pill:focus-visible,
.archive-filter-link:focus-visible,
.archive-filter-swatch:focus-visible,
.archive-filters-mobile__toggle:focus-visible,
.archive-filter-drawer__close:focus-visible {
  outline: 3px solid var(--color-hot);
  outline-offset: 2px;
}

.archive-filter-pill.is-active {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.archive-filters__option-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.archive-filter-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.25;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.archive-filter-link:hover,
.archive-filter-link:focus-visible {
  color: var(--color-ink);
  transform: none;
}

.archive-filter-link.is-active {
  background: transparent;
}

.archive-filter-link__indicator {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  border: 1px solid rgba(10, 10, 10, 0.18);
  border-radius: 0.25rem;
  background: var(--color-white);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.archive-filter-link.is-active .archive-filter-link__indicator {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.archive-filter-link__label {
  flex: 1;
  min-width: 0;
}

.archive-filter-link__count {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 0.6875rem;
  font-weight: 800;
}

.archive-filters__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.875rem;
}

.archive-filter-swatch {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 8px 18px -12px rgba(10, 10, 10, 0.5);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.archive-filter-swatch:hover,
.archive-filter-swatch:focus-visible {
  transform: translateY(-1px);
}

.archive-filter-swatch.is-active {
  border-color: var(--color-ink);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 0 2px var(--color-ink);
}

.archive-filter-swatch--golden-hour { background: linear-gradient(135deg, var(--color-butter) 0%, #ffd994 100%); }
.archive-filter-swatch--hot-pink    { background: linear-gradient(135deg, var(--color-hot) 0%, #ff94b6 100%); }
.archive-filter-swatch--lilac       { background: linear-gradient(135deg, var(--color-lilac) 0%, #efe2ff 100%); }
.archive-filter-swatch--mint        { background: linear-gradient(135deg, var(--color-mint) 0%, #effff4 100%); }
.archive-filter-swatch--ink         { background: linear-gradient(135deg, var(--color-ink) 0%, #434343 100%); }
.archive-filter-swatch--pearl       { background: linear-gradient(135deg, #f8f4eb 0%, #ffffff 100%); }

/* ── Active filter chips ──────────────────────────────────── */

.archive-filters__card--active {
  border-color: rgba(10, 10, 10, 0.14);
  background: rgba(255, 225, 74, 0.12);
}

.archive-filters__clear-all {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-hot);
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
}

.archive-filters__clear-all:hover {
  color: var(--color-hot-deep);
}

.archive-filters__active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.archive-filter-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(10, 10, 10, 0.2);
  border-radius: var(--r-pill);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.archive-filter-active-chip:hover,
.archive-filter-active-chip:focus-visible {
  color: var(--color-white);
  background: var(--color-hot);
  border-color: var(--color-hot);
}

.archive-filter-active-chip:focus-visible {
  outline: 3px solid var(--color-hot);
  outline-offset: 2px;
}

.archive-filter-remove {
  margin-left: 0.25rem;
  opacity: 0.7;
  font-size: 1em;
  line-height: 1;
}

/* ── Mobile toggle active dot ─────────────────────────────── */

.archive-filters-mobile__active-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-hot);
  flex-shrink: 0;
}

.archive-filters-mobile__toggle[aria-expanded="true"] .archive-filters-mobile__active-dot {
  background: var(--color-white);
}

/* ── Promo sidebar card ───────────────────────────────────── */

.archive-filters__promo {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.125rem;
  border-radius: var(--r-md);
  background: var(--color-butter);
  box-shadow: none;
}

.archive-filters__promo::after {
  content: '';
  position: absolute;
  top: -2rem;
  right: -1.5rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.archive-filters__promo-title {
  position: relative;
  margin: 0.375rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.archive-filters__promo-copy {
  display: none;
}

/* ── Mobile filter toggle ─────────────────────────────────── */

.archive-filters-mobile {
  display: none;
  margin-top: var(--space-5);
}

.archive-filters-mobile__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.archive-filters-mobile__toggle[aria-expanded="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.archive-filters-mobile__toggle-icon {
  position: relative;
  width: 1rem;
  height: 0.75rem;
}

.archive-filters-mobile__toggle-icon::before,
.archive-filters-mobile__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  border-radius: 999px;
  background: var(--color-ink);
  box-shadow: 0 0.3125rem 0 0 var(--color-ink);
}

.archive-filters-mobile__toggle-icon::before {
  top: 0;
}

.archive-filters-mobile__toggle-icon::after {
  top: 0.3125rem;
  width: 70%;
}

.archive-filters-mobile__toggle[aria-expanded="true"] .archive-filters-mobile__toggle-icon::before,
.archive-filters-mobile__toggle[aria-expanded="true"] .archive-filters-mobile__toggle-icon::after {
  background: var(--color-white);
  box-shadow: 0 0.3125rem 0 0 var(--color-white);
}

/* ── Mobile filter drawer ─────────────────────────────────── */

.archive-filter-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-filter-drawer);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.archive-filter-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.archive-filter-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.46);
}

.archive-filter-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(22rem, 88vw);
  max-width: 100%;
  height: 100%;
  padding: var(--space-5);
  background:
    linear-gradient(180deg, rgba(250, 247, 241, 0.96) 0%, rgba(255, 255, 255, 0.98) 14%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 18px 0 46px -30px rgba(10, 10, 10, 0.58);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  overflow-y: auto;
}

.archive-filter-drawer.is-open .archive-filter-drawer__panel {
  transform: translateX(0);
}

.archive-filter-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.archive-filter-drawer__title {
  margin: 0.375rem 0 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink);
}

.archive-filter-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: var(--shadow-card);
}

.archive-filter-drawer__body {
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
}

body.archive-filter-drawer-open {
  overflow: hidden;
}

/* ── Sidebar informational card ───────────────────────────── */

.archive-sidebar-card {
  padding: 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.archive-sidebar-card__eyebrow {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hot);
}

.archive-sidebar-card__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.05;
  color: var(--color-ink);
}

.archive-sidebar-card__copy {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-muted);
}

.archive-collection__content {
  min-width: 0;
}

/* ── Flat toolbar chip rail ───────────────────────────────── */

.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.archive-toolbar__chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.archive-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-line);
  border-radius: var(--r-pill);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.archive-chip:hover {
  color: var(--color-ink);
  transform: translateY(-1px);
}

.archive-chip--active {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.archive-chip--accent:not(.archive-chip--active) {
  background: var(--color-butter);
}

.archive-chip--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.archive-chip__count {
  margin-left: 0.125rem;
  opacity: 0.5;
}

.archive-toolbar__controls,
.archive-toolbar__view {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.archive-toolbar__controls {
  gap: 0.75rem;
}

.archive-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.archive-toolbar__sort-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
}

.archive-toolbar .woocommerce-ordering {
  margin: 0;
}

.archive-toolbar .woocommerce-ordering select,
.archive-toolbar__sort-placeholder {
  min-height: 0;
  max-width: 9.5rem;
  padding: 0 1rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 800;
}

.archive-toolbar .woocommerce-ordering select:focus-visible,
.archive-toolbar__sort-placeholder:focus-visible {
  outline: 3px solid var(--color-hot);
  outline-offset: 2px;
}

.archive-toolbar__sep {
  display: block;
  flex-shrink: 0;
  width: 1px;
  height: 1rem;
  background: var(--color-line);
}

.archive-toolbar__view {
  gap: 0.375rem;
}

.archive-view-toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-ink);
  opacity: 0.4;
}

.archive-view-toggle.is-active {
  opacity: 1;
}

.archive-view-toggle:focus-visible {
  outline: 3px solid var(--color-hot);
  outline-offset: 2px;
}

/* ── Product grid ─────────────────────────────────────────── */

.archive-grid {
  margin-top: 0;
}

.archive-grid__products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.archive-grid--grid3 .archive-grid__products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.archive-grid__item {
  min-width: 0;
}

.archive-grid .product-card {
  height: 100%;
}

.archive-grid__pagination {
  margin-top: 2.5rem;
}

.archive-grid__pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.archive-grid__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: 0.625rem;
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}

.archive-grid__pagination .page-numbers.current {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white);
}

.archive-empty-state {
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--color-line);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.archive-grid .archive-empty-state {
  margin-top: var(--space-5);
}

.archive-empty-state__eyebrow {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hot);
}

.archive-empty-state__title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-ink);
}

.archive-empty-state__copy {
  max-width: 38ch;
  margin: 0.875rem auto 0;
  color: var(--color-muted);
}

.archive-empty-state__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.125rem;
  min-height: 2.875rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--color-hot);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-pop);
}

.archive-empty-state__link:hover {
  color: var(--color-white);
  background: var(--color-hot-deep);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (min-width: 1440px) {
  .archive-header__inner,
  .archive-collection__tools-inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (max-width: 1199px) {
  .archive-grid__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .archive-collection__layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .archive-collection__sidebar {
    display: none;
  }

  .archive-collection__sticky-tools {
    top: 100px;
  }

  .archive-filters-mobile {
    display: flex;
  }

  .archive-toolbar__view {
    display: none;
  }
}

@media (max-width: 767px) {
  .archive-collection {
    padding-bottom: var(--space-12);
  }

  .archive-header__inner {
    padding-top: 2rem;
    padding-bottom: 1.75rem;
  }

  .archive-header__title {
    font-size: clamp(3rem, 18vw, 4.5rem);
  }

  .archive-header__art {
    right: -1.5rem;
  }

  .archive-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
  }

  .archive-toolbar__controls {
    justify-content: space-between;
  }

  .archive-toolbar .woocommerce-ordering,
  .archive-toolbar .woocommerce-ordering select {
    width: auto;
  }

  .archive-filters__pill-grid {
    grid-template-columns: 1fr;
  }

  .archive-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
  }

  .archive-grid__item--promo-wide {
    grid-column: span 2;
  }
}

@media (max-width: 479px) {
  .archive-header__meta {
    gap: 0.75rem;
  }

  .archive-header__badge {
    width: 100%;
    justify-content: center;
  }

  .archive-filter-drawer__panel {
    width: 100%;
    padding: var(--space-4);
  }

  .archive-grid__pagination .nav-links {
    gap: 0.25rem;
  }
}

@media (max-width: 359px) {
  .archive-grid__products,
  .archive-grid--grid3 .archive-grid__products {
    grid-template-columns: 1fr;
  }

  .archive-grid__item--promo-wide {
    grid-column: span 1;
  }
}

/* =============================================================
   Promo tile — in-grid promotional cards
   ============================================================= */

.archive-grid__item--promo-wide {
  grid-column: span 2;
}

.promo-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
}

/* ── Flash offer tile ─── */
.promo-tile--flash {
  position: relative;
  background: var(--color-ink);
  color: var(--color-white);
  min-height: 100%;
}

.promo-tile__flash-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1.75rem;
}

.promo-tile__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.promo-tile__badge--hot {
  background: var(--color-hot);
  color: var(--color-white);
}

.promo-tile__badge--butter {
  background: var(--color-butter);
  color: var(--color-ink);
}

.promo-tile__flash-heading {
  margin: 0.875rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.promo-tile__flash-free {
  color: var(--color-butter);
}

.promo-tile__flash-copy {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 28ch;
}

.promo-tile__countdown {
  margin-top: 1.375rem;
}

.promo-tile__countdown-label {
  margin: 0 0 0.4rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

.promo-tile__countdown-blocks {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.promo-tile__countdown-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.1);
}

.promo-tile__countdown-digit {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-butter);
  letter-spacing: 0.04em;
}

.promo-tile__countdown-sep {
  font-weight: 900;
  color: var(--color-white);
  opacity: 0.5;
  padding: 0 0.0625rem;
}

/* ── Freebie tile ─── */
.promo-tile--freebie {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.25rem;
  background: linear-gradient(135deg, var(--color-butter) 0%, #ffe87a 100%);
  min-height: 11rem;
}

.promo-tile--freebie::after {
  content: '';
  position: absolute;
  top: -2rem;
  right: -1.5rem;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.promo-tile__freebie-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.promo-tile__freebie-heading {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

/* ── Shop-the-look tile ─── */
.promo-tile--shop-look {
  position: relative;
  min-height: 0;
  aspect-ratio: 3 / 4;
  background: linear-gradient(155deg, var(--color-lilac) 0%, #8b6fd4 100%);
  cursor: pointer;
}

.promo-tile__shop-look-art {
  position: absolute;
  inset: 0;
  display: block;
}

.promo-tile__shop-look-art svg {
  width: 100%;
  height: 100%;
}

.promo-tile--shop-look:hover .promo-tile__shop-look-overlay,
.promo-tile--shop-look:focus-visible .promo-tile__shop-look-overlay {
  background: linear-gradient(180deg, transparent 30%, rgba(10, 10, 10, 0.82) 100%);
}

.promo-tile--shop-look:focus-visible {
  outline: 3px solid var(--color-hot);
  outline-offset: 2px;
}

.promo-tile__shop-look-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.7) 100%);
  transition: background var(--transition-base);
}

.promo-tile__shop-look-text {
  margin-top: 0.625rem;
}

.promo-tile__shop-look-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--color-white);
}

.promo-tile__shop-look-sub {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
  .promo-tile--flash {
    min-height: 12rem;
  }

  .promo-tile__flash-inner {
    padding: 1.25rem;
  }
}

@media (max-width: 479px) {
  .promo-tile--freebie {
    min-height: 9rem;
  }

  .promo-tile__flash-heading {
    font-size: 1.75rem;
  }
}

/* =============================================================
   Toolbar extras: result count, sort submit, pagination hover
   ============================================================= */

.archive-toolbar__count {
  flex-shrink: 0;
}

.archive-toolbar__count .woocommerce-result-count,
.archive-toolbar__count-text {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Fallback sort submit button (noscript only) */
.archive-sort-submit {
  min-height: 2.625rem;
  padding: 0.675rem 0.95rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--r-pill);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: 700;
}

.archive-grid__pagination .page-numbers:not(.current):not(.dots):hover,
.archive-grid__pagination .page-numbers:not(.current):not(.dots):focus-visible {
  border-color: rgba(10, 10, 10, 0.25);
  background: rgba(10, 10, 10, 0.05);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.archive-grid__pagination .page-numbers:focus-visible {
  outline: 3px solid var(--color-hot);
  outline-offset: 2px;
}

.archive-grid__pagination .page-numbers.dots {
  min-width: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 0.125rem;
  color: var(--color-muted);
  pointer-events: none;
  font-weight: 700;
}

/* =============================================================
   Archive header sizing guard.
   Keeps the archive hero aligned with design_files/collection.jsx
   even when older/customizer CSS tries to restore a rounded style.
   ============================================================= */
.archive-collection > .archive-header,
.woocommerce-shop .archive-header,
.post-type-archive-product .archive-header,
.tax-product_cat .archive-header,
.tax-product_tag .archive-header {
  display: block !important;
  position: relative !important;
  align-items: initial !important;
  justify-content: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
  isolation: isolate;
}

.archive-collection > .archive-header .archive-header__inner,
.woocommerce-shop .archive-header__inner,
.post-type-archive-product .archive-header__inner,
.tax-product_cat .archive-header__inner,
.tax-product_tag .archive-header__inner {
  display: block !important;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto;
  padding: 2.5rem var(--container-pad) 2rem !important;
  transform: none !important;
}

.archive-collection > .archive-header .archive-header__content,
.woocommerce-shop .archive-header__content,
.post-type-archive-product .archive-header__content,
.tax-product_cat .archive-header__content,
.tax-product_tag .archive-header__content {
  display: block !important;
  max-width: min(48rem, calc(100% - clamp(9rem, 17vw, 15rem)));
  margin: 0;
  transform: none !important;
}

.archive-collection > .archive-header .archive-header__art,
.woocommerce-shop .archive-header__art,
.post-type-archive-product .archive-header__art,
.tax-product_cat .archive-header__art,
.tax-product_tag .archive-header__art {
  position: absolute !important;
  inset: 1.25rem max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))) auto auto !important;
  z-index: 1;
  width: clamp(8rem, 15vw, 13.75rem) !important;
  height: clamp(8rem, 15vw, 13.75rem) !important;
  max-width: 34vw;
  max-height: 34vw;
  overflow: hidden;
  opacity: 0.3;
  transform: none !important;
  pointer-events: none;
}

.archive-collection > .archive-header .archive-header__art svg,
.woocommerce-shop .archive-header__art svg,
.post-type-archive-product .archive-header__art svg,
.tax-product_cat .archive-header__art svg,
.tax-product_tag .archive-header__art svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (min-width: 1440px) {
  .archive-collection > .archive-header .archive-header__inner,
  .woocommerce-shop .archive-header__inner,
  .post-type-archive-product .archive-header__inner,
  .tax-product_cat .archive-header__inner,
  .tax-product_tag .archive-header__inner {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

@media (max-width: 767px) {
  .archive-collection > .archive-header .archive-header__inner,
  .woocommerce-shop .archive-header__inner,
  .post-type-archive-product .archive-header__inner,
  .tax-product_cat .archive-header__inner,
  .tax-product_tag .archive-header__inner {
    padding-top: 2rem !important;
    padding-bottom: 1.75rem !important;
  }

  .archive-collection > .archive-header .archive-header__content,
  .woocommerce-shop .archive-header__content,
  .post-type-archive-product .archive-header__content,
  .tax-product_cat .archive-header__content,
  .tax-product_tag .archive-header__content {
    max-width: none;
    padding-right: clamp(2rem, 20vw, 6rem);
  }

  .archive-collection > .archive-header .archive-header__art,
  .woocommerce-shop .archive-header__art,
  .post-type-archive-product .archive-header__art,
  .tax-product_cat .archive-header__art,
  .tax-product_tag .archive-header__art {
    inset: 1rem -1.5rem auto auto !important;
    width: clamp(6.5rem, 30vw, 9rem) !important;
    height: clamp(6.5rem, 30vw, 9rem) !important;
  }
}