/* PlayingInChina — 版式与间距令牌（design theme 覆盖层）
   work_mode=design_theme
   权威：full-ui-demo Phase-2（Inter 本地 OTF + sticky 白顶栏度量） */

@font-face {
    font-family: InterLocal;
    src: url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-Regular.woff2?v=sub1") format("woff2"),
         url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-Regular.otf") format("opentype");
    font-weight: 400;
    font-display: optional;
}
@font-face {
    font-family: InterLocal;
    src: url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-Medium.woff2?v=sub1") format("woff2"),
         url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-Medium.otf") format("opentype");
    font-weight: 500;
    font-display: optional;
}
@font-face {
    font-family: InterLocal;
    src: url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-SemiBold.woff2?v=sub1") format("woff2"),
         url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-display: optional;
}
@font-face {
    font-family: InterLocal;
    src: url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-Bold.woff2?v=sub1") format("woff2"),
         url("/static/Weline/playinginchina/frontend/assets/fonts/Inter-Bold.otf") format("opentype");
    font-weight: 700;
    font-display: optional;
}

:root,
[data-w-area="frontend"] {
    --pic-gutter: 20px;

    /* Phase-2：Inter 本地优先，系统无衬线回退 */
    --pic-font-body: "InterLocal", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans SC", "PingFang SC", sans-serif;
    /* 编辑式大标题：demo 仍用 Georgia；UI/正文走 Inter */
    --pic-font-heading: Georgia, "Times New Roman", "Noto Serif SC", serif;
    --pic-font-ui: var(--pic-font-body);

    --pic-fs-body: 16px;
    --pic-fs-lead: 18px;
    --pic-fs-h1: clamp(40px, 5.5vw, 72px);
    --pic-fs-h2: clamp(28px, 3vw, 38px);
    --pic-fs-h3: 19px;
    --pic-fs-small: 12.5px;

    --pic-space-1: 4px;
    --pic-space-2: 8px;
    --pic-space-3: 12px;
    --pic-space-4: 18px;
    --pic-space-5: 26px;
    --pic-space-6: 40px;
    --pic-space-7: 60px;
    --pic-space-section: 88px;

    --pic-radius-sm: 10px;
    --pic-radius: 15px;
    --pic-radius-lg: 18px;
    --pic-radius-pill: 999px;

    --pic-shadow: 0 12px 32px rgba(24, 52, 79, .08);
    --pic-shadow-card: 0 4px 16px rgba(23, 58, 98, .05);

    /* 让框架内容宽度跟随本站容器 */
    --weline-layout-content-max-width: 1260px;
}

/* ---------------------------------------------------------------------------
   全局字体族接管（把框架基座的「古风宋楷」预设换成 Phase-2 Inter）
   --------------------------------------------------------------------------- */
:root,
[data-w-area="frontend"] {
    --font-family-base:    var(--pic-font-body);
    --font-family-display: var(--pic-font-heading);
    --font-family-ui:      var(--pic-font-ui);
    --font-family-serif:   var(--pic-font-heading);
    --weline-font-sans:    var(--pic-font-body);
    --weline-font-display: var(--pic-font-heading);
    --weline-font-ui:      var(--pic-font-ui);
    --weline-font-serif:   var(--pic-font-heading);
    --weline-layout-font-family:         var(--pic-font-body);
    --weline-layout-font-family-display: var(--pic-font-heading);
    --weline-layout-font-family-ui:      var(--pic-font-ui);
}

/* ---------------------------------------------------------------------------
   尾 chrome 让位量（Marker: pic-consent-banner-clearance-v1）

   框架消费点：app/code/Weline/Theme/view/statics/css/storefront-float-layer.css
   （body:has(#weline-consent-banner:not([hidden])) .w-storefront-float-layer__slot--*
   的 bottom = 基线 + var(--weline-consent-banner-clearance)）。

   PIC 的 Cookie 同意条是长文案 + 移动端按钮换行，实测高度 320px≈192 / 390px≈167 /
   768px≈143 / 1024px≈118 / 1500px≈69，框架默认 4.75rem(桌面) / 5.25rem(窄屏) 不足，
   悬浮层里的 App 下载浮标与客服按钮会压住同意条文字（改动前实测遮挡 61% / 44% / 22%）。
   这里按断点给足让位量（数值 = 令牌组合，均为同意条高度 + 约 8px 安全间距）。
   --------------------------------------------------------------------------- */
:root,
[data-w-area="frontend"] {
    /* ≥1024：基线 1.25rem + 114px = 134px ≥ 118(1024) / 69(1500) */
    --weline-consent-banner-clearance: calc(var(--pic-space-section) + var(--pic-space-5));
}

@media (max-width: 1023px) {
    :root,
    [data-w-area="frontend"] {
        /* 基线 1.25rem + 136px = 156px ≥ 143(768) */
        --weline-consent-banner-clearance: calc(var(--pic-space-section) + var(--pic-space-6) + var(--pic-space-2));
    }
}

@media (max-width: 720px) {
    :root,
    [data-w-area="frontend"] {
        /* 基线 0.75rem + 168px = 180px ≥ 167(390) */
        --weline-consent-banner-clearance: calc(var(--pic-space-section) + var(--pic-space-6) * 2);
    }
}

@media (max-width: 480px) {
    :root,
    [data-w-area="frontend"] {
        /* 基线 0.75rem + 176px = 188px ≥ 175(390 + 8px) */
        --weline-consent-banner-clearance: calc(var(--pic-space-section) + var(--pic-space-6) * 2 + var(--pic-space-2));
    }
}

@media (max-width: 360px) {
    :root,
    [data-w-area="frontend"] {
        /* 基线 0.75rem + 192px = 204px ≥ 200(320 + 8px) */
        --weline-consent-banner-clearance: calc(var(--pic-space-section) + var(--pic-space-7) + var(--pic-space-6) + var(--pic-space-1));
    }
}