/*
 * Boutique et fiche produit.
 * Les sélecteurs WooCommerce sont visés directement : aucun template n'est surchargé,
 * la mise en forme se fait entièrement ici.
 */

.flopo-main { display: block; }

.woocommerce .flopo-main,
.woocommerce-page .flopo-main {
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  padding-block: var(--pas-5) var(--pas-6);
}

.woocommerce-products-header {
  margin-bottom: var(--pas-4);
}

.woocommerce-products-header__title,
.woocommerce-loop-product__title {
  font-family: var(--serif);
  font-weight: 300;
}

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pas-1);
}

/* Sans cette largeur, l'image garde sa taille naturelle et la carte reste
   étroite au milieu d'une colonne large : la grille paraît vide. */
.woocommerce ul.products li.product a img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* Pas de fond : la photo repose sur la page, et le blanc de son propre fond
     se fond dedans par `multiply`. Un fond ici dessinait un rectangle beige. */
  background: transparent;
  mix-blend-mode: multiply;
  margin-bottom: var(--pas-1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.375rem;
  padding: 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--sans);
  font-size: var(--corps-petit);
  color: var(--encre-douce);
  margin: 0;
}

.woocommerce ul.products li.product .button {
  margin-top: var(--pas-2);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: var(--trait);
  border-left: 3px solid var(--accent);
  background: var(--papier-creuse);
  padding: var(--pas-2) var(--pas-3);
  margin-bottom: var(--pas-4);
  list-style: none;
  font-size: var(--corps-petit);
}

/* ---- Fiche produit ---- */

.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--pas-6) var(--pas-5);
  align-items: start;
}

.single-product div.product .woocommerce-product-gallery {
  position: relative;
  padding: var(--pas-4);
  background: var(--accent-voile);
  transition: background 0.45s ease;
}

.single-product div.product .woocommerce-product-gallery img { mix-blend-mode: multiply; }

.single-product div.product .summary { margin: 0; }

.single-product .product_title {
  font-family: var(--serif);
  font-size: var(--titre-2);
  font-weight: 300;
  margin-bottom: var(--pas-2);
}

.single-product .woocommerce-product-details__short-description,
.single-product .flopo-description { color: var(--encre-douce); }

/*
 * La description longue, sous les deux colonnes.
 *
 * `div.product` est une grille à deux colonnes : sans `grid-column`, le bloc
 * se rangerait sous la seule galerie au lieu de tenir toute la largeur.
 */
.single-product .flopo-description {
  grid-column: 1 / -1;
  max-width: 62ch;
  padding-top: var(--pas-4);
  border-top: var(--trait);
}

.single-product .flopo-description > * + * { margin-top: var(--pas-3); }

.single-product .price {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--encre);
  margin-block: var(--pas-3);
}

/* ---- Le formulaire de personnalisation ---- */

.flopo-perso { margin-block: var(--pas-4) var(--pas-3); }

.flopo-champ { margin-block: var(--pas-2); }

.flopo-champ__label {
  display: block;
  margin-bottom: var(--pas-1);
  font-size: var(--corps-menu);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flopo-champ input[type="text"] {
  width: 100%;
  max-width: 22rem;
  padding: var(--pas-2);
  border: var(--trait);
  border-radius: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--corps);
}

.flopo-champ input[type="text"]::placeholder { color: var(--encre-tenue); }

/* Nuancier */

.flopo-nuancier {
  border: 0;
  margin: var(--pas-3) 0 0;
  padding: 0;
}

.flopo-nuancier legend { padding: 0; }

.flopo-nuancier__pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-1);
}

.flopo-pastille { display: inline-flex; cursor: pointer; }

.flopo-pastille input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.flopo-pastille__pastille {
  display: block;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--email);
  border: 1px solid rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.flopo-pastille:hover .flopo-pastille__pastille { transform: scale(1.09); }

.flopo-pastille input:checked + .flopo-pastille__pastille {
  box-shadow: 0 0 0 2px var(--papier), 0 0 0 3.5px var(--encre);
}

.flopo-pastille input:focus-visible + .flopo-pastille__pastille {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.flopo-nuancier__nom {
  margin-top: var(--pas-1);
  font-size: var(--corps-petit);
  color: var(--encre-douce);
}

/* Compteur d'unités */

.flopo-compteur { margin-bottom: var(--pas-3); }

.flopo-compteur__boutons {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-2);
  border: var(--trait);
  padding: var(--pas-1) var(--pas-2);
}

.flopo-compteur__bouton {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--encre);
  font-size: 1.25rem;
  line-height: 1;
}

.flopo-compteur__bouton[disabled] { color: var(--encre-tenue); cursor: not-allowed; }

.flopo-compteur__valeur {
  min-width: 1.5rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.25rem;
}

/* Unités répétées */

.flopo-unites {
  margin: 0 0 var(--pas-3);
  padding: 0;
  list-style: none;
  border-top: var(--trait);
}

.flopo-unite {
  padding-block: var(--pas-3);
  border-bottom: var(--trait);
}

.flopo-unite__rang {
  display: block;
  font-size: var(--corps-menu);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

/* Bouton d'achat */

.single-product .single_add_to_cart_button,
.woocommerce a.button, .woocommerce button.button {
  background: var(--encre);
  color: var(--papier);
  border: 0;
  border-radius: 0;
  padding: var(--pas-2) var(--pas-4);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: #413a33;
  color: var(--papier);
}

.single-product form.cart .quantity { margin-right: var(--pas-2); }

.flopo-delai {
  margin-top: var(--pas-3);
  font-size: var(--corps-petit);
  color: var(--encre-douce);
}

/* ---- Panier et commande : on ne touche qu'à la typographie ---- */

.woocommerce table.shop_table {
  border-collapse: collapse;
  border: var(--trait);
  border-radius: 0;
  font-size: var(--corps-petit);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-top: var(--trait); }

.woocommerce .cart_item dl.variation { font-size: var(--corps-petit); color: var(--encre-douce); }
.woocommerce .cart_item dl.variation dt { font-weight: 500; }

/* ---- Adaptations ---- */

@media (max-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr; gap: var(--pas-4); }
}

/* ------------------------------------------------------------------------- *
 * Reprise des styles par défaut de WooCommerce
 *
 * Sa feuille de style est très spécifique (`.woocommerce div.product p.price`,
 * `.woocommerce a.button`…). Sans monter au même niveau, on héritait de son
 * vert olive pour les prix et de son mauve pour les boutons.
 * ------------------------------------------------------------------------- */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins {
  color: var(--encre);
  font-weight: 400;
  text-decoration: none;
}

.woocommerce div.product p.price {
  font-family: var(--serif);
  font-size: 2rem;
}

.woocommerce ul.products li.product .price {
  font-family: var(--sans);
  font-size: var(--corps-petit);
  color: var(--encre-douce);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .button {
  background: var(--encre);
  color: var(--papier);
  border: 0;
  border-radius: 0;
  padding: var(--pas-2) var(--pas-4);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-shadow: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover {
  background: var(--cuivre, #413a33);
  color: var(--papier);
}

/* Le champ quantité, aligné sur les autres champs du formulaire. */
.woocommerce .quantity .qty {
  width: 4.5rem;
  padding: var(--pas-2) var(--pas-1);
  border: var(--trait);
  border-radius: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--corps);
  text-align: center;
}

/* La galerie occupe sa colonne : WooCommerce la bride à 48 % pour son propre
   gabarit flottant, dont on n'a pas besoin puisqu'on est en grille. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  width: 100%;
  float: none;
  margin: 0;
}

/* Douze émaux, en deux rangs de six — comme sur la page d'accueil. */
.flopo-nuancier__pastilles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 17rem;
}

.flopo-pastille__pastille {
  width: 100%;
  max-width: 2.125rem;
  height: auto;
  aspect-ratio: 1;
}

/* ------------------------------------------------------------------------- *
 * Prénom et nuancier côte à côte
 *
 * Le champ prénom est plafonné à 9 lettres : lui donner toute la largeur était
 * trompeur. Sur écran large on le pose à gauche et le nuancier à droite, ce qui
 * raccourcit surtout la suspension, où chaque cœur répète les deux.
 * ------------------------------------------------------------------------- */

.flopo-champ input[type="text"] {
  width: 11em;
  max-width: 100%;
}

/* Un bloc masqué doit le rester, même avec un `display` explicite plus bas. */
.flopo-unite[hidden] { display: none; }

@media (min-width: 700px) {
  .flopo-unite:not([hidden]),
  .flopo-champs {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--pas-4);
    row-gap: var(--pas-1);
    align-items: start;
  }

  /* Le rang du cœur coiffe les deux colonnes. */
  .flopo-unite__rang { grid-column: 1 / -1; }

  /* Les nuanciers n'ont plus besoin de leur marge haute : la grille aligne. */
  .flopo-unite .flopo-nuancier,
  .flopo-champs .flopo-nuancier { margin-top: 0; }

  .flopo-unite .flopo-champ,
  .flopo-champs .flopo-champ { margin-block: 0; }
}

/*
 * La photo produit tient dans l'écran.
 *
 * La suspension fait 748 × 2560 : affichée à la largeur de sa colonne, elle
 * mesurait près de 1900 px de haut et écrasait la mise en page. On la borne en
 * hauteur et on la centre — on la voit ENTIÈRE, d'un seul coup d'œil.
 */
.single-product div.product .woocommerce-product-gallery__image img {
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}