.soweads-unit {
--sowe-radius: 18px;
--sowe-pad: 18px;
box-sizing: border-box;
position: relative;
margin: 1.8em auto;
padding: var(--sowe-pad);
border-radius: var(--sowe-radius);
max-width: 100%;
transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1);
isolation: isolate; display: flow-root; }
.soweads-unit > * {
position: relative;
z-index: 1;
}
.soweads-unit img,
.soweads-unit iframe,
.soweads-unit ins,
.soweads-unit video {
display: block;
max-width: 100%;
margin: 0 auto;
} .soweads-unit::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 38%);
z-index: 0;
} .soweads-unit.soweads-t-none {
padding: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
}
.soweads-unit.soweads-t-none::before {
display: none;
}  .soweads-unit.soweads-t-aurora-night {
background:
radial-gradient(120% 120% at 0% 0%, rgba(118, 75, 162, .55) 0%, transparent 55%),
radial-gradient(120% 120% at 100% 100%, rgba(102, 126, 234, .55) 0%, transparent 55%),
linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
box-shadow:
0 18px 40px -18px rgba(102, 126, 234, .65),
0 6px 18px -10px rgba(0, 0, 0, .55),
inset 0 1px 0 rgba(255, 255, 255, .12);
border: 1px solid rgba(168, 139, 250, .28);
color: #f8fafc;
} .soweads-unit.soweads-t-diamond-dust {
background:
radial-gradient(120% 120% at 20% 10%, #ffffff 0%, transparent 60%),
linear-gradient(135deg, #f8fafc 0%, #e2e8f0 55%, #cbd5e1 100%);
box-shadow:
0 16px 38px -20px rgba(148, 163, 184, .55),
0 4px 12px -8px rgba(100, 116, 139, .35),
inset 0 1px 0 rgba(255, 255, 255, .9);
border: 1px solid rgba(226, 232, 240, .9);
} .soweads-unit.soweads-t-rose-gold {
background:
linear-gradient(135deg, #fda4af 0%, #f9a8d4 42%, #fcd34d 100%);
box-shadow:
0 18px 40px -18px rgba(244, 114, 182, .55),
0 6px 16px -8px rgba(251, 191, 36, .4),
inset 0 1px 0 rgba(255, 255, 255, .55);
border: 1px solid rgba(255, 255, 255, .5);
} .soweads-unit.soweads-t-emerald-mist {
background:
radial-gradient(120% 120% at 100% 0%, rgba(16, 185, 129, .5) 0%, transparent 55%),
linear-gradient(135deg, #d1fae5 0%, #ecfdf5 60%, #f0fdf4 100%);
box-shadow:
0 16px 38px -20px rgba(16, 185, 129, .45),
0 4px 12px -8px rgba(5, 150, 105, .25),
inset 0 1px 0 rgba(255, 255, 255, .8);
border: 1px solid rgba(167, 243, 208, .8);
} .soweads-unit.soweads-t-twilight-velvet {
background:
radial-gradient(120% 120% at 100% 0%, rgba(236, 72, 153, .5) 0%, transparent 55%),
linear-gradient(135deg, #4c1d95 0%, #1e1b4b 100%);
box-shadow:
0 18px 40px -18px rgba(124, 58, 237, .6),
0 6px 18px -10px rgba(0, 0, 0, .5),
inset 0 1px 0 rgba(255, 255, 255, .1);
border: 1px solid rgba(192, 132, 252, .3);
color: #fdf4ff;
} .soweads-unit.soweads-t-lava-glow {
background:
radial-gradient(120% 120% at 0% 100%, rgba(220, 38, 38, .55) 0%, transparent 55%),
linear-gradient(135deg, #fde68a 0%, #fb923c 50%, #dc2626 100%);
box-shadow:
0 18px 40px -18px rgba(249, 115, 22, .6),
0 6px 18px -10px rgba(220, 38, 38, .45),
inset 0 1px 0 rgba(255, 255, 255, .45);
border: 1px solid rgba(255, 237, 213, .6);
} .soweads-unit.soweads-t-abyss-deep {
background:
radial-gradient(120% 120% at 0% 0%, rgba(14, 165, 233, .45) 0%, transparent 55%),
linear-gradient(135deg, #1e3a8a 0%, #0c1844 100%);
box-shadow:
0 18px 40px -18px rgba(30, 58, 138, .7),
0 6px 18px -10px rgba(0, 0, 0, .55),
inset 0 1px 0 rgba(125, 211, 252, .18);
border: 1px solid rgba(96, 165, 250, .28);
color: #e0f2fe;
} .soweads-unit.soweads-t-pure-minimal {
background: #ffffff;
box-shadow:
0 1px 2px rgba(15, 23, 42, .04),
0 8px 24px -16px rgba(15, 23, 42, .12);
border: 1px solid #e2e8f0;
} .soweads-unit.soweads-t-midnight-pro {
background:
radial-gradient(120% 120% at 100% 0%, rgba(99, 102, 241, .35) 0%, transparent 55%),
linear-gradient(135deg, #1e293b 0%, #0f172a 60%, #312e81 130%);
box-shadow:
0 18px 40px -18px rgba(49, 46, 129, .65),
0 6px 18px -10px rgba(0, 0, 0, .6),
inset 0 1px 0 rgba(165, 180, 252, .16);
border: 1px solid rgba(99, 102, 241, .32);
color: #e0e7ff;
} .soweads-unit.soweads-t-cyber-neon {
background:
linear-gradient(135deg, rgba(15, 23, 42, .92) 0%, rgba(30, 41, 59, .92) 100%);
box-shadow:
0 0 0 1px rgba(34, 211, 238, .55),
0 0 24px rgba(34, 211, 238, .35),
0 0 48px rgba(240, 171, 252, .28),
inset 0 1px 0 rgba(255, 255, 255, .08);
border: 1px solid rgba(163, 230, 53, .4);
color: #ecfeff;
} .soweads-unit.soweads-t-mint-breeze {
background:
radial-gradient(120% 120% at 0% 0%, rgba(94, 234, 212, .55) 0%, transparent 55%),
linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 60%, #ffffff 100%);
box-shadow:
0 16px 38px -20px rgba(20, 184, 166, .45),
0 4px 12px -8px rgba(13, 148, 136, .22),
inset 0 1px 0 rgba(255, 255, 255, .8);
border: 1px solid rgba(153, 246, 228, .8);
} .soweads-unit.soweads-t-sunset-amber {
background:
radial-gradient(120% 120% at 0% 0%, rgba(251, 191, 36, .55) 0%, transparent 55%),
linear-gradient(135deg, #fdba74 0%, #fb923c 50%, #b45309 100%);
box-shadow:
0 18px 40px -18px rgba(251, 146, 60, .55),
0 6px 16px -8px rgba(180, 83, 9, .4),
inset 0 1px 0 rgba(255, 255, 255, .4);
border: 1px solid rgba(254, 215, 170, .6);
} .soweads-unit.soweads-t-forest-canopy {
background:
radial-gradient(120% 120% at 0% 0%, rgba(134, 239, 172, .4) 0%, transparent 55%),
linear-gradient(135deg, #16a34a 0%, #14532d 100%);
box-shadow:
0 18px 40px -18px rgba(22, 163, 74, .55),
0 6px 18px -10px rgba(20, 83, 45, .5),
inset 0 1px 0 rgba(187, 247, 208, .18);
border: 1px solid rgba(134, 239, 172, .3);
color: #f0fdf4;
} .soweads-unit.soweads-t-sakura-bloom {
background:
radial-gradient(120% 120% at 100% 0%, rgba(236, 72, 153, .35) 0%, transparent 55%),
linear-gradient(135deg, #fce7f3 0%, #fdf2f8 55%, #ffffff 100%);
box-shadow:
0 16px 38px -20px rgba(244, 114, 182, .4),
0 4px 12px -8px rgba(236, 72, 153, .2),
inset 0 1px 0 rgba(255, 255, 255, .8);
border: 1px solid rgba(251, 207, 232, .8);
} .soweads-unit.soweads-t-tech-cobalt {
background:
linear-gradient(135deg, #bfdbfe 0%, #3b82f6 50%, #1e40af 100%);
box-shadow:
0 18px 40px -18px rgba(59, 130, 246, .6),
0 6px 16px -8px rgba(30, 64, 175, .45),
inset 0 1px 0 rgba(255, 255, 255, .45);
border: 1px solid rgba(191, 219, 254, .6);
color: #f8fafc;
} .soweads-unit.soweads-t-metallic-graphite {
background:
repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
linear-gradient(135deg, #9ca3af 0%, #4b5563 55%, #1f2937 100%);
box-shadow:
0 18px 40px -18px rgba(31, 41, 55, .65),
0 6px 18px -10px rgba(17, 24, 39, .5),
inset 0 1px 0 rgba(255, 255, 255, .22);
border: 1px solid rgba(156, 163, 175, .35);
color: #f3f4f6;
} .soweads-unit.soweads-t-rainbow-mesh {
background:
radial-gradient(80% 80% at 10% 20%, rgba(252, 165, 165, .7) 0%, transparent 60%),
radial-gradient(80% 80% at 90% 20%, rgba(252, 211, 77, .7) 0%, transparent 60%),
radial-gradient(80% 80% at 50% 90%, rgba(103, 232, 249, .7) 0%, transparent 60%),
linear-gradient(135deg, #c4b5fd 0%, #fca5a5 100%);
box-shadow:
0 18px 40px -18px rgba(167, 139, 250, .55),
0 6px 18px -10px rgba(244, 114, 182, .35),
inset 0 1px 0 rgba(255, 255, 255, .5);
border: 1px solid rgba(255, 255, 255, .4);
} .soweads-unit.soweads-t-vintage-bronze {
background:
radial-gradient(120% 120% at 0% 0%, rgba(253, 224, 71, .45) 0%, transparent 55%),
linear-gradient(135deg, #b45309 0%, #92400e 50%, #78350f 100%);
box-shadow:
0 18px 40px -18px rgba(120, 53, 15, .65),
0 6px 18px -10px rgba(146, 64, 14, .5),
inset 0 1px 0 rgba(253, 230, 138, .35);
border: 1px solid rgba(252, 211, 77, .3);
color: #fef3c7;
} .soweads-unit.soweads-t-geometric-slate {
background:
linear-gradient(135deg, #e2e8f0 0%, #94a3b8 50%, #334155 100%);
box-shadow:
0 18px 40px -18px rgba(51, 65, 85, .6),
0 6px 18px -10px rgba(15, 23, 42, .45),
inset 0 1px 0 rgba(255, 255, 255, .35);
border: 1px solid rgba(148, 163, 184, .35);
color: #f1f5f9;
} .soweads-unit.soweads-t-creamy-soft {
background:
radial-gradient(120% 120% at 0% 0%, rgba(253, 230, 138, .55) 0%, transparent 55%),
linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
box-shadow:
0 16px 38px -20px rgba(251, 191, 36, .4),
0 4px 12px -8px rgba(217, 119, 6, .2),
inset 0 1px 0 rgba(255, 255, 255, .8);
border: 1px solid rgba(254, 240, 138, .85);
}  .soweads-unit.soweads-t-amber-honey {
background:
radial-gradient(120% 120% at 0% 0%, rgba(245, 158, 11, .5) 0%, transparent 55%),
linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #78350f 100%);
box-shadow:
0 18px 40px -18px rgba(217, 119, 6, .6),
0 6px 18px -10px rgba(120, 53, 15, .5),
inset 0 1px 0 rgba(254, 243, 199, .4);
border: 1px solid rgba(252, 211, 77, .4);
color: #fffbeb;
} .soweads-unit.soweads-t-coral-sunset {
background:
radial-gradient(120% 120% at 100% 0%, rgba(244, 63, 94, .45) 0%, transparent 55%),
linear-gradient(135deg, #fecaca 0%, #fb7185 50%, #be123c 100%);
box-shadow:
0 18px 40px -18px rgba(225, 29, 72, .55),
0 6px 16px -8px rgba(190, 18, 60, .4),
inset 0 1px 0 rgba(255, 255, 255, .4);
border: 1px solid rgba(254, 205, 211, .6);
color: #fff1f2;
} .soweads-unit.soweads-t-terracotta-clay {
background:
radial-gradient(120% 120% at 0% 0%, rgba(234, 88, 12, .5) 0%, transparent 55%),
linear-gradient(135deg, #fb923c 0%, #c2410c 50%, #7c2d12 100%);
box-shadow:
0 18px 40px -18px rgba(194, 65, 12, .6),
0 6px 18px -10px rgba(124, 45, 18, .5),
inset 0 1px 0 rgba(254, 215, 170, .35);
border: 1px solid rgba(253, 186, 116, .35);
color: #fff7ed;
} .soweads-unit.soweads-t-peach-blossom {
background:
radial-gradient(120% 120% at 100% 0%, rgba(244, 63, 94, .3) 0%, transparent 55%),
linear-gradient(135deg, #ffe4e6 0%, #fecdd3 50%, #fda4af 100%);
box-shadow:
0 16px 38px -20px rgba(244, 63, 94, .35),
0 4px 12px -8px rgba(225, 29, 72, .18),
inset 0 1px 0 rgba(255, 255, 255, .8);
border: 1px solid rgba(253, 164, 175, .7);
} .soweads-unit.soweads-t-molten-gold {
background:
radial-gradient(120% 120% at 0% 100%, rgba(220, 38, 38, .5) 0%, transparent 55%),
linear-gradient(135deg, #fde047 0%, #f59e0b 50%, #dc2626 100%);
box-shadow:
0 18px 40px -18px rgba(220, 38, 38, .55),
0 6px 16px -8px rgba(245, 158, 11, .4),
inset 0 1px 0 rgba(254, 240, 138, .5);
border: 1px solid rgba(254, 215, 170, .55);
color: #fff7ed;
} .soweads-unit.soweads-t-apricot-glow {
background:
radial-gradient(120% 120% at 0% 0%, rgba(252, 211, 77, .5) 0%, transparent 55%),
linear-gradient(135deg, #fef9c3 0%, #fcd34d 50%, #f59e0b 100%);
box-shadow:
0 16px 38px -20px rgba(245, 158, 11, .4),
0 4px 12px -8px rgba(217, 119, 6, .2),
inset 0 1px 0 rgba(255, 255, 255, .8);
border: 1px solid rgba(253, 224, 71, .75);
} .soweads-unit.soweads-t-crimson-blaze {
background:
radial-gradient(120% 120% at 0% 0%, rgba(220, 38, 38, .5) 0%, transparent 55%),
linear-gradient(135deg, #f87171 0%, #dc2626 50%, #7f1d1d 100%);
box-shadow:
0 18px 40px -18px rgba(127, 29, 29, .65),
0 6px 18px -10px rgba(220, 38, 38, .5),
inset 0 1px 0 rgba(252, 165, 165, .3);
border: 1px solid rgba(248, 113, 113, .35);
color: #fef2f2;
} .soweads-unit.soweads-t-caramel-swirl {
background:
radial-gradient(120% 120% at 0% 0%, rgba(217, 119, 6, .5) 0%, transparent 55%),
linear-gradient(135deg, #fcd34d 0%, #d97706 50%, #78350f 100%);
box-shadow:
0 18px 40px -18px rgba(120, 53, 15, .65),
0 6px 18px -10px rgba(180, 83, 9, .5),
inset 0 1px 0 rgba(253, 230, 138, .35);
border: 1px solid rgba(252, 211, 77, .32);
color: #fffbeb;
} .soweads-unit.soweads-t-marigold-sun {
background:
radial-gradient(120% 120% at 0% 0%, rgba(234, 179, 8, .5) 0%, transparent 55%),
linear-gradient(135deg, #fef08a 0%, #eab308 50%, #a16207 100%);
box-shadow:
0 18px 40px -18px rgba(161, 98, 7, .55),
0 6px 16px -8px rgba(234, 179, 8, .4),
inset 0 1px 0 rgba(254, 240, 138, .5);
border: 1px solid rgba(253, 224, 71, .55);
color: #fffbeb;
} .soweads-unit.soweads-t-persimmon-warm {
background:
radial-gradient(120% 120% at 0% 0%, rgba(251, 146, 60, .5) 0%, transparent 55%),
linear-gradient(135deg, #ffedd5 0%, #fb923c 50%, #c2410c 100%);
box-shadow:
0 18px 40px -18px rgba(194, 65, 12, .55),
0 6px 16px -8px rgba(251, 146, 60, .4),
inset 0 1px 0 rgba(255, 237, 213, .5);
border: 1px solid rgba(254, 215, 170, .55);
color: #fff7ed;
}  .soweads-unit.soweads-t-pearl-shell {
background:
radial-gradient(circle at 20% 30%, rgba(251, 207, 232, .55) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(199, 210, 254, .55) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(254, 249, 195, .35) 0%, transparent 60%),
linear-gradient(135deg, #fdf4ff 0%, #ffffff 50%, #fff7ed 100%);
box-shadow:
0 14px 36px -18px rgba(192, 132, 252, .3),
0 4px 12px -8px rgba(244, 114, 182, .2),
inset 0 1px 0 rgba(255, 255, 255, .9),
inset 0 0 0 1px rgba(255, 255, 255, .5);
border: 1px solid rgba(255, 255, 255, .6);
} .soweads-unit.soweads-t-snow-frost {
background:
radial-gradient(120% 120% at 0% 0%, rgba(186, 230, 253, .4) 0%, transparent 55%),
linear-gradient(135deg, #ffffff 0%, #f0f9ff 55%, #e0f2fe 100%);
box-shadow:
0 14px 36px -18px rgba(14, 165, 233, .25),
0 4px 12px -8px rgba(56, 189, 248, .15),
inset 0 1px 0 rgba(255, 255, 255, .9);
border: 1px solid rgba(186, 230, 253, .6);
} .soweads-unit.soweads-t-sakura-snow {
background:
radial-gradient(120% 120% at 100% 0%, rgba(251, 207, 232, .4) 0%, transparent 55%),
linear-gradient(135deg, #fff1f2 0%, #fce7f3 55%, #fbcfe8 100%);
box-shadow:
0 14px 36px -18px rgba(244, 114, 182, .3),
0 4px 12px -8px rgba(236, 72, 153, .15),
inset 0 1px 0 rgba(255, 255, 255, .85);
border: 1px solid rgba(251, 207, 232, .7);
} .soweads-unit.soweads-t-deep-ocean {
background:
radial-gradient(120% 120% at 0% 0%, rgba(13, 148, 136, .5) 0%, transparent 55%),
linear-gradient(135deg, #0ea5e9 0%, #0d9488 50%, #134e4a 100%);
box-shadow:
0 18px 40px -18px rgba(19, 78, 74, .6),
0 6px 18px -10px rgba(13, 148, 136, .45),
inset 0 1px 0 rgba(153, 246, 228, .2);
border: 1px solid rgba(45, 212, 191, .3);
color: #ecfeff;
} .soweads-unit.soweads-t-aurora-flow {
background:
linear-gradient(135deg, #34d399 0%, #22d3ee 30%, #818cf8 60%, #c084fc 100%);
box-shadow:
0 18px 40px -18px rgba(129, 140, 248, .55),
0 6px 16px -8px rgba(34, 211, 238, .4),
inset 0 1px 0 rgba(255, 255, 255, .45);
border: 1px solid rgba(255, 255, 255, .3);
color: #ffffff;
} .soweads-unit.soweads-t-cloud-soft {
--sowe-radius: 24px;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
box-shadow:
0 22px 48px -18px rgba(100, 116, 139, .25),
0 8px 18px -10px rgba(100, 116, 139, .12),
inset 0 1px 0 rgba(255, 255, 255, .9);
border: 1px solid rgba(226, 232, 240, .8);
} .soweads-unit.soweads-t-mint-fresh {
background:
radial-gradient(120% 120% at 0% 0%, rgba(34, 197, 94, .4) 0%, transparent 55%),
linear-gradient(135deg, #dcfce7 0%, #86efac 50%, #22c55e 100%);
box-shadow:
0 16px 38px -20px rgba(34, 197, 94, .4),
0 4px 12px -8px rgba(22, 163, 74, .2),
inset 0 1px 0 rgba(255, 255, 255, .7);
border: 1px solid rgba(134, 239, 172, .65);
} .soweads-unit.soweads-t-frosted-glass {
background: linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, rgba(241, 245, 249, .55) 100%);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
box-shadow:
0 12px 32px -12px rgba(15, 23, 42, .2),
inset 0 1px 0 rgba(255, 255, 255, .8),
inset 0 0 0 1px rgba(255, 255, 255, .5);
border: 1px solid rgba(255, 255, 255, .6);
} .soweads-unit.soweads-t-floating-3d {
--sowe-radius: 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
transform: translateY(-4px);
transition: box-shadow .35s cubic-bezier(.4, 0, .2, 1);
box-shadow:
0 24px 48px -16px rgba(15, 23, 42, .35),
0 10px 20px -10px rgba(15, 23, 42, .18),
inset 0 1px 0 rgba(255, 255, 255, .9);
} .soweads-unit.soweads-t-dashed-creative {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
border: 2.5px dashed #f59e0b;
box-shadow:
0 8px 22px -12px rgba(245, 158, 11, .35),
inset 0 1px 0 rgba(255, 255, 255, .7);
} .soweads-unit.soweads-t-stripe-dynamic {
background: repeating-linear-gradient(45deg, #fbcfe8 0 12px, #f9a8d4 12px 24px);
box-shadow:
0 14px 34px -16px rgba(244, 114, 182, .4),
inset 0 1px 0 rgba(255, 255, 255, .4);
border: 1px solid rgba(251, 207, 232, .6);
} @media (max-width: 600px) {
.soweads-unit {
--sowe-pad: 12px;
--sowe-radius: 14px;
margin: 1.2em auto;
}
} @media (prefers-reduced-motion: reduce) {
.soweads-unit {
transition: none;
}
}