/* =========================================================================
   "Recommended For You" — same shared carousel layout/behaviour as the
   other homepage sections, wrapped in its own orange section background.
   Scoped entirely to .fmke-pcarousel--recommended so nothing else is
   affected.
   ========================================================================= */

.fmke-pcarousel--recommended {
  background: linear-gradient(135deg, #FF6A00, #FF8A3D);
  border-radius: 20px;
  padding: 26px 26px 30px;
  box-shadow: 0 12px 28px rgba(255, 106, 0, .22);
}

.fmke-pcarousel--recommended .fmke-pcarousel__title {
  color: #fff;
}

/* White product cards floating on the orange backdrop, so WooCommerce's
   default card text (dark) stays legible without needing to override
   every element inside the WooCommerce template. */
.fmke-pcarousel--recommended .fmke-pcarousel__track.products li.product {
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

/* Arrows: white-on-orange at rest already has enough contrast, but the
   shared component's hover state turns the arrow solid orange — which
   would vanish against this section's own orange background. Invert to
   dark green on hover here instead. */
.fmke-pcarousel--recommended .fmke-pcarousel__arrow:hover {
  background: var(--fmke-dark, #1F3D2C);
  color: #fff;
  border-color: var(--fmke-dark, #1F3D2C);
}