/* =====================================================================
   CHARTE GRAPHIQUE — un seul endroit à modifier
   Palette verte reprise de la fiche produit (bouton panier, étapes,
   panneau récapitulatif). Change ces variables et tout suit.
   ===================================================================== */

:root {
  --wpc-tp-green: #2f5d34;          /* vert principal (titres, sélection) */
  --wpc-tp-green-dark: #24471f;     /* survol / contraste */
  --wpc-tp-green-soft: #e9f2e4;     /* fond du panneau et des badges verts */
  --wpc-tp-green-tint: #f4f9f1;     /* fond de carte sélectionnée */
  --wpc-tp-green-line: #cfe0c8;     /* bordures teintées vert */
  --wpc-tp-ink: #2b3a2b;            /* texte principal */
  --wpc-tp-ink-soft: #6b7a6b;       /* texte secondaire */
  --wpc-tp-line: #e2e8de;           /* bordures neutres */
  --wpc-tp-card: #ffffff;
  --wpc-tp-round: 10px;             /* arrondi des cartes */
  --wpc-tp-preview-max: 500px;      /* largeur maxi des cadres d'aperçu */
}

/* =====================================================================
   WPC Tressage Color Picker — styles
   Module qui fusionne "Coloris du tressage 1/2/3" (champs WPC) en une
   seule interface avec 3 emplacements numérotés + filtres par catégorie.
   ===================================================================== */

.wpc-tp-widget {
  --wpc-tp-accent: var(--wpc-tp-green);
  --wpc-tp-border: var(--wpc-tp-line);
  --wpc-tp-bg-muted: #f7f9f6;
  --wpc-tp-radius: 8px;
  margin: 1.25em 0;
  border: 1px solid var(--wpc-tp-border);
  border-radius: var(--wpc-tp-round);
  padding: 1em 1.1em 1.2em;
  background: var(--wpc-tp-card);
  color: var(--wpc-tp-ink);
}

.wpc-tp-widget__title {
  font-weight: 600;
  margin: 0 0 .6em;
  font-size: 1em;
}

.wpc-tp-widget__hint {
  font-size: .85em;
  color: #666;
  margin: 0 0 .9em;
}

/* ---- Emplacements numérotés ---- */
.wpc-tp-slots {
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
  margin-bottom: .9em;
}

.wpc-tp-slot {
  display: flex;
  align-items: center;
  gap: .4em;
  border: 2px solid var(--wpc-tp-border);
  border-radius: 999px;
  padding: .25em .6em .25em .25em;
  background: var(--wpc-tp-bg-muted);
  cursor: pointer;
  font-size: .85em;
  line-height: 1.1;
  transition: border-color .15s ease, background .15s ease;
}

.wpc-tp-slot__index {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--wpc-tp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
}

.wpc-tp-slot__swatch {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--wpc-tp-border);
  flex: 0 0 auto;
}

.wpc-tp-slot__label {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wpc-tp-slot.is-active {
  border-color: var(--wpc-tp-accent);
  background: #fff;
}

.wpc-tp-slot.is-empty .wpc-tp-slot__label {
  color: #999;
  font-style: italic;
}

.wpc-tp-slot__clear {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  color: #999;
  padding: 0 .1em;
}
.wpc-tp-slot__clear:hover { color: #c00; }

.wpc-tp-reset {
  border: none;
  background: none;
  text-decoration: underline;
  cursor: pointer;
  font-size: .85em;
  color: #666;
  padding: 0;
  margin-left: .3em;
}
.wpc-tp-reset:hover { color: #c00; }

/* ---- Onglets de catégories ---- */
.wpc-tp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin-bottom: .8em;
}

.wpc-tp-tab {
  border: 1px solid var(--wpc-tp-border);
  background: #fff;
  border-radius: 999px;
  padding: .3em .8em;
  font-size: .82em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.wpc-tp-tab.is-active {
  background: var(--wpc-tp-accent);
  border-color: var(--wpc-tp-accent);
  color: #fff;
}

/* ---- Grille de couleurs ---- */
.wpc-tp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .5em;
}

.wpc-tp-swatch {
  border: 2px solid transparent;
  border-radius: var(--wpc-tp-radius);
  padding: .3em;
  background: var(--wpc-tp-bg-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  text-align: center;
  transition: border-color .15s ease, transform .1s ease;
}

.wpc-tp-swatch:hover { transform: translateY(-1px); }

.wpc-tp-swatch__img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--wpc-tp-border);
}

.wpc-tp-swatch__name {
  font-size: .72em;
  line-height: 1.15;
  color: #333;
}

.wpc-tp-swatch.is-used-elsewhere .wpc-tp-swatch__img {
  outline: 2px solid var(--wpc-tp-accent);
  outline-offset: 2px;
}

/* ---- Les champs natifs WPC restent dans le DOM, juste masqués ---- */
.wpc-tp-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
}

/* =====================================================================
   Mode "single" (une seule couleur — ex. Couleur du licol)
   ===================================================================== */

.wpc-tp-widget--single .wpc-tp-slots {
  margin-bottom: .9em;
}

.wpc-tp-current {
  display: flex;
  align-items: center;
  gap: .5em;
  border: 2px solid var(--wpc-tp-accent);
  border-radius: 999px;
  padding: .25em .8em .25em .25em;
  background: #fff;
  font-size: .9em;
  line-height: 1.1;
}

.wpc-tp-current__swatch {
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #fff;
  border: 1px solid var(--wpc-tp-border);
  flex: 0 0 auto;
}

.wpc-tp-current__label {
  font-weight: 600;
}

.wpc-tp-current.is-empty {
  border-color: var(--wpc-tp-border);
  background: var(--wpc-tp-bg-muted);
}

.wpc-tp-current.is-empty .wpc-tp-current__label {
  font-weight: 400;
  font-style: italic;
  color: #999;
}

/* Couleur actuellement choisie dans la grille */
.wpc-tp-swatch.is-selected {
  border-color: var(--wpc-tp-accent);
  background: #fff;
}

.wpc-tp-swatch.is-selected .wpc-tp-swatch__img {
  outline: 2px solid var(--wpc-tp-accent);
  outline-offset: 2px;
}

.wpc-tp-swatch.is-selected .wpc-tp-swatch__name {
  font-weight: 600;
  color: #111;
}

/* Confort mobile */
@media (max-width: 480px) {
  .wpc-tp-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  }
  .wpc-tp-swatch__img {
    width: 38px;
    height: 38px;
  }
}

/* ---- Message contextuel (ex. coloris retiré car tressage limité) ---- */
.wpc-tp-notice {
  font-size: .82em;
  line-height: 1.3;
  margin: 0 0 .8em;
  padding: .5em .7em;
  border-radius: var(--wpc-tp-radius);
  background: #fff8e5;
  border: 1px solid #f0dca8;
  color: #6b5316;
}

.wpc-tp-notice[hidden] { display: none; }

/* ---- Champ natif neutralisé (emplacement non disponible) ---- */
.wpc-tp-group-disabled {
  display: none !important;
}

/* =====================================================================
   Variante "large" (libellés longs — ex. Type de tressage)
   ===================================================================== */

.wpc-tp-widget--large .wpc-tp-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: .7em;
}

.wpc-tp-widget--large .wpc-tp-swatch {
  padding: .5em .35em;
}

.wpc-tp-widget--large .wpc-tp-swatch__img {
  width: 64px;
  height: 64px;
}

.wpc-tp-widget--large .wpc-tp-swatch__name {
  font-size: .78em;
}

.wpc-tp-widget--large .wpc-tp-current__swatch {
  width: 2.2em;
  height: 2.2em;
}

@media (max-width: 480px) {
  .wpc-tp-widget--large .wpc-tp-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }
  .wpc-tp-widget--large .wpc-tp-swatch__img {
    width: 54px;
    height: 54px;
  }
}

/* =====================================================================
   Mode "fields" : champs texte compacts (ex. mesures sur mesure)
   ===================================================================== */

.wpc-tp-widget--fields {
  padding: .8em 1em .9em;
}

/* ---- Bloc repliable ---- */
.wpc-tp-collapse__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95em;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .4em;
  flex-wrap: wrap;
}

.wpc-tp-collapse__summary::-webkit-details-marker { display: none; }

.wpc-tp-collapse__summary::before {
  content: "\25B8";
  font-size: .85em;
  color: #888;
  transition: transform .15s ease;
}

.wpc-tp-collapse[open] > .wpc-tp-collapse__summary::before {
  transform: rotate(90deg);
}

.wpc-tp-collapse__count {
  font-weight: 400;
  font-size: .85em;
  color: #777;
}

.wpc-tp-collapse > .wpc-tp-widget__hint {
  margin: .6em 0 .8em;
}

/* ---- Grille de champs ---- */
.wpc-tp-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: .5em .7em;
}

.wpc-tp-field {
  display: flex;
  flex-direction: column;
  gap: .25em;
  font-size: .85em;
  cursor: text;
  margin: 0;
}

.wpc-tp-field__label {
  display: flex;
  align-items: center;
  gap: .35em;
  color: #444;
  line-height: 1.2;
}

.wpc-tp-field__dot {
  width: .75em;
  height: .75em;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.wpc-tp-field__box {
  display: flex;
  align-items: center;
  gap: .25em;
  border: 1px solid var(--wpc-tp-border);
  border-radius: var(--wpc-tp-radius);
  background: #fff;
  padding: .15em .45em;
  transition: border-color .15s ease;
}

.wpc-tp-field__box:focus-within {
  border-color: var(--wpc-tp-accent);
}

.wpc-tp-field__input {
  border: none !important;
  outline: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  padding: .25em 0 !important;
  margin: 0 !important;
  font-size: 1em;
  line-height: 1.3;
  box-shadow: none !important;
  text-align: right;
}

.wpc-tp-field__unit {
  font-size: .85em;
  color: #888;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .wpc-tp-fields {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}

/* =====================================================================
   Mode "select" : pastilles de couleur unie (sans image)
   ===================================================================== */

.wpc-tp-swatch__img--color {
  background-color: #eee;
}

/* Damier discret pour "Transparent" */
.wpc-tp-swatch__img--color.is-transparent,
.wpc-tp-current__swatch.is-transparent {
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-color: #fff;
}

/* Ni image ni couleur : initiales dans le rond (ex. Finitions) */
.wpc-tp-swatch__img--color.is-initials,
.wpc-tp-current__swatch.is-initials {
  background: #f0efec;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .02em;
}

.wpc-tp-swatch.is-selected .wpc-tp-swatch__img--color.is-initials {
  background: var(--wpc-tp-accent);
  color: #fff;
}

/* Rond alimenté par une photo fournie via optionImages */
.wpc-tp-swatch__img--color.is-photo {
  background-color: #fff;
  background-size: cover;
  background-position: center;
}

/* Pastille "aucun" : cercle barré */
.wpc-tp-swatch__img--color.is-none {
  background: #fff;
  position: relative;
  overflow: hidden;
}

.wpc-tp-swatch__img--color.is-none::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 1px;
  background: #c00;
  transform: rotate(-45deg);
}

.wpc-tp-swatch--none .wpc-tp-swatch__name {
  font-style: italic;
  color: #777;
}

/* Prix affiché sous la pastille (uniquement si les prix diffèrent) */
.wpc-tp-swatch__price {
  font-size: .68em;
  color: #777;
  line-height: 1.1;
}

/* =====================================================================
   Récapitulatif : badges + liste
   ===================================================================== */

.wpc-tp-recap {
  --wpc-tp-accent: var(--wpc-tp-green);
  --wpc-tp-border: var(--wpc-tp-green-line);
  --wpc-tp-radius: 8px;
  margin: 0 0 1.4em;
}

/* ---- Badges ---- */
.wpc-tp-recap__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin-bottom: .8em;
}

/* Badges autonomes, placés sous l'aperçu photo (hors du panneau).
   Ils sont insérés comme FRÈRE du cadre d'aperçu, pas à l'intérieur :
   rien ne modifie donc la géométrie d'un éventuel aperçu SVG. */
.wpc-tp-recap__badges--standalone {
  margin: .8em 0 1em;
  /* Sécurité si le conteneur parent est en flex ou en grid */
  flex: 1 1 100%;
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}

/* Panneau seul, placé à la fin des options */
.wpc-tp-recap--panel-only {
  margin: 1.2em 0 1.4em;
}

.wpc-tp-badge {
  display: inline-block;
  border-radius: 999px;
  padding: .3em .8em;
  font-size: .82em;
  line-height: 1.3;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease;
}

.wpc-tp-badge--green {
  background: #e8f3e6;
  border-color: #c3e0bd;
  color: #2f5c28;
}

.wpc-tp-badge--brown {
  background: #f3ebe1;
  border-color: #ddc9b0;
  color: #6b4a26;
}

.wpc-tp-badge--neutral {
  background: #f0f0ee;
  border-color: #dcdcd8;
  color: #444;
}

.wpc-tp-badge.is-empty {
  background: #f7f7f7;
  border-color: #e6e6e6;
  color: #999;
  font-weight: 400;
}

/* ---- Panneau récapitulatif ---- */
.wpc-tp-recap__panel {
  border: 1px solid var(--wpc-tp-border);
  border-radius: var(--wpc-tp-radius);
  background: #fcfcfb;
  padding: .8em 1em .9em;
}

.wpc-tp-recap__title {
  margin: 0 0 .5em;
  font-weight: 600;
  font-size: .95em;
}

.wpc-tp-recap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .15em 1.4em;
}

.wpc-tp-recap__row {
  display: flex;
  align-items: baseline;
  gap: .5em;
  justify-content: space-between;
  font-size: .87em;
  padding: .18em 0;
  border-bottom: 1px dotted #e8e8e4;
  margin: 0;
}

.wpc-tp-recap__key {
  color: #666;
  white-space: nowrap;
}

.wpc-tp-recap__value {
  font-weight: 600;
  color: #222;
  text-align: right;
}

.wpc-tp-recap__value.is-empty {
  font-weight: 400;
  font-style: italic;
  color: #999;
}

/* ---- Flash sur la valeur qui vient de changer ---- */
@keyframes wpc-tp-flash {
  0%   { background-color: rgba(255, 224, 130, .85); }
  100% { background-color: transparent; }
}

.wpc-tp-recap__value.is-updated,
.wpc-tp-badge.is-updated {
  animation: wpc-tp-flash .7s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .wpc-tp-recap__value.is-updated,
  .wpc-tp-badge.is-updated {
    animation: none;
  }
}

@media (max-width: 480px) {
  .wpc-tp-recap__list {
    grid-template-columns: 1fr;
  }
  .wpc-tp-badge {
    font-size: .78em;
  }
}

/* =====================================================================
   Application de la charte (ces règles passent après, donc l'emportent)
   ===================================================================== */

/* ---- Titres de bloc : vert foncé, capitales, comme les étapes ---- */
.wpc-tp-widget__title,
.wpc-tp-collapse__summary {
  color: var(--wpc-tp-green);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .88em;
  font-weight: 700;
}

.wpc-tp-widget__hint {
  color: var(--wpc-tp-ink-soft);
}

/* ---- Pastilles : sélection en vert tendre ---- */
.wpc-tp-swatch {
  background: var(--wpc-tp-card);
  border: 1px solid var(--wpc-tp-line);
  border-radius: var(--wpc-tp-round);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.wpc-tp-swatch:hover {
  border-color: var(--wpc-tp-green-line);
  background: var(--wpc-tp-green-tint);
}

.wpc-tp-swatch.is-selected,
.wpc-tp-swatch.is-used-elsewhere {
  border-color: var(--wpc-tp-green);
  background: var(--wpc-tp-green-tint);
}

.wpc-tp-swatch.is-selected .wpc-tp-swatch__img,
.wpc-tp-swatch.is-used-elsewhere .wpc-tp-swatch__img {
  outline-color: var(--wpc-tp-green);
}

.wpc-tp-swatch__name {
  color: var(--wpc-tp-ink);
}

.wpc-tp-swatch.is-selected .wpc-tp-swatch__name {
  color: var(--wpc-tp-green);
  font-weight: 600;
}

.wpc-tp-swatch__price {
  color: var(--wpc-tp-ink-soft);
}

/* ---- Onglets de catégories ---- */
.wpc-tp-tab {
  border-color: var(--wpc-tp-line);
  color: var(--wpc-tp-ink-soft);
}

.wpc-tp-tab:hover {
  border-color: var(--wpc-tp-green-line);
  color: var(--wpc-tp-green);
}

.wpc-tp-tab.is-active {
  background: var(--wpc-tp-green);
  border-color: var(--wpc-tp-green);
  color: #fff;
}

/* ---- Emplacements numérotés et sélection courante ---- */
.wpc-tp-slot {
  background: #f7f9f6;
  border-color: var(--wpc-tp-line);
}

.wpc-tp-slot.is-active {
  border-color: var(--wpc-tp-green);
  background: var(--wpc-tp-green-tint);
}

.wpc-tp-slot__index {
  background: var(--wpc-tp-green);
  border-color: var(--wpc-tp-green);
  color: #fff;
}

.wpc-tp-current {
  border-color: var(--wpc-tp-green);
  background: var(--wpc-tp-green-tint);
}

.wpc-tp-current.is-empty {
  border-color: var(--wpc-tp-line);
  background: #f7f9f6;
}

.wpc-tp-current__label {
  color: var(--wpc-tp-green);
}

/* ---- Initiales (finitions) ---- */
.wpc-tp-swatch.is-selected .wpc-tp-swatch__img--color.is-initials {
  background: var(--wpc-tp-green);
}

/* ---- Champs de mesures ---- */
.wpc-tp-field__box:focus-within {
  border-color: var(--wpc-tp-green);
  box-shadow: 0 0 0 2px rgba(47, 93, 52, .12);
}

.wpc-tp-field__label {
  color: var(--wpc-tp-ink-soft);
}

/* ---- Panneau récapitulatif : fond vert clair ---- */
.wpc-tp-recap__panel {
  background: var(--wpc-tp-green-soft);
  border: 1px solid var(--wpc-tp-green-line);
  border-radius: var(--wpc-tp-round);
  padding: 1em 1.2em 1.1em;
}

.wpc-tp-recap__title {
  color: var(--wpc-tp-green);
  font-weight: 700;
  font-size: 1.02em;
}

.wpc-tp-recap__key,
.wpc-tp-recap__value {
  color: var(--wpc-tp-ink);
}

.wpc-tp-recap__value {
  font-weight: 600;
}

.wpc-tp-recap__value.is-empty {
  color: var(--wpc-tp-ink-soft);
  font-weight: 400;
}

/* ---- Badges sous l'aperçu ---- */
.wpc-tp-badge--green {
  background: var(--wpc-tp-green-soft);
  border-color: var(--wpc-tp-green-line);
  color: var(--wpc-tp-green);
}

.wpc-tp-badge--brown {
  background: #f5efe6;
  border-color: #e0d3bf;
  color: #6b4a26;
}

.wpc-tp-badge--neutral {
  background: #f4f6f2;
  border-color: var(--wpc-tp-line);
  color: var(--wpc-tp-ink);
}

.wpc-tp-badge.is-empty {
  background: #f7f8f6;
  border-color: var(--wpc-tp-line);
  color: var(--wpc-tp-ink-soft);
}

/* ---- Boutons secondaires ---- */
.wpc-tp-reset:hover,
.wpc-tp-slot__clear:hover {
  color: var(--wpc-tp-green-dark);
}

/* =====================================================================
   Bouton « Ajouter au panier » + réassurance
   Les !important sont volontaires : les thèmes WooCommerce stylent
   .button.alt avec une specificité élevée.
   ===================================================================== */

/* Spécificité volontairement élevée pour passer devant les thèmes */
body form.cart button.single_add_to_cart_button.wpc-tp-cart-btn,
body .cart button.single_add_to_cart_button.wpc-tp-cart-btn,
.single_add_to_cart_button.wpc-tp-cart-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  box-sizing: border-box;
  margin: 1.2em 0 0;
  padding: 1.05em 1.4em !important;
  background: var(--wpc-tp-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wpc-tp-round) !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0;
  cursor: pointer !important;
  -webkit-user-select: none;
  user-select: none;
  transition: background .15s ease, transform .1s ease;
}

body form.cart button.single_add_to_cart_button.wpc-tp-cart-btn:hover,
body form.cart button.single_add_to_cart_button.wpc-tp-cart-btn:focus,
.single_add_to_cart_button.wpc-tp-cart-btn:hover,
.single_add_to_cart_button.wpc-tp-cart-btn:focus {
  background-color: var(--wpc-tp-green-dark) !important;
  background-image: none !important;
  color: #fff !important;
  /* Divi élargit le padding au survol pour dégager sa flèche : on le fige,
     sinon le bouton « respire » au passage de la souris. */
  padding: 1.05em 1.4em !important;
}

/* Sécurité : si un thème ou un plugin insère malgré tout un élément dans
   le bouton, il ne doit pas voler le survol. */
.single_add_to_cart_button.wpc-tp-cart-btn > * {
  pointer-events: none !important;
}

/* ---- Champ quantité : accordé au bouton ---- */
body form.cart .quantity {
  display: inline-flex;
  align-items: center;
  margin: 0 0 .2em;
}

body form.cart .quantity input.qty {
  width: 4.5em;
  box-sizing: border-box;
  padding: .6em .4em;
  text-align: center;
  border: 1px solid var(--wpc-tp-line);
  border-radius: 8px;
  background: #fff;
  color: var(--wpc-tp-ink);
  font-size: 1em;
  line-height: 1.2;
  box-shadow: none;
}

body form.cart .quantity input.qty:focus {
  outline: none;
  border-color: var(--wpc-tp-green);
  box-shadow: 0 0 0 2px rgba(47, 93, 52, .12);
}

.single_add_to_cart_button.wpc-tp-cart-btn:active {
  transform: translateY(1px);
}

.single_add_to_cart_button.wpc-tp-cart-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---- Flèche Divi et prix ----
   Divi (et plusieurs thèmes WooCommerce) ajoutent une flèche sur les boutons
   via ::after, en police ETmodules, révélée au survol par une animation
   d'opacité et de marge. Sur un bouton en flex, elle se retrouve posée au
   milieu du libellé — c'est le « bug de la flèche au survol ». Et comme elle
   occupe ::after, elle écrasait aussi le prix.
   On neutralise donc ::after, et le prix passe en ::before. */

body .woocommerce button.single_add_to_cart_button.wpc-tp-cart-btn::after,
body button.single_add_to_cart_button.wpc-tp-cart-btn::after,
.single_add_to_cart_button.wpc-tp-cart-btn::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

body .woocommerce button.single_add_to_cart_button.wpc-tp-cart-btn::before,
body button.single_add_to_cart_button.wpc-tp-cart-btn::before,
.single_add_to_cart_button.wpc-tp-cart-btn::before {
  content: var(--wpc-tp-price, "") !important;
  /* Police et positionnement remis à zéro : le thème impose sinon sa police
     d'icônes et un position:absolute destinés à sa flèche. */
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  position: static !important;
  opacity: 1 !important;
  order: 2;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  color: inherit;
  -webkit-text-fill-color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
  pointer-events: none;
  transform: none !important;
  transition: none !important;
}

/* ---- Ligne de réassurance ---- */
.wpc-tp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4em 1.4em;
  margin: .7em 0 0;
  font-size: .82em;
  line-height: 1.3;
  color: var(--wpc-tp-ink-soft);
}

.wpc-tp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  white-space: nowrap;
}

.wpc-tp-trust__icon {
  font-size: 1.05em;
}

@media (max-width: 480px) {
  .single_add_to_cart_button.wpc-tp-cart-btn {
    padding: .95em 1.1em !important;
    font-size: 1em !important;
  }
  .wpc-tp-trust {
    gap: .35em .9em;
    font-size: .78em;
  }
}

/* =====================================================================
   Ronds « taille » : disque de diamètre croissant (Taille du licol)
   ===================================================================== */

.wpc-tp-swatch__img--color.is-size,
.wpc-tp-current__swatch.is-size {
  background: var(--wpc-tp-green-tint);
  border: 1px solid var(--wpc-tp-green-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.wpc-tp-size-dot {
  display: block;
  border-radius: 50%;
  background: var(--wpc-tp-green-line);
  transition: background .15s ease;
}

.wpc-tp-swatch:hover .wpc-tp-size-dot {
  background: #b9d3b0;
}

.wpc-tp-swatch.is-selected .wpc-tp-size-dot,
.wpc-tp-current .wpc-tp-size-dot {
  background: var(--wpc-tp-green);
}

/* =====================================================================
   Aperçus : espacement + conteneur collant
   Les sélecteurs combinent classe + id pour passer devant le <style>
   inline de la page, qui fixe max-width sur les deux cadres.
   ===================================================================== */

/* ---- Base des deux cadres d'aperçu ----
   Reprise du <style> qui était dans le module Divi : le calque SVG se
   superpose à la photo en position absolue, ce qui exige position: relative
   sur le cadre. isolation: isolate garde le calque dans son propre contexte
   d'empilement. pointer-events: none laisse les clics traverser le calque. */

#licol-preview-wrap,
#tressage-preview-wrap {
  position: relative;
  max-width: var(--wpc-tp-preview-max, 500px);
  isolation: isolate;
}

#licol-preview-robe,
#tressage-preview-img {
  width: 100%;
  display: block;
}

#tressage-preview-img {
  border-radius: 4px;
}

#licol-preview-overlay-slot,
#tressage-preview-slot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#licol-preview-overlay-slot svg,
#tressage-preview-slot svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Espacement entre les deux images, appliqué même sans sticky */
#licol-preview-wrap {
  margin-bottom: var(--wpc-tp-preview-gap, 16px);
}

.wpc-tp-preview-sticky {
  margin-bottom: 1.5em;
}

/* Mode sticky CSS (stickyMode: 'css') */
.wpc-tp-preview-sticky--css {
  position: sticky;
  top: var(--wpc-tp-sticky-top, 24px);
  z-index: 2;
  align-self: start;
}

/* Mode fixed (défaut) : le positionnement est piloté en JS, le CSS ne fournit
   que le plan et le fond, pour que l'aperçu ne laisse pas voir le contenu qui
   défile derrière lui. */
.wpc-tp-preview-sticky--fixed.is-fixed {
  z-index: 20;
  background: #fff;
}

.wpc-tp-preview-placeholder {
  height: 0;
}

/* Centrage horizontal des cadres dans leur colonne (stickyAlign: 'center') */
.wpc-tp-preview-sticky--center > #licol-preview-wrap,
.wpc-tp-preview-sticky--center > #tressage-preview-wrap {
  margin-left: auto;
  margin-right: auto;
}

.wpc-tp-preview-sticky--center > .wpc-tp-recap__badges--standalone {
  justify-content: center;
}

/* Empilé (défaut) : chaque aperçu prend toute la largeur disponible */
.wpc-tp-preview-sticky > #licol-preview-wrap,
.wpc-tp-preview-sticky > #tressage-preview-wrap {
  width: 100%;
}

/* Hauteur bornée : un bloc collant plus haut que la fenêtre se fige en
   laissant son bas hors d'atteinte. La barre interne n'apparaît que si le
   contenu dépasse réellement. */
.wpc-tp-preview-sticky--scroll.is-fixed,
.wpc-tp-preview-sticky--scroll.wpc-tp-preview-sticky--css {
  max-height: calc(100vh - var(--wpc-tp-sticky-top, 24px) - 20px);
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

/* Côte à côte (stickyCompact: true) : pertinent seulement si l'aperçu
   occupe toute la largeur de la page. */
.wpc-tp-preview-sticky--compact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wpc-tp-preview-gap, 16px);
}

.wpc-tp-preview-sticky--compact > #licol-preview-wrap,
.wpc-tp-preview-sticky--compact > #tressage-preview-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin-bottom: 0;
}

.wpc-tp-preview-sticky--compact > .wpc-tp-recap__badges--standalone {
  flex: 1 1 100%;
  margin-top: 0;
}

/* Mobile : pas de sticky (l'aperçu mangerait tout l'écran) et images empilées */
@media (max-width: 900px) {
  .wpc-tp-preview-sticky,
  .wpc-tp-preview-sticky--css,
  .wpc-tp-preview-sticky--fixed.is-fixed {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    z-index: auto;
  }
  .wpc-tp-preview-placeholder {
    display: none;
  }
  .wpc-tp-preview-sticky--compact {
    display: block;
  }
  .wpc-tp-preview-sticky--compact > #licol-preview-wrap {
    margin-bottom: var(--wpc-tp-preview-gap, 16px);
  }
  .wpc-tp-preview-sticky--scroll {
    max-height: none;
    overflow-y: visible;
  }
}

/* =====================================================================
   Conseils couleurs selon la robe
   ===================================================================== */

.wpc-tp-advice {
  margin: 0 0 .9em;
  padding: .7em .85em;
  border: 1px dashed var(--wpc-tp-green-line);
  border-radius: var(--wpc-tp-radius, 8px);
  background: var(--wpc-tp-green-soft);
}

.wpc-tp-advice__title {
  margin: 0 0 .55em;
  font-size: .85em;
  font-weight: 600;
  color: var(--wpc-tp-green);
  line-height: 1.3;
}

.wpc-tp-advice__list {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
}

.wpc-tp-advice__item {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .6em .25em .3em;
  border: 1px solid var(--wpc-tp-green-line);
  border-radius: 999px;
  background: #fff;
  font-size: .8em;
  line-height: 1.2;
  color: var(--wpc-tp-ink);
  font-family: inherit;
}

button.wpc-tp-advice__item {
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}

button.wpc-tp-advice__item:hover {
  border-color: var(--wpc-tp-green);
  transform: translateY(-1px);
}

button.wpc-tp-advice__item:active {
  transform: none;
}

.wpc-tp-advice__dot {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  flex: 0 0 auto;
  background-color: #f0efec;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

.wpc-tp-advice__empty {
  margin: 0;
  font-size: .8em;
  font-style: italic;
  color: var(--wpc-tp-ink-soft);
}