#parallax-bg.template-christmas {
  background-image:
    /* 1️⃣ Soft translucent white overlay (replaces old #overlay) */
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),

    /* 2️⃣ Gentle bottom shading for tree visibility */
    linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0) 60%),

    /* 3️⃣ Warm festive color gradient */
    linear-gradient(180deg, #f8a7a0 0%, #ec6d6d 52%, #ffe7d3 100%),

    /* 4️⃣ Actual Christmas background image */
    url('/static/media/background_images/christmas-bg-2-desktop.png');

  background-size: cover, cover, cover, auto 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  background-position: center, center, center, bottom;
  background-blend-mode: normal, normal, overlay;
  opacity: 0.96;
  background-origin: content-box;
  padding-top: 80px; /* adjust for toolbar height */
}

@media (max-width: 768px) {
  #parallax-bg.template-christmas {
    background-image:
      /* 1️⃣ Soft translucent white overlay */
      linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),

      /* 2️⃣ Gentle bottom shading for depth */
      linear-gradient(to top, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0) 60%),

      /* 3️⃣ Warm festive gradient tones */
      linear-gradient(180deg, #f8a7a0 0%, #ec6d6d 52%, #ffe7d3 100%),

      /* 4️⃣ Background image */
      url('/static/media/background_images/christmas-bg-2-mobile.png');

    /* four layers → four values each */
    background-size: cover, cover, cover, auto 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center, center, center, bottom;

    /* blend mode applies per layer pair, keep this simple */
    background-blend-mode: normal, normal, overlay;

    /* visual tuning */
    opacity: 0.96;
    background-origin: content-box;
    padding-top: 80px; /* toolbar spacing */
  }
}