/**
 * AbayaFemme product detail V3.
 *
 * Product facts, prices, stock, variants and reviews remain WooCommerce-owned.
 * This file only defines the decision and purchase experience.
 */

body.af-product-active {
  /* Route aliases. Every value below was a raw hex within ΔE 3.1 of the token
   * it now points at — the page is unchanged to the eye and there is one
   * palette again. Two of them improve on the way: `muted` was #706861
   * (5.24:1) and is now the canonical muted at 6.0:1, and `clay` was #985f55,
   * documented here as 5.12:1 under white CTA copy, where the canonical clay
   * reads 6.18:1. */
  --af-pdp-ink: var(--af-color-ink);
  --af-pdp-muted: var(--af-color-ink-muted);
  /* Taupe is the palette's decorative tier and says so: it never carries
   * essential text. Used here for a struck-through previous price and for
   * disabled swatches, which WCAG 1.4.3 exempts. */
  --af-pdp-faint: var(--af-color-taupe);
  --af-pdp-accent: var(--af-color-clay-deep);
  --af-pdp-accent-hover: #352720;
  --af-pdp-clay: var(--af-color-clay);
  --af-pdp-paper: var(--af-color-ivory);
  --af-pdp-surface: var(--af-color-white);
  --af-pdp-wash: var(--af-color-cream);
  --af-pdp-sage: var(--af-color-olive-100);
  --af-pdp-success: var(--af-color-success);
  --af-pdp-danger: var(--af-color-danger);
  --af-pdp-line: var(--af-color-olive-200);
  --af-pdp-line-strong: var(--af-color-border-strong);
  --af-pdp-star: #c58b32;
  --af-pdp-shadow: 0 1.2rem 3rem rgb(63 47 39 / 8%);
  --af-pdp-max: 1420px;
}

body.af-product-active .main-page-wrapper {
  padding-top: 0;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-paper);
}

body.af-product-active .site-content {
  width: 100%;
}

body.af-product-active :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  width: min(calc(100% - (2 * var(--af-gutter))), var(--af-pdp-max));
  margin: 0.8rem auto;
  padding: 0.9rem 1rem;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-sage);
  border: 1px solid #cad8c3;
  border-radius: 0.35rem;
  font-family: var(--af-font-ui);
  font-size: 0.88rem;
  line-height: 1.5;
}

body.af-product-active .woocommerce-error {
  color: var(--af-pdp-danger);
  background: #fbefec;
  border-color: #e2b7b0;
}

/* Breadcrumb --------------------------------------------------------- */

body.af-product-active .single-breadcrumbs-wrapper {
  display: none;
}

.af-product-breadcrumb {
  width: min(calc(100% - (2 * var(--af-gutter))), var(--af-pdp-max));
  margin-inline: auto;
  padding-block: 0.75rem;
  font-family: var(--af-font-ui);
  font-size: 0.74rem;
  line-height: 1.4;
}

.af-product-breadcrumb ol {
  display: flex;
  min-width: 0;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-product-breadcrumb li {
  display: flex;
  min-width: 0;
  align-items: center;
  color: var(--af-pdp-muted);
}

.af-product-breadcrumb li + li::before {
  width: 0.38rem;
  height: 0.38rem;
  margin-inline: 0.62rem;
  border-top: 1px solid currentcolor;
  border-right: 1px solid currentcolor;
  content: "";
  transform: rotate(45deg);
}

.af-product-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.af-product-breadcrumb a:is(:hover, :focus-visible) {
  color: var(--af-pdp-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.af-product-breadcrumb [aria-current="page"] span {
  overflow: hidden;
  color: var(--af-pdp-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* V3 composition ----------------------------------------------------- */

.af-product-detail {
  width: 100%;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-paper);
}

.af-product-detail__frame,
.af-product-editorial,
.af-product-after {
  width: min(calc(100% - (2 * var(--af-gutter))), var(--af-pdp-max));
  margin-inline: auto;
}

body.af-product-active .wd-before-product-tabs {
  display: none !important;
}

.af-product-detail__frame {
  margin-bottom: 0 !important;
}

.af-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(29rem, 0.98fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.75rem);
}

.af-product-hero__media,
.af-product-hero__summary {
  min-width: 0;
}

.af-product-hero__media {
  padding: clamp(0.8rem, 1.4vw, 1.25rem);
  background: var(--af-pdp-wash);
  border: 1px solid var(--af-pdp-line);
  border-radius: 0.55rem;
}

.af-product-hero__summary-inner {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

/* Gallery: every source remains fully visible in its 9:16 frame. ----- */

.af-product-hero__media .woocommerce-product-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  min-width: 0;
}

.af-product-hero__media .wd-gallery-images {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  height: clamp(36rem, 68vh, 46rem);
  max-width: 100% !important;
  justify-self: center;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--af-pdp-surface);
  border-radius: 0.42rem;
}

.af-product-hero__media .wd-gallery-images :where(.wd-carousel-inner, .wd-carousel, .wd-carousel-wrap, .wd-carousel-item, .woocommerce-product-gallery__image) {
  height: 100%;
}

.af-product-hero__media .wd-gallery-images .woocommerce-product-gallery__image {
  position: relative;
  display: grid;
  overflow: hidden;
  place-items: center;
  background: var(--af-pdp-surface);
}

.af-product-hero__media .wd-gallery-images .woocommerce-product-gallery__image > a {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.af-product-hero__media .wd-gallery-images img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: contain !important;
}

/* Le rail de vignettes a besoin d'une hauteur, et WoodMart ne la donne pas ici.
 *
 * En position gauche, le thème parent écrit `height: var(--wd-thumbs-height,
 * auto)` sur le rail — et il ne définit `--wd-thumbs-height` que depuis ses
 * éléments de constructeur de page (Elementor, WPB). Cette boutique rend la
 * fiche avec le gabarit natif, la variable n'existe donc jamais, la hauteur
 * retombe sur `auto`, et un carrousel vertical dont les diapositives sont
 * empilées en flex n'a alors plus rien pour se dimensionner : le rail mesurait
 * **76 × 0 px** sur écran large. Les six photos étaient dans le DOM, invisibles.
 * La cliente voyait une seule image et des points, pour un vêtement dont le dos
 * et les détails sont dans les cinq autres.
 *
 * La valeur est `100 %` plutôt qu'une hauteur fixe : le rail suit exactement la
 * colonne d'images, quelle que soit la proportion de la photo. */
.af-product-hero__media .woocommerce-product-gallery.thumbs-position-left {
  --wd-thumbs-height: 100%;
}

.af-product-hero__media .wd-gallery-thumb {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  width: 4.75rem;
  max-height: clamp(36rem, 68vh, 46rem);
  margin: 0;
  overflow: hidden;
}

.af-product-hero__media .wd-gallery-thumb :where(.wd-carousel-inner, .wd-carousel) {
  height: 100%;
}

.af-product-hero__media .wd-gallery-thumb .wd-carousel-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.af-product-hero__media .wd-gallery-thumb .wd-carousel-item {
  flex: 0 0 auto !important;
  width: 4.75rem !important;
  min-width: 4.75rem !important;
  max-width: 4.75rem !important;
  height: 8.45rem !important;
  overflow: hidden;
  background: var(--af-pdp-surface);
  border: 1px solid transparent;
  border-radius: 0.3rem;
  opacity: 0.72;
  transition: border-color 180ms ease, opacity 180ms ease;
}

.af-product-hero__media .wd-gallery-thumb .wd-carousel-item:is(.wd-active, :hover, :focus-within) {
  border-color: var(--af-pdp-clay);
  opacity: 1;
}

.af-product-hero__media .wd-gallery-thumb :where(a, img) {
  display: block;
  width: 100%;
  height: 100%;
}

.af-product-hero__media .wd-gallery-thumb img {
  object-fit: contain;
}

.af-product-hero__media .product-labels {
  top: 0.9rem;
  right: auto;
  left: 6.5rem;
}

.af-product-hero__media .product-label {
  min-height: 1.9rem;
  padding-inline: 0.75rem;
  color: var(--af-pdp-ink);
  background: #f4eadc;
  border-radius: 0.25rem;
  font-family: var(--af-font-ui);
  font-size: 0.7rem;
  font-weight: 600;
}

.af-product-hero__media :where(.woocommerce-product-gallery__trigger, .wd-show-product-gallery-wrap) {
  right: 0.8rem;
  bottom: 0.8rem;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
  border-radius: 50%;
  box-shadow: 0 0.45rem 1.1rem rgb(47 41 37 / 10%);
}

.af-product-hero__media .wd-btn-arrow {
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
}

/* Product-owned facts and human support beneath the gallery. -------- */

.af-product-hero__media-details {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.af-product-hero__summary-inner > .af-product-hero__media-details {
  order: 13;
  margin-top: 0.9rem;
}

.af-product-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0;
  margin: 0;
  padding: 0.9rem 0;
  border-block: 1px solid var(--af-pdp-line);
}

.af-product-facts__item {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding-inline: 0.65rem;
  text-align: center;
}

.af-product-facts__item + .af-product-facts__item {
  border-left: 1px solid var(--af-pdp-line);
}

.af-product-facts__icon {
  width: 2.2rem;
  height: 2.2rem;
  background: center / contain no-repeat;
}

.af-product-facts__item:nth-child(1) .af-product-facts__icon {
  background-image: url("../images/values/quality.webp");
}

.af-product-facts__item:nth-child(2) .af-product-facts__icon {
  background-image: url("../images/values/comfort.webp");
}

.af-product-facts__item:nth-child(3) .af-product-facts__icon {
  background-image: url("../images/values/modesty.webp");
}

.af-product-facts__item:nth-child(4) .af-product-facts__icon {
  background-image: url("../images/values/support.webp");
}

.af-product-facts dt,
.af-product-facts dd {
  overflow: hidden;
  margin: 0;
  font-family: var(--af-font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.af-product-facts dt {
  color: var(--af-pdp-ink);
  font-size: 0.74rem;
  font-weight: 600;
}

.af-product-facts dd {
  margin-top: 0.1rem;
  color: var(--af-pdp-muted);
  font-size: 0.68rem;
}

.af-product-support a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.6rem;
  padding: 0.65rem 0.75rem;
  color: var(--af-pdp-ink);
  background: rgb(255 254 253 / 66%);
  border: 1px solid var(--af-pdp-line);
  border-radius: 0.35rem;
  font-family: var(--af-font-ui);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.af-product-support a:is(:hover, :focus-visible) {
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border-color: var(--af-pdp-line-strong);
}

.af-product-support__icon {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
}

.af-product-support a > span {
  display: grid;
  gap: 0.14rem;
}

.af-product-support strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.af-product-support small {
  color: var(--af-pdp-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.af-product-support b {
  padding: 0.68rem 0.8rem;
  color: var(--af-pdp-surface);
  background: var(--af-pdp-accent);
  border-radius: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Summary hierarchy -------------------------------------------------- */

.af-product-hero__summary .product_title {
  order: 1;
  max-width: 17ch;
  margin: 0;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-display);
  font-size: clamp(2.35rem, 3.25vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: none;
}

.af-product-detail__subtitle {
  order: 2;
  margin: 0.55rem 0 0;
  font-family: var(--af-font-ui);
  font-size: 0.82rem;
}

.af-product-detail__subtitle a {
  color: var(--af-pdp-muted);
  text-decoration: none;
}

.af-product-hero__summary .woocommerce-product-rating {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.8rem 0 0;
  color: var(--af-pdp-muted);
  font-family: var(--af-font-ui);
  font-size: 0.78rem;
}

.af-product-hero__summary .star-rating {
  color: var(--af-pdp-star);
}

.af-product-hero__summary .woocommerce-review-link {
  color: var(--af-pdp-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.af-product-hero__summary > .af-product-hero__summary-inner > .price {
  order: 4;
  margin: 0.85rem 0 0;
  color: var(--af-pdp-accent);
  font-family: var(--af-font-ui);
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1;
}

.af-product-hero__summary .price del {
  margin-left: 0.45rem;
  color: var(--af-pdp-faint);
  font-size: 0.62em;
  font-weight: 400;
}

.af-product-hero__summary .price ins {
  color: var(--af-pdp-clay);
  text-decoration: none;
}

.af-product-hero__summary .wc-stripe-bnpl-product-message {
  order: 5;
  margin-top: 0.45rem;
  font-family: var(--af-font-ui);
  font-size: 0.74rem;
}

.af-product-hero__summary .woocommerce-product-details__short-description {
  order: 6;
  max-width: 62ch;
  margin: 0.9rem 0 0;
  color: var(--af-pdp-muted);
  font-family: var(--af-font-ui);
  font-size: 0.86rem;
  line-height: 1.58;
}

.af-product-hero__summary .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}

.af-product-hero__summary :where(.product_meta, .product-share, .wd-compare-btn, .wd-product-brands, .wd-single-countdown, .wd-visits-count, .wd-sold-count) {
  display: none !important;
}

/* Linked colors: no horizontal scroller. The disclosure is explicit. */

.af-product-hero__summary .variations_form-linked {
  order: 7;
  min-width: 0;
  margin-top: 1rem;
}

.af-product-hero__summary .variations_form-linked:has(.wd-swatches-product > .wd-swatch:only-child) {
  display: none;
}

.af-product-hero__summary .variations_form-linked table.variations {
  display: block;
  margin: 0;
}

.af-product-hero__summary .variations_form-linked table.variations :where(tbody, tr, th, td) {
  display: block;
  width: 100%;
}

.af-product-hero__summary .variations_form-linked .label {
  margin-bottom: 0.6rem;
  padding: 0;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
}

.af-product-hero__summary .variations_form-linked .label label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  align-items: baseline;
}

/*
 * Le deux-points est généré en `::after`, donc toujours en dernier — il se
 * retrouvait après le nom du coloris et le compte : « Couleur Brun rosé
 * 43 coloris : ». Il est repris par le libellé lui-même, qui le place où il
 * doit être.
 */
.af-product-hero__summary .variations_form-linked .label label::after {
  content: none;
}

.af-swatch-sep {
  color: var(--af-pdp-ink);
}

/* La teinte choisie, ou celle que le curseur survole. */
.af-swatch-name {
  color: var(--af-pdp-ink);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.af-swatch-name.is-out {
  color: var(--af-pdp-danger);
}

.af-swatch-count {
  color: var(--af-pdp-faint);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.af-swatch-count::before {
  margin-right: 0.35rem;
  content: "·";
}

.af-product-hero__summary .variations_form-linked .value {
  padding: 0;
}

.af-product-hero__summary .variations_form-linked .wd-swatches-product {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  overflow: visible;
  padding: 0.35rem 0.25rem;
}

/*
 * Un nuancier, pas une grille de boutons.
 *
 * La pastille portait `opacity: .88` en permanence, ce qui éteint chaque teinte
 * d'un cran — sur un nuancier, la couleur *est* l'information. La définition
 * vient d'un liseré intérieur d'un pixel, qui détache une teinte ivoire du fond
 * sans toucher aux autres.
 */
.af-product-hero__summary .variations_form-linked .wd-swatch {
  position: relative;
  flex: 0 0 var(--af-swatch-size);
  width: var(--af-swatch-size);
  min-width: var(--af-swatch-size);
  height: var(--af-swatch-size);
  min-height: var(--af-swatch-size);
  padding: 0;
  overflow: hidden;
  scroll-snap-align: unset;
  background: var(--af-pdp-surface);
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(28 28 28 / 10%);
  opacity: 1;
  transition: box-shadow 0.16s ease;
}

.af-product-hero__summary .variations_form-linked {
  --af-swatch-size: 2.75rem;
}

.af-product-hero__summary .variations_form-linked .wd-swatch:is(:hover, :focus-visible) {
  box-shadow:
    inset 0 0 0 1px rgb(28 28 28 / 10%),
    0 0 0 2px var(--af-pdp-paper),
    0 0 0 3px var(--af-pdp-line-strong);
}

/*
 * La teinte choisie doit se lire d'un coup d'œil au milieu de quarante-trois
 * autres, sans peser : un anneau d'un pixel et demi en argile, détaché par une
 * respiration ivoire. Plus épais, il devient une tache ; plus fin, il disparaît.
 */
.af-product-hero__summary .variations_form-linked .wd-swatch.wd-active {
  box-shadow:
    inset 0 0 0 1px rgb(28 28 28 / 10%),
    0 0 0 2px var(--af-pdp-paper),
    0 0 0 3.5px var(--af-pdp-accent);
}

@media (prefers-reduced-motion: reduce) {
  .af-product-hero__summary .variations_form-linked .wd-swatch {
    transition: none;
  }
}

.af-product-hero__summary .variations_form-linked.af-variants-collapsed .wd-swatch.af-variant-hidden {
  display: none;
}

/*
 * Le contrôle des coloris cachés.
 *
 * Trois versions avant celle-ci. Un bouton encadré en majuscules, du poids d'un
 * « Ajouter au panier » pour une action qui allonge une liste. Puis un lien
 * discret sous la rangée, qui est passé sous le radar. Puis une gélule au bout
 * du nuancier — visible, enfin, mais ovale au milieu de onze cercles, bordée de
 * pointillés : deux formes et deux traits pour une seule rangée.
 *
 * C'est maintenant **une pastille de plus**, exactement : même diamètre, même
 * cercle, un filet plein comme les autres. Rien ne la distingue de la rangée
 * sinon ce qu'elle dit — le nombre de teintes qui restent à voir.
 */
.af-product-hero__summary .af-variants-toggle,
.af-variants-toggle {
  display: inline-flex;
  flex: 0 0 var(--af-swatch-size, 2.75rem);
  width: var(--af-swatch-size, 2.75rem);
  min-width: var(--af-swatch-size, 2.75rem);
  height: var(--af-swatch-size, 2.75rem);
  min-height: var(--af-swatch-size, 2.75rem);
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-paper);
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--af-pdp-line-strong);
  font-family: var(--af-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.af-product-hero__summary .af-variants-toggle.is-expanded,
.af-variants-toggle.is-expanded {
  font-size: 1.15rem;
  font-weight: 500;
}

.af-product-hero__summary .af-variants-toggle:is(:hover, :focus-visible),
.af-variants-toggle:is(:hover, :focus-visible) {
  color: var(--af-pdp-surface);
  background: var(--af-pdp-accent);
  box-shadow: inset 0 0 0 1px var(--af-pdp-accent);
  text-decoration: none;
}

.af-product-hero__summary .af-variants-toggle:focus-visible,
.af-variants-toggle:focus-visible {
  outline: 2px solid var(--af-pdp-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .af-variants-toggle {
    transition: none;
  }
}

/* Native WooCommerce variations and purchase controls. -------------- */

.af-product-hero__summary form.cart {
  order: 8;
  width: 100%;
  margin: 1rem 0 0;
  font-family: var(--af-font-ui);
}

.af-product-hero__summary form.variations_form,
.af-product-hero__summary table.variations,
.af-product-hero__summary table.variations tbody,
.af-product-hero__summary table.variations tr,
.af-product-hero__summary table.variations :where(th, td) {
  display: block;
  width: 100%;
}

.af-product-hero__summary table.variations {
  margin: 0 0 0.9rem;
}

.af-product-hero__summary table.variations tr + tr {
  margin-top: 0.9rem;
}

.af-product-hero__summary table.variations .label {
  margin-bottom: 0.55rem;
  padding: 0;
  color: var(--af-pdp-ink);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  text-transform: none;
}

.af-product-hero__summary table.variations .value {
  padding: 0;
}

.af-product-hero__summary .variations select {
  width: 100%;
  min-height: 3rem;
  padding-inline: 0.85rem;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line-strong);
  border-radius: 0.25rem;
  font-size: 0.82rem;
}

.af-product-hero__summary .wd-swatches-product {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  overflow: visible;
}

.af-product-hero__summary form.variations_form .wd-swatch {
  display: inline-grid;
  min-width: 4.6rem;
  min-height: 3.1rem;
  padding: 0.65rem 0.9rem;
  place-items: center;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
  border-radius: 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.af-product-hero__summary form.variations_form .wd-swatch:is(.wd-bg, .wd-bg-image) {
  width: 3.1rem;
  min-width: 3.1rem;
  padding: 0;
  border-radius: 50%;
}

.af-product-hero__summary form.variations_form .wd-swatch:is(:hover, :focus-visible, .wd-active, [aria-checked="true"]) {
  color: var(--af-pdp-surface);
  background: var(--af-pdp-accent);
  border-color: var(--af-pdp-accent);
}

.af-product-hero__summary form.variations_form .wd-swatch.wd-disabled {
  color: var(--af-pdp-faint);
  background: #f4f0eb;
  cursor: not-allowed;
  opacity: 0.65;
  text-decoration: line-through;
}

.af-product-hero__summary .reset_variations {
  display: inline-flex;
  margin-top: 0.65rem;
  color: var(--af-pdp-muted);
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.af-product-hero__summary .woocommerce-variation {
  color: var(--af-pdp-muted);
  font-size: 0.78rem;
}

.af-product-hero__summary .woocommerce-variation .price {
  margin-block: 0.4rem;
  color: var(--af-pdp-clay);
  font-size: 1.2rem;
}

.af-product-hero__summary .woocommerce-variation-add-to-cart,
.af-product-hero__summary form.cart:not(.variations_form) {
  display: grid;
  grid-template-areas:
    "quantity-label quantity-label"
    "quantity add"
    "buy buy";
  grid-template-columns: 7.2rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0.45rem 0.7rem;
}

/* ---------------------------------------------------------------------------
 * Une rangée pour les coordonnées de la destinataire, sur une carte cadeau.
 *
 * L'extension pose son bloc dans le formulaire d'ajout au panier, ce qui est
 * la seule place possible : les champs doivent partir avec le formulaire. Mais
 * cette grille-là ne connaît que trois zones nommées, et un enfant sans zone
 * tombe dans la première case libre — la colonne de 7,2 rem réservée à la
 * quantité. Les six champs s'y empilaient sur un mot par ligne.
 *
 * La grille gagne donc une rangée, et seulement quand le bloc est là : le
 * `:has()` laisse toutes les autres fiches exactement comme elles étaient.
 * ------------------------------------------------------------------------ */
.af-product-hero__summary .woocommerce-variation-add-to-cart:has(.af-gift-card-fields),
.af-product-hero__summary form.cart:not(.variations_form):has(.af-gift-card-fields) {
  grid-template-areas:
    "gift gift"
    "quantity-label quantity-label"
    "quantity add"
    "buy buy";
}

.af-product-hero__summary .af-gift-card-fields {
  grid-area: gift;
}

.af-product-quantity-label {
  grid-area: quantity-label;
  color: var(--af-pdp-ink);
  font-size: 0.76rem;
  font-weight: 600;
}

/*
 * Sans champ de quantité, la colonne de 7,2 rem reste réservée et le bouton
 * d'achat se retrouve décalé contre un vide. C'est le cas d'une fiche sur
 * trois : 136 fiches en stock n'ont qu'un exemplaire, et WooCommerce masque
 * alors le champ. La grille se referme sur une seule colonne.
 */
.af-product-hero__summary form.cart:not(.variations_form):has(.quantity.hidden),
.af-product-hero__summary form.cart.af-quantity-hidden:not(.variations_form) {
  grid-template-areas:
    "add"
    "buy";
  grid-template-columns: minmax(0, 1fr);
}

.af-product-hero__summary .quantity {
  grid-area: quantity;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 3.25rem;
  overflow: hidden;
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
  border-radius: 0.25rem;
}

.af-product-hero__summary .quantity :where(.minus, .plus, input.qty) {
  width: 100%;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0;
  color: var(--af-pdp-ink);
  background: transparent;
  border: 0;
  font-size: 0.82rem;
}

.af-product-hero__summary .quantity :where(.minus, .plus):hover {
  background: var(--af-pdp-wash);
}

html body.af-product-active .af-product-hero__summary .single_add_to_cart_button {
  grid-area: add;
  display: flex !important;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  color: var(--af-pdp-surface) !important;
  background: var(--af-pdp-accent) !important;
  border: 1px solid var(--af-pdp-accent) !important;
  border-radius: 0.22rem;
  font-family: var(--af-font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

html body.af-product-active .af-product-hero__summary .single_add_to_cart_button::before {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  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 d='M7.5 7V5.5a4.5 4.5 0 0 1 9 0V7H20l-1 14H5L4 7h3.5Zm2 0h5V5.5a2.5 2.5 0 0 0-5 0V7Zm-3.35 2 .72 10h10.26l.72-10H6.15Z'/%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 d='M7.5 7V5.5a4.5 4.5 0 0 1 9 0V7H20l-1 14H5L4 7h3.5Zm2 0h5V5.5a2.5 2.5 0 0 0-5 0V7Zm-3.35 2 .72 10h10.26l.72-10H6.15Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body.af-product-active .af-product-hero__summary .single_add_to_cart_button:is(:hover, :focus-visible) {
  background: var(--af-pdp-accent-hover) !important;
  border-color: var(--af-pdp-accent-hover) !important;
  transform: translateY(-1px);
}

.af-product-hero__summary .single_add_to_cart_button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.af-product-hero__summary .single_add_to_cart_button.disabled .af-cart-button-price {
  display: none;
}

.af-cart-button-price::before {
  margin-inline: 0.15rem 0.25rem;
  content: "·";
}

html body.af-product-active .af-product-hero__summary .wd-buy-now-btn {
  grid-area: buy;
  display: flex !important;
  width: 100%;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--af-pdp-accent) !important;
  background: #e9dfd4 !important;
  border: 1px solid #e9dfd4 !important;
  border-radius: 0.22rem;
  font-family: var(--af-font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

html body.af-product-active .af-product-hero__summary .wd-buy-now-btn:is(:hover, :focus-visible) {
  color: var(--af-pdp-surface) !important;
  background: var(--af-pdp-clay) !important;
  border-color: var(--af-pdp-clay) !important;
}

/* Cart-aware delivery: native WoodMart fragment, restyled for this flow. */

.af-product-hero__summary .wd-shipping-progress-bar {
  order: 9;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.8rem 0.9rem;
  color: var(--af-pdp-ink);
  background: color-mix(in oklch, var(--af-pdp-sage) 12%, var(--af-pdp-surface));
  border: 1px solid color-mix(in oklch, var(--af-pdp-sage) 35%, var(--af-pdp-line));
  border-radius: 0.25rem;
  font-family: var(--af-font-ui);
}

.af-product-hero__summary .wd-shipping-progress-bar .wd-progress-bar {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.af-product-hero__summary .wd-shipping-progress-bar .wd-progress-bar::before {
  width: 2.4rem;
  height: 2.4rem;
  grid-row: 1 / span 2;
  background: url("../images/product-trust/delivery.webp") center / contain no-repeat;
  content: "";
}

.af-product-hero__summary .wd-shipping-progress-bar .progress-msg {
  margin: 0;
  color: var(--af-pdp-ink);
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.4;
}

.af-product-hero__summary .wd-shipping-progress-bar .progress-area {
  position: relative;
  width: 100%;
  height: 0.28rem;
  overflow: hidden;
  background: color-mix(in oklch, var(--af-pdp-sage) 18%, var(--af-pdp-line));
  border-radius: 1rem;
}

.af-product-hero__summary .wd-shipping-progress-bar .progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: var(--af-pdp-sage);
  border-radius: inherit;
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Payment methods appear immediately after the decision buttons. */

.af-product-payments {
  order: 10;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: 0.55rem 1rem;
  align-items: center;
  margin-top: 0.65rem;
  padding: 0.7rem 0;
  border-block: 1px solid var(--af-pdp-line);
  font-family: var(--af-font-ui);
}

.af-product-hero__summary .wd-shipping-progress-bar.wd-style-bordered > .wd-progress-bar {
  padding: 0 !important;
  border: 0 !important;
}

.af-product-hero__summary .wd-shipping-progress-bar .wd-progress-hide {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.af-product-payments__heading {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}

.af-product-payments__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.af-product-payments__heading span {
  display: grid;
  gap: 0.08rem;
}

.af-product-payments__heading strong {
  color: var(--af-pdp-ink);
  font-size: 0.78rem;
  font-weight: 600;
}

.af-product-payments__heading small,
.af-product-payments > p {
  color: var(--af-pdp-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.af-product-payments__marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-product-payments__marks li,
.af-product-payments__marks svg {
  display: block;
  width: 2.75rem;
  height: 1.75rem;
}

.af-product-payments > p {
  grid-column: 1 / -1;
  margin: -0.1rem 0 0 3.05rem;
}

.af-product-payments > p strong {
  color: var(--af-pdp-accent);
}

/* WoodMart waitlist keeps the e-mail/database workflow; this is its V3 skin. */

.af-product-hero__summary .wd-wtl-form {
  position: relative;
  order: 8;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.25rem 0.85rem;
  margin-top: 1rem;
  padding: 1rem;
  color: var(--af-pdp-ink);
  background: color-mix(in oklch, var(--af-pdp-clay) 8%, var(--af-pdp-surface));
  border: 1px solid var(--af-pdp-line-strong);
  border-radius: 0.35rem;
  font-family: var(--af-font-ui);
}

.af-product-hero__summary .wd-wtl-form::before {
  width: 3.5rem;
  height: 3.5rem;
  grid-row: 1 / span 3;
  background: url("../images/product-trust/dispatch.webp") center / contain no-repeat;
  content: "";
}

.af-product-hero__summary .wd-wtl-form h4 {
  margin: 0;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.05;
  text-transform: none;
}

.af-product-hero__summary .wd-wtl-form > p {
  margin: 0;
  color: var(--af-pdp-muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.af-product-hero__summary .wd-wtl-form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-column: 2;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.af-product-hero__summary .wd-wtl-form-fields input[type="email"] {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding-inline: 0.85rem;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line-strong);
  border-radius: 0.2rem;
  font-size: 0.78rem;
}

html body.af-product-active .af-product-hero__summary .wd-wtl-subscribe {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1.15rem;
  color: var(--af-pdp-surface) !important;
  background: var(--af-pdp-accent) !important;
  border: 1px solid var(--af-pdp-accent) !important;
  border-radius: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.af-product-hero__summary .wd-wtl-form > label {
  grid-column: 2;
  margin-top: 0.4rem;
  color: var(--af-pdp-muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.af-product-hero__summary .wd-wtl-form > label input {
  margin-inline-end: 0.35rem;
}

.af-product-hero__summary .wd-wishlist-btn {
  order: 11;
  display: block !important;
  width: 100% !important;
  margin: 0.7rem 0 0;
  padding: 0.65rem 0;
  border-block: 1px solid var(--af-pdp-line);
  font-family: var(--af-font-ui);
}

.af-product-hero__summary .wd-wishlist-btn > a {
  display: inline-flex !important;
  width: auto !important;
  min-height: 2.4rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0 !important;
  color: var(--af-pdp-ink);
  background: transparent !important;
  border: 0 !important;
  text-align: left;
}

.af-product-hero__summary .wd-wishlist-btn > a::before {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  content: "";
  background: url("../images/wishlist/wishlist-couture-heart.webp") center / contain no-repeat;
}

.af-product-hero__summary .wd-wishlist-btn .wd-action-icon {
  display: none;
}

.af-product-hero__summary .wd-wishlist-btn .wd-action-text {
  color: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.af-product-hero__summary .wd-wishlist-btn > a:hover,
.af-product-hero__summary .wd-wishlist-btn > a:focus-visible,
.af-product-hero__summary .wd-wishlist-btn > a.added {
  color: var(--af-pdp-accent);
}

html body.af-product-active .af-product-hero__summary .stock {
  order: 9;
  display: inline-flex;
  width: 100%;
  min-height: 2.6rem;
  align-items: center;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
  padding: 0.5rem 0;
  color: var(--af-pdp-success) !important;
  background: transparent;
  border-block: 1px solid var(--af-pdp-line);
  font-family: var(--af-font-ui);
  font-size: 0.76rem;
  font-weight: 500;
}

/*
 * Le point valait `currentcolor`, ce qui aurait dû suffire — mais une règle
 * plus spécifique du thème parent lui imposait sa propre couleur, et il
 * s'affichait bleu nuit à côté d'un « En stock » vert. Un pictogramme qui
 * contredit son propre libellé.
 */
html body.af-product-active .af-product-hero__summary .stock::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 0.55rem;
  background: var(--af-pdp-success) !important;
  border-radius: 50%;
  content: "" !important;
}

html body.af-product-active .af-product-hero__summary .stock.out-of-stock::before {
  background: var(--af-pdp-danger) !important;
}

html body.af-product-active .af-product-hero__summary .stock.out-of-stock {
  /* La rupture ouvre la séquence qu'elle explique : le fait, puis les pièces
     disponibles, puis l'alerte. En stock, la ligne reste après le formulaire
     d'achat (9) — elle y confirme un achat possible au lieu de l'annoncer. */
  order: 8;
  color: var(--af-pdp-danger) !important;
}

/* Trust strip -------------------------------------------------------- */

.af-product-assurances {
  order: 12;
  margin-top: 0.75rem;
}

.af-product-assurances__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--af-pdp-line);
  list-style: none;
}

.af-product-assurances__list li {
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.35rem 0.7rem;
}

.af-product-assurances__list li + li {
  border-left: 1px solid var(--af-pdp-line);
}

.af-product-assurances__icon {
  width: 2.45rem;
  height: 2.45rem;
  object-fit: contain;
}

.af-product-assurances__list li > span {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.af-product-assurances__list strong {
  color: var(--af-pdp-ink);
  font-family: var(--af-font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}

.af-product-assurances__list small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--af-pdp-muted);
  font-family: var(--af-font-ui);
  font-size: 0.61rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Product accordions live inside the decision column. ---------------- */

.af-product-details {
  margin-top: 0.7rem;
}

body.af-product-active .product-tabs-wrapper,
body.af-product-active .product-tabs-inner {
  width: 100%;
  max-width: none;
  padding: 0;
  background: transparent;
  border: 0;
}

body.af-product-active .woocommerce-tabs {
  width: 100%;
  margin: 0;
  color: var(--af-pdp-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--af-pdp-line);
  border-radius: 0;
  font-family: var(--af-font-ui);
}

body.af-product-active .woocommerce-tabs .wd-nav-tabs-wrapper {
  display: none !important;
}

body.af-product-active .woocommerce-tabs .wd-accordion-title {
  display: flex;
  min-height: 3.55rem;
  align-items: center;
  margin: 0;
  padding: 0.75rem 0;
  color: var(--af-pdp-ink);
  border-bottom: 1px solid var(--af-pdp-line);
  font-family: var(--af-font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

body.af-product-active .woocommerce-tabs .wd-accordion-title:is(:hover, :focus-visible, .wd-active) {
  color: var(--af-pdp-clay);
}

body.af-product-active .woocommerce-tabs .wd-accordion-content {
  border-bottom: 1px solid var(--af-pdp-line);
}

body.af-product-active .woocommerce-tabs .wd-entry-content {
  max-width: none;
  padding: 1rem 0 1.35rem;
  color: var(--af-pdp-muted);
  font-family: var(--af-font-ui);
  font-size: 0.82rem;
  line-height: 1.65;
}

body.af-product-active .woocommerce-tabs .wd-entry-content > :first-child {
  margin-top: 0;
}

body.af-product-active .woocommerce-tabs .wd-entry-content :where(h2, h3, h4) {
  color: var(--af-pdp-ink);
  text-transform: none;
}

body.af-product-active .woocommerce-tabs .wd-entry-content h2 {
  margin: 1.3rem 0 0.65rem;
  font-family: var(--af-font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.1;
}

body.af-product-active .woocommerce-tabs .wd-entry-content h3 {
  margin: 1.1rem 0 0.55rem;
  font-size: 0.95rem;
}

/* Editorial sequence ------------------------------------------------- */

.af-product-editorial {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 2.28fr);
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  padding: clamp(1.25rem, 2vw, 2rem);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
  border-radius: 0.5rem;
}

.af-product-editorial__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.5rem, 1.5vw, 1.5rem);
}

.af-product-editorial__eyebrow {
  color: var(--af-pdp-clay);
  font-family: var(--af-font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.af-product-editorial h2 {
  max-width: 11ch;
  margin: 0.75rem 0 0;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-display);
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.af-product-editorial p {
  margin: 1rem 0 0;
  color: var(--af-pdp-muted);
  font-family: var(--af-font-ui);
  font-size: 0.82rem;
  line-height: 1.65;
}

.af-product-editorial__copy > a {
  align-self: flex-start;
  margin-top: 1.15rem;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-transform: uppercase;
}

.af-product-editorial__gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
}

.af-product-editorial__gallery:has(> figure:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.af-product-editorial__gallery:has(> figure:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.af-product-editorial__gallery figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--af-pdp-wash);
  border-radius: 0.3rem;
}

.af-product-editorial__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sold-out colour swatches ------------------------------------------- */

/*
 * WoodMart marks a sold-out colour with `wd-disabled` and draws a diagonal on
 * its `::before` — but that pseudo-element is only given a box by
 * `woo-mod-swatches-dis-style-3.css`, which is loaded only when the group is
 * configured with disabled-style 3. This shop's linked colours use style 1, so
 * the stylesheet never arrives, the `::before` has no `content` and no
 * position, and the line has nowhere to be painted. Twenty of the forty-three
 * colours on the mousseline page were sold out and not one of them showed it.
 *
 * So the rule below builds its own box instead of borrowing one. The line has a
 * dark core and a light halo so it stays legible on a deep shade and on an
 * ivory one, and the swatch is partly desaturated — enough to read as
 * unavailable, not so much that the colour stops being recognisable, since the
 * colour is what the shopper is choosing.
 */
/*
 * La désaturation porte sur la pastille intérieure, pas sur le lien : appliquée
 * au lien, elle ternissait aussi son anneau, et la couleur sélectionnée — qui
 * est en rupture sur cette fiche — perdait la seule marque qui la distinguait
 * des quarante-deux autres.
 */
[class*="wd-swatches"] .wd-swatch.wd-disabled {
  position: relative;
}

[class*="wd-swatches"] .wd-swatch.wd-disabled :where(.wd-swatch-bg, img) {
  filter: saturate(0.5);
  opacity: 0.78;
}

[class*="wd-swatches"] .wd-swatch.wd-disabled::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(
    to top left,
    transparent calc(50% - 2.4px),
    rgb(255 255 255 / 78%) calc(50% - 2.4px),
    rgb(255 255 255 / 78%) calc(50% - 1.1px),
    rgb(28 28 28 / 82%) calc(50% - 1.1px),
    rgb(28 28 28 / 82%) calc(50% + 1.1px),
    rgb(255 255 255 / 78%) calc(50% + 1.1px),
    rgb(255 255 255 / 78%) calc(50% + 2.4px),
    transparent calc(50% + 2.4px)
  );
  border-radius: inherit;
  opacity: 1;
}

[class*="wd-swatches"] .wd-swatch.wd-disabled:is(:hover, :focus-visible) :where(.wd-swatch-bg, img) {
  filter: saturate(0.85);
  opacity: 0.95;
}

/* A text swatch already carries `line-through`; a diagonal on top is noise. */
[class*="wd-swatches"] .wd-swatch.wd-text.wd-disabled::before {
  background-image: none;
}

/* Collection bridge -------------------------------------------------- */

.af-product-silo {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--af-border-default);
  border-bottom: 1px solid var(--af-border-default);
}

.af-product-silo h2 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.af-product-silo h2 a {
  color: inherit;
  text-decoration: none;
}

.af-product-silo h2 a:hover,
.af-product-silo h2 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.af-product-silo__intro {
  max-width: 58ch;
  margin: 0.9rem 0 0;
  color: var(--af-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.af-product-silo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin: 1.4rem 0 0;
}

.af-product-silo__also {
  margin: 1.9rem 0 0.6rem;
  color: var(--af-text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.af-product-silo__siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-product-silo__siblings a {
  display: inline-block;
  padding: 0.42rem 0.85rem;
  color: var(--af-text-default);
  font-size: 0.82rem;
  text-decoration: none;
  background: var(--af-color-olive-100);
  border: 1px solid var(--af-border-default);
  border-radius: 999px;
}

.af-product-silo__siblings a:hover,
.af-product-silo__siblings a:focus-visible {
  color: var(--af-color-olive-700);
  border-color: var(--af-color-olive-700);
}

/* Reviews and recommendations --------------------------------------- */

.af-product-after {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.af-product-reviews:empty,
.af-product-related:empty,
.af-product-reviews:has(.wd-single-reviews:empty) {
  display: none;
}

body.af-product-active .wd-single-reviews {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.1rem, 2.5vw, 2rem);
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
  border-radius: 0.5rem;
  font-family: var(--af-font-ui);
}

.af-product-reviews__title {
  margin: 0 0 1rem;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-display);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
}

body.af-product-active .wd-single-reviews .wd-rating-summary-wrap {
  width: 100%;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--af-pdp-line);
}

body.af-product-active .wd-single-reviews .wd-rating-summary-heading {
  justify-content: flex-start;
  gap: 0.65rem;
}

body.af-product-active .wd-single-reviews .wd-reviews-heading {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

body.af-product-active .wd-single-reviews .wd-reviews-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

body.af-product-active .wd-single-reviews :where(.woocommerce-verification-required, .woocommerce-noreviews) {
  color: var(--af-pdp-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

body.af-product-active .wd-single-reviews.af-reviews-empty :where(.wd-rating-summary-cont, .wd-reviews-filters, .wd-reviews-tools .woocommerce-Reviews-title) {
  display: none;
}

body.af-product-active .wd-single-reviews.af-reviews-empty {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem 2rem;
}

body.af-product-active .wd-single-reviews.af-reviews-empty .af-product-reviews__title {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

body.af-product-active .wd-single-reviews.af-reviews-empty #reviews {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem 2rem;
}

body.af-product-active .wd-single-reviews.af-reviews-empty .wd-rating-summary-wrap {
  padding: 0;
  border: 0;
}

body.af-product-active .wd-single-reviews.af-reviews-empty .wd-reviews-heading {
  display: none;
}

body.af-product-active .related-products > .wd-el-title,
body.af-product-active .upsells-products > .wd-el-title {
  margin: 0 0 1.2rem;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-display);
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: left;
  text-transform: none;
}

body.af-product-active .af-product-related .products {
  --wd-col: 4 !important;
  gap: clamp(0.8rem, 1.6vw, 1.35rem) !important;
}

body.af-product-active .af-product-related .wd-product {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.af-product-active .af-product-related .wd-product-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--af-pdp-wash);
  border-radius: 0.3rem;
}

body.af-product-active .af-product-related .wd-product-thumb :where(a, img) {
  width: 100%;
  height: 100%;
}

body.af-product-active .af-product-related .wd-product-thumb img {
  object-fit: contain;
  transition: opacity 180ms ease;
}

body.af-product-active .af-product-related .wd-product:is(:hover, :focus-within) .wd-product-thumb img {
  opacity: 0.92;
}

body.af-product-active .af-product-related .product-element-bottom {
  align-items: flex-start;
  padding: 0.8rem 0.1rem 0;
  font-family: var(--af-font-ui);
  text-align: left;
}

/* WoodMart's stored typography sets `--wd-entities-title-font` to Tahoma, which
 * every other surface already overrides — the catalogue card, the sticky bar —
 * but this block did not, so the four related products were the only titles on
 * the page not set in the interface face. */
body.af-product-active .af-product-related .wd-entities-title {
  margin-bottom: 0.3rem;
  color: var(--af-pdp-ink);
  font-family: var(--af-font-ui);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
}

body.af-product-active .af-product-related .price {
  color: var(--af-pdp-ink);
  font-size: 0.82rem;
  font-weight: 600;
}

body.af-product-active .af-product-related :where(.wd-buttons, .wd-add-btn, .wd-product-grid-slider-nav) {
  display: none !important;
}

/* Sticky decision bar ------------------------------------------------ */

body.af-product-active .wd-sticky-btn {
  min-height: 5.2rem;
  color: var(--af-pdp-ink);
  background: rgb(255 254 253 / 96%);
  border-top: 1px solid var(--af-pdp-line);
  box-shadow: 0 -0.9rem 2.4rem rgb(47 41 37 / 8%);
  backdrop-filter: blur(12px);
}

body.af-product-active .wd-sticky-btn-container {
  width: min(calc(100% - 2rem), 62rem);
  gap: 1rem;
  padding-block: 0.6rem;
}

body.af-product-active .wd-sticky-btn-thumbnail {
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 0.2rem;
}

body.af-product-active .wd-sticky-btn-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.af-product-active .wd-sticky-btn .wd-entities-title {
  font-family: var(--af-font-ui);
  font-size: 0.78rem;
  font-weight: 600;
}

body.af-product-active .wd-sticky-btn-cart {
  gap: 0.7rem;
}

body.af-product-active .wd-sticky-btn .price {
  color: var(--af-pdp-clay);
  font-size: 1rem;
  font-weight: 600;
}

body.af-product-active .wd-sticky-btn .stock,
body.af-product-active .wd-sticky-btn .wd-buy-now-btn {
  display: none !important;
}

body.af-product-active .wd-sticky-btn :where(.button, .btn) {
  min-height: 3.15rem;
  color: var(--af-pdp-surface) !important;
  background: var(--af-pdp-clay) !important;
  border: 1px solid var(--af-pdp-clay) !important;
  border-radius: 0.22rem;
  font-family: var(--af-font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Cart success/error feedback --------------------------------------- */

.af-product-feedback-region {
  position: fixed;
  z-index: 10050;
  top: calc(var(--wd-admin-bar-h, 0px) + var(--wd-header-h, 0px) + 1rem);
  right: 1rem;
  display: grid;
  width: min(25rem, calc(100vw - 2rem));
  pointer-events: none;
}

.af-product-feedback {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) 2.7rem;
  align-items: start;
  gap: 0.75rem;
  padding: 0.9rem;
  color: var(--af-pdp-ink);
  background: var(--af-pdp-surface);
  border: 1px solid var(--af-pdp-line);
  border-left: 0.3rem solid var(--af-pdp-success);
  border-radius: 0.35rem;
  box-shadow: var(--af-pdp-shadow);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-0.5rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.af-product-feedback--error {
  border-left-color: var(--af-pdp-danger);
}

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

.af-product-feedback__icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  color: var(--af-pdp-surface);
  background: var(--af-pdp-success);
  border-radius: 50%;
}

.af-product-feedback__icon::before {
  content: "✓";
  font-size: 1.1rem;
  font-weight: 700;
}

.af-product-feedback--error .af-product-feedback__icon {
  background: var(--af-pdp-danger);
}

.af-product-feedback--error .af-product-feedback__icon::before {
  content: "!";
}

.af-product-feedback__content {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  font-family: var(--af-font-ui);
}

.af-product-feedback__content strong {
  font-size: 0.86rem;
  font-weight: 600;
}

.af-product-feedback__content p {
  margin: 0;
  color: var(--af-pdp-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.af-product-feedback__actions a {
  display: inline-flex;
  margin-top: 0.2rem;
  color: var(--af-pdp-accent);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: underline;
}

.af-product-feedback__close {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  place-items: center;
  color: var(--af-pdp-ink);
  background: transparent;
  border: 0;
  font-size: 1.2rem;
}

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

@media (max-width: 1180px) {
  .af-product-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 1.1fr);
    gap: 2rem;
  }

  .af-product-hero__media .wd-gallery-images {
    width: min(100%, clamp(18rem, 36vh, 23.0625rem));
    height: auto;
  }

  .af-product-hero__media .wd-gallery-thumb {
    max-height: clamp(32rem, 64vh, 41rem);
  }

  .af-product-assurances__list small {
    display: none;
  }

  .af-product-assurances__list li {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    padding-inline: 0.45rem;
  }

  .af-product-assurances__icon {
    width: 2.15rem;
    height: 2.15rem;
  }
}

@media (max-width: 900px) {
  .af-product-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .af-product-hero__media,
  .af-product-hero__summary {
    width: min(100%, 46rem);
    margin-inline: auto;
  }

  .af-product-editorial {
    grid-template-columns: minmax(0, 1fr);
  }

  .af-product-editorial__copy {
    padding: 0.5rem;
  }

  .af-product-editorial h2 {
    max-width: 16ch;
  }
}

@media (max-width: 767px) {
  body.af-product-active .main-page-wrapper {
    overflow-x: clip;
  }

  .af-product-breadcrumb {
    display: none;
  }

  .af-product-detail__frame,
  .af-product-editorial,
  .af-product-after {
    width: calc(100% - 1.25rem);
  }

  /* L'air entre la photo et le titre : 10 px au doigt, pas 16.
     Sur un écran de 800 px de haut — le format Android le plus répandu — ces
     six pixels sont ceux qui manquent au prix des deux fiches au titre le plus
     long pour rester dans le premier écran. */
  .af-product-hero {
    gap: 0.65rem;
    padding-block: 0.1rem 2.5rem;
  }

  .af-product-hero__media {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  .af-product-hero__media .woocommerce-product-gallery {
    display: block;
    position: relative;
  }

  .af-product-hero__media .wd-gallery-images {
    width: calc(100% - 4.5rem);
    height: auto;
    justify-self: auto;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--af-pdp-line);
    border-radius: 0.42rem;
  }

  .af-product-hero__media .wd-gallery-thumb {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3.9rem;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .af-product-hero__media .wd-gallery-thumb::-webkit-scrollbar {
    display: none;
  }

  .af-product-hero__media .wd-gallery-thumb .wd-carousel-wrap {
    gap: 0.45rem;
  }

  .af-product-hero__media .wd-gallery-thumb .wd-carousel-item {
    width: 3.9rem !important;
    min-width: 3.9rem !important;
    max-width: 3.9rem !important;
    height: 6.95rem !important;
  }

  .af-product-hero__media .product-labels {
    left: 0.65rem;
  }

  .af-product-hero__media :where(.wd-btn-arrow, .woocommerce-product-gallery__trigger, .wd-show-product-gallery-wrap) {
    display: none;
  }

  .af-product-hero__media-details {
    margin-top: 0.75rem;
  }

  .af-product-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.65rem 0;
  }

  .af-product-facts__item {
    padding: 0.55rem 0.35rem;
  }

  .af-product-facts__item:nth-child(odd) {
    border-left: 0;
  }

  .af-product-facts__item:nth-child(n + 3) {
    border-top: 1px solid var(--af-pdp-line);
  }

  .af-product-support a {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .af-product-support__icon {
    width: 3rem;
    height: 3rem;
  }

  .af-product-support b {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }

  /* Le prix doit tenir dans le premier écran, y compris sous un titre de trois
     lignes — c'est le cas d'un tiers du catalogue. Le corps du titre reste un
     titre d'affichage (31 px à 390, contre 32 px pour un h1 par défaut), et les
     trois retraits ci-dessous rendent ensemble les 26 px qui manquaient. */
  .af-product-hero__summary .product_title {
    max-width: 18ch;
    font-size: clamp(1.9rem, 8vw, 2.5rem);
  }

  .af-product-detail__subtitle {
    margin-top: 0.4rem;
    font-size: 0.8rem;
  }

  .af-product-hero__summary > .af-product-hero__summary-inner > .price {
    margin-top: 0.55rem;
    font-size: 1.6rem;
  }

  .af-product-hero__summary .woocommerce-product-details__short-description {
    font-size: 0.82rem;
  }

  .af-product-payments {
    grid-template-columns: minmax(0, 1fr);
  }

  .af-product-payments__marks {
    justify-content: flex-start;
    padding-left: 3.05rem;
  }

  .af-product-payments > p {
    margin-left: 3.05rem;
  }

  .af-product-hero__summary .wd-wtl-form {
    grid-template-columns: 3rem minmax(0, 1fr);
    padding: 0.9rem;
  }

  .af-product-hero__summary .wd-wtl-form::before {
    width: 3rem;
    height: 3rem;
  }

  .af-product-hero__summary .wd-wtl-form-fields,
  .af-product-hero__summary .wd-wtl-form > label {
    grid-column: 1 / -1;
  }

  .af-product-hero__summary .variations_form-linked .wd-swatch {
    flex-basis: 3.15rem;
    width: 3.15rem;
    min-width: 3.15rem;
    height: 3.15rem;
    min-height: 3.15rem;
  }

  .af-product-hero__summary form.variations_form .wd-swatch {
    min-height: 3.15rem;
  }

  .af-product-hero__summary .woocommerce-variation-add-to-cart,
  .af-product-hero__summary form.cart:not(.variations_form) {
    grid-template-columns: 6.6rem minmax(0, 1fr);
    gap-inline: 0.55rem;
  }

  .af-product-assurances__list {
    padding-block: 0.55rem;
  }

  .af-product-assurances__list li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.2rem;
    padding: 0.35rem;
    text-align: center;
  }

  .af-product-assurances__icon {
    width: 2rem;
    height: 2rem;
  }

  .af-product-assurances__list strong {
    font-size: 0.72rem;
  }

  body.af-product-active .woocommerce-tabs .wd-accordion-title {
    min-height: 3.7rem;
    font-size: 0.76rem;
  }

  body.af-product-active .woocommerce-tabs .wd-entry-content {
    font-size: 0.82rem;
  }

  .af-product-editorial {
    gap: 1.25rem;
    margin-bottom: 3rem;
    padding: 1rem;
  }

  .af-product-editorial__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .af-product-editorial h2 {
    font-size: 2.25rem;
  }

  .af-product-after {
    gap: 3rem;
    padding-bottom: 6rem;
  }

  body.af-product-active .wd-single-reviews.af-reviews-empty,
  body.af-product-active .wd-single-reviews.af-reviews-empty #reviews {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
    gap: 0.8rem;
  }

  body.af-product-active .af-product-related .products {
    --wd-col: 2 !important;
    gap: 0.75rem !important;
  }

  body.af-product-active .af-product-related .wd-entities-title {
    font-size: 0.8rem;
  }

  /* La barre d'achat collante ne s'invite qu'une fois le vrai formulaire parti.
     Affichée dès le premier pixel, elle masquait 72 px de l'écran pour proposer
     un bouton que la cliente avait déjà sous les yeux ; la classe est posée
     depuis le défilement, en mesurant le formulaire lui-même — donc elle suit
     même quand une image ou une variation le déplace après le chargement. */
  body.af-product-active .wd-sticky-btn {
    min-height: 4.5rem;
    transform: translate3d(0, 110%, 0);
  }

  body.af-product-active.af-sticky-armed .wd-sticky-btn {
    transform: translate3d(0, 0, 0);
  }

  body.af-product-active .wd-sticky-btn-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    padding: 0.5rem 0.65rem max(0.5rem, env(safe-area-inset-bottom));
  }

  body.af-product-active .wd-sticky-btn-content {
    display: none !important;
  }

  body.af-product-active .wd-sticky-btn-cart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    width: 100% !important;
    margin: 0 !important;
  }

  body.af-product-active .wd-sticky-btn .price {
    display: block !important;
    margin: 0;
    font-size: 0.9rem;
  }

  body.af-product-active .wd-sticky-btn form.cart,
  body.af-product-active .wd-sticky-btn .wd-sticky-add-to-cart {
    width: 100%;
    margin: 0;
  }

  body.af-product-active .wd-sticky-btn .quantity {
    display: none;
  }

  body.af-product-active .wd-sticky-btn :where(.button, .btn) {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: 0.7rem;
    font-size: 0.74rem;
  }

  body.af-product-active .af-support-fab {
    display: none !important;
  }

  .af-product-feedback-region {
    top: auto;
    right: 0.65rem;
    bottom: calc(4.7rem + env(safe-area-inset-bottom));
    left: 0.65rem;
    width: auto;
  }

  /* Cibles tactiles.
     Au doigt, le lien du guide mesurait 28 px de haut et les pastilles de
     collections voisines 37 : au-dessus du minimum exigible, en dessous de ce
     qu'on vise. La hauteur est portée à 44 px sans toucher au dessin — seule la
     zone cliquable change. */
  .af-product-silo__actions :where(.af-button, a) {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }

  .af-product-silo__siblings a {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding-inline: 1rem;
  }

  .af-product-editorial__copy a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }

  /* Le titre d'une pièce suggérée est un lien à part entière, pas seulement la
     légende de sa photo : il tient la même hauteur qu'elle au doigt. */
  body.af-product-active .af-product-related .wd-entities-title a {
    display: flex;
    min-height: 2.75rem;
    align-items: flex-start;
  }
}

@media (max-width: 370px) {
  .af-product-detail__frame,
  .af-product-editorial,
  .af-product-after {
    width: calc(100% - 0.85rem);
  }

  .af-product-hero__media .wd-gallery-images {
    width: calc(100% - 4rem);
  }

  .af-product-hero__media .wd-gallery-thumb {
    width: 3.55rem;
  }

  .af-product-hero__media .wd-gallery-thumb .wd-carousel-item {
    width: 3.55rem !important;
    min-width: 3.55rem !important;
    max-width: 3.55rem !important;
    height: 6.35rem !important;
  }

  .af-product-hero__summary .woocommerce-variation-add-to-cart,
  .af-product-hero__summary form.cart:not(.variations_form) {
    grid-template-areas:
      "quantity-label"
      "quantity"
      "add"
      "buy";
    grid-template-columns: minmax(0, 1fr);
  }

  .af-product-hero__summary .quantity {
    width: 7rem;
  }

  .af-product-hero__summary .wd-wtl-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .af-product-detail *,
  .af-product-editorial *,
  .af-product-after *,
  .af-product-feedback {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* What a review says about itself — structured answers and the incentive
   disclosure required by ADR-039. Inside the review markup, never a banner
   above the list: a badge that only exists in a heading stops disclosing
   anything the moment a single review is read out of context. */
.af-review-extra {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--af-color-ivory, #faf7f2);
}

.af-review-scales,
.af-review-criteria-read {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-review-criteria-read {
  margin-top: 10px;
}

.af-review-scales li,
.af-review-criteria-read li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.86rem;
}

.af-review-scales span,
.af-review-criteria-read span:first-child {
  color: var(--af-text-faint, #736f67);
}

.af-review-scales strong {
  color: var(--af-color-ink, #24231f);
  font-weight: 600;
}

/* The filled and empty stars are one string, so they cannot drift apart; the
   accessible name next to it carries the number for anyone not seeing them. */
.af-review-score {
  color: var(--af-text-accent, #8d5147);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.af-review-disclosure {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--af-color-border, #e6dfd7);
  color: var(--af-text-faint, #736f67);
  font-size: 0.78rem;
  line-height: 1.5;
}

.af-review-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--af-color-clay, #8d5147);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .af-review-scales li,
  .af-review-criteria-read li {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* What her customers agree on, above the size selector — the one position
   where "taille petit" still changes which size goes in the basket. */
.af-product-insights {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--af-color-border, #e6dfd7);
  border-radius: 12px;
  background: var(--af-color-ivory, #faf7f2);
}

.af-product-insights h3 {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-text-faint, #736f67);
}

.af-insight-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-insight-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.af-insight-list strong {
  color: var(--af-color-ink, #24231f);
  font-size: 0.98rem;
  font-weight: 600;
}

/* The answer worth acting on before ordering carries a marker. Colour is not
   the only signal: the bar reads without it, and the sentence says the rest. */
.af-insight-list li.is-notable {
  padding-left: 11px;
  border-left: 3px solid var(--af-color-clay, #8d5147);
}

.af-insight-list li.is-notable strong {
  color: var(--af-color-clay-deep, #49372f);
}

.af-insight-list span,
.af-insight-criteria small {
  color: var(--af-text-faint, #736f67);
  font-size: 0.8rem;
}

.af-insight-criteria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 18px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--af-color-border, #e6dfd7);
}

.af-insight-criteria div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.af-insight-criteria dt {
  color: var(--af-text-faint, #736f67);
  font-size: 0.84rem;
}

.af-insight-criteria dd {
  margin: 0;
  white-space: nowrap;
}

.af-insight-score {
  color: var(--af-color-ink, #24231f);
  font-weight: 600;
}

.af-insight-source {
  margin: 12px 0 0;
  font-size: 0.78rem;
}

.af-insight-source a {
  color: var(--af-text-faint, #736f67);
}

/* Photographs a customer attached to her review. */
.af-review-photos{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:0;list-style:none}
.af-review-photos img{width:72px;height:90px;border-radius:8px;object-fit:cover;display:block}
.af-review-photos a{display:block;border-radius:8px}
.af-review-photos a:focus-visible{outline:2px solid var(--af-color-clay,#8d5147);outline-offset:2px}

/* In-stock pieces on a page that would otherwise be a dead end. Six visitors in
   ten arrive on one, so this sits above the waitlist: the woman who came to buy
   today is answered before the one willing to wait.

   The order of the three is sequenced in PHP — rupture at 30, alternatives at
   31, alerte at 32 — and the DOM keeps that sequence. Without an `order` here
   the section fell back to 0 and jumped above the title, so the page opened on
   four other pieces before naming the one she asked for. Sharing slot 8 with
   `.stock.out-of-stock` and `.wd-wtl-form` hands the sequence back to the DOM,
   which already has it right. */
.af-alternatives {
  order: 8;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--af-color-border, #e6dfd7);
  border-radius: 12px;
  background: var(--af-color-white, #fff);
}

.af-alternatives h2 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.af-alternatives > p {
  margin: 0 0 14px;
  color: var(--af-text-faint, #736f67);
  font-size: 0.86rem;
}

.af-alternatives__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-alternatives__list a {
  display: grid;
  gap: 6px;
  color: var(--af-color-ink, #24231f);
  text-decoration: none;
}

.af-alternatives__list img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.af-alternatives__name {
  font-size: 0.85rem;
  line-height: 1.35;
}

.af-alternatives__price {
  color: var(--af-text-accent, #8d5147);
  font-size: 0.85rem;
  font-weight: 600;
}

.af-alternatives__list a:focus-visible {
  outline: 2px solid var(--af-color-clay, #8d5147);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .af-alternatives { padding: 14px; }
  .af-alternatives__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
 * Guide des tailles
 *
 * Ouvert en `<dialog>` natif : le navigateur gère le piège de focus, la touche
 * Échap et le retour du focus sur le déclencheur. Le style se limite donc à la
 * mise en page et au voile de fond.
 * ------------------------------------------------------------------------ */

/* `order` n'est pas une décoration ici : ce conteneur est une grille flex dont
 * chaque enfant porte son rang (titre 1, sous-titre 2, note 3, prix 4, résumé 6,
 * couleurs liées 7, formulaire d'achat 8, paiements 10, réassurances 12). Sans
 * rang, un enfant vaut 0 et remonte **au-dessus du titre** : le guide des
 * tailles et la date de livraison s'affichaient avant même que la cliente sache
 * quel vêtement elle regarde et à quel prix. Rang 7, donc, à égalité avec les
 * couleurs liées — l'ordre du DOM les départage, et il place déjà le guide juste
 * avant le sélecteur de taille, là où la question se pose. */
.af-size-guide {
  order: 7;
  margin: 0 0 14px;
}

/*
 * Un renvoi vers un tableau de mesures, pas une action d'achat. Il se
 * présentait pourtant en encadré gris et en majuscules, du même poids que
 * « Ajouter au panier » — une règle de bouton plus générale du thème parent
 * l'emportait sur celle-ci. La spécificité est remontée et il redevient ce
 * qu'il est : un lien.
 */
.af-product-hero__summary .af-size-guide__trigger,
.af-size-guide__trigger {
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentcolor;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--af-pdp-accent, #8d5147);
  font-family: var(--af-font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
}

.af-product-hero__summary .af-size-guide__trigger:is(:hover, :focus-visible),
.af-size-guide__trigger:is(:hover, :focus-visible) {
  color: var(--af-pdp-ink);
  background: none;
  border-bottom-color: var(--af-pdp-ink);
}

.af-size-guide__trigger:focus-visible,
.af-size-guide__close:focus-visible {
  outline: 2px solid var(--af-color-clay, #8d5147);
  outline-offset: 3px;
}

.af-size-guide__dialog {
  width: min(30rem, calc(100vw - 32px));
  max-height: min(80vh, 44rem);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--af-surface-raised, #ffffff);
  color: var(--af-color-ink, #24231f);
}

.af-size-guide__dialog::backdrop {
  background: rgb(36 35 31 / 55%);
}

.af-size-guide__panel {
  padding: 24px;
}

.af-size-guide__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.af-size-guide__panel h3 {
  margin: 20px 0 6px;
  font-size: 0.95rem;
}

.af-size-guide__panel p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.af-size-guide__measures {
  display: grid;
  gap: 1px;
  margin: 14px 0 8px;
  border: 1px solid var(--af-border-default, #e6dfd7);
  border-radius: 9px;
  background: var(--af-border-default, #e6dfd7);
  overflow: hidden;
}

.af-size-guide__measures > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: var(--af-surface-raised, #ffffff);
}

.af-size-guide__measures dt {
  font-size: 0.9rem;
}

.af-size-guide__measures dd {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.af-size-guide__note,
.af-size-guide__doubt {
  color: var(--af-text-muted, #625f58);
  font-size: 0.82rem;
}

.af-size-guide__fits,
.af-size-guide__options {
  font-weight: 600;
}

.af-size-guide__options span {
  font-weight: 400;
}

.af-size-guide__options span::after {
  content: " :";
}

.af-size-guide__close {
  margin-top: 16px;
  padding: 10px 18px;
  border: 1px solid var(--af-border-default, #e6dfd7);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 480px) {
  .af-size-guide__panel { padding: 18px; }
}

/* --------------------------------------------------------------------------
 * Barre d'achat persistante : la taille choisie, et le pied de page rendu
 *
 * Le prix était déjà ramené dans la barre plus haut dans cette feuille. Restait
 * ce qu'elle ne disait pas — quelle taille est sélectionnée — et un décalage :
 * la barre mesure 4,5 rem alors que le thème parent ne réserve au bas de la
 * page que la hauteur du bouton, si bien que la fin du pied de page passait
 * dessous.
 * ------------------------------------------------------------------------ */

.af-sticky-choice {
  display: flex;
  align-items: center;
  color: var(--af-text-muted, #625f58);
  font-size: 0.8rem;
  white-space: nowrap;
}

@media (max-width: 767px) {
  body.af-product-active.wd-sticky-btn-on-mb {
    /* Hauteur du bouton : au-delà des 24 px exigés (WCAG 2.5.8) et des 44 px
       recommandés, sans dépasser la barre une fois ses marges retirées. */
    --wd-sticky-btn-height: 3.5rem;

    /* Hauteur réelle de la barre, pour que le pied de page finisse au-dessus. */
    padding-bottom: 4.5rem;
  }

  /* Troisième colonne uniquement quand une taille est réellement choisie. */
  body.af-product-active .wd-sticky-btn-cart:has(.af-sticky-choice) {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
}

/* Date de livraison estimée, sous le bouton d'achat.
 *
 * Rang 9 : entre le formulaire d'achat (8) et les moyens de paiement (10), le
 * créneau que la barre « livraison offerte » de WoodMart occupait avant d'être
 * retirée. Une date qu'on tient remplace une promesse qu'on ne tenait pas. */
.af-delivery-estimate {
  order: 9;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--af-border-default, #e6dfd7);
  border-radius: 9px;
  font-size: 0.9rem;
}

.af-delivery-estimate span {
  font-weight: 600;
}

.af-delivery-estimate small {
  flex: 1 0 100%;
  color: var(--af-text-muted, #625f58);
  font-size: 0.78rem;
}