/* ============  PALETTE  ============ */
:root{
  --ec-bg:#fff;
  --ec-text:#000;
  --ec-dark:#111;
}

/* ============  BASE  ============ */
body{
  margin:0;
  overflow-x:hidden;                  /* blocca scroll orizz.   */
  background:var(--ec-bg);
  color:var(--ec-text);
  font-family:system-ui,sans-serif;
}

.ec-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;background:var(--ec-dark);color:#fff;
  position:relative;z-index:1000;
}
.ec-logo a{color:#fff;font-weight:700;font-size:1.25rem;text-decoration:none;}
#ec-menu-toggle,#ec-menu-close{background:none;border:none;color:#fff;font-size:1.9rem;cursor:pointer;}

/* ===== OFF‑CANVAS MENU ===== */
.ec-overlay{
  position:fixed;inset:0;width:100vw;
  transform:translateX(100%);         /* nascosto di default    */
  background:var(--ec-dark);color:#fff;
  padding:40px 20px;box-sizing:border-box;
  opacity:0;pointer-events:none;z-index:999;
  transition:transform .35s ease,opacity .35s ease;
}
.ec-overlay.open{transform:none;opacity:1;pointer-events:auto;}
#ec-menu-close{display:none;position:absolute;top:22px;right:26px;}
.ec-overlay.open #ec-menu-close{display:block;}

.ec-nav ul{list-style:none;margin:100px 0 0;padding:0;text-align:center;}
.ec-nav li{margin:24px 0;}
.ec-nav a{font-size:1.7rem;color:#fff;text-decoration:none;}

/* ============  GRID  ============ */
.ec-grid{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  max-width:1400px;margin:0 auto;
  padding:35px 1.4rem 95px;           /* spazio barra carrello  */
  box-sizing:border-box;
}
@media(max-width:900px){ .ec-grid{grid-template-columns:repeat(2,1fr);} }

/* ============  CARD  ============ */
.ec-card{
  background:var(--ec-bg);
  border:1px solid #e0e0e0;border-radius:14px;
  padding:18px;display:flex;flex-direction:column;
  text-align:center;transition:transform .25s;
}
.ec-card:hover{transform:translateY(-6px);}

.ec-img-box{
  width:100%;flex:0 0 180px;          /* altezza costante img   */
  display:flex;justify-content:center;align-items:center;
}
.ec-img-box img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;}

.ec-card h3{font-size:1.03rem;margin:14px 0 6px;color:var(--ec-text);}
.ec-card p{font-size:.85rem;margin:0 0 16px;opacity:.85;}

/* blocco azioni – non serve wrapper extra                    */
.ec-qty{display:flex;justify-content:center;align-items:center;margin-bottom:14px;margin-top:auto;} /* ↑ spinge verso il fondo */
.ec-qty button{width:32px;height:32px;font-size:1.3rem;background:#000;border:none;color:#fff;border-radius:4px;cursor:pointer;}
.ec-qty input{width:72px;text-align:center;border:1px solid #bbb;margin:0 6px;padding:5px 0;font-weight:600;background:#fff;}

.ec-add{
  background:#000;color:#fff;border:none;width:100%;
  padding:10px 0;border-radius:28px;font-weight:700;cursor:pointer;
}

/* ============  BAR  ============ */
.ec-cart-bar{
  position:fixed;bottom:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:#000;color:#fff;border-top:1px solid #444;z-index:950;
}
.ec-cart-bar.hidden{display:none;}
.ec-cart-link{color:#fff;font-weight:700;text-decoration:none;padding-left:10px;}


/* ─── FIX barra carrello: link a sinistra + niente overflow ─── */
.ec-cart-bar{
  justify-content:flex-start;   /* totale + link partono da sinistra   */
  gap:30px;                     /* spazio fra tot e "Vai al carrello"  */
}
.ec-cart-link{
  white-space:nowrap;           /* evita che il testo vada a capo      */
}

/* ─── Evita scroll orizzontale sui telefoni ─── */
@media (max-width:480px){
  .ec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)); /* larghezza card auto */
    gap:1rem;                                       /* gap più piccolo    */
  }
}

/* prezzo in verde */
.ec-price{color:#28a745;font-weight:600;margin:0 0 8px;}

/* pulsante verde */
.ec-add{
  background:#28a745;
  color:#fff;
}
.ec-add:hover{filter:brightness(1.1);}

/* link barra carrello già verde */
.ec-cart-link{
  background:#28a745;
  color:#fff;
  padding:6px 12px;
  border-radius:4px;
  white-space:nowrap;
}

/* toast */
.ec-toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:#28a745;color:#fff;padding:10px 18px;border-radius:6px;
  font-weight:700;font-size:.9rem;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.ec-toast.show{opacity:1;}

/* modale */
.ec-modal.hidden{display:none;}
.ec-modal-back{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);
}
.ec-modal-box{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:340px;width:90%;background:#fff;color:#000;padding:26px;
  border-radius:12px;text-align:center;
}
.ec-modal-img{width:100%;height:auto;margin-bottom:14px;border-radius:8px;}
.ec-modal-close{
  position:absolute;top:8px;right:10px;border:none;background:none;
  font-size:1.6rem;cursor:pointer;
}

/* ====== CARRELLO PAGE ====== */
.ec-cart-wrap{max-width:900px;margin:0 auto;padding:40px 20px;box-sizing:border-box}

.ec-cart-title{text-align:center;margin:0 0 30px}

/* lista */
.ec-cart-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* singola riga */
.ec-ci{
  display:grid;
  grid-template-columns:120px 1fr 160px 110px; /* desktop */
  gap:20px;
  align-items:center;
  padding:16px 20px;
  border:1px solid #e0e0e0;
  border-radius:12px;
  box-sizing:border-box;
}

/* colonna immagine + delete */
.ec-ci-thumb{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ec-ci-thumb img{
  width:100px;
  height:auto;
  object-fit:contain;
}
.ec-ci-del{
  width:28px;
  height:28px;
  border:none;
  background:#f44336;
  color:#fff;
  border-radius:4px;
  cursor:pointer;
  font-size:1.2rem;
  line-height:1;
}

/* colonna info */
.ec-ci-info{text-align:left}
.ec-ci-name{margin:0 0 4px;font-size:1rem;font-weight:600}
.ec-ci-desc{margin:0;font-size:0.9rem;color:#555}

/* colonna quantità */
.ec-ci-qty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.ec-ci-qty button{
  width:32px;
  height:32px;
  border:none;
  background:#000;
  color:#fff;
  border-radius:4px;
  cursor:pointer;
  font-size:1.2rem;
  line-height:1;
}
.ec-ci-num{
  min-width:40px;
  text-align:center;
  font-weight:700;
}

/* colonna subtotale */
.ec-ci-sub{
  font-weight:700;
  text-align:right;
}

/* ---------- mobile ≤ 600px ---------- */
@media (max-width:600px){
  .ec-ci{
    display:block;              /* niente griglia, tutto impilato */
    padding:14px 14px 18px;
  }

  /* immagine full‑width con pulsante delete sovrapposto */
  .ec-ci-thumb{
    position:relative;
    margin:0 0 10px;
  }
  .ec-ci-thumb img{
    width:100%;
    max-width:240px;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 auto;
  }
  .ec-ci-del{
    position:absolute;
    top:6px;
    right:6px;
  }

  /* info */
  .ec-ci-info{
    margin-bottom:10px;
  }
  .ec-ci-name{
    font-size:1.05rem;
  }

  /* qty + prezzo nella stessa riga */
  .ec-ci-qty,
  .ec-ci-sub{
    display:inline-block;
    vertical-align:middle;
  }
  .ec-ci-qty{
    margin-right:18px;
  }
  .ec-ci-sub{
    font-size:1rem;
  }
}

/* ====== UPGRADE PAGINA UPSELL ====== */
.ec-upsell-wrap{
  background:#ffeb3b;
  min-height:100vh;
  padding:30px 20px 80px;      /* spazio anche per la barra fissa */
  box-sizing:border-box;
}

/* ====== CHECKOUT WIZARD ====== */
.ec-checkout-wrap{max-width:800px;margin:0 auto;padding:32px 20px;box-sizing:border-box}
.ec-hello{text-align:center;margin:0 0 26px;font-weight:700}

/* progress */
.ec-steps{display:flex;justify-content:center;gap:14px;margin:0 0 28px;padding:0;list-style:none}
.ec-steps li{width:12px;height:12px;border-radius:50%;background:#bdbdbd;transition:.2s}
.ec-steps li.current{background:#4caf50}
.ec-steps li.done{background:#000}

/* steps */
.ec-step{display:none}
.ec-step.active{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* colours */
.ec-btn{padding:14px 20px;font-size:1rem;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;width:100%;max-width:100%}
.ec-blue{background:#2196f3}
.ec-orange{background:#ff9800}
.ec-purple{background:#9c27b0}
.ec-green{background:#4caf50}
.ec-grey{background:#616161}
.ec-btn:disabled{opacity:.5;cursor:not-allowed}

/* groups */
.ec-btn-group{display:flex;flex-wrap:wrap;gap:16px}
.ec-btn-group .ec-btn{flex:1 1 calc(50% - 16px)}

/* slot & time */
.ec-slot,.ec-time{border:2px solid transparent;background:#eeeeee;color:#000;padding:12px 16px;border-radius:8px;cursor:pointer;min-width:130px;text-align:center;font-weight:600}
.ec-slot:hover,.ec-time:hover{background:#e0e0e0}
.ec-slot.active,.ec-time.active{border-color:#4caf50;background:#c8e6c9}

/* list containers */
.ec-slot-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}

/* nav */
.ec-nav{display:flex;justify-content:space-between;margin-top:30px}

/* review table */
.ec-table{width:100%;border-collapse:collapse;margin-top:14px}
.ec-table th,.ec-table td{border:1px solid #ddd;padding:6px;text-align:center}
.ec-table thead{background:#f5f5f5;font-weight:700}
.ec-table tfoot td{background:#fafafa;font-weight:700}

/* textarea */
#ec-requests{width:100%;padding:12px;border:1px solid #bbb;border-radius:6px;resize:vertical}




/* footer e CTA */
.ec-empty{text-align:center;color:#666;padding:40px 0}
.ec-cart-footer{text-align:right;font-weight:700;font-size:1.1rem;margin:26px 0}
.ec-cart-cta{display:flex;justify-content:space-between;gap:20px}
.ec-btn{background:#666;color:#fff;padding:10px 20px;border-radius:6px;text-decoration:none}
.ec-btn-primary{background:#28a745}
.ec-btn:hover{filter:brightness(1.1)}