/* ============================================================
   Home page only styles (index.php)
   ============================================================ */

/* ── Hero overlay ── */
.bg-overlay-secondary-gradient:before {
  background-color: #eeeeeead !important;
  background-image: linear-gradient(90deg, rgba(37, 55, 69, 0) 0%, rgba(45, 26, 71, 0.04) 3%, rgb(200 200 201 / 46%) 80%) !important;
}

/* ── Branded Ingredients Carousel ── */
.slick-arrow:before {
  font-family: "icomoon" !important;
  font-size: 16px !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background-color: var(--color-primary) !important;
}
.slick-prev:before { content: "\e941" !important; }
.slick-next:before { content: "\e942" !important; }

.fancybox-carousel .fancybox-item { padding: 20px 24px 24px !important; }
.fancybox-carousel .slick-carousel { padding: 0 90px; }
.fancybox-carousel .slick-arrow.slick-prev { left: 15px; }
.fancybox-carousel .slick-arrow.slick-next { right: 15px; }
.fancybox-carousel .slick-track { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; }
.fancybox-carousel .slick-slide { float: none !important; height: auto !important; display: flex !important; align-items: stretch !important; }
.fancybox-carousel .slick-slide > div { display: flex !important; width: 100% !important; }
.fancybox-carousel .fancybox-item { width: 100% !important; display: flex !important; flex-direction: column !important; }
.fancybox-carousel .fancybox-body { flex: 1 !important; display: flex !important; flex-direction: column !important; }
.fancybox-carousel .fancybox-body .btn { margin-top: auto !important; }
.fancybox-carousel .fancybox-body img { max-height: 115px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; }
.fancybox-carousel .slick-dots { margin-top: 24px; }

.fancybox-layout3 .fancybox-item {
  flex: 0 0 calc(50% - 15px) !important;
  max-width: calc(50% - 15px) !important;
}

/* ── Health Solutions list cards ── */
.listcard {
  border: 1px #f1f1f1 solid;
  padding: 16px 21px;
  border-color: #edecec !important;
  margin-bottom: 20px;
  border-radius: 50px;
}
.listcard span { font-size: 20px; font-weight: normal; }

/* ── Ingredient Categories — image cards (home) ── */
.category-card-grid {
  row-gap: 24px;
}
.category-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Source images vary by a few px in height; lock every card to one ratio
     so the grid rows line up. cover crops ~3px of padding, never the text. */
  aspect-ratio: 700 / 725;
}
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(68, 38, 106, 0.18);
}

/* ── Branded Ingredients carousel (home) ──
   Drop the divider under the title (style.css:5012 sets border-bottom + padding
   on fancybox-layout4 titles) and centre the logo and name. Selectors match the
   template's 3-class specificity and load later, so they win. */
.fancybox-layout4 .fancybox-item .fancybox-title {
  border-bottom: 0;
  padding-bottom: 0;
}
.fancybox-layout4 .fancybox-item .fancybox-body {
  text-align: center;
}
.fancybox-layout4 .fancybox-item .fancybox-body img {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}