/* ===========================================
   pages/information/information_article.css
   Information 正文 / TOC「母版」公共样式
   · 由 information_base.html 统一加载
   · 仅放：左侧 TOC、正文排版、callout、联系 CTA、公共响应式
   · 页面独有样式禁止写入本文件，改由各页 extra_css 引入：
     faq.css / privacy_policy.css / terms_of_service.css /
     cookie_policy.css / payment_terms.css / shipping_info.css /
     sitemap.css / contact_us.css / unsubscribe.css …
   · About / Trade / Story 不走本母版，各自独立 CSS
   依赖：common/lp_tokens.css · common/catalog_shell.css
=========================================== */

/* ── 左侧目录 ───────────────────────────────── */
.lp-nav {
    position: sticky;
    top: calc(var(--header-topbar-height) + var(--header-height-nav) + var(--lp-spacing-md));
    background: var(--lp-surface);
    border-radius: var(--lp-radius);
    padding: var(--lp-spacing-lg);
    border: 1px solid var(--lp-border-light);
    min-width: 0;
    max-width: 100%;
}

.lp-nav-title {
    font-family: var(--lp-font);
    font-size: var(--lp-font-size-h4, 1.125rem);
    font-weight: var(--lp-font-weight-subhead, 500);
    color: var(--lp-text-primary);
    margin: 0 0 var(--lp-spacing-md);
    padding-bottom: var(--lp-spacing-sm);
    border-bottom: 1px solid var(--lp-border-light);
}

.lp-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-nav-item {
    margin-bottom: var(--lp-spacing-xs);
}

.lp-nav-link {
    display: block;
    padding: var(--lp-spacing-sm) var(--lp-spacing-md);
    color: var(--lp-text-secondary);
    text-decoration: none;
    border-radius: 4px;
    font-size: var(--lp-font-size-nav, 0.875rem);
    font-family: var(--lp-font);
    font-weight: 400;
    line-height: 1.5;
    transition: background 0.2s ease, color 0.2s ease;
}

.lp-nav-link:hover {
    background: var(--lp-hover-bg);
    color: var(--lp-primary-color);
}

.lp-nav-link.active {
    background: var(--lp-primary-color);
    color: #fff;
    font-weight: 500;
}

/* 法律等正文锚点滚动偏移（FAQ / About / Trade 在各自页面 CSS） */
body.page-info #infoArticle .info-section,
body.page-info-legal #infoArticle .info-section {
    scroll-margin-top: calc(var(--header-offset) + var(--lp-spacing-xl));
}

/*
 * #infoArticle 直接子块上下对称留白（Privacy / Terms 等）
 * · 不含 About / Contact / Trade / FAQ（各自页面 CSS）
 */
body.page-info #infoArticle > .info-section,
body.page-info-legal #infoArticle > .info-section {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body.page-info #infoArticle > .lp-last-updated,
body.page-info-legal #infoArticle > .lp-last-updated {
    margin-bottom: 24px;
}

.lp-last-updated {
    background: var(--lp-surface);
    padding: var(--lp-spacing-md);
    border-radius: var(--lp-radius);
    margin-bottom: var(--lp-spacing-xl);
    font-size: var(--lp-font-size-nav, 0.875rem);
    line-height: var(--lp-line-height-body, 1.5);
    color: var(--lp-text-muted);
    text-align: center;
    font-family: var(--lp-font);
    font-weight: 400;
}

/* ── 正文排版（默认 Information）───────────────── */
.lp-content {
    font-family: var(--lp-font);
    font-size: var(--lp-font-size-body, 1rem);
    line-height: var(--lp-line-height-body, 1.5);
    color: var(--lp-text-secondary);
}

.lp-content h2 {
    font-family: var(--lp-font);
    font-size: var(--lp-font-size-h2, 1.5rem);
    font-weight: var(--lp-font-weight-heading, 400);
    line-height: 1.333;
    color: var(--lp-text-primary);
    margin: 0 0 var(--lp-spacing-lg);
    padding-bottom: var(--lp-spacing-sm);
    border-bottom: 1px solid var(--lp-border-light);
}

.lp-content h3 {
    font-family: var(--lp-font);
    font-size: var(--lp-font-size-h3, 1.25rem);
    font-weight: var(--lp-font-weight-subhead, 500);
    line-height: 1.4;
    color: var(--lp-text-primary);
    margin: var(--lp-spacing-xl) 0 var(--lp-spacing-md);
}

.lp-content h4 {
    font-family: var(--lp-font);
    font-size: var(--lp-font-size-h4, 1.125rem);
    font-weight: var(--lp-font-weight-subhead, 500);
    line-height: 1.4;
    color: var(--lp-text-secondary);
    margin: var(--lp-spacing-lg) 0 var(--lp-spacing-sm);
}

.lp-content p {
    margin: 0 0 var(--lp-spacing-md);
    color: var(--lp-text-secondary);
    font-size: var(--lp-font-size-body, 1rem);
    line-height: var(--lp-line-height-body, 1.5);
    font-family: var(--lp-font);
    font-weight: 400;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lp-content ul,
.lp-content ol {
    margin: var(--lp-spacing-md) 0;
    padding-left: var(--lp-spacing-lg);
}

.lp-content li {
    margin-bottom: var(--lp-spacing-sm);
    color: var(--lp-text-secondary);
    font-size: var(--lp-font-size-body, 1rem);
    line-height: var(--lp-line-height-body, 1.5);
    font-family: var(--lp-font);
}

.lp-content a {
    color: var(--lp-primary-color);
    text-decoration: none;
}

.lp-content a:hover {
    text-decoration: underline;
}

/*
 * Legal / FAQ / Sitemap — 对照 Google Privacy（policies.google.com/privacy）
 * · 正文 Roboto 16 / ~1.6；墨色 #3c4043（非过浅 secondary）
 * · h2 24/500 · h3 18/500 · 无底部分割线 · 章节距 = h2 padding-top 36px
 * · 阅读栏约 45rem；不改条款文案，只调字阶与节奏
 * · 令牌覆盖仅限 page-info-legal，不影响 About/Contact/Trade
 */
body.page-info-legal {
    --lp-legal-ink: #3c4043;
    --lp-legal-ink-muted: #5f6368;
    --lp-text-secondary: var(--lp-legal-ink);
    --lp-text-muted: var(--lp-legal-ink-muted);
    --lp-font-weight-heading: 500;
    --lp-font-size-h3: 1.125rem;
    --lp-line-height-body: 1.6;
    --lp-font-size-hero-title: clamp(1.5rem, 2.8vw, 2rem);
    --lp-font-size-hero-sub: 1rem;
}

body.page-info-legal .lp-main {
    max-width: 1080px;
    grid-template-columns: 240px minmax(0, 45rem);
    column-gap: var(--lp-spacing-2xl);
}

body.page-info-legal .lp-content {
    color: var(--lp-legal-ink);
    letter-spacing: 0;
}

body.page-info-legal .lp-content h2 {
    color: var(--lp-legal-ink);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.333;
    /* 章节距落在标题上（不落在 section）；36px 按目视收紧 */
    margin: 0 0 1rem;
    padding: 36px 0 0;
    border-bottom: none;
}

body.page-info-legal .lp-content h3 {
    color: var(--lp-legal-ink);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.444;
    margin: 2rem 0 0.75rem;
}

body.page-info-legal .lp-content h4 {
    color: var(--lp-legal-ink);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.43;
    margin: 1.5rem 0 0.5rem;
}

/* 去掉 section 级 padding，避免与 h2 顶距叠出过大空隙 */
body.page-info-legal #infoArticle > .info-section + .info-section,
body.page-info-legal #infoArticle > .faq-group + .faq-group {
    padding-top: 0;
}

/*
 * 首节标题顶距清零（Last updated 仍用 div，章节用 section.info-section）。
 * 用相邻兄弟选择器，不依赖 :first-of-type。
 */
body.page-info-legal #infoArticle > .lp-last-updated + .info-section > h2:first-child,
body.page-info-legal #infoArticle > .info-section:first-child > h2:first-child,
body.page-info-legal #infoArticle > .lp-last-updated + .faq-group .faq-group-title,
body.page-info-legal #infoArticle > .faq-group:first-child .faq-group-title {
    padding-top: 0;
}

/* 节末底边距清零，使下节 h2 的 36px 即为章节距 */
body.page-info-legal #infoArticle > .info-section > :last-child,
body.page-info-legal #infoArticle > .faq-group > :last-child {
    margin-bottom: 0;
}

body.page-info-legal .lp-content p {
    color: var(--lp-legal-ink);
    margin: 0 0 1rem;
    line-height: 1.6;
}

body.page-info-legal .lp-content ul,
body.page-info-legal .lp-content ol {
    margin: 0.75rem 0 1.25rem;
    padding-left: 1.5rem;
}

body.page-info-legal .lp-content li {
    color: var(--lp-legal-ink);
    margin-bottom: 0.65rem;
    line-height: 1.65;
    padding-left: 0.25rem;
}

body.page-info-legal .lp-content li:last-child {
    margin-bottom: 0;
}

body.page-info-legal .lp-content a:not(.btn) {
    color: var(--lp-primary-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

body.page-info-legal .lp-content a:not(.btn):hover {
    color: var(--lp-primary-dark);
}

/* CTA 按钮勿被正文链接色盖成「石青字 + 石青底」 */
body.page-info-legal .lp-content a.btn.btn-primary {
    color: #fff;
    text-decoration: none;
}

body.page-info-legal .lp-content a.btn.btn-primary:hover {
    color: #fff;
    text-decoration: none;
}

body.page-info-legal .lp-last-updated {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    /* 与首节标题留一点呼吸；小于章节距 36px，避免又挤又空 */
    margin: 0 0 24px;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--lp-legal-ink-muted);
}

body.page-info-legal .lp-nav-title {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--lp-legal-ink);
}

body.page-info-legal .lp-nav a.lp-nav-link {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--lp-legal-ink-muted);
}

/* 高于普通 TOC 链接墨色，保证深底白字可读 */
body.page-info-legal .lp-nav a.lp-nav-link.active,
body.page-info-legal .lp-nav a.lp-nav-link.active:hover,
body.page-info-legal .lp-nav a.lp-nav-link.active:focus-visible {
    color: #fff;
    background: var(--lp-primary-color);
}

body.page-info-legal .lp-nav a.lp-nav-link:hover {
    color: var(--lp-primary-color);
}

body.page-info-legal .lp-nav a.lp-nav-link.active:hover {
    color: #fff;
}

body.page-info-legal .lp-highlight,
body.page-info-legal .info-callout {
    background: #f8f9fa;
    border-left-color: var(--lp-primary-color);
}

body.page-info-legal .lp-highlight p,
body.page-info-legal .info-callout p,
body.page-info-legal .lp-highlight strong,
body.page-info-legal .info-callout strong {
    color: var(--lp-legal-ink);
}

/* ── 高亮提示块（Legal 等共用）───────────────── */
.lp-highlight,
.info-callout {
    background: #e8f0fe;
    border-left: 4px solid var(--lp-primary-color);
    padding: var(--lp-spacing-md) var(--lp-spacing-lg);
    margin: var(--lp-spacing-lg) 0;
    border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
}

.lp-highlight p,
.info-callout p {
    margin: 0;
    color: var(--lp-text-primary);
}

.lp-highlight strong,
.info-callout strong {
    color: var(--lp-text-primary);
}

.lp-warning {
    background: #fef7e0;
    border-left: 4px solid #f9ab00;
    padding: var(--lp-spacing-md) var(--lp-spacing-lg);
    margin: var(--lp-spacing-lg) 0;
    border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
}

.lp-warning p {
    margin: 0;
    color: var(--lp-text-primary);
}

/* ── 联系区块（Legal / FAQ 尾部 CTA 共用）─────── */
.lp-contact,
.info-contact-cta {
    background: var(--lp-surface);
    padding: var(--lp-spacing-lg);
    border-radius: var(--lp-radius);
    margin-top: 0;
    border: 1px solid var(--lp-border-light);
}

.info-contact-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lp-spacing-lg);
    flex-wrap: wrap;
}

/* ── 响应式（TOC / 正文容器公共）─────────────── */
@media (max-width: 768px) {
    body.page-info .lp-main,
    body.page-info-legal .lp-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    body.page-info-legal .lp-main {
        grid-template-columns: 1fr;
    }

    .lp-nav {
        position: sticky;
        top: calc(var(--header-offset) + var(--lp-breadcrumb-bar-height));
        z-index: 400;
        order: 1;
        margin: 0;
        padding: 10px 0;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--lp-border-light);
        box-shadow: none;
        background: var(--lp-surface);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .lp-nav:not(:has(.lp-nav-item)) {
        display: none !important;
    }

    .lp-nav-title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .lp-nav-list {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px var(--lp-spacing-lg) 4px;
        scroll-padding-inline: var(--lp-spacing-lg);
        box-sizing: border-box;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
    }

    body.page-info .lp-content,
    body.page-info-legal .lp-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    .lp-nav-list::-webkit-scrollbar {
        display: none;
    }

    .lp-nav-item {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .lp-nav-link {
        padding: 7px 12px;
        background: var(--lp-surface);
        border: 1px solid var(--lp-border-light);
        border-radius: 999px;
        font-size: var(--lp-font-size-nav, 0.875rem);
        white-space: nowrap;
        line-height: 1.3;
        touch-action: manipulation;
    }

    .lp-nav-link.active {
        background: var(--lp-primary-color);
        color: #fff;
        border-color: var(--lp-primary-color);
        box-shadow: none;
    }

    body.page-info #infoArticle .info-section,
    body.page-info-legal #infoArticle .info-section {
        scroll-margin-top: calc(
            var(--header-offset)
            + var(--lp-breadcrumb-bar-height)
            + var(--lp-mobile-toc-height)
            + 8px
        );
    }

    .info-contact-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .lp-nav-list {
        padding-left: var(--lp-spacing-md);
        padding-right: var(--lp-spacing-md);
        scroll-padding-inline: var(--lp-spacing-md);
    }
}