/* =====================================================================
   SPOOKY — front-end template overlay
   Halloween storefront: near-black canvas, pumpkin-orange call-to-action
   buttons, witch-purple secondary accents, and a dripping Creepster
   display font. Loaded AFTER the base stylesheet stack and scoped to
   body.tmpl-spooky, so it never affects the admin area. Content cards stay
   light for readability; the canvas, accents, and headings get the look.
   ===================================================================== */

/* ---- Page canvas ---------------------------------------------------- */
body.tmpl-spooky {
    background-color: #120a18;
    background-image: linear-gradient(160deg, #120a18 0%, #1a0f24 55%, #0c0712 100%);
    font-family: 'Inter', 'Nunito', sans-serif;
}

/* ---- Display headings ----------------------------------------------- */
.tmpl-spooky .slider-content h2,
.tmpl-spooky .section-title h2,
.tmpl-spooky .page-title h2 {
    font-family: 'Creepster', 'Inter', cursive;
    letter-spacing: 2px;
    font-weight: 400;
}
/* Homepage / related-products headings sit on the near-black canvas → lighten */
.tmpl-spooky .section-title h2 { color: #f1e9f8; }

/* ---- Accent tokens -------------------------------------------------- */
/* Buttons / cart badge / fills: pumpkin orange */
.tmpl-spooky .theme-bg { background: #ff7518 !important; }
/* Eyebrows / links / text accents: a lighter orange that pops on near-black */
.tmpl-spooky .theme-color { color: #ff8a3d !important; }
/* Borders: orange */
.tmpl-spooky .theme-border { border-color: #ff7518 !important; }
.tmpl-spooky .border-theme02 { border-color: #ff7518 !important; }
.tmpl-spooky a.c-theme,
.tmpl-spooky .c-theme { color: #ff8a3d !important; }

/* Cart-count badge: dark text on the bright orange for contrast */
.tmpl-spooky .s-count { color: #1a0e05 !important; }

/* Primary buttons get an eerie orange glow */
.tmpl-spooky .web-btn.theme-bg { box-shadow: 0 8px 22px rgba(255, 117, 24, .30); }

/* Translucent homepage "latest / related" panel — keep subtle on dark */
.tmpl-spooky .product-area.pb-70 {
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .30);
}

/* ---- custom-bridge red accents → orange / purple -------------------- */
/* Category cards (white tiles on the near-black canvas) */
.tmpl-spooky .site-category-box::before { background: #ff7518; }
.tmpl-spooky .site-category-link:hover .site-category-box,
.tmpl-spooky .site-category-link:focus .site-category-box {
    border-color: #9b4dff;
    box-shadow: 0 12px 36px rgba(155, 77, 255, .22);
}
.tmpl-spooky .site-category-link:hover .site-category-box h4,
.tmpl-spooky .site-category-link:focus .site-category-box h4 { color: #7b2ff7; }
.tmpl-spooky .site-category-link .site-category-box b.primary-color { color: #ff7518; }

/* Active nav underline */
.tmpl-spooky .main-menu nav ul li a.site-nav-active,
.tmpl-spooky .main-menu nav ul li a.site-nav-active:hover { color: #ff8a3d !important; }
.tmpl-spooky .main-menu nav ul li a.site-nav-active::after { background: #ff7518; }

/* Header nav + icons: lighten for legibility on the dark hero. Scoped to the
   top-level links only — the white "Pages" dropdown and the white search pill
   keep their own dark text. */
.tmpl-spooky .main-menu nav > ul > li > a { color: #e8def5 !important; }
.tmpl-spooky .main-menu nav > ul > li:hover > a { color: #ff8a3d !important; }
.tmpl-spooky .main-menu ul li > a::before { background: #ff7518; }
.tmpl-spooky header .dark-black-color,
.tmpl-spooky header .site-cart-toggle span,
.tmpl-spooky header .header-account span { color: #e8def5 !important; }
.tmpl-spooky header .dark-black-color:hover,
.tmpl-spooky header .site-cart-toggle:hover span,
.tmpl-spooky header .header-account span:hover { color: #ff8a3d !important; }

/* Product-card title hover (witch purple, readable on the white card) */
.tmpl-spooky .s-p-wrapper .single-product .single-product-info h6 a:hover { color: #7b2ff7 !important; }

/* Shop pagination (base accent is #c88d4d) */
.tmpl-spooky .site-page-btn:hover,
.tmpl-spooky .site-page-active {
    background: #ff7518;
    border-color: #ff7518;
    color: #1a0e05 !important;
}

/* Secondary mini-category label */
.tmpl-spooky .shop-mini-category { color: #9b4dff; }

/* ---- Hero: haunted purple night + drifting fog + rising embers ------- */
/* Replaces the default light photo (set inline via data-background) and the
   plain white moving circle. Pure CSS on existing elements + pseudo-elements,
   so the hero markup, slides, and content stay exactly where they are. */
.tmpl-spooky .single-slider {
    position: relative;
    background-color: #120a1e !important;
    background-image:
        radial-gradient(120% 90% at 50% 100%, rgba(155,77,255,.12) 0%, rgba(155,77,255,0) 60%),
        linear-gradient(160deg, #140a1e 0%, #1b0f2b 45%, #0b0712 100%) !important;
}
.tmpl-spooky .single-slider::before,
.tmpl-spooky .single-slider::after {
    content: "";
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    z-index: -1; pointer-events: none;
}
/* Drifting fog */
.tmpl-spooky .single-slider::before {
    background:
        radial-gradient(55% 45% at 22% 78%, rgba(155,77,255,.16), transparent 70%),
        radial-gradient(50% 40% at 78% 68%, rgba(255,117,24,.12), transparent 70%),
        radial-gradient(45% 35% at 55% 92%, rgba(155,77,255,.10), transparent 70%);
    animation: tmplFogDrift 16s ease-in-out infinite alternate;
}
/* Rising embers */
.tmpl-spooky .single-slider::after {
    background-image:
        radial-gradient(2px 2px at 15% 90%, rgba(255,140,40,.85), transparent),
        radial-gradient(1.5px 1.5px at 40% 95%, rgba(255,117,24,.7), transparent),
        radial-gradient(2px 2px at 65% 92%, rgba(255,160,60,.8), transparent),
        radial-gradient(1.5px 1.5px at 85% 96%, rgba(255,117,24,.7), transparent);
    background-size: 360px 360px;
    animation: tmplEmberRise 11s linear infinite;
}
@keyframes tmplFogDrift { from { transform: translateX(-3%); opacity: .8; } to { transform: translateX(3%); opacity: 1; } }
@keyframes tmplEmberRise { from { background-position: 0 0; } to { background-position: 0 -360px; } }

/* Hero text on the haunted night — light + shadow for readability */
.tmpl-spooky .slider-content h2 { color: #f3eafb !important; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.tmpl-spooky .slider-content p  { color: rgba(238,228,248,.88) !important; text-shadow: 0 1px 8px rgba(0,0,0,.55); }

/* The floating shape becomes a flickering, sickly haunted moon — dimmed so it
   never washes out the heading it drifts behind */
.tmpl-spooky .slider-shape .slider-bg-round {
    background: radial-gradient(circle at 40% 38%, rgba(245,236,210,.5) 0%, rgba(217,196,137,.26) 42%, rgba(155,77,255,.16) 76%, rgba(155,77,255,0) 100%) !important;
    box-shadow: 0 0 80px 18px rgba(155,77,255,.16);
    opacity: .62;
    animation: tmplMoonFlicker 5s ease-in-out infinite alternate;
}
@keyframes tmplMoonFlicker { 0% { opacity: .82; } 100% { opacity: .96; } }

/* Inner-page title hero matches the template */
.tmpl-spooky .page-height {
    background-color: #120a1e !important;
    background-image: linear-gradient(160deg, #140a1e 0%, #1b0f2b 50%, #0b0712 100%) !important;
}

/* Respect reduced-motion: keep the look, drop the motion */
@media (prefers-reduced-motion: reduce) {
    .tmpl-spooky .single-slider::before,
    .tmpl-spooky .single-slider::after,
    .tmpl-spooky .slider-bg-round,
    .tmpl-spooky .slider-shape { animation: none !important; }
}