/**
 * Custom Product Recommendation Section
 * Swiper-based carousel with product recommendations
 */

product-recommendations {
  display: block;
}

.custom-product-recommendation {
  padding-top: clamp(var(--padding-top-mobile), 4vw, var(--padding-top-desktop));
  padding-bottom: clamp(var(--padding-bottom-mobile), 4vw, var(--padding-bottom-desktop));

  --block-gap-mobile: 20px;
  --block-gap-desktop: 30px;

  .custom-product-recommendation__container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
  }

  /* Header */
  .custom-product-recommendation__header {
    margin-bottom: clamp(1.875rem, 4vw, 3.125rem);
  }

  .custom-product-recommendation__heading {
    margin: 0;
    font-weight: 800;
    text-align: left;
  }

  @media screen and (min-width: 768px) {
    .custom-product-recommendation__header--left {
      text-align: left;
    }

    .custom-product-recommendation__header--center {
      text-align: center;
    }

    .custom-product-recommendation__header--right {
      text-align: right;
    }
  }

  /* Slider Container */
  .custom-product-recommendation__slider-container {
    opacity: 1;
    transition: opacity 0.3s ease;

    @media screen and (max-width: 767px) {
      padding-left: 1.25rem;
    }
  }

  .custom-product-recommendation__slider-container.loading {
    opacity: 0.2;
  }

  /* Desktop Layout Variants */
  .custom-product-recommendation--desktop-carousel {
    padding-left: clamp(1.2rem, 8vw, 7.5rem);
  }

  .custom-product-recommendation__slide {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    max-width: 85%;

    @media screen and (min-width: 420px) {
      max-width: 22.5rem;
    }

    @media screen and (min-width: 1800px) {
      max-width: calc(100% / 4.9);
    }

    @media screen and (min-width: 1900px) {
      max-width: calc(100% / 5.9);
    }
  }
}