:root {
  --primary: #ffcc00;
  --primary-dark: #e6b800;
  --secondary: #333333;
  --accent-cool: #83b5bf;
  --background-light: #f8f8f8;
  --background-warm: #f8f1d8;
  --text: #222222;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; background-color: var(--background-light); color: var(--text); overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: color 0.3s; }
a:hover { color: var(--primary); }

/* Header */
header { position: relative; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; background-color: var(--background-light); z-index:1001; }
header h1 { font-family:'Playfair Display', serif; color: var(--primary); font-size:1.8rem; }
nav.desktop-menu { display:flex; gap:1.5rem; }
nav.desktop-menu a { font-weight:600; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; justify-content:space-between; width:30px; height:22px; cursor:pointer; z-index:1002; }
.hamburger span { display:block; height:3px; background: var(--primary); border-radius:3px; transition: all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-menu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:var(--background-warm); flex-direction:column; justify-content:center; align-items:center; z-index:1000; transform:translateY(-100%); transition:transform 0.4s ease; }
.mobile-menu.active { transform:translateY(0); display:flex; }
.mobile-menu a { font-size:1.5rem; margin:1rem 0; font-weight:600; }

/* Hero Slider */
.hero { position:relative; height:500px; display:flex; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.hero-slide { position:absolute; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease-in-out; }
.hero-slide.active { opacity:1; }
.hero-content { position:relative; z-index:2; color: var(--secondary); }
.hero-content h2 { font-family:'Playfair Display', serif; font-size:3rem; margin-bottom:1rem; color: var(--primary); }
.hero-content p { font-size:1.2rem; margin-bottom:2rem; }
.btn { padding:0.5rem 1rem; border-radius:6px; font-weight:bold; cursor:pointer; transition: all 0.3s ease; }
.btn-primary { background-color:var(--primary); color: var(--secondary); border:none; }
.btn-primary:hover { background-color:var(--primary-dark); transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.2); }
.btn-outline { background-color:transparent; border:2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background-color:var(--primary); color:var(--secondary); transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.2); }

.leaf-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:3; }

.leaf {
  position:absolute;
  font-size:25px;       /* dimensione della foglia */
  animation: float linear infinite;
  z-index:3;
  pointer-events:none;
}

@keyframes float {
  0% { transform: translateY(-50px) rotate(0deg); opacity:0; }
  20% { opacity:1; }
  100% { transform: translateY(550px) rotate(360deg); opacity:0; }
}

/* Sections */
section { padding:4rem 2rem; }
.section-title { text-align:center; font-family:'Playfair Display', serif; color: var(--secondary); margin-bottom:2rem; font-size:2rem; position:relative; }
.section-title::after { content:""; display:block; width:60px; height:3px; background-color:var(--primary); margin:0.5rem auto 0; border-radius:2px; }
.categories, .products, .testimonials { display:grid; gap:1.5rem; }
.categories { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.products { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.testimonials { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }

.card { background: var(--giallo-pale); padding:1rem; border-radius:10px; text-align:center; box-shadow:2px 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; cursor:pointer; }
.card:hover { transform:translateY(-5px) rotate(-0.5deg); box-shadow:4px 8px 16px rgba(0,0,0,0.2); background-color:#fff9e6; }
.card img { width:100%; border-radius:8px; margin-bottom:1rem; transition: transform 0.3s; }
.card:hover img { transform:scale(1.05); }
.badge { display:inline-block; padding:0.25rem 0.5rem; background-color: var(--primary); color: var(--secondary); border-radius:4px; font-weight:bold; margin-bottom:0.5rem; font-size:0.9rem; transition: transform 0.3s; }
.card:hover .badge { transform:scale(1.1); }

.cta-section { background-color:var(--accent-cool); text-align:center; padding:3rem 2rem; border-radius:10px; color:#f8f8f8; position:relative; overflow:hidden; }
.cta-section::after { content:""; position:absolute; top:-50px; left:-50px; width:200px; height:200px; background:rgba(255,255,255,0.1); border-radius:50%; animation:pulse 6s infinite ease-in-out; }
.category-name {
  max-width: 100%;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-link {
  position: relative;
  display: inline-block;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #c00;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.cart-badge.hidden {
  display: none;
}

@keyframes pulse { 0% { transform:scale(0.8); opacity:0.1;} 50% { transform:scale(1.2); opacity:0.2;} 100% { transform:scale(0.8); opacity:0.1;} }

footer { background-color:var(--secondary); color: var(--background-warm); padding:2rem; text-align:center; }

@media(max-width:768px){
  .hero-content h2 { font-size:2rem; }
  .hero-content p { font-size:1rem; }
  nav.desktop-menu { display:none; }
  .hamburger { display:flex; }
}