/* ══════════════════════════════════════════════
 * ALMA Swimwears — Affichage des prix en promotion
 *
 * Prix barre en gris, prix promo en rouge, partout.
 *
 * Feuille distincte et chargee sur tout le site : alma-filters.css porte deja
 * ces regles mais n'est appelee que par les shortcodes boutique et homme. Ni la
 * fiche produit, ni l'accueil, ni les produits associes ne la voyaient — d'ou le
 * prix promo qui restait noir hors de la grille.
 * ══════════════════════════════════════════════ */

:root {
  --alma-promo-rouge: #b5332e;
  --alma-promo-barre: #b0b0b0;
}

/* ── Prix barre ──
   La couleur est posee sur <del> ; les <span class="amount"> internes en
   heritent. */
.price del,
.woocommerce-variation-price del,
.card-meta del {
  color: var(--alma-promo-barre);
  text-decoration: line-through;
  font-weight: 400;
  margin-right: .45em;
}

/* ── Prix promo ──
   Posee directement sur <ins> : une couleur explicite l'emporte sur celle
   heritee de .price, quelle que soit la specificite de la regle parente. */
.price ins,
.woocommerce-variation-price ins,
.card-meta ins {
  text-decoration: none;
  color: var(--alma-promo-rouge);
  font-weight: 400;
}

/* ── Textes lecteur d'ecran ──
   WooCommerce insere « Le prix initial etait : … » dans le balisage du prix.
   La regle est reprise ici pour ne pas dependre du chargement de la feuille
   WooCommerce sur la page d'accueil. */
.card-meta .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
 * Badge de remise
 *
 * Le badge existait deja sur la grille boutique ; ces regles le portent aussi
 * sur la fiche produit, ou rien ne le stylait.
 * ══════════════════════════════════════════════ */

.alma-onsale {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--alma-promo-rouge);
  color: #fff;
  padding: 4px 10px;
  border-radius: 0;
  line-height: 1;
  white-space: nowrap;
}

/* fiche produit : le badge n'etait pas positionne, il flottait dans le flux */
.single-product .woocommerce-product-gallery {
  position: relative;
}
.single-product .woocommerce-product-gallery .alma-onsale,
.single-product span.alma-onsale {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  margin: 0;
}

/* grille : on reprend la position existante, on ne change que la couleur.
   Double classe .onsale.alma-onsale volontaire : alma-filters.css est chargee
   APRES cette feuille (elle part du shortcode boutique) et porte une regle
   .alma-shop-main ul.products li.product .onsale de meme specificite, qui
   gagnerait sinon par simple ordre d'apparition. */
.alma-shop-main ul.products li.product .onsale.alma-onsale {
  background: var(--alma-promo-rouge);
  color: #fff;
}


/* ══════════════════════════════════════════════
 * Banniere promotions
 * ══════════════════════════════════════════════ */

.alma-promo-banniere {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  text-align: center;
  padding: clamp(1.1rem, 3.4vw, 2.1rem) 1.25rem;
  margin: 0 0 clamp(1.25rem, 3vw, 2.25rem);
  border-top: 1px solid var(--alma-promo-rouge);
  border-bottom: 1px solid var(--alma-promo-rouge);
  background: #fff;
}

.alma-promo-titre {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  /* clamp plutot qu'un palier de media query : le titre reste lisible de 320px
     a 1920px sans rupture brutale */
  font-size: clamp(1.05rem, 3.6vw, 1.85rem);
  letter-spacing: clamp(.18em, 1vw, .34em);
  text-transform: uppercase;
  color: var(--alma-promo-rouge);
  line-height: 1.1;
  /* l'interlettrage pousse un blanc a droite qui decentre le mot */
  text-indent: clamp(.18em, 1vw, .34em);
}

.alma-promo-detail {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(.62rem, 2.1vw, .74rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6a6a6a;
  line-height: 1.5;
  max-width: 34ch;
}

@media (max-width: 480px) {
  .alma-promo-banniere {
    gap: .45rem;
    padding: 1.1rem 1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .alma-promo-banniere { transition: none; }
}