@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
/* ============================================================
   NAVBAR UNICA — BRIGHT SIDE STUDIO
   Stessa barra su tutte le pagine del sito: markup identico in ogni pagina,
   stile solo qui. Classi con prefisso bs- per non toccare gli stili della pagina.
   Pulsanti stagionali: .bs-avvento (Calendario dell'Avvento) e .bs-halloween (Dolcetto o sconto).
   ============================================================ */
.bs-nav{position:sticky;top:0;z-index:50;margin:0;padding:0;height:auto;background:rgba(20,33,61,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);font-family:Inter,system-ui,sans-serif}
.bs-nav *{box-sizing:border-box}
.bs-nav a{text-decoration:none}
.bs-nav-in{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px;position:relative}

.bs-logo{display:flex;align-items:center;gap:11px;color:#fff;flex-shrink:0}
.bs-logo svg{display:block}
.bs-name{font-family:Sora,sans-serif;font-weight:800;font-size:18px;line-height:1;color:#fff}
.bs-name small{display:block;font-size:9.5px;font-weight:600;letter-spacing:3px;opacity:.7;margin-top:3px}

.bs-navtoggle{display:none}
.bs-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;cursor:pointer;margin:0}
.bs-burger span{display:block;height:2.5px;width:24px;background:#fff;border-radius:2px;transition:.2s}

.bs-menu{display:flex;gap:24px;align-items:center;margin-left:32px}
.bs-menu a{color:#cfd5e3;font-size:14.5px;font-weight:500;white-space:nowrap;transition:color .15s,background .15s}
.bs-menu a:hover{color:#fff}
.bs-menu a.bs-here{color:#fff;font-weight:700}
.bs-menu .bs-free{display:inline-flex;align-items:center;gap:7px} /* stesso colore e peso delle altre voci: grassetto solo sulla sua pagina */
.bs-dot{width:8px;height:8px;border-radius:50%;background:#FCA311;box-shadow:0 0 8px rgba(252,163,17,.9);animation:bs-nav-pulse 1.6s ease-in-out infinite}
@keyframes bs-nav-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* pulsanti stagionali */
.bs-menu .bs-pill{display:inline-flex;align-items:center;gap:7px;font-family:Sora,sans-serif;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;white-space:nowrap}
/* Calendario dell'Avvento — livrea «notte di neve»: notte navy, bordo ambra, neve che scende, pacchetto regalo che saltella */
.bs-menu .bs-avvento{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#0b1428,#1c2d54);color:#fff;
  border:1.5px solid #FCA311;padding:8px 15px;box-shadow:0 0 14px rgba(252,163,17,.4)}
.bs-menu .bs-avvento::before,.bs-menu .bs-avvento::after{content:"";position:absolute;inset:-40px 0 0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,#fff 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.75) 0 .9px,transparent 1.4px);
  background-size:34px 20px,22px 15px;background-position:0 0,11px 7px;animation:bs-nav-neve 3.2s linear infinite;opacity:.85}
.bs-menu .bs-avvento::after{background-size:47px 26px,29px 18px;background-position:17px 4px,5px 12px;animation-duration:5s;opacity:.5}
@keyframes bs-nav-neve{to{transform:translateY(40px)}}
.bs-menu .bs-avvento svg{filter:drop-shadow(0 0 4px rgba(230,57,70,.8));transform-origin:50% 100%;animation:bs-nav-regalo 2.4s ease-in-out infinite}
@keyframes bs-nav-regalo{0%,55%,100%{transform:none}62%{transform:translateY(-2px) rotate(-12deg)}70%{transform:translateY(-2px) rotate(10deg)}78%{transform:rotate(-6deg)}86%{transform:rotate(3deg)}}
.bs-menu .bs-avvento:hover{background:linear-gradient(180deg,#14213D,#26407a);color:#FFD60A}
.bs-menu .bs-halloween{background:#06080e;color:#F77F00;border:1.5px solid #F77F00;padding:8px 15px;box-shadow:0 0 14px rgba(247,127,0,.5);
  font-family:"Press Start 2P",Sora,monospace;font-size:10.5px;font-weight:400;letter-spacing:.3px}
.bs-menu .bs-halloween svg{width:15px;height:auto;image-rendering:pixelated;animation:bs-nav-bob 1.6s ease-in-out infinite}
.bs-menu .bs-halloween:hover{background:#F77F00;color:#06080e}
/* fantasmino che attraversa il pulsante, dietro la scritta */
.bs-menu .bs-halloween{position:relative;overflow:hidden;isolation:isolate}
.bs-menu .bs-halloween::before{content:"";position:absolute;top:50%;left:-20px;width:17px;height:19px;margin-top:-10px;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23eef1fa' d='M3 0h5v1h-5zM2 1h7v1h-7zM1 2h9v1h-9zM1 3h1v1h-1zM4 3h3v1h-3zM9 3h1v1h-1zM1 4h1v1h-1zM4 4h3v1h-3zM9 4h1v1h-1zM0 5h11v1h-11zM0 6h4v1h-4zM7 6h4v1h-4zM0 7h4v1h-4zM7 7h4v1h-4zM0 8h11v1h-11zM0 9h11v1h-11zM0 10h2v1h-2zM3 10h5v1h-5zM9 10h2v1h-2zM0 11h1v1h-1zM4 11h3v1h-3zM10 11h1v1h-1z'/%3E%3Cpath fill='%2306080e' d='M2 3h2v1h-2zM7 3h2v1h-2zM2 4h2v1h-2zM7 4h2v1h-2zM4 6h3v1h-3zM4 7h3v1h-3z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.4;animation:bs-nav-fantasma 7s linear infinite}
/* il fantasma vola sdraiato (testa in avanti, coda dietro), ondeggia e si inclina piano */
@keyframes bs-nav-fantasma{
  0%{left:-20px;transform:translateY(1px) rotate(78deg)}
  20%{transform:translateY(-3px) rotate(98deg)}
  40%{transform:translateY(2px) rotate(76deg)}
  60%{transform:translateY(-3px) rotate(100deg)}
  80%{transform:translateY(2px) rotate(80deg)}
  100%{left:calc(100% + 2px);transform:translateY(1px) rotate(78deg)}
}
@keyframes bs-nav-bob{50%{transform:translateY(-2px)}}

.bs-menu .bs-cta{padding:10px 18px;font-family:Sora,sans-serif;font-weight:700;font-size:14px;color:#fff;border:1.5px solid #FCA311;border-radius:12px}
.bs-menu .bs-cta:hover{background:#FCA311;color:#14213D}

/* hamburger */
@media(max-width:1320px){
  .bs-burger{display:flex}
  .bs-menu{margin-left:0;position:absolute;top:70px;left:0;right:0;background:#14213D;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 24px 18px;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 18px 30px -16px rgba(0,0,0,.5);display:none}
  .bs-navtoggle:checked ~ .bs-menu{display:flex}
  .bs-menu a{width:100%;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .bs-menu .bs-pill{margin-top:12px;justify-content:center;padding:12px 16px;border-bottom:none}
  .bs-menu .bs-avvento{border-bottom:1.5px solid #FCA311}
  .bs-menu .bs-halloween{padding:12px 16px;border-bottom:1.5px solid #F77F00}
  .bs-menu .bs-cta{margin-top:12px;text-align:center;border-bottom:1.5px solid #FCA311}
}
@media(max-width:560px){
  .bs-nav-in{padding:0 18px}
  .bs-menu{padding:8px 18px 18px}
}
@media (prefers-reduced-motion: reduce){
  .bs-dot,.bs-menu .bs-halloween svg,.bs-menu .bs-halloween::before,.bs-menu .bs-avvento svg,.bs-menu .bs-avvento::before,.bs-menu .bs-avvento::after{animation:none}
}

/* HALLOWEEN (fino al 31 ottobre): «Tool gratuiti» con pipistrello al posto del pallino
   e la scritta HALLOWEEN ED. sotto, centrata. Dal 1° novembre: togliere questo blocco. */
.bs-menu .bs-free{position:relative;top:-4px} /* voce + scritta centrate in verticale sulla barra */
.bs-menu .bs-free .bs-dot{width:17px;height:10px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23F77F00' d='M0 0h1v1h-1zM10 0h1v1h-1zM0 1h2v1h-2zM4 1h1v1h-1zM6 1h1v1h-1zM9 1h2v1h-2zM0 2h3v1h-3zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM8 2h3v1h-3zM1 3h2v1h-2zM3 3h5v1h-5zM8 3h2v1h-2zM2 4h1v1h-1zM4 4h3v1h-3zM8 4h1v1h-1zM5 5h1v1h-1z'/%3E%3Cpath fill='%23FFD60A' d='M4 2h1v1h-1zM6 2h1v1h-1z'/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:none;
  filter:drop-shadow(0 0 4px rgba(247,127,0,.8));animation:bs-nav-bat 1.1s ease-in-out infinite}
@keyframes bs-nav-bat{0%,100%{transform:translateY(0) scaleY(1)}25%{transform:translateY(-2px) scaleY(.55)}50%{transform:translateY(-3px) scaleY(1)}75%{transform:translateY(-1px) scaleY(.55)}}
.bs-menu .bs-free::after{content:"HALLOWEEN ED.";position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:1px;font-family:"Press Start 2P",monospace;
  font-size:6.5px;font-weight:400;letter-spacing:.4px;color:#F77F00;white-space:nowrap;pointer-events:none}
@media(max-width:1320px){
  .bs-menu .bs-free{top:0}
  .bs-menu .bs-free::after{position:static;transform:none;margin:0 0 0 4px;font-size:7.5px}
}
@media (prefers-reduced-motion: reduce){
  .bs-menu .bs-free .bs-dot{animation:none}
}

/* Sito Ready to Use — pulsante pieno ambra (prima dei pulsanti stagionali), alto come il pulsante Halloween.
   Etichetta navy «NEWS» con la scritta che scorre, come il sottopancia dei telegiornali americani. */
.bs-menu .bs-ready{background:#FCA311;color:#14213D;border:1.5px solid #FCA311;height:35px;padding:0 15px 0 6px}
.bs-news{display:inline-block;width:46px;height:21px;overflow:hidden;border-radius:999px;background:#14213D;flex-shrink:0}
.bs-news span{display:inline-block;white-space:nowrap;font:800 9.5px/21px Sora,sans-serif;letter-spacing:.8px;color:#FCA311;animation:bs-nav-news 4s linear infinite}
@keyframes bs-nav-news{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bs-menu .bs-ready:hover{background:#ffb52e;color:#14213D}
@media(max-width:1320px){
  .bs-menu .bs-ready{border-bottom:1.5px solid #FCA311;height:auto;padding:10px 16px}
}
@media (prefers-reduced-motion: reduce){
  .bs-news span{animation:none}
}