/**
 * Starter Templates Pro - CSS Background Patterns
 * 40+ patterns using CSS variables for customization
 * These are SECOND LAYER (between background and overlay)
 */

/* ============================================
   PATTERN LAYER - Applied via ::before pseudo
   ============================================ */

/* Base pattern layer setup */
.stp-pattern-layer {
    position: relative;
}

.stp-pattern-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1; /* Below content but above background */
    opacity: var(--stp-pattern-opacity, 0.15);
    clip-path: var(--stp-pattern-clip-path, none); /* Support positioning */
}

/* ============================================
   SECONDARY IMAGE HOVER SWAP
   ============================================ */
.stp-card:hover .stp-card-image-secondary {
    opacity: 1 !important;
}

/* ============================================
   GEOMETRIC PATTERNS (22)
   ============================================ */

/* 1. Grid Lines */
.stp-pattern-grid::before {
    background-image: 
        linear-gradient(var(--stp-pattern-color, #000) 1px, transparent 1px),
        linear-gradient(90deg, var(--stp-pattern-color, #000) 1px, transparent 1px);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 40px);
}

/* 2. Dots */
.stp-pattern-dots::before {
    background-image: radial-gradient(var(--stp-pattern-color, #000) 1.5px, transparent 1.5px);
    background-size: var(--stp-pattern-size, 20px) var(--stp-pattern-size, 20px);
}

/* 3. Diagonal Lines */
.stp-pattern-diagonal::before {
    background-image: repeating-linear-gradient(
        45deg,
        var(--stp-pattern-color, #000),
        var(--stp-pattern-color, #000) 1px,
        transparent 1px,
        transparent var(--stp-pattern-size, 20px)
    );
}

/* 4. Diagonal Lines Reverse */
.stp-pattern-diagonal-reverse::before {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--stp-pattern-color, #000),
        var(--stp-pattern-color, #000) 1px,
        transparent 1px,
        transparent var(--stp-pattern-size, 20px)
    );
}

/* 5. Cross Hatch */
.stp-pattern-crosshatch::before {
    background-image: 
        repeating-linear-gradient(45deg, var(--stp-pattern-color, #000), var(--stp-pattern-color, #000) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(-45deg, var(--stp-pattern-color, #000), var(--stp-pattern-color, #000) 1px, transparent 1px, transparent 20px);
    background-size: var(--stp-pattern-size, 30px) var(--stp-pattern-size, 30px);
}

/* 6. Horizontal Lines */
.stp-pattern-horizontal::before {
    background-image: repeating-linear-gradient(
        0deg,
        var(--stp-pattern-color, #000),
        var(--stp-pattern-color, #000) 1px,
        transparent 1px,
        transparent var(--stp-pattern-size, 15px)
    );
}

/* 7. Vertical Lines */
.stp-pattern-vertical::before {
    background-image: repeating-linear-gradient(
        90deg,
        var(--stp-pattern-color, #000),
        var(--stp-pattern-color, #000) 1px,
        transparent 1px,
        transparent var(--stp-pattern-size, 15px)
    );
}

/* 8. Checkerboard */
.stp-pattern-checkerboard::before {
    background-image: 
        linear-gradient(45deg, var(--stp-pattern-color, #000) 25%, transparent 25%),
        linear-gradient(-45deg, var(--stp-pattern-color, #000) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--stp-pattern-color, #000) 75%),
        linear-gradient(-45deg, transparent 75%, var(--stp-pattern-color, #000) 75%);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 40px);
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

/* 9. Triangles */
.stp-pattern-triangles::before {
    background-image: 
        linear-gradient(45deg, var(--stp-pattern-color, #000) 25%, transparent 25%),
        linear-gradient(-45deg, var(--stp-pattern-color, #000) 25%, transparent 25%);
    background-size: var(--stp-pattern-size, 30px) var(--stp-pattern-size, 30px);
}

/* 10. Hexagons */
.stp-pattern-hexagons::before {
    background-image: 
        radial-gradient(circle farthest-side at 0% 50%, var(--stp-pattern-color, #000) 23.5%, transparent 0),
        radial-gradient(circle farthest-side at 100% 50%, var(--stp-pattern-color, #000) 23.5%, transparent 0);
    background-size: var(--stp-pattern-size, 40px) calc(var(--stp-pattern-size, 40px) * 1.73);
}

/* 11. Zigzag */
.stp-pattern-zigzag::before {
    background-image: 
        linear-gradient(135deg, var(--stp-pattern-color, #000) 25%, transparent 25%),
        linear-gradient(225deg, var(--stp-pattern-color, #000) 25%, transparent 25%),
        linear-gradient(45deg, var(--stp-pattern-color, #000) 25%, transparent 25%),
        linear-gradient(315deg, var(--stp-pattern-color, #000) 25%, transparent 25%);
    background-size: var(--stp-pattern-size, 30px) var(--stp-pattern-size, 30px);
    background-position: 0 0, 15px 0, 15px -15px, 0px 15px;
}

/* 12. Diamond */
.stp-pattern-diamond::before {
    background-image: 
        linear-gradient(45deg, var(--stp-pattern-color, #000) 25%, transparent 25%, transparent 75%, var(--stp-pattern-color, #000) 75%),
        linear-gradient(45deg, var(--stp-pattern-color, #000) 25%, transparent 25%, transparent 75%, var(--stp-pattern-color, #000) 75%);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 40px);
    background-position: 0 0, 20px 20px;
}

/* 13. Plus Signs */
.stp-pattern-plus::before {
    background-image: 
        linear-gradient(var(--stp-pattern-color, #000) 2px, transparent 2px),
        linear-gradient(90deg, var(--stp-pattern-color, #000) 2px, transparent 2px);
    background-size: var(--stp-pattern-size, 30px) var(--stp-pattern-size, 30px);
    background-position: center center;
}

/* 14. Brick */
.stp-pattern-brick::before {
    background-image: 
        linear-gradient(var(--stp-pattern-color, #000) 2px, transparent 2px),
        linear-gradient(90deg, var(--stp-pattern-color, #000) 2px, transparent 2px);
    background-size: calc(var(--stp-pattern-size, 40px) * 2) var(--stp-pattern-size, 40px);
    background-position: 0 0, var(--stp-pattern-size, 40px) calc(var(--stp-pattern-size, 40px) / 2);
}

/* 15. Polka Dots Large */
.stp-pattern-polka-large::before {
    background-image: radial-gradient(var(--stp-pattern-color, #000) 8px, transparent 8px);
    background-size: var(--stp-pattern-size, 50px) var(--stp-pattern-size, 50px);
}

/* 16. Circuit Board */
.stp-pattern-circuit::before {
    background-image: 
        linear-gradient(90deg, var(--stp-pattern-color, #000) 1px, transparent 1px),
        linear-gradient(var(--stp-pattern-color, #000) 1px, transparent 1px),
        radial-gradient(var(--stp-pattern-color, #000) 3px, transparent 3px);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 40px);
}

/* 17. Mosaic */
.stp-pattern-mosaic::before {
    background-image: 
        linear-gradient(45deg, var(--stp-pattern-color, #000) 12%, transparent 12%, transparent 88%, var(--stp-pattern-color, #000) 88%),
        linear-gradient(135deg, var(--stp-pattern-color, #000) 12%, transparent 12%, transparent 88%, var(--stp-pattern-color, #000) 88%),
        linear-gradient(45deg, var(--stp-pattern-color, #000) 12%, transparent 12%, transparent 88%, var(--stp-pattern-color, #000) 88%),
        linear-gradient(135deg, var(--stp-pattern-color, #000) 12%, transparent 12%, transparent 88%, var(--stp-pattern-color, #000) 88%);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 40px);
    background-position: 0 0, 0 0, 20px 20px, 20px 20px;
}

/* 18. Stars */
.stp-pattern-stars::before {
    background-image: 
        radial-gradient(2px 2px at 10px 10px, var(--stp-pattern-color, #000), transparent),
        radial-gradient(2px 2px at 30px 25px, var(--stp-pattern-color, #000), transparent),
        radial-gradient(1px 1px at 20px 35px, var(--stp-pattern-color, #000), transparent);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 40px);
}

/* 19. Confetti */
.stp-pattern-confetti::before {
    background-image: 
        linear-gradient(45deg, var(--stp-pattern-color, #000) 2px, transparent 2px),
        linear-gradient(-45deg, var(--stp-pattern-color, #000) 2px, transparent 2px),
        linear-gradient(135deg, var(--stp-pattern-color, #000) 2px, transparent 2px);
    background-size: var(--stp-pattern-size, 35px) var(--stp-pattern-size, 35px);
    background-position: 0 0, 12px 18px, 25px 8px;
}

/* 20. Isometric Cubes */
.stp-pattern-isometric::before {
    background-image: 
        linear-gradient(30deg, var(--stp-pattern-color, #000) 12%, transparent 12.5%, transparent 87%, var(--stp-pattern-color, #000) 87.5%),
        linear-gradient(150deg, var(--stp-pattern-color, #000) 12%, transparent 12.5%, transparent 87%, var(--stp-pattern-color, #000) 87.5%),
        linear-gradient(30deg, var(--stp-pattern-color, #000) 12%, transparent 12.5%, transparent 87%, var(--stp-pattern-color, #000) 87.5%),
        linear-gradient(150deg, var(--stp-pattern-color, #000) 12%, transparent 12.5%, transparent 87%, var(--stp-pattern-color, #000) 87.5%);
    background-size: var(--stp-pattern-size, 40px) calc(var(--stp-pattern-size, 40px) * 1.73);
    background-position: 0 0, 0 0, 20px 35px, 20px 35px;
}

/* 21. Waves Pattern */
.stp-pattern-waves::before {
    background-image: 
        radial-gradient(ellipse at 50% 0%, transparent 70%, var(--stp-pattern-color, #000) 70%, var(--stp-pattern-color, #000) 72%, transparent 72%);
    background-size: var(--stp-pattern-size, 40px) var(--stp-pattern-size, 20px);
}

/* 22. Herringbone */
.stp-pattern-herringbone::before {
    background-image: 
        linear-gradient(45deg, var(--stp-pattern-color, #000) 25%, transparent 25%, transparent 75%, var(--stp-pattern-color, #000) 75%);
    background-size: var(--stp-pattern-size, 10px) var(--stp-pattern-size, 10px);
}

/* ============================================
   ORGANIC PATTERNS (18)
   ============================================ */

/* 23. Gentle Curves (Flowing Lines) */
.stp-pattern-gentle-curves::before {
    background-image: 
        repeating-radial-gradient(
            circle at 0% 50%,
            transparent 0,
            transparent 10px,
            var(--stp-pattern-color, #000) 10px,
            var(--stp-pattern-color, #000) 11px,
            transparent 11px,
            transparent var(--stp-pattern-size, 40px)
        );
}

/* 24. Flowing Waves */
.stp-pattern-flowing-waves::before {
    background-image: 
        repeating-radial-gradient(
            circle at 100% 50%,
            transparent 0,
            transparent 8px,
            var(--stp-pattern-color, #000) 8px,
            var(--stp-pattern-color, #000) 9px,
            transparent 9px,
            transparent var(--stp-pattern-size, 35px)
        );
}

/* 25. Topographic */
.stp-pattern-topographic::before {
    background-image: 
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0,
            transparent 15px,
            var(--stp-pattern-color, #000) 15px,
            var(--stp-pattern-color, #000) 16px,
            transparent 16px,
            transparent var(--stp-pattern-size, 50px)
        );
}

/* 26. Fingerprint */
.stp-pattern-fingerprint::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 80% 100% at 50% 0%,
            transparent 0,
            transparent 8px,
            var(--stp-pattern-color, #000) 8px,
            var(--stp-pattern-color, #000) 9px,
            transparent 9px,
            transparent var(--stp-pattern-size, 30px)
        );
}

/* 27. Ocean Ripples */
.stp-pattern-ocean-ripples::before {
    background-image: 
        repeating-radial-gradient(
            circle at 50% 50%,
            var(--stp-pattern-color, #000) 0,
            var(--stp-pattern-color, #000) 1px,
            transparent 1px,
            transparent var(--stp-pattern-size, 25px)
        );
}

/* 28. Sound Waves */
.stp-pattern-sound-waves::before {
    background-image: 
        repeating-radial-gradient(
            circle at 0% 50%,
            transparent 0,
            transparent 5px,
            var(--stp-pattern-color, #000) 5px,
            var(--stp-pattern-color, #000) 6px,
            transparent 6px,
            transparent var(--stp-pattern-size, 20px)
        );
}

/* 29. Zen Garden */
.stp-pattern-zen-garden::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 120% 50% at 50% 50%,
            transparent 0,
            transparent 12px,
            var(--stp-pattern-color, #000) 12px,
            var(--stp-pattern-color, #000) 13px,
            transparent 13px,
            transparent var(--stp-pattern-size, 40px)
        );
}

/* 30. Corner Ripple */
.stp-pattern-corner-ripple::before {
    background-image: 
        repeating-radial-gradient(
            circle at 0% 0%,
            transparent 0,
            transparent 20px,
            var(--stp-pattern-color, #000) 20px,
            var(--stp-pattern-color, #000) 21px,
            transparent 21px,
            transparent var(--stp-pattern-size, 60px)
        );
}

/* 31. Contour Map */
.stp-pattern-contour-map::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 60% 100% at 30% 50%,
            transparent 0,
            transparent 10px,
            var(--stp-pattern-color, #000) 10px,
            var(--stp-pattern-color, #000) 11px,
            transparent 11px,
            transparent var(--stp-pattern-size, 35px)
        );
}

/* 32. Wood Grain */
.stp-pattern-wood-grain::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 200% 50% at 50% 50%,
            transparent 0,
            transparent 4px,
            var(--stp-pattern-color, #000) 4px,
            var(--stp-pattern-color, #000) 5px,
            transparent 5px,
            transparent var(--stp-pattern-size, 15px)
        );
}

/* 33. Marble Swirl */
.stp-pattern-marble-swirl::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 150% 80% at 20% 50%,
            transparent 0,
            transparent 6px,
            var(--stp-pattern-color, #000) 6px,
            var(--stp-pattern-color, #000) 7px,
            transparent 7px,
            transparent var(--stp-pattern-size, 25px)
        ),
        repeating-radial-gradient(
            ellipse 150% 80% at 80% 50%,
            transparent 0,
            transparent 8px,
            var(--stp-pattern-color, #000) 8px,
            var(--stp-pattern-color, #000) 9px,
            transparent 9px,
            transparent var(--stp-pattern-size, 30px)
        );
}

/* 34. Silk Waves */
.stp-pattern-silk-waves::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 100% 30% at 50% 0%,
            transparent 0,
            transparent 10px,
            var(--stp-pattern-color, #000) 10px,
            var(--stp-pattern-color, #000) 11px,
            transparent 11px,
            transparent var(--stp-pattern-size, 35px)
        );
}

/* 35. Liquid Metal */
.stp-pattern-liquid-metal::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 80% 120% at 30% 30%,
            transparent 0,
            transparent 15px,
            var(--stp-pattern-color, #000) 15px,
            var(--stp-pattern-color, #000) 16px,
            transparent 16px,
            transparent var(--stp-pattern-size, 50px)
        );
}

/* 36. Blob Waves */
.stp-pattern-blob-waves::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 100% 60% at 0% 50%,
            transparent 0,
            transparent 12px,
            var(--stp-pattern-color, #000) 12px,
            var(--stp-pattern-color, #000) 13px,
            transparent 13px,
            transparent var(--stp-pattern-size, 40px)
        );
}

/* 37. Aurora Flow */
.stp-pattern-aurora-flow::before {
    background-image: 
        repeating-radial-gradient(
            ellipse 150% 40% at 50% 100%,
            transparent 0,
            transparent 8px,
            var(--stp-pattern-color, #000) 8px,
            var(--stp-pattern-color, #000) 9px,
            transparent 9px,
            transparent var(--stp-pattern-size, 30px)
        );
}

/* 38. Terrain Map */
.stp-pattern-terrain-map::before {
    background-image: 
        repeating-radial-gradient(
            circle at 25% 25%,
            transparent 0,
            transparent 20px,
            var(--stp-pattern-color, #000) 20px,
            var(--stp-pattern-color, #000) 21px,
            transparent 21px,
            transparent var(--stp-pattern-size, 60px)
        ),
        repeating-radial-gradient(
            circle at 75% 75%,
            transparent 0,
            transparent 15px,
            var(--stp-pattern-color, #000) 15px,
            var(--stp-pattern-color, #000) 16px,
            transparent 16px,
            transparent var(--stp-pattern-size, 45px)
        );
}

/* 39. Dual Corner Waves */
.stp-pattern-dual-corner-waves::before {
    background-image: 
        repeating-radial-gradient(
            circle at 0% 0%,
            transparent 0,
            transparent 15px,
            var(--stp-pattern-color, #000) 15px,
            var(--stp-pattern-color, #000) 16px,
            transparent 16px,
            transparent var(--stp-pattern-size, 50px)
        ),
        repeating-radial-gradient(
            circle at 100% 100%,
            transparent 0,
            transparent 15px,
            var(--stp-pattern-color, #000) 15px,
            var(--stp-pattern-color, #000) 16px,
            transparent 16px,
            transparent var(--stp-pattern-size, 50px)
        );
}

/* 40. Moiré Effect */
.stp-pattern-moire::before {
    background-image: 
        repeating-radial-gradient(
            circle at 50% 50%,
            var(--stp-pattern-color, #000) 0,
            var(--stp-pattern-color, #000) 1px,
            transparent 1px,
            transparent 3px
        );
    background-size: var(--stp-pattern-size, 10px) var(--stp-pattern-size, 10px);
}

/* ============================================
   COLOR VARIATIONS (Add these classes together)
   ============================================ */

/* White pattern on dark backgrounds */
.stp-pattern-white::before {
    --stp-pattern-color: #ffffff;
}

/* Warm Sand */
.stp-pattern-sand::before {
    --stp-pattern-color: #D4A574;
}

/* Mint Green */
.stp-pattern-mint::before {
    --stp-pattern-color: #98D4BB;
}

/* Rose */
.stp-pattern-rose::before {
    --stp-pattern-color: #E8B4B8;
}

/* Blue */
.stp-pattern-blue::before {
    --stp-pattern-color: #6B9BD2;
}

/* Gold */
.stp-pattern-gold::before {
    --stp-pattern-color: #D4AF37;
}

/* ============================================
   OPACITY VARIATIONS
   ============================================ */

.stp-pattern-opacity-5::before { opacity: 0.05; }
.stp-pattern-opacity-10::before { opacity: 0.10; }
.stp-pattern-opacity-15::before { opacity: 0.15; }
.stp-pattern-opacity-20::before { opacity: 0.20; }
.stp-pattern-opacity-25::before { opacity: 0.25; }
.stp-pattern-opacity-30::before { opacity: 0.30; }

/* ============================================
   SIZE VARIATIONS
   ============================================ */

.stp-pattern-size-small::before { --stp-pattern-size: 15px; }
.stp-pattern-size-medium::before { --stp-pattern-size: 30px; }
.stp-pattern-size-large::before { --stp-pattern-size: 50px; }
.stp-pattern-size-xlarge::before { --stp-pattern-size: 80px; }

/* ============================================
   GRADIENT PRESETS LIBRARY
   Based on: https://gradients.shecodes.io/
   ============================================ */

.stp-gradient-warm-flame { background: linear-gradient(45deg, #ff9a56 0%, #ff6a88 100%); }
.stp-gradient-night-fade { background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); }
.stp-gradient-spring-warmth { background: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); }
.stp-gradient-juicy-peach { background: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); }
.stp-gradient-young-passion { background: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%); }
.stp-gradient-rainy-ashville { background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); }
.stp-gradient-frozen-dreams { background: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%); }
.stp-gradient-winter-neva { background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); }
.stp-gradient-dusty-grass { background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); }
.stp-gradient-tempting-azure { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
.stp-gradient-heavy-rain { background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); }
.stp-gradient-amy-crisp { background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); }
.stp-gradient-mean-fruit { background: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%); }
.stp-gradient-deep-blue { background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); }
.stp-gradient-ripe-malinka { background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); }
.stp-gradient-cloudy-knoxville { background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); }
.stp-gradient-malibu-beach { background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); }
.stp-gradient-new-life { background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); }
.stp-gradient-true-sunset { background: linear-gradient(to right, #fa709a 0%, #fee140 100%); }
.stp-gradient-morpheus-den { background: linear-gradient(to top, #30cfd0 0%, #330867 100%); }
.stp-gradient-rare-wind { background: linear-gradient(to top, #a8edea 0%, #fed6e3 100%); }
.stp-gradient-near-moon { background: linear-gradient(to top, #5ee7df 0%, #b490ca 100%); }
.stp-gradient-wild-apple { background: linear-gradient(to top, #d299c2 0%, #fef9d7 100%); }
.stp-gradient-saint-petersburg { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.stp-gradient-plum-plate { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.stp-gradient-everlasting-sky { background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%); }
.stp-gradient-happy-fisher { background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%); }
.stp-gradient-blessing { background: linear-gradient(to top, #fddb92 0%, #d1fdff 100%); }
.stp-gradient-sharpeye-eagle { background: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%); }
.stp-gradient-ladoga-bottom { background: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%); }
.stp-gradient-lemon-gate { background: linear-gradient(to top, #96fbc4 0%, #f9f586 100%); }
.stp-gradient-itmeo-branding { background: linear-gradient(180deg, #2af598 0%, #009efd 100%); }
.stp-gradient-zeus-miracle { background: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%); }
.stp-gradient-old-hat { background: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%); }
.stp-gradient-star-wine { background: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); }
.stp-gradient-deep-blue-alt { background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); }
.stp-gradient-happy-acid { background: linear-gradient(to top, #37ecba 0%, #72afd3 100%); }
.stp-gradient-awesome-pine { background: linear-gradient(to top, #ebbba7 0%, #cfc7f8 100%); }
.stp-gradient-new-york { background: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%); }
.stp-gradient-shy-rainbow { background: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); }
.stp-gradient-mixed-hopes { background: linear-gradient(to top, #c471f5 0%, #fa71cd 100%); }
.stp-gradient-fly-high { background: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); }
.stp-gradient-strong-bliss { background: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); }
.stp-gradient-fresh-milk { background: linear-gradient(to top, #feada6 0%, #f5efef 100%); }
.stp-gradient-snow-again { background: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); }
.stp-gradient-february-ink { background: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); }
.stp-gradient-kind-steel { background: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%); }
.stp-gradient-soft-grass { background: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%); }
.stp-gradient-grown-early { background: linear-gradient(to top, #0ba360 0%, #3cba92 100%); }
.stp-gradient-sharp-blues { background: linear-gradient(to top, #00c6fb 0%, #005bea 100%); }
.stp-gradient-shady-water { background: linear-gradient(to right, #74ebd5 0%, #9face6 100%); }
.stp-gradient-dirty-beauty { background: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%); }
.stp-gradient-great-whale { background: linear-gradient(to top, #a3bded 0%, #6991c7 100%); }
.stp-gradient-teen-notebook { background: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); }
.stp-gradient-polite-rumors { background: linear-gradient(to top, #a7a6cb 0%, #8989ba 52%, #8989ba 100%); }
.stp-gradient-sweet-period { background: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%); }
.stp-gradient-wide-matrix { background: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%); }
.stp-gradient-soft-cherish { background: linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%); }
.stp-gradient-red-salvation { background: linear-gradient(to top, #f43b47 0%, #453a94 100%); }
.stp-gradient-burning-spring { background: linear-gradient(to top, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 86%, #432c39 100%); }
.stp-gradient-night-party { background: linear-gradient(to top, #0250c5 0%, #d43f8d 100%); }
.stp-gradient-sky-glider { background: linear-gradient(to top, #88d3ce 0%, #6e45e2 100%); }
.stp-gradient-heaven-peach { background: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%); }
.stp-gradient-purple-division { background: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%); }
.stp-gradient-aqua-splash { background: linear-gradient(15deg, #13547a 0%, #80d0c7 100%); }
.stp-gradient-spiky-naga { background: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%); }
.stp-gradient-love-kiss { background: linear-gradient(to top, #ff0844 0%, #ffb199 100%); }
.stp-gradient-clean-mirror { background: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%); }
.stp-gradient-premium-dark { background: linear-gradient(to right, #434343 0%, black 100%); }
.stp-gradient-cold-evening { background: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%); }
.stp-gradient-cochiti-lake { background: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%); }
.stp-gradient-summer-games { background: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%); }
.stp-gradient-passionate-bed { background: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); }
.stp-gradient-mountain-rock { background: linear-gradient(to right, #868f96 0%, #596164 100%); }
.stp-gradient-desert-hump { background: linear-gradient(to top, #c79081 0%, #dfa579 100%); }
.stp-gradient-jungle-day { background: linear-gradient(to right, #8baaaa 0%, #ae8b9c 100%); }
.stp-gradient-phoenix-start { background: linear-gradient(to right, #f83600 0%, #f9d423 100%); }
.stp-gradient-october-silence { background: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%); }
.stp-gradient-faraway-river { background: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%); }
.stp-gradient-alchemist-lab { background: linear-gradient(-20deg, #d558c8 0%, #24d292 100%); }
.stp-gradient-over-sun { background: linear-gradient(60deg, #abecd6 0%, #fbed96 100%); }
.stp-gradient-premium-white { background: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%); }
.stp-gradient-mars-party { background: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%); }
.stp-gradient-eternal-constance { background: linear-gradient(to top, #09203f 0%, #537895 100%); }
.stp-gradient-japan-blush { background: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%); }
.stp-gradient-smiling-rain { background: linear-gradient(-20deg, #dcb0ed 0%, #99c99c 100%); }
.stp-gradient-cloudy-apple { background: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); }
.stp-gradient-big-mango { background: linear-gradient(to top, #c71d6f 0%, #d09693 100%); }
.stp-gradient-healthy-water { background: linear-gradient(60deg, #96deda 0%, #50c9c3 100%); }
.stp-gradient-amour-amour { background: linear-gradient(to top, #f77062 0%, #fe5196 100%); }
.stp-gradient-risky-concrete { background: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%); }
.stp-gradient-strong-stick { background: linear-gradient(to right, #a8caba 0%, #5d4157 100%); }
.stp-gradient-vicious-stance { background: linear-gradient(60deg, #29323c 0%, #485563 100%); }
.stp-gradient-palo-alto { background: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%); }
.stp-gradient-happy-memories { background: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); }
.stp-gradient-midnight-bloom { background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%); }
.stp-gradient-crystalline { background: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%); }
.stp-gradient-party-bliss { background: linear-gradient(to top, #4481eb 0%, #04befe 100%); }
.stp-gradient-confident-cloud { background: linear-gradient(to top, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%); }
.stp-gradient-le-cocktail { background: linear-gradient(45deg, #874da2 0%, #c43a30 100%); }
.stp-gradient-river-city { background: linear-gradient(to top, #4481eb 0%, #04befe 100%); }
.stp-gradient-frozen-berry { background: linear-gradient(to top, #e8198b 0%, #c7eafd 100%); }