/*
 * Harmony Sound — boutique.
 *
 * Elementor gratuit n'a AUCUN widget WooCommerce : boutique, fiche produit,
 * panier et paiement sont rendus par les gabarits de WooCommerce, habilles
 * ici. Les selecteurs sont ceux de WooCommerce, volontairement : les
 * reecrire casserait les extensions qui s'y accrochent.
 */

.hs-boutique { padding-block: clamp(28px, 5vw, 56px); }

/* ---- cartes produit ------------------------------------------------------ */
.woocommerce ul.products,
ul.products {
  --hb-colonnes: 4;
  display: grid; gap: 26px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(var(--hb-colonnes), minmax(0, 1fr));
}
@media (max-width: 1024px) { .woocommerce ul.products, ul.products { --hb-colonnes: 3; } }
@media (max-width: 782px)  { .woocommerce ul.products, ul.products { --hb-colonnes: 2; gap: 16px; } }

/* WooCommerce pose « float: left; width: 20.5% » sur ses li.product. Dans une
   grille, le float est ignore mais le POURCENTAGE s'applique -- a l'interieur
   de la cellule. Mesure : cellule de 306 px, carte de 63 px, soit 20,5 % de
   la cellule. Tout paraissait casse (titres tronques, boutons en pastilles)
   alors que seule cette largeur heritee etait en cause. */
.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  float: none;
  width: auto;
  margin: 0;
  clear: none;
}
.woocommerce ul.products li.product a img,
ul.products li.product a img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--hs-radius); background: var(--hs-bg-soft); margin-bottom: 12px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--hs-font-body); font-size: 1rem; font-weight: 500;
  margin: 0 0 4px; letter-spacing: 0;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price { color: var(--hs-text); font-size: .98rem; }
ul.products li.product .price del { color: var(--hs-muted); margin-right: 6px; }
ul.products li.product .price ins { color: var(--hs-sale); text-decoration: none; font-weight: 500; }

/* La pastille de promotion : posee sur l'image, jamais dans le flux. */
ul.products li.product .onsale, .single-product .onsale {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--hs-sale); color: #fff;
  border-radius: var(--hs-pill); padding: 4px 12px; font-size: 12px; font-weight: 500;
}

.woocommerce ul.products li.product .button,
ul.products li.product .button {
  display: inline-block; margin-top: 10px; text-decoration: none;
  background: var(--hs-text); color: var(--hs-bg);
  border-radius: var(--hs-pill); padding: 9px 18px; font-size: .9rem;
  /* Sans cela, « Ajouter au panier » passe a la ligne dans une colonne
     etroite et le bouton en pilule devient une pastille ronde illisible.
     Constate sur la demonstration en trois colonnes. */
  white-space: nowrap; line-height: 1.2;
}
ul.products li.product .added_to_cart { display: block; margin-top: 6px; font-size: .85rem; }

/* ---- fiche produit ------------------------------------------------------- */
.single-product div.product { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 900px) {
  .single-product div.product { grid-template-columns: 55fr 45fr; align-items: start; }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .up-sells { grid-column: 1 / -1; }
}
.single-product .woocommerce-product-gallery img { border-radius: var(--hs-radius); }
.single-product .product_title { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.single-product div.product p.price { font-size: 1.4rem; }
.single-product .quantity input {
  border: 1px solid var(--hs-line); border-radius: var(--hs-radius-sm);
  padding: 10px; width: 88px;
}
.single-product .single_add_to_cart_button {
  background: var(--hs-text); color: var(--hs-bg);
  border: 0; border-radius: var(--hs-pill); padding: 14px 30px;
  font-size: 1rem; cursor: pointer;
}
.single-product .single_add_to_cart_button:hover { background: var(--hs-dark); }

/* ---- messages ------------------------------------------------------------ */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--hs-radius-sm); border: 1px solid var(--hs-line);
  background: var(--hs-surface); padding: 14px 18px; list-style: none;
}
.woocommerce-error { border-color: var(--hs-sale); color: var(--hs-sale); }

/* ---- panier et paiement -------------------------------------------------- */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
  border: 1px solid var(--hs-line); border-radius: var(--hs-radius);
  border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td { padding: 14px 16px; text-align: left; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%; border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-sm); padding: 11px 14px; font: inherit;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button {
  background: var(--hs-text); color: var(--hs-bg);
  border-radius: var(--hs-pill); padding: 12px 24px; border: 0;
  white-space: nowrap; line-height: 1.2; cursor: pointer;
}
.woocommerce #respond input#submit.alt, .woocommerce button.button.alt {
  background: var(--hs-accent); color: var(--hs-accent-ink);
}