/* La Boutique (recette, Alain 2026-10-06 ; inc/shop.php). En-tête : surtitre, titre « La Boutique » et trait de
   pinceau de l'accueil, accroche, les cinq mondes, ligne de réassurance (textes modifiables dans l'admin). Cartes :
   « Carte koi » de l'accueil, monde en gris (le vermillon reste rare : il porte le trait du prix). Koi entiers sur
   papier washi, 4 par rangée sur ordinateur, 3 sur tablette, 2 sur mobile ; survol comme sur l'accueil
   (kh-foundations.css, 7bis). */

/* ---- En-tête ---- */
.kh-shop-hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1rem, 2vw, 1.5rem); text-align: center; }
.kh-shop-hero__inner > * { margin-inline: auto; }
.kh-shop-hero .kh-shop-hero__eyebrow { margin: 0 auto 1rem; color: var(--kh-vermillon); font: 400 .75rem/1.3 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; }
.kh-shop-hero__title { margin: 0; color: var(--kh-sumi); font: italic 400 clamp(2.75rem, 5vw, 4.5rem)/1.05 var(--kh-font-display); }
.kh-shop-hero__title::after { content: ""; display: block; width: min(16rem, 70%); height: 1.1rem; margin: 1rem auto 0; background: url('../images/trait-pinceau-vermillon.webp') center / contain no-repeat; }
.kh-shop-hero__inner > p:not(.kh-shop-hero__eyebrow, .kh-shop-hero__assure) { max-width: 52ch; margin: 1.25rem auto 0; color: var(--kh-sumi-70); font: italic 400 clamp(1.05rem, 1.3vw, 1.2rem)/1.7 var(--kh-font-body); }
.kh-shop-worlds ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.kh-shop-worlds a { display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem 0; border-bottom: 1px solid transparent; color: var(--kh-sumi); font: 400 .8rem/1.2 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: color 200ms ease, border-color 200ms ease; }
.kh-shop-worlds a [lang="ja"] { color: var(--kh-sumi-70); font-family: var(--kh-font-jp); font-size: .85rem; letter-spacing: 0; text-transform: none; }
.kh-shop-worlds a[aria-current] { border-color: var(--kh-sumi); }
.kh-shop-worlds a:is(:hover, :focus-visible) { border-color: var(--kh-vermillon); color: var(--kh-vermillon); }
.kh-shop-hero .kh-shop-hero__assure { margin: 1.5rem auto 0; color: var(--kh-sumi-70); font: 300 .8rem/1.5 var(--kh-font-ui); letter-spacing: .03em; }
.kh-shop-hero .kh-shop-hero__assure a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Le texte de la page est dans l'en-tête : jamais une seconde fois au-dessus des produits. */
.kh-shop .woocommerce-products-header .page-description { display: none; }

/* ---- Barre d'outils : ni compteur ni bascule grille / liste ; le tri reste, discret ---- */
.kh-shop .kadence-woo-results-count, .kh-shop .kadence-woo-toggle, .kh-shop .woocommerce-result-count { display: none !important; }
.kh-shop .kadence-shop-top-row { justify-content: flex-end; padding-bottom: 1rem; }
.kh-shop .woocommerce-ordering select { border: 0; border-bottom: 1px solid var(--kh-sumi-20); border-radius: 0; background-color: transparent; font: 400 .85rem var(--kh-font-ui); }
.kh-shop #primary { margin-top: 1rem; }
.kh-shop .woocommerce-pagination { display: none; }

/* ---- Cartes koi ---- */
/* Mêmes cartes sous la fiche produit, « Du même monde » (section .related de WooCommerce, inc/product.php), et sur les
   pages des cinq mondes (2026-10-08) : une seule classe par contexte dans :is(), pour garder la force des sélecteurs.
   Le koi est posé sur le fond de son monde (--kh-world-bg, kh-foundations.css), le papier washi sinon. */
.kh-shop ul.products { --kh-koi-zoom: 1.8; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.kh-shop ul.products::before, .kh-shop ul.products::after { display: none; }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product { display: flex; flex-direction: column; width: auto; margin: 0; padding: .55rem .55rem 1.4rem; border: 1px solid rgb(26 20 16 / .32); background: rgb(255 253 252 / .45); box-shadow: none; }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product a img { box-sizing: border-box; width: 100%; height: auto; padding: 7% 5%; aspect-ratio: 16 / 10; object-fit: contain; background: var(--kh-world-bg, url('../images/fond-washi-nuages.webp')) center / cover no-repeat; }
:is(.kh-shop, .related, .kh-world-archive) ul.products .woocommerce-loop-image-link:is(:hover, :focus-visible) img { background: none; }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product .product-details { display: flex; flex: 1; flex-direction: column; padding: 1.1rem .65rem 0; background: transparent; text-align: center; transform: none !important; }
:is(.kh-shop, .related, .kh-world-archive) .kh-card-world { display: block; margin: 0 0 .4rem; color: var(--kh-sumi-70); font: 400 .72rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product .woocommerce-loop-product__title { margin: 0 0 .9rem; font: italic 400 1.5rem/1.15 var(--kh-font-display); }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product .woocommerce-loop-product__title a:is(:hover, :focus-visible) { color: var(--kh-vermillon); }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product .price { display: block; width: max-content; margin: auto auto 0; padding-top: .5rem; border-top: 2px solid var(--kh-vermillon); color: var(--kh-sumi); font: 400 .9rem/1.2 var(--kh-font-ui); }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product .price * { color: inherit; }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product :is(.product-action-wrap, .product-excerpt, .button) { display: none; }

/* Cartes Kaïro dans la nuit de Kaïro (Alain, 2026-10-08) : même carte que les autres (une image, puis le texte), mais
   l'image est la mer au clair de lune (« Sous la lune, le navire fantôme », kairo-mer-960.webp) au lieu du papier ;
   au survol, le koi agrandi vole sur la mer. Texte clair, « KAÏRO » en or, rouge de nuit. La Boutique et « Du même
   monde » / « À découvrir aussi » des autres fiches (Alain, 2026-10-08) ; les fiches Kaïro ont leurs koi flottants. */
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) { --kh-vermillon: var(--kh-vermillon-night); background: #0f1b3d; border-color: rgb(244 239 230 / .22); }
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) a img { background: url('../images/kairo-mer-960.webp') center 40% / cover no-repeat; }
/* Au survol, seul le panneau porte la mer : l'image de la carte la perd, comme les autres cartes (revue #50 : deux mers
   superposées). */
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) .woocommerce-loop-image-link:is(:hover, :focus-visible) img { background: none; }
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) .woocommerce-loop-image-link::before { background: linear-gradient(rgb(15 27 61 / .2), rgb(15 27 61 / .2)), url('../images/kairo-mer-960.webp') center 40% / cover no-repeat; }
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) .kh-card-world { color: #D9B45A; }
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) :is(.woocommerce-loop-product__title, .woocommerce-loop-product__title a, .price, .price *) { color: #F4EFE6; }
:is(body.kh-shop, body.kh-fiche:not(.kh-fiche-kairo) .related) ul.products li.product:is(.product_cat-kairo, .product_cat-kairo-en) .woocommerce-loop-product__title a:is(:hover, :focus-visible) { color: #D9B45A; }

/* ---- Koi sans photo : le cartouche 鯉のぼり estompé et « Photo à venir » (inc/shop.php) ---- */
.kh-photo-soon { position: relative; display: block; }
:is(.kh-shop, .related, .kh-world-archive) ul.products li.product a .kh-photo-soon__img { padding: 9% 0; opacity: .32; filter: grayscale(.3); }
.kh-photo-soon__label { position: absolute; inset: auto 0 8%; color: var(--kh-sumi-70); font: 400 .7rem/1 var(--kh-font-ui); letter-spacing: .14em; text-transform: uppercase; text-align: center; }

@media (max-width: 1024px) {
  .kh-shop ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kh-shop ul.products li.product:nth-child(3n+1) { --kh-koi-origin: left center; }
  .kh-shop ul.products li.product:nth-child(3n) { --kh-koi-origin: right center; }
}
@media (max-width: 767px) {
  .kh-shop-hero { padding: 1.75rem 0 .5rem; }
  .kh-shop-hero .kh-shop-hero__eyebrow { margin-bottom: .6rem; }
  .kh-shop-hero__title { font-size: 2.5rem; }
  .kh-shop-hero__inner > p:not(.kh-shop-hero__eyebrow, .kh-shop-hero__assure) { margin-top: .9rem; font-size: 1rem; line-height: 1.55; }
  /* Les cinq mondes sur une ligne qui défile, du bord à bord. */
  .kh-shop-worlds { margin: 0 calc(-1 * var(--kh-gutter)); }
  .kh-shop-worlds ul { flex-wrap: nowrap; justify-content: flex-start; gap: 1.25rem; margin-top: 1.25rem; padding: 0 var(--kh-gutter); overflow-x: auto; scrollbar-width: none; }
  .kh-shop-worlds li { flex: none; }
  .kh-shop-hero .kh-shop-hero__assure { margin-top: .9rem; font-size: .75rem; }
  .kh-shop .kadence-shop-top-row { padding-bottom: .5rem; }
  .kh-shop ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  :is(.kh-shop, .related, .kh-world-archive) ul.products li.product { padding: .4rem .4rem 1rem; }
  :is(.kh-shop, .related, .kh-world-archive) ul.products li.product .woocommerce-loop-product__title { font-size: 1.15rem; }
  :is(.kh-shop, .related, .kh-world-archive) .kh-card-world { font-size: .65rem; }
}

/* Fin de La Boutique, vers le sur-mesure (Alain, 2026-10-10). */
.kh-shop-custom { margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; color: var(--kh-sumi); font: italic 400 clamp(1.15rem, 2vw, 1.4rem)/1.4 var(--kh-font-display); }
.kh-shop-custom a { color: var(--kh-sumi); text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }