/* =============================================================
   InfoHub Store — home
   Banner, benefits bar and product rows. Depends on base.css,
   layout.css and shop.css (product cards).
   ============================================================= */

/* Banner — full width; wide images around 2560 × 700. */
.ih-banner {
  position: relative;
  background-color: hsl(var(--ih-muted));
}

.ih-banner__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.ih-banner__track::-webkit-scrollbar { display: none; }

.ih-banner__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.ih-banner__slide a { display: block; }

.ih-store .ih-banner__slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  aspect-ratio: 2560 / 700;
  object-fit: cover;
}

.ih-banner__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: hsl(var(--ih-card) / 0.92);
  color: hsl(var(--ih-foreground));
  box-shadow: 0 4px 16px rgb(15 23 42 / 0.16);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ih-banner__arrow:hover { background-color: hsl(var(--ih-card)); }
.ih-banner__arrow--prev { left: 20px; }
.ih-banner__arrow--next { right: 20px; }

.ih-banner__dots {
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ih-banner__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background-color: hsl(var(--ih-card) / 0.6);
  cursor: pointer;
  transition: width 200ms ease, background-color 200ms ease;
}

.ih-banner__dots button.is-active { width: 24px; background-color: hsl(var(--ih-card)); }

/* Benefits bar — small icon beside each line, items centred. */
.ih-benefits {
  background-color: hsl(var(--ih-card));
  border-bottom: 1px solid hsl(var(--ih-border));
}

.ih-benefits__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 44px;
  margin: 0 auto;
  padding-top: 14px;
  padding-bottom: 14px;
  list-style: none;
}

.ih-benefit { display: flex; align-items: center; gap: 10px; }

.ih-benefit__icon { display: flex; flex-shrink: 0; color: hsl(var(--ih-primary)); }
.ih-benefit__icon .ih-icon { width: 18px; height: 18px; }

.ih-benefit__copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ih-benefit__copy strong { font-size: 13px; font-weight: 600; }
.ih-benefit__copy small { color: hsl(var(--ih-muted-foreground)); font-size: 12px; }

/* Product rows */
.ih-home { padding-bottom: 40px; }

.ih-row { padding-top: 44px; }

.ih-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ih-store .ih-row__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ih-row__actions { display: flex; align-items: center; gap: 8px; }
.ih-row__more { margin-right: 6px; font-size: 13px; font-weight: 600; }

.ih-row__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid hsl(var(--ih-border));
  border-radius: 50%;
  background-color: hsl(var(--ih-card));
  color: hsl(var(--ih-foreground));
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.ih-row__arrow:hover { background-color: hsl(var(--ih-accent)); }
.ih-row__arrow:disabled { opacity: 0.35; cursor: default; }

/* The row scrolls sideways; four cards fit on a wide screen. */
.ih-store .ih-carousel ul.products.ih-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  grid-template-columns: none;
  gap: 20px;
  padding: 4px 2px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.ih-store .ih-carousel ul.products.ih-carousel__track::-webkit-scrollbar { display: none; }
.ih-store .ih-carousel ul.products.ih-carousel__track > li.product { scroll-snap-align: start; }

/* Rows that fit without scrolling hide their arrows (set by theme.js). */
.ih-row.is-static .ih-row__arrow { display: none; }

@media (max-width: 1100px) {
  .ih-store .ih-carousel ul.products.ih-carousel__track { grid-auto-columns: calc((100% - 40px) / 3); }
}

@media (max-width: 820px) {
  .ih-store .ih-carousel ul.products.ih-carousel__track { grid-auto-columns: calc((100% - 16px) / 2.15); gap: 16px; }
}

@media (max-width: 768px) {
  .ih-store .ih-banner__slide img { aspect-ratio: 16 / 7; }
  .ih-banner__arrow { display: none; }

  .ih-benefits__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 12px; }

  .ih-row { padding-top: 32px; }
  .ih-store .ih-row__title { font-size: 19px; }
  .ih-row__arrow { display: none; }
}

@media (max-width: 560px) {
  .ih-store .ih-carousel ul.products.ih-carousel__track { grid-auto-columns: 76%; }
}

/* Grid with every product, below the carousels. */
.ih-row--grid { padding-bottom: 8px; }