/* =================================================
   DUETTI FINDER – XD MODE
   Obiettivo: look & spacing simili all'XD
   NOTE:
   - Layout principale: flex (Elementor-safe)
   - Risultati: flex-wrap (Elementor-safe)
   ================================================= */

/* --- Base reset / anti-theme --- */
.duetti-finder,
.duetti-finder *{
  box-sizing:border-box;
}

/* ===== LAYOUT GENERALE ===== */
.duetti-finder{
  display:flex !important;
  gap:70px;                 /* più aria come XD */
  align-items:flex-start;
  width:100%;
  max-width:100%;
  margin-top:20px;
}

/* Colonna filtri (fissa) */
.duetti-finder-left{
  flex:0 0 420px;           /* colonna sinistra più larga come XD */
  max-width:420px;
}

/* Colonna risultati (fluida) */
.duetti-finder-right{
  flex:1 1 auto;
  width:100%;
  max-width:100%;
  min-width:0;
}

/* ===== STEP UI (numeri grandi, leggeri) ===== */
.duetti-filter-block{
  margin:0 0 34px;
}

.duetti-step{
  font-size:72px;
  font-weight:300;
  opacity:.12;
  line-height:1;
  margin:0 0 8px;
}

.duetti-filter-title{
  font-weight:600;
  font-size:14px;
  margin:0 0 10px;
  color:#111;
}

/* ===== SELECT (stile XD: pulito, bordo leggero) ===== */
.duetti-finder select{
  width:100%;
  height:42px;
  padding:0 12px;
  border:1px solid #e6e6e6;
  border-radius:4px;
  background:#fff;
  font-size:14px;
  outline:none;
}

/* ===== CHECKBOX GRID (stile “tabella” come XD) ===== */
.duetti-checkbox-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px 18px;
  padding:10px 10px;
  border:1px solid #efefef;
  border-radius:6px;
  background:#fff;
}

.duetti-checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#222;
}

.duetti-checkbox input{
  width:14px;
  height:14px;
  accent-color:#6bb63f; /* verde Duetti */
}

/* ===== RESETTA FILTRI (link con X come XD) ===== */
.duetti-reset{
  margin-top:6px;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  font-size:12px;
  color:#222;
  opacity:.85;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.duetti-reset:before{
  content:"×";
  font-size:22px;
  line-height:1;
  opacity:.6;
}

/* ===== HEAD RISULTATI ===== */
.duetti-results-head{
  margin:6px 0 18px;
}

.duetti-count{
  font-size:12px;
  color:#333;
  opacity:.9;
}

/* ===== RISULTATI (layout card come XD) ===== */
.duetti-results{
  display:flex !important;
  flex-wrap:wrap;
  gap:34px;
  width:100%;
  min-width:0;
  align-items:stretch;
}

/* Card: in XD sono più “piccole” e ariose */
.duetti-card{
  flex:0 0 calc(33.333% - 23px);
  max-width:calc(33.333% - 23px);
  border:1px solid #efefef;
  border-radius:10px;
  background:#fff;
  padding:18px;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 0 rgba(0,0,0,0); /* niente ombra */
}

/* immagine: più contenuta, molto bianco */
.duetti-card-img{
  width:100%;
  height:190px;            /* controlla altezza come XD */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  overflow:hidden;
}

.duetti-card-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

/* titolo: più “sobrio” come XD */
.duetti-card-title{
  font-size:14px;
  font-weight:600;
  margin:0 0 12px;
  line-height:1.35;
  color:#111;

  /* evita rotture strane */
  writing-mode:horizontal-tb !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}

/* CTA in basso */
.duetti-card-cta{
  margin-top:auto;
}

/* bottone come XD: pill piccola */
.duetti-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  font-size:11px;
  border:1px solid #dcdcdc;
  border-radius:999px;
  text-decoration:none;
  color:#333;
  background:#fff;
  white-space:nowrap;
}

/* hover leggero */
.duetti-btn:hover{
  border-color:#cfcfcf;
}

/* ===== LOAD MORE ===== */
.duetti-more-wrap{
  margin-top:26px;
  text-align:center;
}

.duetti-more{
  padding:10px 18px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1200px){
  .duetti-finder{gap:50px}
  .duetti-finder-left{flex-basis:380px;max-width:380px}
  .duetti-card{flex-basis:calc(50% - 17px);max-width:calc(50% - 17px)}
}

@media (max-width:900px){
  .duetti-finder{flex-direction:column}
  .duetti-finder-left{max-width:100%;flex-basis:auto}
  .duetti-card{flex-basis:calc(50% - 17px);max-width:calc(50% - 17px)}
  .duetti-checkbox-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .duetti-card{flex-basis:100%;max-width:100%}
  .duetti-checkbox-grid{grid-template-columns:1fr}
}

/* ===== OVERRIDE mirato per Elementor (solo finder) ===== */
.elementor .elementor-widget-container .duetti-finder{display:flex !important;}
.elementor .elementor-widget-container .duetti-results{display:flex !important;}

/* =================================================
   XD PIXEL MATCH OVERRIDES (incolla in fondo)
   ================================================= */

/* --- Griglia risultati: 3 colonne sempre, allineata a sinistra --- */
.duetti-results{
  justify-content:flex-start;   /* non centrare mai */
  align-items:flex-start;       /* come XD */
}

/* --- Card: rettangolare + ombra (come XD) --- */
.duetti-card{
  border:1px solid #f0f0f0;     /* bordo leggerissimo */
  border-radius:6px;           /* più rettangolare */
  background:#fff;
  padding:22px;                /* più “aria” come XD */
  box-shadow:0 10px 24px rgba(0,0,0,.08); /* ombra evidente XD */
  transition:box-shadow .2s ease, transform .2s ease;
}

/* hover molto soft (opzionale, ma coerente) */
.duetti-card:hover{
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  transform:translateY(-1px);
}

/* --- Immagine: dimensione e resa come XD --- */
.duetti-card-img{
  height:210px;                /* un filo più alta (XD) */
  margin-bottom:16px;
}

/* la macchina in XD ha un “stacco” (ombra sotto) */
.duetti-card-img img{
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.10));
}

/* --- Titolo: dimensione e peso come XD --- */
.duetti-card-title{
  font-size:15px;
  font-weight:600;
  margin:0 0 14px;
}

/* --- CTA: bottone in basso a DESTRA come XD --- */
.duetti-card-cta{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
}

/* bottone: più piccolo, pulito, “capsule” XD */
.duetti-btn{
  padding:6px 12px;
  font-size:10px;
  letter-spacing:.02em;
  border:1px solid #cfcfcf;
  color:#333;
  background:#fff;
}

/* aggiungi freccina a destra (come XD) */
.duetti-btn:after{
  content:"›";
  font-size:14px;
  line-height:1;
  margin-left:8px;
  color:#7dbd47; /* verde XD */
  transform:translateY(-.5px);
}

/* --- Box tipologie: più “tabella” come XD --- */
.duetti-checkbox-grid{
  padding:14px 14px;
  border:1px solid #e8e8e8;
  border-radius:4px;
  background:#fff;
}

/* checkbox: quadratino più “XD” */
.duetti-checkbox input{
  width:14px;
  height:14px;
  border-radius:2px;
}

/* --- Select: look più simile + freccia verde --- */
.duetti-finder select{
  border-radius:4px;
  border:1px solid #e6e6e6;
  padding-right:38px; /* spazio freccia */
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%237dbd47' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}

/* --- Reset: più “da XD” (spazio e stile) --- */
.duetti-reset{
  margin-top:18px;
  font-weight:600;
  opacity:.9;
}

/* --- Count: in XD è quasi invisibile. Lo rendiamo minimale --- */
.duetti-results-head{
  margin:0 0 18px;
}
.duetti-count{
  font-size:12px;
  color:#222;
  opacity:.65;
}

/* =================================================
   IMPORTANT: 1 risultato deve restare 1/3 (NO override only-child)
   Se hai regole :only-child, eliminale.
   ================================================= */
   
/* =================================================
   FIX FINALI: singola card, altezze uniformi, immagine “pulita”
   Incolla in FONDO al file
   ================================================= */

/* 1) La colonna destra NON deve mai collassare (causa card strettissima) */
.duetti-finder-right{
  min-width: 0 !important;
  flex: 1 1 0% !important; /* chiave: evita shrink strani */
}

/* 2) Risultati: impedisci shrink e mantieni 3 colonne “reali” */
.duetti-results{
  justify-content:flex-start !important;
  align-items:stretch !important;
}

/* 3) CARD: non deve MAI stringersi sotto la sua width calcolata */
.duetti-card{
  flex: 0 0 calc(33.333% - 23px) !important;
  max-width: calc(33.333% - 23px) !important;
  min-width: 260px; /* evita “stecchino” quando rimane 1 sola */
}

/* responsive coerente con le tue regole */
@media (max-width:1200px){
  .duetti-card{
    flex:0 0 calc(50% - 17px) !important;
    max-width:calc(50% - 17px) !important;
    min-width: 260px;
  }
}
@media (max-width:640px){
  .duetti-card{
    flex:0 0 100% !important;
    max-width:100% !important;
    min-width: 0;
  }
}

/* 4) Altezza uniforme: tutte le card identiche */
.duetti-card{
  height: 360px;            /* regola: tutte uguali (tarabile) */
  display:flex;
  flex-direction:column;
}

/* 5) Titolo: massimo 2 righe e poi ellissi (non cambia altezza) */
.duetti-card-title{
  min-height: 44px;         /* “riserva” 2 righe */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 6) Area immagine: “plate” bianco + padding per evitare bordi/grigi visibili */
.duetti-card-img{
  background:#fff;          /* plate bianco */
  border-radius:4px;
  padding:10px;
  height:220px;             /* uniforme */
  margin-bottom:14px;
}

/* 7) Immagine: niente drop-shadow (crea grigio/bordi “sporchi”), usa stacco leggero del contenitore */
.duetti-card-img img{
  filter:none !important;
}

/* se vuoi comunque lo “stacco” come XD, mettilo sul box, non sull’immagine */
.duetti-card-img{
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* 8) CTA sempre in basso e coerente */
.duetti-card-cta{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
}

/* NO ombra su immagine */
.duetti-card-img{
  box-shadow: none !important;
  background: #fff !important;   /* stesso bianco della card */
}

.duetti-card-img img{
  filter: none !important;
}

/* Card bianca pulita (resta l’ombra della card, se la vuoi) */
.duetti-card{
  background:#fff !important;
}

/* =================================================
   DUETTI FINDER – MOBILE OPTIMIZATION ONLY
   Obiettivo:
   - Layout compatto
   - 1 colonna pulita
   - Card leggere
   - Filtri leggibili
   ================================================= */

@media (max-width: 640px){

  /* ===== Layout generale ===== */
  .duetti-finder{
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 12px;
  }

  .duetti-finder-left,
  .duetti-finder-right{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ===== Step numeri ===== */
  .duetti-step{
    font-size: 52px;
    margin-bottom: 4px;
  }

  .duetti-filter-block{
    margin-bottom: 22px;
  }

  .duetti-filter-title{
    font-size: 14px;
  }

  /* ===== Select ===== */
  .duetti-finder select{
    height: 40px;
    font-size: 14px;
  }

  /* ===== Checkbox grid ===== */
  .duetti-checkbox-grid{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .duetti-checkbox{
    font-size: 13px;
  }

  /* ===== Reset ===== */
  .duetti-reset{
    margin-top: 12px;
    font-size: 12px;
  }

  /* ===== Risultati ===== */
  .duetti-results{
    gap: 20px;
  }

  /* ===== Card ===== */
  .duetti-card{
    flex-basis: 100%;
    max-width: 100%;
    padding: 16px;
    border-radius: 6px;
  }

  .duetti-card-img{
    height: 180px;
    margin-bottom: 12px;
  }

  .duetti-card-title{
    font-size: 14px;
    margin-bottom: 10px;
  }

  /* CTA sempre visibile */
  .duetti-card-cta{
    justify-content: flex-end;
  }

  .duetti-btn{
    font-size: 11px;
    padding: 7px 12px;
  }

  /* ===== Load more ===== */
  .duetti-more-wrap{
    margin-top: 18px;
  }

  .duetti-more{
    width: 100%;
    max-width: 320px;
    padding: 12px;
    font-size: 13px;
  }
}