/* ===== EXPLORE THEME – Header, Sidepane (forest/cream) ===== */
/* Logo: cream on dark green header */
body.explore-theme .header .logo--maroon .logo-image-mask {
    background-color: var(--cream);
}

/* Header: exact dynamic category theme color */
body.explore-theme .header,
body.explore-body .header {
    background-color: var(--cat-theme-bg, var(--forest)) !important;
    background: var(--cat-theme-bg, var(--forest)) !important;
    color: var(--cat-theme-text, var(--cream)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.25s ease;
}

body.explore-theme .header .hamburger-menu span,
body.explore-body .header .hamburger-menu span {
    background-color: var(--cat-theme-text, var(--cream)) !important;
}

body.explore-theme .header .hamburger-menu i,
body.explore-body .header .hamburger-menu i,
body.explore-theme .header .account-trigger,
body.explore-body .header .account-trigger,
body.explore-theme .header .account-trigger .fa-chevron-down {
    color: var(--cat-theme-text, var(--cream)) !important;
}

body.explore-theme .header .account-trigger:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

body.explore-theme .header .user-badge {
    background-color: var(--cat-theme-text, var(--cream));
    color: var(--cat-theme-bg, var(--forest));
}

/* Sidepane: exact dynamic category theme color */
body.explore-theme .sidepane,
body.explore-body .sidepane {
    background: var(--cat-theme-bg, var(--forest)) !important;
    background-color: var(--cat-theme-bg, var(--forest)) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15), inset 1px 0 0 rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, background-color 0.25s ease;
}

body.explore-theme .sidepane-nav-item,
body.explore-body .sidepane-nav-item,
body.explore-theme .sidepane-nav-item i,
body.explore-body .sidepane-nav-item i {
    color: var(--cat-theme-text, var(--cream)) !important;
}

.explore-subnav-rail,
.explore-subnav-rail .subnav {
    background-color: var(--cat-subnav-shade, #561023) !important;
    background: var(--cat-subnav-shade, #561023) !important;
    transition: background-color 0.25s ease !important;
}

body.explore-theme .sidepane-nav-item i {
    color: var(--cream);
}

body.explore-theme .sidepane-nav-item:hover {
    background-color: rgba(237, 230, 220, 0.15);
    color: var(--cream) !important;
}

body.explore-theme .sidepane-nav-item:hover i {
    color: var(--cream) !important;
}

body.explore-theme .sidepane-nav-item.active {
    background-color: rgba(237, 230, 220, 0.2);
    color: var(--cream) !important;
}

body.explore-theme .sidepane-nav-item.active i {
    color: var(--cream) !important;
}

body.explore-theme .sidepane-section-divider {
    background-color: rgba(237, 230, 220, 0.3);
}

body.explore-theme .sidepane-section-title {
    color: var(--cream);
}

/* Support dropdown: cream background, cream-accented border */
body.explore-theme .sidepane-support-dropdown {
    background-color: var(--cream);
    border-color: rgba(237, 230, 220, 0.5);
}

body.explore-theme .sidepane-support-dropdown-item:hover {
    background-color: rgba(15, 58, 46, 0.08);
    color: var(--forest) !important;
}

body.explore-theme .sidepane-support-dropdown-item:hover i {
    color: var(--forest) !important;
}

/* Content wrapper: cream background */
body.explore-theme .content-wrapper {
    background-color: var(--cream);
}

/* Back to Explore buttons: cream background, green text */
body.explore-theme .category-back-btn {
    background-color: var(--cream);
    color: var(--forest);
    border-color: rgba(15, 58, 46, 0.25);
}

body.explore-theme .category-back-btn:hover {
    background-color: rgba(237, 230, 220, 0.95);
    color: var(--forest);
    border-color: rgba(15, 58, 46, 0.3);
}

body.explore-theme .back-to-explore-btn {
    background-color: var(--cream);
    color: var(--forest);
}

body.explore-theme .back-to-explore-btn:hover {
    background-color: rgba(15, 58, 46, 0.08);
    color: var(--forest);
}

/* --- Product Detail Modal (explore category) --- */
body.explore-theme .product-detail-modal-container {
    z-index: 100000 !important;
    background-color: var(--cream, #ede6dc) !important;
    border: none !important;
    box-shadow: 6px 4px 0 0 var(--coral), -8px -6px 20px rgb(8 8 8 / 20%) !important;
}

body.explore-theme .product-detail-modal-close {
    background-color: transparent !important;
    color: var(--cream, #ede6dc) !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 22px !important;
}

@media (max-width: 1024px) {
    body.explore-theme .product-detail-modal-close {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

body.explore-theme .product-detail-modal-close:hover {
    background-color: transparent !important;
    color: var(--coral, #e45558) !important;
    border-color: transparent !important;
    transform: scale(1.15) !important;
    box-shadow: none !important;
}

body.explore-theme .product-detail-image-wrapper {
    background-color: rgba(15, 58, 46, 0.06);
}

body.explore-theme .product-detail-title {
    font-family: 'Nanum Myeongjo', serif;
    color: var(--forest);
    font-weight: 600;
}

body.explore-theme .product-detail-price {
    font-family: 'Nanum Myeongjo', serif;
    color: var(--forest);
}

body.explore-theme .product-detail-add-btn {
    font-family: 'Nanum Myeongjo', serif;
    background-color: var(--forest);
    color: var(--cream);
}

body.explore-theme .product-detail-add-btn:hover,
body.explore-theme .wishlist-login-cta-btn:hover,
body.explore-theme .product-detail-success-view-btn:hover {
    box-shadow: 3px 3px 0px var(--coral) !important;
    transform: translate(-3px, -3px) !important;
    color: var(--cream) !important;
    transition: all 0.1s ease !important;
}

body.explore-theme .product-detail-add-btn i {
    color: var(--cream);
}

body.explore-theme .product-detail-brand-btn {
    font-family: 'Nanum Myeongjo', serif;
    background-color: var(--cream);
    color: var(--forest);
    border: 2px solid var(--forest);
}

body.explore-theme .product-detail-brand-btn:hover {
    background-color: rgba(15, 58, 46, 0.08);
    color: var(--forest);
    border-color: var(--forest);
}

body.explore-theme .product-detail-brand-btn-text {
    color: var(--forest);
}

body.explore-theme .product-detail-brand-btn-price {
    color: var(--forest);
    font-weight: 600;
}

body.explore-theme .product-detail-brand-btn i {
    color: var(--forest);
}

/* --- Explore card typography: Nanum Myeongjo for category tile captions --- */
body.explore-theme .explore-tile-caption {
    font-family: 'Nanum Myeongjo', serif;
}
