/* ============================================================
   LEVANTE SHOP — Product Description Stylesheet
   File: levante-product-descriptions.css
   Versione: 1.0
   Schema: #3 Caldo & Accogliente
   
   INSTALLAZIONE PRESTASHOP:
   1. Carica questo file in: /themes/[tuo-tema]/assets/css/
   2. Aggiungi in /themes/[tuo-tema]/templates/_partials/head.tpl:
      <link rel="stylesheet" href="{$urls.theme_assets}css/levante-product-descriptions.css">
   3. In alternativa: incolla il contenuto in fondo al file
      /themes/[tuo-tema]/assets/css/theme.css
   
   USO NEL CAMPO DESCRIZIONE PRODOTTO:
   Incolla l'HTML con le classi pd-* nel campo descrizione.
   Il CSS viene applicato automaticamente dal tema.
   Modifica i valori nelle classi per cambiare layout e colori.
============================================================ */


/* ============================================================
   VARIABILI COLORE — modifica qui per aggiornare tutto il sito
============================================================ */
:root {
  --lev-bordeaux:       #70304D;   /* CTA, titoli H1/H2, bordi */
  --lev-bordeaux-deep:  #521F38;   /* hover CTA, header tabella */
  --lev-bordeaux-pale:  #F5ECF0;   /* hover card icone */
  --lev-cream:          #FAF6F1;   /* sfondo card, intro, forza */
  --lev-cream-dark:     #F0E9DF;   /* sfondo CTA */
  --lev-legno:          #C19A6B;   /* accento icone, spunte, barre */
  --lev-legno-pale:     #EDE0CE;   /* hover icone e punti forza */
  --lev-marrone:        #8B6F47;   /* testo secondario */
  --lev-salvia:         #9CAF88;   /* badge Eco, badge Nuovo */
  --lev-salvia-pale:    #EBF0E6;
  --lev-ink:            #2A1F1A;   /* testo principale, bordi */
  --lev-line:           #DDD0BE;   /* separatori, bordi tabella */
  --lev-muted:          #9A8E84;   /* label icone, testo debole */
  --lev-white:          #FDFAF6;   /* sfondo pagina */
}


/* ============================================================
   WRAPPER PRINCIPALE
============================================================ */
.pd-wrap {
  font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  color: var(--lev-ink);
  max-width: 860px;
  margin: 0 auto;
  background: var(--lev-white);
  line-height: 1.65;
  box-sizing: border-box;
}

.pd-wrap *,
.pd-wrap *::before,
.pd-wrap *::after {
  box-sizing: border-box;
}


/* ============================================================
   BADGE ROW (Nuovo · Eco · Consegna inclusa)
============================================================ */
.pd-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pd-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 4px 11px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

.pd-badge-new {
  background: var(--lev-bordeaux);
  color: var(--lev-cream);
}

.pd-badge-eco {
  background: var(--lev-salvia-pale);
  color: #5A7048;
  border: 1px solid var(--lev-salvia);
}

.pd-badge-made {
  background: var(--lev-legno-pale);
  color: var(--lev-marrone);
  border: 1px solid var(--lev-legno);
}

.pd-badge-promo {
  background: var(--lev-bordeaux-pale);
  color: var(--lev-bordeaux);
  border: 1px solid var(--lev-bordeaux);
}


/* ============================================================
   TESTO INTRODUTTIVO
============================================================ */
.pd-intro {
  padding: 20px 24px;
  background: var(--lev-cream);
  border-left: 4px solid var(--lev-legno);
  border-radius: 0 8px 8px 0;
  margin-bottom: 26px;
}

.pd-intro p {
  margin: 0;
  font-size: 14.5px;
  color: var(--lev-marrone);
  line-height: 1.7;
}


/* ============================================================
   GRIGLIA ICONE CARATTERISTICHE
   Uso: <div class="pd-features"> con 3, 4 o 6 .pd-feat
============================================================ */
.pd-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}

/* Variante 4 colonne */
.pd-features.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Variante 6 colonne (riga singola) */
.pd-features.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.pd-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: var(--lev-cream);
  border: 1.5px solid var(--lev-ink);
  border-radius: 10px;
  padding: 18px 10px 14px;
  text-align: center;
  transition: border-color .2s, background .2s, box-shadow .2s;
  cursor: default;
}

.pd-feat:hover {
  border-color: var(--lev-legno);
  background: var(--lev-legno-pale);
  box-shadow: 0 3px 14px rgba(193, 154, 107, .18);
}

.pd-feat svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.pd-feat-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--lev-marrone);
  line-height: 1.3;
}

.pd-feat-value {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--lev-bordeaux);
  line-height: 1.2;
}


/* ============================================================
   TITOLI DI SEZIONE
============================================================ */
.pd-section-title {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--lev-ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lev-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--lev-legno);
  border-radius: 2px;
  flex-shrink: 0;
}


/* ============================================================
   BOX CONSIGLIO DELL'ESPERTO
============================================================ */
.pd-expert {
  background: var(--lev-bordeaux-deep);
  border-radius: 10px;
  padding: 22px 26px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}

.pd-expert::before {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--lev-bordeaux);
  opacity: .35;
  pointer-events: none;
}

.pd-expert::after {
  content: '';
  position: absolute;
  top: -30px;
  right: 60px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--lev-legno);
  opacity: .12;
  pointer-events: none;
}

.pd-expert-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--lev-legno);
  margin-bottom: 9px;
  position: relative;
  z-index: 1;
}

.pd-expert p {
  margin: 0;
  font-size: 13.5px;
  color: #EAE0D5;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.pd-expert strong {
  color: #F0D9B8;
  font-weight: 600;
}


/* ============================================================
   PUNTI DI FORZA (lista con spunta)
============================================================ */
.pd-strengths {
  margin-bottom: 26px;
}

.pd-strengths ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pd-strengths li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  background: var(--lev-cream);
  border: 1px solid var(--lev-line);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--lev-marrone);
  line-height: 1.45;
  transition: border-color .2s, background .2s;
}

.pd-strengths li:hover {
  border-color: var(--lev-legno);
  background: var(--lev-legno-pale);
}

/* Spunta dorata via SVG inline come data-URI */
.pd-strengths li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23C19A6B'/%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23FAF6F1' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* ============================================================
   SCHEDA TECNICA A TABELLA
============================================================ */
.pd-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
  font-size: 13.5px;
  border: 1.5px solid var(--lev-ink);
  border-radius: 10px;
  overflow: hidden;
}

.pd-table thead tr {
  background: var(--lev-bordeaux-deep);
}

.pd-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lev-cream);
}

.pd-table thead th:first-child {
  color: var(--lev-legno);
}

.pd-table tbody tr:nth-child(even) {
  background: var(--lev-cream);
}

.pd-table tbody tr:nth-child(odd) {
  background: var(--lev-white);
}

.pd-table tbody tr:hover {
  background: var(--lev-legno-pale);
}

.pd-table td {
  padding: 10px 16px;
  color: var(--lev-marrone);
  border-bottom: 1px solid var(--lev-line);
}

.pd-table td:first-child {
  font-weight: 600;
  color: var(--lev-ink);
  width: 40%;
  border-right: 1px solid var(--lev-line);
}

.pd-table tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   STRISCIA FOOTER (brand strip sopra CTA)
============================================================ */
.pd-footer-strip {
  background: var(--lev-marrone);
  border-radius: 6px 6px 0 0;
  padding: 7px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pd-footer-strip span {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--lev-cream);
  opacity: .85;
}

.pd-footer-strip-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lev-legno);
  opacity: .7;
  flex-shrink: 0;
}


/* ============================================================
   CTA — CALL TO ACTION
============================================================ */
.pd-cta {
  background: var(--lev-cream-dark);
  border: 1.5px solid var(--lev-ink);
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* Quando preceduta da .pd-footer-strip */
.pd-footer-strip + .pd-cta {
  border-top: none;
  border-radius: 0 0 10px 10px;
}

.pd-cta::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--lev-legno);
  opacity: .08;
  pointer-events: none;
}

.pd-cta-text {
  position: relative;
  z-index: 1;
}

.pd-cta-text p {
  margin: 0 0 4px;
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--lev-ink);
}

.pd-cta-text span {
  font-size: 12.5px;
  color: var(--lev-marrone);
}

.pd-cta-btn {
  display: inline-block;
  background: var(--lev-bordeaux);
  color: var(--lev-cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 13px 26px;
  border-radius: 6px;
  transition: background .2s, box-shadow .2s;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  border: none;
  cursor: pointer;
}

.pd-cta-btn:hover {
  background: var(--lev-bordeaux-deep);
  box-shadow: 0 4px 14px rgba(112, 48, 77, .28);
  color: var(--lev-cream);
  text-decoration: none;
}


/* ============================================================
   STELLE RECENSIONE (oro/legno)
============================================================ */
.pd-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.pd-stars-row {
  display: flex;
  gap: 2px;
}

.pd-stars-row svg {
  width: 14px;
  height: 14px;
}

.pd-stars-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--lev-ink);
}

.pd-stars-label {
  font-size: 12px;
  color: var(--lev-muted);
}


/* ============================================================
   RESPONSIVE — mobile
============================================================ */
@media (max-width: 600px) {

  .pd-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-features.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .pd-features.cols-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .pd-strengths ul {
    grid-template-columns: 1fr;
  }

  .pd-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .pd-cta-btn {
    width: 100%;
    text-align: center;
  }

  .pd-table {
    font-size: 12.5px;
  }

  .pd-table td {
    padding: 8px 12px;
  }

  .pd-expert {
    padding: 18px 20px;
  }

  .pd-section-title {
    font-size: 17px;
  }
}

@media (max-width: 400px) {
  .pd-features,
  .pd-features.cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}