:root{
  --gold:#c7a347;
  --ink:#222;
  --paper:#f7f4ef;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Playfair Display', serif;color:var(--ink);background:var(--paper);}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.narrow{max-width:800px}
.site-header{background:var(--white);border-bottom:1px solid rgba(0,0,0,.06);position:sticky;top:0;z-index:100;}
.header-flex{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{height:70px;width:auto}
.whatsapp-info{text-align:center;font-size:14px;color:var(--ink);}
.whatsapp-info p{font-style:italic;font-size:15px;color:var(--ink);margin-bottom:3px;}
.whatsapp-info a{color:var(--gold);font-weight:600;text-decoration:none;transition:color 0.3s ease;}
.whatsapp-info a:hover{color:#000}
.nav a{font-size:18px;text-decoration:none;color:var(--ink);margin-left:22px;position:relative;padding-bottom:6px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s ease}
.nav a:hover{color:#000}
.nav a:hover::after{width:100%}
.hero{background:linear-gradient(180deg, var(--white), var(--paper));padding:40px 0 20px}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:30px}
.hero-image{border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);}
.hero-image img{width:100%;height:auto;object-fit:contain;display:block;}
.hero-text h1{font-size:48px;line-height:1.1;color:var(--ink);letter-spacing:.5px;margin-bottom:10px}
.subtitle{font-size:20px;color:#555}
.hero-quote{font-family:'Great Vibes', cursive;font-size:28px;color:var(--gold);margin-top:20px;text-align:left;line-height:1.4;}
.section{padding:70px 0}
.section h2{font-family:'Great Vibes', cursive;font-size:46px;color:var(--ink);text-align:center;margin-bottom:16px}
.section h2::after{content:"";display:block;width:120px;height:2px;background:var(--gold);margin:14px auto 0}
.about p{font-size:20px;line-height:1.9;text-align:center;color:#333;margin:0 auto}
.gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.gallery-item{text-align:center;overflow:hidden}
.gallery-item img{border-radius:12px;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 20px rgba(0,0,0,.05);transition:transform 0.4s ease}
.gallery-item img:hover{transform:scale(1.08)}
.contact{background:var(--white);border-top:1px solid rgba(0,0,0,.06)}
.contact .contact-list{list-style:none;text-align:center;margin:10px 0 18px 0}
.contact .contact-list li{font-size:18px;line-height:2;color:#333}
.contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.contact a:hover{border-color:var(--gold)}
.social{display:flex;justify-content:center;align-items:center;gap:10px;color:#777;margin-bottom:16px}
.social a{color:var(--ink);text-decoration:none}
.dot{color:var(--gold);}
.copyright{text-align:center;color:#777;font-size:14px}
@media (max-width: 768px){.whatsapp-info{display:none}}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}.hero-text{text-align:center}.hero-text h1{font-size:40px}.hero-quote{text-align:center}.gallery .grid{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){.nav{display:none}.gallery .grid{grid-template-columns:1fr}}


.gallery {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 40px 0;
}

.gallery-item {
  text-align: center;
}

.gallery-item img {
  max-width: 250px;
  height: auto;
  border-radius: 4px;
}

.gallery-item p {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  text-transform: capitalize;
}


@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .gallery-item img {
    max-width: 80%;
  }

  .gallery-item p {
    font-size: 1.1rem;
  }
}


.gallery-item img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


.gallery-item p {
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.gallery-item p:hover {
  color: #b8860b; /* colore oro elegante */
  text-decoration: underline;
}


.product-page {
  text-align: center;
  padding: 60px 20px;
}

.product-page h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.product-page p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto 30px;
  color: #555;
}

.back-link {
  display: inline-block;
  text-decoration: none;
  color: #b8860b;
  font-weight: 500;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: #333;
}


.product-image {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}


.cta-button {
  display: inline-block;
  background-color: #b8860b;
  color: #fff;
  padding: 12px 24px;
  margin-top: 20px;
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: #8b6508;
  transform: scale(1.05);
}


.contact-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.contact-page h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.contact-page p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 20px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}

.contact-form button {
  background-color: #b8860b;
  color: white;
  padding: 12px;
  font-size: 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #8b6508;
}

.contact-info p {
  margin: 5px 0;
  color: #333;
}


.map-container {
  margin-top: 30px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}


.directions-link {
  text-align: center;
  margin-top: 15px;
}

.directions-link a {
  text-decoration: none;
  color: #b8860b;
  font-weight: 600;
  transition: color 0.3s ease;
}

.directions-link a:hover {
  color: #333;
}


.header-icons {
  position: absolute;
  top: 20px;
  right: 20px;
}

.contact-icon {
  font-size: 1.8rem;
  text-decoration: none;
  color: #b8860b;
  transition: color 0.3s ease, transform 0.2s ease;
}

.contact-icon:hover {
  color: #333;
  transform: scale(1.2);
}
header {
  position: relative;
}


.home-icon {
  font-size: 1.8rem;
  text-decoration: none;
  color: #b8860b;
  margin-right: 15px;
  transition: color 0.3s ease, transform 0.2s ease;
}

.home-icon:hover {
  color: #333;
  transform: scale(1.2);
}