/* Hallmark · WooCommerce
 *
 * WooCommerce produit son propre balisage pour le panier, le tunnel et les
 * notices. On le remet au format du thème plutôt que de le remplacer :
 * remplacer ces gabarits, c'est s'engager à les maintenir à chaque version
 * majeure de Woo.
 */

/* ═══════════════════════════════ NOTICES ══════════════════════════════ */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-block: var(--space-md);
  border-radius: var(--radius-lg);
  border: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.woocommerce-message { background: var(--color-success-soft); color: var(--color-success); }
.woocommerce-info    { background: var(--color-paper-2);      color: var(--color-ink-2); }
.woocommerce-error   { background: var(--color-danger-soft);  color: var(--color-danger); flex-direction: column; align-items: flex-start; }
.woocommerce-error li { width: 100%; }

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: auto;
  flex: none;
}

/* ══════════════════════════════ CHAMPS ════════════════════════════════ */

.woocommerce form .form-row { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-md); }
.woocommerce form .form-row label,
.woocommerce-form-row label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.woocommerce form .form-row .required { color: var(--color-danger); text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--color-ink-3); font-weight: var(--weight-regular); }

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.search-field,
.select2-container .select2-selection--single {
  width: 100%;
  min-height: 2.875rem;
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hairline) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-base);       /* 16px : en dessous, iOS zoome au focus */
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.search-field { border-radius: var(--radius-pill); flex: 1 1 12rem; min-width: 0; }

.woocommerce textarea { min-height: 6.5rem; padding-top: var(--space-xs); resize: vertical; }

.woocommerce input:hover,
.woocommerce textarea:hover,
.woocommerce select:hover { border-color: var(--color-ink-3); }

.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible,
.search-field:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 var(--focus-ring) var(--color-accent-soft);
}

.woocommerce input[disabled],
.woocommerce textarea[disabled],
.woocommerce select[disabled] {
  background: var(--color-paper-3);
  color: var(--color-ink-3);
  cursor: not-allowed;
}

.woocommerce .form-row.woocommerce-invalid input { border-color: var(--color-danger); }
.woocommerce .form-row.woocommerce-validated input { border-color: var(--color-success); }

/* ══════════════════════════════ BOUTONS ═══════════════════════════════
   WooCommerce écrit .button partout. On mappe sur le bouton du thème
   plutôt que d'ajouter une classe dans chaque gabarit.                    */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.875rem;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  border: var(--rule-hairline) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-instant) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover { background: oklch(26% 0.088 268); }

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-gap);
}
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] { opacity: 0.42; cursor: not-allowed; }

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order { background: var(--color-accent-text); }
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover { background: oklch(45% 0.135 152.3); }

/* État chargement natif de Woo. */
.woocommerce .button.loading { opacity: 0.7; pointer-events: none; }
.woocommerce .button.loading::after { content: '…'; margin-left: var(--space-3xs); }
.woocommerce .added_to_cart { display: none; }   /* le compteur du panier suffit */

/* ═══════════════════════ FORMULAIRE D'ACHAT ═══════════════════════════ */

.woocommerce .product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
}
.woocommerce .product form.cart .button {
  flex: 1 1 12rem;
  min-height: 3.25rem;
  font-size: var(--text-base);
}
.woocommerce .product form.cart div.quantity { margin: 0; flex: none; }

.woocommerce .product .stock { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0; }
.woocommerce .product .stock.in-stock { color: var(--color-success); }
.woocommerce .product .stock.out-of-stock { color: var(--color-warning); }

/* Plus de règle sur .quantity input.qty : le champ nu n'existe plus, tous
   les sélecteurs de quantité passent par woocommerce/global/quantity-input.php
   et donc par le widget .qty-field, bordure comprise. Une pilule bordée ici
   viendrait doubler celle du widget. */

/* ═══════════════════════════════ PANIER ═══════════════════════════════ */

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 0;
  font-size: var(--text-sm);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-md) var(--space-sm);
  border: 0;
  border-bottom: var(--rule-hairline) solid var(--color-rule);
  text-align: left;
  vertical-align: middle;
}
.woocommerce table.shop_table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.woocommerce table.shop_table td.product-name a {
  font-weight: var(--weight-semibold);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.woocommerce table.shop_table .product-thumbnail img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}
.woocommerce table.shop_table .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

.woocommerce a.remove {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink-3);
  text-decoration: none;
  font-size: var(--text-lg);
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.woocommerce a.remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.woocommerce a.remove:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }

.woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}
.woocommerce .cart_totals {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
  margin-top: var(--space-xl);
}
.woocommerce .cart_totals h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.woocommerce .cart_totals .order-total .amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
}

.woocommerce .coupon { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.woocommerce .coupon input { flex: 1 1 10rem; min-width: 0; }

/* ═══════════════════════════════ TUNNEL ═══════════════════════════════ */

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

#customer_details { margin-bottom: var(--space-xl); }

#order_review_heading { font-size: var(--text-2xl); margin-bottom: var(--space-md); }

#order_review {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
}

.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin-top: var(--space-lg);
}
.woocommerce-checkout #payment ul.payment_methods {
  padding: 0;
  border: 0;
  list-style: none;
  margin-bottom: var(--space-md);
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  border: var(--rule-medium) solid var(--color-accent-line);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
}
.woocommerce-checkout #payment div.payment_box {
  background: transparent;
  padding: var(--space-2xs) 0 0;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order { padding: 0; margin-top: var(--space-md); }
.woocommerce-checkout #payment #place_order { width: 100%; min-height: 3.25rem; font-size: var(--text-base); }

.woocommerce-terms-and-conditions-wrapper { font-size: var(--text-xs); color: var(--color-ink-2); }

/* ═════════════════════════ PAGE DE CONFIRMATION ═══════════════════════ */

.woocommerce-order { max-width: var(--prose-max); }
.woocommerce-thankyou-order-received {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-lg);
}
.woocommerce ul.order_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-md);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
  list-style: none;
}
.woocommerce ul.order_details li {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
  text-transform: none;
}
.woocommerce ul.order_details li strong {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════ TRI DU CATALOGUE ═════════════════════════ */

.woocommerce-ordering select {
  min-height: 2.5rem;
  padding-block: var(--space-3xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  width: auto;
}

/* ══════════════════════════════ AVIS ══════════════════════════════════ */

.woocommerce .star-rating { color: var(--color-accent-text); font-size: var(--text-sm); }
.woocommerce #reviews #comments ol.commentlist { padding: 0; list-style: none; }
.woocommerce #reviews #comments ol.commentlist li {
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}
.woocommerce #reviews .comment-text { margin: 0; padding: 0; border: 0; }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════════ */

@media (min-width: 861px) {
  .woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Le tableau du panier passe en cartes empilées : un <table> à 6 colonnes
     sur 375 px est illisible, et le faire scroller horizontalement fait
     perdre le total de vue. */
  .woocommerce-cart table.shop_table thead { display: none; }
  .woocommerce-cart table.shop_table tbody tr {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    padding: var(--space-md) 0;
    border-bottom: var(--rule-hairline) solid var(--color-rule);
    align-items: center;
  }
  .woocommerce-cart table.shop_table tbody td {
    padding: 0;
    border: 0;
    grid-column: 2;
  }
  .woocommerce-cart table.shop_table tbody td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 4;
  }
  .woocommerce-cart table.shop_table tbody td.product-remove {
    grid-column: 2;
    justify-self: end;
    margin-top: calc(var(--space-md) * -1);
  }
  .woocommerce-cart table.shop_table tbody td::before {
    content: attr(data-title) ' : ';
    font-size: var(--text-2xs);
    color: var(--color-ink-3);
  }
  .woocommerce-cart table.shop_table tbody td.product-name::before,
  .woocommerce-cart table.shop_table tbody td.product-thumbnail::before,
  .woocommerce-cart table.shop_table tbody td.product-remove::before { content: ''; }

  .woocommerce .actions .button { width: 100%; }
}

/* ═══════════════════════════ PAGE PANIER ══════════════════════════════
   Deux colonnes : les articles à gauche, les totaux collants à droite.
   En un seul flux, le total et le bouton « Commander » tombaient sous la
   ligne de flottaison dès deux articles, alors que c'est précisément ce
   que le visiteur vient vérifier. */

.cart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}

.cart-head__count {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  margin-left: var(--space-xs);
  padding: 0 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* ── Fil d'étapes ──────────────────────────────────────────────────────
   Trois étapes et non quatre : il n'y a pas d'étape de paiement en ligne.
   Le montrer rassure mieux qu'un paragraphe, parce qu'on voit que le
   tunnel s'arrête avant toute demande de carte bancaire. */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  border: var(--rule-hairline) solid var(--color-rule);
  background: var(--color-paper);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-3);
  white-space: nowrap;
}
/* Trois états : franchi, en cours, à venir. Une étape franchie porte une
   coche et non son icône d'origine, c'est le seul signe qui se lit sans
   comparer les couleurs. */
.steps__item.is-done {
  border-color: transparent;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}
.steps__item.is-current {
  border-color: transparent;
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
}
.steps__icon { display: grid; place-items: center; flex: none; }
.steps__icon svg { width: 1rem; height: 1rem; }
.steps__item.is-current .steps__icon svg { color: var(--color-accent); }
.steps__item.is-done .steps__icon svg { color: var(--color-accent-text); }

/* Le chevron de liaison est un pseudo-élément : trois <li> et rien d'autre
   dans le balisage, la flèche n'est pas du contenu. */
.steps__item + .steps__item::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-right: var(--space-3xs);
  margin-left: calc(var(--space-2xs) * -1);
  border-top: var(--rule-medium) solid var(--color-rule-strong);
  border-right: var(--rule-medium) solid var(--color-rule-strong);
  transform: rotate(45deg);
  flex: none;
}

/* ── Grille du panier ──────────────────────────────────────────────── */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: start;
}

.woocommerce .cart-layout .cart-collaterals {
  position: sticky;
  top: 6.5rem;
  min-width: 0;
}

/* La carte des totaux perd sa marge haute : dans la grille, elle est déjà
   alignée sur la première ligne du tableau. */
.woocommerce .cart-layout .cart_totals {
  margin-top: 0;
  border: var(--rule-hairline) solid var(--color-rule);
}
.woocommerce .cart_totals table { font-size: var(--text-sm); }
.woocommerce .cart_totals th { color: var(--color-ink-2); font-weight: var(--weight-regular); }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { padding-top: var(--space-sm); }

.woocommerce .cart-layout .checkout-button {
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--text-base);
  margin-top: var(--space-sm);
}

/* Rappel du paiement à la réception, juste au-dessus du bouton. */
.cart-cod {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: var(--space-md) 0 0;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}
.cart-cod svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--color-accent-text); margin-top: 1px; }

/* Le tableau des articles vit dans une carte, comme les totaux : deux blocs
   de même nature visuelle, plutôt qu'un tableau nu face à une carte. */
.woocommerce-cart-form {
  padding: clamp(var(--space-sm), 2vw, var(--space-md));
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  min-width: 0;
  overflow-x: auto;
}

.woocommerce .cart .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}
.woocommerce .cart .actions .coupon { margin-bottom: 0; flex: 1 1 18rem; }
.woocommerce .cart td.actions { border-bottom: 0; }

/* Ventes croisées : sous la grille, jamais dans la colonne des totaux, où
   elles repoussaient le bouton « Commander » de 400 px. */
.woocommerce .cross-sells { margin-top: var(--space-2xl); }
.woocommerce .cross-sells > h2 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}
/* Plus de regle sur ul.products : woocommerce/cart/cross-sells.php rend
   desormais la grille produit du theme, un <div class="product-grid">, et
   non un <ul> dans lequel le theme injectait des <article>. */

/* ── Panier vide ───────────────────────────────────────────────────── */

.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}
.woocommerce .return-to-shop { margin-top: var(--space-md); }

@media (max-width: 61.25rem) {
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .woocommerce .cart-layout .cart-collaterals { position: static; }
}

@media (max-width: 40rem) {
  .cart-head { align-items: flex-start; }
  .steps { gap: var(--space-3xs); }
  .steps__item { padding: 0.375rem 0.625rem; font-size: var(--text-2xs); }
  .steps__item + .steps__item::before { margin-left: calc(var(--space-3xs) * -1); }
  .woocommerce .cart .actions { flex-direction: column; align-items: stretch; }
  .woocommerce .cart .actions .button { width: 100%; }
}

/* Sous 30 rem, le fil d'étapes ne tient plus sur une ligne : on ne garde
   que l'étape courante, les deux autres restent lisibles par les lecteurs
   d'écran. Trois pilules empilées prendraient la moitié de l'écran pour
   une information de repérage. */
@media (max-width: 30rem) {
  .steps__item:not(.is-current):not(.is-done) {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .steps__item + .steps__item::before { display: none; }
}

/* ── Panier vide ───────────────────────────────────────────────────────
   Le gabarit d'origine renvoyait le visiteur à la boutique, c'est-à-dire au
   point de départ. Ici il repart par la gamme qui l'intéresse. */
.cart-empty-state {
  max-width: 40rem;
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-2xl);
  background: var(--color-paper);
  text-align: center;
  margin-inline: auto;
}

.cart-empty-state__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-ink-3);
}
.cart-empty-state__icon svg { width: 1.5rem; height: 1.5rem; }

.woocommerce .cart-empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  /* Titre et texte forment un bloc : 12 px entre eux, 32 px avant les
     boutons. L'espacement dit ce qui va ensemble. */
  margin: 0 0 var(--space-xs);
}

.cart-empty-state__text {
  max-width: 44ch;
  margin: 0 auto;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.cart-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}

/* Sélecteur à deux classes : base.css remet à zéro la marge et le padding
   de tout « ul[class] », ce qui bat une classe seule. Sans cela la liste des
   gammes venait se coller sous les boutons, sans le moindre espace. */
.cart-empty-state .cart-empty-state__cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg) 0 0;
  border-top: var(--rule-hairline) solid var(--color-rule);
  list-style: none;
}
.cart-empty-state__cats a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.cart-empty-state__cats a:hover { background: var(--color-paper-3); }
.cart-empty-state__cats a:focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-gap); }
.cart-empty-state__cats svg { width: 1rem; height: 1rem; color: var(--color-accent-text); flex: none; }

@media (max-width: 30rem) {
  .cart-empty-state__actions { flex-direction: column; }
  .cart-empty-state__actions .btn { width: 100%; }
}

/* ── Formulaire de commande en deux colonnes ───────────────────────────
   Champs à gauche, récapitulatif collant à droite, comme sur le panier.
   Le gabarit classique empile les deux : sur desktop, le montant à régler
   se retrouvait à 900 px sous le premier champ, alors que c'est lui qui
   décide si on remplit le formulaire ou non. */
@media (min-width: 62rem) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    /* Deux rangées explicites : la première à la hauteur du titre, la
       seconde prend le reste. Sans cela, la colonne de gauche qui couvre
       les deux rangées répartissait sa hauteur entre elles, et « Votre
       commande » se retrouvait à 194 px au-dessus de son tableau. */
    grid-template-rows: min-content 1fr;
    column-gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
    row-gap: var(--space-md);
    align-items: start;
  }
  .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 6.5rem; }

  /* La colonne des champs est déjà étroite : la sous-diviser en deux y
     tasserait les libellés. Le col2-set reste sur une colonne. */
  .woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); }
}

/* Le tableau du récapitulatif tient dans une colonne de 24 rem : chasse
   tabulaire pour aligner les dirhams, pas de retour à la ligne sur les
   montants. */
.woocommerce-checkout #order_review table.shop_table { font-size: var(--text-sm); }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { padding: var(--space-xs) 0; }
.woocommerce-checkout #order_review .product-name { padding-right: var(--space-sm); }
.woocommerce-checkout #order_review .order-total .amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
}

/* Champs de formulaire : cible tactile au-dessus de 44 px partout. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select { min-height: 2.875rem; }
.woocommerce form .form-row label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.woocommerce form .form-row .required { color: var(--color-danger); text-decoration: none; }

/* Le paiement à la réception est le seul moyen : la liste n'a rien à
   sélectionner, elle a quelque chose à confirmer. */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] { display: none; }
.woocommerce-checkout #payment ul.payment_methods li label::before {
  content: '';
  display: inline-block;
  width: 1.125rem;
  height: 0.625rem;
  margin-right: var(--space-2xs);
  border-left: var(--rule-medium) solid var(--color-accent-text);
  border-bottom: var(--rule-medium) solid var(--color-accent-text);
  transform: rotate(-45deg) translate(2px, -2px);
}

/* ── Lignes du panier ──────────────────────────────────────────────────
   Une liste, pas un tableau. Le <table> à six colonnes du gabarit d'origine
   laissait le navigateur répartir la largeur au contenu : la colonne
   « supprimer » prenait 286 px et la photo du produit finissait à 8 px de
   côté. Ici chaque ligne a une grille propre et la photo une taille fixe. */
.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cart-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}

/* Quantité et sous-total vivent dans un même conteneur, et non dans deux
   colonnes de grille. Deux colonnes séparées se retrouvaient à se
   chevaucher dès que la rangée du bas devenait trop étroite ; un flex avec
   space-between ne peut pas produire ce défaut. */
.cart-line__foot {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.cart-line__media {
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper);
}
.cart-line__media a { display: block; width: 100%; height: 100%; }
.woocommerce .cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2xs);
}

.cart-line__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }

.cart-line__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.cart-line__name a { text-decoration: none; }
.cart-line__name a:hover { color: var(--color-accent-text); }

.cart-line__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.cart-line__unit { font-variant-numeric: tabular-nums; }

.cart-line__qty { flex: none; }

.cart-line__total {
  margin: 0;
  min-width: 7rem;
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-line__remove { flex: none; }

/* Sous 54 rem, la ligne se replie : photo à gauche sur deux rangs, texte à
   droite, puis quantité et sous-total sur la rangée du bas. Le sous-total
   reste aligné à droite, c'est là qu'on va le chercher. */
@media (max-width: 53.75rem) {
  .cart-line {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'media body remove'
      'media foot foot';
    row-gap: var(--space-sm);
    column-gap: var(--space-sm);
    align-items: start;
  }
  .cart-line__media  { grid-area: media; width: 4.5rem; height: 4.5rem; align-self: start; }
  .cart-line__body   { grid-area: body; }
  .cart-line__foot   { grid-area: foot; justify-content: space-between; gap: var(--space-sm); }
  .cart-line__total  { min-width: 0; }
  .cart-line__remove { grid-area: remove; }
}

/* Sous 30 rem, la rangée du bas passe sous la photo et prend toute la
   largeur : le sélecteur de quantité fait 130 px à lui seul, il ne reste
   pas de quoi loger un montant à côté dans la seule colonne du texte. */
@media (max-width: 30rem) {
  .cart-line {
    grid-template-areas:
      'media body remove'
      'foot  foot foot';
  }
}

/* Sous 26 rem, la photo passe sous la barre des 4 rem : le nom du produit
   a besoin de la largeur restante plus que la vignette. */
@media (max-width: 26rem) {
  .cart-line__media { width: 3.5rem; height: 3.5rem; }
  .cart-line__total { font-size: var(--text-base); }
}

/* Actions sous la liste : le code promo à gauche, la mise à jour discrète.
   Avec JavaScript, main.js soumet le formulaire dès qu'une quantité change,
   et ce bouton ne sert plus qu'aux navigateurs sans script. */
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hairline) solid var(--color-rule);
}
.cart-actions .coupon { margin-bottom: 0; flex: 1 1 20rem; }
.cart-actions__update { flex: none; }

@media (max-width: 40rem) {
  .cart-actions { flex-direction: column; align-items: stretch; }
  .cart-actions .coupon { flex: none; }
  .cart-actions__update { width: 100%; }
}

/* Pendant la mise à jour automatique, la liste passe en attente : sans ce
   signal, l'utilisateur clique une deuxième fois sur « + » en croyant que
   rien ne s'est passé. */
.woocommerce-cart-form[data-updating="true"] .cart-lines {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-cart-form[data-updating="true"] .cart-lines { transition: none; }
}

/* ── Champs de la commande ─────────────────────────────────────────────
   WooCommerce classe ses champs en form-row-first / -last / -wide et les
   fait flotter. Le thème ne rattrapait pas ces classes : prénom et nom se
   retrouvaient l'un sous l'autre sur toute la largeur, et le formulaire
   ressemblait à une pile de champs sans regroupement. Une grille à deux
   colonnes rend les paires évidentes. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-sm);
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes { grid-column: 1 / -1; }

.woocommerce form .form-row { float: none; width: auto; padding: 0; }

/* Les blocs Facturation et Livraison deviennent des cartes : sur une page
   qui demande huit informations personnelles, il faut voir où commence et
   où finit chaque groupe. */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  border: var(--rule-hairline) solid var(--color-rule);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
}
.woocommerce-shipping-fields,
.woocommerce-additional-fields { margin-top: var(--space-md); }

/* Le conteneur expédition sort vide du gabarit WooCommerce quand aucune
   adresse d'expédition n'est requise (paiement à la livraison) : sans
   cette garde, la carte se peignait quand même, bloc fantôme au milieu
   du formulaire. */
.woocommerce-shipping-fields:not(:has(.form-row, h3)) { display: none; }

.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3,
.woocommerce-shipping-fields h3#ship-to-different-address {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}

/* La case « livrer à une autre adresse » est une commande, pas un titre :
   elle se lit en corps de texte, alignée avec sa case. */
.woocommerce-shipping-fields h3#ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.woocommerce-shipping-fields h3#ship-to-different-address input { width: auto; margin: 0; }

@media (max-width: 40rem) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
}

/* ── Correctifs de tunnel ──────────────────────────────────────────────
   Trois défauts constatés en recette, tous du même genre : une valeur que
   le thème n'avait pas bornée face à une valeur imposée par WooCommerce. */

/* 1. WooCommerce pose une icône de police sur ses encarts. La police n'est
      pas chargée par le thème : à l'écran c'est un carré vide, et son
      positionnement absolu poussait le texte hors de l'encart. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error { padding-left: var(--space-md); }

/* 2. Une icône inline sans attributs width/height n'a pas de taille
      intrinsèque : le navigateur lui donne 300 x 150 px par défaut. Dans
      un encart en flex, elle occupait toute la largeur. */
.notice > svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
}

/* 3. Le tableau des totaux imposait sa largeur minimale, 330 px, dans une
      carte qui en offre 272 : le montant sortait de la carte. En largeur
      fixe, le tableau se plie à sa colonne au lieu de l'inverse. */
.woocommerce .cart_totals table,
.woocommerce #order_review table.shop_table {
  table-layout: fixed;
  width: 100%;
}
.woocommerce .cart_totals th,
.woocommerce .cart_totals td {
  padding: var(--space-xs) 0;
  vertical-align: top;
}
.woocommerce .cart_totals th {
  width: 42%;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  font-weight: var(--weight-regular);
}
.woocommerce .cart_totals td {
  text-align: right;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.woocommerce .cart_totals .amount { white-space: normal; }
.woocommerce .cart_totals .order-total th { font-weight: var(--weight-bold); color: var(--color-ink); }
.woocommerce .cart_totals .order-total .amount {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

/* La destination d'expédition affiche l'adresse brute avec le code de
   région, « Livraison à 9 rue Finale, Casablanca, MA-CAS. ». Avec une seule
   zone et la livraison gratuite partout, cette ligne n'apprend rien. */
.woocommerce .woocommerce-shipping-destination,
.woocommerce .shipping-calculator-button { display: none; }
.woocommerce ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: var(--weight-semibold);
}
.woocommerce ul#shipping_method li { margin: 0; }

/* ── Hero court du tunnel ──────────────────────────────────────────────
   Même hero que les pages catégorie, en plus bas : sur une page de commande,
   ce que le visiteur est venu voir se trouve SOUS le hero. */
.cat-hero--compact .cat-hero__frame { min-height: clamp(15rem, 26vh, 19rem); }
.cat-hero--compact .cat-hero__title { font-size: clamp(1.6rem, 1rem + 2.2vw, 2.375rem); }

/* Le fil d'étapes posé sur la photo : verre pour les étapes à venir, vert
   pour celles qui sont franchies, blanc plein pour l'étape en cours. */
.steps--on-photo { gap: var(--space-2xs); }
.steps--on-photo .steps__item {
  background: var(--glass-bg-dark);
  border-color: var(--glass-border);
  color: var(--color-ink-on-dark-2);
  box-shadow: var(--glass-highlight);
}
@supports (backdrop-filter: blur(1px)) {
  .steps--on-photo .steps__item {
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
}
.steps--on-photo .steps__item.is-done {
  background: oklch(51.5% 0.140 152.3 / 0.85);
  color: var(--color-ink-on-dark);
}
.steps--on-photo .steps__item.is-done .steps__icon svg { color: var(--color-ink-on-dark); }
.steps--on-photo .steps__item.is-current {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: transparent;
}
.steps--on-photo .steps__item.is-current .steps__icon svg { color: var(--color-accent-text); }
.steps--on-photo .steps__item + .steps__item::before { display: none; }

/* ── Page de confirmation ──────────────────────────────────────────────
   Le client cherche trois choses : ce qu'il doit préparer, quand ça arrive,
   et ce qu'il a commandé. Trois cartes, puis le détail. */
.thankyou { display: flex; flex-direction: column; gap: var(--space-xl); }

.thankyou__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-sm);
}

.thankyou__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  border-radius: var(--radius-xl);
  border: var(--rule-hairline) solid var(--color-rule);
  background: var(--color-paper);
}

/* La carte du montant est celle qu'on regarde en premier quand on paie à la
   réception : c'est la somme qu'il faudra avoir sur soi. */
.thankyou__card--pay {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-line);
}

.thankyou__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  color: var(--color-accent-text);
  flex: none;
}
.thankyou__card--pay .thankyou__icon { background: var(--color-paper); }
.thankyou__icon svg { width: 1.125rem; height: 1.125rem; }

.thankyou__label {
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.thankyou__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.025em;
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.thankyou__value .amount { white-space: nowrap; }
.thankyou__note {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}
.thankyou__note strong { color: var(--color-ink); }

/* ── Détail de la commande ─────────────────────────────────────────── */

.thankyou__detail {
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  border-radius: var(--radius-2xl);
  background: var(--color-paper-2);
}
.thankyou__heading {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
}

.woocommerce .thankyou__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.thankyou__line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}
.thankyou__thumb {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-paper-2);
}
.woocommerce .thankyou__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3xs);
}
.thankyou__line-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thankyou__line-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); overflow-wrap: anywhere; }
.thankyou__line-qty  { font-size: var(--text-xs); color: var(--color-ink-2); }
.thankyou__line-total {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.thankyou__totals { margin: var(--space-md) 0 0; }
.thankyou__totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-2xs) 0;
  border-bottom: var(--rule-hairline) solid var(--color-rule);
  font-size: var(--text-sm);
}
.thankyou__totals-row:last-child { border-bottom: 0; }
.thankyou__totals dt { color: var(--color-ink-2); }
.thankyou__totals dd { margin: 0; font-weight: var(--weight-semibold); text-align: right; }
.thankyou__totals-row.is-total { padding-top: var(--space-sm); }
.thankyou__totals-row.is-total dt { color: var(--color-ink); font-weight: var(--weight-bold); }
.thankyou__totals-row.is-total dd {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
}

.thankyou__address {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hairline) solid var(--color-rule);
}
.thankyou__address h3 {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-2xs);
}
.thankyou__address address { font-style: normal; line-height: var(--leading-relaxed); }

/* ── Et ensuite ────────────────────────────────────────────────────── */

.thankyou__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(var(--space-md), 2.4vw, var(--space-lg));
  border-radius: var(--radius-2xl);
  border: var(--rule-hairline) solid var(--color-rule);
}
.thankyou__next-text { margin: 0; flex: 1 1 22rem; max-width: 46ch; color: var(--color-ink-2); }
.thankyou__next-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

@media (max-width: 40rem) {
  /* La ligne de commande se replie comme celle du panier : vignette et
     texte en haut, montant seul en dessous. À trois colonnes sur 375 px,
     le montant se cassait en quatre lignes et la ligne montait à 240 px. */
  .thankyou__line {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'thumb body'
      'total total';
    row-gap: var(--space-2xs);
    padding: var(--space-sm);
  }
  .thankyou__thumb      { grid-area: thumb; align-self: start; }
  .thankyou__line-body  { grid-area: body; }
  .thankyou__line-total { grid-area: total; text-align: right; }

  .thankyou__next { flex-direction: column; align-items: stretch; }
  .thankyou__next-text { flex: none; max-width: none; }
  .thankyou__next-actions { flex-direction: column; }
  .thankyou__next-actions .btn { width: 100%; }
}

/* Garde-fou : une notice qui atterrirait malgré tout dans la grille du
   panier occupe toute la largeur, au lieu de consommer une colonne et de
   pousser le formulaire dans celle des totaux. */
.cart-layout > .woocommerce-message,
.cart-layout > .woocommerce-info,
.cart-layout > .woocommerce-error,
.cart-layout > .woocommerce-notices-wrapper { grid-column: 1 / -1; }