/* ==========================================================================
   mutoumise — shop catalog (ported from design/pages/shop.html + mobile)
   Everything is scoped to .shop-head / .shop-toolbar / .shop-catalog:
   this sheet loads on every Woo page, and ul.products elsewhere (related
   products, etc.) must not inherit the editorial grid.
   ========================================================================== */

/* -- page head ------------------------------------------------------------- */

.shop-head {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-12) var(--sp-8) 0;
}
.shop-head .section-head { margin-top: var(--sp-8); margin-bottom: var(--sp-8); }
.shop-head .section-head h1 { font-size: var(--text-3xl); }

/* -- filter toolbar -------------------------------------------------------- */

.shop-toolbar {
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--sp-8); margin-bottom: var(--sp-16);
}
.shop-toolbar__inner {
  border-top: var(--hairline);
  padding-top: var(--sp-4);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-8);
}
.shop-toolbar .filters { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.shop-toolbar .filters a {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sumi-faint); padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out);
}
.shop-toolbar .filters a:hover { color: var(--sumi); }
.shop-toolbar .filters a[aria-current] { color: var(--sumi); border-color: var(--sumi); }
.shop-toolbar .filters .count {
  font-family: var(--font-display);
  letter-spacing: 0.08em; margin-left: var(--sp-1);
}
.shop-toolbar .sort { display: flex; align-items: baseline; gap: var(--sp-4); flex: none; }
.shop-toolbar .woocommerce-ordering { width: 11rem; }
.shop-toolbar select.orderby { font-size: var(--text-sm); padding-block: var(--sp-1); }

/* -- catalog: staggered 12-col editorial grid, repeating every 20 cards ----- */

.shop-catalog { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-8); }
.shop-catalog ul.products {
  display: grid; grid-template-columns: repeat(12, 1fr);
  column-gap: var(--sp-6); row-gap: var(--sp-20);
}
/* row 1 */
.shop-catalog ul.products > li:nth-child(20n+1)  { grid-column: 1 / 6; }
.shop-catalog ul.products > li:nth-child(20n+2)  { grid-column: 6 / 10;  margin-top: var(--sp-16); }
.shop-catalog ul.products > li:nth-child(20n+3)  { grid-column: 10 / 13; margin-top: var(--sp-8); }
/* row 2 */
.shop-catalog ul.products > li:nth-child(20n+4)  { grid-column: 2 / 5;   margin-top: calc(-1 * var(--sp-8)); }
.shop-catalog ul.products > li:nth-child(20n+5)  { grid-column: 5 / 10; }
.shop-catalog ul.products > li:nth-child(20n+6)  { grid-column: 10 / 13; margin-top: var(--sp-12); }
/* row 3 — wide breaker */
.shop-catalog ul.products > li:nth-child(20n+7)  { grid-column: 1 / 7; }
.shop-catalog ul.products > li:nth-child(20n+8)  { grid-column: 8 / 12;  margin-top: var(--sp-16); }
/* row 4 */
.shop-catalog ul.products > li:nth-child(20n+9)  { grid-column: 1 / 5;   margin-top: calc(-1 * var(--sp-8)); }
.shop-catalog ul.products > li:nth-child(20n+10) { grid-column: 5 / 10;  margin-top: var(--sp-8); }
.shop-catalog ul.products > li:nth-child(20n+11) { grid-column: 10 / 13; }
/* row 5 */
.shop-catalog ul.products > li:nth-child(20n+12) { grid-column: 1 / 4; }
.shop-catalog ul.products > li:nth-child(20n+13) { grid-column: 4 / 9;   margin-top: var(--sp-16); }
.shop-catalog ul.products > li:nth-child(20n+14) { grid-column: 9 / 13;  margin-top: var(--sp-8); }
/* row 6 */
.shop-catalog ul.products > li:nth-child(20n+15) { grid-column: 1 / 6;   margin-top: calc(-1 * var(--sp-8)); }
.shop-catalog ul.products > li:nth-child(20n+16) { grid-column: 6 / 10;  margin-top: var(--sp-12); }
.shop-catalog ul.products > li:nth-child(20n+17) { grid-column: 10 / 13; }
/* row 7 — wide breaker */
.shop-catalog ul.products > li:nth-child(20n+18) { grid-column: 1 / 5;   margin-top: var(--sp-8); }
.shop-catalog ul.products > li:nth-child(20n+19) { grid-column: 6 / 12;  margin-top: calc(-1 * var(--sp-8)); }
/* row 8 — lone closer */
.shop-catalog ul.products > li:nth-child(20n)    { grid-column: 2 / 7; }
/* wide items read as landscape breaks */
.shop-catalog ul.products > li:nth-child(20n+7)  .product-card__media,
.shop-catalog ul.products > li:nth-child(20n+19) .product-card__media { aspect-ratio: 4 / 3; }

/* -- end of catalog -------------------------------------------------------- */

.shop-catalog .catalog__end { margin-top: var(--sp-20); }
.shop-catalog .catalog__end .label { display: block; margin-top: var(--sp-4); }

/* -- pagination (only appears past one page) -------------------------------- */

.shop-catalog .woocommerce-pagination { margin-top: var(--sp-16); }
.shop-catalog .woocommerce-pagination ul { display: flex; justify-content: center; gap: var(--sp-2); }
.shop-catalog .woocommerce-pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px;
  font-family: var(--font-display); color: var(--sumi-soft);
  border-radius: var(--radius);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.shop-catalog .woocommerce-pagination a.page-numbers:hover { color: var(--sumi); background: var(--washi-deep); }
.shop-catalog .woocommerce-pagination .page-numbers.current { color: var(--sumi); border: var(--hairline); }

/* ==========================================================================
   ≤960px — the mobile card's layout: chip filters on a full-bleed hairline,
   sort below, 2-col grid with alternating drops and full-width breakers
   ========================================================================== */

@media (max-width: 960px) {
  .shop-head { padding: var(--sp-8) var(--sp-6) 0; }
  .shop-head .section-head { margin-top: var(--sp-6); }

  /* toolbar: hairline across the viewport, scrollable chips */
  .shop-toolbar { padding-inline: 0; margin-bottom: 0; }
  .shop-toolbar__inner { display: block; }
  .shop-toolbar .filters {
    flex-wrap: nowrap; gap: var(--sp-2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--sp-1) var(--sp-6);
  }
  .shop-toolbar .filters::-webkit-scrollbar { display: none; }
  .shop-toolbar .filters a {
    flex: none; display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 var(--sp-4);
    border: var(--hairline); border-radius: var(--radius);
    letter-spacing: 0.14em; color: var(--sumi-soft); white-space: nowrap;
    transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }
  .shop-toolbar .filters a[aria-current] { border-color: var(--sumi); color: var(--sumi); }
  .shop-toolbar .filters .count { margin-left: var(--sp-2); color: var(--sumi-faint); }
  .shop-toolbar .filters a[aria-current] .count { color: var(--walnut-warm); }
  .shop-toolbar .sort {
    justify-content: flex-end; gap: var(--sp-3);
    padding-inline: var(--sp-6); margin-top: var(--sp-3);
  }
  .shop-toolbar .woocommerce-ordering { width: 10.5rem; }
  .shop-toolbar select.orderby { min-height: 44px; }

  /* catalog: 2-up with ma, not a lattice */
  .shop-catalog { padding-inline: var(--sp-6); margin-top: var(--sp-8); }
  .shop-catalog ul.products {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4); row-gap: var(--sp-8);
  }
  /* reset the desktop composition (nth-child(n) matches the specificity above) */
  .shop-catalog ul.products > li:nth-child(n) { grid-column: auto; margin-top: 0; }
  /* right-column cards sit a half-step lower */
  .shop-catalog ul.products > li:nth-child(20n+2),
  .shop-catalog ul.products > li:nth-child(20n+4),
  .shop-catalog ul.products > li:nth-child(20n+6),
  .shop-catalog ul.products > li:nth-child(20n+9),
  .shop-catalog ul.products > li:nth-child(20n+11),
  .shop-catalog ul.products > li:nth-child(20n+13),
  .shop-catalog ul.products > li:nth-child(20n+15),
  .shop-catalog ul.products > li:nth-child(20n+17) { margin-top: var(--sp-6); }
  /* wide landscape breakers */
  .shop-catalog ul.products > li:nth-child(20n+7),
  .shop-catalog ul.products > li:nth-child(20n+19) { grid-column: 1 / -1; margin-block: var(--sp-4); }
  .shop-catalog ul.products > li:nth-child(20n+7)  .product-card__media,
  .shop-catalog ul.products > li:nth-child(20n+19) .product-card__media { aspect-ratio: 16 / 10; }
  .shop-catalog ul.products > li:nth-child(20n+7)  .product-card__title,
  .shop-catalog ul.products > li:nth-child(20n+19) .product-card__title { font-size: var(--text-xl); }
  /* lone closer keeps to the right column */
  .shop-catalog ul.products > li:nth-child(20n) { grid-column: 2; margin-top: var(--sp-6); }

  .shop-catalog .catalog__end { margin-top: var(--sp-16); }
}

/* ==========================================================================
   ≤560px — phone-size card typography from the mobile card
   ========================================================================== */

@media (max-width: 560px) {
  .shop-catalog .product-card__title { font-size: var(--text-md); line-height: 1.4; }
  .shop-catalog .price { font-size: var(--text-sm); }
  .shop-catalog .product-card__meta { flex-wrap: wrap; column-gap: var(--sp-2); }
  .shop-catalog .product-card__cat { letter-spacing: 0.1em; }
  /* breakers keep their larger voice */
  .shop-catalog ul.products > li:nth-child(20n+7)  .product-card__title,
  .shop-catalog ul.products > li:nth-child(20n+19) .product-card__title { font-size: var(--text-xl); }
  .shop-catalog ul.products > li:nth-child(20n+7)  .price,
  .shop-catalog ul.products > li:nth-child(20n+19) .price { font-size: var(--text-md); }
}