/* BeautyLIV Halloween - Stage 1: fonts and toggle only */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Henny+Penny&display=swap');

:root {
    --bliv-halloween-bg: #201526;
    --bliv-halloween-orange: #ff9f3f;
    --bliv-halloween-text: #fff3e6;
}

/* Reusable font utilities (always available). */
.bliv-font-creepster {
    font-family: 'Creepster', cursive !important;
}

.bliv-font-henny {
    font-family: 'Henny Penny', cursive !important;
}

/* Mode-gated font utilities (only active when switched on). */
html[data-halloween="on"] .bliv-halloween-font-creepster {
    font-family: 'Creepster', cursive !important;
}

html[data-halloween="on"] .bliv-halloween-font-henny {
    font-family: 'Henny Penny', cursive !important;
}

/* Mode state: keep overrides narrowly scoped for Stage 1. */
html[data-halloween="on"] body {
    --bliv-halloween-mode-color: var(--bliv-halloween-orange);
}

/* Floating mode switch; ID selector protects it from theme button styles. */
#bliv-halloween-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483000;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 85px !important;
    min-width: 85px !important;
    min-height: 46px;
    margin: 0;
    padding: 10px 15px;
    border: 1px solid #f8a44c;
    border-radius: 999px;
    background: #211627;
    color: #fff3e6;
    box-shadow: 0 5px 22px rgba(0, 0, 0, .27);
    font: 600 13px/1.2 system-ui, sans-serif;
    letter-spacing: .2px;
    cursor: pointer;
    opacity: .96;
    transition: background-color .2s ease, box-shadow .2s ease;
}

    #bliv-halloween-toggle:hover,
    #bliv-halloween-toggle:focus-visible {
        background: #38203e;
        color: #fff;
    }

    #bliv-halloween-toggle:focus-visible {
        outline: 3px solid #f8a44c;
        outline-offset: 3px;
    }

    #bliv-halloween-toggle .bliv-halloween-icon {
        font-size: 19px;
        line-height: 1;
    }

    #bliv-halloween-toggle .bliv-halloween-state {
        font-weight: 800;
        color: #ffc184;
    }

html[data-halloween="on"] #bliv-halloween-toggle {
    background: #68351e;
    border-color: #ffc184;
    box-shadow: 0 5px 22px rgba(255, 130, 30, .20);
}

    html[data-halloween="on"] #bliv-halloween-toggle .bliv-halloween-state {
        color: #fff;
    }

@media (max-width: 575px) {
    #bliv-halloween-toggle {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        min-width: 85px !important;
        width:85px !important;
        min-height: 42px;
        padding: 8px 11px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bliv-halloween-toggle {
        transition: none;
    }
}

/* ============================================================
   STAGE 2 - DARK BACKGROUND ONLY
   This stage deliberately does NOT add rain, fog or parallax.
   Only the homepage gets the dark background. Existing content
   panels retain a light base to preserve readability.
   ============================================================ */

/* Homepage is detected by JS from the existing #home_slider. */
html[data-halloween="on"] body.bliv-halloween-home {
    background-color: #130f1d !important;
    background-image: radial-gradient(ellipse at 76% 9%, rgba(118, 73, 130, .24), transparent 42%), radial-gradient(ellipse at 16% 55%, rgba(90, 58, 115, .22), transparent 50%), linear-gradient(180deg, #20182e 0%, #100e19 60%, #171020 100%) !important;
    background-attachment: scroll;
}

    html[data-halloween="on"] body.bliv-halloween-home #wrapper {
        background: transparent !important;
    }

    /* Deliberately avoid altering Swiper, product cards, header,
   footer, modal, shopping cart, and checkout elements. */
    html[data-halloween="on"] body.bliv-halloween-home #home_slider {
        /* Visual regression sentinel: slider styles stay intact. */
    }

    /* ============================================================
   STAGE 4.1 - HOMEPAGE CONTRAST / TRANSPARENT OUTER SECTIONS
   Keep product tiles, menus, modals, offcanvas and header intact.
   ============================================================ */

    /* Only homepage top-level content sections. No nested product tiles. */
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > section:not(.tf-slideshow),
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-5,
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-2,
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-6 {
        background-color: transparent !important;
        background-image: none !important;
    }

        /* Category and editorial headings: white on dark backgrounds. */
        html[data-halloween="on"] body.bliv-halloween-home #wrapper > section:not(.tf-slideshow) .flat-title > .title,
        html[data-halloween="on"] body.bliv-halloween-home #wrapper > section:not(.tf-slideshow) .flat-title > .title a,
        html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-5 .flat-title .title,
        html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-5 .flat-title .title > a,
        html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-2 .flat-title .title {
            color: #f9eefb !important;
        }

    /* Circle category captions (NOT all product card links). */
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > section.flat-spacing-6 .wg-cls .cls-content a,
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > section.flat-spacing-6 .wg-cls .cls-content .text,
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > section.flat-spacing-6 .wg-cls .cls-content .title {
        color: #f9eefb !important;
    }

    /* Homepage section title links, including New Arrivals subline. */
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-5 .flat-title .title .text-muted,
    html[data-halloween="on"] body.bliv-halloween-home #wrapper > div.flat-spacing-5 .flat-title .title .link {
        color: #dbbadf !important;
    }

/* Explicitly opted-in extra section. No blanket white-panel override. */
html[data-halloween="on"] .bliv-halloween-light-panel {
    background-color: rgba(255, 255, 255, .94) !important;
    color: #1f1b27;
}

/* ============================================================
   STAGE 3 - INTERACTIVE-FREE RAIN OVERLAY
   On ONLY + homepage ONLY; never steals clicks.
   ============================================================ */
#bliv-halloween-rain {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    pointer-events: none !important;
    user-select: none;
    background: transparent;
    opacity: .70;
}

html[data-halloween="on"] body.bliv-halloween-page #bliv-halloween-rain {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    #bliv-halloween-rain {
        display: none !important;
    }
}

/* ============================================================
   STAGE 4 - SLOW MOVING FOG (CSS ONLY MOTION)
   Fixed and click-through. No changes to Swiper or page layout.
   ============================================================ */
#bliv-halloween-fog {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99999; /* Between content and stage-3 rain (100000) */
    pointer-events: none !important;
    user-select: none;
    opacity: .65; /* MASTER FOG INTENSITY: 0 to 1 */
    isolation: isolate;
}

html[data-halloween="on"] body.bliv-halloween-page #bliv-halloween-fog {
    display: block;
}

#bliv-halloween-fog::before,
#bliv-halloween-fog::after {
    content: "";
    position: absolute;
    left: -35%;
    width: 170%;
    height: 58%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 40% 60%, rgba(191, 176, 210, .42), transparent 62%), radial-gradient(ellipse at 76% 40%, rgba(142, 128, 169, .35), transparent 62%);
    filter: blur(45px);
    will-change: transform;
}

#bliv-halloween-fog::before {
    bottom: -14%;
    animation: bliv-fog-drift-a 32s ease-in-out infinite alternate;
}

#bliv-halloween-fog::after {
    bottom: 10%;
    opacity: .85;
    animation: bliv-fog-drift-b 47s ease-in-out infinite alternate;
}

@keyframes bliv-fog-drift-a {
    from {
        transform: translate3d(-5%, 0, 0);
    }

    to {
        transform: translate3d(7%, -8%, 0);
    }
}

@keyframes bliv-fog-drift-b {
    from {
        transform: translate3d(6%, 0, 0);
    }

    to {
        transform: translate3d(-7%, 6%, 0);
    }
}

@media (max-width: 767px) {
    #bliv-halloween-fog {
        opacity: .57;
    }

        #bliv-halloween-fog::before,
        #bliv-halloween-fog::after {
            filter: blur(25px);
        }
}

@media (prefers-reduced-motion: reduce) {
    #bliv-halloween-fog {
        display: none !important;
    }
}


/* ============================================================
   STAGE 5 - Lightning / brief sky illumination
   Separate layer UNDER fog and rain; non-interactive.
   The layer does not change content, product cards or header.
   ============================================================ */
#bliv-halloween-lightning {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 99998; /* fog=99999; rain=100000 */
    pointer-events: none !important;
    user-select: none;
    opacity: 0;
    background: radial-gradient(ellipse at 58% 12%, rgba(202, 214, 255, .49) 0%, rgba(163, 175, 223, .25) 32%, rgba(129, 116, 165, .07) 68%, transparent 100%);
}

html[data-halloween="on"] body.bliv-halloween-page #bliv-halloween-lightning {
    display: block;
}

html[data-halloween="on"] body.bliv-halloween-home
#bliv-halloween-lightning.bliv-lightning-flash {
    animation: bliv-lightning-pulse 850ms linear 1 both;
}
/* Two restrained flashes and a rapid fade. */
@keyframes bliv-lightning-pulse {
    0%, 6% {
        opacity: 0;
    }

    9% {
        opacity: .40;
    }

    16% {
        opacity: .04;
    }

    23% {
        opacity: .64;
    }

    29% {
        opacity: .21;
    }

    38% {
        opacity: .31;
    }

    54%,100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #bliv-halloween-lightning {
        display: none !important;
        animation: none !important;
    }
}


/* ============================================================
   STAGE 6 - BACKGROUND HAUNTED LANDSCAPE / SUBTLE PARALLAX
   The scene is BEHIND #wrapper, not an interactive foreground.
   No global text, product card or Swiper overrides.
   ============================================================ */
#bliv-halloween-scene {
    display: none;
    position: fixed;
    inset: -60px 0 -60px;
    z-index: 0;
    pointer-events: none !important;
    overflow: hidden;
    opacity: .48; /* SCENE INTENSITY: 0-1 */
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

    #bliv-halloween-scene::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/images/halloween/bliv-haunted-landscape.svg');
        background-position: center bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }
/* Only promote the wrapper while halloween is on. */
html[data-halloween="on"] body.bliv-halloween-home #wrapper {
    position: relative;
    z-index: 1;
}

html[data-halloween="on"] body.bliv-halloween-home #bliv-halloween-scene {
    display: block;
}

@media (max-width: 767px) {
    #bliv-halloween-scene {
        opacity: .27;
    }

        #bliv-halloween-scene::before {
            background-position: 61% bottom;
        }
}

@media (prefers-reduced-motion: reduce) {
    #bliv-halloween-scene {
        transform: none !important;
        will-change: auto;
    }
}

/* ===========================================================
   STAGE 7 — LUXURY GOTHIC / ACCESSIBILITY / DECOR
   Mode-gated, homepage-only skin. Checkout + offcanvas untouched.
   =========================================================== */
html[data-halloween="on"] body.bliv-halloween-home {
    background: radial-gradient(ellipse at 73% 12%,rgba(95,61,115,.18),transparent 33%), radial-gradient(ellipse at 15% 65%,rgba(74,47,99,.13),transparent 34%), linear-gradient(180deg,#0e0b18 0%,#181124 45%,#0b0912 100%) !important;
    color: #eee5f1;
}
/* Deprecated graveyard scene is intentionally disabled. */
html[data-halloween="on"] #bliv-halloween-scene {
    display: none !important;
}

/* HEADER: exact IDs from user's layout. No icon SVG fill overrides. */
html[data-halloween="on"] #header.header-default {
    background: rgba(16,12,25,.97) !important;
    border-bottom: 1px solid rgba(255,174,97,.2) !important;
    color: #f6eefa !important;
}

html[data-halloween="on"] #header .tf-topbar {
    background: #08060e !important;
    color: #f4e8e0 !important;
}

    html[data-halloween="on"] #header .tf-topbar a {
        color: #f2d8ba !important;
    }

html[data-halloween="on"] #header .box-nav-menu > .menu-item > .item-link,
html[data-halloween="on"] #header .nav-icon-item,
html[data-halloween="on"] #header .nav-icon-item > .icon,
html[data-halloween="on"] #header .mobile-menu,
html[data-halloween="on"] #header .mobile-menu > .icon {
    color: #f9eef2 !important;
}

html[data-halloween="on"] #header .box-nav-menu > .menu-item > .item-link {
    position: relative;
    transition: color .2s ease,text-shadow .2s ease;
}

    html[data-halloween="on"] #header .box-nav-menu > .menu-item > .item-link:hover,
    html[data-halloween="on"] #header .box-nav-menu > .menu-item:hover > .item-link,
    html[data-halloween="on"] #header .nav-icon-item:hover,
    html[data-halloween="on"] #header .nav-icon-item:hover .icon {
        color: #ffba71 !important;
        text-shadow: 0 0 12px rgba(255,143,54,.22);
    }
/* Logo plate removed. JS swaps the logo file to beautyliv-logo-w.png in Halloween mode. */
html[data-halloween="on"] #header .logo-header {
    display: inline-flex;
    align-items: center;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

    html[data-halloween="on"] #header .logo-header img {
        background: transparent !important;
    }
/* Dropdowns stay light for dark typography and existing mega-menu images. */
html[data-halloween="on"] #header .sub-menu,
html[data-halloween="on"] #header .mega-menu {
    background: #faf7f7 !important;
    color: #27202f !important;
}

    html[data-halloween="on"] #header .sub-menu a,
    html[data-halloween="on"] #header .mega-menu a {
        color: #28202f !important;
    }

        html[data-halloween="on"] #header .sub-menu a:hover,
        html[data-halloween="on"] #header .mega-menu a:hover {
            color: #a75217 !important;
        }
/* Decorative underline only for top-level nav */
html[data-halloween="on"] #header .box-nav-menu > .menu-item > .item-link::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -6px;
    height: 2px;
    background: linear-gradient(90deg,transparent,#ffb56a,transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .23s ease;
    pointer-events: none;
}

html[data-halloween="on"] #header .box-nav-menu > .menu-item:hover > .item-link::after,
html[data-halloween="on"] #header .box-nav-menu > .menu-item > .item-link:focus-visible::after {
    transform: scaleX(1);
}

/* Footer: target nested white surfaces and typography, not every descendant globally */
html[data-halloween="on"] #footer,
html[data-halloween="on"] #footer .footer-top,
html[data-halloween="on"] #footer .footer-body,
html[data-halloween="on"] #footer .footer-bottom,
html[data-halloween="on"] #footer .footer-bottom-wrap,
html[data-halloween="on"] #footer .footer-top-wrap,
html[data-halloween="on"] #footer .row-footer,
html[data-halloween="on"] #footer .footer-col-block,
html[data-halloween="on"] #footer .footer-inner-wrap {
    background: #0d0a16 !important;
    color: #e3d8e7 !important;
    border-color: rgba(255,255,255,.12) !important;
}

    html[data-halloween="on"] #footer .footer-heading,
    html[data-halloween="on"] #footer h2,
    html[data-halloween="on"] #footer h3,
    html[data-halloween="on"] #footer h4 {
        color: #fff2df !important;
    }

    html[data-halloween="on"] #footer .footer-info,
    html[data-halloween="on"] #footer .footer-info li,
    html[data-halloween="on"] #footer .footer-newsletter p,
    html[data-halloween="on"] #footer .footer-menu-list a,
    html[data-halloween="on"] #footer .footer-contact a,
    html[data-halloween="on"] #footer .footer-contact span,
    html[data-halloween="on"] #footer .footer-bottom a,
    html[data-halloween="on"] #footer .footer-bottom p {
        color: #ddd1df !important;
    }

    html[data-halloween="on"] #footer a:hover {
        color: #ffc280 !important;
    }

    html[data-halloween="on"] #footer .tf-social-icon .social-item {
        color: #f6e8eb !important;
        background: rgba(255,255,255,.055) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
    }

        html[data-halloween="on"] #footer .tf-social-icon .social-item .icon {
            color: inherit !important;
        }

    html[data-halloween="on"] #footer input[type="email"],
    html[data-halloween="on"] #footer input[type="text"],
    html[data-halloween="on"] #footer textarea {
        background: #1f192b !important;
        color: #fff1e3 !important;
        border-color: #594962 !important;
    }

    html[data-halloween="on"] #footer input::placeholder {
        color: #c2b5cb !important;
    }

    html[data-halloween="on"] #footer .footer-newsletter button {
        border-color: #f2a75d;
    }
/* Do not force third-party Trustpilot iframe contents; their theme is provider-controlled. */

/* Testimonial cards: precise component from Index view. */
html[data-halloween="on"] body.bliv-halloween-home .wg-testimonial {
    background: rgba(41,31,57,.88) !important;
    border: 1px solid rgba(228,199,239,.32) !important;
    border-radius: 14px;
}

    html[data-halloween="on"] body.bliv-halloween-home .wg-testimonial .name-author,
    html[data-halloween="on"] body.bliv-halloween-home .wg-testimonial .text-review,
    html[data-halloween="on"] body.bliv-halloween-home .wg-testimonial .text-review strong,
    html[data-halloween="on"] body.bliv-halloween-home .wg-testimonial .text-main {
        color: #f6eef5 !important;
    }

    html[data-halloween="on"] body.bliv-halloween-home .wg-testimonial .box-verified a {
        color: #ffc992 !important;
    }
/* Homepage service benefits: actual tf-icon-box.style-2 markup. */
html[data-halloween="on"] body.bliv-halloween-home .tf-icon-box.style-2 .title h4 {
    color: #fff1e7 !important;
}

html[data-halloween="on"] body.bliv-halloween-home .tf-icon-box.style-2 .desc {
    color: #d7cbdc !important;
}

html[data-halloween="on"] body.bliv-halloween-home .tf-icon-box.style-2 .box-icon,
html[data-halloween="on"] body.bliv-halloween-home .tf-icon-box.style-2 .box-icon .icon {
    color: #ffbd83 !important;
    border-color: rgba(255,190,131,.45) !important;
}

html[data-halloween="on"] body.bliv-halloween-home > #wrapper > h1,
html[data-halloween="on"] body.bliv-halloween-home #wrapper > h1 {
    color: #eedeea !important;
}
/* Keep product card imagery and prices on original light cards. */


/* DECOR: animated bats only. Webs removed by request. */
#bliv-halloween-decor {
    position: fixed;
    inset: 0;
    z-index: 99997;
    pointer-events: none !important;
    display: none;
    overflow: hidden;
}

html[data-halloween="on"] body.bliv-halloween-page #bliv-halloween-decor {
    display: block;
}

#bliv-halloween-decor .bliv-bat {
    position: absolute;
    top: var(--bat-top, 20%);
    left: -120px;
    width: var(--bat-size, 46px);
    height: auto;
    opacity: var(--bat-opacity, .58);
    will-change: transform;
    animation: bliv-bat-flight var(--bat-duration, 18s) linear infinite;
    animation-delay: var(--bat-delay, 0s);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}

    #bliv-halloween-decor .bliv-bat svg {
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;
    }
/* Wing pivot points are fixed in SVG coordinates: the body does not shift. */
#bliv-halloween-decor .bliv-bat__wing--left,
#bliv-halloween-decor .bliv-bat__wing--right {
    transform-box: view-box;
    will-change: transform;
    animation-duration: var(--wing-beat, .34s);
    animation-timing-function: cubic-bezier(.42,0,.58,1);
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-delay: var(--wing-delay, 0s);
}

#bliv-halloween-decor .bliv-bat__wing--left {
    transform-origin: 57px 23px;
    animation-name: bliv-bat-wing-left;
}

#bliv-halloween-decor .bliv-bat__wing--right {
    transform-origin: 63px 23px;
    animation-name: bliv-bat-wing-right;
}

#bliv-halloween-decor .bliv-bat__body-core {
    transform-box: view-box;
    transform-origin: 60px 26px;
    animation: bliv-bat-body-bob calc(var(--wing-beat, .34s) * 2) ease-in-out infinite alternate;
}

#bliv-halloween-decor .bliv-bat--far {
    opacity: .34;
    filter: blur(.15px) drop-shadow(0 1px 1px rgba(0,0,0,.12));
}

#bliv-halloween-decor .bliv-bat--near {
    opacity: .70;
}

@keyframes bliv-bat-flight {
    0% {
        transform: translate3d(-16vw, 10px, 0) scale(.90) rotate(-6deg);
    }

    16% {
        transform: translate3d(8vw, -14px, 0) scale(1.00) rotate(2deg);
    }

    34% {
        transform: translate3d(34vw, 12px, 0) scale(1.05) rotate(-3deg);
    }

    54% {
        transform: translate3d(60vw, -18px, 0) scale(.97) rotate(4deg);
    }

    76% {
        transform: translate3d(88vw, 8px, 0) scale(1.08) rotate(-2deg);
    }

    100% {
        transform: translate3d(126vw, -10px, 0) scale(1.02) rotate(5deg);
    }
}
/* A faster downstroke and slower recovery, with a brief near-flat glide. */
@keyframes bliv-bat-wing-left {
    0% {
        transform: rotate(-26deg) scaleY(.82);
    }

    15% {
        transform: rotate(-21deg) scaleY(.88);
    }

    39% {
        transform: rotate(24deg) scaleY(1.03);
    }

    54% {
        transform: rotate(28deg) scaleY(1.05);
    }

    73% {
        transform: rotate(3deg) scaleY(.95);
    }

    100% {
        transform: rotate(-26deg) scaleY(.82);
    }
}

@keyframes bliv-bat-wing-right {
    0% {
        transform: rotate(26deg) scaleY(.82);
    }

    15% {
        transform: rotate(21deg) scaleY(.88);
    }

    39% {
        transform: rotate(-24deg) scaleY(1.03);
    }

    54% {
        transform: rotate(-28deg) scaleY(1.05);
    }

    73% {
        transform: rotate(-3deg) scaleY(.95);
    }

    100% {
        transform: rotate(26deg) scaleY(.82);
    }
}

@keyframes bliv-bat-body-bob {
    from {
        transform: translateY(-.5px);
    }

    to {
        transform: translateY(1px);
    }
}

@media (max-width: 767px) {
    #bliv-halloween-decor .bliv-bat:nth-of-type(n+4) {
        display: none;
    }

    #bliv-halloween-decor .bliv-bat {
        width: calc(var(--bat-size, 46px) * .82);
    }
}

@media (prefers-reduced-motion: reduce) {
    #bliv-halloween-decor .bliv-bat {
        display: none !important;
    }
}


/* ===========================================================
   STAGE 8 — controlled pumpkins, glow and typography
   All additions are gated by Halloween ON + homepage.
   =========================================================== */
/* Keep primary product descriptions and prices in the site's native font.
   Use Henny Penny for actual headings + top-level navigation. */
html[data-halloween="on"] body.bliv-halloween-home #wrapper h1,
html[data-halloween="on"] body.bliv-halloween-home #wrapper h2,
html[data-halloween="on"] body.bliv-halloween-home #wrapper h3,
html[data-halloween="on"] body.bliv-halloween-home #wrapper h4,
html[data-halloween="on"] body.bliv-halloween-home #wrapper h5,
html[data-halloween="on"] body.bliv-halloween-home #wrapper h6,
html[data-halloween="on"] #header .box-nav-menu > .menu-item > .item-link,
html[data-halloween="on"] #header .sub-menu .menu-heading,
html[data-halloween="on"] #header .sub-menu .menu-list a,
html[data-halloween="on"] #footer .footer-heading {
    font-family: 'Henny Penny', cursive !important;
}
/* The Halloween CTA accent uses Creepster, without changing font on prices,
   cart quantity controls, form buttons, or critical checkout UI. */
html[data-halloween="on"] body.bliv-halloween-home .tf-btn.btn-fill,
html[data-halloween="on"] body.bliv-halloween-home .btn-add-to-cart,
html[data-halloween="on"] body.bliv-halloween-home a[href*="cart"].tf-btn,
html[data-halloween="on"] body.bliv-halloween-home .bliv-halloween-creepster {
    font-family: 'Creepster', cursive !important;
    letter-spacing: .035em;
}
/* Explicit class for other intended text and CTA labels */
html[data-halloween="on"] .bliv-halloween-cta-font {
    font-family: 'Creepster', cursive !important;
}
/* Dark mode toggle is an icon + ON/OFF only; anchored above #goTop via JS */
#bliv-halloween-toggle {
    min-width: 0 !important;
    width: 66px;
    height: 43px;
    min-height: 43px;
    padding: 5px 7px !important;
    right: var(--bliv-toggle-right,40px) !important;
    bottom: var(--bliv-toggle-bottom,142px) !important;
    gap: 3px !important;
    border-radius: 14px;
    z-index: 2147483000;
}

    #bliv-halloween-toggle .bliv-toggle-title {
        display: none !important;
    }

    #bliv-halloween-toggle .bliv-halloween-icon {
        width: 31px;
        height: 31px;
        display: inline-flex;
        flex: none;
    }

        #bliv-halloween-toggle .bliv-halloween-icon svg {
            width: 100%;
            height: 100%;
            display: block;
        }

    #bliv-halloween-toggle .bliv-halloween-state {
        font-size: 11px;
        line-height: 1;
    }

    #bliv-halloween-toggle .bliv-toggle-eye {
        fill: #20131a;
        transition: fill .16s ease,filter .16s ease;
    }

html[data-halloween="on"] #bliv-halloween-toggle .bliv-toggle-eye {
    fill: #ffbd40;
    filter: drop-shadow(0 0 4px #ff6300);
    animation: bliv-toggle-embers 3.3s ease-in-out infinite alternate;
}

@keyframes bliv-toggle-embers {
    0%,66% {
        opacity: .75
    }

    75%,100% {
        opacity: 1;
        filter: drop-shadow(0 0 7px #ff6e00)
    }
}

/* Anchored decorations avoid blocking cards/links; within non-image regions. */
.bliv-halloween-pumpkin {
    display: none;
    position: absolute;
    z-index: 4;
    width: var(--pumpkin-width,78px);
    height: auto;
    pointer-events: none !important;
    opacity: var(--pumpkin-opacity,.85);
    transform: translateY(0);
    filter: drop-shadow(0 4px 7px rgba(0,0,0,.22));
}

html[data-halloween="on"] body.bliv-halloween-home .bliv-halloween-pumpkin {
    display: block;
}

.bliv-halloween-pumpkin svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.bliv-halloween-pumpkin--left {
    left: 8px;
    bottom: 3px;
}

.bliv-halloween-pumpkin--right {
    right: 8px;
    bottom: 3px;
}

.bliv-halloween-pumpkin .bliv-pumpkin-eye,
.bliv-halloween-pumpkin .bliv-pumpkin-mouth {
    fill: #26131a;
    transition: fill .12s linear,filter .12s linear;
}

html[data-halloween="on"] .bliv-halloween-pumpkin.bliv-pumpkin-lit .bliv-pumpkin-eye,
html[data-halloween="on"] .bliv-halloween-pumpkin.bliv-pumpkin-lit .bliv-pumpkin-mouth {
    fill: #ffbd4a;
    filter: drop-shadow(0 0 7px #ff6b00);
}

html[data-halloween="on"] body.bliv-halloween-home.bliv-pumpkin-storm .bliv-halloween-pumpkin .bliv-pumpkin-eye,
html[data-halloween="on"] body.bliv-halloween-home.bliv-pumpkin-storm .bliv-halloween-pumpkin .bliv-pumpkin-mouth {
    fill: #ffe1a2;
    filter: drop-shadow(0 0 10px #ff8200);
}

.bliv-halloween-pumpkin .bliv-pumpkin-aura {
    opacity: 0;
    fill: #ff9b30;
    filter: blur(13px);
    transition: opacity .2s ease;
}

.bliv-halloween-pumpkin.bliv-pumpkin-lit .bliv-pumpkin-aura {
    opacity: .28;
}

body.bliv-pumpkin-storm .bliv-halloween-pumpkin .bliv-pumpkin-aura {
    opacity: .5;
}
/* candle halo next to only the two selected pumpkins */
.bliv-halloween-pumpkin--lantern::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 50px;
    left: 45%;
    bottom: 2%;
    background: radial-gradient(ellipse,rgba(255,158,54,.21),rgba(255,129,25,.045) 40%,transparent 74%);
    opacity: .52;
    pointer-events: none;
    animation: bliv-candle-glow 4.4s ease-in-out infinite alternate;
}

@keyframes bliv-candle-glow {
    0%,100% {
        opacity: .28;
        transform: scale(.92)
    }

    42% {
        opacity: .65;
        transform: scale(1.06)
    }

    76% {
        opacity: .46;
        transform: scale(.98)
    }
}
/* Tiny footer transition line, deliberately not a wide intrusive image */
html[data-halloween="on"] #footer {
    border-top: 1px solid rgba(255,153,64,.30) !important;
    box-shadow: 0 -16px 30px -24px rgba(245,124,37,.55);
}
/* Existing background gradients get very slow parallax-like movement only */
html[data-halloween="on"] body.bliv-halloween-home {
    background-position: center,center,center;
    background-size: 110% 110%,105% 105%,100% 100%;
    animation: bliv-bg-glow-shift 34s ease-in-out infinite alternate;
}

@keyframes bliv-bg-glow-shift {
    from {
        background-position: 48% 0%,52% 10%,center;
    }

    to {
        background-position: 53% 5%,47% 5%,center;
    }
}

@media(max-width:767px) {
    .bliv-halloween-pumpkin {
        width: calc(var(--pumpkin-width,78px) * .70);
        opacity: .7;
    }

    #bliv-halloween-toggle {
        width: 62px;
        height: 42px;
        min-height: 42px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html[data-halloween="on"] body.bliv-halloween-home {
        animation: none !important;
    }

    .bliv-halloween-pumpkin--lantern::after,
    html[data-halloween="on"] #bliv-halloween-toggle .bliv-toggle-eye {
        animation: none !important;
    }

    .bliv-halloween-pumpkin .bliv-pumpkin-eye,
    .bliv-halloween-pumpkin .bliv-pumpkin-mouth {
        transition: none !important;
    }
}

/* Offcanvas is appended outside #wrapper, so select it directly. */
html[data-halloween="on"] #mobileMenu.canvas-mb,
html[data-halloween="on"] #mobileMenu .mb-canvas-content,
html[data-halloween="on"] #mobileMenu .mb-body,
html[data-halloween="on"] #mobileMenu .mb-content-top,
html[data-halloween="on"] #mobileMenu .mb-other-content {
    background: #15101f !important;
    color: #eee4f0 !important;
    border-color: rgba(255,255,255,.15) !important;
}

html[data-halloween="on"] #mobileMenu .nav-ul-mb .nav-mb-item {
    border-color: rgba(255,255,255,.15) !important;
}

html[data-halloween="on"] #mobileMenu .nav-ul-mb .mb-menu-link,
html[data-halloween="on"] #mobileMenu .nav-ul-mb .sub-nav-link {
    font-family: 'Henny Penny', cursive !important;
    color: #f6e8ef !important;
    text-decoration: none !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding-block: 9px !important;
}

    html[data-halloween="on"] #mobileMenu .nav-ul-mb .mb-menu-link:hover,
    html[data-halloween="on"] #mobileMenu .nav-ul-mb .sub-nav-link:hover,
    html[data-halloween="on"] #mobileMenu .nav-ul-mb .nav-mb-item.active > .mb-menu-link {
        color: #ffc078 !important;
    }

html[data-halloween="on"] #mobileMenu .btn-open-sub::before,
html[data-halloween="on"] #mobileMenu .btn-open-sub::after {
    background-color: #ffbd79 !important;
}

html[data-halloween="on"] #mobileMenu .icon-close-popup,
html[data-halloween="on"] #mobileMenu .mb-other-content p,
html[data-halloween="on"] #mobileMenu .mb-other-content a,
html[data-halloween="on"] #mobileMenu .mb-other-content li {
    color: #e8d9e9 !important;
}

html[data-halloween="on"] #mobileMenu .site-nav-icon {
    color: #f4e4f2 !important;
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* STAGE 8.3: global atmosphere, keep inner page content readable */
html[data-halloween="on"] body.bliv-halloween-page:not(.bliv-halloween-home) {
    background: radial-gradient(ellipse at 70% 15%, rgba(95,61,115,.18),transparent 33%),linear-gradient(180deg,#0e0b18 0%,#181124 50%,#0b0912 100%) !important;
    color: #ede4ef;
}

    html[data-halloween="on"] body.bliv-halloween-page:not(.bliv-halloween-home) #wrapper {
        background: transparent !important;
    }
    /* Preserve original page panels, forms, product information and checkout contrast. */
    html[data-halloween="on"] body.bliv-halloween-page:not(.bliv-halloween-home) main,
    html[data-halloween="on"] body.bliv-halloween-page:not(.bliv-halloween-home) .tf-page-cart,
    html[data-halloween="on"] body.bliv-halloween-page:not(.bliv-halloween-home) .tf-checkout {
        color: var(--dark) !important;
    }
/* Restore the simple, reliable, text-labelled toggle. No JS position measuring. */
#bliv-halloween-toggle {
    position: fixed !important;
    left: auto !important;
    right: 16px !important;
    bottom: 82px !important;
    top: auto !important;
    width: 85px !important;
    min-width: 85px !important;
    max-width: calc(100vw - 32px) !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    z-index: 2147482100 !important;
    overflow: hidden !important;
}

    #bliv-halloween-toggle .bliv-toggle-title,
    #bliv-halloween-toggle > :not(.bliv-halloween-icon):not(.bliv-halloween-state) {
        display: inline !important;
        white-space: nowrap !important;
        font: 600 12px/1.15 system-ui,sans-serif !important;
    }

    #bliv-halloween-toggle .bliv-halloween-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        flex: 0 0 30px !important;
    }

    #bliv-halloween-toggle .bliv-halloween-state {
        display: inline !important;
        flex: 0 0 auto !important;
        width: auto !important;
        font: 800 12px/1 system-ui,sans-serif !important;
        white-space: nowrap !important;
    }
/* Never move .tf-toolbar-bottom in the DOM. Let the theme own its layout and display state. */
@media (max-width:1199px) {
    .tf-toolbar-bottom {
        z-index: 2147482000 !important;
    }

    html[data-halloween="on"] .tf-toolbar-bottom {
        background: #15101f !important;
        border-top-color: rgba(255,185,111,.35) !important;
    }

        html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item a,
        html[data-halloween="on"] .tf-toolbar-bottom .toolbar-label,
        html[data-halloween="on"] .tf-toolbar-bottom .toolbar-icon {
            color: #fff1e7 !important;
        }

    #bliv-halloween-toggle {
        right: 12px !important;
        bottom: calc(92px + env(safe-area-inset-bottom,0px)) !important;
        min-width: 85px !important;
        max-width: calc(100vw - 24px) !important;
    }
}

@media (min-width:1200px) {
    #bliv-halloween-toggle {
        right: 20px !important;
        bottom: 82px !important;
    }
}

html[data-halloween="on"] body.bliv-halloween-page h1,
html[data-halloween="on"] body.bliv-halloween-page h2,
html[data-halloween="on"] body.bliv-halloween-page h3,
html[data-halloween="on"] body.bliv-halloween-page h4,
html[data-halloween="on"] body.bliv-halloween-page h5,
html[data-halloween="on"] body.bliv-halloween-page h6 {
    font-family: 'Henny Penny',cursive !important;
}

/* ==============================================================
   STAGE 8.4 — DARK-SURFACE CONTRAST FIX (ALL PAGES)
   Keep white product cards, dropdowns, forms and modal surfaces readable.
   ============================================================= */
html[data-halloween="on"] body.bliv-halloween-page {
    --bliv-hw-text-bright: #fff0e4;
    --bliv-hw-text-muted: #d8cfdf;
    --bliv-hw-link: #ead9ee;
    --bliv-hw-accent: #ffc184;
}


    /* Breadcrumb lives on the dark page canvas. */
    html[data-halloween="on"] body.bliv-halloween-page .breadcrumb-list .breadcrumb-item,
    html[data-halloween="on"] body.bliv-halloween-page .breadcrumb-list .breadcrumb-item a {
        color: var(--bliv-hw-text-muted) !important;
    }

    html[data-halloween="on"] body.bliv-halloween-page .breadcrumb-list .current,
    html[data-halloween="on"] body.bliv-halloween-page .breadcrumb-list .current a {
        color: var(--bliv-hw-accent) !important;
    }

    html[data-halloween="on"] body.bliv-halloween-page .breadcrumb-list .breadcrumb-item::before,
    html[data-halloween="on"] body.bliv-halloween-page .breadcrumb-list .breadcrumb-item::after {
        color: var(--bliv-hw-text-muted) !important;
    }
    /* Section-level headings on a dark canvas, excluding contained white product panels. */
    html[data-halloween="on"] body.bliv-halloween-page #wrapper :is(section, .flat-spacing-2, .flat-spacing-5, .flat-spacing-6, .tf-breadcrumb) :is(h1,h2,h3,h4,h5,h6):not(.card-product *):not(.product-item *),
    html[data-halloween="on"] body.bliv-halloween-page #wrapper > :is(h1,h2,h3,h4,h5,h6),
    html[data-halloween="on"] body.bliv-halloween-page .size-btn {
        color: #fff0e4 !important;
    }
 /*   html[data-halloween="on"] body.bliv-halloween-page #wrapper .gc-section .container h2 {
        color: var(--bliv-hw-text-bright) !important;
    }*/
    /* Explicitly keep typography inside bright cards and white dropdown surfaces dark. */
    html[data-halloween="on"] body.bliv-halloween-page :is(.card-product, .product-item, .tf-product-info-wrap, .sub-menu, .mega-menu, .dropdown-menu, .modal-content, .offcanvas:not(#mobileMenu)) :is(h1,h2,h3,h4,h5,h6) {
        color: #201b28 !important;
    }
    /* Default dark-surface links only: avoid global a rule (it breaks cards/forms). */
    html[data-halloween="on"] body.bliv-halloween-page :is(.breadcrumb-list, .flat-title, .tf-breadcrumb) a {
        color: var(--bliv-hw-link) !important;
    }

        html[data-halloween="on"] body.bliv-halloween-page :is(.breadcrumb-list, .flat-title, .tf-breadcrumb) a:hover {
            color: var(--bliv-hw-accent) !important;
        }
/* Delivery icons in the product information panel. */
html[data-halloween="on"] .tf-product-info-wrap .product-delivery .icon {
    color: var(--bliv-hw-accent, #ffc184) !important;
}

    html[data-halloween="on"] .tf-product-info-wrap .product-delivery .icon svg {
        stroke: currentColor !important;
    }
html[data-halloween="on"] .card-product-info,
html[data-halloween="on"] .name-product,
html[data-halloween="on"] .gc-section .container h2 {
    color: var(--dark) !important
}
/* Toolbar icons: preserve fill="none" outlines and fill-based solid icons. */
html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item,
html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item a,
html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item svg,
html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item .icon {
    color: #f6edf7 !important;
}

    html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item svg :is(path,circle,rect,line,polyline,polygon,ellipse):not([fill]):not([stroke]),
    html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item svg :is(path,circle,rect,line,polyline,polygon,ellipse)[stroke]:not([stroke="none"]) {
        stroke: #f6edf7 !important;
    }

    html[data-halloween="on"] .tf-toolbar-bottom .toolbar-item svg :is(path,circle,rect,polygon,ellipse)[fill]:not([fill="none"]) {
        fill: #f6edf7 !important;
    }

/* Halloween ON - text-dark yerine text-white görünümü */
html[data-halloween="on"] .text-dark,
html[data-halloween="on"] .btn-out-line-dark-2,
html[data-halloween="on"] .text{
    color: #ffffff !important;
}

/* STAGE 8.5: fixed illustration backdrop for Halloween ON on every page. */
html[data-halloween="on"] body.bliv-halloween-page {
    position: relative;
    isolation: isolate;
    background: #0c0710 !important;
    background-image: none !important;
    animation: none !important;
}

    html[data-halloween="on"] body.bliv-halloween-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(20,8,0,.46) 30%, rgba(35,10,0,.36) 57%, rgba(0,0,0,.80) 100%), url('/images/halloween/halloween-bg-main.webp');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    html[data-halloween="on"] body.bliv-halloween-page::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at center, transparent 32%, rgba(0,0,0,.24) 100%);
    }

    html[data-halloween="on"] body.bliv-halloween-page #wrapper {
        position: relative;
        z-index: 1;
        background: transparent !important;
    }

@media (max-width:767px) {
    html[data-halloween="on"] body.bliv-halloween-page::before {
        background-position: 51% center;
    }
}
/* Halloween ON - Okunabilirlik düzeltmeleri */

/* desc-title ve Happy Customers */
html[data-halloween="on"] .desc-title,
html[data-halloween="on"] .flat-title h2.title,
html[data-halloween="on"] h2.title {
    color: #ffffff !important;
}

/* Trustpilot bağlantıları */
html[data-halloween="on"] .wg-testimonial .box-verified,
html[data-halloween="on"] .wg-testimonial .box-verified a,
html[data-halloween="on"] .wg-testimonial .box-verified i {
    color: #ffffff !important;
}

/* Marka bağlantıları */
html[data-halloween="on"] .brand-product > a {
    color: #ffffff !important;
}

/* Mini cart ürün bilgileri */
html[data-halloween="on"] .cart-info .name,
html[data-halloween="on"] .cart-info .name strong,
html[data-halloween="on"] .cart-info .variants,
html[data-halloween="on"] .cart-info .remove-cart {
    color: #ffffff !important;
}

/* Have an account? Log in */
html[data-halloween="on"] .title a[href="#login"][data-bs-toggle="offcanvas"] {
    color: #ffffff !important;
}

/* Hover renkleri */
html[data-halloween="on"] .wg-testimonial .box-verified a:hover,
html[data-halloween="on"] .brand-product > a:hover,
html[data-halloween="on"] .cart-info a:hover,
html[data-halloween="on"] .cart-info .remove-cart:hover,
html[data-halloween="on"] .title a[href="#login"]:hover {
    color: #ffb35c !important;
}

/* Halloween ON - Select / Option */
html[data-halloween="on"] select,
html[data-halloween="on"] select option,
html[data-halloween="on"] select optgroup {
    background-color: #ffffff !important;
    color: #18121e !important;
}

/* Share Product */
html[data-halloween="on"] .product-extra-icon.js-share-product,
html[data-halloween="on"] .product-extra-icon.js-share-product .icon {
    color: #fff0e4 !important;
}

/* Descriptions */
html[data-halloween="on"] #desc-title {
    color: #fff0e4 !important;
}

/* Product Name H1 */
html[data-halloween="on"] .tf-product-info-wrap h1,
html[data-halloween="on"] h1.text-xl.fw-bold {
    color: #fff0e4 !important;
}

/* No Sales Tax */
html[data-halloween="on"] .tf-product-info-wrap p.text-dark {
    color: #fff0e4 !important;
}

/* Brand Links */
html[data-halloween="on"] .brand-product > a {
    color: #fff0e4 !important;
}

/* Categories and Inspired by You */
html[data-halloween="on"] h2.title,
html[data-halloween="on"] h4.title {
    color: #fff0e4 !important;
}

/* Hover */
html[data-halloween="on"] .product-extra-icon.js-share-product:hover,
html[data-halloween="on"] .brand-product > a:hover {
    color: #ffb35c !important;
}
/* Halloween - Section headings */

html[data-halloween="on"] body.bliv-halloween-page #wrapper .flat-title h2.title,
html[data-halloween="on"] body.bliv-halloween-page #wrapper .flat-title h4.title,
html[data-halloween="on"] body.bliv-halloween-page #wrapper .flat-title .title {
    color: #fff0e4 !important;
}

/* Halloween ON - Quick View modal renk düzeltmeleri */

html[data-halloween="on"] #quickView .modal-content {
    background-color: #ffffff !important;
    color: #282828 !important;
}

html[data-halloween="on"] #quickView .brand-product > a,
html[data-halloween="on"] #quickView .product-name,
html[data-halloween="on"] #quickView .product-name a,
html[data-halloween="on"] #quickView .product-price,
html[data-halloween="on"] #quickView .product-stock .text-dark,
html[data-halloween="on"] #quickView .tf-product-info-wrap .text,
html[data-halloween="on"] #quickView .product-extra-icon,
html[data-halloween="on"] #quickView .view-details {
    color: #282828 !important;
}

    html[data-halloween="on"] #quickView .brand-product > a:hover,
    html[data-halloween="on"] #quickView .product-name a:hover,
    html[data-halloween="on"] #quickView .product-extra-icon:hover,
    html[data-halloween="on"] #quickView .view-details:hover {
        color: #e4763b !important;
    }










/* Halloween pumpkin - layout overflow fix */
html[data-halloween="on"] .checkout-address-suggestion
{
    color:#000000 !important;
}
html[data-halloween="on"] .bliv-halloween-pumpkin {
    position: absolute !important;
    display: block;
    width: var(--pumpkin-width, 78px);
    max-width: 78px;
    height: auto;
    pointer-events: none !important;
    box-sizing: border-box;
}

html[data-halloween="on"] .bliv-halloween-pumpkin--left {
    left: 8px !important;
    right: auto !important;
}

html[data-halloween="on"] .bliv-halloween-pumpkin--right {
    right: 8px !important;
    left: auto !important;
}

/* Mobilde daha küçük dekorlar */
@media (max-width: 767px) {
    html[data-halloween="on"] .bliv-halloween-pumpkin {
        width: 48px !important;
        max-width: 48px !important;
    }
}
html[data-halloween="on"],
html[data-halloween="on"] body {
    overflow-x: clip;
}

.canvas-wrapper{
height:97%;
}