/* ==========================================
   FONT
========================================== */


@font-face {
    font-family: "Painting With Chocolate";
    src:
        url("fonts/Painting_With_Chocolate.woff2") format("woff2"),
        url("fonts/Painting_With_Chocolate.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Kalam";
    src:
        url("fonts/Kalam-Regular.woff2") format("woff2"),
        url("fonts/Kalam-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kalam";
    src:
        url("fonts/Kalam-Bold.woff2") format("woff2"),
        url("fonts/Kalam-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   COLORI
========================================= */

:root {

    --sfondo: #FBF4EE;
    --rosso: #D03626;
    --rosso-hover: #B5321E;
    --verde: #696C3B;
    --testo: #2C2A28;

    --bianco: #FFFFFF;
    --carta-ingredienti: #FFFDF5;

    --ombra-pagina: rgba(44, 42, 40, 0.16);
    --rosso-focus: rgba(208, 54, 38, 0.12);

    --ombra-slider-leggera: rgba(0, 0, 0, 0.10);
    --ombra-slider-profonda: rgba(70, 55, 40, 0.42);

    --ombra-testo-forte: rgba(0, 0, 0, 0.65);
    --ombra-testo-media: rgba(0, 0, 0, 0.55);
    --ombra-testo-morbida: rgba(0, 0, 0, 0.45);

    --ombra-polaroid: rgba(0, 0, 0, 0.18);
    --ombra-ingredienti: rgba(0, 0, 0, 0.12);
    --linea-ingredienti: rgba(208, 54, 38, 0.55);

}

html{
    color-scheme: light;
}


/* =========================================
   BASE
========================================= */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    min-height: 100%;

}

body {
    min-height: 100vh;

    padding-top: 20px;

 display: flex;
    justify-content: center;
    align-items: flex-start;

    font-family: Arial, Helvetica, sans-serif;
    background: var(--bianco);
    color: var(--testo);
}



/* =========================================
   FRASE HOME
========================================= */
.frase-home{

    display:block;

    width:min(420px,58%);

    margin:8px auto 12px;

}



/* =========================================
   FOGLIO CENTRALE
========================================= */

.pagina {

    background:
        url("img/bg_pomidoro_100x100") repeat,
        var(--sfondo);

    background-size: 100px 100px;

    width: min(1180px, 92%);

 
   
  

    display: flex;
    flex-direction: column;

    border-radius: 32px;

    box-shadow:
        0 22px 70px var(--ombra-pagina);

    overflow: hidden;

}

/* =========================================
   HEADER
========================================= */

.site-header {

    text-align: center;

    padding: 8px 20px 4px;
    margin-bottom: 10px;


    background: transparent;

}

.logo {

    display: inline-block;

}

.logo img {

    display: block;

    width: min(430px, 90vw);

    height: auto;

    margin: auto;

}


/* =========================================
   RICERCA
========================================= */

.ricerca{

    width:min(400px,90%);
    margin:15px auto 0;
    text-align:left;
 position:relative;

}

.ricerca input {

    width: 100%;

    padding:8px 0 4px 18px;

    border: none;
    border-radius: 0px;



width: 95%;
margin: 0 auto;
display: block;
   

    background: transparent;

    font-family: "Kalam", sans-serif;

    font-size: 16px;
    color: var(--testo);

    outline: none;

    transition: 0.25s;

}
.ricerca input:focus {

    border-color: var(--rosso);
    border-radius:8px;

    box-shadow:
        0 0 0 3px var(--rosso-focus);

}

.linea-ricerca{

    display:block;

    width:95%;

    margin:-2px auto 0;

    pointer-events:none;

}


/* =========================================
   PULSANTE CERCA
========================================= */

.pulsante-cerca{
    position:absolute;
    right:18px;
    top:32%;

    transform:translateY(-50%);

    width:13px;
    height:13px;

    padding:0;
    border:0;
    background:transparent;

    cursor:pointer;
}

.pulsante-cerca img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    transform:scale(2.2);
}

.pulsante-cerca{
    transition:transform 0.15s ease;
}

.pulsante-cerca:hover{
    transform:translateY(-50%) scale(1.10);
}

.pulsante-cerca:active{
    transform:translateY(-50%) scale(1.20);
}

/* =========================================
   CONTENUTO
========================================= */

main {

 

    width: 100%;

    padding: 5px 0 2px;

    background: transparent;

}


/* =========================================
   SLIDER HOME
========================================= */

.home-slider{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:18px;

    width:50%;

    margin:0 auto;
}

.home-slides{

    position:relative;

    flex:1 1 auto;

    height:450px;
    min-height:400px;

    overflow:hidden;

    border-radius:12px;

    box-shadow:
        0 5px 12px var(--ombra-slider-leggera),
        12px 16px 30px var(--ombra-slider-profonda);
}

.home-slide{

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    transition:opacity .45s ease;
}

.home-slide.attiva{

    opacity:1;

    pointer-events:auto;
}

.home-slide img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.home-testo{

    position:absolute;

    left:28px;
    bottom:22px;

    color:var(--bianco);

    text-shadow:
        0 2px 8px var(--ombra-testo-forte);
}

.home-testo h1{

    margin:0;

    font-family:"Painting With Chocolate", cursive;

    font-size:2.2rem;
    font-weight:400;
    line-height:1;

    letter-spacing:-0.03em;

    color:var(--bianco);
}

.home-testo p{

    margin-top:2px;

    font-family:"Kalam", sans-serif;

    font-size:.95rem;

    color:var(--bianco);
}

.home-prev,
.home-next{

    flex:0 0 auto;

    width:32px;
    height:32px;

    padding:0;

    border:none;

    background:transparent;

    cursor:pointer;

    transition:.2s;
}

.home-prev:hover,
.home-next:hover{

    transform:scale(1.15);
}

.home-prev img,
.home-next img{

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}

.home-dots{

    display:flex;

    justify-content:center;

    gap:8px;

    margin-top:8px;
}

/* =========================================
   SEPARATORE
========================================= */

.separatore {

    text-align: center;

    margin: 5px 0;

}

.separatore img {

    display: inline-block;

    width: 220px;

    max-width: 80%;

    height: auto;

}


/* =========================================
   FOOTER
========================================= */

footer {
    position: relative;
    text-align: center;
  padding: 8px 30px 12px;
    margin-top: 0px;
}

.footer-frase {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.footer-frase-img {
    height: 32px;
    width: auto;
    display: block;
}

.footer-ico-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.footer-ico {
    width: 20px;
    height: auto;
    display: block;
    transform: rotate(9deg);
}

.footer-copy {
    position: absolute;
    right: 30px;
    bottom: 12px;

    font-family: "Kalam", sans-serif;
    font-size: 14px;
    color: var(--rosso-hover);
}

/* =========================================
   PAGINA RICETTA
========================================= */

.intro-ricetta {
    max-width: 900px;
    margin: 0 auto 15px;
    padding: 0 20px;

    text-align: center;

    font-family: "Kalam", cursive;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;

    color: var(--verde);
}


/* TESTATA: COLONNA SINISTRA + INGREDIENTI */

.testata-ricetta {
    display: block;
    position: relative;

    padding: 35px 90px;
}

.testata-ricetta::after {
    content: "";
    display: block;
    clear: both;
}


/* TIMBRO VIAGGIO */

.timbro-viaggio {
    position: absolute;
    top: 70px;
    left: 38%;

    width: 125px;
    height: 125px;

    display: none;

    color: var(--rosso);
    opacity: .65;

    transform: rotate(-14deg);
    pointer-events: none;
          filter:
          drop-shadow(1px 1px 0 var(--rosso))
        drop-shadow(2px 2px 1px var(--rosso));
}

.timbro-svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.timbro-cerchio-esterno,
.timbro-cerchio-interno {
    fill: none;
    stroke: currentColor;
}

.timbro-cerchio-esterno {
    stroke-width: 3;
}

.timbro-cerchio-interno {
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
}

.timbro-testo-curvo {
    fill: currentColor;

    font-family: 'Special Elite', monospace;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.timbro-data,
.timbro-paese {
    position: absolute;
    left: 50%;

    width: 100%;

    transform: translateX(-50%);
    text-align: center;

    font-family: 'Special Elite', monospace;
    color: currentColor;
}

.timbro-data {
    top: 60px;

    font-size: 16px;
    font-weight: bold;
}

.timbro-paese {
    top: 84px;

    font-size: 14px;
    letter-spacing: 2px;
}

.timbro-citta-centro{
    position:absolute;
    top:35px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;

    font-family:'Special Elite', monospace;
    font-size:16px;
    font-weight:bold;
    letter-spacing:1px;
    color:currentColor;
}

.timbro-viaggio-mobile{
       display:none !important;
}

/* POLAROID */

.polaroid {
   
    width: 40%;
    box-sizing: border-box;

    background: var(--bianco);
    padding: 18px;

    box-shadow: 0 8px 20px var(--ombra-polaroid);
    transform: rotate(-2deg);
}

.polaroid img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.polaroid-testo {
    padding-top: 18px;
    text-align: left;
}

.polaroid-testo h1 {
    margin: 0;

    font-family: "Painting With Chocolate", cursive;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;

    color: var(--rosso);
}

.polaroid-data {
    margin-top: 0px;
    padding-right: 4px;

    font-family: "Kalam", cursive;
    font-size: 0.8rem;
    text-align: right;

    color: var(--rosso);
}


/* INVITO PRIMA DEL PROCEDIMENTO */

.invito-ricetta {
    font-family: 'Kalam', cursive;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--verde);

    margin: 30px 0 5px;
    padding: 0 10px;

    line-height: 1.5;
    font-style: italic;
}


/* PROCEDIMENTO */

.procedimento-corpo {
    clear: left;
    width: auto;
    box-sizing: border-box;

    margin-top: 5px;
    padding: 0 10px;

    font-family: "Kalam", cursive;
    font-size: 1.2rem;
    line-height: 1.65;

    color: var(--verde);
}

.procedimento-titolo {
    display: inline-block;

    margin: 14px 0 2px;
    padding-bottom: 2px;

    font-weight: 700;

    color: var(--verde);
    border-bottom: 1px solid var(--verde);
}

.procedimento-testo {
    margin: 0 0 8px;

    line-height: 1.6;
}

.ingrediente-info{
    border-bottom:2px dashed var(--rosso);
    cursor:pointer;
}

/* =========================
   SCHEDA INGREDIENTE
========================= */

.scheda-ingrediente{
    display:none;

    position:fixed;
    inset:0;
    z-index:1000;

    background:rgba(44, 42, 40, 0.35);

    align-items:center;
    justify-content:center;

    padding:25px;
}

.scheda-ingrediente-box{
    position:relative;

    width:min(520px, 100%);
    max-height:80vh;
    overflow-y:auto;

    background:var(--sfondo);

    padding:35px 40px 32px;

    border:2px solid var(--rosso);
    border-radius:12px;
}

.scheda-ingrediente-box h3{
    margin:0 35px 20px 0;

    color:var(--verde);
    font-family:PWC, sans-serif;
    font-size:28px;
}

.scheda-ingrediente-box div{
    margin-top:14px;

    font-family:Kalam, cursive;
    font-size:17px;
    line-height:1.5;
    color:var(--verde);
}

.chiudi-scheda-ingrediente{
    position:absolute;
    top:10px;
    right:14px;

    border:0;
    background:transparent;

    color:var(--rosso);
    font-size:30px;
    line-height:1;

    cursor:pointer;
}

.titolo-pominfo{
    color:var(--rosso);
}

#scheda-ingrediente-pominfo{
    white-space:pre-line;
}

#scheda-ingrediente-foto{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:8px;
    float:right;
    margin:0 0 10px 18px;
}



/* INGREDIENTE CLICCABILE */

.ingrediente-info{
    border-bottom:2px dashed var(--rosso);
    cursor:pointer;
}





/* FOGLIO INGREDIENTI */

.lista-ingredienti {
    float: right;

    width: 40%;
    min-width: 0;

    margin-right: 5%;
    margin-left: 45px;
    margin-bottom: 35px;

    position: relative;

    background: transparent;

    transform: rotate(0.8deg);
    filter: drop-shadow(0 6px 8px var(--ombra-ingredienti));
}
.titolo-ingredienti {
    position: absolute;
    top: 45px;
    left: 30px;
    z-index: 2;

    font-family: "Painting With Chocolate", cursive;
    font-size: 2rem;

    color: var(--verde);
    opacity: 0.7;
}

.ingredienti-top,
.ingredienti-corpo {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.ingredienti-top {
    height: auto;
}

.ingredienti-corpo {
    position: relative;

    margin-top: -4px;
    padding: 18px 28px 28px 48px;

    background-color: var(--carta-ingredienti);

background-image: url("img/ui/ingredienti_bg.png");
background-repeat: repeat;
background-position: 0 0;
background-size: contain;

}
.ingredienti-corpo::before {
    content: "";

    position: absolute;
    top: 12px;
    bottom: 15px;
    left: 32px;

    width: 1px;

    background: var(--linea-ingredienti);
}

.ingrediente-titolo {
    margin: 18px 0 8px;

    font-family: "Kalam", cursive;
    font-size: 1.1rem;
    font-weight: 700;

    color: var(--verde);
}

.ingrediente-riga {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 8px 0;

    font-family: "Kalam", cursive;
    font-size: 1rem;

    color: var(--testo);
    cursor: pointer;
}

.check {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;

    border: 2px solid var(--verde);
    border-radius: 2px;

    transform: rotate(-4deg);
}

.check.checked {
     background: transparent;
}

.check.checked::after {

    content: "✓";

    position: absolute;

    left: 1px;
    top: -6px;

    font-family: "Kalam", cursive;
    font-size: 18px;
    font-weight: 700;

    color: var(--verde);

    transform: rotate(-14deg);

    line-height: 1;

}

.ingrediente-testo.checked {
    text-decoration: line-through;
    opacity: 0.6;
}




/* NOTE */

.note-ricetta {
    margin-top: 35px;
}

.titolo-note {
    font-family: 'Painting With Chocolate', cursive;
    font-size: 1.7rem;
    color: var(--rosso);
    margin-bottom: 8px;
}

.testo-note {
    font-family: 'Kalam', cursive;
    font-size: 1.05rem;
    color: var(--verde);
      line-height: 1.6;
    white-space: pre-line;
}

/* CONSIGLIO CURIOSITÀ VARIANTE */
.extra{

    margin-top:35px;

}

.extra p{

    font-family:"Kalam";
    font-size:1.05rem;

    color:var(--verde);

    line-height:1.6;

    white-space:pre-line;

}

/* =========================================
   ALTRE FOTO - SLIDER PASSAGGI
========================================= */

.passaggi-slider {

    display: none;

    width: 100%;
    max-width: 900px;

    margin: 5px auto 0;
}

.passaggi-slider-box {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;
}

.passaggi-slides {

    position: relative;

    width: 450px;
    height: 290px;

    overflow: hidden;

    border-radius: 12px;

    box-shadow:
        0 5px 12px var(--ombra-slider-leggera),
        12px 16px 30px var(--ombra-slider-profonda);
}

.passaggi-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.5s ease;
}

.passaggi-slide.attiva {

    opacity: 1;

    pointer-events: auto;
}

.passaggi-slide img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.passaggi-prev,
.passaggi-next {

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    padding: 0;

    border: none;

    background: transparent;

    cursor: pointer;
}

.passaggi-prev img,
.passaggi-next img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.passaggi-dots {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: 16px;
}

.passaggi-dot {

    width: 10px;
    height: 10px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: var(--verde);

    opacity: 0.35;

    cursor: pointer;
}

.passaggi-dot.attivo {

    opacity: 1;
}


/* =========================================
   Scarabocchio - desk
========================================= */

.scarabocchio-desktop{
    position:absolute;

    top:-280px;
    right:30px;

    width:230px;
    height:195px;

    display:none;
    transform:rotate(-12deg);
    transform-origin:center;

    pointer-events:auto;
}

.scarabocchio-desktop img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.scarabocchio-mobile{
    display:none;
}

.scarabocchio-desktop {
    position:absolute;

    top:-280px;
    right:30px;

    width:230px;
    height:195px;

    display:none;

    transform:rotate(-12deg);
    transform-origin:center;

    transition:
        transform .25s ease,
        filter .25s ease;

    pointer-events:auto;
}

.scarabocchio-desktop:hover {
    transform: rotate(-12deg) scale(1.30);
    filter: saturate(1.08);
}

/* ==========================
   PAGINA ISPIRAZIONE
========================== */

.pagina-ispirazione{
    width:100%;
    margin:0 auto;

    flex:1;
}

.risultati-ricerca{

    min-height:100px;

}

.titolo-ispirazioni{

    text-align:center;
    margin:10px 0 20px;

}

.titolo-ispirazioni h2{

    font-family:"Kalam";
    font-size:1.5rem;
    color:var(--verde);
    font-weight:700;

}

#ispirazioni{

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;

    justify-content:center;
    align-items:flex-start;

    gap:28px;

    padding:40px 30px 20px;
}



.indice-idee{

    display:flex;
    justify-content:center;
    width:100%;
    margin:60px 0 0;
}

#seleziona-idea{
    display:block;
    margin:0 auto;
    width:340px;
    max-width:80%;

    padding:10px 42px 10px 14px;

    border:none;
    border-bottom:2px solid var(--verde);

    background:transparent;

    font-family:"Kalam";
    font-size:1.2rem;

    color:var(--verde);

    cursor:pointer;
}

#seleziona-idea:focus,
#seleziona-idea:focus-visible{

    outline:none;
    box-shadow:none;
    border-bottom:2px solid var(--rosso);

}

#risultati-idea{
    display:none;

    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;

    gap:28px;

    width:100%;
    padding:25px 30px 35px;
    box-sizing:border-box;
}

#risultati-idea{
    display:grid;
    grid-template-columns:repeat(4, 210px);
    justify-content:center;
    gap:28px;
}


/* ==========================
   RICERCA
========================== */

.ricerca{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.pulsante-ispirami{

    position:relative;

    padding:0;
    margin:0;

    border:none;
    background:transparent;

    cursor:pointer;

}

.pulsante-ispirami img{

    display:block;

}

.pulsante-ispirami span{

    position:absolute;

    right:55px;
    top:15px;

  font-family:"Kalam";
font-weight:350;
font-size:1.1rem;
font-style:italic;

    color:var(--verde);

    transform:rotate(-3deg);

    white-space:nowrap;

    pointer-events:none;

}

.pulsante-ispirami:hover{

    transform:translateX(5px);

    transition:.2s;

}


/* ==========================
   RISULTATI RICERCA
========================== */

#risultati{
    
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:28px;

    padding:20px 30px 60px;

}


.polaroidina{

    flex:0 0 210px;

    width:165px;

    display:block;

    width:210px;

    padding:10px 10px 16px;

    background:#fff;

    color:inherit;
    text-decoration:none;

    box-shadow:
        0 6px 14px var(--ombra-slider-leggera),
        8px 12px 24px var(--ombra-slider-profonda);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.polaroidina:nth-child(3n + 1){
    transform:rotate(-1.5deg);
}

.polaroidina:nth-child(3n + 2){
    transform:rotate(1deg);
}

.polaroidina:nth-child(3n){
    transform:rotate(-0.5deg);
}

.polaroidina:hover{

    transform:translateY(-4px) rotate(0deg);

    box-shadow:
        0 8px 18px var(--ombra-slider-leggera),
        10px 16px 28px var(--ombra-slider-profonda);
}

.polaroidina-testo{
    padding:10px 4px 0;
}

.polaroidina h3{
    margin:0;

    font-family:"Painting With Chocolate", cursive;
    font-size:.95rem;
    font-weight:400;
    line-height:1.08;

    color:var(--rosso);
}

.polaroidina p{
    margin:6px 0 0;

    font-family:"Kalam", sans-serif;
    font-size:.72rem;
    text-align:right;
    color:var(--testo);
}

.polaroidina img{

    width:100%;
    height:180px;

    object-fit:cover;

}



.testo-guida{

    font-family:"Kalam", cursive;
    font-size:1.15rem;
    color:var(--verde);
    font-style:italic;

}


#campo-ricerca,
#seleziona-idea{

    font-family:"Kalam", cursive;
    font-size:1.25rem;
    font-style:italic;
    color:var(--verde);

}

#campo-ricerca::placeholder{

    font-family:"Kalam", cursive;
    font-size:1.15rem;
    font-style:italic;
color:#A39D96;
    opacity:5;
  

}



/* =========================================
   NESSUN RISULTATO
========================================= */

.nessun-risultato{
    display:none;
    text-align:center;

  margin:-150px auto 25px;
}

.nessun-risultato img{
    width:55px;
    height:auto;

    display:block;
    margin:0 auto 10px;
}

#messaggio-nessun-risultato{
    font-family:"Kalam", cursive;
    font-size:20px;
    color:var(--verde);
}

.numero-ricette{
    color:var(--rosso);
    font-weight:bold;
}

.pemoji {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: -4px;
    margin-left: 3px;
}


/* =========================================
   TELEFONO
========================================= */
@media (max-width: 700px) {

    main {
        padding-bottom: 0;
    }

    .pagina-ispirazione {
        flex: none;
    }

.pagina {
    width: 98%;
    min-height: 0;
    margin: 10px auto 0;
    border-radius: 18px;
}

    .logo img {

        width: 250px;
        max-width: 90vw;

    }

    .ricerca {

        width: 88%;

    }

.home-slider{

    width:90%;
}

.home-slides{

    height:260px;
    min-height:260px;

    border-radius:18px;
}

.home-testo{

    left:20px;
    bottom:20px;
}

.home-testo h1{

    font-size:28px;
}

.separatore {

        margin: -5px 0;

    }

    .separatore img {

        width: 180px;

    }

.testata-ricetta {
    display: flex;
    flex-direction: column;
}

.polaroid {
    order: 1;
}

.lista-ingredienti {
    order: 2;
}

.invito-ricetta {
    order: 3;
}

.procedimento-corpo {
    order: 4;
}

.note-ricetta {
    order: 5;
}

.extra {
    order: 6;
}

   .testata-ricetta{

        padding:20px;

    }

.intro-ricetta {
    margin: 0 auto 10px;
    padding: 0 8px;
    font-size: 1.1rem;
    line-height: 1.4;
}

    .polaroid{

        width:100%;

        margin:0 0 25px;

        transform:none;
    }

    .lista-ingredienti{

    position:relative;
    z-index:1;
        float:none;
        width:100%;

    margin:0;
    margin-top:-15px;
        transform:none;

    }
.timbro-viaggio{
    display:none !important;
}

.timbro-viaggio-mobile{
     z-index:100;
   
    position:relative;

    width:72px;
    height:72px;

    margin:-65px 0 6px 8px;

    color:var(--rosso);
    opacity:.65;

    transform:rotate(-15deg);

    filter:
        drop-shadow(1px 1px 0 var(--rosso))
        drop-shadow(2px 2px 1px var(--rosso));

    pointer-events:none;
}

.timbro-viaggio-mobile.visibile{
    display:block !important;
}

.timbro-viaggio-mobile .timbro-citta-centro{
    top:20px;
    font-size:12px;
}
   

.timbro-viaggio-mobile .timbro-data{
    top:35px;
    font-size:9px;
}

.timbro-viaggio-mobile .timbro-paese{
    top:50px;
    font-size:8px;
}

.scarabocchio-desktop{
    display:none !important;
}

.scarabocchio-mobile{
    display:none;

    width:150px;
    height:120px;

    margin:15px auto 10px;

    pointer-events:none;
}

.scarabocchio-mobile img{
    width:100%;
    height:100%;

    object-fit:contain;
}

.scheda-ingrediente{
    padding:18px;
}

.scheda-ingrediente-box{
    padding:30px 24px 26px;
}

.scheda-ingrediente-box h3{
    font-size:24px;
}

.scheda-ingrediente-box div{
    font-size:16px;
}


/* NESSUN RISULTATO MOBILE */

.nessun-risultato{
    margin:-135px auto 22px;
    padding:0 15px;
}

.nessun-risultato img{
    width:42px;
    margin:0 auto 5px;
}

#messaggio-nessun-risultato{
    font-size:17px;
    line-height:1.3;
}

.numero-ricette{
    font-weight:bold;
}


footer{
    padding:5px 15px 8px;
    margin-top:5px;
}

.footer-frase img{
    width:280px;
    max-width:88vw;
    height:auto;
}

.footer-copy{
    position:static;
    margin-top:10px;

    text-align:center;
    font-size:.72rem;
}

.cuore-segreto{
    display:none;
}

.footer-ico {
    width: 20px !important;
    position: absolute !important;
    left: 15 !important;
    bottom: 10!important;
   
}



/* PAGINA ISPIRAZIONE MOBILE */

#ispirazioni{
    padding: 10px 0 0;
    gap: 0;
}

.indice-idee{
    margin: 15px 0 0;
}

.ispirazione{
    width:100%;
    padding-left:0;
}

.ispirazione h3{
    text-align:center;
    margin:0 0 18px;
}

.ispirazione-polaroid{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    padding-top:0;
    margin-bottom:10px;}

.polaroidina{
    flex:0 0 210px;
    width:210px;
    margin:0 auto;
}

#risultati-idea{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    padding:8px 0 12px;
    box-sizing:border-box;
}

#risultati-idea .polaroidina{
    flex:0 0 210px;
    width:210px;
    margin:0;
}

}

.scheda-ingrediente{
    padding:18px;
}

.scheda-ingrediente-box{
    padding:30px 24px 26px;

    max-height:85vh;
    overflow-y:auto;
    overscroll-behavior:contain;
}

.scheda-ingrediente-box h3{
    font-size:24px;
}

.scheda-ingrediente-box div{
    font-size:16px;
}