/*
 * 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);
}

/* ===========================================================================
   Fiche produit — puces, fiche technique, contenu de la boite.
   Rendus par le theme : Elementor gratuit n'edite pas la fiche produit.
   =========================================================================== */

.hs-puces {
  display: grid; gap: 10px; margin: 18px 0 22px; padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  background: var(--hs-bg-soft); border-radius: var(--hs-radius-sm);
  list-style: none;
}
.hs-puces__item { display: grid; gap: 2px; }
.hs-puces__label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hs-muted);
}
.hs-puces__valeur { font-weight: 500; }

.hs-specs {
  display: grid; gap: clamp(24px, 4vw, 48px);
  padding-block: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--hs-line); margin-top: clamp(32px, 5vw, 56px);
}
@media (min-width: 900px) { .hs-specs { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.hs-specs__titre { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 18px; }

.hs-specs__liste { margin: 0; }
.hs-specs__ligne {
  display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hs-line-2);
}
.hs-specs__ligne dt { color: var(--hs-muted); margin: 0; }
.hs-specs__ligne dd { margin: 0; font-weight: 500; }
/* Une ligne saisie sans deux-points n'a pas de valeur : elle occupe alors
   toute la largeur, plutot que de laisser une colonne vide inexplicable. */
.hs-specs__ligne dd:empty { display: none; }
.hs-specs__ligne:has(dd:empty) { grid-template-columns: 1fr; }
.hs-specs__ligne:has(dd:empty) dt { color: var(--hs-text); font-weight: 500; }

.hs-boite {
  display: grid; gap: 10px; margin: 0; padding: 20px; list-style: none;
  background: var(--hs-surface); border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius);
}
.hs-boite__item { padding-left: 22px; position: relative; }
.hs-boite__item::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--hs-accent);
}

/* ---- barre d'achat collante --------------------------------------------- */
.hs-ancre { display: block; height: 0; scroll-margin-top: 90px; }

.hs-achat {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--hs-surface); border-top: 1px solid var(--hs-line);
  box-shadow: 0 -8px 30px rgba(14,14,18,.08);
  transform: translateY(100%); transition: transform .25s var(--hs-ease);
}
.hs-achat--visible { transform: translateY(0); }
.hs-achat__inner {
  display: flex; align-items: center; gap: 16px; padding: 10px 0; flex-wrap: nowrap;
}
.hs-achat__produit { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hs-achat__produit img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.hs-achat__nom {
  font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 32ch;
}
.hs-achat__prix { margin-left: auto; white-space: nowrap; }
.hs-achat__bouton { white-space: nowrap; }
/* Sous la barre d'achat, le dock ferait doublon : on n'en garde qu'un. */
.hs-achat--visible ~ .hs-dock { display: none; }
@media (max-width: 600px) {
  .hs-achat__nom, .hs-achat__prix { display: none; }
  .hs-achat__bouton { margin-left: auto; }
}

/* ---- dock mobile -------------------------------------------------------- */
.hs-dock { display: none; }
@media (max-width: 900px) {
  .hs-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--hs-surface); border-top: 1px solid var(--hs-line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hs-dock__lien {
    padding: 12px 4px; text-align: center; text-decoration: none;
    font-size: 12px; position: relative;
  }
  .hs-dock__lien .hs-panier__compte { margin-left: 4px; }
  /* Le dock recouvre le bas de page : on rend la hauteur au document. */
  body { padding-bottom: 62px; }
}