:root {
    --color-halloween-primary: #00393d;
    --color-halloween-border: #fff35c;
    --color-halloween-text: #ffffff;
    --color-halloween-surface: #fefef5;
}

/* ==========================================================================
   Header - Base & Layout
   ========================================================================== */
.header-top {
    position: relative;
    z-index: 10;
}

.header-main {
    position: relative;
    background-color: var(--color-halloween-primary);
    border-bottom: 2px solid var(--color-halloween-border);
}

.header-main-top {
    position: relative;
}

/* ==========================================================================
   Header - Typography, Colors & Buttons
   ========================================================================== */
.header-main,
.header-main .parent-link,
.header-main .nav-item,
.header-main .right-nav-item,
.header-main .customer-account,
.header-main .customer-name,
.header-main .curr,
.header-main .underline {
    color: var(--color-halloween-text);
}

.header-main .login-btn {
    color: var(--color-halloween-text);
    border-color: var(--color-halloween-text);
}

.header-main .divider-right {
    border-left-color: rgba(255, 255, 255, 0.4);
}

.header-main .search-bar {
    padding: 0;
}

.header-main .menu-links {
    color: var(--color-halloween-primary);
}

/* ==========================================================================
   Header - Icons & Logos
   ========================================================================== */
.header-main .logo img,
.header-main .mobile-toggle,
.header-main .search-icon,
.header-main .account-icon,
.header-main .cart-icon,
.header-main .globe-icon {
    filter: brightness(0) invert(1);
}

.header-main .account-icon-login {
    background-image: url("/assets/theme/halloween-2026/profile-icon.svg");
}

/* ==========================================================================
   Header - Desktop Decorations (Corner Webs & Center Illust)
   ========================================================================== */
/* Corner Spider Webs (Top-Left & Top-Right) */
.header-main-top::before,
.header-main-top::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 79px;
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

.header-main-top::before {
    left: -10px;
    background-image: url("/assets/theme/halloween-2026/header-left.svg");
}

.header-main-top::after {
    right: -10px;
    background-image: url("/assets/theme/halloween-2026/header-right.svg");
}

/* Center Illustration (Skull, Pumpkin, Potion, Yellow Cat) */
.header-main .header-container::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 198px;
    height: 71px;
    background-image: url("/assets/theme/halloween-2026/header-center.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Content — Best Seller Title
   ========================================================================== */
#best-seller-title h3 {
    display: flex;
    align-items: center;
    gap: 16px;
}

#best-seller-title .title-icon {
    display: inline-block;
    background: url("/assets/theme/halloween-2026/content-title.svg") no-repeat center;
    background-size: 100%;
    width: 292px;
    height: 60px;
}

/* ==========================================================================
   Consumer Service
   ========================================================================== */
.consumer-service {
    background-color: var(--color-halloween-surface);
}

/* ==========================================================================
   Footer — Base & Background
   ========================================================================== */
.footer {
    position: relative;
    overflow: hidden;
    background: url("/assets/theme/halloween-2026/footer-bg.svg") no-repeat center / cover;
    border: none;
    color: var(--color-halloween-text);
}

.footer,
.footer a,
.footer .container-fluid .row {
    color: var(--color-halloween-text);
}

.footer .footer-logo,
.footer .footer-link a {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   Footer — Desktop Decorations
   ========================================================================== */
/* Shared footer pseudo-element base */
.footer::before,
.footer::after,
.footer #footer-logo::before,
.footer #footer-logo::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

/* Left decoration (Ghost, Pumpkin & Candies) */
.footer::before {
    left: 117px;
    bottom: 11px;
    width: 121px;
    height: 58px;
    background-image: url("/assets/theme/halloween-2026/footer-left.svg");
    z-index: 0;
}

/* Center-left decoration (Skull & Potions next to logo) */
.footer #footer-logo {
    position: relative;
}

.footer #footer-logo::before {
    left: 0;
    bottom: -15px;
    width: 161px;
    height: 102px;
    background-image: url("/assets/theme/halloween-2026/footer-center-left.svg");
    z-index: 1;
}

/* Right decoration (Haunted House & Spooky Trees) */
.footer #footer-logo::after {
    right: -35px;
    bottom: -21px;
    width: 155px;
    height: 162px;
    background-image: url("/assets/theme/halloween-2026/footer-right.svg");
    z-index: 0;
}

/* Inactive on desktop (reserved for mobile portrait) */
.footer::after {
    display: none;
}

/* ==========================================================================
   Account & Checkout Page Overrides
   ========================================================================== */
body:has(.header-main-account) :is(.account-title) {
    color: var(--color-halloween-primary);
}

/* ==========================================================================
   Responsive — Large Tablets & Small Desktops (< 1200px)
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* Hide desktop footer decorations to prevent clipping */
    .footer::before,
    .footer #footer-logo::before,
    .footer #footer-logo::after {
        opacity: 0;
    }
}

/* ==========================================================================
   Responsive — Tablets & Mobile Landscape (< 992px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Hide desktop header decorations */
    .header-main-top::before,
    .header-main-top::after,
    .header-main .header-container::before {
        display: none;
    }

    /* Mobile Header Center Illustration (Next to Hamburger) */
    .header-main .header-container::after {
        content: "";
        position: absolute;
        left: 46px;
        bottom: 0;
        width: 95px;
        height: 39px;
        background-image: url("/assets/theme/halloween-2026/header-center-mobile.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        pointer-events: none;
        z-index: 0;
    }
}

/* ==========================================================================
   Responsive — Mobile Portrait (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    body:has(.header-main-account) .header-main {
        position: fixed;
    }

    /* Best Seller Title - Compact icon & gap for mobile */
    #best-seller-title h3 {
        gap: 10px;
    }

    #best-seller-title .title-icon {
        background-image: url("/assets/theme/halloween-2026/content-title-mobile.svg");
        width: 136px;
        height: 28px;
    }

    /* Footer Mobile Background */
    .footer {
        background-image: url("/assets/theme/halloween-2026/footer-bg-mobile.svg");
    }

    /* Footer Mobile Left Illustration */
    .footer::before {
        opacity: 1;
        left: 21px;
        bottom: 8px;
        width: 87px;
        height: 55px;
        background-image: url("/assets/theme/halloween-2026/footer-left-mobile.svg");
    }

    /* Footer Mobile Right Illustration */
    .footer::after {
        display: block;
        opacity: 1;
        right: 14px;
        bottom: 0;
        width: 83px;
        height: 79px;
        background-image: url("/assets/theme/halloween-2026/footer-center-right-mobile.svg");
        z-index: 0;
    }
}