/**
 * Component: Header
 * Layer: components
 * Version: 2.0.0 (Refactored)
 * 
 * 重构说明：
 * - 纯 data-state 驱动状态样式，移除所有 is-* 类名
 * - 使用 :where() 降低特异性
 * - 选择器层级 ≤ 2
 * - 符合 CSS Layers 开发手册 v2 规范
 */

@layer components {
    /* ==========================================================================
       1) Scope / Boundary - 组件边界
       ========================================================================== */
    
    :where(.site-header) {
        position: sticky;
        top: 0;
        z-index: var(--dh-z-sticky);
        background: var(--dh-white);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    
    :where(.site-header--minimal) {
        position: relative;
        box-shadow: none;
        border-bottom: 1px solid var(--dh-gray-200);
    }
    
    /* ==========================================================================
       2) Structure - Announcement Bar (Promo Banner)
       
       设计：淡紫色渐变背景
       - 从左到右：深蓝紫 → 紫色 → 深紫蓝
       - 文字高亮：金黄色
       - 按钮：白底黑字，圆角
       ========================================================================== */
    
    :where(.site-header) .announcement-bar {
        background: linear-gradient(
            90deg,
            #1e3a5f 0%,
            #2d4a7c 20%,
            #4a3f6b 50%,
            #3d2d6b 80%,
            #1e3a5f 100%
        );
        color: var(--dh-white);
        padding: 12px 0;
        font-size: 14px;
        text-align: center;
        position: relative;
    }
    
    :where(.site-header) .announcement-bar__container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        max-width: var(--dh-container-max);
        margin: 0 auto;
        padding: 0 var(--dh-container-padding);
        padding-right: 50px; /* 为关闭按钮留空间 */
        position: relative;
    }
    
    :where(.site-header) .announcement-bar__content {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    :where(.site-header) .announcement-bar__text {
        color: #ffd54f;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.02em;
    }
    
    :where(.site-header) .announcement-bar__countdown {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--dh-white);
    }
    
    :where(.site-header) .countdown-label {
        opacity: 0.9;
        font-size: 14px;
    }
    
    :where(.site-header) .countdown-timer {
        font-family: var(--dh-font-family-mono);
        font-size: 14px;
        font-weight: 600;
        color: var(--dh-white);
    }
    
    :where(.site-header) .announcement-bar__btn {
        background: var(--dh-white);
        color: var(--dh-black);
        padding: 8px 20px;
        border-radius: 20px;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        transition: all var(--dh-transition-fast);
        border: none;
    }
    
    :where(.site-header) .announcement-bar__btn:hover {
        background: #f5f5f5;
        transform: translateY(-1px);
    }
    
    :where(.site-header) .announcement-bar__close {
        position: absolute;
        right: var(--dh-container-padding);
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        padding: 8px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--dh-transition-fast);
    }
    
    :where(.site-header) .announcement-bar__close:hover {
        color: var(--dh-white);
        background: rgba(255, 255, 255, 0.15);
    }
    
    /* ==========================================================================
       2) Structure - Header Main
       ========================================================================== */
    
    :where(.site-header) .header-main {
        background: var(--dh-white);
        border-bottom: 1px solid var(--dh-gray-200);
        padding: 14px 0;
    }
    
    :where(.site-header) .header-main__container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 32px;
        max-width: var(--dh-container-max);
        margin: 0 auto;
        padding: 0 var(--dh-container-padding);
    }
    
    :where(.site-header) .header-main__logo {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    :where(.site-header) .site-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }
    
    :where(.site-header) .logo-img {
        height: 36px;
        width: auto;
    }
    
    :where(.site-header) .site-logo__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }
    
    :where(.site-header) .site-logo__icon svg {
        width: 32px;
        height: 32px;
    }
    
    :where(.site-header) .site-logo__text {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }
    
    :where(.site-header) .site-logo__name {
        font-size: 22px;
        font-weight: 700;
        color: #0891b2;
    }
    
    :where(.site-header) .site-logo__tagline {
        font-size: 10px;
        font-weight: 600;
        color: #7c3aed;
    }
    
    /* Search */
    :where(.site-header) .header-main__search {
        flex: 1;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
    
    :where(.site-header) .header-search-wrapper {
        display: flex;
        border: 2px solid var(--dh-primary);
        border-radius: 50px;
        overflow: hidden;
        background: var(--dh-white);
        transition: box-shadow var(--dh-transition-fast);
    }
    
    :where(.site-header) .header-search-wrapper:focus-within {
        box-shadow: 0 0 0 3px rgba(var(--dh-primary-rgb), 0.15);
    }
    
    :where(.site-header) .header-search-input {
        flex: 1;
        border: none;
        padding: 12px 20px;
        font-size: 15px;
        outline: none;
        background: transparent;
    }
    
    :where(.site-header) .header-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        background: var(--dh-primary);
        border: none;
        cursor: pointer;
        color: var(--dh-white);
    }
    
    :where(.site-header) .header-search-btn:hover {
        background: var(--dh-primary-dark);
    }
    
    /* Actions */
    :where(.site-header) .header-main__actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    :where(.site-header) .header-main__favorites {
        display: flex;
        color: var(--dh-black);
        padding: 4px;
    }
    
    :where(.site-header) .header-main__favorites:hover {
        color: var(--dh-primary);
    }
    
    :where(.site-header) .header-main__signin {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--dh-black);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
    }
    
    :where(.site-header) .header-main__signin:hover {
        color: var(--dh-gray-600);
    }
    
    /* ==========================================================================
       2) Structure - Primary Navigation
       ========================================================================== */
    
    :where(.site-header) .primary-nav {
        background: var(--dh-white);
        border-bottom: 1px solid var(--dh-gray-200);
    }
    
    :where(.site-header) .primary-nav__container {
        display: flex;
        align-items: center;
        max-width: var(--dh-container-max);
        margin: 0 auto;
        padding: 0 var(--dh-container-padding);
    }
    
    :where(.site-header) .primary-nav__menu {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    :where(.site-header) .primary-nav__item {
        position: relative;
    }
    
    :where(.site-header) .primary-nav__link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 14px 16px;
        color: var(--dh-black);
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: color var(--dh-transition-fast);
    }
    
    :where(.site-header) .primary-nav__link:hover {
        color: var(--dh-primary);
    }
    
    :where(.site-header) .primary-nav__item:first-child .primary-nav__link {
        padding-left: 0;
    }
    
    :where(.site-header) .primary-nav__icon {
        display: inline-flex;
        width: 20px;
        height: 20px;
        opacity: 0.7;
    }
    
    :where(.site-header) .primary-nav__icon svg {
        width: 100%;
        height: 100%;
    }
    
    /* ==========================================================================
       2) Structure - Mega Menu Panel
       ========================================================================== */
    
    :where(.site-header) .mega-menu-panel {
        position: absolute;
        top: 100%;
        left: 0;
        width: var(--dh-mega-menu-width, 760px);
        max-width: calc(100vw - 32px);
        background: var(--dh-white);
        border: 1px solid var(--dh-gray-200);
        border-top: none;
        border-radius: 0 0 var(--dh-radius-lg) var(--dh-radius-lg);
        box-shadow: var(--dh-shadow-lg);
        z-index: var(--dh-z-dropdown);
        /* 默认隐藏 */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--dh-transition-fast), visibility var(--dh-transition-fast), transform var(--dh-transition-fast);
    }
    
    /* ==========================================================================
       2) Structure - Store Dropdown Panel
       ========================================================================== */
    
    :where(.site-header) .store-dropdown-panel {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 280px;
        max-width: 320px;
        background: var(--dh-white);
        border: 1px solid var(--dh-gray-200);
        border-top: none;
        border-radius: 0 0 var(--dh-radius-lg) var(--dh-radius-lg);
        box-shadow: var(--dh-shadow-lg);
        z-index: var(--dh-z-dropdown);
        /* 默认隐藏 */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--dh-transition-fast), visibility var(--dh-transition-fast), transform var(--dh-transition-fast);
    }
    
    :where(.site-header) .store-dropdown__header {
        padding: 14px 16px 10px;
        border-bottom: 1px solid var(--dh-gray-200);
    }
    
    :where(.site-header) .store-dropdown__title {
        font-size: var(--dh-font-sm);
        font-weight: var(--dh-font-semibold);
        color: var(--dh-gray-500);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    
    :where(.site-header) .store-dropdown__list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
        max-height: 400px;
        overflow-y: auto;
    }
    
    :where(.site-header) .store-dropdown__item {
        margin: 0;
    }
    
    :where(.site-header) .store-dropdown__item a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        color: var(--dh-black);
        text-decoration: none;
        transition: background var(--dh-transition-fast);
    }
    
    :where(.site-header) .store-dropdown__item a:hover {
        background: var(--dh-gray-100);
    }
    
    :where(.site-header) .store-dropdown__logo {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        object-fit: cover;
        background: var(--dh-gray-100);
        flex-shrink: 0;
    }
    
    :where(.site-header) .store-dropdown__logo-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        background: var(--dh-gray-100);
        color: var(--dh-gray-500);
        flex-shrink: 0;
    }
    
    :where(.site-header) .store-dropdown__name {
        font-size: var(--dh-font-sm);
        font-weight: var(--dh-font-medium);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    :where(.site-header) .store-dropdown__view-all {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 16px;
        border-top: 1px solid var(--dh-gray-200);
        color: var(--dh-primary);
        font-size: var(--dh-font-sm);
        font-weight: var(--dh-font-semibold);
        text-decoration: none;
        transition: background var(--dh-transition-fast);
    }
    
    :where(.site-header) .store-dropdown__view-all:hover {
        background: var(--dh-gray-100);
    }
    
    :where(.site-header) .mega-menu-container {
        padding: 0 var(--dh-container-padding) 12px;
    }
    
    :where(.site-header) .mega-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
    }
    
    :where(.site-header) .mega-panel-title {
        font-size: var(--dh-font-lg);
        font-weight: var(--dh-font-semibold);
        color: var(--dh-black);
    }
    
    :where(.site-header) .mega-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--dh-gray-500);
        border-radius: var(--dh-radius-md);
    }
    
    :where(.site-header) .mega-close-btn:hover {
        background: var(--dh-gray-100);
        color: var(--dh-black);
    }
    
    :where(.site-header) .mega-columns-wrapper {
        display: grid;
        grid-template-columns: 300px 1fr;
    }
    
    :where(.site-header) .mega-left-col {
        border-right: 1px solid var(--dh-gray-200);
        padding: 12px 0;
    }
    
    :where(.site-header) .subcategory-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    :where(.site-header) .subcategory-item a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        color: var(--dh-primary);
        font-size: var(--dh-font-sm);
        font-weight: var(--dh-font-medium);
        text-decoration: none;
        transition: background var(--dh-transition-fast);
    }
    
    :where(.site-header) .subcategory-item a:hover {
        background: var(--dh-gray-100);
    }
    
    :where(.site-header) .subcategory-arrow {
        opacity: 0.5;
        transition: opacity var(--dh-transition-fast);
    }
    
    :where(.site-header) .subcategory-item:hover .subcategory-arrow {
        opacity: 1;
    }
    
    :where(.site-header) .mega-right-col {
        padding: 12px 20px;
    }
    
    :where(.site-header) .grandchild-list {
        list-style: none;
        margin: 0;
        padding: 0;
        /* 默认隐藏 - 使用 display:none 确保完全隐藏 */
        display: none;
        flex-direction: column;
        gap: 4px;
    }
    
    :where(.site-header) .grandchild-item a {
        display: block;
        padding: 6px 10px;
        color: var(--dh-primary);
        font-size: var(--dh-font-sm);
        text-decoration: none;
        border-radius: var(--dh-radius-md);
    }
    
    :where(.site-header) .grandchild-item a:hover {
        background: var(--dh-gray-100);
    }
    
    /* ==========================================================================
       4) States - Header Scroll (data-state 驱动)
       ========================================================================== */
    
    /* Header 滚动后添加阴影 */
    :where(.site-header)[data-scrolled="true"] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
    
    /* Header 隐藏状态（向下滚动时） */
    :where(.site-header)[data-state="hidden"] {
        transform: translateY(-100%);
        transition: transform 0.3s ease;
    }
    
    /* ==========================================================================
       4) States - Announcement Bar (Promo Banner)
       ========================================================================== */
    
    /* Promo Bar 隐藏状态 */
    :where(.site-header) .announcement-bar[data-state="hidden"] {
        display: none;
    }
    
    /* Promo Bar 可见状态（默认） */
    :where(.site-header) .announcement-bar[data-state="visible"] {
        display: block;
    }
    
    /* ==========================================================================
       4) States - Mega Menu (纯 data-state 驱动)
       ========================================================================== */
    
    /* Mega Menu Panel 打开状态 */
    :where(.site-header) .mega-menu-panel[data-state="open"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    
    /* ==========================================================================
       4) States - Store Dropdown (纯 data-state 驱动)
       ========================================================================== */
    
    /* Store Dropdown Panel 打开状态 */
    :where(.site-header) .store-dropdown-panel[data-state="open"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    
    /* Subcategory 激活状态 */
    :where(.site-header) .subcategory-item[data-state="active"] a {
        background: var(--dh-gray-100);
        color: var(--dh-primary-dark);
    }
    
    :where(.site-header) .subcategory-item[data-state="active"] .subcategory-arrow {
        opacity: 1;
    }
    
    /* Grandchild List 可见状态 */
    :where(.site-header) .grandchild-list[data-state="visible"] {
        display: flex;
    }
    
    /* ==========================================================================
       2) Structure - Mobile Header
       ========================================================================== */
    
    :where(.site-header) .mobile-header {
        display: none;
        background: var(--dh-white);
        border-bottom: 1px solid var(--dh-gray-200);
        padding: 12px 0;
    }
    
    :where(.site-header) .mobile-header__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: var(--dh-container-max);
        margin: 0 auto;
        padding: 0 var(--dh-container-padding);
    }
    
    :where(.site-header) .mobile-header__logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        color: var(--dh-black);
        font-weight: 600;
    }
    
    :where(.site-header) .mobile-header__logo img {
        height: 28px;
        width: auto;
    }
    
    :where(.site-header) .mobile-header__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: 1px solid var(--dh-gray-200);
        border-radius: 8px;
        color: var(--dh-black);
        cursor: pointer;
    }
    
    :where(.site-header) .mobile-header__toggle:hover {
        background: var(--dh-gray-100);
    }
    
    /* ==========================================================================
       2) Structure - Mobile Navigation Panel
       ========================================================================== */
    
    :where(.site-header) .mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 100%;
        height: 100vh;
        background: var(--dh-white);
        z-index: 2000;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }
    
    :where(.site-header) .mobile-nav__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid var(--dh-gray-200);
    }
    
    :where(.site-header) .mobile-nav__title {
        font-size: 16px;
        font-weight: 600;
        color: var(--dh-black);
    }
    
    :where(.site-header) .mobile-nav__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--dh-gray-500);
        border-radius: 50%;
    }
    
    :where(.site-header) .mobile-nav__close:hover {
        background: var(--dh-gray-100);
        color: var(--dh-black);
    }
    
    :where(.site-header) .mobile-nav__content {
        flex: 1;
        overflow-y: auto;
        padding: 16px 20px;
    }
    
    :where(.site-header) .mobile-nav__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    :where(.site-header) .mobile-nav__list li a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
        color: var(--dh-black);
        text-decoration: none;
        border-bottom: 1px solid var(--dh-gray-200);
        font-size: 15px;
        font-weight: 500;
    }
    
    :where(.site-header) .mobile-nav__list li a:hover {
        color: var(--dh-primary);
    }
    
    :where(.site-header) .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
    }
    
    /* ==========================================================================
       4) States - Mobile Navigation (纯 data-state 驱动)
       ========================================================================== */
    
    :where(.site-header) .mobile-nav[data-state="open"] {
        right: 0;
    }
    
    :where(.site-header) .mobile-overlay[data-state="visible"] {
        opacity: 1;
        visibility: visible;
    }
    
    /* ==========================================================================
       6) Responsive
       ========================================================================== */
    
    @media (min-width: 1200px) {
        :where(.site-header) .primary-nav__link {
            padding: 16px 20px;
        }
        
        :where(.site-header) .header-main__search {
            max-width: 650px;
        }
    }
    
    @media (max-width: 1199px) {
        :where(.site-header) .header-main__container {
            gap: 24px;
        }
        
        :where(.site-header) .header-main__search {
            max-width: 480px;
        }
        
        :where(.site-header) .primary-nav__link {
            padding: 12px 14px;
            font-size: 13px;
        }
        
        :where(.site-header) .mega-columns-wrapper {
            grid-template-columns: 260px 1fr;
        }
    }
    
    @media (max-width: 991px) {
        :where(.site-header) .header-main {
            display: none;
        }
        
        :where(.site-header) .primary-nav {
            display: none;
        }
        
        :where(.site-header) .mobile-header {
            display: block;
        }
        
        :where(.site-header) .mega-menu-panel {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }
        
        :where(.site-header) .store-dropdown-panel {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }
    }
    
    @media (max-width: 767px) {
        :where(.site-header) .mobile-nav {
            width: 100%;
        }
        
        :where(.site-header) .announcement-bar {
            padding: 10px 0;
        }
        
        :where(.site-header) .announcement-bar__container {
            padding-right: 40px;
        }
        
        :where(.site-header) .announcement-bar__content {
            gap: 8px 12px;
        }
        
        :where(.site-header) .announcement-bar__text {
            font-size: 12px;
        }
        
        :where(.site-header) .announcement-bar__btn {
            padding: 6px 14px;
            font-size: 12px;
        }
        
        :where(.site-header) .announcement-bar__countdown {
            display: none;
        }
        
        :where(.site-header) .announcement-bar__btn {
            padding: 6px 14px;
            font-size: 12px;
        }
    }
    
    /* ==========================================================================
       Accessibility
       ========================================================================== */
    
    :where(.site-header) .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: var(--dh-primary);
        color: var(--dh-white);
        padding: 8px 16px;
        z-index: 9999;
        transition: top 0.3s;
    }
    
    :where(.site-header) .skip-link:focus {
        top: 0;
    }
    
    :where(.site-header) .primary-nav__link:focus-visible {
        outline: 2px solid var(--dh-primary);
        outline-offset: 2px;
    }
    
    /* ==========================================================================
       Print Styles
       ========================================================================== */
    
    @media print {
        .site-header,
        .mobile-nav,
        .mobile-overlay {
            display: none;
        }
    }
}