/* =========================================================
   RICCI 1895 — Home page (mockup)
   Font: Marcellus (titoli) + DM Sans (testo)
========================================================= */

:root {
  --ric-cream:        #F8F2ED;  /* sfondo sezione "Il nostro Olio" */
  --ric-green:        #829067;  /* sezione "I nostri valori" */
  --ric-green-soft:   #8C9A73;
  --ric-brown:        #3C3334;  /* sezioni prodotto scure */
  --ric-dark:         #2B2724;  /* testo principale */
  --ric-muted:        #6F6A66;  /* testo secondario */
  --ric-orange:       #C2693C;  /* accento (email, badge) */
  --ric-gold:         #B89B6E;  /* dettagli decorativi */
  --ric-line:         #E3DCD2;  /* bordi chiari */

  --font-head: 'Marcellus', serif;
  --font-body: 'DM Sans', sans-serif;
}

/* ---------- Base ---------- */
.ric-home {
  font-family: var(--font-body);
  color: var(--ric-dark);
  background: #fff;
}
.ric-home h1, .ric-home h2, .ric-home h3,
.ric-home .font-head { font-family: var(--font-head); font-weight: 400; }

.ric-section { padding: 90px 0; }
.ric-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* =========================================================
   NAVBAR
========================================================= */
.ric-navbar.navbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1050;
  min-height: 0;
  background: #fff;
  border-bottom: 0/*1px solid var(--ric-line)*/;
  padding: 14px 0;
}
.ric-logo { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.ric-logo-name {
  font-family: var(--font-head);
  font-size: 1.7rem;
  letter-spacing: .14em;
  color: var(--ric-dark);
}
.ric-logo-year {
  font-family: var(--font-body);
  font-size: .62rem;
  letter-spacing: .42em;
  color: var(--ric-muted);
  text-align: center;
  margin-top: 2px;
}
.ric-nav .nav-link {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ric-dark);
  padding: .5rem .9rem;
  position: relative;
}
.ric-nav .nav-link:hover { color: var(--ric-orange); }
.ric-nav .nav-link.active { color: var(--ric-orange); }
.ric-nav .nav-link.active::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .15rem;
  height: 1px; background: var(--ric-orange);
}
.ric-cart { color: var(--ric-dark); font-size: 1.25rem; text-decoration: none; }
.ric-cart:hover { color: var(--ric-orange); }
.ric-cart-badge {
  position: absolute; top: -6px; right: -10px;
  background: var(--ric-orange); color: #fff;
  font-family: var(--font-body); font-size: .62rem; font-weight: 600;
  min-width: 17px; height: 17px; line-height: 17px;
  border-radius: 50%; text-align: center; padding: 0 4px;
}

/* =========================================================
   HERO
========================================================= */
.ric-hero { text-align: center; padding: 80px 0 56px; }
.ric-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--ric-dark);
  margin-bottom: 1.1rem;
}
.ric-hero p {
  color: var(--ric-muted);
  letter-spacing: .03em;
  font-size: 1.02rem;
  margin: 0;
}
.ric-hero-img { width: 100%; height: clamp(280px, 38vw, 520px); }

/* =========================================================
   PLACEHOLDER IMMAGINI
========================================================= */
.img-placeholder {
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .5rem;
  background:
    repeating-linear-gradient(45deg, #00000005 0 12px, #0000000a 12px 24px),
    #eceae6;
  color: #9a948c;
  border: 1px dashed #c9c2b8;
  font-family: var(--font-body);
  font-size: .8rem; letter-spacing: .05em; text-align: center;
}
.img-placeholder i { font-size: 1.8rem; opacity: .6; }
.img-placeholder.on-dark {
  background:
    repeating-linear-gradient(45deg, #ffffff08 0 12px, #ffffff12 12px 24px),
    #4a4142;
  border-color: #6a5f60; color: #b8aeac;
}

/* =========================================================
   BOTTONI
========================================================= */
.ric-home .btn-ric {
  font-family: var(--font-body);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .8rem 1.7rem; border-radius: 0; border: 1px solid transparent;
  transition: all .25s ease; text-decoration: none; display: inline-block;
}
.btn-ric-dark         { background: var(--ric-dark); color: #fff; border-color: var(--ric-dark); }
.btn-ric-dark:hover   { background: #000; color: #fff; }
.btn-ric-outline-dark { background: transparent; color: var(--ric-dark); border-color: var(--ric-dark); }
.btn-ric-outline-dark:hover { background: var(--ric-dark); color: #fff; }
.btn-ric-light        { background: #fff; color: var(--ric-dark); border-color: #fff; }
.btn-ric-light:hover  { background: var(--ric-cream); }
.btn-ric-outline-light{ background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ric-outline-light:hover { background: #fff; color: var(--ric-dark); }

/* =========================================================
   SEZIONE "IL NOSTRO OLIO"
========================================================= */
.sec-olio { background: var(--ric-cream); }
.sec-olio h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1.4rem; }
.sec-olio p  { color: var(--ric-muted); line-height: 1.8; margin-bottom: 2rem; }

.olio-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.olio-arc {
  position: absolute; border: 1px solid var(--ric-gold); border-radius: 50%;
  opacity: .55;
}
.olio-arc.a1 { width: 360px; height: 360px; left: -40px; }
.olio-arc.a2 { width: 460px; height: 460px; left: -90px; }
.olio-circle {
  position: relative; z-index: 2;
  width: 330px; height: 330px; max-width: 80vw; max-height: 80vw;
  border-radius: 50%; background: var(--ric-brown);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.olio-circle .img-placeholder { height: 100%; border: none; background: transparent; color: #b8aeac; }

/* =========================================================
   SEZIONE "I NOSTRI VALORI"
========================================================= */
.sec-valori { background: var(--ric-green); color: #fff; text-align: center; }
.sec-valori h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin-bottom: 3.2rem; }
.valore { padding: 0 1rem; }
.valore-icon {
  width: 120px; height: 120px; margin: 0 auto 1.6rem;
  border-radius: 50%; background: var(--ric-cream);
  border: 1px solid rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  color: var(--ric-green); font-size: 2.4rem;
}
.valore h3 { font-size: 1.35rem; color: #fff; margin-bottom: .9rem; }
.valore p  { font-size: .9rem; color: rgba(255,255,255,.82); line-height: 1.7; max-width: 280px; margin: 0 auto; }

/* =========================================================
   SEZIONI PRODOTTO (CIPPO 50 / ARMONIA)
========================================================= */
.sec-prodotto { background: var(--ric-brown); color: #fff; }
.prodotto-media { min-height: 460px; }
.prodotto-media .img-placeholder { height: 100%; min-height: 460px; }
.prodotto-body { padding: 70px clamp(24px, 6vw, 90px); }
.prodotto-body h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: .04em; color: #fff; margin-bottom: .4rem;
}
.prodotto-body .sottotitolo { font-family: var(--font-head); font-size: 1.3rem; color: rgba(255,255,255,.92); margin-bottom: 1.6rem; }
.prodotto-body .descr { color: rgba(255,255,255,.8); line-height: 1.7; margin-bottom: 1.4rem; }
.prodotto-body .formati-label { color: rgba(255,255,255,.8); margin-bottom: .2rem; }
.prodotto-body .formati { color: #fff; letter-spacing: .06em; margin-bottom: 2.2rem; }
.prodotto-body .btn-group-ric { display: flex; gap: 1rem; flex-wrap: wrap; }

/* =========================================================
   SEZIONE "CANALI DI ACQUISTO"
========================================================= */
.sec-canali { text-align: center; }
.sec-canali h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 2.6rem; }
.canali-box {
  border: 1px solid var(--ric-line); border-radius: 4px;
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  color: #b3aca3; font-size: .85rem; letter-spacing: .05em;
}

/* =========================================================
   FOOTER
========================================================= */
.ric-footer { padding: 70px 0 30px; background: #fff; font-family: var(--font-body); }
.ric-footer h5 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; margin-bottom: 1.4rem; color: var(--ric-dark); }
.ric-footer .footer-email { color: var(--ric-orange); font-size: 1.25rem; text-decoration: none; }
.ric-footer .footer-email:hover { text-decoration: underline; }
.ric-footer ul { list-style: none; padding: 0; margin: 0; }
.ric-footer ul li { margin-bottom: .7rem; }
.ric-footer ul li a { color: var(--ric-muted); text-decoration: none; position: relative; padding-left: 18px; }
.ric-footer ul li a::before { content: "•"; color: var(--ric-orange); position: absolute; left: 0; }
.ric-footer ul li a:hover { color: var(--ric-orange); }
.ric-footer .social a { color: var(--ric-dark); font-size: 1.2rem; margin-right: 1rem; }
.ric-footer .social a:hover { color: var(--ric-orange); }
.ric-footer-bottom { display: flex; align-items: center; gap: 1.5rem; margin-top: 60px; }
.ric-footer-bottom .line { flex: 1; height: 1px; background: var(--ric-line); }
.ric-footer-bottom .copy { color: var(--ric-muted); font-size: .82rem; white-space: nowrap; }
.ric-footer-logo .ric-logo-name { font-size: 1.2rem; }
.ric-footer-logo .ric-logo-year { font-size: .5rem; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
  .ric-section { padding: 60px 0; }
  .ric-nav { padding: 1rem 0; }
  .olio-visual { min-height: 360px; margin-bottom: 2rem; }
  .prodotto-body { padding: 48px 28px; text-align: center; }
  .prodotto-body .btn-group-ric { justify-content: center; }
  .prodotto-media .img-placeholder { min-height: 320px; }
  .ric-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* =========================================================
   OVERRIDE TEMA LEGACY (navbar fissa + footer, valido su tutte le pagine)
   Neutralizza le vecchie regole di layout.css / responsive.css.
========================================================= */
body { padding-top: 76px; }                 /* spazio per la navbar fissa (~70px) */

.ric-navbar.navbar.scrolled {               /* annulla il restringimento legacy allo scroll */
  background: #fff;
  padding: 14px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

@media (max-width: 599.98px) {
  /* il vecchio tema forzava flex-wrap:nowrap sulla navbar: lo riattiviamo
     così il menu mobile può scendere sotto al toggler */
  .ric-navbar .container,
  .ric-navbar .navbar-collapse { flex-wrap: wrap !important; }
}