/* Easter theme — active only when */
html.theme-easter-wireframe {
--easter-lilac: #ede9fe;
--easter-mint: #d1fae5;
--easter-butter: #fef9c3;
--easter-ink: #5b21b6;
/* Inline SVG tiles: eggs (layer 1) + bunny silhouettes (layer 2) */
--easter-bg-eggs: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cellipse%20cx%3D%2270%22%20cy%3D%2280%22%20rx%3D%2224%22%20ry%3D%2230%22%20fill%3D%22%23f472b6%22%20opacity%3D%220.58%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22140%22%20rx%3D%2224%22%20ry%3D%2230%22%20fill%3D%22%2334d399%22%20opacity%3D%220.52%22%2F%3E%3Cellipse%20cx%3D%22320%22%20cy%3D%2270%22%20rx%3D%2224%22%20ry%3D%2230%22%20fill%3D%22%23fbbf24%22%20opacity%3D%220.55%22%2F%3E%3Cellipse%20cx%3D%22340%22%20cy%3D%22260%22%20rx%3D%2222%22%20ry%3D%2228%22%20fill%3D%22%23c084fc%22%20opacity%3D%220.5%22%2F%3E%3Cellipse%20cx%3D%2290%22%20cy%3D%22300%22%20rx%3D%2222%22%20ry%3D%2228%22%20fill%3D%22%2360a5fa%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
--easter-bg-bunnies: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20360%20360%22%3E%3Cellipse%20cx%3D%2280%22%20cy%3D%22200%22%20rx%3D%2222%22%20ry%3D%2220%22%20fill%3D%22%23a78bfa%22%20opacity%3D%220.48%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%22168%22%20rx%3D%229%22%20ry%3D%2224%22%20fill%3D%22%23a78bfa%22%20opacity%3D%220.48%22%2F%3E%3Cellipse%20cx%3D%2292%22%20cy%3D%22168%22%20rx%3D%229%22%20ry%3D%2224%22%20fill%3D%22%23a78bfa%22%20opacity%3D%220.48%22%2F%3E%3Cellipse%20cx%3D%22260%22%20cy%3D%22100%22%20rx%3D%2220%22%20ry%3D%2218%22%20fill%3D%22%23fb7185%22%20opacity%3D%220.48%22%2F%3E%3Cellipse%20cx%3D%22250%22%20cy%3D%2272%22%20rx%3D%228%22%20ry%3D%2220%22%20fill%3D%22%23fb7185%22%20opacity%3D%220.48%22%2F%3E%3Cellipse%20cx%3D%22270%22%20cy%3D%2272%22%20rx%3D%228%22%20ry%3D%2220%22%20fill%3D%22%23fb7185%22%20opacity%3D%220.48%22%2F%3E%3Cellipse%20cx%3D%22180%22%20cy%3D%22280%22%20rx%3D%2220%22%20ry%3D%2218%22%20fill%3D%22%2386efac%22%20opacity%3D%220.45%22%2F%3E%3Cellipse%20cx%3D%22172%22%20cy%3D%22252%22%20rx%3D%227%22%20ry%3D%2219%22%20fill%3D%22%2386efac%22%20opacity%3D%220.45%22%2F%3E%3Cellipse%20cx%3D%22188%22%20cy%3D%22252%22%20rx%3D%227%22%20ry%3D%2219%22%20fill%3D%22%2386efac%22%20opacity%3D%220.45%22%2F%3E%3C%2Fsvg%3E");
}
html.theme-easter-wireframe body {
position: relative;
background: linear-gradient(165deg, var(--easter-butter) 0%, #fff 42%, var(--easter-lilac) 100%);
}
/* Decorative eggs + bunnies behind page content (fixed, non-interactive) */
html.theme-easter-wireframe body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--easter-bg-eggs), var(--easter-bg-bunnies);
background-repeat: repeat, repeat;
background-size: 440px 440px, 380px 380px;
background-position: 0 0, 17% 23%;
opacity: 0.42;
}
/* Stack page sections above body::before — do not override fixed/sticky (breaks shop modal, admin modals, nav) */
html.theme-easter-wireframe body > *:not(.site-header):not(.mobile-menu):not(.pdm-overlay):not(.modal-overlay) {
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
html.theme-easter-wireframe body::before {
opacity: 0.34;
background-size: 320px 320px, 280px 280px;
}
}
html.theme-easter-wireframe .site-header {
border-bottom: 1px solid rgba(91, 33, 182, 0.15);
box-shadow: 0 4px 20px rgba(91, 33, 182, 0.06);
background: rgba(255, 255, 255, 0.88) !important;
}
html.theme-easter-wireframe .product-card,
html.theme-easter-wireframe .modal,
html.theme-easter-wireframe .page-hero,
html.theme-easter-wireframe .section .container > .shop-layout {
border: 1px solid rgba(5, 150, 105, 0.2) !important;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(91, 33, 182, 0.06);
background: rgba(255, 255, 255, 0.82) !important;
}
html.theme-easter-wireframe .btn-primary {
background: linear-gradient(135deg, #fce7f3 0%, #ddd6fe 100%) !important;
color: var(--easter-ink) !important;
border: 1px solid rgba(91, 33, 182, 0.25) !important;
}
/* Green CTAs: base .btn-green uses white text; Easter must override bg+color together (high specificity) */
html.theme-easter-wireframe button.btn.btn-green,
html.theme-easter-wireframe a.btn.btn-green,
html.theme-easter-wireframe .btn.btn-green.btn-lg {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 55%, #16a34a 100%) !important;
background-color: #22c55e !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 2px solid #15803d !important;
border-color: #15803d !important;
}
html.theme-easter-wireframe button.btn.btn-green:hover,
html.theme-easter-wireframe a.btn.btn-green:hover,
html.theme-easter-wireframe .btn.btn-green.btn-lg:hover {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
background-color: #16a34a !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: #14532d !important;
}
html.theme-easter-wireframe #checkout-btn {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 55%, #16a34a 100%) !important;
background-color: #22c55e !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border: 2px solid #15803d !important;
}
html.theme-easter-wireframe #checkout-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
background-color: #16a34a !important;
}
html.theme-easter-wireframe #checkout-btn:disabled {
background: #9ca3af !important;
background-color: #9ca3af !important;
color: #f9fafb !important;
-webkit-text-fill-color: #f9fafb !important;
border-color: #6b7280 !important;
opacity: 1;
}
/* Light outline buttons only — avoid pairing white fill with .btn-green’s white text */
html.theme-easter-wireframe .btn-outline:not(.btn-green) {
border: 1px solid rgba(5, 150, 105, 0.35) !important;
background: rgba(255, 255, 255, 0.85) !important;
}
html.theme-easter-wireframe .pdm-modal {
border: 1px solid rgba(124, 58, 237, 0.25) !important;
box-shadow: 0 20px 50px rgba(91, 33, 182, 0.12);
}
html.theme-easter-wireframe .alert-banner {
border: 1px solid rgba(217, 119, 6, 0.25) !important;
background: rgba(254, 243, 199, 0.95) !important;
}
html.theme-easter-wireframe .nav-logo-text .nav-logo-name::after {
content: " 🐣";
font-weight: 700;
}