/**
 * Page-Specific Header Overrides
 *
 * Light header for Cart, Checkout, and Order Confirmation pages.
 */

/* ===========================================
   WP ADMIN BAR COMPENSATION
   WP Studio / preview sites show the admin bar even when
   show_admin_bar(false) is set. WordPress injects:
   html { margin-top: 32px !important }
   This offsets our fixed header to account for it.
   =========================================== */
.admin-bar .homepage-desktop-header,
.admin-bar .site-header,
.admin-bar .header-sticky-wrapper {
    top: 32px;
    
}

/* Hide the admin bar entirely on homepage — it breaks the hero layout */
.admin-bar #wpadminbar {
    display: none !important;
}

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

/* ===========================================
   LIGHT HEADER - Cart, Checkout, Order Confirmation
   =========================================== */
.cart-page-body,
.checkout-page-body,
.confirmation-page-body,
.product-page {
    --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;
}

/* ===========================================
   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 (white header background per Figma) */
@media (max-width: 1023px) {
    .header-logo .logo-light {
        display: none;
    }

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

/* Light header pages: show dark logo */
.cart-page-body .header-logo .logo-light,
.checkout-page-body .header-logo .logo-light,
.confirmation-page-body .header-logo .logo-light,
.product-page .header-logo .logo-light {
    display: none;
}

.cart-page-body .header-logo .logo-dark,
.checkout-page-body .header-logo .logo-dark,
.confirmation-page-body .header-logo .logo-dark,
.product-page .header-logo .logo-dark {
    display: block;
}

/* ===========================================
   LIGHT HEADER - Full overrides for checkout/cart/confirmation
   The base header hardcodes #1A1A1A. These overrides
   apply the white header with dark text for these pages.
   =========================================== */

/* Row 1: site-header — white background */
.cart-page-body .site-header,
.checkout-page-body .site-header,
.confirmation-page-body .site-header,
.product-page .site-header {
    background: var(--header-bg) !important;
    border-bottom: none !important;
}

/* Row 2: desktop-nav — white background */
.cart-page-body .desktop-nav,
.checkout-page-body .desktop-nav,
.confirmation-page-body .desktop-nav,
.product-page .desktop-nav {
    background: var(--header-bg) !important;
    border-bottom: none !important;
}

/* Nav links — dark text */
.cart-page-body .nav-link,
.checkout-page-body .nav-link,
.confirmation-page-body .nav-link,
.product-page .nav-link {
    color: var(--header-text) !important;
}

.cart-page-body .nav-link:hover,
.checkout-page-body .nav-link:hover,
.confirmation-page-body .nav-link:hover,
.product-page .nav-link:hover {
    color: var(--header-text-hover) !important;
}

/* Icon buttons — dark */
.cart-page-body .header-icon-btn,
.checkout-page-body .header-icon-btn,
.confirmation-page-body .header-icon-btn,
.product-page .header-icon-btn {
    color: var(--header-text) !important;
}

/* Cart link and count — dark */
.cart-page-body .cart-btn,
.checkout-page-body .cart-btn,
.confirmation-page-body .cart-btn,
.product-page .cart-btn,
.cart-page-body .desktop-cart-link,
.checkout-page-body .desktop-cart-link,
.confirmation-page-body .desktop-cart-link,
.product-page .desktop-cart-link {
    color: var(--header-text) !important;
}

.cart-page-body .cart-count,
.checkout-page-body .cart-count,
.confirmation-page-body .cart-count,
.product-page .cart-count,
.cart-page-body .cart-count-badge,
.checkout-page-body .cart-count-badge,
.confirmation-page-body .cart-count-badge,
.product-page .cart-count-badge,
.cart-page-body .desktop-cart-link .cart-count,
.checkout-page-body .desktop-cart-link .cart-count,
.confirmation-page-body .desktop-cart-link .cart-count,
.product-page .desktop-cart-link .cart-count {
    color: var(--header-text) !important;
}

/* Hide department toggle on checkout/cart/confirmation */
.cart-page-body .header-dept-toggle,
.checkout-page-body .header-dept-toggle,
.confirmation-page-body .header-dept-toggle {
    display: none !important;
}

/* Hide delivery mode selector on checkout/cart/confirmation */
.cart-page-body .delivery-mode-wrapper,
.checkout-page-body .delivery-mode-wrapper,
.confirmation-page-body .delivery-mode-wrapper,
.cart-page-body .delivery-mode-selector,
.checkout-page-body .delivery-mode-selector,
.confirmation-page-body .delivery-mode-selector {
    display: none !important;
}

/* Hide language selector on checkout/cart/confirmation */
.cart-page-body .lang-selector,
.checkout-page-body .lang-selector,
.confirmation-page-body .lang-selector {
    display: none !important;
}

/* Desktop separators — dark on white background */
.cart-page-body .desktop-header-sep,
.checkout-page-body .desktop-header-sep,
.confirmation-page-body .desktop-header-sep,
.product-page .desktop-header-sep {
    background: rgba(26, 26, 26, 0.15) !important;
}

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

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

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

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

/* Desktop search bar — dark border and text for light header */
.cart-page-body .desktop-search-bar,
.checkout-page-body .desktop-search-bar,
.confirmation-page-body .desktop-search-bar,
.product-page .desktop-search-bar {
    border-color: rgba(26, 26, 26, 0.2) !important;
    background: rgba(26, 26, 26, 0.03) !important;
}

.cart-page-body .desktop-search-bar:hover,
.checkout-page-body .desktop-search-bar:hover,
.confirmation-page-body .desktop-search-bar:hover,
.product-page .desktop-search-bar:hover {
    background: rgba(26, 26, 26, 0.06) !important;
    border-color: rgba(26, 26, 26, 0.3) !important;
}

.cart-page-body .desktop-search-bar svg,
.checkout-page-body .desktop-search-bar svg,
.confirmation-page-body .desktop-search-bar svg,
.product-page .desktop-search-bar svg {
    stroke: var(--header-text) !important;
}

.cart-page-body .desktop-search-input,
.checkout-page-body .desktop-search-input,
.confirmation-page-body .desktop-search-input,
.product-page .desktop-search-input {
    color: var(--header-text) !important;
}

.cart-page-body .desktop-search-input::placeholder,
.checkout-page-body .desktop-search-input::placeholder,
.confirmation-page-body .desktop-search-input::placeholder,
.product-page .desktop-search-input::placeholder {
    color: var(--header-text-muted) !important;
}

/* ===========================================
   PRODUCT PAGE — Desktop header 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;
        bottom-margin: 0;
    }
 

}

/* ===========================================
   PRODUCT PAGE — Mobile logo fix
   The mobile-header-logo uses a hardcoded light img src.
   Apply brightness(0) to make the white logo appear black
   on the product page's white header background.
   =========================================== */
.product-page .mobile-header-logo img {
    filter: brightness(0);
}

/* ===========================================
   PRODUCT PAGE — Additional dark overrides
   Items with hardcoded white colors that need
   inverting on the white product page header
   =========================================== */

/* Row 1 dept toggle (WOMEN/MEN) */
.product-page .header-dept-toggle {
    border-color: rgba(26, 26, 26, 0.2) !important;
}

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

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

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

/* Delivery mode pill */
.product-page .delivery-mode-selector {
    background: rgba(26, 26, 26, 0.04) !important;
    border-color: rgba(26, 26, 26, 0.15) !important;
    color: #1A1A1A !important;
}

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

.product-page .delivery-label {
    color: #1A1A1A !important;
}

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

/* Language selector */
.product-page .lang-selector {
    color: #1A1A1A !important;
}

.product-page .lang-label {
    color: #1A1A1A !important;
}

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

/* Currency pill — dark on white header */
.product-page .currency-selector {
    background: rgba(26, 26, 26, 0.04) !important;
    border-color: rgba(26, 26, 26, 0.15) !important;
}

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

.product-page .currency-code {
    color: #1A1A1A !important;
}

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

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

/* Cart count badge */
.product-page .cart-count-badge {
    color: #1A1A1A !important;
}

.product-page .cart-count {
    color: #1A1A1A !important;
}