/* =========================================================
   TRENDING PRODUCTS
   Homepage section: a single horizontally-scrolling row of real
   best-sellers (see inc/woocommerce-trending.php). Every value below
   comes from assets/css/base/tokens.css  see BRAND-IDENTITY.md for the
   token reference.

   Scoping: every rule is anchored to .trending-section (or uses
   trending- prefixed class names) so nothing here can leak into other
   sections, same convention as hero.css/testimonials.css.
   ========================================================= */

.trending-section {
  position: relative;
  background: var(--fm-black);
  padding: 64px 72px 76px;
}

/* ---------------- head ---------------- */
.trending-head,
.trending-track-wrap {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.trending-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.trending-nav { display: flex; gap: 10px; flex-shrink: 0; }
.trending-arrow {
  width: 44px; height: 44px;
  border-radius: var(--fm-radius-circle);
  border: 1px solid rgba(var(--fm-rgb-gold), 0.35);
  background: none;
  color: var(--fm-cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--fm-duration-base) var(--fm-ease), background var(--fm-duration-base) var(--fm-ease), opacity var(--fm-duration-base) var(--fm-ease);
}
.trending-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.trending-arrow:hover { border-color: var(--fm-gold); background: rgba(var(--fm-rgb-gold), 0.1); }
.trending-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------------- track ---------------- */
.trending-track-wrap { position: relative; }
.trending-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  /* Native scrollbar hidden  the arrow buttons + touch/trackpad swipe are
     the intended ways to move the row; a visible scrollbar under the
     cards would be redundant clutter here. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trending-track::-webkit-scrollbar { display: none; }
.trending-track .jewel-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  .trending-section { padding: 56px 32px 64px; }
}
@media (max-width: 620px) {
  .trending-section { padding: 48px 20px 56px; }
  .trending-track { gap: 10px; }
  .trending-track .jewel-card { flex-basis: 220px; }
  .trending-arrow { width: 38px; height: 38px; }
}

/* =========================================================
   LIGHT THEME  scoped to .trending-section, see testimonials.css's own
   light-theme comment for why the tokens are redefined here rather than
   globally. Alternates with featured-collections/gifts-for-love above and
   below it on the home page  see featured-collections.css's own
   light-theme block for the full section-by-section sequence.
   ========================================================= */
html[data-theme="light"] .trending-section {
  --fm-black: #F5EDE6;
  --fm-cream: #000000;
  --fm-headline-light: #000000;
  --fm-gold-pale: #C9A236;
}