/*
 * MVLS custom styles — pieces that don't map cleanly to Tailwind utilities
 * (repeating-gradient textures, layered hero scrims).
 */

/* Diagonal-stripe placeholder texture for product & category imagery */
.pattern-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03) 0 11px,
        rgba(255, 255, 255, 0.06) 11px 22px
    );
}

.pattern-stripes-lg {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03) 0 13px,
        rgba(255, 255, 255, 0.06) 13px 26px
    );
}

/* Navy-tinted stripes for imagery placeholders on light backgrounds (Daylight design) */
.pattern-stripes-navy {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(12, 42, 99, 0.035) 0 11px,
        rgba(12, 42, 99, 0.07) 11px 22px
    );
}

.pattern-stripes-royal {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(47, 111, 224, 0.06) 0 11px,
        rgba(47, 111, 224, 0.12) 11px 22px
    );
}

/* Hero photo scrims — horizontal fade for copy legibility, vertical fade into the page */
.hero-scrim-x {
    background: linear-gradient(
        90deg,
        rgba(4, 18, 47, 0.92) 0%,
        rgba(4, 18, 47, 0.72) 38%,
        rgba(4, 18, 47, 0.15) 72%,
        transparent 100%
    );
}

.hero-scrim-y {
    background: linear-gradient(0deg, rgba(4, 18, 47, 0.7) 0%, transparent 40%);
}