/*
 * Éclore Aesthetics — Shop collection page (SHOP-DESIGN-SPEC §2)
 * ─────────────────────────────────────────────────────────────────────────────
 * Collection header (§3 opener at shop scale, Terracotta count superscript),
 * FILTERS row between full-width hairlines, the signature mixed-scale grid
 * (4-up rows punctuated by 2-up featured rows), centered counter line.
 * Card anatomy lives in product-card.css.
 */

.shop-archive {
  padding-block: var(--section-y-tight);
}

/* ─── Collection header ──────────────────────────────────────────────────────── */

.shop-header {
  margin-bottom: var(--space-xl);
}

.shop-header__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-heading);
}

.shop-header__count {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-terracotta); /* large-text context — clears §4 */
  margin-left: 0.35em;
  vertical-align: super;
}

.shop-header__intro {
  max-width: var(--container-narrow);
  margin-top: var(--space-md);
  color: var(--color-text-muted);
}

/* ─── FILTERS row — caps links between hairlines ─────────────────────────────── */

.shop-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-block: 1px solid var(--color-hairline);
  padding-block: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.shop-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-filters__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--dur-micro) var(--ease-standard);
}

.shop-filters__link:hover {
  color: var(--color-terracotta);
}

.shop-filters__link.is-active {
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-terracotta);
  padding-bottom: 2px;
}

/* Native select only — no dropdown chrome beyond §5.10 fields */
.shop-filters__ordering .orderby {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-xs);
  min-height: 2.5rem;
}

.shop-filters__ordering .orderby:focus {
  border-color: var(--color-ink);
}

/* ─── Mixed-scale grid (§2) ──────────────────────────────────────────────────── */
/* Cycle of 10: two 4-up rows (items 1–8, span 3) then one 2-up featured row
   (items 9–10, span 6). Below lg: 2-up; below sm: 1-up. */

.shop-archive ul.products,
.product-related ul.products {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-archive ul.products > li {
  grid-column: span 3;
}

.shop-archive ul.products > li:nth-child(10n + 9),
.shop-archive ul.products > li:nth-child(10n + 10) {
  grid-column: span 6;
}

/* Related products: always 3-up standard (§4) */
.product-related ul.products > li {
  grid-column: span 4;
}

@media (max-width: 1023px) {
  .shop-archive ul.products > li,
  .shop-archive ul.products > li:nth-child(10n + 9),
  .shop-archive ul.products > li:nth-child(10n + 10) {
    grid-column: span 6; /* 2-up; featured rows collapse to standard */
  }

  .product-related ul.products > li {
    grid-column: span 6;
  }
}

@media (max-width: 599px) {
  .shop-archive ul.products > li,
  .shop-archive ul.products > li:nth-child(10n + 9),
  .shop-archive ul.products > li:nth-child(10n + 10),
  .product-related ul.products > li {
    grid-column: span 12; /* 1-up */
  }
}

/* ─── Counter line under the grid ────────────────────────────────────────────── */

.shop-counter {
  margin-top: var(--space-xl);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.shop-archive__empty {
  max-width: var(--container-narrow);
}

/* ─── Woo notices — one quiet band, no icon chrome ───────────────────────────── */
/* Woo prints the action button BEFORE the message text — row-reverse keeps the
   text reading first with the button pinned to the right edge, contained. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between; /* row-reverse: text lands left, button right */
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline);
  border-left: 2px solid var(--color-terracotta);
  background: var(--color-stone);
  font-size: 0.9375rem;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
  min-height: 2.5rem;
  padding: 0.625rem 1.25rem;
}

/* ─── Header cart — tracked caps + Terracotta count superscript ──────────────── */

.header-cart {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-standard);
}

.header-cart:hover {
  color: var(--color-terracotta);
}

/* Empty cart — the link only earns its header slot once something is in it.
   Hidden (not skipped server-side) so the cart-fragments swap can reveal it. */
.header-cart--empty {
  display: none;
}

.header-cart__count {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-terracotta);
  margin-left: 2px;
  vertical-align: super;
}