/* =====================================================================
   PHANTOM MARKET — Halloween storefront theme
   Loaded only inside the Storefront layout (admin panel is untouched).
   Overrides the base storefront theme with a haunted-night atmosphere.
   ===================================================================== */

:root {
    /* --- Haunted night palette --- */
    --hw-night:      #0e0718;
    --hw-night-2:    #17092b;
    --hw-night-3:    #1d0b36;
    --hw-surface:    #1b0f2e;
    --hw-surface-2:  #241443;
    --hw-surface-3:  #2c1850;
    --hw-line:       #3d2560;
    --hw-line-soft:  #33204d;
    --hw-pumpkin:    #ff7a18;
    --hw-pumpkin-2:  #ff9e3d;
    --hw-ember:      #e8590c;
    --hw-poison:     #86ff4d;
    --hw-violet:     #b06bff;
    --hw-blood:      #e01e37;
    --hw-bone:       #f6ecd8;
    --hw-bone-soft:  #e7dcc6;
    --hw-fog:        #c9b8e6;
    --hw-fog-dim:    #9a86bf;

    --hw-glow-pumpkin: 0 0 22px rgba(255, 122, 24, .55);
    --hw-glow-poison:  0 0 20px rgba(134, 255, 77, .45);
    --hw-glow-violet:  0 0 26px rgba(176, 107, 255, .45);

    --display-font: "Creepster", system-ui, cursive;
    --gothic-font:  "Cinzel", Georgia, serif;

    /* --- Remap base storefront tokens to Halloween --- */
    --color-primary:            var(--hw-pumpkin);
    --color-primary-hover:      var(--hw-ember);
    --color-primary-alpha-10:   rgba(255, 122, 24, .10);
    --color-primary-alpha-12:   rgba(255, 122, 24, .12);
    --color-primary-alpha-15:   rgba(255, 122, 24, .16);
    --color-primary-alpha-30:   rgba(255, 122, 24, .30);
    --color-primary-alpha-80:   rgba(255, 122, 24, .80);

    --color-black:        var(--hw-bone);
    --color-black-20:     var(--hw-bone-soft);
    --color-black-35:     var(--hw-fog);
    --color-gray:         var(--hw-fog);
    --color-gray-dark:    var(--hw-fog-dim);
    --color-gray-dark-5:  var(--hw-fog-dim);
    --color-gray-lite:    var(--hw-line-soft);
    --color-gray-lite-10: var(--hw-line);

    --border-color:       var(--hw-line);
    --border-color-lite:  var(--hw-line-soft);
    --border-color-5:     var(--hw-line);

    --radius-default: 12px;
}

/* ===================== Global canvas ===================== */
body.page-template {
    background-color: var(--hw-night);
    background-image:
        radial-gradient(1200px 620px at 15% -8%, rgba(176, 107, 255, .18), transparent 60%),
        radial-gradient(1100px 560px at 88% 0%, rgba(255, 122, 24, .16), transparent 58%),
        radial-gradient(900px 700px at 50% 118%, rgba(134, 255, 77, .10), transparent 60%),
        linear-gradient(180deg, #0e0718 0%, #140a24 42%, #0c0616 100%);
    background-attachment: fixed;
    color: var(--hw-bone);
}

body.page-template .wrapper { position: relative; z-index: 1; }

body.page-template ::selection { background: var(--hw-pumpkin); color: #14060a; }

/* Scrollbar */
body.page-template ::-webkit-scrollbar { width: 12px; height: 12px; }
body.page-template ::-webkit-scrollbar-track { background: #0d0618; }
body.page-template ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember));
    border-radius: 10px; border: 3px solid #0d0618;
}

/* Generic text softening for content areas */
body.page-template p,
body.page-template li,
body.page-template span,
body.page-template label,
body.page-template td,
body.page-template dd,
body.page-template dt { color: var(--hw-bone-soft); }

body.page-template h1,
body.page-template h2,
body.page-template h3,
body.page-template h4,
body.page-template h5,
body.page-template h6 { color: var(--hw-bone); }

body.page-template a { color: var(--hw-fog); }
body.page-template a:hover { color: var(--hw-pumpkin); }

/* ===================== Fonts on titles ===================== */
.section-title,
.section-title h2,
.section-title .title,
.home-section-title,
.footer .title,
.widget-title { font-family: var(--gothic-font) !important; letter-spacing: .5px; }

/* ===================== Top nav ===================== */
body.page-template .top-nav-wrap {
    background: linear-gradient(90deg, #120724, #1c0c34, #120724);
    border-bottom: 1px solid var(--hw-line-soft);
    box-shadow: inset 0 -1px 0 rgba(255, 122, 24, .12);
}
body.page-template .top-nav-wrap,
body.page-template .top-nav-wrap a,
body.page-template .top-nav-wrap span,
body.page-template .top-nav-wrap .btn-secondary { color: var(--hw-fog) !important; }
body.page-template .top-nav-wrap a:hover { color: var(--hw-pumpkin) !important; }
body.page-template .top-nav-wrap .dropdown-menu {
    background: var(--hw-surface-2); border: 1px solid var(--hw-line);
}
body.page-template .top-nav-wrap .dropdown-item:hover { background: var(--hw-surface-3); color: var(--hw-pumpkin) !important; }

/* ===================== Header ===================== */
body.page-template .header-wrap { background: transparent; }
body.page-template .header-wrap-inner {
    background: rgba(20, 10, 36, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 122, 24, .22);
}
body.page-template .header-wrap-inner.sticky {
    background: rgba(14, 7, 24, .94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* Header logo text -> glowing Creepster wordmark */
body.page-template .header-logo h3 {
    font-family: var(--display-font) !important;
    font-weight: 400 !important;
    font-size: 34px;
    letter-spacing: 2px;
    color: var(--hw-pumpkin);
    text-shadow: 0 0 8px rgba(255, 122, 24, .7), 0 0 22px rgba(255, 122, 24, .35);
    margin: 0;
}
body.page-template .header-logo img {
    filter: drop-shadow(0 0 10px rgba(255, 122, 24, .45));
}

/* Recolor header/nav icon strokes (they are hardcoded dark in markup) */
body.page-template .header svg path,
body.page-template .sidebar-menu-icon svg path,
body.page-template .header-column-right svg path { stroke: var(--hw-bone) !important; }
body.page-template .header-column-right-item:hover svg path { stroke: var(--hw-pumpkin) !important; }

body.page-template .header-column-right-item .count {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember));
    color: #1a0a04; box-shadow: var(--hw-glow-pumpkin); border: none;
}

/* Search box */
body.page-template .header-search input,
body.page-template .header-search .header-search-input {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    color: var(--hw-bone) !important;
}
body.page-template .header-search input::placeholder { color: var(--hw-fog-dim); }
body.page-template .header-search input:focus { border-color: var(--hw-pumpkin) !important; box-shadow: var(--hw-glow-pumpkin); }
body.page-template .search-suggestions,
body.page-template .search-suggestion-list {
    background: var(--hw-surface-2); border: 1px solid var(--hw-line);
}

/* ===================== Navigation bar ===================== */
body.page-template .navigation,
body.page-template .navigation-wrap,
body.page-template .primary-menu-wrap,
body.page-template .bottom-navigation-menu {
    background: linear-gradient(90deg, #1a0b30, #23103f, #1a0b30);
    border-top: 1px solid rgba(255, 122, 24, .18);
    border-bottom: 1px solid var(--hw-line-soft);
}
body.page-template .navigation a,
body.page-template .primary-menu a,
body.page-template .category-menu a,
body.page-template .menu > li > a { color: var(--hw-bone-soft) !important; }
body.page-template .navigation a:hover,
body.page-template .menu > li > a:hover { color: var(--hw-pumpkin) !important; }
body.page-template .category-menu-title,
body.page-template .all-categories { color: var(--hw-bone) !important; }
body.page-template .category-menu-title { background: rgba(255,122,24,.12); border-radius: 8px; }

/* Dropdown menus in nav */
body.page-template .navigation .dropdown-menu,
body.page-template .menu .dropdown,
body.page-template .mega-menu {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
}

/* ===================== Breadcrumb ===================== */
body.page-template .breadcrumb-wrap,
body.page-template .breadcrumb {
    background: transparent;
}
body.page-template .breadcrumb-wrap { border-bottom: 1px solid var(--hw-line-soft); }
body.page-template .breadcrumb a { color: var(--hw-fog); }
body.page-template .breadcrumb .active,
body.page-template .breadcrumb-item.active { color: var(--hw-pumpkin); }

/* ===================== Buttons ===================== */
body.page-template .btn-primary,
body.page-template .btn.btn-primary {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember)) !important;
    border: 1px solid var(--hw-pumpkin-2) !important;
    color: #180a04 !important;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(255, 122, 24, .30);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.page-template .btn-primary:hover,
body.page-template .btn.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 10px 26px rgba(255, 122, 24, .5), var(--hw-glow-pumpkin);
    transform: translateY(-2px);
}
body.page-template .btn-secondary,
body.page-template .btn.btn-secondary {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    color: var(--hw-bone) !important;
}
body.page-template .btn-secondary:hover { border-color: var(--hw-pumpkin) !important; color: var(--hw-pumpkin) !important; }

body.page-template .btn-outline,
body.page-template .btn-outline-primary {
    border: 1px solid var(--hw-pumpkin) !important;
    color: var(--hw-pumpkin) !important;
    background: transparent !important;
}

/* ===================== Sections / cards ===================== */
body.page-template .home-section-wrap,
body.page-template .section-wrap { position: relative; }

body.page-template .features-wrap {
    background: var(--hw-surface);
    border: 1px solid var(--hw-line-soft);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255,122,24,.06);
}
body.page-template .single-feature { border-color: var(--hw-line-soft) !important; }
body.page-template .feature-icon i { color: var(--hw-pumpkin); }
body.page-template .feature-details h6 { color: var(--hw-bone); }
body.page-template .feature-details span { color: var(--hw-fog); }

/* Generic card/panel surfaces used across the storefront */
body.page-template .card,
body.page-template .panel,
body.page-template .box,
body.page-template .widget,
body.page-template .account-content,
body.page-template .cart-summary,
body.page-template .order-summary,
body.page-template .checkout-wrap .card,
body.page-template .filter-widget,
body.page-template .browse-categories,
body.page-template .compare-table-wrap {
    background: var(--hw-surface) !important;
    border: 1px solid var(--hw-line-soft) !important;
    color: var(--hw-bone-soft);
    border-radius: 14px;
}

/* ===================== Product cards ===================== */
body.page-template .product-card {
    background: linear-gradient(180deg, #1d1132, #170d28) !important;
    border: 1px solid var(--hw-line-soft) !important;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
}
body.page-template .product-card:hover {
    transform: translateY(-6px);
    border-color: var(--hw-pumpkin);
    box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 26px rgba(255,122,24,.28);
}
body.page-template .product-card .product-image { background: #ffffff; border-radius: 12px; }
body.page-template .product-card .product-name,
body.page-template .product-card .product-name span { color: var(--hw-bone) !important; background: transparent !important; }
body.page-template .product-card:hover .product-name span { color: var(--hw-pumpkin) !important; background: transparent !important; }
body.page-template .product-price .special-price,
body.page-template .product-price .price { color: var(--hw-pumpkin) !important; font-weight: 700; }
body.page-template .product-price .previous-price { color: var(--hw-fog-dim) !important; }

body.page-template .product-card-actions .btn {
    background: rgba(20,10,36,.9) !important;
    border: 1px solid var(--hw-line) !important;
}
body.page-template .product-card-actions .btn svg path { stroke: var(--hw-bone) !important; }
body.page-template .product-card-actions .btn:hover { border-color: var(--hw-pumpkin) !important; }
body.page-template .product-card-actions .btn:hover svg path { stroke: var(--hw-pumpkin) !important; }
body.page-template .btn-wishlist.added,
body.page-template .btn-wishlist.added svg path { stroke: var(--hw-blood) !important; fill: var(--hw-blood) !important; }

body.page-template .btn-add-to-cart {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember)) !important;
    border: none !important;
}
body.page-template .btn-add-to-cart svg path { stroke: #180a04 !important; }

/* Badges */
body.page-template .badge-success { background: var(--hw-poison) !important; color: #0c2b06 !important; }
body.page-template .badge-danger  { background: var(--hw-blood) !important; color: #fff !important; }
body.page-template .badge-info    { background: var(--hw-violet) !important; color: #1a0730 !important; }

/* Star ratings */
body.page-template .product-rating i,
body.page-template .rating .filled,
body.page-template .star.filled { color: var(--hw-pumpkin-2) !important; }

/* ===================== Section titles decoration ===================== */
body.page-template .section-title,
body.page-template .home-section-header {
    position: relative;
}
body.page-template .section-title h2,
body.page-template .home-section-header h2,
body.page-template .home-section-header .title {
    color: var(--hw-bone) !important;
    text-shadow: 0 0 18px rgba(255,122,24,.18);
}
/* little bat before section headings */
body.page-template .home-section-header .title::before,
body.page-template .section-title h2::before {
    content: "🦇";
    margin-inline-end: 10px;
    filter: drop-shadow(0 0 6px rgba(176,107,255,.6));
}

/* ===================== Forms ===================== */
body.page-template input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.page-template textarea,
body.page-template select,
body.page-template .form-control,
body.page-template .form-select {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    color: var(--hw-bone) !important;
}
body.page-template input::placeholder,
body.page-template textarea::placeholder { color: var(--hw-fog-dim) !important; }
body.page-template input:focus,
body.page-template textarea:focus,
body.page-template select:focus,
body.page-template .form-control:focus {
    border-color: var(--hw-pumpkin) !important;
    box-shadow: 0 0 0 3px rgba(255,122,24,.18) !important;
}
body.page-template .form-label,
body.page-template label { color: var(--hw-fog); }

/* ===================== Tables ===================== */
body.page-template table { color: var(--hw-bone-soft); }
body.page-template table th { color: var(--hw-bone); border-color: var(--hw-line) !important; }
body.page-template table td { border-color: var(--hw-line-soft) !important; }
body.page-template .table thead { background: var(--hw-surface-2); }

/* ===================== Sidebars / drawers ===================== */
body.page-template .sidebar-menu,
body.page-template .sidebar-cart,
body.page-template .sidebar-cart-wrap,
body.page-template .localization-menu,
body.page-template .sidebar-menu-wrap {
    background: var(--hw-night-2) !important;
    color: var(--hw-bone) !important;
    border-inline-end: 1px solid var(--hw-line);
}
body.page-template .sidebar-menu a,
body.page-template .sidebar-cart a { color: var(--hw-bone-soft) !important; }
body.page-template .sidebar-menu a:hover { color: var(--hw-pumpkin) !important; }
body.page-template .overlay.active { background: rgba(6, 3, 14, .72); backdrop-filter: blur(2px); }

/* ===================== Newsletter ===================== */
body.page-template .newsletter-wrap,
body.page-template .newsletter-subscription,
body.page-template .newsletter {
    background:
        radial-gradient(600px 300px at 80% 20%, rgba(255,122,24,.22), transparent 60%),
        linear-gradient(120deg, #1c0d34, #2a1250) !important;
    border: 1px solid var(--hw-line) !important;
    border-radius: 18px;
}
body.page-template .newsletter-wrap h2,
body.page-template .newsletter h2 { font-family: var(--gothic-font); color: var(--hw-bone) !important; }

/* ===================== Footer ===================== */
body.page-template .footer-wrap {
    background:
        linear-gradient(180deg, transparent, rgba(8,4,16,.9) 40%),
        linear-gradient(90deg, #12071f, #1a0b30, #12071f);
    border-top: 1px solid rgba(255,122,24,.20);
    position: relative;
    overflow: hidden;
}
/* haunted skyline glow at the top of footer */
body.page-template .footer-wrap::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--hw-pumpkin), var(--hw-violet), var(--hw-poison), transparent);
    opacity: .8;
}
body.page-template .footer-wrap .title { color: var(--hw-pumpkin) !important; font-family: var(--gothic-font); }
body.page-template .footer-wrap a { color: var(--hw-fog); }
body.page-template .footer-wrap a:hover { color: var(--hw-pumpkin); }
body.page-template .footer-wrap .contact-info i,
body.page-template .footer-wrap .social-links i,
body.page-template .footer-wrap .social-links svg { color: var(--hw-pumpkin); fill: var(--hw-fog); }
body.page-template .footer-wrap .social-links a:hover svg { fill: var(--hw-pumpkin); }
body.page-template .footer-bottom,
body.page-template .copyright { border-top: 1px solid var(--hw-line-soft); color: var(--hw-fog-dim); }
body.page-template .copyright a { color: var(--hw-pumpkin); }

/* ===================== Pagination ===================== */
body.page-template .pagination .page-link,
body.page-template .pagination a,
body.page-template .pagination span {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    color: var(--hw-bone) !important;
}
body.page-template .pagination .active .page-link,
body.page-template .pagination .active span {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember)) !important;
    color: #180a04 !important; border-color: var(--hw-pumpkin) !important;
}

/* ===================== Scroll-to-top ===================== */
body.page-template .scroll-to-top,
body.page-template #scroll-to-top {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember)) !important;
    color: #180a04 !important;
    box-shadow: var(--hw-glow-pumpkin);
}

/* ===================== Cookie bar / popups ===================== */
body.page-template .cookie-bar,
body.page-template .newsletter-popup,
body.page-template .modal-content {
    background: var(--hw-surface) !important;
    border: 1px solid var(--hw-line) !important;
    color: var(--hw-bone) !important;
}

/* ===================== Hero slider polish ===================== */
body.page-template .home-slider .swiper-slide { border-radius: 16px; overflow: hidden; }
body.page-template .home-slider .slide-content .caption-1 {
    font-family: var(--gothic-font);
    text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
body.page-template .swiper-button-prev,
body.page-template .swiper-button-next { color: var(--hw-pumpkin) !important; }
body.page-template .swiper-pagination-bullet-active { background: var(--hw-pumpkin) !important; }

/* =====================================================================
   HALLOWEEN DECORATION LAYER (created by phantom-halloween.js)
   ===================================================================== */
.hw-fx-layer {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 60;
    overflow: hidden;
}
.hw-fx-layer .hw-figure { position: absolute; pointer-events: none; will-change: transform, opacity; }

/* Flying bats across the screen */
.hw-bat {
    top: var(--y, 12%);
    left: -140px;
    width: var(--size, 64px);
    animation: hw-fly var(--dur, 22s) linear var(--delay, 0s) infinite;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.hw-bat img { width: 100%; display: block; animation: hw-flap .28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes hw-fly {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30vw, -6vh); }
    50%  { transform: translate(60vw, 5vh); }
    75%  { transform: translate(85vw, -4vh); }
    100% { transform: translate(115vw, 2vh); }
}
@keyframes hw-flap { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(.62) scaleX(1.04); } }

/* Bobbing ghosts */
.hw-ghost {
    width: var(--size, 90px);
    opacity: .0;
    animation: hw-ghost-drift var(--dur, 26s) ease-in-out var(--delay, 0s) infinite;
    filter: drop-shadow(0 0 16px rgba(176,107,255,.5));
}
.hw-ghost img { width: 100%; display: block; animation: hw-bob 3.4s ease-in-out infinite; }
@keyframes hw-ghost-drift {
    0%   { transform: translate(-10vw, 80vh); opacity: 0; }
    12%  { opacity: .85; }
    88%  { opacity: .85; }
    100% { transform: translate(20vw, -20vh); opacity: 0; }
}
@keyframes hw-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }

/* Corner spider on a thread */
.hw-spider-thread {
    top: 0; right: 6%;
    width: 2px; height: 120px;
    background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
    transform-origin: top center;
    animation: hw-spider-drop 9s ease-in-out infinite;
}
.hw-spider-thread .hw-spider {
    position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
    font-size: 34px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
    animation: hw-spider-wiggle 2.2s ease-in-out infinite;
}
@keyframes hw-spider-drop {
    0%,100% { height: 90px; } 50% { height: 220px; }
}
@keyframes hw-spider-wiggle { 0%,100% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(6deg); } }

/* Drifting fog at the bottom */
.hw-fog {
    position: fixed; left: 0; right: 0; bottom: 0; height: 200px;
    pointer-events: none; z-index: 55;
    background:
        radial-gradient(120px 60px at 10% 90%, rgba(176,107,255,.20), transparent 70%),
        radial-gradient(160px 70px at 40% 95%, rgba(255,255,255,.10), transparent 70%),
        radial-gradient(150px 60px at 72% 92%, rgba(134,255,77,.10), transparent 70%),
        radial-gradient(130px 60px at 92% 96%, rgba(176,107,255,.16), transparent 70%);
    animation: hw-fog-move 18s ease-in-out infinite alternate;
    filter: blur(6px);
    opacity: .8;
}
@keyframes hw-fog-move { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* Corner cobwebs */
.hw-web {
    position: fixed; width: 150px; height: 150px; z-index: 58; opacity: .5; pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.25));
}
.hw-web.tl { top: 0; left: 0; }
.hw-web.tr { top: 0; right: 0; transform: scaleX(-1); }

/* Homepage hero decorations (pumpkins framing slider) */
.hw-hero-deco { position: absolute; z-index: 3; pointer-events: none; }
.hw-hero-deco img { display: block; width: 100%; height: auto; }
.hw-hero-pumpkin-left  { left: -46px;  bottom: -26px; width: 156px; z-index: 2; animation: hw-sway 5s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(255,122,24,.55)); }
.hw-hero-pumpkin-right { right: -24px; bottom: -14px; width: 150px; z-index: 2; animation: hw-sway 6s ease-in-out infinite reverse; filter: drop-shadow(0 0 22px rgba(255,122,24,.5)); }
/* keep slide text/actions above hero decorations */
body.page-template .home-slider .slide-content,
body.page-template .home-slider .swiper-slide .captions { position: relative; z-index: 5; }
.hw-hero-bat  { top: 8px; right: 12%; width: 84px; animation: hw-hover 4s ease-in-out infinite; }
@keyframes hw-sway { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }
@keyframes hw-hover { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(4deg); } }

/* Phantom title band injected on homepage */
.hw-title-band {
    text-align: center;
    margin: 26px auto 4px;
    padding: 8px 16px;
}
.hw-title-band .hw-brand {
    font-family: var(--display-font);
    font-size: clamp(46px, 8vw, 96px);
    line-height: 1;
    color: var(--hw-pumpkin);
    letter-spacing: 2px;
    text-shadow:
        0 0 10px rgba(255,122,24,.75),
        0 0 30px rgba(255,122,24,.45),
        0 0 60px rgba(176,107,255,.35);
    animation: hw-flicker 5s infinite;
}
.hw-title-band .hw-sub {
    font-family: var(--gothic-font);
    color: var(--hw-fog);
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: clamp(11px, 1.6vw, 15px);
    margin-top: 6px;
}
@keyframes hw-flicker {
    0%, 19%, 21%, 55%, 57%, 100% { opacity: 1; }
    20%, 56% { opacity: .55; }
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
    .hw-bat, .hw-bat img, .hw-ghost, .hw-ghost img,
    .hw-spider-thread, .hw-spider, .hw-fog,
    .hw-hero-pumpkin-left, .hw-hero-pumpkin-right, .hw-hero-bat,
    .hw-title-band .hw-brand { animation: none !important; }
    .hw-ghost { opacity: .5; }
}

/* Keep decorations out of the way on small screens */
@media (max-width: 767px) {
    .hw-web { width: 92px; height: 92px; }
    .hw-spider-thread { display: none; }
    .hw-hero-pumpkin-left { width: 120px; }
    .hw-hero-pumpkin-right { width: 100px; }
    .hw-ghost { display: none; }
}

/* =====================================================================
   PHANTOM MARKET · v1.1 DEEP-AUDIT FIXES
   Fixes white content areas, nav end-strips, low-contrast panels,
   dropdowns, cookie bar, and adds festive product-card accents.
   ===================================================================== */

:root {
    /* background-only tokens — safe to darken (never used as text) */
    --color-white-lite: #201338;
    --color-white-dark: #1a0f2d;
    --color-white-transparent: rgba(27, 15, 46, .72);
}

/* ---- MASTER FIX: the white content shell -> transparent so the
        haunted body gradient shows on every inner page ---- */
body.page-template .wrapper { background: transparent !important; }

/* ---- Navigation: kill the 5000px white shelf + white category block ---- */
body.page-template .navigation-inner { border-color: var(--hw-line) !important; }
body.page-template .navigation-inner:before,
body.page-template .navigation-inner:after {
    background: linear-gradient(90deg, #1a0b30, #23103f) !important;
    border-color: var(--hw-line) !important;
}
body.page-template .category-nav { background: #1a0b30 !important; border-radius: 10px; }
body.page-template .category-nav .category-nav-inner {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember)) !important;
    color: #180a04 !important; border-radius: 8px;
}
body.page-template .category-nav .category-dropdown-wrap,
body.page-template .category-nav .category-dropdown {
    background: var(--hw-surface-2) !important; border: 1px solid var(--hw-line) !important;
}
/* remove the white swiper edge-fades on the horizontal menu */
body.page-template .primary-menu:before,
body.page-template .primary-menu:after { background: transparent !important; }
body.page-template .primary-menu .nav-link,
body.page-template .primary-menu .menu-item { color: var(--hw-bone-soft) !important; }
body.page-template .primary-menu .nav-link:hover { color: var(--hw-pumpkin) !important; }
body.page-template .primary-menu .swiper-button-prev:after,
body.page-template .primary-menu .swiper-button-next:after { color: var(--hw-pumpkin) !important; }

/* nav dropdowns / mega menus */
body.page-template .mega-menu .dropdown > .sub-menu,
body.page-template .mega-menu > .fluid-menu > .fluid-menu-wrap,
body.page-template .vertical-megamenu,
body.page-template .horizontal-megamenu .sub-menu {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
body.page-template .mega-menu a,
body.page-template .mega-menu .menu-item { color: var(--hw-bone-soft) !important; }
body.page-template .mega-menu a:hover { color: var(--hw-pumpkin) !important; }

/* ---- Account pages ---- */
body.page-template .account-wrap,
body.page-template .account-wrap-inner,
body.page-template .account-left,
body.page-template .account-right { background: transparent !important; }
body.page-template .account-sidebar li a { color: var(--hw-bone-soft) !important; }
body.page-template .account-sidebar li a i { color: var(--hw-fog) !important; }
body.page-template .account-sidebar li a:hover { color: var(--hw-pumpkin) !important; }
body.page-template .account-sidebar li a:hover i { color: var(--hw-pumpkin) !important; }
body.page-template .account-sidebar li.active a,
body.page-template .account-sidebar li.active a i { color: var(--hw-pumpkin) !important; }

/* ---- Panels (dashboard, wishlist, orders, reviews, profile) ---- */
body.page-template .panel-wrap,
body.page-template .panel { background: transparent !important; }
body.page-template .panel-header {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    border-radius: 12px 12px 0 0;
}
body.page-template .panel-header h4,
body.page-template .panel-header .title { color: var(--hw-bone) !important; font-family: var(--gothic-font); }
body.page-template .panel-body {
    background: var(--hw-surface) !important;
    border: 1px solid var(--hw-line) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px;
    color: var(--hw-bone-soft);
}
body.page-template .panel-body .empty-message h3,
body.page-template .empty-message h3 { color: var(--hw-fog) !important; }

/* dashboard stat / info cards */
body.page-template .dashboard-card,
body.page-template .info-box,
body.page-template .order-card,
body.page-template .address-card {
    background: var(--hw-surface-2) !important;
    border: 1px solid var(--hw-line) !important;
    color: var(--hw-bone-soft);
}

/* ---- Compare page ---- */
body.page-template .compare-wrap { background: transparent !important; }
body.page-template .compare-table,
body.page-template .compare-table-wrap {
    background: var(--hw-surface) !important; border: 1px solid var(--hw-line) !important;
}
body.page-template .empty-compare-table,
body.page-template .empty-compare-table h3,
body.page-template .empty-results-logo + *,
body.page-template .no-product-text { color: var(--hw-fog) !important; }

/* ---- Contact page ---- */
body.page-template .contact-wrap { background: transparent !important; }
body.page-template .contact-form-wrap,
body.page-template .contact-form-inner { background: transparent !important; }
body.page-template .contact-form-right {
    background: var(--hw-surface) !important;
    border: 1px solid var(--hw-line) !important;
    border-radius: 0 14px 14px 0;
}
body.page-template .contact-form-right .title {
    color: var(--hw-bone) !important; font-family: var(--gothic-font);
    text-shadow: 0 0 18px rgba(255,122,24,.2);
}
/* keep the orange contact-left card, just brighten its text */
body.page-template .contact-form-left { box-shadow: 0 0 40px rgba(255,122,24,.25); }
body.page-template .contact-form-left .title,
body.page-template .contact-form-left a,
body.page-template .contact-form-left i { color: #fff !important; }

/* ---- Cookie bar ---- */
body.page-template .cookie-bar-wrap,
body.page-template .cookie-bar {
    background: var(--hw-surface-2) !important;
    border-top: 1px solid rgba(255,122,24,.3) !important;
    color: var(--hw-bone) !important;
    box-shadow: 0 -6px 24px rgba(0,0,0,.5) !important;
}
body.page-template .cookie-bar-wrap p,
body.page-template .cookie-bar-wrap span { color: var(--hw-bone-soft) !important; }

/* ---- Number picker (quantity +/-) ---- */
body.page-template .number-picker .btn-number,
body.page-template .input-group-quantity .btn-number {
    background: var(--hw-surface-3) !important;
    color: var(--hw-bone) !important;
    border-color: var(--hw-line) !important;
}

/* ---- Header search shell (ensure fully dark) ---- */
body.page-template .header-search-wrap,
body.page-template .header-search-lg.header-search-lg-background,
body.page-template .header-search-lg .search-input.focused,
body.page-template .header-search-lg .header-search-right.header-search-right-background,
body.page-template .header-search-sm-form,
body.page-template .header-wrap-inner.sticky .header-search-lg.header-search-lg-background {
    background: var(--hw-surface-2) !important;
    border-color: var(--hw-line) !important;
}
body.page-template .header-search .header-search-btn,
body.page-template .header-search button[type="submit"] {
    background: linear-gradient(180deg, var(--hw-pumpkin), var(--hw-ember)) !important;
    color: #180a04 !important;
}
/* category selector inside search */
body.page-template .header-search .header-categories,
body.page-template .header-search select { color: var(--hw-bone) !important; }

/* ---- Sidebar menu drawer polish ---- */
body.page-template .sidebar-menu-wrap > .tab-content,
body.page-template .sidebar-more-menu-items li,
body.page-template .sidebar-menu-wrap .sidebar-menu-close {
    background: var(--hw-night-2) !important;
}
body.page-template .sidebar-menu-wrap .sidebar-menu-header > h4 { color: var(--hw-bone) !important; }

/* ---- Bottom navigation (mobile) ---- */
body.page-template .bottom-navigation-wrap {
    background: var(--hw-night-2) !important;
    border-top: 1px solid var(--hw-line) !important;
}

/* =====================================================================
   FESTIVE PRODUCT-CARD ACCENTS (applies to every product incl. admin-created)
   ===================================================================== */
body.page-template .product-card .product-card-top { position: relative; }
/* little bat perched on the top-right corner of each card */
body.page-template .product-card .product-card-top::after {
    content: "";
    position: absolute; top: 6px; right: 6px;
    width: 30px; height: 30px; z-index: 4;
    background: url("../halloween/img/bat.png") center/contain no-repeat;
    opacity: .38;
    transform: rotate(6deg);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
body.page-template .product-card:hover .product-card-top::after {
    opacity: .95; transform: rotate(-8deg) translateY(-2px) scale(1.1);
}
/* glowing pumpkin watermark corner */
body.page-template .product-card::before {
    content: "";
    position: absolute; bottom: 10px; right: 10px;
    width: 34px; height: 34px; z-index: 0;
    background: url("../halloween/img/pumpkin.png") center/contain no-repeat;
    opacity: .10;
    transition: opacity .25s ease;
    pointer-events: none;
}
body.page-template .product-card:hover::before { opacity: .28; }
body.page-template .product-card .product-card-middle,
body.page-template .product-card .product-card-bottom { position: relative; z-index: 1; }

/* section headings get a small pumpkin marker instead of the emoji fallback */
body.page-template .home-section-header .title::before,
body.page-template .section-title h2::before {
    content: "";
    display: inline-block;
    width: 22px; height: 22px;
    margin-inline-end: 10px;
    vertical-align: -4px;
    background: url("../halloween/img/jack.png") center/contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(255,122,24,.6));
}