/* =====================================================================
   D - Redeem "Popular Products Available for Redemption" (Figma 10222:10753).
   White band: centred H2 (Axiforma Medium 32/45) over a horizontal carousel
   of 210x350 product cards flanked by 40px prev/next chevrons. The track is a
   native horizontal scroller with scroll-snap; arrows are progressive
   enhancement. Content locked to the 1240 area via .container. Tokens only.
   ===================================================================== */

.redeem-products {
  background: var(--color-bg);
  padding-block: var(--redeem-band-pad-y);
}

.redeem-products__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--redeem-stack-gap);
}

/* ---- Heading (Axiforma Medium 32/45 — OG Desktop H2) ---- */
.redeem-products__heading {
  margin: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-32);
  line-height: var(--lh-45);
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Carousel: [prev] track [next] ---- */
.redeem-products__carousel {
  display: flex;
  align-items: center;
  gap: var(--redeem-stack-gap);
  width: 100%;
}

.redeem-products__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.redeem-products__arrow[disabled] { opacity: 0.3; cursor: default; }

.redeem-products__arrow-icon {
  width: 13px;
  height: 21px;
  background-color: var(--gray-6);
  transition: background-color 0.15s ease;
  -webkit-mask: url("../../img/carousel-arrow.svg") no-repeat center / contain;
          mask: url("../../img/carousel-arrow.svg") no-repeat center / contain;
}
.redeem-products__arrow:hover .redeem-products__arrow-icon { background-color: var(--gray-8); }
.redeem-products__arrow--next .redeem-products__arrow-icon { transform: rotate(180deg); }

/* ---- Track: horizontal scroller, snap to cards ---- */
.redeem-products__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--redeem-stack-gap);
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: center;
}
.redeem-products__track::-webkit-scrollbar { display: none; }
/* When the cards overflow (more than fit), pin to the start so paging reads naturally. */
.redeem-products__track--overflow { justify-content: flex-start; }

/* ---- Product card (210x350) ---- */
.redeem-products__card {
  flex: none;
  width: 210px;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--redeem-stack-gap);
  padding: 45px 20px 40px;
  background: var(--gray-0);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-10);
  scroll-snap-align: start;
}

.redeem-products__media {
  flex: none;
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.redeem-products__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Name (Axiforma Regular 16, black, centred) */
.redeem-products__name {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: normal;
  color: var(--gray-8);
  text-align: center;
  word-break: break-word;
}

/* ---- Tablet (≤1023.98): show 2–3 cards per view, keep arrows ---- */
@media (max-width: 1023.98px) {
  .redeem-products__heading {
    font-size: clamp(26px, 3.2vw, var(--fs-32));
    line-height: 1.35;
  }
}

/* ---- Large-mobile (≤767.98): reduced heading ---- */
@media (max-width: 767.98px) {
  .redeem-products__heading {
    font-size: var(--fs-26, 26px);
    line-height: var(--lh-36, 36px);
  }
}

/* ---- Phone (≤599.98): full-bleed scroller, no arrows (re-scope from 767.98) ---- */
@media (max-width: 599.98px) {
  .redeem-products__arrow { display: none; }
  .redeem-products__track {
    justify-content: flex-start;
    margin-inline: calc(var(--pad-mobile) * -1);
    padding-inline: var(--pad-mobile);
    scroll-padding-inline: var(--pad-mobile);
  }
}