/*
  HUB Capri Blu - Totem Tablet v0.4.15
  Correzioni mirate di layout DOPO rollback v0.4.14.
  Questo file NON modifica app.css e NON usa regole globali sul sito.
*/

/* 1) BENVENUTO: stessa estetica vetro scuro delle altre schermate iniziali */
#screen-home > .card.welcome-card {
  border: 1px solid rgba(255,255,255,.32) !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(5,38,63,.68), rgba(4,27,45,.46)) !important;
  box-shadow: 0 24px 64px rgba(0,18,32,.30), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

#screen-home .brand,
#screen-home h1,
#screen-home h2,
#screen-home .intro,
#screen-home .screen-description,
#screen-home .status {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.30) !important;
}

/* I pulsanti del benvenuto restano nettamente distinguibili */
#screen-home .button-secondary {
  border-color: rgba(255,255,255,.82) !important;
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

/* 2) MENU/PRODOTTI: il pannello deve stare sotto al brand, senza sovrapposizioni */
#screen-categories.active,
#screen-products.active {
  place-items: start center !important;
  padding: 8px 20px 96px !important;
}

#screen-categories .gallery-shell,
#screen-products .gallery-shell {
  width: min(1180px, calc(100vw - 40px)) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 24px !important;
  overflow: visible !important;
}

/* La barra Home / breadcrumb / ricerca non deve più incastrarsi nel logo superiore */
#screen-categories .nav-v2-toolbar,
#screen-products .nav-v2-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 20 !important;
  width: 100% !important;
  margin: 0 0 22px !important;
}

/* Titoli leggibili sul pannello scuro */
#screen-categories .gallery-header,
#screen-products .gallery-header {
  position: relative !important;
  z-index: 5 !important;
  grid-template-columns: 1fr !important;
  margin-bottom: 10px !important;
}

#screen-categories .gallery-header .brand,
#screen-categories .gallery-header h2,
#screen-categories .gallery-intro,
#screen-products .gallery-header .brand,
#screen-products .gallery-header h2 {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.35) !important;
}

/* Esiste già il carrello flottante: nasconde solo il duplicato dentro gli header */
#screen-categories .gallery-header > .cart-badge,
#screen-products .gallery-header > .cart-badge {
  display: none !important;
}

/* 3) CAROSELLO REPARTI: una card principale, con anteprima laterale senza tagli eccessivi */
#screen-categories .category-gallery.department-carousel {
  width: 100% !important;
  max-width: 100% !important;
  gap: 18px !important;
  padding: 18px 11% 28px !important;
  scroll-padding-inline: 11% !important;
  align-items: center !important;
}

#screen-categories .department-carousel-card {
  flex: 0 0 78% !important;
  max-width: 820px !important;
}

#screen-categories .department-carousel-photo {
  min-height: clamp(360px, 48vh, 520px) !important;
}

#screen-categories .department-carousel-copy {
  padding: clamp(24px, 4vw, 44px) !important;
}

#screen-categories .department-carousel-copy h3 {
  font-size: clamp(2rem, 4.6vw, 4rem) !important;
}

/* 4) PRODOTTI: griglia elastica, nessuna terza card tagliata fuori schermo */
#screen-products .product-gallery,
#nav-v2-search-results.product-gallery {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

#screen-products .product-card,
#nav-v2-search-results .product-card {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#screen-products .product-card .product-image,
#nav-v2-search-results .product-card .product-image {
  min-height: 200px !important;
  height: 220px !important;
}

#screen-products .product-card .product-image img,
#nav-v2-search-results .product-card .product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 5) Responsive: solo le schermate interessate */
@media (max-width: 1000px) {
  #screen-categories .nav-v2-toolbar,
  #screen-products .nav-v2-toolbar {
    grid-template-columns: auto 1fr !important;
  }

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

  #screen-categories .department-carousel-card {
    flex-basis: 86% !important;
  }
}

@media (max-width: 700px) {
  #screen-home > .card.welcome-card {
    width: min(94vw, 920px) !important;
    padding: 34px 24px !important;
  }

  #screen-categories.active,
  #screen-products.active {
    padding-inline: 10px !important;
  }

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

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

  #screen-categories .category-gallery.department-carousel {
    padding-inline: 5% !important;
    scroll-padding-inline: 5% !important;
  }

  #screen-categories .department-carousel-card {
    flex-basis: 92% !important;
  }

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

  #screen-products .product-gallery,
  #nav-v2-search-results.product-gallery {
    grid-template-columns: 1fr !important;
  }
}