/*
  Capri Blu Totem Tablet - v0.4.16
  Ridisegno SOLO della schermata "Il nostro menu".
  Obiettivo: massima leggibilita sul video senza modificare prodotti,
  palmare, gestionale o logica ordini.
*/

/* Pannello menu: vetro blu molto piu stabile e leggibile */
#screen-categories.active {
  place-items: start center !important;
  padding: 18px 22px 96px !important;
}

#screen-categories .gallery-shell {
  width: min(1220px, calc(100vw - 44px)) !important;
  margin: 0 auto !important;
  padding: 22px 24px 30px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(4,29,50,.88), rgba(7,49,82,.80)) !important;
  box-shadow: 0 26px 72px rgba(0,18,32,.38) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  overflow: hidden !important;
}

/* Toolbar: bianca e separata visivamente dal contenuto */
#screen-categories .nav-v2-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  width: 100% !important;
  margin: 0 0 24px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 30px rgba(0,18,32,.18) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#screen-categories .nav-v2-home,
#screen-categories .nav-v2-breadcrumb,
#screen-categories .nav-v2-toolbar a,
#screen-categories .nav-v2-toolbar button {
  color: #123f6d !important;
}

#screen-categories .nav-v2-search {
  background: #fff !important;
  border: 2px solid rgba(18,63,109,.75) !important;
  box-shadow: none !important;
}

#screen-categories .nav-v2-search input {
  color: #173b60 !important;
  background: transparent !important;
}

/* Titolo menu: bianco pieno, senza testi blu sul video */
#screen-categories .gallery-header {
  display: block !important;
  margin: 0 !important;
}

#screen-categories .gallery-header .brand {
  color: rgba(255,255,255,.82) !important;
  letter-spacing: .16em !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

#screen-categories .gallery-header h2 {
  margin: 8px 0 4px !important;
  color: #fff !important;
  font-size: clamp(2.5rem, 5vw, 4.6rem) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,.38) !important;
}

#screen-categories .gallery-intro {
  margin: 0 0 24px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  font-weight: 650 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
}

#screen-categories .gallery-header > .cart-badge {
  display: none !important;
}

/* Carosello: niente card sbiadite o rimpicciolite */
#screen-categories .category-gallery.department-carousel {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  gap: 20px !important;
  padding: 10px 2px 18px !important;
  scroll-padding-inline: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  align-items: stretch !important;
  scroll-snap-type: x mandatory !important;
}

#screen-categories .department-carousel-card,
#screen-categories .department-carousel-card.is-center,
#screen-categories .department-carousel-card:not(.is-center) {
  flex: 0 0 clamp(330px, 42vw, 520px) !important;
  width: clamp(330px, 42vw, 520px) !important;
  max-width: 520px !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  scroll-snap-align: start !important;
}

#screen-categories .department-carousel-card > button,
#screen-categories .department-carousel-card.is-center > button {
  width: 100% !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #0b3152 !important;
  box-shadow: 0 18px 44px rgba(0,12,24,.34) !important;
}

#screen-categories .department-carousel-photo {
  position: relative !important;
  min-height: 360px !important;
  height: clamp(360px, 44vh, 460px) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Elimina il velo grigio: immagine visibile + gradiente scuro solo dove serve */
#screen-categories .department-carousel-overlay {
  background: linear-gradient(
    180deg,
    rgba(3,20,34,.02) 0%,
    rgba(3,20,34,.12) 38%,
    rgba(3,20,34,.82) 74%,
    rgba(3,20,34,.96) 100%
  ) !important;
}

#screen-categories .department-carousel-copy,
#screen-categories .department-carousel-card:not(.is-center) .department-carousel-copy {
  padding: 28px 30px !important;
  color: #fff !important;
  opacity: 1 !important;
  text-align: left !important;
}

#screen-categories .department-carousel-copy small {
  color: rgba(255,255,255,.84) !important;
  font-weight: 700 !important;
}

#screen-categories .department-carousel-copy h3 {
  margin: 6px 0 8px !important;
  color: #fff !important;
  font-size: clamp(2.15rem, 3.8vw, 3.5rem) !important;
  line-height: 1.02 !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.5) !important;
}

#screen-categories .department-carousel-copy p {
  margin: 0 0 18px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 1.05rem !important;
  line-height: 1.42 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.44) !important;
}

#screen-categories .department-carousel-copy strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(5,35,58,.58) !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.18) !important;
}

/* Nessun testo/placeholder deve finire scuro sulla card */
#screen-categories .department-carousel-photo > span {
  color: #fff !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.45) !important;
}

@media (max-width: 900px) {
  #screen-categories .gallery-shell {
    width: calc(100vw - 24px) !important;
    padding: 16px !important;
  }

  #screen-categories .nav-v2-toolbar {
    grid-template-columns: 1fr !important;
  }

  #screen-categories .nav-v2-search {
    grid-column: 1 / -1 !important;
  }

  #screen-categories .department-carousel-card,
  #screen-categories .department-carousel-card.is-center,
  #screen-categories .department-carousel-card:not(.is-center) {
    flex-basis: min(82vw, 500px) !important;
    width: min(82vw, 500px) !important;
  }
}

@media (max-width: 600px) {
  #screen-categories.active {
    padding: 10px 8px 88px !important;
  }

  #screen-categories .gallery-shell {
    width: calc(100vw - 16px) !important;
    border-radius: 20px !important;
  }

  #screen-categories .department-carousel-card,
  #screen-categories .department-carousel-card.is-center,
  #screen-categories .department-carousel-card:not(.is-center) {
    flex-basis: 88vw !important;
    width: 88vw !important;
  }

  #screen-categories .department-carousel-photo {
    min-height: 420px !important;
    height: 58vh !important;
  }
}