/**
 * Page-Specific Header Overrides
 *
 * .light-header — white header with dark text/icons.
 * Applied on: product, cart, checkout, order-confirmation,
 *             gender (template-gender), and collection pages.
 *
 * Cart, checkout, and confirmation pages additionally hide
 * the department toggle, delivery selector, and language selector.
 */

/* ===========================================
   WP ADMIN BAR COMPENSATION
   =========================================== */
.admin-bar .homepage-desktop-header,
.admin-bar .site-header,
.admin-bar .header-sticky-wrapper {
    top: 32px;
}

.admin-bar #wpadminbar {
    display: none !important;
}

.admin-bar html {
    margin-top: 0 !important;
}

/* ===========================================
   LIGHT HEADER — CSS Variables
   =========================================== */
.light-header {
    --header-bg: #fff;
    --header-text: #1A1A1A;
    --header-text-muted: rgba(26, 26, 26, 0.8);
    --header-text-hover: rgba(26, 26, 26, 0.7);
    --header-border: #e5e5e5;
}

/* ===========================================
   LIGHT HEADER — Logo Switching
   =========================================== */

/* Default: show light logo (for dark header on desktop) */
.header-logo .logo-dark {
    display: none;
}

.header-logo .logo-light {
    display: block;
}

/* Mobile: show dark logo (dark on white sticky header) */
@media (max-width: 1023px) {
    .header-logo .logo-light {
        display: none;
    }

    .header-logo .logo-dark {
        display: block;
    }
}

/* Light header pages: always show dark logo */
.light-header .header-logo .logo-light {
    display: none;
}

.light-header .header-logo .logo-dark {
    display: block;
}

/* Mobile logo uses hardcoded light img src —
   brightness(0) inverts white logo to black */
.light-header .mobile-header-logo img {
    filter: brightness(0);
}

/* ===========================================
   LIGHT HEADER — Row 1: site-header
   =========================================== */
.light-header .site-header {
    background: var(--header-bg) !important;
    border-bottom: none !important;
}

/* ===========================================
   LIGHT HEADER — Row 2: desktop-nav
   =========================================== */
.light-header .desktop-nav {
    background: var(--header-bg) !important;
    border-bottom: none !important;
}

/* ===========================================
   LIGHT HEADER — Nav links
   =========================================== */
.light-header .nav-link {
    color: var(--header-text) !important;
}

.light-header .nav-link:hover {
    color: var(--header-text-hover) !important;
}

/* ===========================================
   LIGHT HEADER — Icon buttons
   =========================================== */
.light-header .header-icon-btn {
    color: var(--header-text) !important;
}

/* ===========================================
   LIGHT HEADER — Cart
   =========================================== */
.light-header .cart-btn,
.light-header .desktop-cart-link {
    color: var(--header-text) !important;
}

.light-header .cart-count,
.light-header .cart-count-badge,
.light-header .desktop-cart-link .cart-count {
    color: var(--header-text) !important;
}

/* ===========================================
   LIGHT HEADER — Desktop separators
   =========================================== */
.light-header .desktop-header-sep {
    background: rgba(26, 26, 26, 0.15) !important;
}

/* ===========================================
   LIGHT HEADER — Mobile delivery pill (right-aligned)
   Base makes it absolute-centered; light header keeps
   it in the flex flow next to the icons.
   =========================================== */
@media (max-width: 1023px) {
    .light-header .site-header .delivery-mode-wrapper {
        position: relative !important;
        transform: none !important;
        margin-right: 4px;
    }
}

/* ===========================================
   LIGHT HEADER — Mobile separators
   =========================================== */
@media (max-width: 1023px) {
    .light-header .site-header .header-mobile-sep {
        display: block !important;
        width: 1px;
        height: 11px;
        background: rgba(26, 26, 26, 0.2);
        flex-shrink: 0;
        margin: 0;
    }

    .light-header .site-header .header-search-icon {
        margin-right: 0 !important;
    }

    .light-header .site-header .lang-selector {
        margin-right: 0 !important;
    }
}

@media (max-width: 390px) {
    .light-header .site-header .header-mobile-sep {
        margin: 0 0px !important;
    }
}

/* ===========================================
   LIGHT HEADER — Department toggle
   =========================================== */
.light-header .header-dept-toggle {
    border-color: rgba(26, 26, 26, 0.2) !important;
}

.light-header .header-dept-toggle .dept-link {
    color: rgba(26, 26, 26, 0.55) !important;
}

.light-header .header-dept-toggle .dept-link.active {
    color: #1A1A1A !important;
    background: rgba(26, 26, 26, 0.08) !important;
}

.light-header .header-dept-toggle .dept-link:hover {
    color: #1A1A1A !important;
}

/* ===========================================
   LIGHT HEADER — Delivery mode pill
   =========================================== */
.light-header .delivery-mode-selector {
    background: #fff !important;
    border-color: rgba(26, 26, 26, 0.15) !important;
    color: #1A1A1A !important;
}

.light-header .delivery-mode-selector:hover {
    background: rgba(26, 26, 26, 0.08) !important;
}

.light-header .delivery-label {
    color: #1A1A1A !important;
}

.light-header .delivery-mode-selector > svg {
    stroke: rgba(26, 26, 26, 0.6) !important;
}

/* ===========================================
   LIGHT HEADER — Currency switcher
   =========================================== */
.light-header .currency-selector {
    /* background: rgba(26, 26, 26, 0.04) !important; */
    border-color: rgba(26, 26, 26, 0.15) !important;
}

.light-header .currency-selector:hover {
    background: rgba(26, 26, 26, 0.08) !important;
}

.light-header .currency-code {
    color: #1A1A1A !important;
}

.light-header .currency-symbol {
    color: rgba(26, 26, 26, 0.4) !important;
}

.light-header .currency-chevron {
    stroke: rgba(26, 26, 26, 0.6) !important;
}

/* ===========================================
   LIGHT HEADER — Language selector
   =========================================== */
.light-header .lang-selector {
    color: #1A1A1A !important;
}

.light-header .lang-label {
    color: #1A1A1A !important;
}

.light-header .lang-selector svg {
    stroke: rgba(26, 26, 26, 0.6) !important;
}

/* Light header — Language dropdown */
.light-header .lang-dropdown {
    background: #fff !important;
    border-color: rgba(26, 26, 26, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.light-header .lang-option {
    color: #1A1A1A !important;
    border-bottom-color: rgba(26, 26, 26, 0.08) !important;
}

.light-header .lang-option:hover {
    background: rgba(26, 26, 26, 0.05) !important;
}

.light-header .lang-option.is-active {
    background: rgba(26, 26, 26, 0.04) !important;
}

.light-header .lang-option .lang-check {
    stroke: rgba(26, 26, 26, 0.5) !important;
}

/* ===========================================
   LIGHT HEADER — Desktop search bar
   =========================================== */
.light-header .desktop-search-bar {
    border-color: rgba(26, 26, 26, 0.2) !important;
    background: rgba(26, 26, 26, 0.03) !important;
}

.light-header .desktop-search-bar:hover {
    background: rgba(26, 26, 26, 0.06) !important;
    border-color: rgba(26, 26, 26, 0.3) !important;
}

.light-header .desktop-search-bar svg {
    stroke: var(--header-text) !important;
}

.light-header .desktop-search-input {
    color: var(--header-text) !important;
}

.light-header .desktop-search-input::placeholder {
    color: var(--header-text-muted) !important;
}

/* Cart/checkout/confirmation previously hid dept toggle, delivery,
   and lang selector. Removed — all light-header pages now show
   the full header identically. */

/* ===========================================
   PRODUCT PAGE — Desktop logo sizing (Figma)
   Logo: 110.02 × 32px, vertically centered
   =========================================== */
@media (min-width: 1024px) {
    .product-page .header-logo img {
        width: 110px;
        height: 32px;
        margin-top: 0;
    }

    .nav-menu-wrapper {
        max-height: 31px;
    }
}