/*
 * 「筛选预设」前台样式（products-page.css）
 *
 *   - 通用 .apap-ppfg* 命名空间，供 [apap_filter] 短代码 / Gutenberg 区块共用
 *   - 支持两种布局：
 *       - 默认（facet）：顶部 / 侧边复选筛选，自适应
 *       - layout=sidebar：截图风格的左侧分类导航 + 右侧网格 + 数字分页 + 帮助卡
 *   - 卡片网格视觉与 home-product-showcase 系一致，复用 --apap-color-* 设计令牌
 */

.apap-ppfg {
    --apap-ppfg-side-w: 220px;
    --apap-ppfg-card-min: 260px;
    --apap-ppfg-card-excerpt-lines: 3;

    display: block;
    width: 100%;
    max-width: 100%;
    margin: 32px 0;
    color: var(--apap-color-text, #0f172a);
    font-size: 15px;
    line-height: 1.55;
}

/*
 * 全宽模式（短代码 fullwidth="1" 或预设 layout=sidebar 默认开启）：
 * 让 section 跳出 entry-content 的窄容器，占满视口宽度，给卡片网格更多空间。
 * 用 100vw + negative margin 的"破出"技术，并保留居中 max-width。
 */
.apap-ppfg.is-fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(16px, calc((100vw - 1280px) / 2));
    padding-right: max(16px, calc((100vw - 1280px) / 2));
    box-sizing: border-box;
}

.apap-ppfg *,
.apap-ppfg *::before,
.apap-ppfg *::after {
    box-sizing: border-box;
}

.apap-ppfg-inner {
    display: grid;
    grid-template-columns: var(--apap-ppfg-side-w) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
}

@media (max-width: 1100px) {
    .apap-ppfg {
        --apap-ppfg-side-w: 200px;
        --apap-ppfg-card-min: 240px;
    }
    .apap-ppfg-inner {
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .apap-ppfg-inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ─────────────────────── 侧边栏 ─────────────────────── */

.apap-ppfg-side {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 900px) {
    .apap-ppfg-side {
        position: static;
    }
}

.apap-ppfg-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--apap-color-surface, #fff);
    border: 1px solid var(--apap-color-border, #e5eaf2);
    border-radius: var(--apap-radius, 12px);
    color: var(--apap-color-text, #0f172a);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.apap-ppfg-mobile-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--apap-color-accent-soft, #e5f4fb);
    color: var(--apap-color-accent, #014098);
    border-radius: 999px;
    font-size: 12px;
    margin-left: auto;
}

.apap-ppfg-mobile-toggle-count[hidden] {
    display: none;
}

.apap-ppfg-mobile-toggle-icon {
    transition: transform 0.2s ease;
}

.apap-ppfg-mobile-toggle[aria-expanded="true"] .apap-ppfg-mobile-toggle-icon {
    transform: rotate(180deg);
}

@media (max-width: 900px) {
    .apap-ppfg-mobile-toggle {
        display: inline-flex;
    }

    .apap-ppfg-form {
        display: none;
    }

    .apap-ppfg-side.is-open .apap-ppfg-form {
        display: block;
    }
}

.apap-ppfg-form {
    background: var(--apap-color-surface, #fff);
    border: 1px solid var(--apap-color-border, #e5eaf2);
    border-radius: var(--apap-radius, 12px);
    padding: 12px;
    box-shadow: var(--apap-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.apap-ppfg-empty-config {
    color: var(--apap-color-text-muted, #6b7280);
    font-size: 13px;
    margin: 4px 0;
}

/* facet 模式：分组（details + summary） */

.apap-ppfg-group {
    border-bottom: 1px solid var(--apap-color-divider, rgba(1, 64, 152, 0.08));
    padding: 8px 0;
}

.apap-ppfg-group:last-of-type {
    border-bottom: 0;
}

.apap-ppfg-group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    list-style: none;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--apap-color-text-strong, #050912);
}

.apap-ppfg-group-summary::-webkit-details-marker {
    display: none;
}

.apap-ppfg-group.is-collapsible .apap-ppfg-group-summary {
    cursor: pointer;
}

.apap-ppfg-group.is-collapsible .apap-ppfg-group-toggle {
    transition: transform 0.2s ease;
}

.apap-ppfg-group.is-collapsible[open] .apap-ppfg-group-toggle {
    transform: rotate(180deg);
}

.apap-ppfg-group:not(.is-collapsible) .apap-ppfg-group-toggle {
    display: none;
}

.apap-ppfg-group-options {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.apap-ppfg-group-option {
    margin: 0;
}

.apap-ppfg-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--apap-color-text, #0f172a);
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.apap-ppfg-checkbox:hover {
    background: var(--apap-color-surface-soft, #f5f8fc);
}

.apap-ppfg-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.apap-ppfg-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--apap-color-border-strong, #cdd6e4);
    border-radius: 4px;
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex: 0 0 auto;
}

.apap-ppfg-input:focus-visible + .apap-ppfg-checkbox-box {
    outline: 2px solid var(--apap-color-focus-ring, rgba(1, 64, 152, 0.45));
    outline-offset: 2px;
}

.apap-ppfg-input:checked + .apap-ppfg-checkbox-box {
    background: var(--apap-color-accent, #014098);
    border-color: var(--apap-color-accent, #014098);
    color: #fff;
}

.apap-ppfg-checkbox-label {
    flex: 1 1 auto;
    min-width: 0;
}

.apap-ppfg-checkbox-count {
    color: var(--apap-color-text-soft, #94a3b8);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* 选中态强调 */
.apap-ppfg-input:checked ~ .apap-ppfg-checkbox-label {
    color: var(--apap-color-accent, #014098);
    font-weight: 600;
}

/* sidebar 布局：单选/分类导航（is-nav 容器内的复选呈现为分类项） */

.apap-ppfg.layout-sidebar .apap-ppfg-form {
    padding: 8px;
}

.apap-ppfg.layout-sidebar .apap-ppfg-group {
    border-bottom: 0;
    padding: 0;
}

.apap-ppfg.layout-sidebar .apap-ppfg-group-summary {
    display: none;
}

.apap-ppfg.layout-sidebar .apap-ppfg-group-options {
    gap: 2px;
}

.apap-ppfg.layout-sidebar .apap-ppfg-checkbox {
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 500;
}

.apap-ppfg.layout-sidebar .apap-ppfg-checkbox:hover {
    background: var(--apap-color-accent-soft, #e5f4fb);
}

.apap-ppfg.layout-sidebar .apap-ppfg-checkbox-box {
    display: none;
}

.apap-ppfg.layout-sidebar .apap-ppfg-input:checked ~ .apap-ppfg-checkbox-label {
    color: var(--apap-color-accent, #014098);
}

.apap-ppfg.layout-sidebar .apap-ppfg-checkbox:has(.apap-ppfg-input:checked) {
    background: var(--apap-color-accent-soft, #e5f4fb);
    color: var(--apap-color-accent, #014098);
}

.apap-ppfg.layout-sidebar .apap-ppfg-checkbox-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: currentColor;
    flex: 0 0 auto;
}

.apap-ppfg-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 4px 0;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    color: var(--apap-color-text-muted, #6b7280);
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.apap-ppfg-clear:hover {
    background: var(--apap-color-surface-soft, #f5f8fc);
    color: var(--apap-color-accent, #014098);
}

/* 帮助卡（sidebar 模式底部） */

.apap-ppfg-help {
    background: var(--apap-color-accent-soft, #e5f4fb);
    border-radius: var(--apap-radius, 12px);
    padding: 20px 18px;
    text-align: center;
    color: var(--apap-color-text, #0f172a);
}

.apap-ppfg-help-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--apap-color-accent, #014098);
    color: #fff;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.apap-ppfg-help-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}

.apap-ppfg-help-desc {
    font-size: 13px;
    color: var(--apap-color-text-muted, #6b7280);
    margin: 0 0 14px;
    line-height: 1.5;
}

.apap-ppfg-help-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    background: var(--apap-color-accent, #014098);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.apap-ppfg-help-cta:hover,
.apap-ppfg-help-cta:focus-visible {
    background: var(--apap-color-accent-dark, #00317d);
    color: #fff;
}

/* ─────────────────────── 主区 ─────────────────────── */

.apap-ppfg-main {
    min-width: 0;
}

.apap-ppfg-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--apap-color-divider, rgba(1, 64, 152, 0.08));
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.apap-ppfg-stat-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--apap-color-text-strong, #050912);
    margin: 0;
}

.apap-ppfg-stat-summary {
    color: var(--apap-color-text-muted, #6b7280);
    font-size: 14px;
    margin-left: 12px;
}

.apap-ppfg-stat-loading {
    color: var(--apap-color-text-muted, #6b7280);
    font-size: 13px;
}

/* 排序 */

.apap-ppfg-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: var(--apap-color-text-muted, #6b7280);
    font-size: 13px;
}

.apap-ppfg-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 28px 6px 12px;
    border: 1px solid var(--apap-color-border, #e5eaf2);
    border-radius: 8px;
    background: var(--apap-color-surface, #fff)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E")
        no-repeat right 10px center / 10px 6px;
    color: var(--apap-color-text, #0f172a);
    font-size: 13px;
    cursor: pointer;
}

.apap-ppfg-sort-select:focus-visible {
    outline: 2px solid var(--apap-color-focus-ring, rgba(1, 64, 152, 0.45));
    outline-offset: 1px;
}

/* 网格 —— 媒体查询固定栏数（用 minmax(0,1fr) 让窄容器也能等分而不变成单列） */

.apap-ppfg-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    min-height: 240px;
    position: relative;
}

/* 中等容器：2 列；窄容器：1 列 */
@media (max-width: 1100px) {
    .apap-ppfg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}
@media (max-width: 880px) {
    .apap-ppfg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .apap-ppfg-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.apap-ppfg-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--apap-color-text-muted, #6b7280);
    padding: 48px 16px;
    font-size: 14px;
    background: var(--apap-color-surface-soft, #f5f8fc);
    border-radius: var(--apap-radius, 12px);
}

/* 卡片 */

.apap-ppfg-card {
    background: var(--apap-color-surface, #fff);
    border: 1px solid var(--apap-color-border, #e5eaf2);
    border-radius: var(--apap-radius, 12px);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.apap-ppfg-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--apap-shadow, 0 6px 24px rgba(15, 23, 42, 0.08));
    border-color: var(--apap-color-border-strong, #cdd6e4);
}

.apap-ppfg-card-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.apap-ppfg-card-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--apap-color-surface-soft, #f5f8fc);
    overflow: hidden;
}

.apap-ppfg-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.apap-ppfg-card:hover .apap-ppfg-card-img {
    transform: scale(1.04);
}

.apap-ppfg-card-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apap-color-text-soft, #94a3b8);
    width: 100%;
    height: 100%;
}

.apap-ppfg-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    flex: 1 1 auto;
}

.apap-ppfg-card-meta-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.apap-ppfg-card-tag {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--apap-color-surface-soft, #f5f8fc);
    color: var(--apap-color-text-muted, #6b7280);
    font-size: 11px;
    border-radius: 999px;
}

.apap-ppfg-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--apap-color-text-strong, #050912);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.apap-ppfg-card-excerpt {
    margin: 0;
    font-size: 13px;
    color: var(--apap-color-text-muted, #6b7280);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--apap-ppfg-card-excerpt-lines, 3);
    line-clamp: var(--apap-ppfg-card-excerpt-lines, 3);
    overflow: hidden;
}

.apap-ppfg-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--apap-color-text-soft, #94a3b8);
    font-size: 12px;
}

.apap-ppfg-card-meta-sep {
    opacity: 0.5;
}

.apap-ppfg-card-price {
    color: var(--apap-color-accent, #014098);
    font-weight: 600;
}

.apap-ppfg-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
    color: var(--apap-color-accent, #014098);
    font-size: 13px;
    font-weight: 600;
}

.apap-ppfg-card-cta-arrow {
    transition: transform 0.2s ease;
}

.apap-ppfg-card:hover .apap-ppfg-card-cta-arrow {
    transform: translateX(4px);
}

/* 加载更多按钮（facet 模式） */

.apap-ppfg-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.apap-ppfg-load-more {
    padding: 12px 28px;
    background: var(--apap-color-surface, #fff);
    border: 1px solid var(--apap-color-border-strong, #cdd6e4);
    border-radius: 999px;
    color: var(--apap-color-text, #0f172a);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.apap-ppfg-load-more:hover,
.apap-ppfg-load-more:focus-visible {
    background: var(--apap-color-accent, #014098);
    color: #fff;
    border-color: var(--apap-color-accent, #014098);
}

.apap-ppfg-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 数字分页（sidebar 模式） */

.apap-ppfg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.apap-ppfg-pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--apap-color-border, #e5eaf2);
    border-radius: 8px;
    background: var(--apap-color-surface, #fff);
    color: var(--apap-color-text, #0f172a);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.apap-ppfg-pagination-item:hover:not(:disabled):not(.is-active):not(.is-ellipsis) {
    border-color: var(--apap-color-accent, #014098);
    color: var(--apap-color-accent, #014098);
}

.apap-ppfg-pagination-item.is-active {
    background: var(--apap-color-accent, #014098);
    border-color: var(--apap-color-accent, #014098);
    color: #fff;
    cursor: default;
}

.apap-ppfg-pagination-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.apap-ppfg-pagination-item.is-ellipsis {
    border: 0;
    background: transparent;
    cursor: default;
    color: var(--apap-color-text-soft, #94a3b8);
}

/* ─────────────────────── 加载 / 入场动画 ─────────────────────── */

/* AJAX 翻页 / 切筛选时的 grid 半透明 + 居中 spinner */
.apap-ppfg-grid.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.apap-ppfg-grid.is-loading::after {
    content: "";
    position: absolute;
    top: 60px;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    border: 3px solid rgba(1, 64, 152, 0.18);
    border-top-color: var(--apap-color-accent, #014098);
    animation: apap-ppfg-spin 0.8s linear infinite;
    z-index: 5;
    pointer-events: none;
}
@keyframes apap-ppfg-spin {
    to { transform: rotate(360deg); }
}

/* 卡片入场（首屏 + AJAX 新插入都自动播放一次，与 scroll-anim 解耦） */
@keyframes apap-ppfg-card-in {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}
.apap-ppfg-card {
    animation: apap-ppfg-card-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    /* 默认一次 stagger（最多到第 12 张），nth-child 控制 delay */
}
.apap-ppfg-card:nth-child(1)  { animation-delay: 20ms; }
.apap-ppfg-card:nth-child(2)  { animation-delay: 80ms; }
.apap-ppfg-card:nth-child(3)  { animation-delay: 140ms; }
.apap-ppfg-card:nth-child(4)  { animation-delay: 200ms; }
.apap-ppfg-card:nth-child(5)  { animation-delay: 240ms; }
.apap-ppfg-card:nth-child(6)  { animation-delay: 280ms; }
.apap-ppfg-card:nth-child(7)  { animation-delay: 320ms; }
.apap-ppfg-card:nth-child(8)  { animation-delay: 360ms; }
.apap-ppfg-card:nth-child(9)  { animation-delay: 400ms; }
.apap-ppfg-card:nth-child(10) { animation-delay: 440ms; }
.apap-ppfg-card:nth-child(11) { animation-delay: 480ms; }
.apap-ppfg-card:nth-child(12) { animation-delay: 520ms; }

/* Hero / 主区入场（与 scroll-anim 共存：scroll-anim 占 [data-anim]，这里仅是兜底，
   即使 JS 失败也能看到一个柔和入场） */
@keyframes apap-ppfg-fade-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: none; }
}
.apap-ppfg-hero,
.apap-ppfg-stat,
.apap-ppfg-side {
    animation: apap-ppfg-fade-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.apap-ppfg-hero { animation-delay: 0ms; }
.apap-ppfg-stat { animation-delay: 80ms; }
.apap-ppfg-side { animation-delay: 60ms; }

/* 减少动效偏好：禁用全部入场 */
@media (prefers-reduced-motion: reduce) {
    .apap-ppfg-card,
    .apap-ppfg-hero,
    .apap-ppfg-stat,
    .apap-ppfg-side {
        animation: none !important;
    }
    .apap-ppfg-grid.is-loading::after {
        animation: none !important;
    }
}

/* ─────────────────────── Hero 横幅（极简风格） ───────────────────────
 * style=parallax 走 .apap-pb（home-parallax-banner.php / parallax-banner.css）；
 * 这里仅描述 minimal 风格：纯背景图 + 暗色蒙版 + 居中标题，无 CTA、无视差。
 */

.apap-ppfg-hero {
    /* 图片焦点：默认人物 / 主体在画面上 1/3 处（更接近"看人物头部"的视觉直觉）。
     * 运营如需调整可通过 inline style --apap-ppfg-hero-pos 覆盖（top / center / bottom / "50% 30%" 等）。 */
    --apap-ppfg-hero-pos: center 35%;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 高度自适应：clamp(下限, 35vw, 运营设定的目标高度上限)
     *   - 320px 视口 → 112px → 取 220px（手机最小）
     *   - 768px 视口 → 269px
     *   - 1024px 视口 → 358px
     *   - 1280px 视口 → 448px（接近默认 470）
     *   - ≥1342px 视口 → 取上限 var(--apap-ppfg-hero-height, 470px)
     * 这样 hero 在不同设备下都保持自然比例，不会"宽屏太扁、手机太挤"。 */
    min-height: clamp(220px, 35vw, var(--apap-ppfg-hero-height, 470px));
    margin: 0 0 28px;
    padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 32px);
    background-color: #1f2937;
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    isolation: isolate;
}

/* ── 图片自适应：用 <img srcset> + object-fit:cover 绝对铺满 hero
 *
 * 不再用 CSS background-image —— 那个永远只能拉一张图（手机用 4MB 大图浪费流量、4K 屏用小图模糊）。
 * 改用 wp_get_attachment_image() 在 PHP 端输出 <img srcset>，浏览器按视口宽度选最匹配的尺寸：
 *   - 手机视口（375w）→ 拉 medium 尺寸（~768w）
 *   - 平板视口（768w）→ 拉 large 尺寸（~1024w）
 *   - 桌面视口（1280w）→ 拉 1536w / full 尺寸
 *   - 4K 视口（2560w）→ 拉 full 原图
 * 同时 object-fit: cover 让图片在不同 hero 高度下都按比例覆盖，不变形不留边。
 */
.apap-ppfg-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--apap-ppfg-hero-pos, center 35%);
    z-index: 0;
    user-select: none;
    pointer-events: none;
    /* 比 background-image 多一个好处：浏览器可以异步解码，不会阻塞首屏渲染 */
    display: block;
}

/* parallax 风格 `.apap-pb` 在 fullwidth 筛选容器内的高度也走同一套响应式公式
 * （首页等其它位置仍由 parallax-banner.css 自身的 height 决定，不互相影响）。
 */
.apap-ppfg.is-fullwidth > .apap-pb {
    height: clamp(220px, 35vw, var(--apap-pb-height, 540px));
}

/* Hero 二次破出：CSS 给保底（位置正确但宽度受父级限制），JS 钉死全屏。
 *
 *   - 纯 CSS 方案（margin 抵消 / transform: translateX(-50%) / margin: calc(50% - 50vw)）
 *     都要依赖父级链路居中且 100vw，主题某些容器的隐式约束会让锚点漂走。
 *   - 真正稳的做法是 JS 在前端测量 hero 当前 left（getBoundingClientRect），
 *     用 inline style 设 marginLeft = -left + width = innerWidth，
 *     与父级布局完全解耦。详见 products-page.js → alignFullwidthHero()。
 *
 * 这里只做 2 件事：
 *   1) 给 hero 一个 box-sizing: border-box + relative 锚点，让 JS 写 left/marginLeft 时基准对
 *   2) 兜底：JS 没跑（极端禁用 / 加载错误）时 hero 仍可见（width: 100% 走父级宽度，不报错）
 */
.apap-ppfg.is-fullwidth > .apap-ppfg-hero,
.apap-ppfg.is-fullwidth > .apap-pb {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-bottom: clamp(20px, 3vw, 36px);
    border-radius: 0;
}

/* parallax 风格的 .apap-pb 自身有 width: 100% 和居中容器，是 OK 的 */
.apap-ppfg.is-fullwidth > .apap-pb {
    width: 100%;
    max-width: 100%;
}

/* JS 钉位完成后会加 .is-fullbleed —— 此时 hero 的 width / margin-left 由 inline style 决定，
 * CSS 这里不再额外干预；这个钩子留作后续如果想给「已对齐」状态加过渡 / 阴影变化时使用。 */

/* hero 顶部紧贴 nav：精准抵消 <main class="section"> 的 padding-top: 72px，以及
 * .apap-ppfg 自身的 32px 顶 margin + .apap-prose 段落顶部间距。
 *
 * 关键数值来源：
 *   - style.css:1430  .section { padding: 72px 0; }
 *   - products-page.css:19  .apap-ppfg { margin: 32px 0; }
 *   - content-prose.css     .apap-prose > * 段间 margin
 *
 * 因此 has-hero 的 first-child hero / pb 需要把 .section padding-top（72px）整把抵消掉。
 */
.apap-ppfg.is-fullwidth.has-hero {
    margin-top: 0;
    padding-top: 0;
}
.apap-ppfg.is-fullwidth.has-hero > .apap-ppfg-hero:first-child,
.apap-ppfg.is-fullwidth.has-hero > .apap-pb:first-child {
    margin-top: -72px;
}
/* 阅读页已经在 style.css 中取消了外层 padding-top；这里撤销通用负 margin，避免 Hero 顶进页眉下方。 */
body.apap-singular-reading .apap-reading-main.section:has(.apap-ppfg.has-hero) .apap-ppfg.is-fullwidth.has-hero > .apap-ppfg-hero:first-child,
body.apap-singular-reading .apap-reading-main.section:has(.apap-ppfg.has-hero) .apap-ppfg.is-fullwidth.has-hero > .apap-pb:first-child {
    margin-top: 0;
}
@media (max-width: 900px) {
    /* 手机视口 .section padding 通常被覆盖到 ~48px，按需酌情 */
    .apap-ppfg.is-fullwidth.has-hero > .apap-ppfg-hero:first-child,
    .apap-ppfg.is-fullwidth.has-hero > .apap-pb:first-child {
        margin-top: -48px;
    }
    body.apap-singular-reading .apap-reading-main.section:has(.apap-ppfg.has-hero) .apap-ppfg.is-fullwidth.has-hero > .apap-ppfg-hero:first-child,
    body.apap-singular-reading .apap-reading-main.section:has(.apap-ppfg.has-hero) .apap-ppfg.is-fullwidth.has-hero > .apap-pb:first-child {
        margin-top: 0;
    }
}

.apap-ppfg-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--apap-ppfg-hero-overlay, 0.35));
    z-index: 0;
    pointer-events: none;
}

.apap-ppfg-hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.apap-ppfg-hero-title {
    margin: 0;
    /* clamp(下限, 5vw, 上限)：手机 ~28px、桌面 ~64px、宽屏 ~64px 不爆 */
    font-size: clamp(28px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #fff;
    border: none;
    padding: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.apap-ppfg-hero-subtitle {
    margin: 0;
    font-size: clamp(13px, 1.6vw, 18px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.94);
    max-width: 640px;
}

/* ── prose / 单页阅读态污染清洁
 *
 * hero 通过短代码渲染、外面会被 .apap-prose（content-prose.css）和
 * body.apap-singular-reading（style.css:1339+）的规则套住，
 * 把 hero 内的 <h1>~<h4> 染成蓝色、加 border-bottom、加 margin-top。
 * 这里用更高 specificity 把 hero 内所有标题 / 段落强制还原为白色 + 干净排版。
 */
.apap-ppfg-hero h1,
.apap-ppfg-hero h2,
.apap-ppfg-hero h3,
.apap-ppfg-hero h4,
.apap-ppfg-hero p,
body.apap-singular-reading .apap-prose .apap-ppfg-hero h1,
body.apap-singular-reading .apap-prose .apap-ppfg-hero h2,
body.apap-singular-reading .apap-prose .apap-ppfg-hero h3,
body.apap-singular-reading .apap-prose .apap-ppfg-hero h4,
body.apap-singular-reading .apap-prose .apap-ppfg-hero p {
    color: #fff;
    border: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
body.apap-singular-reading .apap-prose .apap-ppfg-hero .apap-ppfg-hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: 0;
    text-align: center;
}
body.apap-singular-reading .apap-prose .apap-ppfg-hero .apap-ppfg-hero-subtitle {
    font-size: 16px;
    line-height: 1.55;
    color: #666;
    text-align: center;
}

/* 同步给 parallax 风格的 .apap-pb 内部标题 / 段落做一次 prose 清洁，
 * 防止 .apap-pb-title (<h2>) 被 .apap-prose h2 / body.apap-singular-reading 染蓝 + 加 border-bottom。
 */
.apap-ppfg.is-fullwidth > .apap-pb h1,
.apap-ppfg.is-fullwidth > .apap-pb h2,
.apap-ppfg.is-fullwidth > .apap-pb h3,
.apap-ppfg.is-fullwidth > .apap-pb h4,
.apap-ppfg.is-fullwidth > .apap-pb p,
body.apap-singular-reading .apap-prose .apap-ppfg.is-fullwidth > .apap-pb h1,
body.apap-singular-reading .apap-prose .apap-ppfg.is-fullwidth > .apap-pb h2,
body.apap-singular-reading .apap-prose .apap-ppfg.is-fullwidth > .apap-pb h3,
body.apap-singular-reading .apap-prose .apap-ppfg.is-fullwidth > .apap-pb h4,
body.apap-singular-reading .apap-prose .apap-ppfg.is-fullwidth > .apap-pb p {
    color: #fff;
    border: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* 手机端：让 hero 高度按 vw 比例进一步收紧（避免一屏占满），并去掉圆角让 fullwidth 视觉更干净 */
@media (max-width: 640px) {
    .apap-ppfg-hero {
        min-height: clamp(180px, 50vw, var(--apap-ppfg-hero-height, 470px));
        padding: 28px 16px;
        border-radius: 10px;
    }
    .apap-ppfg.is-fullwidth .apap-ppfg-hero {
        border-radius: 0;
    }
    .apap-ppfg.is-fullwidth > .apap-pb {
        height: clamp(180px, 50vw, var(--apap-pb-height, 540px));
    }
}