/* =============================================================
   Hero banner themes — page tokens + slide variants
   Shared layout: css/dhatri-banners.css
   ============================================================= */

/* ---- Map page brand tokens to banner variables ---- */
.page-fitlys {
  --dhatri-brown: var(--fitlys-green);
  --dhatri-brown-dark: var(--fitlys-green-dark);
  --dhatri-brown-mid: var(--fitlys-green-mid);
  --dhatri-brown-soft: var(--fitlys-green-soft);
  --dhatri-cream: var(--fitlys-cream);
  --dhatri-cream-deep: var(--fitlys-mint);
  --dhatri-warm: var(--fitlys-leaf);
  --dhatri-warm-deep: var(--fitlys-leaf-deep);
}

.page-cloffy {
  --dhatri-brown: var(--cloffy-brown);
  --dhatri-brown-dark: var(--cloffy-brown-dark);
  --dhatri-brown-mid: var(--cloffy-brown-mid);
  --dhatri-brown-soft: var(--cloffy-brown-soft);
  --dhatri-cream: var(--cloffy-cream);
  --dhatri-cream-deep: var(--cloffy-cream-deep);
  --dhatri-warm: var(--cloffy-warm);
  --dhatri-warm-deep: var(--cloffy-warm-deep);
}

.page-gifting {
  --dhatri-brown: var(--gift-brown);
  --dhatri-brown-dark: var(--gift-brown-dark);
  --dhatri-brown-mid: var(--gift-brown-mid);
  --dhatri-brown-soft: var(--gift-brown-soft);
  --dhatri-cream: var(--gift-cream);
  --dhatri-cream-deep: var(--gift-paper);
  --dhatri-warm: var(--gift-warm);
  --dhatri-warm-deep: var(--gift-warm-deep);
}

.page-chocolates {
  --dhatri-brown: #5c3428;
  --dhatri-brown-dark: #3d2219;
  --dhatri-brown-mid: #6b3f30;
  --dhatri-brown-soft: #9d7868;
  --dhatri-cream: #fff8f4;
  --dhatri-cream-deep: #faf4ee;
  --dhatri-warm: #E6C5AA;
  --dhatri-warm-deep: #d4a574;
}

.page-fitlys .fitlys-hero {
  --dhatri-dot-inactive: rgba(57, 109, 27, 0.32);
  --dhatri-dot-active: var(--fitlys-green);
}

.page-cloffy .cloffy-hero,
.page-gifting .gift-hero,
.page-chocolates .chocolates-hero {
  --dhatri-dot-inactive: rgba(92, 52, 40, 0.28);
  --dhatri-dot-active: var(--dhatri-brown-mid);
}

.page-cloffy .cloffy-banner__leaf,
.page-gifting .gift-banner__leaf,
.page-chocolates .chocolates-banner__leaf {
  filter: sepia(0.45) hue-rotate(-15deg) saturate(1.4);
}

.page-cloffy .cloffy-banner__diagonal,
.page-chocolates .chocolates-banner__diagonal {
  background: linear-gradient(165deg, rgba(92, 52, 40, 0.06) 0%, rgba(61, 34, 25, 0.14) 100%);
}

/* ---- Fitlys slide backgrounds ---- */
.fitlys-banner--frozen {
  background: linear-gradient(118deg, #f4fbf2 0%, #e8f5e9 42%, #dcefd8 100%);
}

.fitlys-banner--dairy {
  background: linear-gradient(118deg, #f7fcf5 0%, #eef8eb 44%, #e2f2dc 100%);
}

.fitlys-banner--spreads {
  background: linear-gradient(118deg, #fafdf8 0%, #f0f7ec 46%, #e5f0df 100%);
}

.fitlys-banner--chutney {
  background: linear-gradient(118deg, #f6fbf4 0%, #ebf5e8 44%, #deecda 100%);
}

/* ---- Cloffy slide backgrounds ---- */
.cloffy-banner--decoction {
  background: linear-gradient(118deg, #faf6f2 0%, #fdeee6 44%, #f5ddd0 100%);
}

.cloffy-banner--powder {
  background: linear-gradient(118deg, #fff8f4 0%, #fdeee6 46%, #f0dcc8 100%);
}

.cloffy-banner--drip {
  background: linear-gradient(118deg, #faf6f2 0%, #f5ebe3 44%, #edd9c8 100%);
}

.cloffy-banner--chocolate {
  background: linear-gradient(118deg, #fff8f4 0%, #fdeee6 45%, #f0dcc8 100%);
}

.cloffy-banner--coaster {
  background: linear-gradient(118deg, #fff5f1 0%, #fdeee6 45%, #e6c5aa 100%);
}

/* ---- Cloffy product backdrop: circle + rotating ring ---- */
@keyframes cloffy-ring-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.page-cloffy .cloffy-banner__arch,
.page-gifting .gift-banner__arch {
  width: min(340px, 88%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 42% 32%,
    #ffffff 0%,
    var(--dhatri-warm) 50%,
    var(--dhatri-warm-deep) 100%
  );
  box-shadow:
    inset 0 -10px 28px rgba(92, 52, 40, 0.12),
    0 22px 52px rgba(92, 52, 40, 0.16);
}

.page-cloffy .cloffy-banner__arch::after,
.page-gifting .gift-banner__arch::after {
  inset: 12%;
  border-radius: 50%;
  border-color: rgba(92, 52, 40, 0.14);
  animation: cloffy-ring-spin 20s linear infinite;
  transform-origin: center center;
}

.page-cloffy .cloffy-banner__product,
.page-gifting .gift-banner__product {
  animation: none;
  filter:
    drop-shadow(0 10px 18px rgba(92, 52, 40, 0.18))
    drop-shadow(0 24px 44px rgba(92, 52, 40, 0.26))
    brightness(1.03)
    contrast(1.04)
    saturate(1.06);
}

.page-cloffy .cloffy-banner__tag,
.page-gifting .gift-banner__tag {
  width: 104px;
  height: 104px;
  font-size: 12px;
  font-weight: 900;
}

.page-cloffy .cloffy-banner__tag span,
.page-gifting .gift-banner__tag span {
  font-size: 10px;
  font-weight: 800;
  color: var(--dhatri-brown);
}

@media (prefers-reduced-motion: reduce) {
  .page-cloffy .cloffy-banner__arch::after,
  .page-gifting .gift-banner__arch::after,
  .page-fitlys .fitlys-banner__arch::after,
  .page-dhatri .dhatri-banner__arch::after {
    animation: none;
  }
}

/* ---- Fitlys + Dhatri banner circle + tag ---- */
.page-fitlys .fitlys-banner__arch,
.page-dhatri .dhatri-banner__arch {
  width: min(340px, 88%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 42% 32%,
    #ffffff 0%,
    var(--dhatri-warm) 50%,
    var(--dhatri-warm-deep) 100%
  );
}

.page-fitlys .fitlys-banner__arch {
  box-shadow:
    inset 0 -10px 28px rgba(57, 109, 27, 0.12),
    0 22px 52px rgba(57, 109, 27, 0.16);
}

.page-dhatri .dhatri-banner__arch {
  box-shadow:
    inset 0 -10px 28px rgba(57, 109, 27, 0.1),
    0 22px 52px rgba(57, 109, 27, 0.16);
}

.page-fitlys .fitlys-banner__arch::after,
.page-dhatri .dhatri-banner__arch::after {
  inset: 12%;
  border-radius: 50%;
  border-color: rgba(57, 109, 27, 0.14);
  animation: cloffy-ring-spin 20s linear infinite;
  transform-origin: center center;
}

.page-fitlys .fitlys-banner__tag,
.page-dhatri .dhatri-banner__tag {
  width: 104px;
  height: 104px;
  font-size: 12px;
  font-weight: 900;
}

.page-fitlys .fitlys-banner__tag span,
.page-dhatri .dhatri-banner__tag span {
  font-size: 10px;
  font-weight: 800;
  color: var(--dhatri-brown);
}

.page-fitlys .fitlys-banner__product,
.page-dhatri .dhatri-banner__product {
  filter:
    drop-shadow(0 10px 18px rgba(57, 109, 27, 0.18))
    drop-shadow(0 24px 44px rgba(57, 109, 27, 0.26))
    brightness(1.03)
    contrast(1.04)
    saturate(1.06);
}

/* ---- Gifting slide backgrounds ---- */
.gift-banner--budget {
  background: linear-gradient(118deg, #fff8f4 0%, #fdeee6 44%, #f5ddd0 100%);
}

.gift-banner--corporate {
  background: linear-gradient(118deg, #faf4ee 0%, #f5ebe3 46%, #edd9c8 100%);
}

.gift-banner--custom {
  background: linear-gradient(118deg, #fff5f1 0%, #fdeee6 44%, #f0dcc8 100%);
}

.gift-banner--festive {
  background: linear-gradient(118deg, #fff8f4 0%, #fdeee6 45%, #e8a99a 100%);
}

/* ---- Gifting banners: no hover animation on the product ---- */
.page-gifting .gift-banner:hover .gift-banner__product {
  transform: none;
}

/* ---- Gifting banner title: fully uniform color + nudged down ---- */
.page-gifting .gift-banner__title,
.page-gifting .gift-banner__title em,
.page-gifting .gift-banner__title b,
.page-gifting .gift-banner__title span,
.page-gifting .gift-banner__title a {
  color: var(--gift-brown);
}

@media screen and (min-width: 768px) {
  .page-gifting .gift-banner__title {
    margin-top: clamp(32px, 6vw, 72px);
  }
}

/* ---- Chocolates slide backgrounds ---- */
.chocolates-banner--almond {
  background: linear-gradient(118deg, #faf6f2 0%, #fdeee6 44%, #e6c5aa 100%);
}

.chocolates-banner--coffee {
  background: linear-gradient(118deg, #3a2419 0%, #4a2e22 42%, #6b3f30 100%);
  color: #fff8f4;
}

.chocolates-banner--coffee .chocolates-banner__title,
.chocolates-banner--coffee .chocolates-banner__lead,
.chocolates-banner--coffee .chocolates-banner__perks li {
  color: #fff8f4;
}

.chocolates-banner--coffee .chocolates-banner__title em {
  color: var(--dhatri-warm);
}

.chocolates-banner--coffee .chocolates-banner__perks i {
  color: var(--dhatri-warm);
}

.chocolates-banner--coffee .chocolates-banner__perks li {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

.chocolates-banner--coffee .chocolates-banner__cta {
  background: var(--dhatri-warm-deep);
  border-color: var(--dhatri-warm-deep);
  color: var(--dhatri-brown-dark);
}

.chocolates-banner--hazelnut {
  background: linear-gradient(118deg, #fff8f4 0%, #f5ebe3 46%, #d4a574 100%);
}

/* ---- Tablet & mobile banner polish (all brand pages) ---- */
@media screen and (max-width: 991px) {
  :is(.dhatri-banner__arch, .cloffy-banner__arch, .fitlys-banner__arch, .gift-banner__arch, .chocolates-banner__arch),
  :is(.dhatri-banner__arch, .cloffy-banner__arch, .fitlys-banner__arch, .gift-banner__arch, .chocolates-banner__arch)::after {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  :is(.dhatri-banner__tag, .cloffy-banner__tag, .fitlys-banner__tag, .gift-banner__tag, .chocolates-banner__tag) {
    display: none !important;
  }

  .page-cloffy .cloffy-banner__product,
  .page-gifting .gift-banner__product {
    filter:
      drop-shadow(0 12px 20px rgba(92, 52, 40, 0.2))
      drop-shadow(0 26px 44px rgba(92, 52, 40, 0.22));
  }

  .page-fitlys .fitlys-banner__product,
  .page-dhatri .dhatri-banner__product {
    filter:
      drop-shadow(0 12px 20px rgba(57, 109, 27, 0.2))
      drop-shadow(0 26px 44px rgba(57, 109, 27, 0.18));
  }
}