/* Shared "More Products" cross-sell widget.
   Themes off the host page's --sb-* vars (same family the faqs/reviews widgets
   use) so it reskins to each product's palette; fallbacks match the neutral
   Scrapbook set. Mobile-first: horizontal scroll-snap row; desktop: grid. */

/* Outer widget is a grid item on some host pages — force it to FILL its cell
   instead of shrink-wrapping to content (mirrors how reviews.css fills). */
.more-products-widget {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
  box-sizing: border-box;
}

.more-products {
  --mp-ink: var(--sb-ink, #1a1a1a);
  --mp-muted: var(--sb-muted, #555);
  --mp-line: var(--sb-line, #ece5db);
  --mp-card: var(--sb-card, #ffffff);
  --mp-accent: var(--sb-accent, #2f5d4f);
  --mp-shadow: var(--sb-shadow, 0 8px 22px rgba(30, 23, 15, 0.08));
  --mp-star: #f5a623;

  width: 100%;
  max-width: 1400px;
  margin: 42px auto 8px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ── Section header: title centered (like FAQs), "See all" pinned right ── */
.more-products .mp-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.more-products .mp-title {
  margin: 0;
  /* Reserve equal space on both sides for the absolutely-positioned "See all"
     so the title stays truly centered and never runs under it on narrow widths. */
  padding: 0 72px;
  text-align: center;
  font-family: poppins-bold, system-ui, -apple-system, sans-serif;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mp-ink);
}

.more-products .mp-see-all {
  position: absolute;
  /* Flush with the carousel's visible right edge: the .mp-row full-bleeds out
     by its negative side margin (-16px mobile, -24px desktop). Push "See all"
     out by the same amount so it aligns with the slider's right boundary
     instead of the inset header content edge. */
  right: -16px;
  bottom: 0;
  flex: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: poppins-semibold, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mp-accent);
  white-space: nowrap;
  transition: opacity 0.2s ease, gap 0.2s ease;
}

.more-products .mp-see-all:hover {
  opacity: 0.72;
  gap: 8px;
}

.more-products .mp-see-all-arrow {
  font-size: 15px;
  line-height: 1;
}

/* ── Card row: horizontal scroll-snap slider at EVERY breakpoint ── */
.more-products .mp-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 16px;
  scrollbar-width: none;
  /* Inner padding must fully contain the card shadow (0 8px 22px → ~30px down,
     ~14px up, ~22px sideways); overflow-x:auto clips anything outside this box.
     Negative margins cancel the extra padding so the section's visual position
     and the first card's left edge (aligned with title) don't shift, and the
     row stays net-zero width → no horizontal page scroll. */
  padding: 26px 16px 30px;
  margin: -22px -16px -22px;
}

.more-products .mp-row::-webkit-scrollbar {
  display: none;
}

/* ── Card ── */
.more-products .mp-card {
  scroll-snap-align: start;
  /* Mobile: ~2.5 cards visible (gap 14px, 2 full gaps in view) */
  flex: 0 0 calc((100% - (2 * 14px)) / 2.5);
  display: flex;
  flex-direction: column;
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--mp-shadow);
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.22s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.more-products .mp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(30, 23, 15, 0.14);
}

.more-products .mp-card:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

.more-products .mp-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #f6f2ec 0%, #efe8de 100%);
  overflow: hidden;
}

.more-products .mp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.more-products .mp-card-name {
  margin: 6px 12px 0;
  font-family: poppins-semibold, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  color: var(--mp-ink);
  /* allow up to 2 lines (wrap) but don't reserve height for short names */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.more-products .mp-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 12px 0;
  font-family: poppins-medium, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--mp-muted);
}

.more-products .mp-star {
  color: var(--mp-star);
  font-size: 13px;
  line-height: 1;
}

.more-products .mp-rating-val {
  color: var(--mp-ink);
  font-weight: 600;
}

.more-products .mp-rating-count {
  color: var(--mp-muted);
}

.more-products .mp-card-price {
  margin: 5px 12px 12px;
  font-family: poppins-bold, system-ui, sans-serif;
  font-size: 15px;
  color: var(--mp-ink);
}

.more-products .mp-price-from {
  font-family: poppins-medium, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mp-muted);
  margin-right: 1px;
}

/* ── Tablet: ~3.5 cards visible (transitional) ── */
@media (min-width: 640px) {
  .more-products .mp-row {
    gap: 16px;
  }

  .more-products .mp-card {
    flex: 0 0 calc((100% - (3 * 16px)) / 3.5);
  }
}

/* ── Desktop: ~4.5 cards visible — horizontal slider (no grid) ── */
@media (min-width: 900px) {
  .more-products {
    margin-top: 56px;
    padding: 0;
  }

  .more-products .mp-title {
    font-size: 26px;
  }

  .more-products .mp-see-all {
    /* Desktop .mp-row bleeds by -24px — match it so "See all" stays flush. */
    right: -24px;
  }

  .more-products .mp-row {
    gap: 18px;
    /* Parent has no side padding here; pull the row out into the centered
       whitespace by the same amount we pad in, so the first card stays flush
       with the title and the outer-card shadows aren't clipped. */
    margin: -22px -24px;
    padding: 26px 24px 30px;
    scroll-padding-left: 24px;
  }

  .more-products .mp-card {
    /* 4 full cards + a half-card peek of the 5th; 4 full gaps in view */
    flex: 0 0 calc((100% - (4 * 18px)) / 4.5);
  }

  .more-products .mp-card-name {
    font-size: 15px;
  }
}