/* ═══════════════════════════════════════════════════════════
 *  Home Style — Filters + Textures
 *
 *  Scoped to .wapu-playground-home and the editor picker so
 *  storefront/archive/product/cart/checkout stay untouched.
 *  Filters use filter CSS (classics) + mix-blend-mode (duotones/tints).
 *  Textures use SVG noise data-URIs + gradients.
 * ═══════════════════════════════════════════════════════════ */

/* ─── FILTERS: clásicos ─── */
.wp-filter--natural img,
.wp-filter--natural .wp-bg-image { filter: none; }

.wp-filter--bw-soft img,
.wp-filter--bw-soft .wp-bg-image { filter: grayscale(0.95) contrast(0.95) brightness(1.02); }

.wp-filter--bw-hard img,
.wp-filter--bw-hard .wp-bg-image { filter: grayscale(1) contrast(1.35) brightness(0.95); }

.wp-filter--sepia img,
.wp-filter--sepia .wp-bg-image { filter: sepia(0.4) saturate(0.7) brightness(0.98); }

.wp-filter--gloss img,
.wp-filter--gloss .wp-bg-image { filter: saturate(1.4) contrast(1.15) brightness(0.96); }

/* ─── FILTERS: tintes (overlay de color sobre foto natural) ─── */
.wp-filter--warm-tint,
.wp-filter--cool-tint,
.wp-filter--matcha-tint,
.wp-filter--lilac-tint,
.wp-filter--rose-tint { position: relative; isolation: isolate; overflow: hidden; }

.wp-filter--warm-tint::after,
.wp-filter--cool-tint::after,
.wp-filter--matcha-tint::after,
.wp-filter--lilac-tint::after,
.wp-filter--rose-tint::after {
    content: ''; position: absolute; inset: 0;
    mix-blend-mode: multiply; pointer-events: none;
    border-radius: inherit; z-index: 2;
}

.wp-filter--warm-tint::after   { background: #FCA5A5; opacity: 0.5; }
.wp-filter--cool-tint::after   { background: #60A5FA; opacity: 0.45; }
.wp-filter--matcha-tint::after { background: #86EFAC; opacity: 0.45; }
.wp-filter--lilac-tint::after  { background: #C4B5FD; opacity: 0.5; }
.wp-filter--rose-tint::after   { background: #F9A8D4; opacity: 0.45; }

/* ─── FILTERS: duotones (grayscale + multiply + screen) ─── */
.wp-filter--duo-rouge,
.wp-filter--duo-terra,
.wp-filter--duo-indigo,
.wp-filter--duo-moss,
.wp-filter--duo-rose,
.wp-filter--duo-amber,
.wp-filter--duo-plum {
    position: relative; isolation: isolate; overflow: hidden;
}

.wp-filter--duo-rouge img,   .wp-filter--duo-rouge .wp-bg-image,
.wp-filter--duo-terra img,   .wp-filter--duo-terra .wp-bg-image,
.wp-filter--duo-indigo img,  .wp-filter--duo-indigo .wp-bg-image,
.wp-filter--duo-moss img,    .wp-filter--duo-moss .wp-bg-image,
.wp-filter--duo-rose img,    .wp-filter--duo-rose .wp-bg-image,
.wp-filter--duo-amber img,   .wp-filter--duo-amber .wp-bg-image,
.wp-filter--duo-plum img,    .wp-filter--duo-plum .wp-bg-image {
    filter: grayscale(1) contrast(1.2) brightness(0.9);
}

.wp-filter--duo-rouge::before,
.wp-filter--duo-terra::before,
.wp-filter--duo-indigo::before,
.wp-filter--duo-moss::before,
.wp-filter--duo-rose::before,
.wp-filter--duo-amber::before,
.wp-filter--duo-plum::before {
    content: ''; position: absolute; inset: 0;
    mix-blend-mode: multiply; pointer-events: none;
    border-radius: inherit; z-index: 1;
}

.wp-filter--duo-rouge::after,
.wp-filter--duo-terra::after,
.wp-filter--duo-indigo::after,
.wp-filter--duo-moss::after,
.wp-filter--duo-rose::after,
.wp-filter--duo-amber::after,
.wp-filter--duo-plum::after {
    content: ''; position: absolute; inset: 0;
    mix-blend-mode: screen; pointer-events: none;
    border-radius: inherit; z-index: 2;
}

.wp-filter--duo-rouge::before  { background: #8B0A14; }
.wp-filter--duo-rouge::after   { background: #C8102E; opacity: 0.5; }

.wp-filter--duo-terra::before  { background: #2E0D14; }
.wp-filter--duo-terra::after   { background: #A0623D; opacity: 0.5; }

.wp-filter--duo-indigo::before { background: #1E3A8A; }
.wp-filter--duo-indigo::after  { background: #6B7FD9; opacity: 0.4; }

.wp-filter--duo-moss::before   { background: #2D3B1E; }
.wp-filter--duo-moss::after    { background: #8BAB5D; opacity: 0.4; }

.wp-filter--duo-rose::before   { background: #9D174D; }
.wp-filter--duo-rose::after    { background: #F9A8D4; opacity: 0.5; }

.wp-filter--duo-amber::before  { background: #7C2D12; }
.wp-filter--duo-amber::after   { background: #FBBF24; opacity: 0.45; }

.wp-filter--duo-plum::before   { background: #4C1D95; }
.wp-filter--duo-plum::after    { background: #C4B5FD; opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════
 *  TEXTURES
 * ═══════════════════════════════════════════════════════════ */

.wp-texture--flat { background: #fff; }

.wp-texture--paper-grain {
    background-color: #FAF4EC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wp-texture--dark-linen {
    background-color: #1a1a1a;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
}

.wp-texture--soft-cream {
    background-color: #F5EDE4;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(185,164,209,0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(245,183,197,0.12) 0%, transparent 50%),
        linear-gradient(135deg, #F5EDE4 0%, #EADED0 100%);
}

.wp-texture--velvet-rose {
    background-color: #FFE5EC;
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(201,24,88,0.08) 0%, transparent 50%),
        linear-gradient(135deg, #FFE5EC 0%, #FFC2D4 100%);
}

.wp-texture--muslin {
    background-color: #EFE9DF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23m)'/%3E%3C/svg%3E");
}

.wp-texture--gold-gloss {
    background-color: #0F0F0F;
    background-image:
        linear-gradient(135deg, transparent 0%, rgba(212,175,55,0.08) 50%, transparent 100%),
        radial-gradient(circle at 30% 30%, rgba(212,175,55,0.12) 0%, transparent 40%),
        linear-gradient(135deg, #0F0F0F 0%, #1F1F1F 100%);
}

.wp-texture--tropical-haze {
    background-color: #FFF5E1;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(255,87,87,0.15) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(46,125,50,0.12) 0%, transparent 40%),
        linear-gradient(135deg, #FFF5E1 0%, #FFE0B2 100%);
}