/* ==========================================================================
   CHARMS À L'UNITÉ (custom-charms-unite.php)
   Tuiles des 2 sections + fiche au format des fiches colliers.
   Charte : Encre #3A343C, Lavande #E7DEEC, Manrope.
   ========================================================================== */

/* Sections : barre de recherche (base : custom-charms-recherche.css) */
.ody-charms-recherche.ody-unite-recherche {
  margin: 0 0 20px;
}
.ody-unite-recherche .ody-charms-recherche__champ-wrap {
  max-width: 420px;
}
.ody-unite-recherche .ody-charms-recherche__loupe {
  left: 13px;
  width: 16px;
  height: 16px;
}
.ody-charms-recherche.ody-unite-recherche input.ody-charms-recherche__champ {
  height: 44px;
  padding: 0 12px 0 38px !important;
}
.shop-products-grid__list .ody-unite-hors-recherche {
  display: none !important;
}
/* Une tuile remontée par la recherche n'attend pas son apparition au défilement */
.shop-products-grid__list.is-recherche .product-card {
  opacity: 1 !important;
  transform: none !important;
}

/* Tuiles : le charm entier, jamais coupé */
a.product-card[href*='/boutique/charm-'] .product-card__image-wrapper {
  background: #f4f0f6;
}
a.product-card[href*='/boutique/charm-'] .product-card__image--main {
  position: relative; /* au-dessus de l'anneau en plus */
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
}
/* Prix juste sous le nom */
a.product-card[href*='/boutique/charm-'] .product-card__content {
  justify-content: flex-start;
  gap: 0;
}
a.product-card[href*='/boutique/charm-'] .product-card__title {
  margin-bottom: 0.5rem;
}
/* Plusieurs couleurs : petites photos empilées + « 6 couleurs ». Tailles en px (rem du thème en vw). */
.ody-unite-pile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.ody-unite-pile__minis {
  display: inline-flex;
  flex: none;
}
.ody-unite-pile__mini {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f4f0f6;
  box-shadow: 0 0 0 2px #fff;
  overflow: hidden;
}
.ody-unite-pile__mini + .ody-unite-pile__mini {
  margin-left: -7px;
}
.ody-unite-pile__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.25) translateY(-4%);
}
.ody-unite-pile__texte {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.2;
  color: #3a343c;
  white-space: nowrap;
}

/* Fiche : photo entière sur fond uni, avec du recul : à 16 %, elle s'affiche à sa vraie taille (496 px)
   sur un écran de 1440 px, donc sans étirement */
.single-product.is-charm-unite .single-product__images {
  background: #f4f0f6;
}
/* !important : le thème impose object-fit: cover !important sur toutes les galeries */
.single-product.is-charm-unite .woocommerce-product-gallery__image img {
  position: relative; /* au-dessus de l'anneau en plus */
  object-fit: contain !important;
  padding: 16%;
  box-sizing: border-box;
}

/* Anneau en plus : même cadre que la photo, et derrière elle. Déjà là sur les tuiles de la section
   boucle d'oreille ; sur la fiche, seulement quand « Boucle d'oreille » est choisi. */
.ody-unite-calque {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 8%;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ody-unite-calque span {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* Suit le zoom de la photo au survol de la tuile */
.product-card:hover .ody-unite-calque {
  transform: scale(1.08) rotate(1deg);
}
.is-charm-unite .woocommerce-product-gallery__image-link {
  position: relative;
}
.is-charm-unite .ody-unite-calque {
  padding: 16%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.is-charm-unite:has(.ody-unite-fiche[data-pour='boucle']) .ody-unite-calque {
  opacity: 1;
}
.is-charm-unite .ody-unite-calque span {
  display: none;
}
.is-charm-unite:has(.color-swatch.is-dore.is-selected) .ody-unite-calque__or,
.is-charm-unite:has(.color-swatch.is-argente.is-selected) .ody-unite-calque__argent {
  display: block;
}

/* Le thème cache la quantité des produits simples : on la remet, comme sur les colliers */
.is-charm-unite .custom-product-add-to-cart-form {
  flex-wrap: wrap;
}
.is-charm-unite .custom-product-add-to-cart-form .quantity {
  width: 16.5rem;
}
.is-charm-unite .custom-product-add-to-cart-form input[type='number'] {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Couleur / Pour : mêmes tailles que le tableau des variantes (tailles en rem, comme le thème) */
.ody-unite-fiche {
  flex: 0 0 100%;
  margin-bottom: 1.6rem;
}
.ody-unite-variations,
.ody-unite-variations tbody {
  display: block;
  width: 100%;
}
.ody-unite-variations tr {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.ody-unite-variations th,
.ody-unite-variations td {
  display: block;
  padding: 0;
  text-align: left;
}
.ody-unite-variations th label {
  color: #3a343c;
  font-family: 'Erode', sans-serif;
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
}
.ody-unite-variations a.color-swatch {
  display: inline-block;
  text-decoration: none;
}
/* Fiche épuisée : ce bloc sort du formulaire d'achat, donc des styles du thème (réservés à
   .single-product__add-to-cart). Mêmes valeurs ici, sinon les pastilles font 0 px. */
.ody-unite-variations .color-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.ody-unite-variations .color-swatch {
  box-sizing: border-box;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0.3rem;
  border: 0.2rem solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ody-unite-variations .color-swatch__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.ody-unite-variations .color-swatch.is-dore .color-swatch__fill {
  background: linear-gradient(135deg, #f5e6b8, #d4af37 45%, #a67c00);
}
.ody-unite-variations .color-swatch.is-argente .color-swatch__fill {
  background: linear-gradient(135deg, #f4f4f4, #c8c8c8, #8e8e8e);
}
.ody-unite-variations .color-swatch.is-selected,
.ody-unite-variations .color-swatch:focus-visible {
  border-color: #0a0a0a;
  outline: none;
}

/* Couleur du charm : une vignette par couleur (tailles en px : le rem du thème suit la largeur d'écran) */
.ody-unite-modeles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ody-unite-modele {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid #d8d1dc;
  border-radius: 4px;
  background: #f4f0f6;
  transition: border-color 0.2s ease;
}
.ody-unite-modele:hover {
  border-color: #3a343c;
}
.ody-unite-modele.is-selected {
  border-color: #3a343c;
  box-shadow: inset 0 0 0 1px #3a343c;
}
.ody-unite-modele img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.5); /* le charm occupe la moitié de sa photo */
}
.ody-unite-modele.is-epuise img {
  opacity: 0.4;
}
.ody-unite-modele.is-epuise::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), #3a343c calc(50% - 0.5px), #3a343c calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Choix Pour : collier / boucle d'oreille */
.ody-unite-pour {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ody-unite-pour__choix {
  position: relative;
  cursor: pointer;
}
.ody-unite-pour__choix input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ody-unite-pour__choix span {
  display: block;
  padding: 1.1rem 1.8rem;
  border: 1px solid #d8d1dc;
  border-radius: 4px;
  background: #fff;
  color: #3a343c;
  font: 500 1.4rem/1.2 'Manrope', sans-serif;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ody-unite-pour__choix input:checked + span {
  border-color: #3a343c;
  background: #3a343c;
  color: #fff;
}
.ody-unite-pour__choix input:focus-visible + span {
  outline: 2px solid #3a343c;
  outline-offset: 2px;
}

/* Infos sous les choix, comme la description des variantes */
.ody-unite-infos p {
  margin: 0 0 0.8rem;
  color: #3a343c;
  font: 400 1.4rem/1.5 'Manrope', sans-serif;
}
.ody-unite-fiche[data-pour='collier'] [data-si-pour='boucle'],
.ody-unite-fiche[data-pour='boucle'] [data-si-pour='collier'] {
  display: none;
}

/* Légende, à la place de la description des colliers */
.ody-unite-legende {
  margin-top: 4rem;
  color: #3a343c;
}
.ody-unite-legende__surtitre {
  margin: 0 0 0.8rem;
  font: 600 1.2rem/1.3 'Manrope', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ody-unite-legende__titre {
  margin: 0 0 4px;
  font-family: 'Erode', sans-serif;
  font-size: 2.6rem;
  line-height: 1.2;
}
.ody-unite-legende__metaphore {
  margin: 0 0 1.4rem;
  color: #6e4a5a;
  font: 500 1.5rem/1.4 'Manrope', sans-serif;
}
.ody-unite-legende__texte p {
  margin: 0 0 1.2rem;
  font: 400 1.4rem/1.6 'Manrope', sans-serif;
}