/* ==========================================================================
   SNOWFLAKE WATERMARK — the logo's frost star, huge and faint, repeating down
   the side of the product areas (the white space beside the cards).
   Self-contained: remove this file's <link> (and optionally the
   "has-watermark" classes in the HTML) to take it away.
   ========================================================================== */

.has-watermark {
    position: relative;
    overflow: hidden;            /* the stars bleed off the edge without causing sideways scroll */
    --wm-w: 560px;               /* star width */
    --wm-h: 1200px;              /* one star every this many pixels down the page */
    --wm-edge: -140px;           /* how far the star hangs off the screen edge */
    --wm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -214 200 428'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='-90' y1='-90' x2='90' y2='90'%3E%3Cstop offset='0' stop-color='%230b7fd6'/%3E%3Cstop offset='1' stop-color='%2300a9d6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-14)' fill='none' stroke='url(%23g)' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpath d='M0 0V-86'/%3E%3Cpath d='M0 -50L-27 -77M0 -50L27 -77'/%3E%3Cpath d='M0 -24L-15 -39M0 -24L15 -39'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cpath d='M0 0V-86'/%3E%3Cpath d='M0 -50L-27 -77M0 -50L27 -77'/%3E%3Cpath d='M0 -24L-15 -39M0 -24L15 -39'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cpath d='M0 0V-86'/%3E%3Cpath d='M0 -50L-27 -77M0 -50L27 -77'/%3E%3Cpath d='M0 -24L-15 -39M0 -24L15 -39'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cpath d='M0 0V-86'/%3E%3Cpath d='M0 -50L-27 -77M0 -50L27 -77'/%3E%3Cpath d='M0 -24L-15 -39M0 -24L15 -39'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cpath d='M0 0V-86'/%3E%3Cpath d='M0 -50L-27 -77M0 -50L27 -77'/%3E%3Cpath d='M0 -24L-15 -39M0 -24L15 -39'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cpath d='M0 0V-86'/%3E%3Cpath d='M0 -50L-27 -77M0 -50L27 -77'/%3E%3Cpath d='M0 -24L-15 -39M0 -24L15 -39'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.has-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--wm-art);
    background-repeat: repeat-y;
    background-size: var(--wm-w) var(--wm-h);
    background-position: right var(--wm-edge) top 40px;      /* default: right edge */
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}
/* "end" / "start" follow the reading direction, so they swap sides between Arabic and English */
html[dir="ltr"] .has-watermark--end::before   { background-position: right var(--wm-edge) top 40px; }
html[dir="rtl"] .has-watermark--end::before   { background-position: left  var(--wm-edge) top 40px; }
html[dir="ltr"] .has-watermark--start::before { background-position: left  var(--wm-edge) top 640px; }
html[dir="rtl"] .has-watermark--start::before { background-position: right var(--wm-edge) top 640px; }

/* content sits above the watermark */
.has-watermark > .container { position: relative; z-index: 1; }

@media (max-width: 640px) {
    .has-watermark { --wm-w: 380px; --wm-h: 820px; --wm-edge: -130px; }
}