/*
 * Shop Archive — Commerce-first redesign (Option 2: chips + sidebar filter).
 *
 * Layout: compact header → collection chips → thin toolbar → 2-col
 *   (filter sidebar + product grid) → pagination. Wide container (shop-max).
 * Reuses .wpdl-product-card (card.css) and .wpdl-filter-sidebar (filter-sidebar.css);
 * WooCommerce blocks (breadcrumbs, query-title, results-count, catalog-sorting,
 * product-collection) are re-skinned here.
 *
 * Container width is widened by redefining WP's constrained content-size custom
 * property on the root — every constrained child then honours shop-max (1440),
 * no per-child max-width override / specificity fight.
 *
 * Tokens read: semantic.color.{text,brand,border,divider,surface,accent},
 *   semantic.space.layout.shop-max, semantic.typography.{display,body}, space.*,
 *   duration.base / easing.default.
 */

/* --- Container (wide) ------------------------------------------------- */
.wpdl-shop-archive {
  /* Widen the constrained content box: children read this custom prop. */
  --wp--style--global--content-size: var(--wp--custom--semantic--space--layout--shop-max);

  padding-block: var(--wp--custom--space--6) var(--wp--custom--space--11);
}

/* --- Store notices --------------------------------------------------- */
.wpdl-shop-archive .wc-block-store-notices {
  margin-block: 0 var(--wp--custom--space--4);
}

/* Empty notices block must not reserve vertical space above the header. */
.wpdl-shop-archive .wc-block-store-notices:empty {
  display: none;
}

/* --- Compact header (breadcrumb + title + count) --------------------- */
.wpdl-shop-archive__header.wp-block-group {
  gap: var(--wp--custom--space--2) var(--wp--custom--space--6);
  margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-shop-archive__breadcrumbs.wc-block-breadcrumbs {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0 var(--wp--custom--space--1);
}

.wpdl-shop-archive__breadcrumbs.wc-block-breadcrumbs a,
.wpdl-shop-archive__breadcrumbs .wc-block-breadcrumbs__separator {
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
}

.wpdl-shop-archive__breadcrumbs.wc-block-breadcrumbs a:hover {
  color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-shop-archive__title--live.wp-block-query-title {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem);   /* ~36px desktop — not a hero */
  font-weight: 500;
  line-height: 1.05;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0;
}

.wpdl-shop-archive__count--header .wc-block-product-results-count,
.wpdl-shop-archive__count--header.wc-block-product-results-count {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
}

/* --- Term description ------------------------------------------------- */
.wpdl-shop-archive__description {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--wp--custom--semantic--color--text--muted);
  max-width: 40rem;
  margin-block: 0 var(--wp--custom--space--5);
}

/* --- Collection chips (spacing in shop context) ---------------------- */
.wpdl-shop-archive .wpdl-collection-chips {
  margin-block: 0 var(--wp--custom--space--2);
}

/* --- Toolbar (thin, hairline top + bottom) --------------------------- */
.wpdl-shop-archive__toolbar.wp-block-group {
  gap: var(--wp--custom--space--4);
  padding-block: 0 var(--wp--custom--space--3);
  margin-block: 0 var(--wp--custom--space--7);
  border-block-end: 1px solid var(--wp--custom--semantic--color--divider--subtle);
}

.wpdl-shop-archive__toolbar-left.wp-block-group {
  gap: var(--wp--custom--space--5);
}

.wpdl-shop-archive__count.wc-block-product-results-count {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--wp--custom--semantic--color--text--muted);
  margin-block: 0;
}

/* Catalog sorting — borderless minimal select */
.wpdl-shop-archive__sort.wc-block-catalog-sorting {
  display: flex;
  align-items: center;
}

.wpdl-shop-archive__sort select,
.wpdl-shop-archive .wc-block-catalog-sorting select {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--wp--custom--semantic--color--text--primary);
  border: none;
  background: transparent;
  cursor: pointer;
  padding-inline-end: var(--wp--custom--space--3);
}

/* --- Body: 2-col (sidebar + results) --------------------------------- */
.wpdl-shop-archive__body.wp-block-group {
  gap: var(--wp--custom--space--7);   /* 32 — rail ↔ grid */
  align-items: flex-start;
  margin-block: 0;
}

.wpdl-shop-archive__results.wp-block-group {
  flex: 1 1 auto;
  min-inline-size: 0;   /* let the grid shrink inside the flex row */
  margin-block: 0;
}

/* --- Product grid (4-col within results) ----------------------------- */
.wpdl-shop-archive .wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--custom--space--9) var(--wp--custom--space--6);   /* 48 row / 24 col — vertical air */
  list-style: none;
  padding: 0;
  margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-shop-archive .wc-block-product-template > li {
  width: auto;
  margin: 0;

  /* Grid stretches the <li> to the tallest card in its row by default —
     without this, the card inside doesn't fill that height, so a 2-line
     title on one card leaves the others visibly shorter. */
  display: flex;
}

/* Card surface — mirrors .wpdl-showcase (homepage) exactly, per user request:
   same border/radius/shadow/lift/zoom treatment on both pages. */
.wpdl-shop-archive .wpdl-product-card.wp-block-group {
  background: rgb(255 255 255);
  border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--component--card--radius);
  overflow: hidden;
  box-shadow: var(--wp--custom--component--card--shadow);
  flex: 1 1 auto;
  transition:
    box-shadow var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    transform  var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-shop-archive .wpdl-product-card:is(:hover, :focus-within).wp-block-group {
  box-shadow: var(--wp--custom--semantic--shadow--raised);
  transform: translateY(-0.25rem);
}

/* Portrait image, bleeds to the card edge — card provides the clipping. */
.wpdl-shop-archive .wpdl-product-card__img.wp-block-woocommerce-product-image {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  margin-block-end: 0;
}

.wpdl-shop-archive .wpdl-product-card__img.wp-block-woocommerce-product-image img {
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
}

.wpdl-shop-archive .wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__img.wp-block-woocommerce-product-image img {
  transform: scale(1.06);
}

/* Text insets — the border wraps tight, so title/price/CTA need their own
   inline padding to breathe inside it. */
.wpdl-shop-archive .wpdl-product-card__title {
  padding-inline: var(--wp--custom--space--3);
  padding-block-start: var(--wp--custom--space--3);
  margin-block: 0 var(--wp--custom--space--1);
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--easing--default);
}

.wpdl-shop-archive .wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__title {
  color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-shop-archive .wpdl-product-card__price {
  padding-inline: var(--wp--custom--space--3);
  margin-block: 0;
  color: var(--wp--custom--semantic--color--text--primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.wpdl-shop-archive .wpdl-product-card__cta--cart {
  padding-inline: var(--wp--custom--space--3);
  padding-block-end: var(--wp--custom--space--2);
  margin-block-start: auto;
}

@media (prefers-reduced-motion: reduce) {
  .wpdl-shop-archive .wpdl-product-card.wp-block-group,
  .wpdl-shop-archive .wpdl-product-card__img.wp-block-woocommerce-product-image img {
    transition: none;
  }

  .wpdl-shop-archive .wpdl-product-card:is(:hover, :focus-within).wp-block-group {
    transform: none;
    box-shadow: var(--wp--custom--semantic--shadow--raised);
  }

  .wpdl-shop-archive .wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__img.wp-block-woocommerce-product-image img {
    transform: none;
  }
}

/* --- Pagination ------------------------------------------------------ */
.wpdl-shop-archive .wpdl-shop-archive__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wp--custom--space--2);
  margin-block: var(--wp--custom--space--9);
}

/* stylelint-disable-next-line no-descending-specificity -- unrelated to breadcrumb anchors above */
.wpdl-shop-archive .wpdl-shop-archive__pagination a,
.wpdl-shop-archive .wpdl-shop-archive__pagination .page-numbers {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--wp--custom--radius--full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-shop-archive .wpdl-shop-archive__pagination .page-numbers.current {
  background-color: var(--wp--custom--semantic--color--text--primary);
  color: var(--wp--custom--semantic--color--background--canvas);
}

.wpdl-shop-archive .wpdl-shop-archive__pagination .page-numbers.dots {
  width: auto;
}

.wpdl-shop-archive .wpdl-shop-archive__pagination a:hover {
  background-color: var(--wp--custom--semantic--color--surface--secondary);
  color: var(--wp--custom--semantic--color--text--primary);
}

/* --- Load More (category page — replaces prev/numbers pagination) ---- */
.wpdl-shop-archive .wpdl-load-more .wp-block-query-pagination-next {
  border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--semantic--color--text--primary);
  border-radius: var(--wp--custom--component--card--radius);
  padding-inline: var(--wp--custom--space--6);
  color: var(--wp--custom--semantic--color--text--primary);
  transition:
    background var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-shop-archive .wpdl-load-more .wp-block-query-pagination-next:hover {
  background: var(--wp--custom--semantic--color--text--primary);
  color: var(--wp--custom--semantic--color--background--canvas);
}

.wpdl-shop-archive .wpdl-load-more .wp-block-query-pagination-next[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* stylelint-disable no-descending-specificity -- unrelated to the
   .wpdl-load-more rules above: mutually exclusive pagination UI variants
   (classic numbered vs. category-page Load More), never on the same page */
.wpdl-shop-archive .wpdl-shop-archive__pagination .wp-block-query-pagination-previous,
.wpdl-shop-archive .wpdl-shop-archive__pagination .wp-block-query-pagination-next {
  font-size: 1rem;
  border: var(--wp--custom--border-width--hairline) solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-shop-archive .wpdl-shop-archive__pagination .wp-block-query-pagination-previous:hover,
.wpdl-shop-archive .wpdl-shop-archive__pagination .wp-block-query-pagination-next:hover {
  border-color: var(--wp--custom--semantic--color--text--primary);
}
/* stylelint-enable no-descending-specificity */

/* --- Empty state ----------------------------------------------------- */
.wpdl-shop-archive__empty.wp-block-group {
  padding: var(--wp--custom--space--10) var(--wp--custom--space--9);
  text-align: center;
  background-color: var(--wp--custom--semantic--color--surface--primary);
  margin-block: 0 var(--wp--custom--space--9);
}

.wpdl-shop-archive__empty-heading {
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--wp--custom--semantic--color--text--primary);
  margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-shop-archive__empty-body {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--wp--custom--semantic--color--text--muted);
  max-width: 22.5rem;
  margin: 0 auto;
}

/* --- Tablet (< 64em / 1024px): sidebar stacks, grid 3-col ------------- */
@media (width < 64em) {
  .wpdl-shop-archive__body.wp-block-group {
    flex-direction: column;
    gap: var(--wp--custom--space--7);
  }

  .wpdl-shop-archive .wc-block-product-template {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--custom--space--5);
  }
}

/* --- Mobile (< 40em / 640px): grid 2-col ----------------------------- */
@media (width < 40em) {
  .wpdl-shop-archive .wc-block-product-template {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--custom--space--4);
  }

  .wpdl-shop-archive__header.wp-block-group {
    gap: var(--wp--custom--space--2);
  }
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wpdl-shop-archive .wpdl-shop-archive__pagination a,
  .wpdl-shop-archive .wpdl-shop-archive__pagination .page-numbers {
    transition: none;
  }
}

/* --- Toolbar right cluster (Figma: count + sort pill + view toggles) ------- */
.wpdl-shop-archive__toolbar-right.wp-block-group {
  gap: var(--wp--custom--space--6); /* 24 */
  align-items: center;
}

/* Breadcrumb sits at the toolbar's left; toolbar is one row (space-between). */
.wpdl-shop-archive__toolbar .wpdl-shop-archive__breadcrumbs {
  margin-block: 0;
}

/* Sort — bordered dropdown pill (Figma r=4, pad 8/12, border). */
.wpdl-shop-archive__sort select,
.wpdl-shop-archive .wc-block-catalog-sorting select {
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--custom--semantic--color--surface--primary);
  padding-block: var(--wp--custom--space--2);
  padding-inline: var(--wp--custom--space--3);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--wp--custom--semantic--color--text--primary);
}

/* View toggles — grid / list (Figma 28px, r=4, active = cream fill). */
.wpdl-shop-archive__view-toggles {
  display: flex;
  gap: var(--wp--custom--space--2);
}

.wpdl-shop-archive__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 1px solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--radius--sm);
  background: transparent;
  color: var(--wp--custom--semantic--color--text--secondary);
  cursor: pointer;
  transition: background-color var(--wp--custom--duration--fast, 150ms) ease,
    color var(--wp--custom--duration--fast, 150ms) ease;
}

.wpdl-shop-archive__view:hover {
  color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-shop-archive__view.is-active {
  background: var(--wp--custom--semantic--color--surface--secondary);
  color: var(--wp--custom--semantic--color--text--primary);
  border-color: var(--wp--custom--semantic--color--border--base);
}

.wpdl-shop-archive__view:focus-visible {
  outline: 2px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 2px;
}

/* --- Borderless product cards (match Figma + homepage showcases) ----------
   The shop grid reuses .wpdl-product-card (bordered by card.css); override to
   the borderless editorial treatment: rounded image on cream, name + gold
   price below, no card box. Scoped to the archive results only. */
.wpdl-shop-archive .wpdl-product-card.wp-block-group {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  gap: var(--wp--custom--space--4);
}

.wpdl-shop-archive .wpdl-product-card:is(:hover, :focus-within).wp-block-group {
  transform: none;
  box-shadow: none;
}

/* Media = the only surface: rounded r=8 (radius.sm), cream, clips img/badge. */
.wpdl-shop-archive .wpdl-product-card__media {
  position: relative;
  border-radius: var(--wp--custom--radius--sm);
  overflow: hidden;
  background: var(--wp--custom--semantic--color--surface--secondary);
  margin-block: 0;
}

/* Decorative wishlist heart, top-right (Figma). */
.wpdl-shop-archive .wpdl-product-card__media::after {
  content: "\2661";
  position: absolute;
  inset-block-start: var(--wp--custom--space--3);
  inset-inline-end: var(--wp--custom--space--3);
  inline-size: 2rem;
  block-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--custom--semantic--color--surface--primary);
  color: var(--wp--custom--semantic--color--text--primary);
  font-size: 1rem;
  line-height: 1;
  box-shadow: var(--wp--custom--shadow--sm);
  pointer-events: none;
  z-index: 3;
}

.wpdl-shop-archive .wpdl-product-card__img.wp-block-woocommerce-product-image {
  border-radius: 0;
  margin-block-end: 0;
}

/* Name — borderless, ink, no card padding. */
.wpdl-shop-archive .wpdl-product-card .wpdl-product-card__title {
  padding-inline: 0;
  padding-block-start: 0;
  margin-block: 0 var(--wp--custom--space--1);
  font-size: var(--wp--custom--typography--size--base, 0.9375rem);
  font-weight: 500;
  color: var(--wp--custom--semantic--color--text--primary);
}

/* Price — gold (Figma accent.secondary). */
.wpdl-shop-archive .wpdl-product-card .wpdl-product-card__price {
  padding-inline: 0;
  color: var(--wp--custom--semantic--color--accent--secondary);
  font-weight: 600;
  font-size: var(--wp--custom--typography--size--sm, 0.875rem);
}