/* ==========================================================================
   Banner promozione (Halloween) - home e scheda prodotto
   Mobile first: su telefono tutto in colonna, da 768px in riga.
   ========================================================================== */

.pe-promo{
  padding: 1.5rem 0 1.25rem;
  background: var(--pe-bianco);
}

.pe-promo-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  color: #fff;
  background: #16120f;
  border: 2px solid var(--pe-arancio);
  border-radius: calc(var(--pe-raggio) * 2);
  box-shadow: var(--pe-ombra);
}

.pe-promo-zucca{
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.pe-promo-percento{
  display: inline-block;
  padding: .1em .45em;
  font-family: var(--pe-font-titoli);
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1.1;
  color: #16120f;
  background: #ff9d1c;
  border-radius: var(--pe-raggio);
}

.pe-promo-testo{ flex: 1 1 auto; min-width: 0; }

.pe-promo-titolo{
  margin: 0 0 .35rem;
  font-family: var(--pe-font-titoli);
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  line-height: 1.2;
  color: #fff;
}

.pe-promo-sotto{
  margin: 0;
  font-size: clamp(.95rem, 3.4vw, 1.05rem);
  color: #f1e6d8;
}
.pe-promo-sotto strong{ color: #ffb347; }

.pe-promo .pe-promo-btn{
  width: 100%;
  justify-content: center;
  background: var(--pe-arancio);
  border-color: var(--pe-arancio);
  color: #fff;
}
.pe-promo .pe-promo-btn:hover{
  background: #fff;
  border-color: #fff;
  color: #16120f;
}

/* piccolo avviso sotto il banner */
.pe-promo-nota {
    width: 100%;
    box-sizing: border-box;
    margin: .6rem 0 0;
    font-size: .78rem;
    line-height: 1.45;
    text-align: center;
    color: var(--pe-testo-tenue);
}
.pe-promo-nota strong{
  text-transform: uppercase;
  color: var(--pe-testo);
}

@media (min-width: 768px){
  .pe-promo-box{
    flex-direction: row;
    gap: 1.5rem;
    padding: 1.25rem 1.75rem;
    text-align: left;
  }
  .pe-promo-zucca{ width: 72px; height: 72px; }
  .pe-promo .pe-promo-btn{ width: auto; flex: 0 0 auto; white-space: nowrap; }
  .pe-promo-nota{ text-align: left; }
}
@media (min-width: 768px) {
    .pe-promo .container > .pe-promo-nota {
        white-space: nowrap;
        font-size: .72rem;
    }
}