.jiffy-promotion:has(.jiffy-promotion-custom) {
  display: flex;
  align-items: center;

  .jiffy-promotion-custom {
    img {
      border-radius: 15px;
    }
  }
}

.jiffy-promotion__boxes {
  --primary: #98002e;
  --grey: #4a5565;

  margin: 1rem;

  .jiffy-promotion:not(:has(.jiffy-promotion-custom)) {
    padding: 1rem;
    border: 2px dashed var(--primary);
  }

  /* B + C */
  .jiffy-promotion__box--carousel {
    display: flex;

    .jiffy-promotion-nav-header {
      margin-bottom: 0;
      margin-right: auto;
    }

    .jiffy-promotion-container {
      .jiffy-promotion {
        height: 100%;
        min-height: 100%;
        border-radius: 10px;

        .jiffy-promotion-custom {
          img {
            border-radius: 15px;
          }
        }

        .jiffy-promotion-wrapper {
          min-height: 100%;
        }

        /* ------------------------------------------------------------------
         * Merged link + wrapper is the flex container.
         * The four content groups (logo, text, cta-row, disclaimer) are its
         * direct children. The overlay + stretched card-link are positioned,
         * NOT flex items.
         * ------------------------------------------------------------------ */
        .jiffy-promotion__link.jiffy-promotion-wrapper,
        .jiffy-promotion__link + .jiffy-promotion-wrapper,
        .jiffy-promotion__link .jiffy-promotion-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          position: relative; /* anchor for overlay + stretched link */

          /* Overlay: positioned, not a flex item */
          .jiffy-promotion-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
          }

          /* Stretched whole-card link (empty <a> that fills the card) */
          .jiffy-promotion__card-link {
            position: absolute;
            inset: 0;
            z-index: 1;
            text-indent: -9999px;
            overflow: hidden;
          }

          /* Real content sits above overlay + stretched link */
          .jiffy-promotion-logo,
          .jiffy-promotion-text,
          .jiffy-promotion-cta-row,
          .jiffy-promotion-disclaimer {
            position: relative;
            z-index: 2;
          }

          /* Logo: flow-following flex child, pinned to top, scales down */
          .jiffy-promotion-logo {
            align-self: flex-start;
            display: none;

            img {
              width: 225px;
              max-width: 100%;
              height: auto;
              display: block;
            }
          }

          .jiffy-promotion-tag {
            font-family: Inter;
            font-weight: 900;
            font-size: 48px;
            line-height: 48px;
            letter-spacing: 0px;
            color: var(--primary);
          }
          .jiffy-promotion-heading {
            font-family: Inter;
            font-weight: 700;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 0px;
            color: #000;
          }
          .jiffy-promotion-subheading {
            font-family: Inter;
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            letter-spacing: 0px;
            color: var(--grey);
          }
          .jiffy-promotion-cta-row {
            /* Button must sit above the stretched link to stay clickable */
            .btn-download {
              position: relative;
              z-index: 3;
            }
          }
          .jiffy-promotion-disclaimer {
            color: var(--grey);
            font-size: 8px;
            line-height: 1;
            margin: 0;
          }
        }
      }
    }
  }

  .btn-download[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
  }

  .btn-download[aria-busy="true"] .btn-text:not(.btn-text--loading) {
    display: none;
  }

  .btn-download[aria-busy="true"] .btn-text--loading {
    display: inline !important;
  }

  /* Loading label hidden by default; shown only while busy (rule above) */
  .btn-download .btn-text--loading {
    display: none;
  }
}
/* ============================================
   Swiper carousel
   ============================================ */

.jiffy-promotion__box--carousel .jiffy-promotion-shell {
  width: 100%;
  max-width: 1053px;
  margin: 0 auto;
}

@media (min-width: 851px) {
  .jiffy-promotion__box--carousel .jiffy-promotion-shell {
    max-width: 2126px;
  }
}

/* Header row holding the nav buttons */
.jiffy-promotion-shell__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 32px;
  min-height: 40px;
}

/* Nav button group */
.jiffy-promotion-nav {
  display: inline-flex;
  gap: 12px;
}

.jiffy-promotion-nav__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #1a1a1a;
  background: #1a1a1a;
  color: #fff;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.jiffy-promotion-nav__btn:hover,
.jiffy-promotion-nav__btn:focus-visible {
  background: transparent;
  color: #1a1a1a;
  outline: none;
}

.jiffy-promotion-nav__btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(212, 0, 26, 0.35);
}

.jiffy-promotion-nav__btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.jiffy-promotion-nav__btn--disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* Swiper container */
.jiffy-promotion__box--carousel .jiffy-promotion-swiper {
  width: 100%;
  position: relative;
  padding-bottom: 40px; /* room for pagination */
}

.jiffy-promotion__box--carousel .swiper-slide {
  height: auto;
  display: flex;
  align-items: stretch;
}

.jiffy-promotion__box--carousel .swiper-slide > .jiffy-promotion-container {
  width: 100%;
}

.jiffy-promotion__box--carousel .swiper-pagination-bullet-active {
  background: #d4001a;
}

/* Single-coupon mode: keep the h2 header, hide only the nav buttons + pagination */
.jiffy-promotion__box--carousel.jiffy-promotion__box--single
  .jiffy-promotion-nav,
.jiffy-promotion__box--carousel.jiffy-promotion__box--single
  .swiper-pagination {
  display: none;
}

@media (min-width: 851px) {
  .jiffy-promotion__box--carousel.jiffy-promotion__box--no-loop-desktop
    .jiffy-promotion-nav,
  .jiffy-promotion__box--carousel.jiffy-promotion__box--no-loop-desktop
    .swiper-pagination {
    display: none;
  }

  .jiffy-promotion__box--carousel.jiffy-promotion__box--no-loop-desktop
    .jiffy-promotion-swiper {
    padding-bottom: 0;
  }
}

@media (max-width: 850px) {
  .jiffy-promotion__boxes
    .jiffy-promotion__box--carousel
    .jiffy-promotion-nav-header {
    font-size: 28px !important;
  }

  .jiffy-promotion__boxes
    .jiffy-promotion__box--carousel
    .jiffy-promotion-container
    .jiffy-promotion {
    .jiffy-promotion__link.jiffy-promotion-wrapper,
    .jiffy-promotion__link + .jiffy-promotion-wrapper,
    .jiffy-promotion__link .jiffy-promotion-wrapper {
      .jiffy-promotion-tag {
        font-size: 36px;
        line-height: 36px;
      }
      .jiffy-promotion-heading {
        font-size: 16px;
        line-height: 24px;
      }
      .jiffy-promotion-subheading {
        font-size: 12px;
        line-height: 18px;
      }
      .jiffy-promotion-disclaimer {
        font-size: 7px;
      }

      /* Slightly smaller logo on mobile */
      .jiffy-promotion-logo {
        display: block;
      }
    }
  }
}

.swiper-pagination-bullets {
  display: none !important;
}