/* Parcours d'achat : panier, commande, mon compte (inc/checkout.php ; recette Alain 2026-10-08). */

/* ---- En-tête : le titre de la page sans le grand vide de Kadence (200 px + 80 px de marge) ---- */
body.kh-purchase .entry-hero .entry-header { min-height: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
body.kh-purchase .entry-hero h1 { margin: 0; color: var(--kh-sumi); font: italic 400 clamp(2.4rem, 4.2vw, 3.6rem)/1.05 var(--kh-font-display); }
body.kh-purchase .entry-hero h1::after { content: ""; display: block; width: min(12rem, 60%); height: 1rem; margin: .8rem auto 0; background: url('../images/trait-pinceau-vermillon.webp') center / contain no-repeat; }
body.kh-purchase #primary { margin-top: 1rem; }
body.kh-purchase .entry-content-wrap { padding-top: 0; }

/* ---- Étapes : 一 Panier · 二 Livraison et paiement · 三 Confirmation ---- */
.kh-steps { margin: 0 0 1.75rem; }
.kh-steps ol { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem; margin: 0; padding: 0; list-style: none; counter-reset: kh-step; }
.kh-steps li { display: inline-flex; align-items: baseline; gap: .55rem; margin: 0; color: var(--kh-sumi-70); font: 400 .78rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; counter-increment: kh-step; }
.kh-steps li::before { content: counter(kh-step, cjk-ideographic); color: var(--kh-sumi-70); font: 400 1rem/1 var(--kh-font-jp); letter-spacing: 0; }
.kh-steps li.is-current { color: var(--kh-sumi); }
.kh-steps li.is-current::before { color: var(--kh-vermillon); }
.kh-steps a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--kh-sumi-20); }
.kh-steps a:is(:hover, :focus-visible) { color: var(--kh-vermillon); border-color: currentColor; }

/* ---- Lignes du panier et du récapitulatif : le monde au-dessus du nom court, sans extrait ---- */
.kh-purchase .wc-block-components-product-name::before { display: block; margin-bottom: .3rem; color: var(--kh-sumi-70); font: 400 .68rem/1.2 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
/* Sélecteurs renforcés : WooCommerce fixe la taille par table.wc-block-cart-items .wc-block-cart-items__row … */
body.kh-purchase table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
body.kh-purchase .wc-block-components-order-summary-item .wc-block-components-order-summary-item__description .wc-block-components-product-name { color: var(--kh-sumi); font: italic 400 1.35rem/1.2 var(--kh-font-display); text-decoration: none; }
body.kh-purchase .wc-block-components-order-summary-item .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: 1.15rem; }
.kh-purchase .wc-block-components-product-metadata__description { display: none; }

/* ---- Livraison offerte : « Livraison offerte, 4 à 6 jours ouvrés » suffit, sans « Gratuit » (seulement quand il n'y a
   pas de montant ; un tarif payant garde son prix). WooCommerce pose aussi la classe du montant sur la valeur elle-même :
   sans :not(.wc-block-formatted-money-amount), les frais payants (5 €) disparaissaient du panier (audit du 2026-10-14). ---- */
.kh-purchase .wc-block-components-totals-shipping .wc-block-components-totals-item__value:not(.wc-block-formatted-money-amount):not(:has(.wc-block-formatted-money-amount)),
.kh-purchase .wc-block-components-radio-control__secondary-label:not(.wc-block-formatted-money-amount):not(:has(.wc-block-formatted-money-amount)) { display: none; }

/* ---- Réassurance sous le panier et sous la commande (ligne des fiches produits) ---- */
.kh-purchase-assure { max-width: 46rem; margin: 2rem auto 0; color: var(--kh-sumi-70); font: 300 .82rem/1.6 var(--kh-font-ui); letter-spacing: .03em; text-align: center; }
.kh-purchase-assure p { margin: 0; }
.kh-purchase-assure a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- Panier vide (PC36) : une phrase, La Boutique, les cinq mondes ---- */
.kh-purchase .wp-block-woocommerce-empty-cart-block { padding: 1rem 0 2rem; text-align: center; }
.kh-purchase .wp-block-woocommerce-empty-cart-block .kh-empty-cart__title { margin: 0; font: italic 400 clamp(1.8rem, 3vw, 2.4rem)/1.2 var(--kh-font-display); }
.kh-purchase .wp-block-woocommerce-empty-cart-block .kh-empty-cart__lead { margin: .8rem auto 0; max-width: 40ch; color: var(--kh-sumi-70); }
.kh-purchase .wp-block-woocommerce-empty-cart-block .wp-block-buttons { justify-content: center; margin-top: 1.5rem; }
.kh-purchase .wp-block-woocommerce-empty-cart-block .kh-shop-worlds ul { margin-top: 1.5rem; }

/* ---- Commande, panier vidé en cours de route : le panier tressé à anses torsadées au lieu du chariot de WooCommerce
   (Alain, 2026-10-12). Le chariot est un SVG du bloc, sans réglage : il est masqué, l'image prend sa place (décorative,
   comme lui). ---- */
.kh-purchase .wc-block-checkout-empty__image { display: none; }
.kh-purchase .wc-block-checkout-empty::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 1.25rem;
  background: url('../images/parcours-panier-vide-tresse.webp') center / contain no-repeat;
}
/* Its words are those of the empty cart (kh-checkout.js): the same title and lead. */
.kh-purchase .wc-block-checkout-empty__title { display: block; color: var(--kh-sumi); font: italic 400 clamp(1.8rem, 3vw, 2.4rem)/1.2 var(--kh-font-display); }
.kh-purchase .wc-block-checkout-empty__description { max-width: 40ch; margin: .8rem auto 1.5rem; color: var(--kh-sumi-70); }

/* ---- Une image par étape (Alain 2026-10-09) : sous le total du panier rempli, sous le résumé de la commande (déplacées
   là par kh-checkout.js), à côté du merci une fois la commande passée ; aucune sur le panier vide ---- */
.kh-purchase-figure { margin: 0; }
.kh-purchase-figure[hidden] { display: none !important; }
.kh-purchase-figure img { display: block; width: 100%; height: auto; }
.kh-purchase-figure--1, .kh-purchase-figure--2 { margin-top: 1.75rem; }
.kh-purchase-figure figcaption { margin-top: .75rem; color: var(--kh-sumi-70); font: italic 400 .95rem/1.5 var(--kh-font-body); }
.kh-purchase-figure__world { color: var(--kh-sumi-70); font: normal 400 .68rem/1.2 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
.kh-purchase-figure__name { color: var(--kh-sumi); font: italic 400 1.1rem/1.2 var(--kh-font-display); }

/* ---- Commande reçue : le cadeau à gauche, le merci et le résumé (numéro, date, total, paiement) à droite, le détail
   de la commande et les adresses en dessous, sur toute la largeur ---- */
.kh-purchase .woocommerce-order:has(> .kh-purchase-figure--3) { display: grid; grid-template-columns: 300px minmax(0, 30rem); justify-content: center; column-gap: 4rem; }
.kh-purchase .woocommerce-order:has(> .kh-purchase-figure--3) > * { grid-column: 1 / -1; }
.kh-purchase .woocommerce-order > .kh-purchase-figure--3 { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-bottom: 2rem; }
.kh-purchase .woocommerce-order:has(> .kh-purchase-figure--3) > .woocommerce-thankyou-order-received { grid-column: 2; grid-row: 1; align-self: end; }
.kh-purchase .woocommerce-order:has(> .kh-purchase-figure--3) > .woocommerce-order-overview { grid-column: 2; grid-row: 2; align-self: start; }
.kh-purchase .woocommerce-thankyou-order-received { margin: 0; padding: 0; border: 0; background: none; color: var(--kh-sumi); font: 400 1.05rem/1.6 var(--kh-font-body); }
.kh-thanks__title { display: block; margin-bottom: .5rem; font: italic 400 clamp(2rem, 3.2vw, 2.4rem)/1.1 var(--kh-font-display); }
/* Le résumé de WooCommerce (liste en ligne à filets) en deux colonnes : l'intitulé en petites capitales, la valeur
   dessous. Les pseudo-éléments de dégagement des flottants deviendraient des cases de la grille. */
body.kh-purchase ul.woocommerce-order-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin: 1.5rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--kh-sumi-20); list-style: none; }
body.kh-purchase ul.woocommerce-order-overview::before, body.kh-purchase ul.woocommerce-order-overview::after { content: none; display: none; }
body.kh-purchase ul.woocommerce-order-overview li { float: none; margin: 0 0 1rem; padding: 0; border: 0; color: var(--kh-sumi-70); font: 400 .68rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
body.kh-purchase ul.woocommerce-order-overview li strong { display: block; margin-top: .35rem; color: var(--kh-sumi); font: 400 1rem/1.4 var(--kh-font-body); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }

/* Une seule colonne (WooCommerce empile le panier et la commande quand leur bloc, conteneur de requête, fait moins de
   700 px ; le résumé de la commande passe alors au-dessus du formulaire) : commande sans image, pour un formulaire
   court ; panier avec l'image sous le total, à taille raisonnable. */
@container (max-width: 699px) {
  .kh-purchase-figure--2 { display: none !important; }
  .kh-purchase-figure--1 { max-width: 26rem; margin-inline: auto; }
}

/* Mon compte : kh-account.css (inc/account.php). */

@media (max-width: 767px) {
  /* Centrées, sur deux lignes au besoin (une taille lisible plutôt qu'une seule ligne). */
  .kh-steps ol { gap: .45rem 1.1rem; }
  .kh-steps li { gap: .4rem; font-size: .7rem; letter-spacing: .08em; }
  /* Commande reçue : le cadeau au-dessus du merci, plus petit. */
  .kh-purchase .woocommerce-order:has(> .kh-purchase-figure--3) { grid-template-columns: minmax(0, 1fr); }
  .kh-purchase .woocommerce-order:has(> .kh-purchase-figure--3) > :is(.kh-purchase-figure--3, .woocommerce-thankyou-order-received, .woocommerce-order-overview) { grid-column: 1; grid-row: auto; align-self: auto; }
  .kh-purchase .woocommerce-order > .kh-purchase-figure--3 { justify-self: center; width: min(15rem, 70%); margin-bottom: 1.5rem; }
}