/*公共*/
:root {
    --isee-brand: #E81A5D; 
    --isee-brand-light: #FF5E9A; 
    --isee-blush-bg: #FCF8F9; /* 极具女性温柔感的微暖裸粉底色 */
    --isee-text-main: #111111;
    --isee-text-sub: #888888;
    --isee-border: rgba(0,0,0,0.04);
}


/*header区域*/
/*@font-face {
  font-family: "poppins-regular";
  src: url("http://m.iseehair.ok/js/newisee/icon/poppins-regular.ttf?v=1") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}*/
html {
    --brand-pink: #FF35A0;
    --text-black: #000000; 
    --text-gray: #666666;
    --border-light: #EBEBEB;
    -webkit-font-smoothing: antialiased;
}



/* =======================================================
   ✨ ISEE 全局高级字体：Poppins (圆润、亲和、现代)
   ======================================================= */
/* 1. 通过 Google Fonts 极速引入 Poppins 的常用字重 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* 2. 定义全局唯一字体变量 */
:root {
    --isee-font-global: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 3. 强制页面最底层继承该字体，并开启抗锯齿让文字更顺滑 */
body {
    font-family: var(--isee-font-global) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 4. 强制覆盖所有标题、正文、按钮、价格、输入框的字体 */
h1, h2, h3, h4, h5, h6, 
p, span, div, a, button, input, textarea,
.s-title, .b-title, .fomo-title, .ed-logo, 
.cart-page-title, .summary-title, .recommend-title, .rec-title,
.p-price-now, .fomo-price-now, .rs-score, .bb-price, .grand-total-price, .gt-price, .rec-price {
    font-family: var(--isee-font-global) !important;
}

/* 5. 针对价格数字，稍微收紧一点点间距，让金额显得更紧凑高级 */
.p-price-now, .fomo-price-now, .bb-price, .grand-total-price, .gt-price {
    letter-spacing: -0.5px !important;
}


/* ================== 基础 Header (高奢性感版) ================== */
/* 顶部黑色公告栏：加深对比度，字距拉开，制造冷酷感 */
.top-banner { background: #000; color: #fff; height: 36px; }
.banner-swipe { height: 36px; line-height: 36px; }
.banner-text { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }

/* ★ 重点1：性感源于“半透明与光影 (Glassmorphism)” ★ 
   抛弃死板的白底和廉价的灰线。采用 96% 透明度的纯白 + 极致柔和的弥散阴影。
   当页面往下划时，背后的性感模特图片会若隐若现透过来，像极了性感的蕾丝内衣。*/
.main-header { 
    display: flex; justify-content: space-between; align-items: center; 
    height: 64px; /* 高度微微增加，给 Logo 铺垫出尊贵的舞台 */
    padding: 0 16px; 
    background: rgba(255, 255, 255, 0.96); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none; /* 去掉廉价的边框线 */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); /* 极其微弱的高级弥散阴影 */
}

/* ★ 重点2：工具栏必须“卑微”，紧凑聚集在两侧 ★ */
.header-action { flex: 1; display: flex; align-items: center; height: 100%; cursor: pointer; color: #111; }
/* 间距压缩到 12px，让图标紧凑成一个整体，离 Logo 远远的 */
.left-action { justify-content: flex-start; gap: 12px; }
.right-actions { justify-content: flex-end; gap: 14px; }

/* ★ 重点3：绝对霸权的主角 Logo ★ */
.header-logo-box { 
    flex: 0 0 auto; display: flex; justify-content: center; align-items: center; 
    padding: 0 10px; /* 强制给 Logo 左右留下护城河 */
}
.logo-img { 
    height: 29px; /* 保持张扬的尺寸 */
    filter: drop-shadow(0px 2px 8px rgba(255, 53, 160, 0.2)); /* ★ 杀手锏：给粉色 Logo 加上一层极其微弱的粉色光晕，像霓虹灯一样散发荷尔蒙！ */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.logo-img:active { transform: scale(0.95); }

/* 图标变得更克制，不要抢风头 */
.icon-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; opacity: 0.85; /* 图标微微变淡，把 100% 的视觉焦点让给 Logo */ }
.icon-btn svg { display: block; }
.icon-btn:hover, .icon-btn:active { opacity: 1; }

/* ★ 极致微雕角标：像钻石一样镶嵌 ★ */
.custom-icon-wrap { position: relative; }

.micro-badge {
    position: absolute;
    background-color: var(--brand-pink);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    border: 1.5px solid #fff; 
    display: flex; align-items: center; justify-content: center;
    z-index: 10; line-height: 1;
    box-shadow: 0 2px 4px rgba(255, 53, 160, 0.3); /* 给角标也加上一点点性感的投影 */
}

/* HOT 角标 */
.hot-micro {
    top: -6px;      /* 原来是 -4px，再往上走一点 */
    right: -12px;   /* 原来是 -8px，再往右拉一点 */
    height: 12px; 
    padding: 0 4px;
    border-radius: 6px;
    font-size: 7px; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

/* 购物车数字 */
.cart-micro {
    top: -4px; right: -6px;
    min-width: 14px; height: 14px; padding: 0 2px;
    border-radius: 7px;
    font-size: 8.5px; font-weight: 600;
}
/* ==========================================
   ★ 超级菜单 - 杂志极简风 ★
   ========================================== */
.editorial-mega-menu { 
    width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #FFFFFF; 
}
.menu-top-bar { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 18px 20px 14px; border-bottom: 1px solid var(--border-light); 
}
.menu-top-bar h2 { 
    margin: 0; font-size: 13px; font-weight: 700; color: #000; 
    letter-spacing: 2px; text-transform: uppercase; 
}
.close-box { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; color: #000; }

.menu-layout { flex: 1; display: flex; overflow: hidden; }

/* === 左侧边栏 === */
.sidebar { 
    width: 100px; background: #FAFAFA; display: flex; flex-direction: column; 
    border-right: 1px solid var(--border-light); z-index: 2; 
}
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px 0 40px 0; }
.side-item { 
    position: relative; padding: 20px 12px 20px 16px; 
    font-size: 13px; font-weight: 400; color: #777; 
    display: flex; align-items: center; transition: all 0.2s; 
}
/* 活动页文字颜色可以做个小区分，比如微微加深一点点 */
.highlight-tab .item-text { color: #333; }

.side-item.is-active { color: #000; font-weight: 700; background: #FFFFFF; }
.side-item.is-active::before { 
    content: ''; position: absolute; left: 0; top: 25%; 
    height: 50%; width: 3px; background: #000; 
}
.item-text { display: flex; align-items: center; line-height: 1.2; }
.hot-svg { width: 14px; height: 14px; margin-right: 6px; display: inline-flex; }
.divider { height: 1px; background: var(--border-light); margin: 15px 16px; }

/* === 右侧内容区 === */
.content-area { flex: 1; background: #FFFFFF; overflow-y: auto; padding: 24px 20px 40px; }
.panel-inner { padding-bottom: 20px; }
.section-title { margin: 0 0 16px 0; font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1.5px; }

/* === 1. 独立活动图页 === */
.editorial-picks { margin-bottom: 36px; }
.editorial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.edit-card { 
    position: relative; width: 100%; aspect-ratio: 4 / 5; 
    border-radius: 4px; overflow: hidden; background: #F5F5F5; cursor: pointer;
}
.edit-card img { width: 100%; height: 100%; object-fit: cover; }
.card-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.card-badge {
    padding: 3px 6px; font-size: 9px; font-weight: 700; color: #fff; 
    letter-spacing: 1px; margin-bottom: 6px; border-radius: 2px;
}
.card-badge.pink { background: var(--brand-pink); }
.card-badge.black { background: #fff; color: #000; }
.card-title { font-size: 12px; font-weight: 600; color: #FFF; letter-spacing: 0.5px; }

/* === 2. 纯净文字列表 === */
.minimal-group { margin-bottom: 32px; }
.minimal-list { display: flex; flex-direction: column; }
.minimal-list.border-box { border: 1px solid var(--border-light); border-radius: 6px; padding: 0 16px; }
.minimal-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0; border-bottom: 1px solid var(--border-light);
    transition: opacity 0.2s;
}
.minimal-link:last-child, .minimal-link.border-none { border-bottom: none; }
.minimal-link:active { opacity: 0.5; }
.link-label { font-size: 13px; font-weight: 400; color: #000; display: flex; align-items: center; }
.link-label .hot-svg { margin-right: 8px; }

.btn-solid-black {
    display: flex; justify-content: center; align-items: center; width: 100%;
    background: #000; color: #fff; padding: 16px 0; border-radius: 4px; 
    font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.btn-solid-black:active { background: #333; }

/* === 3. 客服与货币列表 === */
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
.info-row.border-none { border-bottom: none; }
.i-label { font-size: 13px; color: #666; font-weight: 400; }
.i-val { font-size: 13px; color: #000; font-weight: 600; }
.currency-link.active-currency .link-label { font-weight: 700; }
.c-sub { color: #999; font-size: 11px; margin-left: 6px; font-weight: 400; }

/* ==========================================
    ✨ 现代轻奢：流光扫过 Loading (轻量、显快、无压迫感)
    ========================================== */
    .premium-fullscreen-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* 稍微降低背景不透明度，减少“一堵墙”的隔离感 */
        background: rgba(255, 255, 255, 0.85); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        
    .glamour-loader-box {
        display: flex;
        align-items: center;
        gap: 12px; /* 稍微缩小一点单词间距，看起来更紧凑精致 */
    }

    .word-isee, .word-hair {
        font-family: 'Inter', sans-serif;
        font-size: 24px; /* 字号稍微调小，显得更优雅 */
        font-weight: 500; /* 灵魂修改：800太粗暴，改用500中等字重，瞬间温柔 */
        letter-spacing: 8px; /* 间距稍微收敛 */
        text-transform: uppercase;
        margin: 0;
        line-height: 1;
        
        /* 流光渐变效果 */
        background: linear-gradient(
            110deg, 
            rgba(255, 82, 154, 0.3) 0%, 
            rgba(255, 82, 154, 1) 40%, 
            rgba(255, 82, 154, 1) 60%, 
            rgba(255, 82, 154, 0.3) 100%
        );
        background-size: 200% auto;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        
        /* 动画加快到 1.5s，让人感觉加载得很迅速 */
        animation: shimmer-sweep 1.5s linear infinite;
    }

    /* 抵消多余的间距保证居中 */
    .word-hair {
        margin-right: -8px; 
    }

    /* 流光扫过动画，没有形变，不伤眼 */
    @keyframes shimmer-sweep {
        to {
            background-position: 200% center;
        }
    }