/* Category mode: Nut Crisps = product poster gallery; Most Popular = spinning carousel */
.category-product-gallery[hidden],
.showcase:not(.showcase-gallery-mode) .category-product-gallery {
  display: none !important;
}

.showcase.showcase-gallery-mode .category-product-gallery,
.showcase.showcase-gallery-mode .category-product-gallery[hidden] {
  display: block !important;
}

.showcase.showcase-gallery-mode .carousel-viewport,
.showcase.showcase-gallery-mode .carousel-controls {
  display: none !important;
}

.showcase:not(.showcase-gallery-mode) .carousel-viewport {
  display: block;
}

.showcase:not(.showcase-gallery-mode) .carousel-controls {
  display: flex;
}

/*
 * Gallery mode: kill fixed 900px/1110px showcase height
 * (that empty cream gap under Nut Crisps product cards).
 */
.showcase.showcase-gallery-mode {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 1.25rem !important;
}

.showcase-gallery-mode .category-tabs {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 3rem !important;
  padding-bottom: 0.5rem !important;
}

.showcase-gallery-mode .category-product-gallery {
  position: relative;
  padding-top: 0.75rem !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0 !important;
}

.showcase-gallery-mode .category-product-grid {
  margin-bottom: 0 !important;
}

/* Don’t leave a tall empty page-shell band under products */
.page-shell {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

.page-shell > .showcase.showcase-gallery-mode + * {
  margin-top: 0.5rem;
}

.showcase-gallery-mode .gallery-arrow-left {
  position: absolute;
  left: 8px;
  top: 42%;
  transform: translateY(-50%);
  z-index: 6;
}

.showcase-gallery-mode .gallery-arrow-right {
  position: absolute;
  right: 8px;
  top: 42%;
  transform: translateY(-50%);
  z-index: 6;
}

.showcase-gallery-mode .gallery-arrow:hover {
  transform: translateY(-50%) scale(1.06);
}