/* COLORI DEL FORNO DI RED */
:root {
    --crema: #f8f0e3;
    --marrone: #68452f;
    --marrone-scuro: #39271d;
    --terracotta: #b86f4b;
    --bianco: #fffdf8;
}

/* IMPOSTAZIONI GENERALI */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--crema);
    color: var(--marrone-scuro);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
}

/* INTESTAZIONE */
header {
    background-color: var(--marrone);
    color: var(--bianco);
    text-align: center;
    padding: 45px 20px;
    border-bottom: 6px solid var(--terracotta);
}

header h1 {
    margin: 0;
    font-size: clamp(2.2rem, 6vw, 4rem);
    letter-spacing: 1px;
}

header p {
    margin-bottom: 0;
    font-size: 1.15rem;
    font-style: italic;
}

/* CONTENUTO PRINCIPALE */
main {
    max-width: 850px;
    margin: 40px auto;
    padding: 35px;
    background-color: var(--bianco);
    border-radius: 14px;
    box-shadow: 0 5px 20px #68452f18;
}

h2 {
    color: var(--marrone);
    margin-top: 25px;
}

main > h2:first-child {
    margin-top: 0;
}

/* PULSANTE */
button {
    background-color: var(--terracotta);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 22px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--marrone);
}

/* PIEDE DELLA PAGINA */
footer {
    text-align: center;
    padding: 20px;
    color: var(--marrone);
    font-size: 0.9rem;
}

/* SCHERMI PICCOLI */
@media (max-width: 600px) {
    main {
        margin: 20px 12px;
        padding: 22px;
    }

    header {
        padding: 32px 15px;
    }
}

/* CARRELLO */

.carrello {
  background-color: #fffaf2;
  border: 2px solid #d8b99a;
  border-radius: 16px;
  padding: 24px;
  margin: 40px auto;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(80, 50, 30, 0.08);
}

.carrello h2 {
  color: #70452f;
  margin-top: 0;
}

.riepilogo-carrello {
  border-top: 1px solid #d8b99a;
  margin-top: 20px;
  padding-top: 12px;
}

.riepilogo-carrello p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.totale-finale {
  color: #70452f;
  font-size: 1.25rem;
  font-weight: bold;
}

.avviso-consegna,
.avviso-ordini {
  background-color: #f3e5d5;
  padding: 12px;
  border-radius: 8px;
  line-height: 1.5;
}

#invia-whatsapp {
  width: 100%;
  padding: 15px;
  margin-top: 12px;
  background-color: #6b432e;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

#invia-whatsapp:hover {
  background-color: #4d2f20;
}

@media (max-width: 600px) {
  .carrello {
    padding: 16px;
    margin: 24px 8px;
  }
}

/* Pulsanti del carrello: dimensioni più eleganti */
.controlli-quantita {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

.controlli-quantita button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid #b96f4b;
  border-radius: 8px;
  background-color: #fff8f0;
  color: #75452f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.controlli-quantita button:hover {
  background-color: #ead2bf;
}

.controlli-quantita span {
  min-width: 16px;
  text-align: center;
  font-size: 15px;
}

.riga-carrello button:not(.controlli-quantita button) {
  padding: 7px 12px;
  border: none;
  border-radius: 7px;
  background-color: #b96f4b;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.riga-carrello {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* === BISCOTTINO MASCOTTE === */

.mascotte-forno {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fumetto-biscotto {
  background: #fff8ef;
  color: #74402a;
  border: 1px solid #dfb998;
  border-radius: 18px;
  padding: 10px 15px;
  font-size: 13px;
  box-shadow: 0 4px 12px #70402020;
  max-width: 180px;
  text-align: center;
}

.biscotto-personaggio {
  position: relative;
  display: block;
  width: 105px;
  height: 120px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  animation: salto-biscotto 2s ease-in-out infinite;
}

.corpo-biscotto {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 85px;
  height: 85px;
  border-radius: 45% 55% 48% 52%;
  background: #e8a55d;
  border: 4px solid #96532d;
  box-shadow: inset -7px -7px #d48b49;
  z-index: 2;
}

.goccia {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #89502f;
}

.goccia-1 { top: 13px; left: 16px; }
.goccia-2 { top: 11px; right: 15px; }
.goccia-3 { bottom: 14px; left: 12px; }
.goccia-4 { bottom: 13px; right: 12px; }

.occhio {
  position: absolute;
  top: 34px;
  width: 9px;
  height: 9px;
  background: #5d3526;
  border-radius: 50%;
}

.occhio-sinistro { left: 23px; }
.occhio-destro { right: 23px; }

.guancia {
  position: absolute;
  top: 46px;
  width: 14px;
  height: 8px;
  background: #e7857d;
  border-radius: 50%;
}

.guancia-sinistra { left: 12px; }
.guancia-destra { right: 12px; }

.sorriso {
  position: absolute;
  top: 42px;
  left: 35px;
  width: 13px;
  height: 14px;
  border-bottom: 3px solid #5d3526;
  border-radius: 50%;
}

.braccio {
  position: absolute;
  top: 49px;
  width: 32px;
  height: 6px;
  background: #96532d;
  border-radius: 10px;
}

.braccio-sinistro {
  left: -12px;
  transform: rotate(25deg);
}

.braccio-destro {
  right: -12px;
  transform: rotate(-25deg);
  transform-origin: left center;
  animation: saluto-biscotto 1.4s infinite;
}

.gamba {
  position: absolute;
  top: 85px;
  width: 6px;
  height: 29px;
  background: #96532d;
  border-radius: 8px;
}

.gamba-sinistra { left: 34px; }
.gamba-destra { right: 34px; }

@keyframes salto-biscotto {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes saluto-biscotto {
  0%, 100% { transform: rotate(-25deg); }
  50% { transform: rotate(-75deg); }
}

.biscotto-personaggio.reazione {
  animation: festa-biscotto 0.6s ease;
}

@keyframes festa-biscotto {
  0%, 100% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.15) rotate(-12deg); }
  70% { transform: scale(1.1) rotate(12deg); }
}

@media (max-width: 600px) {
  .mascotte-forno {
    right: 8px;
    bottom: 8px;
    transform: scale(0.8);
    transform-origin: bottom right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biscotto-personaggio,
  .braccio-destro,
  .biscotto-personaggio.reazione {
    animation: none;
  }
}

/* Cuoricini che volano da Biscottino */

.cuoricino-volante {
  position: absolute;
  bottom: 65px;
  left: 50%;
  font-size: 22px;
  pointer-events: none;
  z-index: 10;
  animation: vola-cuore 1.5s ease-out forwards;
}

@keyframes vola-cuore {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform:
      translate(
        calc(-50% + var(--spostamento)),
        -160px
      )
      rotate(25deg)
      scale(1.3);
    opacity: 0;
  }
}


/* === IL FORNO DI RED: MONDO KAWAII === */
:root { --rosa: #f8c9ce; --fragola: #e86c72; --panna: #fff9f0; --cioccolato: #693720; }
body { background: radial-gradient(circle at 12% 16%, #fffaf3 0 8%, transparent 18%), radial-gradient(circle at 88% 38%, #ffe1dc 0 6%, transparent 20%), #fff1e9; }
header { position:relative; overflow:hidden; background: linear-gradient(155deg,#fff1df,#f8c8c2); color:#693720; border-bottom:12px solid #fffaf3; padding:65px 20px 42px; }
header::after { content:"🍓  ♡  🧁  ♡  🍪  ♡  🍓"; display:block; font-size:26px; letter-spacing:10px; margin-top:15px; }
.decorazione-cioccolato { position:absolute; top:0; left:0; right:0; height:30px; background: #63351f; border-radius: 0 0 45% 45%; box-shadow: 0 8px 0 #9b5736; }
header h1 { font-size:clamp(2.2rem,6vw,4.4rem); text-shadow:2px 3px 0 #fffaf3; }
.sopratitolo { font-size:1.1rem; color:#aa5560; letter-spacing:2px; }
main { max-width:1120px; background:rgba(255,250,245,.95); border:4px solid #f6c3b6; border-radius:35px; box-shadow:0 15px 0 #f7d8cf, 0 24px 38px #9a503329; }
.benvenuto-main { text-align:center; padding:20px 10px; background: #ffeced; border-radius:28px; border:2px dashed #ec9da5; }
.benvenuto-main h2 { margin:5px 0; font-size:clamp(1.7rem,4vw,2.7rem); }
.emoji-decorativa { font-size:54px; display:inline-block; animation:salto-biscotto 2.5s infinite; }
.titolo-menu { text-align:center; font-size:2rem; margin:35px 0 18px; }
.sezione-catalogo { margin:35px 0; padding:22px 12px; border-radius:25px; background:linear-gradient(145deg,#fff9ef,#fff0ed); border:2px solid #f4d4c7; }
.sezione-catalogo h2 { margin:0 0 16px; }
.prodotti { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.prodotto { background:#fffdf8; border:2px solid #f2c9bd; border-radius:22px; padding:20px; box-shadow:0 6px 0 #f6ded4; transition:transform .2s; }
.prodotto:hover { transform:translateY(-5px); }
.prodotto h3 { margin:6px 0; color:#723b2a; }
.prodotto p { line-height:1.5; }
.dolcetto-faccina { font-size:35px; background:#ffedf0; border-radius:20px; display:inline-block; padding:5px 12px; }
.prezzo { font-weight:bold; color:#a94753; font-size:1.2rem; }
.prodotto select { width:100%; padding:9px; border-radius:12px; border:1px solid #e9b5a9; background:#fffaf5; margin-bottom:12px; }
.prodotto button, #invia-whatsapp { border-radius:50px; background:#db7378; color:white; box-shadow:0 4px 0 #b75a61; }
.prodotto button:hover, #invia-whatsapp:hover { background:#c95b67; }
.carrello { border:4px solid #f1b9b5; border-radius:30px; background:#fff9f5; box-shadow:0 10px 0 #f7ddd4; }
.carrello h2::before { content:"🍪 "; }
footer { padding:45px 15px; background:#f8cbd0; border-top:10px solid #fffaf2; margin-top:65px; }
.mascotte-forno { z-index:1001; }
.schermata-benvenuto { position:fixed; inset:0; z-index:5000; display:flex; align-items:flex-end; justify-content:center; background:#f4b5a9 url("red-benvenuto.jpg") center center / cover no-repeat; overflow:auto; transition:opacity .6s ease, visibility .6s ease; }
.schermata-benvenuto[hidden] { display:none; }
.schermata-benvenuto.benvenuto-chiuso { opacity:0; visibility:hidden; pointer-events:none; }
.benvenuto-overlay { width:min(90%,530px); margin:0 auto 5vh; text-align:center; padding:18px 20px 24px; background:#fff8eee8; border:5px solid #f8d3c1; border-radius:35px; box-shadow:0 10px 0 #87492e70; backdrop-filter:blur(5px); }
.benvenuto-overlay h2 { color:#6d3423; font-size:clamp(1.5rem,3vw,2.4rem); line-height:1.15; margin:8px 0; }
.benvenuto-overlay p { margin:8px 0 14px; line-height:1.35; }
.benvenuto-etichetta { color:#a84e58; font-weight:bold; }
#entra-nel-menu { background:#e36e78; border:3px solid #fff7ed; border-radius:40px; padding:15px 26px; font-weight:bold; box-shadow:0 5px 0 #a84e58; }
#entra-nel-menu:hover { background:#bf5765; }
@media(max-width:600px) { main { margin:18px 10px; padding:15px; } .sezione-catalogo { padding:12px 8px; } .schermata-benvenuto { background-position:50% 30%; } .benvenuto-overlay { margin-bottom:3vh; padding:12px; } }
@media(prefers-reduced-motion:reduce) { .schermata-benvenuto { transition:none; } .prodotto { transition:none; } }

/* Extra kawaii: decorazioni panna, personaggini e messaggi */
.nastrino-dolce { text-align:center; background:#fff7f1; color:#b65b65; padding:9px; font-size:1.3rem; letter-spacing:.35rem; border-bottom:6px dotted #f3b9c1; }
.amici-del-forno { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:28px 0; }
.amici-del-forno span { display:flex; flex-direction:column; align-items:center; justify-content:center; width:108px; min-height:98px; font-size:2.5rem; border-radius:48% 48% 22px 22px; border:3px solid #f3c2c6; background:linear-gradient(#fffaf4,#ffe3e9); box-shadow:0 5px 0 #f7ced3; animation:amici-dondolano 3.5s ease-in-out infinite; }
.amici-del-forno span:nth-child(even) { animation-delay:-1.5s; }
.amici-del-forno small { font-size:.76rem; color:#844a4b; font-weight:bold; }
@keyframes amici-dondolano { 0%,100% {transform:rotate(-3deg) translateY(0)} 50% {transform:rotate(3deg) translateY(-6px)} }
.dolcetto-faccina { position:relative; animation:amici-dondolano 3s ease-in-out infinite; border:2px solid #f5c6ce; box-shadow:inset 0 -4px #ffd4db; }
.sezione-catalogo { position:relative; border-top:12px solid #fff; box-shadow:0 -5px 0 #f8c6cc, 0 7px 0 #f6dce0; }
.sezione-catalogo::before {content:"♡  ✦  ♡"; position:absolute; right:20px; top:12px; color:#e98c9a; letter-spacing:8px;}
.avviso-goloso { position:fixed; z-index:2000; left:50%; top:18px; transform:translate(-50%,-20px); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; background:#fff7f5; border:3px solid #eaa4b2; border-radius:40px; padding:12px 20px; box-shadow:0 7px 0 #edc8ce; color:#8b4151; font-weight:bold; text-align:center; max-width:90vw; }
.avviso-goloso.visibile {opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce) { .amici-del-forno span,.dolcetto-faccina {animation:none} .avviso-goloso {transition:none} }


/* === PICCOLI AMICI INTERATTIVI === */
.invito-amici {text-align:center;color:#ad6175;font-weight:bold;}
.guida-kawaii {display:flex;align-items:center;gap:18px;margin:12px 0 24px;padding:14px 18px;background:linear-gradient(115deg,#fff0f4,#fff9eb);border:2px dashed #eeb5be;border-radius:24px;opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s;}
.guida-kawaii.guida-visibile {opacity:1;transform:translateY(0);}
.guida-personaggio {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 95px;min-height:92px;background:#fff8f1;border:2px solid #eeb5be;border-radius:28px;box-shadow:0 5px 0 #f5cbd0;padding:8px;color:#8b4953;}
.guida-personaggio > span:first-child {font-size:2.7rem;line-height:1.1;}
.guida-nome {font-size:.78rem;font-weight:bold;}
.guida-fumetto {position:relative;margin:0;padding:12px 16px;background:white;border:2px solid #f0bdc8;border-radius:18px;color:#7c4350;font-weight:bold;line-height:1.45;}
.guida-fumetto:before {content:'♡';margin-right:6px;color:#e47e92;}
.guida-salta .guida-personaggio {animation:guida-festeggia .5s ease-in-out;}
@keyframes guida-festeggia {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px) rotate(-7deg)}}
@media(max-width:480px){.guida-kawaii{gap:9px;padding:10px}.guida-personaggio{flex-basis:78px;min-height:82px}.guida-fumetto{font-size:.85rem;padding:9px}}
@media(prefers-reduced-motion:reduce){.guida-kawaii{transition:none;transform:none}.guida-salta .guida-personaggio{animation:none}}

/* Amici disegnati: seduti sulle cornici, non emoji */
.sezione-catalogo { position:relative; overflow:visible; }
.guida-kawaii { position:relative; margin:48px 0 25px; min-height:110px; padding:16px 18px 16px 120px; border:2px solid #f0bdc8; border-radius:26px; background:linear-gradient(135deg,#fff9f3,#ffeaf0); box-shadow:0 7px 0 #f8d5d9; }
.guida-personaggio { position:absolute; left:12px; bottom:calc(100% - 33px); width:105px; min-height:0; padding:0; background:transparent; border:0; box-shadow:none; transform-origin:50% 90%; animation:amico-sulla-cornice 3.4s ease-in-out infinite; }
.guida-personaggio:hover { background:transparent; }
.guida-illustrazione { display:block; width:100px; height:100px; object-fit:contain; filter:drop-shadow(0 5px 2px #a65a4d22); }
.guida-nome { background:#fff5ed; border:1px solid #efc1bc; border-radius:14px; padding:1px 9px; font-size:.78rem; }
.guida-fumetto { width:100%; }
@keyframes amico-sulla-cornice {0%,100%{transform:translateX(0) rotate(-3deg)}50%{transform:translateX(9px) rotate(3deg)}}
.guida-salta .guida-personaggio {animation:guida-festeggia .55s ease-in-out;}
.prodotto-illustrazione {display:block; height:106px; max-width:100%; margin:auto; object-fit:contain; filter:drop-shadow(0 4px 2px #985f4a1a);}
.dolcetto-faccina:has(.prodotto-illustrazione) {background:linear-gradient(#fff4e8,#ffecf1); padding:6px;}
@media(max-width:480px){.guida-kawaii{padding-left:95px}.guida-personaggio{left:3px;width:88px}.guida-illustrazione{width:85px;height:85px}}
@media(prefers-reduced-motion:reduce){.guida-personaggio{animation:none}}

/* === TORTA KAWAII: cuoricini delicati e riccioli di panna === */
body {
  background-color: #fff2eb;
  background-image:
    radial-gradient(circle at 13% 22%, #fffaf5 0, transparent 27%),
    radial-gradient(circle at 86% 72%, #ffe5e8 0, transparent 29%);
}
/* Decorazioni ai quattro angoli, non bloccano i clic */
#contenuto-sito::before, #contenuto-sito::after {
  content: "";
  position: fixed;
  width: 150px;
  height: 150px;
  background: url("panna-angolo.svg") center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
  opacity: .82;
}
#contenuto-sito::before { left: 0; top: 0; }
#contenuto-sito::after { right: 0; bottom: 0; transform: rotate(180deg); }
/* Cuoricini piccoli, appena visibili, nello sfondo delle sezioni */
.sezione-catalogo {
  background-image:
    radial-gradient(circle at 8% 18%, #fff9f4 0, transparent 45%),
    url("cuoricini-sfondo.svg");
  background-size: auto, 190px 190px;
}
@media (max-width: 600px) {
  #contenuto-sito::before, #contenuto-sito::after { width: 80px; height: 80px; opacity: .65; }
}

/* Biscottino diventa una guida del sito */
.navigazione-biscottino {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 215px;
}
.navigazione-biscottino button {
  padding: 6px 9px;
  font-size: 11px;
  border-radius: 999px;
  background: #f8d5de;
  color: #633c37;
  border: 1px solid #dba8b8;
  box-shadow: 0 2px 6px #68452f18;
}
.navigazione-biscottino button:hover {background: #f3bccc;}
.mascotte-forno .fumetto-biscotto {max-width: 210px;}
.sezione-catalogo {scroll-margin-top: 22px;}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}}

/* Carrello separato, posizionato sopra Biscottino */
.mini-carrello{position:fixed;right:42px;bottom:325px;z-index:1005;background:#fff9f2;border:3px solid #eab0bd;box-shadow:0 5px 0 #f5cdd5;border-radius:23px;padding:9px 13px;text-decoration:none;color:#79404c;font-weight:800;text-align:center;font-size:1.35rem;transition:transform .2s}
.mini-carrello:hover,.mini-carrello:focus-visible{transform:translateY(-4px)}
.mini-carrello #numero-carrello{display:inline-block;min-width:24px;padding:2px 6px;background:#d96986;color:white;border-radius:30px;font-size:.8rem;vertical-align:top}
.mini-carrello small{display:block;font-size:.75rem}
.torna-menu{text-align:center;margin:28px auto 5px}.torna-menu a{display:inline-block;background:#fff8f1;border:2px solid #eeb5be;border-radius:20px;padding:12px 20px;color:#834554;font-weight:800;text-decoration:none}
.main-carrello{max-width:900px;margin:20px auto 100px;padding:20px}.pagina-carrello .carrello{margin:10px auto 50px;max-width:850px}.carrello-intro{text-align:center;font-weight:700;color:#965267}
.biscottino-salta{background:#fff9f3!important;border:1px solid #e9b4be!important;color:#824956!important;border-radius:20px!important;padding:7px 10px!important;font-size:.72rem!important}
@media(max-width:540px){.mini-carrello{right:22px;bottom:300px;padding:6px 9px}.main-carrello{padding:10px}}
@media(prefers-reduced-motion:reduce){.mini-carrello{transition:none}}