/* Απαλή στατική διακόσμηση στα κενά της σελίδας, πίσω από το περιεχόμενο. */
@media screen {
  body.parea-soft-garden {
    --garden-veil-a: rgb(226 236 221 / 34%);
    --garden-veil-b: rgb(247 225 205 / 25%);
    --garden-cream: #f9f9f3;
    background-color: var(--vf-canvas, var(--garden-cream));
    background-image:
      url('/assets/background-garden/garden-whispers.svg'),
      url('/assets/background-garden/foliage-left.svg'),
      url('/assets/background-garden/foliage-right.svg'),
      radial-gradient(ellipse at 8% 10%, var(--garden-veil-a), transparent 52%),
      radial-gradient(ellipse at 95% 89%, var(--garden-veil-b), transparent 52%);
    background-position: center top, left top, right top, left top, right bottom;
    background-repeat: repeat, repeat-y, repeat-y, no-repeat, no-repeat;
    background-size: 1220px 1260px, clamp(118px, 15vw, 220px) 980px, clamp(118px, 15vw, 220px) 980px, cover, cover;
  }
  /* Στην κύρια εφαρμογή το μοτίβο βρίσκεται στην επιφάνεια που πραγματικά
     κυλά μαζί με το περιεχόμενο. Αλλιώς τα πλαίσια της σελίδας το καλύπτουν. */
  body.parea-soft-garden.visual-refresh {
    background-image:
      radial-gradient(ellipse at 7% 12%, var(--garden-veil-a), transparent 52%),
      radial-gradient(ellipse at 95% 85%, var(--garden-veil-b), transparent 55%);
    background-position: left top, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
  }
  body.parea-soft-garden.visual-refresh .main-wrap {
    background-image:
      url('/assets/background-garden/garden-whispers.svg'),
      url('/assets/background-garden/foliage-left.svg'),
      url('/assets/background-garden/foliage-right.svg');
    background-position: center top, left top, right top;
    background-repeat: repeat, repeat-y, repeat-y;
    background-size: 1220px 1260px, clamp(108px, 12vw, 180px) 980px, clamp(108px, 12vw, 180px) 980px;
  }
  body.parea-soft-garden.visual-refresh[data-age="2-4"] {
    --garden-veil-a: rgb(225 235 203 / 35%);
    --garden-veil-b: rgb(250 233 202 / 27%);
  }
  body.parea-soft-garden.visual-refresh[data-age="4-6"] {
    --garden-veil-a: rgb(242 225 213 / 31%);
    --garden-veil-b: rgb(232 222 240 / 25%);
  }
  body.parea-soft-garden.visual-refresh[data-age="6-8"] {
    --garden-veil-a: rgb(218 234 229 / 35%);
    --garden-veil-b: rgb(240 228 211 / 24%);
  }
  body.parea-soft-garden.visual-refresh[data-age="8-10"] {
    --garden-veil-a: rgb(226 230 245 / 31%);
    --garden-veil-b: rgb(236 225 244 / 26%);
  }
  /* Στις φόρμες διαχείρισης η διακόσμηση παραμένει αραιή. */
  body.parea-soft-garden[data-garden="quiet"] {
    background-image:
      url('/assets/background-garden/garden-whispers.svg'),
      radial-gradient(ellipse at 8% 10%, rgb(223 235 216 / 22%), transparent 50%),
      radial-gradient(ellipse at 94% 90%, rgb(242 229 216 / 15%), transparent 50%);
    background-position: center top, left top, right bottom;
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 1220px 1260px, cover, cover;
  }
}
/* Στις μικρές οθόνες ένα ξεχωριστό, αραιό μοτίβο ακουμπά μόνο τις άκρες. */
@media screen and (max-width: 700px) {
  body.parea-soft-garden:not(.visual-refresh),
  body.parea-soft-garden.visual-refresh .main-wrap {
    background-image:
      url('/assets/background-garden/garden-whispers-mobile.svg'),
      radial-gradient(ellipse at 0% 0%, var(--garden-veil-a), transparent 36%),
      radial-gradient(ellipse at 100% 100%, var(--garden-veil-b), transparent 36%);
    background-repeat: repeat-y, no-repeat, no-repeat;
    background-position: center top, left top, right bottom;
    background-size: 440px 980px, cover, cover;
  }
  body.parea-soft-garden.visual-refresh {
    background-image: none;
  }
  body.parea-soft-garden[data-garden="quiet"] {
    background-image:
      url('/assets/background-garden/garden-whispers-mobile.svg'),
      radial-gradient(ellipse at 0% 0%, rgb(223 235 216 / 15%), transparent 42%);
    background-repeat: repeat-y, no-repeat;
    background-position: center top, left top;
    background-size: 440px 980px, cover;
  }
}
@media (forced-colors: active), (prefers-contrast: more) {
  body.parea-soft-garden,
  body.parea-soft-garden.visual-refresh,
  body.parea-soft-garden.visual-refresh .main-wrap,
  body.parea-soft-garden[data-garden="quiet"] {
    background-image: none;
  }
}
@media print {
  html, body.parea-soft-garden,
  body.parea-soft-garden.visual-refresh,
  body.parea-soft-garden.visual-refresh .main-wrap {
    background: #fff !important;
    background-image: none !important;
  }
}