/* ==========================================================================
   WV PDP — Ingredient Spotlight (F5 only)
   --------------------------------------------------------------------------
   Section wrapper around parts/carousel.php (focus="left") + the reusable
   Ingredient Card (parts/ingredient-card.php). Heading "Inside our
   [Product Name]" with the product name visually emphasized, optional
   subheading, an arrow pair above the carousel, then the left-focused
   carousel of ingredient cards.

   Card styles live in assets/css/wv-ingredient-card.css — this file only
   carries the section chrome.

   Focus/muted visuals come from the carousel itself (scale + opacity on
   non-focused slides via data-focused on each card).

   Typography fully delegated to global classes applied in the template
   (.wv-h2 on heading, .wv-body-lg on subheading). No local font-family /
   font-size / font-weight / line-height declarations.
   ========================================================================== */

/* ── Section ─────────────────────────────────────────────────────────── */

.wv-pdp-ing-spot {
  background: var(--wv-color-background);
  /* NEEDS DESIGNER REVIEW: section vertical padding (starter 80/80). */
  padding: 80px 0;
}

.wv-pdp-ing-spot__inner {
  /* Carousel-section width exception per CLAUDE.md v15: outer cap at
     --wv-container-max (1440) with padding cadence 0 24/50/80 yields
     1280 effective inner at desktop. Matches the PDP-family pattern
     (related-products, pairs-with, addon-featured) and Support For. */
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.wv-pdp-ing-spot__heading {
  text-align: center;
  /* NEEDS DESIGNER REVIEW: gap below heading. */
  margin: 0 0 16px;
}

.wv-pdp-ing-spot__subheading {
  text-align: center;
  /* NEEDS DESIGNER REVIEW: gap below subheading before arrows. */
  margin: 0 0 24px;
}

.wv-pdp-ing-spot__arrows {
  display: flex;
  justify-content: center;
  /* NEEDS DESIGNER REVIEW: gap between prev/next arrows. */
  gap: 12px;
  /* NEEDS DESIGNER REVIEW: gap below arrow row before carousel. */
  margin: 0 0 24px;
}

/* ── Responsive tiers ────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .wv-pdp-ing-spot__inner {
    padding: 0 50px;
  }
}

@media (min-width: 1280px) {
  .wv-pdp-ing-spot__inner {
    padding: 0 80px;
  }
}