.whhb-section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 16px;
  position: relative;
}
.whhb-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.whhb-subtitle { font-size: 14px; color: #6c868e; margin: 0 0 18px; }

.whhb-viewport { position: relative; }

.whhb-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.whhb-track::-webkit-scrollbar { display: none; }

.whhb-item {
  flex: 0 0 calc((100% - (var(--whhb-items, 4) - 1) * 16px) / var(--whhb-items, 4));
  scroll-snap-align: start;
  min-width: 0;
}

@media (max-width: 991px) {
  .whhb-item { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 575px) {
  .whhb-item { flex-basis: 85%; }
}

.whhb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #dfe5e8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.whhb-nav--prev { left: -4px; }
.whhb-nav--next { right: -4px; }
.whhb-nav[hidden] { display: none; }

/* Prodotti */
.whhb-product {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #f0f3f4;
  border-radius: 6px;
  overflow: hidden;
}
.whhb-product:hover, .whhb-product:focus { color: inherit; text-decoration: none; }
.whhb-product__image { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fafbfb; display: block; }
.whhb-product__body { padding: 12px; }
.whhb-product__name {
  font-size: 14px; font-weight: 600; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.whhb-product__price { font-size: 15px; font-weight: 700; }

/* Marche */
.whhb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  border: 1px solid #f0f3f4;
  border-radius: 6px;
  padding: 10px;
}
.whhb-brand img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: filter .2s ease, opacity .2s ease; }
.whhb-brand:hover img { filter: grayscale(0%); opacity: 1; }