/* PacificNew landing sections. Loaded on top of the shared PacificNew pages
   (styles) for the CustomEntekhabLanding landing views. */

/* Banner — LandingSectionType.BannerPictureRow (10). Full-width picture under the header. */
.landing-banner__image {
  inline-size: 100%;
  block-size: auto;
}

/* Product row — LandingSectionType.ProductRow (20). */
.plp-suggestion {
  margin-block-start: 1.5rem;
}

@media (min-width: 48rem) {
  .plp-suggestion {
    margin-block-start: 2rem;
  }
}

@media (min-width: 75rem) {
  .plp-suggestion {
    margin-block-start: 2.5rem;
  }
}

/* The strip's arrows are desktop-only (the list scrolls natively below that). */
.plp-suggestion .product-strip__scroll-btn {
  display: none;
}

@media (min-width: 75rem) {
  .plp-suggestion .product-strip__scroll-btn {
    display: grid;
  }
}

/* Vertical products wrapper card — LandingSectionType.VerticalProductsWrapperCard (50). */
.landing-products-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.landing-products-card__image {
  inline-size: 100%;
}

.landing-products-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Image + title + description cards — LandingSectionType.HorizontalImageTitleDescOption (80).
   1 column on mobile, 2 from tablet, max 3 from desktop. */
.landing-content-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .landing-content-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .landing-content-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.landing-content-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: var(--background-page);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-2);
}

.landing-content-card__image {
  inline-size: 100%;
}

/* Three big products in a row — LandingSectionType.ThreeBigProductsInARowContainer (70).
   1 column on mobile, 2 from tablet, 3 from desktop. */
.landing-bundle-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 48rem) {
  .landing-bundle-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .landing-bundle-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.landing-bundle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: var(--background-page);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-2);
}

.landing-bundle-card__media {
  position: relative;
}

.landing-bundle-card__image {
  inline-size: 100%;
}

.landing-bundle-card__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 5;
  padding: 0.25rem 0.5rem;
  color: var(--clr-white);
  background-color: var(--clr-gray-400);
  border-radius: var(--border-radius-2);
}

.landing-bundle-card__brand-image {
  block-size: 1.5rem;
  inline-size: auto;
}

.landing-bundle-card__discount {
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-2);
}

.landing-bundle-card__more {
  margin-block-start: auto;
}

/* Horizontal option row — LandingSectionType.HorizontalOption (30). */
.landing-option-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 12rem;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

@media (min-width: 48rem) {
  .landing-option-row {
    grid-auto-columns: 13rem;
  }
}

@media (min-width: 75rem) {
  .landing-option-row {
    grid-auto-columns: 14rem;
  }
}

.landing-option-row::-webkit-scrollbar {
  display: none;
}

.landing-option__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.landing-option__image {
  inline-size: 100%;
}