html, body {
  touch-action: manipulation;
  margin: 0; padding: 0;
}

body {
font-family: Quicksand, Ubuntu, Arial, sans-serif;
line-height:1.5;
}

.mt20{
margin-top:20px;
}

.mb20{
margin-bottom:20px;
}

.mt40{
margin-top:40px;
}

.gap20{
gap: 20px;
}

.pd16{
padding: 16px; 
}

.pd20{
padding: 20px; 
} 






  :root{
    --bar-bg:#ffffff;
    --bar-fg:#1f2937;
    --accent:#ef476f;
    --maxw:1170px;
  }

  /* Barra intera */
  .topbar{
    position: sticky; top:0; z-index:50;
    width:100%;
    background:#366db5; //#ef476f;
    color:var(--bar-fg);
    //border-bottom:1px solid #e5e7eb;
  }

  /* Contenitore centrato 1170 */
  .topbar__inner{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  /* Brand (logo + testo) */
  .brand{
    display:flex;
    align-items:center;
    //gap:10px;
    text-decoration:none;
    color:inherit;
    font-weight:700;
    letter-spacing:-0.2px;
    padding:2px;
    font-family: 'Finger Paint', sans-serif;
  }
  .brand img{
    display:block;
    height:36px; width:auto;
  }

  /* Nav desktop */
  .nav{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .nav a{
    text-decoration:none;
    color:#fff;
    text-transform: uppercase;
    padding:4px 16px 4px;
    border-radius:10px;
    font-size: 15px;
  }
  .nav a:hover{
    background:#fff;
    color: #ef476f;
  }
  .nav a.cta{
    background: #fff;
    color:#ef476f;
  }
  .nav a.cta:hover{
    filter:brightness(0.95);
  }

  /* Hamburger (mobile) */
  .menu-toggle{
    display:none;
    background:transparent;
    border:0;
    padding:8px;
    cursor:pointer;
    color: white;
  }
  .menu-toggle:focus-visible{ outline: 2px solid var(--accent); border-radius:8px; }

  /* Pannello mobile (hidden di default) */
  .mobile-panel{
    display:none;
    border-top:1px solid #e5e7eb;
    background:var(--bar-bg);
  }
  .mobile-panel__inner{
    max-width: var(--maxw);
    margin:0 auto;
    padding: 8px 16px 14px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .mobile-panel a{
    text-decoration:none;
    color:var(--bar-fg);
    padding:10px 8px;
    border-radius:10px;
  }
  .mobile-panel a:hover{ background:#f3f4f6; }
  .mobile-panel a.cta{ background:var(--accent); color:#fff; }

  /* Breakpoint: sotto 900px -> hamburger */
  @media (max-width: 900px){
    .nav{ display:none; }               /* nascondi voci desktop */
    .menu-toggle{ display:inline-block;}/* mostra hamburger     */
  }

  /* Stato aperto */
  .topbar.is-open .mobile-panel{ display:block; }






.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1170px;
  margin: auto;
  padding: 0 16px;
}

.hero {
  width: 100%;
  background-image: url('/assets/img/kid.jpg');
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
}

/* contenitore interno centrato */
.hero-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 80px 16px;        /* altezza/spaziatura verticale */
  display: grid;
  justify-content: flex-end; /* sposta contenuto a destra */
  align-items: center;       /* centra verticalmente */
  min-height: 250px;         /* altezza minima dell’hero */
  display: grid;
  grid-template-columns: 1fr 1fr; /* due colonne uguali */
  align-items: center;            /* centra verticalmente */
}

.hero-right {
  display: flex;
  justify-content: center; /* centra orizzontalmente nella colonna destra */
}

/* bottone */
.hero-button {
  background: #EF476F;
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  transition: background 0.3s ease;
}
.hero-button:hover {
  background: #d93d62;
}










.hero-banner{
display:flex; justify-content:center; align-items:center; overflow: hidden; position: relative;
color: white; 
flex-direction: column;
font-weight:bold;line-height:1.2;font-family: 'Finger Paint'; font-size: 29px;
padding: 16px;
text-align:center;
}

.hero-banner-left{
border-bottom-left-radius: 16px;
background: #26547C; 

  background-image: url('/assets/img/dog.png');
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;

}

.hero-banner-right{
border-bottom-right-radius: 16px;
background: #EF476F; 

  background-image: url('/assets/img/cat.png');
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;

}

@media (max-width: 768px) {
  .two-cols {
    grid-template-columns: 1fr; /* da tablet in giù vanno in verticale */
  }
  
.hero-banner{
 font-size: 24px;
}
  
  
  .hero-banner-left{
  border-radius: 0;
  }

  .hero-banner-right{
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  }  
  
}






 /* Contenitore centrato largo max 1170 */
  .main-container {
    max-width: 1170px;   /* larghezza richiesta */
    margin: 0 auto;      /* centratura orizzontale */
    
  }
   

  /* Griglia: 4 colonne uguali */
  .grid-4 {
     display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width:100%;
  }

  /* Card di esempio (opzionale) */
  .col {
    min-width: 0;
    display: flex;
    align-items: start;
    justify-content: center;
    min-height: 120px;
  }

  /* Breakpoint: tablet -> 2 colonne */
@media (max-width:1024px){
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid-4{ grid-template-columns: minmax(0,1fr); }
}
  
  .book-box{
    width:100%;
  margin:0 auto;            /* evita “drift” visivo */
    text-align: center;
  
  }
  
  .book-box-link{
  text-decoration: none;
  }
  
  .book-box-title{
  font-size:20px;
  letter-spacing: -0.8px;
  text-align: center;
  color: #26547c;
  font-weight: bold;
  margin-top:8px;
  }  
  
  .book-box-subtitle{
  font-size:14px;
  text-align: center;
  color: #222;
  }    
  
  .book-box-price{
  font-size:14px;
  text-align: left;
  color: #EF476F;
  display: none;
  }    
  
  .book-box-cover{
  font-size:22px;
  position:relative;
  display:block;            /* meglio di inline-block per centratura */
  border-radius:6px;
  box-shadow:4px 4px 8px lightgray;
  overflow:hidden;          /* clip overlay */
  margin:0 auto;            /* centra il blocco */
  width:100%;
}
.book-box-cover img{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
}

.book-box-details{
  text-align: center;
  color: #fff;
  background: #EF476F;
  border-radius: 6px;
  font-size: 16px;
  
  padding: 12px;
}



/* overlay con lente */
.book-box-cover .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);   /* leggero scuro */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;               /* grandezza lente */
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 6px;
  
}

/* hover: mostra overlay */
.book-box-link:hover .overlay {
  opacity: 1;
}
   

  
  .book-box-cover img{
  display: block;
  max-width: 100%;
  border-radius: 6px;
  }      
  
  .book-box-button{
  text-align: center;
  line-height: 1;
  color: #fff;
  background: #EF476F;
  border-radius: 6px;
  margin-top: 4px;
  display: inline-block;   /* o block, se vuoi a tutta larghezza */
  text-decoration: none;   /* elimina sottolineatura */
  color: inherit;          /* eredita il colore del testo interno */
  transition-duration: 0.4s;
  //cursor: pointer;
    }

  .book-box-button:hover {
    background-color: #04AA6D; /* Green */
    color: white;
  }

  
  .book-box-button div{
  font-size:18px;
  color: #fff;
  padding: 10px 18px 10px 18px;
  }   
  
  .body-title{
    font-size:28px;
    font-weight: bold;
    color: #26547c;
    text-transform: uppercase;
  }

  .body-subtitle{
    font-size:18px;
    color: #26547c;
    
  }







.promo-banner{
display:flex; justify-content:center; align-items:center; overflow: hidden; position: relative;
color: #26547C; 
flex-direction: column;
font-weight:bold;line-height:1.2; font-size: 29px;
padding: 16px;
text-align:center;
border-radius: 16px;
}

.promo-banner-inner {
  //width: 100%;
  margin: 0 auto;
  //padding: 40px 16px;        /* altezza/spaziatura verticale */
  display: grid;
  justify-content: flex-end; /* sposta contenuto a destra */
  align-items: center;       /* centra verticalmente */
  //min-height: 100px;         /* altezza minima dell’hero */
  display: grid;
  grid-template-columns: 1fr 3fr; /* due colonne uguali */
  align-items: center; 
  gap: 10px;           /* centra verticalmente */
}

.promo-banner-inner img{
width:180px;
}

.promo-banner-inner-right {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: start;
  gap:6px;
  text-align: left;
}

.promo-banner-inner-right div{
font-size:18px;
text-align: left;
font-weight: normal;

}

.promo-banner-left{

background: #fff0c7; 



}

.promo-banner-right{

background: #fff0c7; 

}

.promo-banner-button{
max-width:180px;
border-radius:8px;
background:#fff;
}

@media (max-width: 768px) {
  .two-cols {
    grid-template-columns: 1fr; /* da tablet in giù vanno in verticale */
  }
  
.promo-banner{
 font-size: 24px;
}

  .promo-banner-inner img{
  width:120px;
  }  
  
  .promo-banner-left{
  
  }

  .promo-banner-right{

  }  
  
}


.path-bar{
  background: #65c151;

}

.path-bar-bg{
  background-image: url('/assets/img/kids.png?t=1');
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;

}

.path-bar-title{
  color: white;padding: 16px 10px;font-size: 26px;line-height:1.1;
}

.path-bar-title div{
  font-size:16px;font-weight: normal;margin-top:6px;
}

@media (max-width: 620px) {
  .path-bar-bg{
    background-image: none;
  }
}


.content-two-cols {
  display: grid;
  grid-template-columns: 1fr 4fr;
  max-width: 1170px;
  margin: auto;
  padding: 0 16px;
  gap: 10px;
}

.content-col-left img {
    max-width: 200px;
}

.content-col-right {
font-size: 18px;
color: #222;
}

.content-col-right-title{
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
color: #26547C;
}

.content-col-right-subtitle{
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
color: #26547C;
}

.content-col-right-book-title{
font-size: 28px;
font-weight: bold;
color: #26547C;
margin:0;
padding: 0;
}

.content-col-right-book-subtitle{
font-size: 22px;
font-weight: normal;
color: #26547C;
margin:0;
margin-bottom: 10px;
padding: 0;
}

.book-description{
margin-top:20px;
margin-bottom: 20px;
}

.chip-container {
  display: flex;
  flex-wrap: wrap;     /* permette di andare a capo */
  gap: 8px;            /* spaziatura tra le chip */
  margin: 16px 0;
}

.chip{
display: inline-block;
background: #366db5;
color: white;
font-size: 14px;
text-transform: uppercase;
border-radius: 8px;
}

.chip div{
padding: 8px 12px 7px 12px;
}

.book-details{
  display: flex;
  flex-wrap: wrap;     /* permette di andare a capo */
  gap: 8px;            /* spaziatura tra le chip */
  margin: 16px 0;
  flex-direction: column;
}

.book-details div{
font-size: 14px;

}

.book-tested-box{
background: #ffd079;
  display: flex;
  grid-template-columns: auto 1fr;
  margin: auto;
  padding: 12px;
  align-items: center; 
  gap: 14px;
  font-size: 16px;
  border-radius: 10px;
}

.book-tested-box > div:first-child {
  display: flex;              /* contenitore interno */
  align-items: center;
  padding: 4px 0;
}

.book-internal-preview{
display: none;
}

@media (max-width: 620px) {
  .content-col-left{
    display: none;
  }
  .content-two-cols{
  grid-template-columns: none;
  }
  
  .book-internal-preview{
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }  
  
}

/* email form */

    .form-box{
        padding:20px;
        background: #f0f0f0;
        margin-top:20px;
        width:auto;
        box-sizing: border-box;
        border-radius: 8px;
    }
  form{max-width:640px;}
 
  input,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px;box-sizing: border-box;}
  button{margin-top:14px;padding:8px 18px;border-radius:10px;border:0;cursor:pointer}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .msg{margin:16px 0;padding:12px;border-radius:8px;display:none}
  .ok{background:#e8f8ec;border:1px solid #5dbb74}
  .err{background:#fdeaea;border:1px solid #e26a6a}
  /* honeypot (anti-bot) */
  .hp{position:absolute;left:-50000px;top:auto;width:1px;height:1px;overflow:hidden}



.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  justify-content: end;
}

.share-buttons a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
  transition: opacity 0.2s;
}

.share-buttons a:hover {
  opacity: 0.85;
}

.download-items{
  display: flex;
  flex-direction: column;
  gap: 6px; 
  margin-top:12px;
}

.download-items a{
  color: #ef476f; 
}

.info-box {
  display: flex;
  align-items: center;
  gap: 16px;          
  margin: 20px auto;
  background: antiquewhite;
  border-radius: 10px;
  padding: 10px;
}
.info-box img {
  flex-shrink: 0;        /* evita che l'immagine si ridimensioni troppo */
}
.info-box p {
  margin: 0;
}

.grid-5 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, 1fr);
}

  .book-box-title-small{
  font-size:16px;
  letter-spacing: -0.8px;
  text-align: center;
  color: #26547c;
  font-weight: normal;
  margin-top:8px;
  } 
  

@media (max-width:1024px){
  .grid-5{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid-5{ grid-template-columns: minmax(0,1fr); }
}


/* Colori brand */
.share-buttons .facebook  { background: #1877F2; }
.share-buttons .x         { background: #000000; }
.share-buttons .linkedin  { background: #0077B5; }
.share-buttons .reddit    { background: #FF4500; }
.share-buttons .pinterest { background: #E60023; }
.share-buttons .email     { background: #7f7f7f; }


/* footer */


  .footer-nav{
    display:flex;
    align-items:start;
    gap: 18px;
    
  }
  .footer-nav a{
    text-decoration:none;
    color:#fff;
    border-radius:10px;
  }
  .footer-nav a:hover{

    color: #fff0c7;
  }
  .footer-brand{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #FFF;
    font-size: 28px;
    font-weight: 700;
    padding: 2px;
    font-family: 'Finger Paint', sans-serif;  
  }
  
  .footer-bg{
background: #4e9dd4; background-image: url(/assets/img/footer-kid.png);  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;  
  
  }
  
  @media (max-width: 700px){
    .footer-nav{ flex-direction: column; gap: 2px;}
    .footer-brand { font-size: 19px; }
  }  
  
@media (max-width:800px){
  .footer-bg{ background-image: none; }
}  


.book-description h2{
 font-size: 26px;
  font-weight: bold;
  color: #65C151;
  margin: 0;
  padding: 0;
}

.book-description a, .book-description a:visited{
 color: #ef476f;
}

/* blog */

.blog-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.blog-box {
  background: #fff8e7;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  font-family: system-ui, Arial, sans-serif;
}

.blog-box h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #333;
}

.blog-box .subtitle {
  margin: 0 0 16px;
  font-size: 15px;
  color: #666;
}

.blog-box .read-more {
  color: #e86a33;
  text-decoration: none;
  font-weight: bold;
}
.blog-box .read-more:hover {
  text-decoration: underline;
}