/*
 * dahu-composite — mises en page d'un composant à choix multiple (réglage
 * « Mise en page » du composant, clé display_style, 0.46.0 ; outil de test
 * de la 0.41.0 à la 0.45.0).
 *
 * Tout est limité à .dahu-kit__component--style-<mise en page> : les autres
 * composants, et ce composant en mise en page « Par défaut », ne sont pas
 * concernés. Rendu seulement.
 *
 *   --style-image  Avec image : cartes produit en grille
 *   --style-row    En ligne : une ligne par option, dépliable
 *   --style-small  En petit · --style-icon  Icône de catégorie
 *   --style-chips  Chips à cocher
 */

/* ---------- Avec image : cartes produit en grille ---------- */

.dahu-kit .dahu-kit__component--style-image .dahu-kit__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	align-items: stretch;
	gap: 1rem;
}

@media (min-width: 40em) {
	.dahu-kit .dahu-kit__component--style-image .dahu-kit__options {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

.dahu-kit .dahu-kit__component--style-image .dahu-kit__options > .dahu-kit__option {
	width: auto;
	height: auto;
	min-height: 0;
}

.dahu-kit .dahu-kit__component--style-image .dahu-kit__option--style-image .dahu-kit__option-actions {
	margin-top: auto;
}

.dahu-kit .dahu-kit__component--style-image .dahu-kit__option--style-image .dahu-kit__add {
	flex: 1 1 auto;
	justify-content: center;
}

/* « Suivant » : ligne entière sous la grille. */
.dahu-kit .dahu-kit__component--style-image .dahu-kit__options > .dahu-kit__step-nav {
	grid-column: 1 / -1;
	justify-self: end;
}

/* ---------- En ligne : une ligne par option, dépliable (0.46.0) ---------- */

.dahu-kit .dahu-kit__component--style-row .dahu-kit__options {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: .5rem;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__options > .dahu-kit__option {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1rem;
	width: auto;
	height: auto;
	min-height: 0;
	padding: .1rem 1rem .6rem;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option .dahu-kit__option-media,
.dahu-kit .dahu-kit__component--style-row .dahu-kit__option .dahu-kit__option-text {
	display: none;
}

/* Nom à gauche, prix à droite du nom, juste avant le bouton. */
.dahu-kit .dahu-kit__component--style-row .dahu-kit__addon-head,
.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-hit {
	flex: 1 1 12rem;
	min-width: 0;
	margin-top: .5rem;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem 1rem;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-name {
	flex: 1 1 auto;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-price {
	min-height: 0;
	white-space: nowrap;
}

/* Prix par palier (deux prix étiquetés) : ils passent à la ligne l'un sous
   l'autre quand la place manque, au lieu de déborder de la carte ; chaque
   montant reste insécable. */
.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-price:has(.dahu-kit-price__tier) {
	min-width: 0;
	white-space: normal;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-price:has(.dahu-kit-price__tier) .woocommerce-Price-amount {
	white-space: nowrap;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-variation {
	flex: 0 1 auto;
	margin: .5rem 0 0;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-variation:empty {
	display: none;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option-actions {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	/* Passé à la ligne (téléphone) : contrôles à droite, la flèche en bout de ligne. */
	margin: .5rem 0 0 auto;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__options > .dahu-kit__step-nav {
	align-self: flex-end;
}

/* Ligne dépliable : un clic sur la ligne, sur l'icône « i » ou sur la flèche
   ouvre le détail (photo et description courte) sous la ligne.
   Hauteur animée sans mesure : grille à une rangée, 0fr (repliée) → 1fr
   (ouverte), l'enfant .dahu-kit__row-detail-inner a min-height: 0 et
   overflow: hidden. visibility bascule à la fin de la fermeture (le script
   pose aussi inert + aria-hidden). Durée et courbe : --dahu-kit-row-duration,
   --dahu-kit-row-ease (un thème y met ses propres jetons). */
.dahu-kit .dahu-kit__component--style-row .dahu-kit__option--expandable {
	cursor: pointer;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	/* À droite de la ligne, après le bouton (qu'un thème peut ordonner). */
	order: 99;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-toggle svg {
	display: block;
	transition: transform var(--dahu-kit-row-duration, .25s) var(--dahu-kit-row-ease, ease);
}

/* Flèche vers le bas, retournée quand la ligne est ouverte. */
.dahu-kit .dahu-kit__component--style-row .dahu-kit__option.is-open .dahu-kit__row-toggle svg {
	transform: rotate(180deg);
}

/* Dernier élément de la ligne, sur toute sa largeur. */
.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-detail {
	display: grid;
	flex: 0 0 100%;
	grid-template-rows: 0fr;
	min-width: 0;
	visibility: hidden;
	cursor: auto;
	transition:
		grid-template-rows var(--dahu-kit-row-duration, .25s) var(--dahu-kit-row-ease, ease),
		visibility 0s linear var(--dahu-kit-row-duration, .25s);
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__option.is-open > .dahu-kit__row-detail {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var(--dahu-kit-row-duration, .25s) var(--dahu-kit-row-ease, ease),
		visibility 0s linear 0s;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-detail-inner {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-detail-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .75rem 1.25rem;
	padding: 1.25rem 0 .4rem;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-media {
	flex: 0 0 auto;
	width: 7.5rem;
	max-width: 40%;
	margin: 0;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-photo {
	display: block;
	width: 100%;
	height: auto;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-text {
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-text > :first-child {
	margin-top: 0;
}

.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-text > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-toggle svg,
	.dahu-kit .dahu-kit__component--style-row .dahu-kit__row-detail,
	.dahu-kit .dahu-kit__component--style-row .dahu-kit__option.is-open > .dahu-kit__row-detail {
		transition: none;
	}
}

/* ---------- En petit, Icône de catégorie, Chips à cocher ----------
   Maquette « Styles d'affichage Accessoires » : 3 — En petit, 5 — Icône de
   catégorie, 6 — Chips à cocher. Communs aux trois : ni photo, ni sous-titre,
   ni icônes d'infos. */

.dahu-kit :is(.dahu-kit__component--style-small, .dahu-kit__component--style-icon, .dahu-kit__component--style-chips) .dahu-kit__option--multiple :is(.dahu-kit__option-media, .dahu-kit__option-text, .dahu-kit__addon-more) {
	display: none;
}

.dahu-kit :is(.dahu-kit__component--style-small, .dahu-kit__component--style-icon, .dahu-kit__component--style-chips) .dahu-kit__options > .dahu-kit__option {
	width: auto;
	height: auto;
	min-height: 0;
}

.dahu-kit :is(.dahu-kit__component--style-small, .dahu-kit__component--style-icon, .dahu-kit__component--style-chips) .dahu-kit__option-variation:empty {
	display: none;
}

/* ----- En petit : vignettes compactes, 5 à 6 par ligne ----- */

.dahu-kit .dahu-kit__component--style-small .dahu-kit__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	align-items: stretch;
	gap: .85rem;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__options > .dahu-kit__option {
	align-items: center;
	gap: .4rem;
	padding: .85rem .75rem;
	text-align: center;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option-body {
	align-items: center;
	gap: .25rem;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option-name {
	font-size: .8rem;
	line-height: 1.2;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option-price {
	min-height: 0;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option-actions {
	justify-content: center;
	margin-top: auto;
}

/* Bouton rond : « + », puis une coche une fois ajouté. Le libellé reste pour
   les lecteurs d'écran. */
.dahu-kit .dahu-kit__component--style-small .dahu-kit__option--multiple .dahu-kit__add {
	position: relative;
	flex: 0 0 auto;
	width: 1.9rem;
	min-width: 0;
	height: 1.9rem;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	font-size: 0;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option--multiple .dahu-kit__add .dahu-kit__add-icon {
	display: none !important;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option--multiple .dahu-kit__add-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option--multiple .dahu-kit__add::after {
	content: "+";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__option--multiple .dahu-kit__add.is-added::after {
	content: "\2713";
	font-size: .9rem;
}

.dahu-kit .dahu-kit__component--style-small .dahu-kit__options > .dahu-kit__step-nav {
	grid-column: 1 / -1;
	justify-self: end;
}

/* ----- Icône de catégorie : pictogramme, nom et prix, bouton ----- */

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	align-items: stretch;
	gap: 1rem;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__options > .dahu-kit__option {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .85rem;
	padding: .9rem 1rem;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__addon-head {
	display: flex;
	flex: 1 1 9rem;
	flex-direction: row;
	align-items: center;
	gap: .85rem;
	min-width: 0;
}

.dahu-kit .dahu-kit__category-icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: .6rem;
	background: rgba(0, 0, 0, .06);
	opacity: .8;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__option-body {
	flex: 1 1 auto;
	gap: .1rem;
	min-width: 0;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__option-name {
	font-size: .9rem;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__option-price {
	min-height: 0;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__option-actions {
	flex: 0 0 auto;
	margin: 0;
}

.dahu-kit .dahu-kit__component--style-icon .dahu-kit__options > .dahu-kit__step-nav {
	grid-column: 1 / -1;
	justify-self: end;
}

/* ----- Chips à cocher : nuage de puces cliquables, prix inclus ----- */

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__options {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .6rem;
}

/* La puce entière est le bouton : « Ajouter » / « Ajouté » la recouvre,
   invisible (son libellé reste lu par les lecteurs d'écran). */
.dahu-kit .dahu-kit__component--style-chips .dahu-kit__options > .dahu-kit__option--multiple {
	position: relative;
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: .5rem;
	max-width: 100%;
	padding: .5rem 1rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	box-shadow: none;
	font-size: .8rem;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__addon-head {
	min-width: 0;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__option-body {
	flex-direction: row;
	align-items: center;
	gap: .5rem;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__option-name {
	font-size: inherit;
	font-weight: 600;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__option-price {
	min-height: 0;
	font-size: inherit !important;
	white-space: nowrap;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__option-actions {
	position: static;
	margin: 0;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__add {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	border-radius: inherit;
	opacity: 0;
	cursor: pointer;
}

/* Le bouton est invisible : le focus clavier se voit sur la puce. */
.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple:has(.dahu-kit__add:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__add-icon {
	display: none;
}

/* Ajoutée : puce pleine, coche devant le nom. */
.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple.is-added {
	border-color: var(--dahu-kit-accent, #5b6800);
	background: color-mix(in srgb, var(--color-brand-green, #d5eb17) 70%, transparent);
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple.is-added .dahu-kit__option-name::before {
	content: "\2713\00a0";
	font-weight: 800;
}

/* Variante : sa liste passe au-dessus du bouton qui recouvre la puce. */
.dahu-kit .dahu-kit__component--style-chips .dahu-kit__option--multiple .dahu-kit__option-variation {
	position: relative;
	z-index: 1;
	margin: 0;
}

.dahu-kit .dahu-kit__component--style-chips .dahu-kit__options > .dahu-kit__step-nav {
	flex: 1 0 100%;
	justify-content: flex-end;
}