/**
 * Neo Theme v2 - Light & Modern E-Commerce UI
 * 亮色系 + 左侧边栏布局
 * 仅通过 CSS 层覆盖与结构重排，不依赖任何后端模板改动
 */

/* =====================================================
   0. FONTS & ROOT VARIABLES
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Light palette */
    --neo-bg: #f6f7fb;
    --neo-bg-2: #eef1f8;
    --neo-surface: #ffffff;
    --neo-surface-2: #fafbfe;
    --neo-surface-3: #f2f4fa;

    --neo-border: rgba(99, 102, 241, 0.10);
    --neo-border-strong: rgba(99, 102, 241, 0.22);
    --neo-border-soft: rgba(15, 23, 42, 0.06);

    --neo-accent: #6366f1;
    --neo-accent-hover: #7c3aed;
    --neo-accent-soft: rgba(99, 102, 241, 0.10);
    --neo-accent-softer: rgba(99, 102, 241, 0.05);
    --neo-pink: #ec4899;
    --neo-pink-soft: rgba(236, 72, 153, 0.10);
    --neo-green: #10b981;
    --neo-amber: #f59e0b;

    --neo-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --neo-gradient-soft: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    --neo-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    --neo-gradient-cool: linear-gradient(135deg, #60a5fa 0%, #34d399 100%);

    --neo-text: #0f172a;
    --neo-text-secondary: #475569;
    --neo-text-muted: #94a3b8;
    --neo-text-inverse: #ffffff;

    --neo-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --neo-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --neo-shadow-md: 0 6px 24px rgba(99, 102, 241, 0.08);
    --neo-shadow-lg: 0 20px 50px rgba(99, 102, 241, 0.14);
    --neo-glow: 0 0 0 4px rgba(99, 102, 241, 0.12);

    --neo-radius-xs: 6px;
    --neo-radius-sm: 10px;
    --neo-radius: 14px;
    --neo-radius-lg: 20px;
    --neo-radius-xl: 28px;

    --neo-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --neo-font: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;

    --neo-sidebar-w: 360px;
    --neo-topbar-h: 36px;
}

/* 响应式侧边栏宽度 */
@media (max-width: 1600px) {
    :root {
        --neo-sidebar-w: 340px;
    }
}

@media (max-width: 1440px) {
    :root {
        --neo-sidebar-w: 320px;
    }
}

@media (max-width: 1280px) {
    :root {
        --neo-sidebar-w: 300px;
    }
}

@media (max-width: 1100px) {
    :root {
        --neo-sidebar-w: 280px;
    }
}

@media (max-width: 900px) {
    :root {
        --neo-sidebar-w: 260px;
    }
}

/* =====================================================
   0b. OVERRIDE SHOPXO CSS VARIABLES (keep logic intact)
   ===================================================== */
:root {
    --color-main: #6366f1 !important;
    --color-main-hover: #7c3aed !important;
    --color-main-light: rgba(99, 102, 241, 0.10) !important;
    --color-price: #ec4899 !important;
    --body-bg-color: #f6f7fb !important;
    --border-radius: 14px !important;
    --border-radius-sm: 10px !important;
    --border-radius-lg: 20px !important;
    --html-body-size: 10 !important;

    --color-button-primary: #6366f1 !important;
    --color-button-primary-hover: #7c3aed !important;
    --color-button-primary-text: #ffffff !important;
    --color-button-primary-hover-text: #ffffff !important;
    --color-button-primary-border: #6366f1 !important;
    --color-button-primary-hover-border: #7c3aed !important;
    --color-button-primary-focus: #6366f1 !important;
    --color-button-primary-focus-text: #ffffff !important;
    --color-button-primary-focus-border: #6366f1 !important;
    --color-button-primary-active: #4f46e5 !important;
    --color-button-primary-active-text: #ffffff !important;
    --color-button-primary-active-border: #4f46e5 !important;
    --color-button-primary-disabled: #c7d2fe !important;
    --color-button-primary-disabled-text: #ffffff !important;
    --color-button-primary-disabled-border: #c7d2fe !important;

    --color-button-warning: #ec4899 !important;
    --color-button-warning-hover: #db2777 !important;
    --color-button-warning-text: #ffffff !important;
    --color-button-warning-hover-text: #ffffff !important;
    --color-button-warning-border: #ec4899 !important;
    --color-button-warning-hover-border: #db2777 !important;
    --color-button-warning-focus: #ec4899 !important;
    --color-button-warning-focus-text: #ffffff !important;
    --color-button-warning-focus-border: #ec4899 !important;
    --color-button-warning-active: #be185d !important;
    --color-button-warning-active-text: #ffffff !important;
    --color-button-warning-active-border: #be185d !important;
    --color-button-warning-disabled: #fbcfe8 !important;
    --color-button-warning-disabled-text: #ffffff !important;
    --color-button-warning-disabled-border: #fbcfe8 !important;
}

/* =====================================================
   1. GLOBAL RESETS & BASE
   ===================================================== */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--neo-bg) !important;
    color: var(--neo-text) !important;
    font-family: var(--neo-font) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Soft radial accents on the background for depth */
body::before {
    content: '';
    position: fixed;
    top: -10%; left: -10%;
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.10) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
body::after {
    content: '';
    position: fixed;
    bottom: -15%; right: -10%;
    width: 55%; height: 55%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

div, span, p, a, li, td, th, label, input, textarea, select, button, h1, h2, h3, h4, h5, h6 {
    font-family: var(--neo-font) !important;
}

a {
    color: var(--neo-text) !important;
    text-decoration: none !important;
    transition: var(--neo-transition);
}
a:hover, a:focus {
    color: var(--neo-accent) !important;
    text-decoration: none !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--neo-surface-3); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c7d2fe, #ddd6fe);
    border-radius: 10px;
    border: 2px solid var(--neo-surface-3);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a5b4fc, #c4b5fd); }

/* Layout containers */
.body-content-container,
.body-content-formal-container {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Shift main content to the right of the fixed sidebar (desktop) */
@media (min-width: 1024px) {
    .body-content-formal-container {
        padding-left: var(--neo-sidebar-w) !important;
        min-height: 100vh;
    }
}

/* Goods Category - 全部分类菜单样式 (全局可访问) */
@media (min-width: 1024px) {
    #goods-category {
        display: none !important;
    }
}

.goods-category-s {
    position: relative !important;
    z-index: 9999 !important;
    margin: 0 !important;
}

.goods-category-title,
.all-goods {
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
    z-index: 9999 !important;
    cursor: pointer;
    display: none !important;
}

.category-content {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    z-index: 99999 !important;
    background: #fff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    display: block !important;
    width: 265px !important;
}

.nav-search {
    margin-bottom: 60px !important;
}

/* Goods Category - 响应式适配 */
@media (min-width: 1024px) and (max-width: 1600px) {
    #goods-category {
        transform: translate(calc(var(--neo-sidebar-w) + 40px), 110px) !important;
    }
    .category-content {
        width: 250px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    #goods-category {
        transform: translate(calc(var(--neo-sidebar-w) + 40px), 100px) !important;
    }
    .category-content {
        width: 240px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    #goods-category {
        transform: translate(calc(var(--neo-sidebar-w) + 40px), 100px) !important;
    }
    .category-content {
        width: 220px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1100px) {
    #goods-category {
        transform: translate(calc(var(--neo-sidebar-w) + 40px), 95px) !important;
    }
    .category-content {
        width: 200px !important;
    }
}

@media (max-width: 900px) {
    #goods-category {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 20px 0 !important;
    }
    .category-content {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
    }
}

/* Container tweaks to breathe nicely */
.am-container {
    max-width: 1600px !important;
    padding-left: 40px !important;
    padding-right: 24px !important;
}

/* =====================================================
   2. ANNOUNCEMENT BAR (bright)
   ===================================================== */
.neo-announcement-bar {
    background: var(--neo-gradient-soft);
    border-bottom: 1px solid var(--neo-border);
    text-align: center;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}
.neo-announcement-bar::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: neo-announcement-shimmer 5s infinite;
}
@keyframes neo-announcement-shimmer {
    0% { left: -50%; }
    100% { left: 150%; }
}
.neo-announcement-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--neo-text-secondary);
    letter-spacing: 0.3px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}
.neo-announcement-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--neo-accent);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
    animation: neo-dot-pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes neo-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.neo-announcement-sep { color: var(--neo-text-muted); }

/* =====================================================
   3. TOP NAV (header_top_nav.html) - compact utility row
   ===================================================== */
.header-top {
    background: var(--neo-surface) !important;
    border-bottom: 1px solid var(--neo-border-soft) !important;
    color: var(--neo-text-secondary) !important;
    min-height: var(--neo-topbar-h) !important;
    height: auto !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    overflow: visible !important;
    box-shadow: var(--neo-shadow-xs);
    z-index: 9999 !important;
    position: relative;
}
/* Override Amaze UI float layout - use flex for the top row */
.header-top .header,
.header-top > .am-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    min-height: 36px;
    height: auto !important;
    padding: 8px 24px !important;
    box-sizing: border-box !important;
}
.header-top .top-nav-left,
.header-top .top-nav {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    white-space: nowrap !important;
}
.header-top .top-nav-left { flex: 0 1 auto; min-width: 0; display: none !important; }
.header-top .top-nav { flex: 0 0 auto; gap: 22px; }
.header-top .top-nav-items,
.header-top .top-nav-items .menu-hd {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-top .top-nav-left em,
.header-top .top-nav-left a {
    display: inline !important;
    white-space: nowrap !important;
}
.header-top .top-nav-left em.first { color: var(--neo-text-secondary) !important; }
.header-top .top-nav-left em.site-name {
    color: var(--neo-accent) !important;
    font-weight: 600 !important;
    margin: 0 4px;
}
.header-top .top-nav-left a,
.header-top .top-nav a { color: var(--neo-text-secondary) !important; }
.header-top .top-nav-left a:hover,
.header-top .top-nav a:hover { color: var(--neo-accent) !important; }
.header-top .top-nav > li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
.header-top .top-nav > li > a {
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    white-space: nowrap !important;
}
.header-top .top-nav > li > a > i { color: var(--neo-accent) !important; }

/* Hide less essential top-nav items on narrower layouts so nothing is cut off */
@media (max-width: 1280px) {
    .header-top .top-nav { gap: 16px; }
    .header-top .top-nav > li:nth-child(n+4) { display: none !important; }
}
@media (max-width: 1120px) {
    .header-top .top-nav > li:nth-child(n+3) { display: none !important; }
}

/* =====================================================
   4. SEARCH + LOGO ROW (nav_search.html)
   ===================================================== */
.nav-search,
.nav-search.white {
    background: var(--neo-surface) !important;
    border: none !important;
    padding: 24px 0 !important;
    box-shadow: var(--neo-shadow-xs);
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
}
.neo-search-container {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 32px;
    min-width: 0;
}
.neo-logo-wrap {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 220px;
}
.neo-logo-link {
    display: inline-flex;
    align-items: center;
}
.logo-big img,
.neo-logo-link img {
    max-height: 48px;
    max-width: 200px;
    width: auto;
    height: auto;
    filter: none;
}

.search-bar {
    flex: 1 1 auto;
    min-width: 280px;
    max-width: 640px;
    position: relative;
}
.search-bar form { width: 100%; margin: 0; padding: 0; }
.search-group {
    background: var(--neo-surface-3) !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: var(--neo-transition);
    position: relative;
    width: 100% !important;
    display: block;
    overflow: visible;
}
.search-group:focus-within {
    background: var(--neo-surface) !important;
    border-color: var(--neo-accent) !important;
    box-shadow: var(--neo-glow) !important;
}
.search-group::before {
    content: '\1F50D';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neo-text-muted);
    font-size: 15px;
    pointer-events: none;
}
#search-input,
.search-group input[type="text"] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 120px 0 48px !important;
    margin: 0 !important;
    color: var(--neo-text) !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    display: block !important;
}
#search-input::placeholder { color: var(--neo-text-muted) !important; }

.search-group .submit,
.search-group button[type="submit"],
.nav-search .search-group .am-btn-primary {
    background: var(--neo-gradient) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    height: 40px !important;
    line-height: 40px !important;
    min-width: 96px;
    width: auto !important;
    padding: 0 22px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 1px;
    cursor: pointer;
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    bottom: auto !important;
    transform: none !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28) !important;
    transition: background 0.25s, box-shadow 0.25s, filter 0.25s !important;
    z-index: 2;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
.search-group .submit > span,
.search-group button[type="submit"] > span {
    display: inline-block;
    line-height: 1 !important;
    color: inherit !important;
    background: transparent !important;
    white-space: nowrap !important;
}
.search-group .submit:hover,
.search-group button[type="submit"]:hover {
    transform: none !important;
    filter: brightness(1.08);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.38) !important;
}

.search-hot-keywords {
    padding: 0 !important;
    margin: 10px 0 0 16px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 12px;
    list-style: none !important;
}
.search-hot-keywords li { margin: 0 !important; padding: 0 !important; }
.search-hot-keywords a {
    color: var(--neo-text-muted) !important;
    font-size: 12px !important;
    padding: 2px 10px;
    border-radius: 999px;
    transition: var(--neo-transition);
}
.search-hot-keywords a:hover {
    color: var(--neo-accent) !important;
    background: var(--neo-accent-soft);
}

/* =====================================================
   5. LEFT SIDEBAR
   真实模板: header.am-topbar.shop-navigation
   ===================================================== */

/* ── 5a. 固定左侧边栏容器 ── */
header.shop-navigation,
header.am-topbar.shop-navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--neo-sidebar-w) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background: var(--neo-surface) !important;
    border-right: 1px solid var(--neo-border-soft) !important;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.04) !important;
    z-index: 800 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
}

/* 品牌标识 - 去掉伪元素 */
header.shop-navigation::before {
    display: none !important;
}

/* Logo 区域样式 */
.sidebar-logo-container {
    flex-shrink: 0;
    padding: 20px 24px;
    border-bottom: 1px solid var(--neo-border-soft);
    margin-bottom: 10px;
    text-align: center;
}

.sidebar-logo-link {
    display: inline-block;
}

.sidebar-logo {
    max-height: 70px;
    max-width: 280px;
    width: auto;
    height: auto;
}

/* 隐藏原来搜索区域的logo */
.neo-search-wrapper .neo-logo-wrap,
.neo-search-wrapper .logo-big {
    display: none !important;
}

/* 底部版权 */
header.shop-navigation::after {
    content: '© 时尚潮流 · Neo v2';
    display: block;
    margin-top: auto;
    flex-shrink: 0;
    padding: 14px 24px;
    font-size: 11px;
    color: var(--neo-text-muted);
    border-top: 1px solid var(--neo-border-soft);
    background: var(--neo-surface);
    letter-spacing: 0.5px;
    position: sticky;
    bottom: 0;
}

/* ── 5b. 重置 Amaze UI topbar 内部 .am-container ── */
header.shop-navigation > .am-container {
    max-width: var(--neo-sidebar-w) !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0;
}

/* ── 5c. 隐藏手机端专用元素 ── */
header.shop-navigation .am-topbar-toggle,
header.shop-navigation .am-topbar-btn,
header.shop-navigation .am-show-sm-only,
header.shop-navigation .am-topbar-form,
header.shop-navigation .navigation-search,
header.shop-navigation .goods-category-title.am-hide-sm-only,
header.shop-navigation .am-show-md-only,
header.shop-navigation .navigation-button { display: none !important; }

/* ── 5d. 强制展开 Amaze UI 折叠面板 ── */
header.shop-navigation .am-collapse.am-topbar-collapse,
header.shop-navigation #doc-topbar-collapse {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── 5e. 导航列表：垂直排列 ── */
header.shop-navigation .am-nav.am-topbar-nav,
header.shop-navigation ul.am-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    float: none !important;
    flex: 1;
}

/* ── 5f. 每个菜单项 ── */
header.shop-navigation .am-nav > li,
header.shop-navigation .am-topbar-nav > li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── 5g. 链接样式 ── */
header.shop-navigation .am-nav > li > a,
header.shop-navigation .am-topbar-nav > li > a,
header.shop-navigation .am-nav > li > a.am-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    color: var(--neo-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 27px !important;
    line-height: 1.6 !important;
    transition: var(--neo-transition) !important;
    background: transparent !important;
    border: none !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
header.shop-navigation .am-nav > li > a::before,
header.shop-navigation .am-topbar-nav > li > a::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--neo-text-muted);
    opacity: 0.35;
    flex-shrink: 0;
    transition: var(--neo-transition);
}

/* Hover 效果 */
header.shop-navigation .am-nav > li > a:hover,
header.shop-navigation .am-topbar-nav > li > a:hover {
    background: var(--neo-accent-softer) !important;
    color: var(--neo-accent) !important;
    transform: translateX(3px) !important;
}
header.shop-navigation .am-nav > li > a:hover::before {
    background: var(--neo-accent);
    opacity: 1;
}

/* 激活项 */
header.shop-navigation .am-nav > li > a.active,
header.shop-navigation .am-topbar-nav > li > a.active,
header.shop-navigation .am-nav > li.am-active > a {
    background: var(--neo-gradient) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.26) !important;
    transform: none !important;
    font-weight: 600 !important;
}
header.shop-navigation .am-nav > li > a.active::before,
header.shop-navigation .am-topbar-nav > li > a.active::before {
    background: #fff;
    opacity: 0.9;
}

/* 下拉菜单子项 */
header.shop-navigation .am-dropdown-content {
    position: static !important;
    display: none;
    background: var(--neo-surface-2) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 4px 14px !important;
    padding: 6px 0 !important;
}
header.shop-navigation .am-dropdown.am-active > .am-dropdown-content,
header.shop-navigation .am-open > .am-dropdown-content {
    display: block !important;
}
header.shop-navigation .am-dropdown-content > li > a {
    font-size: 26px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    color: var(--neo-text-secondary) !important;
    display: block !important;
}
header.shop-navigation .am-dropdown-content > li > a:hover {
    color: var(--neo-accent) !important;
    background: var(--neo-accent-softer) !important;
}

/* 隐藏下拉箭头图标 */
header.shop-navigation .am-icon-caret-down { color: var(--neo-text-muted) !important; margin-left: auto; }

/* ── 5h. 内容区整体右移 240px ── */
@media (min-width: 1024px) {
    .body-content-formal-container {
        padding-left: var(--neo-sidebar-w) !important;
        box-sizing: border-box;
    }
    /* 防止 goods-category 和 banner 也跑进侧边栏固定位置 */
    #goods-category,
    .index-banner,
    .home-banner,
    .slideall,
    .neo-announcement-bar,
    .header-top,
    .nav-search,
    .neo-footer-trust,
    footer.am-footer {
        position: relative;
        z-index: 1;
    }
}

/* ── 5i. 手机端回退为横向条 ── */
@media (max-width: 1023px) {
    header.shop-navigation,
    header.am-topbar.shop-navigation {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
        border-right: none !important;
        border-bottom: 1px solid var(--neo-border-soft) !important;
        overflow: visible !important;
        flex-direction: row !important;
    }
    header.shop-navigation::before,
    header.shop-navigation::after { display: none !important; }
    header.shop-navigation > .am-container {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        padding: 0 16px !important;
    }
    header.shop-navigation .am-collapse.am-topbar-collapse { flex-direction: row !important; }
    header.shop-navigation .am-nav.am-topbar-nav { flex-direction: row !important; gap: 4px !important; }
    header.shop-navigation .am-nav > li { width: auto !important; display: inline-flex !important; }
    header.shop-navigation .am-topbar-toggle { display: inline-flex !important; }
    .body-content-formal-container { padding-left: 0 !important; }
}

/* =====================================================
   6. GOODS CATEGORY (home dropdown / megamenu)
   ===================================================== */
.am-container .category-nav-wrapper,
.index-goods-category,
.nav-category {
    background: var(--neo-surface) !important;
    border-radius: var(--neo-radius-lg) !important;
    border: 1px solid var(--neo-border-soft) !important;
    box-shadow: var(--neo-shadow-sm);
    overflow: hidden;
}

/* =====================================================
   7. BANNER / SWIPER
   ===================================================== */
.home-banner, .index-banner, .banner-container, .slideall {
    border-radius: var(--neo-radius-lg) !important;
    overflow: hidden;
    margin: 24px auto !important;
}
.banner-mixed {
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-border-soft) !important;
    box-shadow: var(--neo-shadow-sm);
    padding: 16px !important;
}
.swiper-pagination-bullet {
    background: var(--neo-text-muted) !important;
    opacity: 0.45 !important;
}
.swiper-pagination-bullet-active {
    background: var(--neo-accent) !important;
    opacity: 1 !important;
    width: 24px !important;
    border-radius: 4px !important;
    transition: var(--neo-transition);
}

/* =====================================================
   8. SECTION TITLES
   ===================================================== */
.index-title,
.home-title,
.page-title,
.common-title {
    text-align: center;
    padding: 40px 0 20px;
    color: var(--neo-text);
    position: relative;
}
.index-title h2,
.home-title h2,
.page-title h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: var(--neo-text) !important;
    letter-spacing: 1px;
}
.index-title h2::after,
.home-title h2::after {
    content: '';
    display: block;
    width: 48px; height: 3px;
    background: var(--neo-gradient);
    border-radius: 3px;
    margin: 12px auto 0;
}

/* =====================================================
   9. PRODUCT CARD / GOODS GRID
   ===================================================== */
.goods-item,
.goods-items,
.base-card,
.item-list > li,
.grid-item-list > li,
.category-goods .goods {
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-border-soft) !important;
    border-radius: var(--neo-radius) !important;
    overflow: hidden;
    transition: var(--neo-transition);
    position: relative;
    box-shadow: var(--neo-shadow-xs);
}
.goods-item:hover,
.goods-items:hover,
.base-card:hover,
.item-list > li:hover,
.grid-item-list > li:hover,
.category-goods .goods:hover {
    transform: translateY(-6px);
    border-color: var(--neo-border-strong) !important;
    box-shadow: var(--neo-shadow-lg);
}

.goods-item .am-list-thumb,
.goods-item .goods-image,
.goods-images,
.goods-item img.goods-img {
    overflow: hidden;
    background: var(--neo-surface-3);
}
.goods-item .am-list-thumb img,
.goods-item .goods-image img,
.goods-item img.goods-img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.goods-item:hover .am-list-thumb img,
.goods-item:hover .goods-image img,
.goods-item:hover img.goods-img {
    transform: scale(1.07);
}

.goods-item .goods-name,
.goods-item .am-list-item-hd,
.goods-item h3,
.goods-item .title {
    color: var(--neo-text) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
.goods-item .goods-price,
.goods-item .price,
.goods-price {
    color: var(--neo-pink) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}
.goods-item .original-price,
.goods-item .price-old,
.original-price {
    color: var(--neo-text-muted) !important;
    text-decoration: line-through;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Tags / labels inside card */
.goods-item .tag,
.goods-item .label,
.goods-item .new-tag {
    background: var(--neo-gradient) !important;
    color: #fff !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.22);
}

/* =====================================================
   10. BUTTONS
   ===================================================== */
.am-btn-primary,
button.am-btn-primary,
a.am-btn-primary,
.btn-primary {
    background: var(--neo-gradient) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    padding: 10px 20px !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.22);
    transition: var(--neo-transition);
}
.am-btn-primary:hover,
a.am-btn-primary:hover,
button.am-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.32) !important;
    color: #fff !important;
}
.am-btn-warning,
button.am-btn-warning,
a.am-btn-warning {
    background: var(--neo-gradient-warm) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.22);
    transition: var(--neo-transition);
}
.am-btn-warning:hover,
a.am-btn-warning:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(236, 72, 153, 0.32) !important; color: #fff !important; }

.am-btn-secondary, .am-btn-default {
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-border) !important;
    color: var(--neo-text) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: var(--neo-transition);
}
.am-btn-secondary:hover, .am-btn-default:hover {
    border-color: var(--neo-accent) !important;
    color: var(--neo-accent) !important;
}

/* =====================================================
   11. FOOTER TRUST BAR
   ===================================================== */
.neo-footer-trust {
    background: var(--neo-surface) !important;
    border-top: 1px solid var(--neo-border-soft);
    border-bottom: none;
    padding: 28px 0;
    margin-top: 60px;
}
.neo-trust-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.neo-trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    border-radius: var(--neo-radius);
    transition: var(--neo-transition);
}
.neo-trust-item:hover {
    background: var(--neo-accent-softer);
    transform: translateY(-2px);
}
.neo-trust-item + .neo-trust-item { border-left: 1px dashed var(--neo-border); }
.neo-trust-icon {
    font-size: 30px !important;
    color: var(--neo-accent) !important;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.25));
}
.neo-trust-item div { display: flex; flex-direction: column; }
.neo-trust-item strong {
    color: var(--neo-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4;
}
.neo-trust-item span {
    color: var(--neo-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.4;
}

/* =====================================================
   12. FOOTER
   ===================================================== */
.am-footer, .neo-footer, footer.am-footer-default {
    background: var(--neo-surface) !important;
    color: var(--neo-text-secondary) !important;
    border-top: 1px solid var(--neo-border-soft) !important;
    padding: 44px 0 0 !important;
    margin-top: 20px !important;
}
.am-footer .footer-nav-content { padding: 0 24px !important; }
.footer-nav-title {
    color: var(--neo-text) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin-bottom: 14px !important;
    position: relative;
    padding-bottom: 8px;
}
.footer-nav-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 24px; height: 2px;
    background: var(--neo-gradient);
    border-radius: 2px;
}
.footer-nav-list a,
.footer-about a {
    color: var(--neo-text-secondary) !important;
    font-size: 13px !important;
    transition: var(--neo-transition);
}
.footer-nav-list a:hover,
.footer-about a:hover {
    color: var(--neo-accent) !important;
    padding-left: 4px;
}
.footer-nav-list p {
    margin-bottom: 8px !important;
    font-size: 13px !important;
}
.footer-about li {
    color: var(--neo-text-secondary) !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
}
.footer-about .iconfont {
    color: var(--neo-accent) !important;
    margin-right: 8px;
}

.am-footer-miscs {
    background: var(--neo-surface-2) !important;
    border-top: 1px solid var(--neo-border-soft) !important;
    padding: 20px 0 !important;
    margin-top: 30px !important;
    color: var(--neo-text-muted) !important;
    font-size: 12px !important;
}
.friendship-list {
    padding-bottom: 14px;
}
.friendship-list .title {
    color: var(--neo-text) !important;
    font-weight: 600;
    padding-right: 10px;
    border-right: 1px solid var(--neo-border);
    margin-right: 10px;
}
.friendship-list a {
    color: var(--neo-text-muted) !important;
    font-size: 12px !important;
    padding: 0 10px;
}
.friendship-list a:hover { color: var(--neo-accent) !important; }

/* =====================================================
   13. FORMS / INPUTS
   ===================================================== */
.am-form-field,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea, select {
    background: var(--neo-surface) !important;
    border: 1.5px solid var(--neo-border-soft) !important;
    color: var(--neo-text) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    transition: var(--neo-transition);
    box-shadow: none !important;
}
.am-form-field:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--neo-accent) !important;
    box-shadow: var(--neo-glow) !important;
    outline: none !important;
}

/* Checkbox / radio accents */
input[type="checkbox"], input[type="radio"] { accent-color: var(--neo-accent); }

/* =====================================================
   14. MODAL / DIALOG
   ===================================================== */
.am-modal-dialog {
    background: var(--neo-surface) !important;
    border-radius: var(--neo-radius-lg) !important;
    border: 1px solid var(--neo-border-soft) !important;
    box-shadow: var(--neo-shadow-lg) !important;
    overflow: hidden;
}
.am-modal-hd {
    background: var(--neo-gradient-soft) !important;
    border-bottom: 1px solid var(--neo-border-soft) !important;
    color: var(--neo-text) !important;
    font-weight: 600;
    padding: 18px 22px !important;
}
.am-modal-bd { color: var(--neo-text-secondary) !important; padding: 22px !important; }
.am-modal-ft { border-top: 1px solid var(--neo-border-soft) !important; padding: 14px 22px !important; }

/* =====================================================
   15. TABS
   ===================================================== */
.am-tabs-nav {
    background: var(--neo-surface) !important;
    border-bottom: 1px solid var(--neo-border-soft) !important;
    padding: 0 !important;
}
.am-tabs-nav > li > a {
    color: var(--neo-text-secondary) !important;
    background: transparent !important;
    border: none !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    position: relative;
}
.am-tabs-nav > li.am-active > a,
.am-tabs-nav > li.active > a {
    color: var(--neo-accent) !important;
    background: transparent !important;
}
.am-tabs-nav > li.am-active > a::after,
.am-tabs-nav > li.active > a::after {
    content: '';
    position: absolute;
    left: 20px; right: 20px; bottom: 0;
    height: 3px;
    background: var(--neo-gradient);
    border-radius: 3px 3px 0 0;
}

/* =====================================================
   16. TABLES
   ===================================================== */
.am-table {
    background: var(--neo-surface) !important;
    color: var(--neo-text) !important;
    border-radius: var(--neo-radius) !important;
    overflow: hidden;
}
.am-table thead > tr > th {
    background: var(--neo-surface-2) !important;
    color: var(--neo-text) !important;
    border-bottom: 1px solid var(--neo-border-soft) !important;
    font-weight: 600 !important;
    padding: 14px !important;
}
.am-table tbody > tr > td {
    border-color: var(--neo-border-soft) !important;
    padding: 14px !important;
    color: var(--neo-text-secondary) !important;
}
.am-table tbody > tr:hover > td {
    background: var(--neo-accent-softer) !important;
}

/* =====================================================
   17. BREADCRUMB / PAGINATION
   ===================================================== */
.am-breadcrumb {
    background: var(--neo-surface) !important;
    border-radius: var(--neo-radius) !important;
    padding: 10px 18px !important;
    border: 1px solid var(--neo-border-soft) !important;
    font-size: 13px !important;
}
.am-breadcrumb > li a { color: var(--neo-text-secondary) !important; }
.am-breadcrumb > li.am-active,
.am-breadcrumb > .am-active { color: var(--neo-accent) !important; }
.am-breadcrumb > li + li::before { color: var(--neo-text-muted) !important; }

.am-pagination > li > a,
.am-pagination > li > span {
    color: var(--neo-text) !important;
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-border-soft) !important;
    border-radius: 8px !important;
    margin: 0 3px !important;
    transition: var(--neo-transition);
}
.am-pagination > li > a:hover {
    border-color: var(--neo-accent) !important;
    color: var(--neo-accent) !important;
    background: var(--neo-accent-softer) !important;
}
.am-pagination > .am-active > a,
.am-pagination > .am-active > span {
    background: var(--neo-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* =====================================================
   18. USER CENTER / SIDE-MENU DECORATIONS
   ===================================================== */
.user-box, .personal-center, .user-left-nav, .personal-left {
    background: var(--neo-surface) !important;
    border-radius: var(--neo-radius-lg) !important;
    border: 1px solid var(--neo-border-soft) !important;
    box-shadow: var(--neo-shadow-sm);
    overflow: hidden;
}

/* =====================================================
   19. UTILITY COLOR OVERRIDES
   ===================================================== */
.am-text-default, .am-color-grey-dark { color: var(--neo-text-secondary) !important; }
.am-text-muted, .am-color-grey { color: var(--neo-text-muted) !important; }
.am-text-primary { color: var(--neo-accent) !important; }
.am-text-danger { color: var(--neo-pink) !important; }
.am-text-success { color: var(--neo-green) !important; }
.am-text-warning { color: var(--neo-amber) !important; }

.am-bg-primary { background: var(--neo-accent) !important; color: #fff !important; }
.am-badge { border-radius: 999px !important; font-weight: 600; padding: 2px 8px; }
.am-badge-danger, .am-badge-warning { background: var(--neo-pink) !important; }
.am-badge-primary { background: var(--neo-accent) !important; }
.am-badge-success { background: var(--neo-green) !important; }

/* =====================================================
   20. MISC POLISH
   ===================================================== */
/* Back-to-top / float bar */
.mod-side, .back-top, .side-bar {
    background: var(--neo-surface) !important;
    border: 1px solid var(--neo-border-soft) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-md) !important;
}
.mod-side li:hover, .side-bar li:hover { background: var(--neo-accent-softer) !important; }

/* Amaze UI radius overrides for a softer look */
.am-radius { border-radius: var(--neo-radius-sm) !important; }
.am-round { border-radius: 999px !important; }

/* Cart-total hot badge in top-nav */
.common-cart-total.hot-icon {
    background: var(--neo-pink) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2);
}

/* Hide dev plugin dev-tags from interfering */
.plugins-tag { display: none !important; }

/* Horizontal divider */
hr { border-color: var(--neo-border-soft) !important; }

/* Focus-visible accessibility ring */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--neo-accent);
    outline-offset: 2px;
    border-radius: 4px;
}