/**
 * Widget de personnalisation harnais : nuanciers en pastilles nommées.
 *
 * Chaque option est une pilule « pastille de couleur + nom » : le nom est
 * TOUJOURS visible, pas seulement au survol. La radio native reste dans le
 * DOM (accessible au clavier) mais est masquée visuellement, l'état coché
 * s'affiche sur la pilule via :has().
 */

.dvd-hw-palette {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .25rem 0 1rem;
}

/* Hors formulaire produit (page autonome), Barrio rend les radios dans
   fieldset > legend + .fieldset-wrapper > .radio : la classe posée par
   Drupal atterrit sur le FIELDSET, et le vrai conteneur des options est le
   div.radio. C'est donc lui qui porte le flux en ligne. */
fieldset.dvd-hw-palette {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.dvd-hw-palette .radio {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
}
/* Le label doit rester une pilule quel que soit le gabarit de rendu
   (Barrio le repasse en block sur les formulaires hors produit). */
.dvd-hw-palette .dvd-hw-opt label {
  display: inline-flex;
}

.dvd-hw-opt {
  margin: 0;
}
.dvd-hw-opt input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.dvd-hw-opt label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem .35rem .45rem;
  border: 2px solid var(--dvd-border, #d9d4cb);
  border-radius: 999px;
  background: var(--dvd-paper, #fff);
  font-size: .875rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dvd-hw-opt label:hover {
  border-color: var(--dvd-sage-d, #5c6f5d);
}
.dvd-hw-opt:has(input:checked) label {
  border-color: var(--dvd-ink, #1d1d1f);
  background: var(--dvd-ink, #1d1d1f);
  color: #fff;
}
.dvd-hw-opt:has(input:focus-visible) label {
  outline: 2px solid var(--dvd-sage-d, #5c6f5d);
  outline-offset: 2px;
}

.dvd-hw-dot {
  /* inline-flex explicite : un span inline ignore width/height, et la
     pastille s'écrasait en filet de 2 px dès que le label n'était pas flex. */
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / .18);
  flex-shrink: 0;
}
/* Photo réelle du tissage (nuancier fournisseur embarqué dans le module) :
   plus fidèle qu'un aplat, surtout pour les chinés. Légèrement plus grande
   que le rond hex, le grain mérite d'être vu. */
.dvd-hw-dot--img {
  width: 1.65rem;
  height: 1.65rem;
  background-size: cover;
  background-position: center;
}
.dvd-hw-chart-item .dvd-hw-dot--img {
  width: 2rem;
  height: 2rem;
}
/* Option sans pastille (tailles) : pilule symétrique. */
.dvd-hw-opt label:not(:has(.dvd-hw-dot)) {
  padding-left: .8rem;
}

/* Pastilles muettes : le nom n'apparaît qu'au survol (tooltip natif via
   l'attribut title) et sur l'option sélectionnée. Retour boutique : les noms
   partout alourdissaient la fiche. L'onglet nuancier donne la référence. */
.dvd-hw-opt .dvd-hw-dot + .dvd-hw-name {
  display: none;
}
.dvd-hw-opt:has(input:checked) .dvd-hw-dot + .dvd-hw-name {
  display: inline;
}
.dvd-hw-opt label:has(.dvd-hw-dot) {
  padding: .3rem .45rem;
}
.dvd-hw-opt:has(input:checked) label:has(.dvd-hw-dot) {
  padding-right: .8rem;
}

/* ── Onglet nuancier : la référence complète, nom par nom ─────────────── */
.dvd-hw-chart {
  margin: 0 0 1.75rem;
}
.dvd-hw-chart h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .75rem;
}
.dvd-hw-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: .5rem;
}
.dvd-hw-chart-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  border: 1px solid var(--dvd-border, #d9d4cb);
  border-radius: var(--dvd-r-sm, 6px);
  background: var(--dvd-paper, #fff);
  font-size: .875rem;
}
.dvd-hw-chart-item .dvd-hw-dot {
  width: 1.6rem;
  height: 1.6rem;
}
.dvd-hw-chart-note {
  display: block;
  font-size: .75rem;
  opacity: .65;
}

/* ── Onglet guide des tailles ─────────────────────────────────────────── */
.dvd-hw-sizes {
  overflow-x: auto;
}
.dvd-hw-sizes table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.dvd-hw-sizes th,
.dvd-hw-sizes td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--dvd-border, #d9d4cb);
  text-align: left;
  vertical-align: top;
}
.dvd-hw-sizes th {
  font-weight: 600;
  white-space: nowrap;
}
.dvd-hw-sizes td:first-child {
  font-weight: 600;
  white-space: nowrap;
}
.dvd-hw-sizes-hint {
  font-size: .875rem;
  opacity: .75;
  margin: 0 0 1rem;
}

/* ── Case de consentement : une vraie case, pas une pilule ────────────── */
/* Le thème (product-page.css) transforme tous les .form-check du formulaire
   produit en pilules d'attributs : input masqué (opacity 0, width 0) et
   label en pastille. Correct pour les tailles, absurde pour un consentement.
   Sélecteurs à 3 niveaux : ils battent les règles du thème (2 niveaux) quel
   que soit l'ordre de chargement des feuilles. L'apparence de la case reste
   celle du form.css global (coche sage). */
.dvd-product-page__form .field--name-field-harness-consent .form-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.dvd-product-page__form .field--name-field-harness-consent .form-check-input {
  position: static;
  opacity: 1;
  width: 18px;
  height: 18px;
  min-width: 18px;
  pointer-events: auto;
  margin-top: .15rem;
  flex-shrink: 0;
}
.dvd-product-page__form .field--name-field-harness-consent .form-check-label {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: normal;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
}
.dvd-product-page__form .field--name-field-harness-consent .form-check-label:hover {
  border: 0;
  color: var(--dvd-ink, #1d1d1f);
  background: none;
}

/* Avertissement sur-mesure : ni repris ni échangé. */
.dvd-hw-warning {
  margin: 1rem 0 .5rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--dvd-amber, #e3a72f);
  background: rgb(227 167 47 / .12);
  border-radius: 0 var(--dvd-r-sm, 6px) var(--dvd-r-sm, 6px) 0;
  font-size: .9rem;
}
.dvd-hw-warning p {
  margin: 0;
}

/* ── Page autonome « composez vos couleurs » ──────────────────────────── */
.dvd-hw-standalone {
  max-width: 860px;
  margin: 0 auto;
  padding: .5rem 1rem 4rem;
}

.dvd-hwp-head {
  text-align: center;
  margin: .75rem 0 2.25rem;
}
.dvd-hwp-lede {
  max-width: 580px;
  margin: .5rem auto 0;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .8;
}

/* Cartes d'étapes. */
.dvd-hwp-card {
  background: #fff;
  border: 1px solid var(--dvd-border, #d9d4cb);
  border-radius: var(--dvd-r-lg, 14px);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1rem;
}
.dvd-hwp-card__title {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-family: var(--dvd-serif, Fraunces, serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.dvd-hwp-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--dvd-ink, #1d1d1f);
  color: var(--dvd-paper, #faf6ee);
  font-family: var(--dvd-sans, Inter, sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  flex-shrink: 0;
}
.dvd-hwp-card .dvd-hw-palette {
  margin-bottom: 0;
}

/* Coordonnées : email et n° de commande côte à côte sur desktop. */
.dvd-hwp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}
@media (max-width: 575.98px) {
  .dvd-hwp-grid { grid-template-columns: 1fr; }
}

/* Guide des tailles replié sous l'étape Taille. */
.dvd-hwp-guide {
  margin: 1rem 0 0;
  border: 1px solid var(--dvd-border, #d9d4cb);
  border-radius: var(--dvd-r-sm, 8px);
  padding: .6rem .9rem;
  background: var(--dvd-paper-2, #faf6ee);
}
.dvd-hwp-guide summary {
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.dvd-hwp-guide[open] summary {
  margin-bottom: .75rem;
}
.dvd-hwp-guide .dvd-hw-sizes table {
  background: #fff;
}

.dvd-hwp-actions {
  margin-top: 1.5rem;
}
.dvd-hwp-submit {
  display: block;
  width: 100%;
  padding: .95rem 1.5rem;
  font-size: 1rem;
  border-radius: 999px;
}