/** Shopify CDN: Minification failed

Line 36:10 Expected identifier but found whitespace
Line 36:11 Unexpected "0"
Line 36:14 Unexpected "{"
Line 36:23 Expected ":"
Line 36:60 Expected ":"
Line 69:13 Expected identifier but found whitespace
Line 69:15 Unexpected "{"
Line 69:24 Expected ":"
Line 81:8 Expected identifier but found whitespace
Line 81:10 Unexpected "{"
... and 5 more hidden warnings

**/
.reward-banner-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fixed height comes from inline style → {{ section.settings.banner_height }}px */
  background-color: rgba(240, 90, 34, 0.25);   /* ← your hard-coded color + alpha */
  display: flex;
  align-items: center;
  justify-content: center;
}

.reward-banner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 {{ section.settings.side_gap | default: 30 }}px;  /* uses setting or fallback */
  box-sizing: border-box;
}

.animal-wrapper {
  position: relative;
  width: 35%;                    /* base wrapper size – prevents image from stretching banner also removed hieght for now   height: 100%; */
  display: flex;
  align-items: center;
}

.left  { justify-content: flex-start; }
.right { justify-content: flex-end;   }

.animal-img {
  max-width: 100%;
  max-height: 85%;               /* ← keeps animals inside height, prevents overflow */
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Optional slight offset/scale like your original – now optional via setting later if wanted */
.left-animal-scale  { transform: translateX(-8%) scale(1.04); }
.right-animal-scale { transform: translateX(8%)  scale(1.04); }

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: {{ section.settings.text_align | default: 'center' }};
  width: 70%;                    /* ← wider text area, prevents overlap/cutoff */
  max-width: 620px;
  pointer-events: none;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.55);
}

.banner-text h2 {
  margin: 0;
  font-weight: bold;
  line-height: 1.15;
  white-space: nowrap;
  color: {{ section.settings.text_color | default: '#ffffff' }};
  font-size: {{ section.settings.text_size | default: 4.5 }}rem;
}

/* ────────────────────────────────────────────────
   Mobile – stack vertically, center everything
──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .reward-banner {
    justify-content: center;
    padding: 20px 10%;
    gap: 15px;
  }

  .animal-wrapper {
    width: 70%;
    height: 40%;                 /* smaller relative height on mobile */
    margin: 10px 0;
  }

  .left, .right {
    justify-content: center;
  }

  /* Remove side offset on mobile */
  .left-animal-scale,
  .right-animal-scale {
    transform: none;
  }

  .banner-text {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .banner-text h2 {
    font-size: calc({{ section.settings.text_size | default: 4.5 }}rem * 0.75) !important;
    white-space: normal;         /* allow wrapping if text is long */
  }
}