/* ============================================
   MEGA MENU — CMILO Shop 下拉样式
   顶级导航：Home | Shop ▾ | Sets | About | Contact
   Shop 下拉：护肤 / 护发 / 彩妆(SOON) / 饰品(SOON) / 全部产品
   ============================================ */

/* Max Mega Menu 导航栏基础覆盖 */
#mega-menu-wrap-primary {
    background: var(--c-primary);
}
#mega-menu-wrap-primary .mega-menu-toggle {
    background: var(--c-primary);
}
.mega-menu-wrap #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    color: var(--c-text-light);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    transition: color var(--transition);
}
.mega-menu-wrap #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
.mega-menu-wrap #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    color: var(--c-accent);
    background: transparent;
}

/* Mega 面板 */
.mega-menu-wrap #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #fff;
    border-top: 3px solid var(--c-accent);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 30px 40px;
    max-width: 100vw;
}

/* ─── Shop 下拉布局 ─── */
.mega-menu-wrap .cmilo-mega-shop {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* 每个分类组 */
.mega-menu-wrap .cmilo-mega-group {
    display: flex;
    flex-direction: column;
}

/* 组标题（分类名） */
.mega-menu-wrap .cmilo-mega-group-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-primary);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--c-accent);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mega-menu-wrap .cmilo-mega-group-title a {
    color: var(--c-primary);
}
.mega-menu-wrap .cmilo-mega-group-title a:hover {
    color: var(--c-accent);
}

/* 子分类链接 */
.mega-menu-wrap .cmilo-mega-group > a {
    display: block;
    padding: 7px 0;
    font-size: 14px;
    color: var(--c-text-dark);
    transition: color var(--transition), padding-left var(--transition);
    font-family: var(--font-body);
}
.mega-menu-wrap .cmilo-mega-group > a:hover {
    color: var(--c-accent);
    padding-left: 4px;
}

/* ─── COMING SOON 样式 ─── */
.mega-menu-wrap .cmilo-coming-soon .cmilo-mega-group-title a {
    color: #bbb;
}
.mega-menu-wrap .cmilo-coming-soon .cmilo-mega-group-title a:hover {
    color: #999;
}

.mega-menu-wrap .cmilo-soon-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    background: var(--c-accent);
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1.4;
}

.mega-menu-wrap .cmilo-soon-link {
    color: #ccc !important;
    cursor: default;
    position: relative;
}
.mega-menu-wrap .cmilo-soon-link:hover {
    color: #bbb !important;
    padding-left: 0;
}

/* ─── 分隔线 ─── */
.mega-menu-wrap .cmilo-mega-divider {
    display: none; /* 桌面4列不需要分隔线，移动端时显示 */
}

/* ─── 查看全部产品 ─── */
.mega-menu-wrap .cmilo-mega-viewall {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 0;
    transition: letter-spacing var(--transition);
}
.mega-menu-wrap .cmilo-mega-viewall:hover {
    letter-spacing: 2px;
    color: var(--c-primary);
}

/* ─── 移动端适配 ─── */
@media (max-width: 768px) {
    .mega-menu-wrap #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu {
        padding: 20px;
    }
    .mega-menu-wrap .cmilo-mega-shop {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .mega-menu-wrap .cmilo-mega-divider {
        display: block;
        grid-column: 1 / -1;
        height: 1px;
        background: var(--c-border);
        margin: 8px 0;
    }
}

@media (max-width: 480px) {
    .mega-menu-wrap .cmilo-mega-shop {
        grid-template-columns: 1fr;
    }
}