.WzSPESaXBFE4vKsbUy5D {
  container-type: inline-size;
  container-name: category-promo-banner;
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--cat-promo-banner-bg);
}

.Z_miIvtNVHomFizJVDv_ {
  display: flex;
  gap: 0;
  flex-direction: column;
}

.L9qEaEkvhKnO5L0_OCLA {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ODyXfKoKmjRBc9oDxZUK {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 16px 0;
}

.PEtmq8jP58nqitvGhMFR {
  color: white;
}

.QtlBUG92r7FTbfD8zCrS + .daGUBoWmmGo3P4xvMkKs {
  margin-top: 10px;
}

.ODyXfKoKmjRBc9oDxZUK .daGUBoWmmGo3P4xvMkKs {
  font-size: 0.75rem;
}

.FmGYtirbcgHjOqnwYVaw {
  display: none;
}

.npeSwOGgu7uGURDMwepf {
  font-size: var(--typography-heading-h5-fontSize) !important;
}

.FNI3Dh11UWlbXe2dCFEt {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  padding: 24px 0 40px 16px;
  max-height: 420px; /* mobile: fixed-height slot — 332px from design (no title) + ~88px for carousel title header */
}

.FNI3Dh11UWlbXe2dCFEt [data-carousel-root] {
  margin: 0;
}

.FNI3Dh11UWlbXe2dCFEt [data-carousel-header] {
  display: none;
}

/* Header arrows are white circles with a dark icon and no ring on every panel color (Figma
   neutral/background/primary). Button paints its fill and the secondary ring on ::before, so that is the
   target; the icon already uses --neutral-text-primary in both widget states. Two classes plus two
   elements beat Button's .secondary::before and .primary.inverse::before regardless of bundle order.
   Hover/active only move inset and box-shadow, and the focus ring is the button's own outline. */
.FNI3Dh11UWlbXe2dCFEt [data-carousel-header] button::before {
  background-color: var(--neutral-background-primary);
  border-color: transparent;
}

/* Title only, so the arrows above keep their own colors.
   Three-class specificity beats the widget's .title and Typography's root class regardless of bundle order. */
.SJrYqqz0LctWUJ4SFgRG [data-carousel-header] > :first-child {
  color: var(--neutral-text-primaryOnFill);
}

@container category-promo-banner (min-width: 700px) {
  .Z_miIvtNVHomFizJVDv_ {
    gap: 0;
  }

  .ODyXfKoKmjRBc9oDxZUK {
    gap: 2px;
    padding: 20px 24px 0;
  }

  .FmGYtirbcgHjOqnwYVaw {
    display: block;
    min-height: 240px;
    background-image: var(--cat-promo-banner-image);
    background-repeat: no-repeat;
    background-position: center var(--cat-promo-image-y);
    background-size: auto var(--cat-promo-image-zoom);
  }

  .ODyXfKoKmjRBc9oDxZUK .sgmkNQ4jyLuUVQKbdZS5 {
    font-size: 2.25rem;
  }

  .npeSwOGgu7uGURDMwepf {
    font-size: var(--typography-heading-h3-fontSize) !important;
  }

  .ODyXfKoKmjRBc9oDxZUK .daGUBoWmmGo3P4xvMkKs {
    font-size: var(--typography-body-xxs-fontSize);
  }

  .FNI3Dh11UWlbXe2dCFEt {
    max-height: none;
    padding: 30px 0 40px 24px;
    background-color: var(--cat-promo-carousel-bg, transparent);
  }

  .FNI3Dh11UWlbXe2dCFEt [data-carousel-header] {
    display: flex;
    margin-bottom: 28px;
    padding-right: 24px;
  }
}

@container category-promo-banner (min-width: 700px) and (max-width: 1023.95px) {
  .FNI3Dh11UWlbXe2dCFEt [data-carousel-header] > :first-child {
    font-size: 20px;
  }
}

@container category-promo-banner (min-width: 1024px) {
  .Z_miIvtNVHomFizJVDv_ {
    flex-direction: row;
    align-items: stretch;
  }

  .L9qEaEkvhKnO5L0_OCLA {
    flex: 0 0 43.5%;
    justify-content: space-between;
  }

  .ODyXfKoKmjRBc9oDxZUK {
    padding-top: 25px;
    gap: 6px;
  }

  .FmGYtirbcgHjOqnwYVaw {
    min-height: 390px;
  }

  .ODyXfKoKmjRBc9oDxZUK .sgmkNQ4jyLuUVQKbdZS5 {
    font-size: var(--typography-display-md-fontSize-desktop);
  }

  .npeSwOGgu7uGURDMwepf {
    font-size: var(--typography-heading-h1-fontSize) !important;
  }

  .FNI3Dh11UWlbXe2dCFEt {
    width: 56.5%;
    padding: 58px 0 34px 32px;
  }

  .FNI3Dh11UWlbXe2dCFEt [data-carousel-header] {
    margin-bottom: 32px;
    padding-right: 48px;
  }
}

.bgSaPnwWL385qX2BYR1b {
  margin: 2.5rem 0;
}

/* style_bitz colors h2 globally, which beats the color Pigment's
   invertMainText sets on the headline's parent. */
.bgSaPnwWL385qX2BYR1b h2 {
  color: inherit;
}

.IkSdq6rBtbj5wgIhKZMn {
  position: relative;
  overflow: hidden;
}

@container category-promo-banner (min-width: 700px) and (max-width: 1023.98px) {
  .PJtS1bjPTuyRaYQykzsg h3 {
    font-size: 20px;
  }
}