/**
 * AbayaFemme catalogue.
 *
 * One merchandising system serves the main boutique and collection archives:
 * three silhouettes per row in the boutique, four inside a collection, with
 * native WooCommerce filters, sorting, AJAX loading and compact product media.
 */

body.af-catalogue-active {
  /* Route aliases. These were written in oklch while the palette is in hex,
   * which is how the same eight neutrals came to exist twice: every value
   * below resolved to within ΔE 2.1 of a token that already had a name.
   * The family accents further down stay in oklch on purpose — see the note
   * there; a hue wheel at constant lightness is the one thing hex cannot
   * express. `line` points at the strong border rather than the default one
   * because that is what it measured as (ΔE 0.8 against border-strong, 8.6
   * against border): the name was misleading, not the colour. */
  --af-cat-canvas: var(--af-color-ivory);
  --af-cat-panel: var(--af-color-olive-100);
  --af-cat-panel-strong: var(--af-color-sand);
  --af-cat-ink: var(--af-color-ink);
  --af-cat-muted: var(--af-color-ink-muted);
  --af-cat-line: var(--af-color-border-strong);
  --af-cat-olive: var(--af-color-olive-800);
  --af-cat-olive-soft: var(--af-color-olive-200);
  --af-container-max: 100%;
  --af-gutter: clamp(1rem, 3.6vw, 3.25rem);
}

/* Each main collection keeps one recognisable, deliberately muted colour across the
 * hero, navigation, controls and brand mark. Text and underlines preserve meaning for
 * customers who do not perceive colour differences. */
body.af-family-abaya {
  --af-family-accent: oklch(0.38 0.055 68);
  --af-family-soft: oklch(0.91 0.028 72);
  --af-family-panel: oklch(0.945 0.026 72);
  --af-family-on-dark: oklch(0.82 0.06 72);
}

body.af-family-hijab {
  --af-family-accent: oklch(0.4 0.06 28);
  --af-family-soft: oklch(0.92 0.028 28);
  --af-family-panel: oklch(0.95 0.022 30);
  --af-family-on-dark: oklch(0.82 0.06 28);
}

body.af-family-khimar {
  --af-family-accent: oklch(0.37 0.055 124);
  --af-family-soft: oklch(0.91 0.03 124);
  --af-family-panel: oklch(0.95 0.022 124);
  --af-family-on-dark: oklch(0.82 0.055 124);
}

body.af-family-jilbab {
  --af-family-accent: oklch(0.38 0.045 235);
  --af-family-soft: oklch(0.91 0.026 235);
  --af-family-panel: oklch(0.95 0.018 235);
  --af-family-on-dark: oklch(0.82 0.05 235);
}

body.af-family-foulard {
  --af-family-accent: oklch(0.36 0.065 342);
  --af-family-soft: oklch(0.91 0.03 342);
  --af-family-panel: oklch(0.95 0.022 342);
  --af-family-on-dark: oklch(0.82 0.06 342);
}

body.af-family-accessoires {
  --af-family-accent: oklch(0.35 0.055 55);
  --af-family-soft: oklch(0.91 0.028 55);
  --af-family-panel: oklch(0.95 0.022 55);
  --af-family-on-dark: oklch(0.82 0.055 55);
}

body.af-catalogue-active[class*="af-family-"] {
  --af-cat-olive: var(--af-family-accent);
  --af-cat-olive-soft: var(--af-family-soft);
  --af-cat-panel: var(--af-family-panel);
}

body.af-catalogue-active[class*="af-family-"] .af-site-header {
  --af-header-olive: var(--af-family-accent);
}

body.af-catalogue-active[class*="af-family-"] :is(.af-header__wordmark, .af-mobile-nav__wordmark) {
  color: var(--af-family-accent);
}

body.af-catalogue-active .main-page-wrapper {
  padding-top: 0;
  color: var(--af-cat-ink);
  background: var(--af-cat-canvas);
}

body.af-catalogue-active .wd-content-layout,
body.af-catalogue-active .wd-content-area {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}

body.af-catalogue-active .woocommerce-products-header {
  display: none;
}

/* Hero ----------------------------------------------------------------- */

.af-catalogue-hero {
  padding: 0;
  color: var(--af-cat-ink);
  background: var(--af-cat-canvas);
}

.af-catalogue-hero__breadcrumbs {
  position: absolute;
  top: clamp(1.35rem, 2.2vw, 2rem);
  left: clamp(1.75rem, 4vw, 4rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.25rem;
  margin: 0;
  color: var(--af-cat-muted);
  font-family: var(--af-font-ui);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
}

.af-catalogue-hero__breadcrumbs :where(.wd-breadcrumbs, .woocommerce-breadcrumb) {
  margin: 0;
  color: inherit;
}

.af-catalogue-hero__breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.af-catalogue-hero__frame {
  position: relative;
  width: 100%;
  height: clamp(20rem, 27vw, 29rem);
  overflow: hidden;
  background: var(--af-cat-panel);
  border-radius: 0.2rem;
}

.af-catalogue-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 21%, #000 47%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 21%, #000 47%, #000 100%);
}

.af-catalogue-hero__copy {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  display: flex;
  width: 44%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.8rem, 5vw, 5.25rem) clamp(1.75rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
  background: transparent;
}

.af-catalogue-hero__image {
  filter: saturate(0.9) contrast(0.97) brightness(1.015);
}

.af-catalogue-hero__copy .af-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--af-cat-muted);
}

.af-catalogue-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--af-cat-ink);
  font-size: clamp(2.65rem, 3.7vw, 4rem);
  font-weight: 460;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

.af-catalogue-collection .af-catalogue-hero h1 {
  max-width: 8ch;
}

.af-catalogue-hero__description {
  max-width: 39ch;
  margin: 1.15rem 0 0;
  color: var(--af-cat-muted);
  font-family: var(--af-font-ui);
  font-size: 0.98rem;
  line-height: 1.65;
}

.af-catalogue-subcategories {
  display: flex;
  gap: 0.7rem;
  padding-block: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.af-catalogue-subcategories::-webkit-scrollbar,
.af-catalogue-toolbar__chips::-webkit-scrollbar {
  display: none;
}

.af-catalogue-subcategories a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.3rem 1rem 0.3rem 0.35rem;
  color: var(--af-cat-ink);
  background: oklch(0.985 0.006 78);
  border: 1px solid var(--af-cat-line);
  border-radius: var(--af-radius-pill);
  font-family: var(--af-font-ui);
  font-size: 0.75rem;
  font-weight: 650;
  text-decoration: none;
  transition: color var(--af-duration-fast) var(--af-ease), border-color var(--af-duration-fast) var(--af-ease);
}

.af-catalogue-subcategories a:hover,
.af-catalogue-subcategories a:focus-visible,
.af-catalogue-subcategories a.is-current {
  color: var(--af-cat-olive);
  border-color: var(--af-cat-olive);
}

.af-catalogue-subcategories img {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

/* Toolbar -------------------------------------------------------------- */

.af-catalogue-stage {
  padding-top: 0;
  background: var(--af-cat-canvas);
}

.af-catalogue-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 4.65rem;
  margin-bottom: 1.6rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--af-cat-line);
  font-family: var(--af-font-ui);
}

.af-catalogue-toolbar__controls,
.af-catalogue-toolbar__controls :where(.woocommerce-ordering, .wd-products-shop-view) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}

.af-catalogue-collection .af-catalogue-toolbar__controls {
  grid-column: 2;
  justify-self: end;
}

.af-catalogue-toolbar__controls :where(.wd-products-per-page, .wd-filter-buttons, .wd-show-sidebar-btn) {
  display: none;
}

.af-catalogue-toolbar__controls .woocommerce-ordering select {
  min-height: 2.55rem;
  padding: 0.4rem 2.25rem 0.4rem 0.9rem;
  color: var(--af-cat-ink);
  background-color: oklch(0.99 0.004 78);
  border: 1px solid var(--af-cat-line);
  border-radius: 0.5rem;
  font-size: 0.76rem;
}

.af-catalogue-toolbar__controls .wd-products-shop-view {
  min-height: 2.55rem;
  padding-inline: 0.2rem;
}

.af-catalogue-toolbar__chips {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.af-catalogue-toolbar__chips a {
  flex: 0 0 auto;
  padding: 0.65rem 1rem;
  color: var(--af-cat-muted);
  background: var(--af-cat-panel);
  border: 1px solid transparent;
  border-radius: var(--af-radius-pill);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.af-catalogue-toolbar__chips a:hover,
.af-catalogue-toolbar__chips a:focus-visible {
  color: var(--af-cat-ink);
  border-color: var(--af-cat-olive);
}

/* Filters -------------------------------------------------------------- */

.af-catalogue-layout {
  display: grid;
  grid-template-columns: clamp(15.5rem, 19vw, 22rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.4rem, 2vw, 2rem);
}

.af-catalogue-sidebar {
  min-width: 0;
}

.af-catalogue-sidebar > summary {
  display: none;
}

.af-catalogue-sidebar:not([open]) > .af-catalogue-sidebar__panel {
  display: block;
}

.af-catalogue-sidebar__panel {
  border: 0;
}

.af-catalogue-filter {
  margin: 0 0 0.8rem;
  padding: 1.25rem;
  color: var(--af-cat-ink);
  background: oklch(0.99 0.004 78);
  border: 1px solid var(--af-cat-line);
  border-radius: 0.5rem;
  font-family: var(--af-font-ui);
}

.af-catalogue-filter .widget-title {
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  color: var(--af-cat-ink);
  border-bottom: 1px solid var(--af-cat-line);
  font-family: var(--af-font-ui);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.af-catalogue-filter :where(ul, li) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-catalogue-filter li + li {
  margin-top: 0.68rem;
}

.af-catalogue-filter li a,
.af-catalogue-filter .wd-filter-lable {
  color: var(--af-cat-muted);
  font-size: 1rem;
  line-height: 1.45;
  text-decoration: none;
}

.af-catalogue-filter li a:hover,
.af-catalogue-filter li.wd-active > a,
.af-catalogue-filter li.chosen > a {
  color: var(--af-cat-ink);
}

/* Le compteur portait `color-mix(… 72%, transparent)`, ce qui ramenait un
 * --af-cat-muted conforme à 3.26:1 mesurés sur le fond du filtre. Troisième
 * occurrence du même piège dans ce thème, après l'opacité du fil de silos et
 * celle du compteur de blog : rendre un texte transparent annule la
 * conformité du token sans qu'aucun outil de design ne le signale. La
 * hiérarchie tient déjà par la taille. */
.af-catalogue-filter .count,
.af-catalogue-term-filter small {
  color: var(--af-cat-muted);
  font-size: 0.84rem;
}

.af-catalogue-filter .wd-scroll-content {
  max-height: 15rem;
}

.af-catalogue-filter .wd-swatch {
  flex: 0 0 auto;
}

.af-catalogue-term-filter a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.af-catalogue-check {
  width: 1.05rem;
  height: 1.05rem;
  background: oklch(1 0 0);
  border: 1px solid var(--af-cat-line);
  border-radius: 0.28rem;
}

/* WoodMart layered-nav rows ------------------------------------------ */

.af-catalogue-filter .wd-filter-list li {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
}

.af-catalogue-filter .wd-filter-list li + li {
  margin-top: 0.1rem;
}

.af-catalogue-filter .wd-filter-list li a {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.15rem;
  border-radius: 0.35rem;
  transition: background-color 0.2s ease;
}

.af-catalogue-filter .wd-filter-list li a:hover {
  background: oklch(0 0 0 / 0.035);
}

/* Le widget WoodMart affiche un pastille texte (« 38/S ») ET le label,
 * soit chaque valeur en double. Les labels restent activés côté PHP et
 * c'est la pastille qui disparaît ; la règle WoodMart qui masque le span
 * après une pastille texte doit donc être contrecarrée. */
.af-catalogue-filter .wd-swatches-filter .wd-swatch.wd-text {
  display: none;
}

.af-catalogue-filter .wd-swatches-filter .wd-swatch.wd-text + span {
  display: inline;
}

.af-catalogue-filter .wd-swatch + .wd-filter-lable {
  margin-inline-start: 0;
}

.af-catalogue-filter .wd-filter-lable {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkboxes: same box as .af-catalogue-check, olive when ticked. */
.af-catalogue-filter .wd-checkboxes-on li > a::before {
  width: 1.05rem;
  height: 1.05rem;
  margin-inline-end: 0;
  background: oklch(1 0 0);
  border: 1px solid var(--af-cat-line);
  border-radius: 0.28rem;
  font-size: 0.6rem;
}

.af-catalogue-filter .wd-checkboxes-on li > a:hover::before {
  border-color: var(--af-cat-olive);
}

.af-catalogue-filter .wd-checkboxes-on li.wd-active > a::before {
  color: oklch(1 0 0);
  background: var(--af-cat-olive);
  border-color: var(--af-cat-olive);
}

.af-catalogue-filter .wd-filter-list li.wd-active > a .wd-filter-lable {
  color: var(--af-cat-ink);
  font-weight: 650;
}

/* Counts: quiet pill pushed to the end of the row. */
.af-catalogue-filter .wd-filter-list .count {
  display: inline-flex;
  min-width: 1.9rem;
  height: 1.3rem;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  padding-inline: 0.45rem;
  color: var(--af-cat-muted);
  background: transparent;
  border: 1px solid var(--af-cat-line);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
}

.af-catalogue-filter .wd-filter-list li a:hover + .count,
.af-catalogue-filter .wd-filter-list li.wd-active .count {
  color: oklch(1 0 0);
  background: var(--af-cat-olive);
  border-color: var(--af-cat-olive);
}

/* Colour swatches ------------------------------------------------------
 * Pastilles agrandies, cerclage neutre pour que les teintes claires
 * (Blanc, Crème) restent visibles sur le fond ivoire du filtre, anneau
 * olive quand la teinte est sélectionnée. */
.af-catalogue-filter--couleur .wd-swatches-filter {
  --wd-swatch-size: 1.25rem;
}

.af-catalogue-filter--couleur .wd-swatch.wd-bg {
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 1px oklch(0.25 0.02 70 / 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.af-catalogue-filter--couleur .wd-swatch.wd-bg .wd-swatch-bg {
  border-radius: 50%;
}

.af-catalogue-filter--couleur li a:hover .wd-swatch.wd-bg {
  transform: scale(1.14);
}

.af-catalogue-filter--couleur li.wd-active .wd-swatch.wd-bg {
  box-shadow:
    0 0 0 2px oklch(0.99 0.004 78),
    0 0 0 3.5px var(--af-cat-olive);
}

/* Termes sans valeur couleur enregistrée (Bordeaux, Camel, Nude…) :
 * un repère en pointillés garde l'alignement avec les vraies pastilles. */
.af-catalogue-filter--couleur li:not(.wd-swatch-wrap) .wd-filter-lable {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.af-catalogue-filter--couleur li:not(.wd-swatch-wrap) .wd-filter-lable::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px dashed var(--af-cat-line);
  border-radius: 50%;
}

/* Longue liste de teintes : défilement discret. */
.af-catalogue-filter .wd-scroll-content {
  scrollbar-width: thin;
  scrollbar-color: var(--af-cat-olive-soft) transparent;
}

.af-catalogue-filter .wd-scroll-content::-webkit-scrollbar {
  width: 4px;
}

.af-catalogue-filter .wd-scroll-content::-webkit-scrollbar-thumb {
  background: var(--af-cat-olive-soft);
  border-radius: 999px;
}

.af-catalogue-filter .price_slider {
  position: relative;
  height: 0.18rem;
  margin: 1rem 0.45rem 1.2rem;
  background: var(--af-cat-olive-soft);
  border: 0;
  border-radius: 0;
}

.af-catalogue-filter .price_slider .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--af-cat-olive);
  border: 0;
}

.af-catalogue-filter .price_slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 0.72rem;
  height: 0.72rem;
  background: var(--af-cat-olive);
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.af-catalogue-filter .price_slider_amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  color: var(--af-cat-muted);
  font-size: 0.9rem;
  text-align: left;
}

.af-catalogue-filter .price_slider_amount .price_label {
  width: 100%;
}

.af-catalogue-filter .price_slider_amount .button {
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
  border: 1px solid var(--af-cat-olive);
  border-radius: 0;
  font-size: 0.88rem;
  text-transform: none;
}

.af-catalogue-reset {
  display: inline-flex;
  width: 100%;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.2rem;
  padding: 0.7rem 1rem;
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
  border: 1px solid var(--af-cat-olive);
  border-radius: 0.45rem;
  font-family: var(--af-font-ui);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}

.af-catalogue-reset:hover,
.af-catalogue-reset:focus-visible {
  color: var(--af-cat-olive);
  background: transparent;
}

@media (min-width: 1101px) {
  .af-catalogue-collection .af-catalogue-sidebar__panel {
    display: flex;
    flex-direction: column;
  }

  .af-catalogue-collection .af-catalogue-reset {
    order: -1;
    margin: 0 0 0.8rem;
  }
}

/* Products ------------------------------------------------------------- */

.af-catalogue-results,
body.af-catalogue-active .wd-products-element {
  width: 100%;
  min-width: 0;
}

.af-catalogue-results,
.af-new-arrivals__results {
  container-name: af-product-grid;
  container-type: inline-size;
}

body.af-catalogue-active .products.wd-products {
  --af-product-columns: 2;
  --wd-col: var(--af-product-columns) !important;
  grid-template-columns: repeat(var(--af-product-columns), minmax(0, 1fr)) !important;
  gap: clamp(1.65rem, 2.2vw, 2.65rem) clamp(0.75rem, 1.15vw, 1.15rem) !important;
  margin-bottom: 0;
}

body.af-catalogue-active.tax-product_cat .products.wd-products {
  gap: clamp(1.65rem, 2.2vw, 2.65rem) clamp(0.75rem, 1.15vw, 1.15rem) !important;
}

@container af-product-grid (min-width: 42rem) {
  body.af-catalogue-active .products.wd-products {
    --af-product-columns: 3;
  }
}

@container af-product-grid (min-width: 62rem) {
  body.af-catalogue-active .products.wd-products {
    --af-product-columns: 4;
  }
}

@container af-product-grid (min-width: 78rem) {
  body.af-catalogue-active .products.wd-products {
    --af-product-columns: 6;
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 761px) {
    body.af-catalogue-active .products.wd-products {
      --af-product-columns: 3;
    }
  }

  @media (min-width: 1101px) {
    body.af-catalogue-active .products.wd-products {
      --af-product-columns: 4;
    }
  }

  @media (min-width: 1700px) {
    body.af-catalogue-active .products.wd-products {
      --af-product-columns: 6;
    }
  }
}

body.af-catalogue-active .woocommerce-result-count {
  display: none !important;
}

body.af-catalogue-active .wd-product {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--af-font-ui);
}

body.af-catalogue-active .wd-product .wd-product-wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.af-catalogue-active .wd-product:hover .wd-product-wrapper {
  transform: translateY(-0.2rem);
}

body.af-catalogue-active .wd-product-thumb {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--af-cat-panel);
  border: 0 !important;
  border-radius: 0.15rem;
  box-shadow: none !important;
}

body.af-catalogue-active .wd-product-thumb :where(.wd-product-img-link, picture, img) {
  width: 100%;
  height: 100% !important;
}

body.af-catalogue-active .wd-product-thumb img {
  display: block;
  image-rendering: auto;
  object-fit: cover;
  object-position: center top;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms var(--af-ease);
}

body.af-catalogue-active .wd-product:hover .wd-product-thumb img {
  transform: scale(1.025) translateZ(0);
}

body.af-catalogue-active .af-product-card__image-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(50, 45, 36, 0.035);
  pointer-events: none;
  transition: opacity 400ms var(--af-ease);
}

body.af-catalogue-active .wd-product:hover .af-product-card__image-wash {
  opacity: 0;
}

body.af-catalogue-active .product-element-bottom {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  padding: 1.05rem 0.15rem 0;
  text-align: left;
}

body.af-catalogue-active .wd-product .wd-entities-title {
  min-height: 2.8em;
  margin: 0;
  color: var(--af-cat-ink);
  font-family: var(--af-font-ui);
  font-size: clamp(1.05rem, 0.78vw, 1.1rem);
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.4;
  text-transform: none;
}

body.af-catalogue-active .wd-product .wd-entities-title a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

body.af-catalogue-active .wd-product .wd-entities-title a:hover,
body.af-catalogue-active .wd-product .wd-entities-title a:focus-visible {
  color: var(--af-cat-olive);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

body.af-catalogue-active .af-product-card__identity {
  display: grid;
  gap: 0.38rem;
}

body.af-catalogue-active .af-product-card__meta {
  display: flex;
  min-height: 1.25rem;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--af-cat-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

body.af-catalogue-active .af-product-card__swatch {
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  background: var(--af-swatch, #8c7d75);
  border: 1px solid color-mix(in srgb, var(--af-cat-ink) 14%, transparent);
  border-radius: 50%;
}

body.af-catalogue-active .wd-product :where(.wd-product-cats, .wd-product-brands) {
  display: none;
}

body.af-catalogue-active .wd-product .price {
  margin: 0;
  color: var(--af-cat-ink);
  font-family: var(--af-font-ui);
  font-size: clamp(1.05rem, 0.82vw, 1.12rem);
  font-weight: 750;
  letter-spacing: -0.01em;
}

body.af-catalogue-active .wd-product .wd-swatches-grid {
  margin: 0;
}

body.af-catalogue-active .af-product-card__commerce {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.95rem;
  margin-top: auto;
  padding-top: 0.15rem;
}

body.af-catalogue-active .wd-product .wd-buttons {
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  display: flex;
  width: 2.75rem;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none;
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-btn,
body.af-catalogue-active .wd-product .wd-buttons .wd-action-btn > a {
  box-sizing: border-box;
  display: grid !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  line-height: 1 !important;
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-btn {
  color: var(--af-cat-ink);
  background: oklch(0.985 0.006 78 / 96%);
  border: 1px solid oklch(0.78 0.02 75 / 72%);
  border-radius: 50%;
  box-shadow: 0 0.55rem 1.5rem rgba(44, 39, 30, 0.12);
  transition: color 220ms var(--af-ease), background-color 220ms var(--af-ease), border-color 220ms var(--af-ease), transform 220ms var(--af-ease);
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-btn:hover,
body.af-catalogue-active .wd-product .wd-buttons .wd-action-btn:focus-within {
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
  border-color: var(--af-cat-olive);
  transform: translateY(-1px);
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-btn > a {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-icon {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center;
  color: inherit;
  line-height: 1 !important;
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-icon::before {
  position: static !important;
  display: block !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin: 0 !important;
  background: currentColor;
  border: 0 !important;
  content: "" !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

body.af-catalogue-active .wd-product .wd-quick-view-btn .wd-action-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.3 0 9.3 4.2 10.4 5.6a2.2 2.2 0 0 1 0 2.8C21.3 14.8 17.3 19 12 19S2.7 14.8 1.6 13.4a2.2 2.2 0 0 1 0-2.8C2.7 9.2 6.7 5 12 5Zm0 1.8c-4.4 0-7.8 3.5-8.9 4.9a.45.45 0 0 0 0 .6c1.1 1.4 4.5 4.9 8.9 4.9s7.8-3.5 8.9-4.9a.45.45 0 0 0 0-.6C19.8 10.3 16.4 6.8 12 6.8Zm0 1.7a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm0 1.8a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.3 0 9.3 4.2 10.4 5.6a2.2 2.2 0 0 1 0 2.8C21.3 14.8 17.3 19 12 19S2.7 14.8 1.6 13.4a2.2 2.2 0 0 1 0-2.8C2.7 9.2 6.7 5 12 5Zm0 1.8c-4.4 0-7.8 3.5-8.9 4.9a.45.45 0 0 0 0 .6c1.1 1.4 4.5 4.9 8.9 4.9s7.8-3.5 8.9-4.9a.45.45 0 0 0 0-.6C19.8 10.3 16.4 6.8 12 6.8Zm0 1.7a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm0 1.8a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.af-catalogue-active .wd-product .wd-wishlist-btn .wd-action-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20.7a1.6 1.6 0 0 1-1.1-.4C4.6 14.8 2 12.4 2 8.6A5.3 5.3 0 0 1 7.4 3.2c1.9 0 3.6.9 4.6 2.3a5.7 5.7 0 0 1 4.6-2.3A5.3 5.3 0 0 1 22 8.6c0 3.8-2.6 6.2-8.9 11.7-.3.3-.7.4-1.1.4ZM7.4 5A3.5 3.5 0 0 0 3.8 8.6c0 3 2.3 5.1 8.2 10.2 5.9-5.1 8.2-7.2 8.2-10.2A3.5 3.5 0 0 0 16.6 5c-1.8 0-3.2 1-4 2.6a.7.7 0 0 1-1.2 0A4.3 4.3 0 0 0 7.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20.7a1.6 1.6 0 0 1-1.1-.4C4.6 14.8 2 12.4 2 8.6A5.3 5.3 0 0 1 7.4 3.2c1.9 0 3.6.9 4.6 2.3a5.7 5.7 0 0 1 4.6-2.3A5.3 5.3 0 0 1 22 8.6c0 3.8-2.6 6.2-8.9 11.7-.3.3-.7.4-1.1.4ZM7.4 5A3.5 3.5 0 0 0 3.8 8.6c0 3 2.3 5.1 8.2 10.2 5.9-5.1 8.2-7.2 8.2-10.2A3.5 3.5 0 0 0 16.6 5c-1.8 0-3.2 1-4 2.6a.7.7 0 0 1-1.2 0A4.3 4.3 0 0 0 7.4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.af-catalogue-active .wd-product .wd-buttons .wd-action-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

body.af-catalogue-active .wd-product .wd-add-btn {
  margin-top: auto;
}

body.af-catalogue-active .wd-product .wd-add-btn > a {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
  border: 1px solid var(--af-cat-olive);
  border-radius: 0;
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
}

body.af-catalogue-active .wd-product .wd-add-btn > a::before {
  display: none;
}

body.af-catalogue-active .wd-product .wd-add-btn > a .wd-action-text,
body.af-catalogue-active .wd-product .wd-add-btn > a:hover .wd-action-text {
  width: 100%;
  min-height: 0;
  justify-content: space-between;
  padding: 0;
  opacity: 1;
  transform: none;
}

body.af-catalogue-active .wd-product .wd-add-btn > a .wd-action-text::after {
  margin-left: 0.75rem;
  content: "\2192";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

body.af-catalogue-active .wd-product.product-type-simple .wd-add-btn > a .wd-action-text::after {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 0.9rem;
  background: currentColor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.af-catalogue-active .wd-product .wd-add-btn > a:hover,
body.af-catalogue-active .wd-product .wd-add-btn > a:focus-visible {
  color: var(--af-cat-olive);
  background: transparent;
  border-color: var(--af-cat-olive);
}

body.af-catalogue-active .wd-product.product-type-variable .wd-add-btn > a {
  color: var(--af-cat-ink);
  background: transparent;
  border-color: color-mix(in srgb, var(--af-cat-olive) 62%, var(--af-cat-line));
}

body.af-catalogue-active .wd-product.product-type-variable .wd-add-btn > a:hover,
body.af-catalogue-active .wd-product.product-type-variable .wd-add-btn > a:focus-visible {
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
}

body.af-catalogue-active .wd-product .wd-add-btn > a.loading {
  cursor: wait;
  opacity: 0.76;
}

body.af-catalogue-active .wd-product .wd-add-btn > a.is-added {
  color: var(--af-text-inverse);
  background: oklch(0.36 0.045 112);
  border-color: oklch(0.36 0.045 112);
}

body.af-catalogue-active .product-labels {
  top: 0.65rem;
  left: 0.65rem;
}

body.af-catalogue-active .product-label {
  min-height: 1.55rem;
  padding: 0.3rem 0.55rem;
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
  border-radius: 0;
  font-size: 0.59rem;
  text-transform: none;
}

body.af-catalogue-active .wd-product .wc-stripe-bnpl-shop-message {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  body.af-catalogue-active .wd-product .wd-buttons {
    opacity: 0;
    transform: translateY(-0.35rem);
    transition: opacity 260ms var(--af-ease), transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.af-catalogue-active .wd-product:hover .wd-buttons,
  body.af-catalogue-active .wd-product:focus-within .wd-buttons {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Campaign inside the loop -------------------------------------------- */

.af-catalogue-promo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 42%) minmax(0, 1fr);
  grid-column: 1 / -1;
  width: 100%;
  min-height: clamp(18rem, 23vw, 23rem);
  margin: clamp(0.75rem, 1.5vw, 1.4rem) 0;
  overflow: hidden;
  background: var(--af-cat-panel-strong);
  border-radius: 0.2rem;
}

.products.wd-products > .af-catalogue-promo {
  margin-block: clamp(0.4rem, 1vw, 0.9rem);
}

.af-catalogue-promo__copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: inherit;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 3.5vw, 3.5rem);
  background: var(--af-cat-panel-strong);
}

.af-catalogue-promo__media {
  position: relative;
  min-width: 0;
  min-height: inherit;
  overflow: hidden;
  background: var(--af-cat-panel);
}

.af-catalogue-promo__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.86) contrast(0.97) brightness(1.01);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
  transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

.af-catalogue-promo:hover .af-catalogue-promo__media img {
  transform: scale(1.018);
}

.af-catalogue-promo__copy h2 {
  max-width: 13ch;
  margin: 0.55rem 0 0.8rem;
  color: var(--af-cat-ink);
  font-size: clamp(2.2rem, 3.1vw, 3.45rem);
  font-weight: 460;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.af-catalogue-promo__copy > p:not(.af-eyebrow) {
  max-width: 34ch;
  margin: 0 0 1.3rem;
  color: var(--af-cat-muted);
  font-family: var(--af-font-ui);
  font-size: 0.9rem;
  line-height: 1.6;
}

.af-catalogue-promo .af-button {
  width: fit-content;
}

/* AJAX load more ------------------------------------------------------- */

body.af-catalogue-active .wd-loop-footer {
  display: flex;
  justify-content: center;
  margin: 3rem 0 0;
  font-family: var(--af-font-ui);
}

body.af-catalogue-active .wd-loop-footer :where(.wd-products-load-more, .af-new-arrivals-load-more) {
  display: inline-flex;
  min-width: min(100%, 15rem);
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  color: var(--af-text-inverse);
  background: var(--af-cat-olive);
  border: 1px solid var(--af-cat-olive);
  border-radius: 0;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

body.af-catalogue-active .wd-loop-footer :where(.wd-products-load-more, .af-new-arrivals-load-more):hover,
body.af-catalogue-active .wd-loop-footer :where(.wd-products-load-more, .af-new-arrivals-load-more):focus-visible {
  color: var(--af-cat-olive);
  background: transparent;
}

body.af-catalogue-active .wd-loop-footer .wd-load-more-loader {
  display: none;
  color: var(--af-cat-muted);
  background: transparent;
  border: 0;
}

body.af-catalogue-active .wd-loop-footer .wd-products-load-more.loading + .wd-load-more-loader {
  display: inline-flex;
  min-height: 3.15rem;
  align-items: center;
}

body.af-catalogue-active .af-new-arrivals-load-more.is-loading {
  cursor: wait;
  opacity: 0.72;
  pointer-events: none;
}

body.af-catalogue-active .wd-pagination {
  display: none;
}

/* Cart feedback -------------------------------------------------------- */

.af-commerce-notices {
  position: fixed;
  top: clamp(5.5rem, 9vw, 7.25rem);
  right: var(--af-gutter);
  z-index: 100000;
  display: grid;
  width: min(25rem, calc(100vw - (2 * var(--af-gutter))));
  gap: 0.6rem;
  pointer-events: none;
}

.af-commerce-notice {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  min-height: 4.75rem;
  color: oklch(0.985 0.006 78);
  background: oklch(0.3 0.035 105 / 97%);
  border-left: 3px solid oklch(0.77 0.06 96);
  box-shadow: 0 1rem 2.8rem rgba(37, 34, 27, 0.2);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-0.45rem);
  transition: opacity 220ms var(--af-ease), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.af-commerce-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.af-commerce-notice--error {
  background: oklch(0.34 0.065 35 / 97%);
  border-left-color: oklch(0.78 0.08 53);
}

.af-commerce-notice__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
}

.af-commerce-notice__icon::before {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.6-4.5-4.5 1.4-1.4 3.1 3.1 8.7-8.7 1.4 1.4-10.1 10.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.6-4.5-4.5 1.4-1.4 3.1 3.1 8.7-8.7 1.4 1.4-10.1 10.1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.af-commerce-notice--error .af-commerce-notice__icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m13.4 12 5.3-5.3-1.4-1.4-5.3 5.3-5.3-5.3-1.4 1.4 5.3 5.3-5.3 5.3 1.4 1.4 5.3-5.3 5.3 5.3 1.4-1.4-5.3-5.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m13.4 12 5.3-5.3-1.4-1.4-5.3 5.3-5.3-5.3-1.4 1.4 5.3 5.3-5.3 5.3 1.4 1.4 5.3-5.3 5.3 5.3 1.4-1.4-5.3-5.3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.af-commerce-notice__content {
  padding: 0.8rem 0.35rem;
  font-family: var(--af-font-ui);
}

.af-commerce-notice__content p {
  margin: 0;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.4;
}

.af-commerce-notice__content a {
  display: inline-block;
  margin-top: 0.3rem;
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
}

.af-commerce-notice__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
}

.af-commerce-notice__close:hover,
.af-commerce-notice__close:focus-visible {
  color: inherit;
  background: rgba(255, 255, 255, 0.1);
}

/* New arrivals -------------------------------------------------------- */

.af-new-arrivals__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding-block: clamp(1.4rem, 2.5vw, 2.25rem);
  border-bottom: 1px solid var(--af-cat-line);
}

.af-new-arrivals__intro .af-eyebrow {
  margin: 0;
  color: var(--af-cat-muted);
  white-space: nowrap;
}

.af-new-arrivals__header .af-catalogue-toolbar__chips {
  padding-bottom: 0.25rem;
}

.af-new-arrivals__results {
  min-width: 0;
  padding-top: clamp(1.8rem, 3vw, 2.75rem);
}

/* Collection guide ---------------------------------------------------- */

.af-catalogue-guide {
  margin-top: clamp(4rem, 7vw, 7rem);
  text-align: center;
}

.af-catalogue-guide header h2 {
  margin: 0.35rem 0 1.75rem;
  color: var(--af-cat-ink);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 460;
  letter-spacing: -0.035em;
}

.af-catalogue-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.af-catalogue-guide article {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  min-height: 13.5rem;
  overflow: hidden;
  text-align: left;
  background: var(--af-cat-panel);
}

.af-catalogue-guide__media {
  min-height: 0;
  overflow: hidden;
}

.af-catalogue-guide__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--af-duration-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

.af-catalogue-guide article:hover .af-catalogue-guide__media img {
  transform: scale(1.018);
}

.af-catalogue-guide article > div {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

.af-catalogue-guide__number {
  margin: 0 0 0.55rem;
  color: var(--af-cat-olive);
  font-family: var(--af-font-display);
  font-size: 1.35rem;
}

.af-catalogue-guide h3 {
  margin: 0;
  font-family: var(--af-font-ui);
  font-size: 0.86rem;
  line-height: 1.42;
}

.af-catalogue-guide h3 a,
.af-catalogue-guide__link {
  color: var(--af-cat-ink);
  text-decoration: none;
}

.af-catalogue-guide__link {
  width: fit-content;
  margin-top: auto;
  padding-top: 0.85rem;
  border-bottom: 1px solid var(--af-cat-olive);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Long archive copy ---------------------------------------------------- */

.af-catalogue-more {
  margin-top: 2.75rem;
  color: var(--af-cat-ink);
  border-block: 1px solid var(--af-cat-line);
  font-family: var(--af-font-ui);
}

.af-catalogue-more > summary {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.af-catalogue-more > summary::after {
  content: "+";
  font-size: 1.1rem;
  font-weight: 400;
}

.af-catalogue-more > summary::-webkit-details-marker {
  display: none;
}

.af-catalogue-more[open] > summary::after {
  content: "−";
}

.af-catalogue-more__content {
  padding: 0 0 1.75rem;
  border-top: 1px solid var(--af-cat-line);
}

body.af-catalogue-active :where(.term-description, .page-description) {
  width: calc(100% - (2 * var(--af-gutter)));
  max-width: var(--af-container-max);
  margin: 3rem auto 0;
  color: var(--af-cat-muted);
  font-family: var(--af-font-ui);
}

body.af-catalogue-active .af-catalogue-more :where(.term-description, .page-description) {
  width: auto;
  max-width: none;
  margin: 1.5rem 0 0;
}

/* WoodMart emits the taxonomy copy after the catalogue stage. Treat it as an
 * editorial buying guide instead of leaving the merchant HTML unformatted. */
body.af-catalogue-active .wd-term-desc.wd-entry-content {
  width: calc(100% - (2 * var(--af-gutter)));
  max-width: var(--af-container-max);
  margin: clamp(3.75rem, 6vw, 6rem) auto 0;
  padding: clamp(2.75rem, 5vw, 5rem) clamp(1.5rem, 6vw, 7rem);
  color: var(--af-cat-ink);
  background: color-mix(in srgb, var(--af-cat-panel) 78%, white);
  font-family: var(--af-font-ui);
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > h2 {
  max-width: 23ch;
  margin: 0 auto 1.4rem;
  color: var(--af-cat-ink);
  font-family: var(--af-font-display);
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 460;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-align: center !important;
  text-wrap: balance;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > h2 strong {
  font: inherit;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > p,
body.af-catalogue-active .wd-term-desc.wd-entry-content > h3,
body.af-catalogue-active .wd-term-desc.wd-entry-content > ul {
  max-width: 76rem;
  margin-inline: auto;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > p {
  margin-block: 0 1.15rem;
  color: var(--af-cat-muted);
  font-size: 1rem;
  line-height: 1.78;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > p:first-of-type {
  max-width: 58rem;
  margin-bottom: 1.7rem;
  color: var(--af-family-accent, var(--af-cat-olive));
  font-family: var(--af-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.35;
  text-align: center;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > p:first-of-type em {
  font-style: normal;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > h3 {
  margin-top: 2.15rem;
  margin-bottom: 0.75rem;
  color: var(--af-cat-ink);
  font-family: var(--af-font-display);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem clamp(1.5rem, 4vw, 4rem);
  margin-block: 1rem 0;
  padding: 0;
  list-style: none;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > ul li {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--af-cat-muted);
  font-size: 0.96rem;
  line-height: 1.65;
}

body.af-catalogue-active .wd-term-desc.wd-entry-content > ul li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--af-family-accent, var(--af-cat-olive));
  border-radius: 50%;
  content: "";
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .af-catalogue-hero__copy {
    width: 50%;
  }

  .af-catalogue-toolbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .af-catalogue-toolbar__chips {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .af-catalogue-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .af-catalogue-sidebar > summary {
    display: flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-block: 1px solid var(--af-cat-line);
    cursor: pointer;
    font-family: var(--af-font-ui);
    font-size: 1rem;
    font-weight: 700;
    list-style: none;
  }

  .af-catalogue-sidebar > summary::-webkit-details-marker {
    display: none;
  }

  .af-catalogue-sidebar:not([open]) > .af-catalogue-sidebar__panel {
    display: none;
  }

  .af-catalogue-sidebar[open] > summary span:last-child {
    transform: rotate(45deg);
  }

  .af-catalogue-sidebar__panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
    border-top: 0;
  }

  .af-catalogue-reset {
    align-self: end;
  }

  .af-catalogue-guide__grid {
    grid-template-columns: 1fr;
  }

  .af-catalogue-guide article {
    grid-template-columns: 38% minmax(0, 1fr);
    min-height: 12rem;
  }
}

@media (max-width: 760px) {
  .af-catalogue-hero {
    padding-top: 0.65rem;
  }

  .af-catalogue-hero__frame {
    display: block;
    height: clamp(18.75rem, 82vw, 21rem);
  }

  .af-catalogue-hero__image {
    position: absolute;
    inset: 0;
    object-position: 70% center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, rgb(0 0 0 / 18%) 50%, #000 70%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 36%, rgb(0 0 0 / 18%) 50%, #000 70%, #000 100%);
  }

  .af-catalogue-hero__copy {
    position: absolute;
    inset: 0 auto 0 0;
    width: 63%;
    justify-content: flex-end;
    padding: 3.6rem 0.9rem 1.3rem 1rem;
    background: transparent;
  }

  .af-catalogue-hero__breadcrumbs {
    position: absolute;
    top: 0.95rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    margin: 0;
    font-size: 0.72rem;
  }

  .af-catalogue-hero h1 {
    max-width: 9ch;
    font-size: clamp(2.15rem, 10.5vw, 2.7rem);
    line-height: 0.96;
  }

  .af-catalogue-hero__description {
    max-width: 27ch;
    margin-top: 0.8rem;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .af-catalogue-subcategories {
    padding-block: 1rem;
  }

  .af-catalogue-toolbar {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .af-catalogue-toolbar__controls,
  .af-catalogue-collection .af-catalogue-toolbar__controls {
    grid-column: auto;
    justify-self: stretch;
    min-width: 0;
  }

  .af-catalogue-toolbar__controls .woocommerce-ordering {
    flex: 1 1 auto;
  }

  .af-catalogue-toolbar__controls .woocommerce-ordering select {
    width: 100%;
  }

  .af-catalogue-toolbar__chips {
    grid-column: auto;
  }

  .af-catalogue-sidebar__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.af-catalogue-active .products.wd-products,
  body.af-catalogue-active.tax-product_cat .products.wd-products {
    gap: 1.25rem 0.7rem !important;
  }

  body.af-catalogue-active .product-element-bottom {
    gap: 0.62rem;
    padding: 0.75rem 0.05rem 0;
  }

  body.af-catalogue-active .wd-product .wd-entities-title {
    min-height: 2.9em;
    font-size: clamp(0.9rem, 3.65vw, 1.02rem);
    line-height: 1.42;
  }

  body.af-catalogue-active .wd-product .price {
    font-size: 0.96rem;
  }

  body.af-catalogue-active .wd-product .wd-add-btn > a {
    min-height: 2.9rem;
    padding-inline: 0.65rem;
    font-size: 0.78rem;
  }

  .af-catalogue-promo {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .af-catalogue-promo__media {
    position: relative;
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .af-catalogue-promo__media img {
    object-position: center 15%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .af-catalogue-promo__copy {
    width: 100%;
    min-height: 0;
    padding: 1.5rem;
    background: var(--af-cat-panel);
  }

  .af-commerce-notices {
    top: 4.85rem;
  }

  .af-catalogue-promo__copy h2 {
    font-size: 2.15rem;
  }

  .af-catalogue-guide {
    margin-top: 3.5rem;
  }

  .af-catalogue-guide article {
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .af-new-arrivals__header {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding-block: 1.35rem;
  }

  .af-new-arrivals__header .af-catalogue-toolbar__chips {
    justify-content: flex-start;
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content {
    width: calc(100% - (2 * var(--af-gutter)));
    margin-top: 3.25rem;
    padding: 2.2rem 1.1rem;
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content > h2 {
    max-width: 18ch;
    margin-bottom: 1rem;
    font-size: clamp(2rem, 9.5vw, 2.45rem);
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content > p:first-of-type {
    margin-bottom: 1.4rem;
    font-size: 1.18rem;
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content > p {
    font-size: 0.96rem;
    line-height: 1.72;
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content > h3 {
    margin-top: 1.75rem;
    font-size: 1.45rem;
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content > ul {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  body.af-catalogue-active .wd-term-desc.wd-entry-content > ul li {
    font-size: 0.94rem;
  }
}

@media (max-width: 479px) {
  .af-catalogue-sidebar__panel {
    grid-template-columns: 1fr;
  }

  .af-catalogue-hero__breadcrumbs {
    font-size: 0.72rem;
  }

  .af-catalogue-hero__frame {
    height: clamp(18.5rem, 88vw, 20rem);
  }

  .af-catalogue-hero__copy {
    width: 68%;
    padding-right: 0.65rem;
  }

  .af-catalogue-subcategories a {
    min-height: 2.8rem;
    font-size: 0.69rem;
  }

  .af-catalogue-subcategories img {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }

  .af-catalogue-guide article {
    min-height: 10.5rem;
  }

  .af-catalogue-guide article > div {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.af-catalogue-active .wd-product-thumb img,
  .af-catalogue-guide__media img,
  .af-catalogue-sidebar > summary span:last-child,
  .af-catalogue-subcategories a {
    transition: none;
  }
}

/* Collection copy ---------------------------------------------------- */

/* Above the grid: short enough that the first row of products stays on
   screen. This is the sentence an assistant quotes, so it is set to read,
   not to decorate. */

/* ---------------------------------------------------------------------------
 * Under the grid: the buying guide, then what is not in stock today.
 *
 * Both are read after a decision has failed to happen, so both are quiet. The
 * guide is set at reading width and left-aligned — it is prose, not a hero.
 * The restock list is folded away entirely: it exists so that a piece which
 * sells out keeps an incoming link, not so that a customer scrolls past forty
 * things she cannot buy.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * The comparison table, between the grid and the guide.
 *
 * It is scanned, never read, so it breaks out of the reading measure and sets
 * its own: numbers in tabular figures, one rule per row, no vertical rules at
 * all — a grid of boxes turns a comparison into a spreadsheet.
 *
 * On a phone the table scrolls sideways inside its own box, and the row header
 * stays pinned to the left edge. Without that, scrolling to the price column
 * loses the name of the line the price belongs to, which is the one thing a
 * comparison cannot afford.
 * ------------------------------------------------------------------------ */

/*
 * The comparison table takes the editorial measure and the same treatment as
 * the other wide blocks: title above, table across the whole width. It used
 * to float in a 58rem box of its own, related to nothing around it.
 */
.af-facts {
  max-width: var(--af-editorial-max);
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 5rem) var(--af-gutter) 0;
  font-family: var(--af-font-ui);
  /* `#comparatif` is a real anchor: the sticky header must not land on the
     heading it jumps to. */
  scroll-margin-top: 6rem;
}

.af-facts__title {
  margin-block: 0 var(--af-space-4, 1rem);
  font-family: var(--af-font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.5rem);
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: var(--af-leading-heading);
  color: var(--af-text-default);
  text-transform: none;
}

.af-facts__scroll {
  overflow-x: auto;
}

/* The keyboard reaches the scroll box through `tabindex`, so it needs a ring
   of its own — the browser draws none on a scrollable div. */
.af-facts__scroll:focus-visible {
  outline: 2px solid var(--af-color-focus);
  outline-offset: 2px;
}

.af-facts__table {
  width: 100%;
  /* Separate, not collapsed: with `border-collapse: collapse` the rules belong
     to the table rather than to the cells, so the sticky first column paints
     its background straight over them and the row separators break where the
     column ends. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--af-text-sm);
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.af-facts__table :where(th, td) {
  padding: var(--af-space-3, 0.75rem);
  border-block-end: 1px solid var(--af-border-default);
  text-align: start;
  vertical-align: baseline;
  white-space: nowrap;
}

.af-facts__table thead th {
  border-block-end-width: 2px;
  color: var(--af-text-default);
  font-weight: 600;
}

.af-facts__table td {
  color: var(--af-text-muted);
}

/* The row header carries the name and the link, and stays put while the
   measures scroll past it. The background is opaque on purpose: the cells
   underneath slide behind it. */
.af-facts__table tbody th {
  position: sticky;
  inset-inline-start: 0;
  background: var(--af-surface-page);
  font-weight: 500;
  white-space: normal;
}

.af-facts__table tbody th a {
  color: var(--af-text-default);
  text-decoration: none;
}

.af-facts__table tbody th a:hover,
.af-facts__table tbody th a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Under the table, and outside the box that scrolls: at the page's width, so
   its lines are not cut off by the horizontal overflow the table needs. */
.af-facts__source {
  max-width: 44rem;
  margin-block: var(--af-space-3, 0.75rem) 0;
  color: var(--af-text-muted);
  font-size: var(--af-text-micro);
  line-height: var(--af-leading-body);
}

@media (max-width: 767px) {
  .af-facts {
    padding-block-start: var(--af-space-8, 2.5rem);
  }

  .af-facts__table :where(th, td) {
    padding: var(--af-space-2, 0.5rem);
  }
}

/* ---------------------------------------------------------------------------
 * The collection's own text — one panel above the grid, bands below it.
 *
 * Two attempts failed before this one, and both failed the same way: they tried
 * to make a paragraph fill a 1 900-pixel screen. It cannot. A line of prose is
 * readable to about sixty-five characters and no design changes that, so a text
 * column stretched to the width of a product grid ends in four hundred pixels
 * of nothing, and a lead paragraph split into two columns of that width ends as
 * two lines beside one.
 *
 * What fills a wide screen is a *block*, not a line. So the opening is a panel:
 * full-bleed ground, its title in display type on the left, its text on the
 * right, both centred against each other so neither leaves a hole under it.
 * The panel holds the space the words do not, and the space inside it reads as
 * composition rather than absence.
 *
 * Below the grid the guide has no panel — ten of them stacked would be a
 * fairground — so it takes the other honest answer: its own measure, centred.
 * Margins on both sides in equal amounts read as a decision; margin on one side
 * only reads as a mistake. `--af-editorial-max` is that measure, and it is
 * deliberately narrower than the grid: the grid shows silhouettes and wants the
 * room, the text does not.
 * ------------------------------------------------------------------------- */

body.af-catalogue-active {
  /* The same width as the grid: nothing on this page is narrower than it. */
  --af-editorial-max: var(--af-container-max);
  --af-editorial-gap: clamp(1.75rem, 3vw, 3.25rem);
}

/* The opening ---------------------------------------------------------- */

/* Both classes: the guide's own padding rule sits later in this file. */
.af-collection-opening.af-collection-guide {
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-block-start: 0;
}

/*
 * No panel, no tint. What defines the band is a hairline the width of the
 * measure and the size of the type under it — the two cheapest devices in
 * typography and the two that never date. A block of colour behind a
 * paragraph is a way of not deciding where the paragraph goes.
 */
.af-collection-opening__inner {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: var(--af-editorial-max);
  margin-inline: auto;
  padding-block-start: clamp(1.75rem, 3.5vw, 3rem);
  padding-inline: var(--af-gutter);
  border-block-start: 1px solid var(--af-cat-line, var(--af-border-default));
}

.af-collection-opening__title :where(h1, h2, h3, h4) {
  max-width: 17ch;
  margin: 0;
  font-family: var(--af-font-display);
  font-size: clamp(1.85rem, 2.7vw, 2.75rem);
  font-weight: 470;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--af-cat-ink, var(--af-text-default));
  text-wrap: balance;
}

.af-collection-opening__text > :where(p, li) {
  max-width: 60ch;
  color: var(--af-cat-muted, var(--af-text-muted));
}

/* The collection's own sentence opens the block and is set a shade stronger. */
.af-collection-opening__lead {
  color: var(--af-cat-ink, var(--af-text-default));
  font-size: clamp(1.02rem, 1.1vw, 1.14rem);
  line-height: 1.62;
}

.af-collection-opening__text > :first-child {
  margin-block-start: 0;
}

.af-collection-opening__text > :last-child,
.af-collection-opening__title > :last-child {
  margin-block-end: 0;
}

.af-collection-opening__more {
  margin-block-start: clamp(1.1rem, 2vw, 1.6rem);
  padding-block-start: clamp(1rem, 1.8vw, 1.4rem);
  border-block-start: 1px solid var(--af-cat-line, var(--af-border-default));
}

.af-collection-opening__more a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--af-cat-ink, var(--af-text-default));
  text-decoration: none;
}

.af-collection-opening__more a span {
  transition: transform 0.2s ease;
}

.af-collection-opening__more a:hover span,
.af-collection-opening__more a:focus-visible span {
  transform: translateX(0.25em);
}

/*
 * Stacked, the link belongs after the text it continues. `display: contents`
 * lets the title cell's children take their own place in the single column
 * without a second copy of the markup.
 */
@media (max-width: 61.99rem) {
  .af-collection-opening__title {
    display: contents;
  }

  .af-collection-opening__title > :where(h1, h2, h3, h4) {
    order: 1;
  }

  .af-collection-opening__text {
    order: 2;
  }

  .af-collection-opening__more {
    order: 3;
    margin-block-start: 0;
  }
}

@media (min-width: 62rem) {
  .af-collection-opening__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--af-editorial-gap);
    align-items: stretch;
  }

  /*
   * Title at the top, link at the foot, the column stretched between them.
   * Left to sit under its heading the link left a third of the block empty;
   * pushed to the bottom it closes the composition instead.
   */
  .af-collection-opening__title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .af-collection-opening--solo .af-collection-opening__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Two columns of prose, not one column and a hole. A line is readable to
   * about sixty-five characters whatever the screen does, so the only way for
   * text to hold a wide page is to run down it twice.
   */
  .af-collection-opening--split .af-collection-opening__text {
    columns: 2;
    column-gap: var(--af-editorial-gap);
  }

  .af-collection-opening--split .af-collection-opening__text > :where(p, li) {
    max-width: none;
  }

  .af-collection-opening--split .af-collection-opening__lead {
    /* The collection's own sentence opens the left column, never the right. */
    column-span: all;
    max-width: 78ch;
  }
}

/* The guide ------------------------------------------------------------ */

.af-collection-editorial__inner {
  max-width: var(--af-editorial-max);
  margin-inline: auto;
  padding-inline: var(--af-gutter);
}

.af-collection-band + .af-collection-band {
  margin-block-start: clamp(2rem, 3.5vw, 3.25rem);
}

.af-collection-band__rail :where(h2, h3, h4) {
  margin-block: 0 var(--af-space-3, 0.75rem);
  font-size: clamp(1.45rem, 2vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
}

.af-collection-band__body > :where(p, li) {
  max-width: 64ch;
}

.af-collection-band__body > :where(h2, h3, h4):first-child,
.af-collection-band__rail :where(h2, h3, h4):first-child {
  margin-block-start: 0;
}

.af-collection-band__body > :last-child {
  margin-block-end: 0;
}

@media (min-width: 62rem) {
  .af-collection-band {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
  }

  /* The heading stays beside its text while the text scrolls past it. */
  .af-collection-band__rail {
    position: sticky;
    top: calc(var(--af-header-height, 5rem) + 1.5rem);
  }

  /*
   * Text with no heading has no rail to fill, and spreading it across both
   * columns would put it at a different left edge from every other paragraph
   * on the page. It keeps the text column; the rail simply stays empty.
   */
  .af-collection-band--flow > .af-collection-band__body {
    grid-column: 2;
  }

  .af-collection-band--split > .af-collection-band__body {
    columns: 2;
    column-gap: var(--af-editorial-gap);
  }

  .af-collection-band--split > .af-collection-band__body > :where(p, li) {
    max-width: none;
  }

  /*
   * Cards, tables and question lists are tall and want the whole measure.
   * Their heading goes above them rather than beside them: a rail holding
   * four words next to six hundred pixels of content is not a composition.
   */
  .af-collection-band--stacked {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.25rem, 2vw, 1.75rem);
  }

  .af-collection-band--stacked > .af-collection-band__rail {
    position: static;
  }
}

.af-collection-guide {
  padding-block: clamp(3rem, 5vw, 5rem);
  border-block-start: 1px solid var(--af-border-default);
}

.af-collection-guide :where(h2, h3, h4) {
  margin-block: var(--af-space-8, 2.5rem) var(--af-space-3, 0.75rem);
  font-family: var(--af-font-display);
  font-weight: 500;
  line-height: var(--af-leading-heading);
  color: var(--af-text-default);
  text-align: start;
  /* Not `capitalize`: « Adapté Aux Peaux Sensibles » is an English habit. */
  text-transform: none;
  text-wrap: balance;
}

.af-collection-guide :where(h2, h3, h4):first-child {
  margin-block-start: 0;
}

.af-collection-guide h2 {
  font-size: var(--af-text-h3);
}

.af-collection-guide h3 {
  font-size: var(--af-text-h4);
}

.af-collection-guide :where(p, li) {
  font-family: var(--af-font-ui);
  font-size: var(--af-text-body);
  line-height: var(--af-leading-body);
  color: var(--af-text-muted);
}

.af-collection-guide p {
  margin-block: 0 var(--af-space-4, 1rem);
}

.af-collection-guide ul,
.af-collection-guide ol {
  margin-block: 0 var(--af-space-5, 1.5rem);
  padding-inline-start: 1.25rem;
}

.af-collection-guide a[href] {
  color: var(--af-text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/*
 * An anchor with no `href` is what an editor leaves behind when a link is
 * removed: it promises a destination no click reaches. The kimono guide held
 * five, since corrected in the content. This keeps the next one from reading
 * as a link while it waits for its address.
 */
.af-collection-guide a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.af-collection-guide table {
  display: block;
  width: 100%;
  margin-block: var(--af-space-5, 1.5rem);
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
}

.af-collection-guide :where(th, td) {
  padding: var(--af-space-2, 0.5rem) var(--af-space-3, 0.75rem);
  border: 1px solid var(--af-border-default);
  text-align: start;
  vertical-align: top;
}

.af-collection-guide th {
  background: var(--af-surface-sunken);
  font-weight: 600;
  color: var(--af-text-default);
}

.af-collection-restock {
  max-width: 44rem;
  margin: 0 auto var(--af-space-10, 3rem);
  padding-inline: var(--af-space-5, 1.5rem);
  font-family: var(--af-font-ui);
}

.af-collection-restock > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--af-space-3, 0.75rem);
  padding-block: var(--af-space-4, 1rem);
  border-block-start: 1px solid var(--af-border-default);
  cursor: pointer;
  list-style: none;
}

.af-collection-restock > summary::-webkit-details-marker {
  display: none;
}

.af-collection-restock__label {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: var(--af-text-sm);
  font-weight: 500;
  color: var(--af-text-default);
}

.af-collection-restock__label::before {
  position: absolute;
  inset-inline-start: 0;
  content: "+";
  color: var(--af-text-faint);
  font-variant-numeric: tabular-nums;
}

.af-collection-restock[open] .af-collection-restock__label::before {
  content: "–";
}

.af-collection-restock__hint {
  font-size: var(--af-text-micro);
  color: var(--af-text-faint);
}

.af-collection-restock > summary:focus-visible {
  outline: 2px solid var(--af-color-focus);
  outline-offset: 3px;
}

.af-collection-restock__list {
  display: grid;
  gap: var(--af-space-1, 0.25rem) var(--af-space-5, 1.5rem);
  margin: 0 0 var(--af-space-5, 1.5rem);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .af-collection-restock__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .af-collection-restock__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.af-collection-restock__list a {
  display: block;
  padding-block: 0.2rem;
  font-size: var(--af-text-sm);
  line-height: 1.45;
  color: var(--af-text-faint);
  text-decoration: none;
}

.af-collection-restock__list a:hover,
.af-collection-restock__list a:focus-visible {
  color: var(--af-text-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
 * WoodMart's own container for the buying guide.
 *
 * `wd-term-desc` is where the theme prints `category_extra_description_text`,
 * and out of the box it centres two thousand words of body copy across the
 * full page width under display-sized headings. Centred prose at that measure
 * is read by nobody; it looks like a poster and behaves like a wall.
 *
 * The rules below give it the same treatment as any other long text in this
 * project: one column at reading width, ranged left, headings that step down
 * rather than shout. The selector is scoped to the shop archive so nothing
 * else WoodMart styles with these classes is affected.
 * ------------------------------------------------------------------------ */

.af-catalogue .wd-term-desc,
.woocommerce-page .wd-term-desc {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: var(--af-space-8, 2.5rem);
  padding-inline: var(--af-space-5, 1.5rem);
  text-align: start;
}

.af-catalogue .wd-term-desc :where(h1, h2, h3, h4),
.woocommerce-page .wd-term-desc :where(h1, h2, h3, h4) {
  margin-block: var(--af-space-8, 2.5rem) var(--af-space-3, 0.75rem);
  font-family: var(--af-font-display);
  font-weight: 500;
  line-height: var(--af-leading-heading);
  color: var(--af-text-default);
  text-align: start;
  text-transform: none;
  text-wrap: balance;
}

.af-catalogue .wd-term-desc :where(h1, h2, h3, h4):first-child,
.woocommerce-page .wd-term-desc :where(h1, h2, h3, h4):first-child {
  margin-block-start: 0;
}

.af-catalogue .wd-term-desc :where(h1, h2),
.woocommerce-page .wd-term-desc :where(h1, h2) {
  font-size: var(--af-text-h3);
}

.af-catalogue .wd-term-desc :where(h3, h4),
.woocommerce-page .wd-term-desc :where(h3, h4) {
  font-size: var(--af-text-h4);
}

.af-catalogue .wd-term-desc :where(p, li),
.woocommerce-page .wd-term-desc :where(p, li) {
  font-family: var(--af-font-ui);
  font-size: var(--af-text-body);
  line-height: var(--af-leading-body);
  color: var(--af-text-muted);
  text-align: start;
}

.af-catalogue .wd-term-desc p,
.woocommerce-page .wd-term-desc p {
  margin-block: 0 var(--af-space-4, 1rem);
}

.af-catalogue .wd-term-desc :where(ul, ol),
.woocommerce-page .wd-term-desc :where(ul, ol) {
  margin-block: 0 var(--af-space-5, 1.5rem);
  padding-inline-start: 1.25rem;
}

.af-catalogue .wd-term-desc a,
.woocommerce-page .wd-term-desc a {
  color: var(--af-text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
 * The structured blocks inside a buying guide.
 *
 * The guides were generated with real structure — fabric cards, a comparison
 * table, a shipping callout, a question list built on `<details>` — and not one
 * line of CSS was ever written for any of it. So a reader met six cards as six
 * paragraphs, a five-column table with no rules, and five questions that looked
 * like a stray list. The markup was right the whole time; the stylesheet was
 * missing.
 *
 * The selectors match on the suffix rather than the prefix: the generator names
 * its classes `sp-hj-*` for hijabs, `sp-ab-*` for abayas, `sp-kh-*` for
 * khimars, and will name them `sp-xx-*` for whatever comes next. Scoped to the
 * guide so nothing outside it is affected.
 * ------------------------------------------------------------------------ */

/* Cards: a fabric, a cut, a feature — a title and a paragraph. */
.af-collection-guide [class*="-fabrics"],
.af-collection-guide [class*="-styles"],
.af-collection-guide [class*="-features"] {
  display: grid;
  gap: var(--af-space-4, 1rem);
  margin-block: var(--af-space-6, 2rem);
}

@media (min-width: 40rem) {
  .af-collection-guide [class*="-fabrics"],
  .af-collection-guide [class*="-styles"],
  .af-collection-guide [class*="-features"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three across on a wide screen: two would set each card at a hundred
   characters a line, which is a paragraph nobody finishes. */
@media (min-width: 75rem) {
  .af-collection-guide [class*="-fabrics"],
  .af-collection-guide [class*="-styles"],
  .af-collection-guide [class*="-features"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.af-collection-guide [class*="-card"]:not([class*="-card-title"]) {
  padding: var(--af-space-5, 1.5rem);
  background: var(--af-surface-sunken);
  border-inline-start: 2px solid var(--af-color-taupe);
}

.af-collection-guide [class*="-card-title"] {
  margin-block-end: var(--af-space-2, 0.5rem);
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--af-text-default);
}

.af-collection-guide [class*="-card"] p:last-child {
  margin-block-end: 0;
}

/* The comparison table: the densest thing on the page, so give it rules. */
.af-collection-guide [class*="-table-wrap"] {
  margin-block: var(--af-space-6, 2rem);
  overflow-x: auto;
}

.af-collection-guide [class*="-table"] {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  line-height: 1.4;
}

.af-collection-guide [class*="-table"] :where(th, td) {
  padding: var(--af-space-2, 0.5rem) var(--af-space-3, 0.75rem);
  border-block-end: 1px solid var(--af-border-default);
  text-align: start;
  vertical-align: top;
}

.af-collection-guide [class*="-table"] th {
  border-block-end-width: 2px;
  font-size: var(--af-text-micro);
  font-weight: 600;
  letter-spacing: var(--af-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--af-text-default);
  white-space: nowrap;
}

.af-collection-guide [class*="-table"] tbody tr:last-child :where(th, td) {
  border-block-end: 0;
}

/* The shipping callout. */
.af-collection-guide [class*="-highlight"] {
  margin-block: var(--af-space-6, 2rem);
  padding: var(--af-space-4, 1rem) var(--af-space-5, 1.5rem);
  background: var(--af-surface-accent);
  border-radius: 2px;
}

.af-collection-guide [class*="-highlight"] p:last-child {
  margin-block-end: 0;
}

/* The questions. */
.af-collection-guide [class*="-faq"]:not([class*="-faq-body"]) {
  margin-block: var(--af-space-6, 2rem);
  border-block-start: 1px solid var(--af-border-default);
}

.af-collection-guide [class*="-faq"] > details {
  border-block-end: 1px solid var(--af-border-default);
}

.af-collection-guide [class*="-faq"] > details > summary {
  display: flex;
  align-items: baseline;
  gap: var(--af-space-3, 0.75rem);
  padding-block: var(--af-space-4, 1rem);
  font-family: var(--af-font-ui);
  font-size: var(--af-text-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--af-text-default);
  cursor: pointer;
  list-style: none;
}

.af-collection-guide [class*="-faq"] > details > summary::-webkit-details-marker {
  display: none;
}

.af-collection-guide [class*="-faq"] > details > summary::before {
  flex: none;
  width: 1ch;
  content: "+";
  color: var(--af-text-faint);
}

.af-collection-guide [class*="-faq"] > details[open] > summary::before {
  content: "–";
}

.af-collection-guide [class*="-faq"] > details > summary:focus-visible {
  outline: 2px solid var(--af-color-focus);
  outline-offset: 3px;
}

.af-collection-guide [class*="-faq-body"] {
  padding-inline-start: calc(1ch + var(--af-space-3, 0.75rem));
  padding-block-end: var(--af-space-4, 1rem);
}

.af-collection-guide [class*="-faq-body"] p:last-child {
  margin-block-end: 0;
}