/* Scarceranda – aggiunte al tema Rockox originale.
   Caricato per ultimo: qui solo correzioni e parti nuove (menu mobile, foto, shop, carrello). */

/* --- Menu mobile (nel tema originale lo gestiva bootstrap.js) --- */
@media (max-width: 767px) {
  .navbar-collapse.collapse { display: none !important; }
  .navbar-collapse.collapse.in { display: block !important; max-height: 80vh; overflow-y: auto; }
}

/* --- Banner: a tutta larghezza, in proporzione (1290x720); parte subito sotto il menu --- */
section.page-builder-row-section.parallax-main-banner {
  margin-top: var(--nav-h, 57px) !important;            /* altezza reale del menu, da site.js */
  width: 100%;
  height: 55.8vw !important;                            /* 720/1290: immagine intera */
  max-height: calc(100vh - var(--nav-h, 57px));         /* schermi grandissimi: non oltre la finestra */
  padding: 0 !important;
  overflow: hidden;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center 85% !important;           /* se si taglia, si tagliano i fiori in alto, non la scritta */
}
#page-builder-container { padding-top: 0 !important; margin-top: 0 !important; }

/* --- Animazioni "wow": gli elementi compaiono quando entrano nello schermo --- */
.js .wow { visibility: hidden; }
.js .wow.animated { visibility: visible; }

/* --- Galleria foto --- */
.foto-grid { list-style: none; margin: 0; padding: 0; }
.foto-grid > li { list-style: none; margin-bottom: 0; }
.foto-grid > li.nascosto { display: none; }
.foto-grid img { width: 100%; height: auto; display: block; }
.filter-group { text-align: center; margin-bottom: 20px; }

.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; }
.lightbox.aperto { display: flex; }
.lightbox img { max-width: 92vw; max-height: 82vh; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
.lightbox .lb-titolo { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 15px; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; padding: 10px 16px; cursor: pointer; opacity: .85; }
.lightbox button:hover, .lightbox button:focus { opacity: 1; }
.lightbox .lb-chiudi { top: 8px; right: 8px; }
.lightbox .lb-prec { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-succ { right: 6px; top: 50%; transform: translateY(-50%); }

/* --- Contatti: campo trappola antispam --- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Shop --- */
.shop-demo-avviso { background: #fff7d6; border: 1px solid #f6c715; padding: 10px 14px; border-radius: 4px; }
.shop-prodotti { margin-top: 20px; }
.shop-card { border: 1px solid #e3e3e3; padding: 15px; margin-bottom: 30px; text-align: center; background: #fff; }
.shop-card img { width: 100%; height: auto; margin-bottom: 12px; }
.shop-card h3 { font-size: 18px; margin: 10px 0; }
.shop-card .price { font-size: 22px; color: #e11e24; }
.shop-add { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.shop-add input[type=number] { width: 80px; }
.shop-vai { margin-top: 10px; }
.cart-link a { white-space: nowrap; }

/* --- Pagina carrello --- */
.pagina-carrello { padding: 110px 0 60px; }
.carrello-tab .qta { width: 80px; display: inline-block; }
.carrello-tab .totale td { font-size: 18px; border-top: 2px solid #333; }
.btn-link.rimuovi { color: #e11e24; background: none; border: 0; }
.checkout-form { max-width: 820px; margin: 0 auto; }
.pagamento-info { background: #f5f5f5; padding: 10px 14px; }
@media (max-width: 767px) {
  .pagina-carrello { padding-top: 80px; }
}

/* --- Titoli delle sezioni: stessa misura e stessi spazi ovunque --- */
section.page-builder-row-section:not(.parallax-main-banner) { padding: 45px 0 35px; }
.titolo-sezione {
  font-size: 36px !important;
  line-height: 1.1 !important;
  word-spacing: 0.14em !important;   /* proporzionale: si riduce insieme al carattere */
  margin: 0 0 20px !important;
  padding: 0 !important;
}
.titolo-sezione span {
  display: block;
  font-size: 20px !important;
  line-height: 1.3;
  margin-top: 8px;
}
@media (max-width: 991px) {
  .titolo-sezione { font-size: 32px !important; }
}
@media (max-width: 480px) {
  section.page-builder-row-section:not(.parallax-main-banner) { padding: 30px 0 20px; }
  .titolo-sezione { font-size: 26px !important; margin-bottom: 16px !important; }
  .titolo-sezione span { font-size: 16px !important; }
}
.sezione-prezzi .table { margin-top: 0; }

/* --- Testo sotto il banner (claim + presentazione) --- */
.hero-intro { background: #fff; text-align: center; padding: 30px 0 5px; }
.hero-intro .container { max-width: 820px; }
.hero-claim { font-family: 'BebasRegular', sans-serif; font-size: 30px; line-height: 1.15; color: #e5603f; margin: 0 0 12px; letter-spacing: 1px; }
.hero-intro p { font-size: 17px; line-height: 1.6; }
@media (max-width: 480px) {
  .hero-intro { padding: 22px 0 0; }
  .hero-claim { font-size: 22px; }
  .hero-intro p { font-size: 15px; }
}
/* elenchi numerati nei testi (es. Come ordinare) */
.page-builder-element ol { list-style: decimal outside !important; padding-left: 22px; margin: 0 0 15px; }
.page-builder-element ol li { list-style: decimal outside !important; display: list-item; margin-bottom: 6px; padding-left: 4px; }

/* --- Galleria: numero di foto sull'anteprima --- */
.foto-grid .mask a { position: relative; display: block; }
.foto-conta { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 3px 9px; border-radius: 12px; }

/* --- Pagina album --- */
.pagina-album { margin-top: var(--nav-h, 57px); padding-top: 30px !important; min-height: 60vh; }
.album-indietro { margin: 0 0 10px; }
.album-descrizione { max-width: 820px; margin: 0 auto 25px; text-align: center; }
.album-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.album-griglia a { display: block; overflow: hidden; background: #f3f3f3; }
.album-griglia img { width: 100%; height: auto; display: block; transition: transform .3s; }
.album-griglia a:hover img { transform: scale(1.04); }
.album-nav { display: flex; justify-content: space-between; margin: 25px 0 10px; font-size: 15px; }
@media (max-width: 767px) { .album-griglia { grid-template-columns: repeat(2, 1fr); gap: 8px; } }