/*
Theme Name: Woostify Child
Theme URI: https://www.poddisp.com/
Description: PODDISP V1 Website Styling Layer。承载全站 design tokens、Chrome 视觉、营销与内容页样式、Woo Blocks 与 My Account 视觉贴合。不承载任何 Designer / 深链 / iframe 业务逻辑（那属于 DK Integration Layer）。
Author: PODDISP
Template: woostify
Version: 1.1.0
Text Domain: woostify-child
*/
/* ==========================================================================
PODDISP V1 — Website Styling Layer
==========================================================================
归属：Implementation Sequence §2 Phase 0.2 A 层
本文件承载：
- 全站 design tokens
- Header / Footer 视觉
- 营销与内容页样式
- Woo Blocks 与 My Account 视觉贴合
- Sticky Footer Bar 样式
- 404 视觉
本文件禁止承载：
- 任何 Designer / 深链 / iframe 业务逻辑（属 DK Integration Layer）
- 父主题源码修改（禁止改 themes/woostify/**）
========================================================================== */
/* ==========================================================================
1. Design Tokens — 标准值（H-15 Owner：Child Theme）
==========================================================================
加载顺序警告（施工前必读）：
Woostify 用 wp_enqueue_style( 'woostify-style', get_stylesheet_uri() )
注册句柄，子主题激活时 get_stylesheet_uri() 就是本文件；
Woostify 的 Customizer 动态 CSS 再通过
wp_add_inline_style( 'woostify-style', ... ) 挂在同一句柄上。
结果：Woostify 动态 CSS 永远排在本文件之后。
因此凡 Woostify 原生设置已经输出的属性（主色、按钮底色/文字色/圆角、
正文色、链接色等），必须改 Woostify 原生设置，不得在本文件用 CSS 覆盖。
本文件只负责：
(a) 声明 token 标准值，作为全站唯一取值来源
(b) 承载原生后台确实无法表达的视觉
---------------------------------------------------------------------------
取值来源标注
[实测] 自冻结稿逐像素取样得出
[派生] 由实测值按明确规则推导，规则写在该行
[沿用] Phase 1 未改动，沿用 Woostify 当前生效默认值，待后续 Phase 确认
实测样本：
4.7/web/mobile/首页修复版.png 941 x 1672
4.7/web/mobile/dongjie1.png 1309 x 1201
4.7/web/pc/dongjie1.png 1054 x 1492
-------------------------------------------------------------------------- */
:root {
/* --- 品牌色 ------------------------------------------------------------ */
/* [实测] Header「Create Now」按钮实心填充区高频色
首页修复版.png 按钮 bbox x611..785 / y36..，色簇 #5130ED–#5232ED
PC 稿同一元素因压缩偏灰（#6142C7），以移动端干净样本为准 */
--dk-brand: #5231ED;
/* [派生] --dk-brand × 0.85（冻结稿无 hover 态，按统一暗化规则推导） */
--dk-brand-hover: #4326C9;
/* [实测] 按钮文字色 */
--dk-brand-contrast: #FFFFFF;
/* [实测] Footer Social 图标色（R1 补充，2026-08-30）。
取样来源：pc/dongjie1.png 图标徽标底色高频簇 ≈ #000026；
mobile/新首页.png 线性图标描边高频簇 ≈ #000050。
两端同属深藏青，取一个统一 token，Desktop 用作徽标底色（配白色图形），
Mobile 用作线性图标本身颜色，两端协调、不新增第二套配色。 */
--dk-social: #0A0A32;
/* --- 文本 -------------------------------------------------------------- */
/* [实测] 冻结稿大标题为纯黑 */
--dk-heading: #000000;
/* [沿用] Woostify accent_color 默认值。冻结稿正文为小字号抗锯齿，
取样受次像素渲染影响无法得到可信真值，Phase 1 不改。
→ 待 Phase 2A 首个正式内容页施工时与冻结稿比对确认 */
--dk-text: #2B2B2B;
/* [沿用] Woostify text_color 默认值，同上待确认 */
--dk-text-muted: #8F8F8F;
/* --- 面 ---------------------------------------------------------------- */
/* [实测] 内容区底色 */
--dk-surface: #FFFFFF;
/* [实测] Footer 色带。
白点校准：mobile 稿最亮高频色为 #FEFEFE/#FFFFFF（真白，无灰调），
pc 稿主色为 #F8F8FA —— 属设计上的浅色画布，非图像偏色。故实测值可直接采用。
pc 内容区 #F7F7FB → Footer 带 #F4F3F8 / #F3F2F7
mobile 内容区 #FFFFFF → Footer 带 #F7F7FD
两端相差 3/255，视觉等价。统一取 pc 实测值。 */
--dk-surface-subtle: #F4F3F8;
/* [实测] Desktop 页面画布底色，pc 稿最高频 #F8F8FA（白卡片浮于其上）。
Mobile 页面底色是真白 #FFFFFF，见 --dk-surface。 */
--dk-canvas: #F8F8FA;
/* [派生] 由 --dk-surface-subtle 加深一档，用于分隔线与卡片描边 */
--dk-border: #E6E4F0;
/* --- 圆角 -------------------------------------------------------------- */
/* [实测] Create Now 按钮左上角实测：距顶 0/1/2/3/4/6 行的横向内缩为
8/5/3/2/1/0 px，圆角半径约 8 图像 px。
同按钮若为胶囊需半径 62px —— 冻结稿明确不是胶囊。
Woostify 默认 buttons_border_radius = 50（胶囊），已按此实测改为 8。 */
--dk-radius: 8px;
--dk-radius-sm: 6px; /* [派生] 小控件 */
--dk-radius-lg: 12px; /* [派生] 卡片 / 面板 */
}
/* ==========================================================================
2. Token → 原生 Owner 映射表（H-15 三层归属）
==========================================================================
同一 token 只允许有一个长期 Owner。后台原生已有设置项的，
以原生设置为准，本文件只登记标准值，不用 CSS 二次覆盖。
token 原生 Owner / 设置项 Phase 1 落值
-------------------- ----------------------------------------- -----------
--dk-brand Woostify › Colors › theme_color #5231ED
Woostify › Buttons › button_background_color
Elementor Kit 17 › system_colors › primary
--dk-brand-hover Woostify › Buttons › button_hover_background_color
Woostify › Colors › link_hover_color #4326C9
--dk-brand-contrast Woostify › Buttons › button_text_color #FFFFFF
Woostify › Buttons › button_hover_text_color
--dk-heading Woostify › Colors › heading_color 未改（沿用）
Elementor Kit 17 › system_colors › secondary
--dk-text Woostify › Colors › accent_color 未改（沿用）
--dk-text-muted Woostify › Colors › text_color 未改（沿用）
Elementor Kit 17 › system_colors › text
--dk-radius Woostify › Buttons › buttons_border_radius 8
Woostify 另会原生输出下列变量（class-woostify-get-css.php），
施工中可直接引用，不要重复定义：
--e-global-color-woostify_color_1 = theme_color
--e-global-color-woostify_color_2 = text_color
--e-global-color-woostify_color_3 = accent_color
--e-global-color-woostify_color_6 = link_hover_color
Woostify 同时通过 REST 过滤器把上述色彩桥接进 Elementor 全局色板，
因此 Elementor 编辑器内可直接选到品牌色。
========================================================================== */
/* ==========================================================================
3. Chrome 视觉
==========================================================================
Batch 2 Header / Create Now CTA ← 已填充
Batch 3 Footer 263 ← 无需 CSS（仅 §3.2 待回填链接位）
Batch 4 Mobile Sticky Footer Bar ← 已填充（仅安全区 / 底部留白）
========================================================================== */
/* --------------------------------------------------------------------------
3.0 Footer —— Owner 变更历史 + 当前实现（R1，2026-08-30 起）
--------------------------------------------------------------------------
历史（2026-08-19 ~ 2026-08-29，供追溯，机制已不再生效）：
Owner 曾是 Elementor Footer Template 263（全站 Theme Builder 条件
include/general）。下面这段描述的是**当时**的原生设置分工，263 的显示条件
已于 R1 摘除，不再输出，仅作历史记录保留：
栏目结构 / 文案 Elementor 模板 263 的 heading 与 nav-menu widget
栏目链接 WordPress 原生菜单 footer-shop / footer-inspiration /
footer-help / footer-company
色带背景 容器 5f051c7b、1a91226 的原生 Background 设置，
取值 var(--dk-surface-subtle)
响应式列宽 / 间距 容器原生响应式 Width / Gap（Tablet 45%、Mobile 22%+6px）
Company 列隐藏 容器原生「响应式 › 隐藏 › Mobile」
How It Works Mobile 容器原生「响应式 › 隐藏 › Desktop + Tablet」
4 栏子菜单 Mobile 隐藏 nav-menu widget 原生「响应式 › 隐藏 › Mobile」
现状（R1 起）：Owner = Woostify Child Theme。
PHP：`inc/pod-footer.php`（钩子接管）+ `template-parts/pod-footer.php`（markup）。
栏目链接 Owner 不变，仍是同一批 WordPress 菜单（footer-shop / footer-inspiration /
footer-help / footer-company / footer-legal），编辑方式不变。
本文件（style.css）现在是这个新 Footer 唯一的结构 + 响应式 Owner
（不再是"原生设置为主、CSS 补两处"，因为原生 Owner 已从 Elementor 换成
纯 PHP + CSS，Native Structure First 的对象变成了 Woostify Customizer /
WordPress 菜单后台，Footer 的排版本身就该由本文件承担）。
Breakpoint：不再使用 Elementor 767/1024，只用 Website 唯一断点集的 991/992
（Implementation Sequence R1 修订说明第 3 点）。原「Tablet 45%」中间态未随之
保留 —— 冻结稿只有 Desktop（pc/dongjie1.png）与 Mobile（mobile/新首页.png）
两张参考图，没有独立 Tablet 冻结稿，因此新实现只做 Desktop(≥992) / Mobile(<992)
两档，不发明未经冻结的中间态。
H-29（社交图标集与落点未定）：现网 263 本身也从未实现社交图标 widget（_elementor_data
核对确认），本次 1:1 迁移后继续保持未实现，不在本批新增，维持 Pending 状态。
Studio Host 的 Footer 排除属 Phase 5.1，本阶段不处理（新 Owner 下的等价任务，
见 Implementation Sequence R1 修订说明第 2 点）。
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
3.1 Header
--------------------------------------------------------------------------
冻结稿（pc/dongjie1.png、mobile/首页修复版.png）：
Desktop PODDISP │ Shop Inspiration How It Works Help │ 👤 🛍 [Create Now]
Mobile PODDISP │ │ 👤 🛍 [Create Now] ☰
Woostify header-layout-1 的真实 DOM 顺序（实测）：
.site-header-inner > .woostify-container
├─ .wrap-toggle-sidebar-menu 汉堡（仅 <992px 显示）
├─ .site-branding PODDISP 字标
├─ .site-navigation 主菜单 19
└─ .site-tools 账户 / 购物袋
Create Now 的 Owner 是 WordPress Menus（菜单 19 中 class=dk-header-cta 的原生菜单项），
本节只负责视觉，不负责链接与文案。
已知与冻结稿的差异（Desktop，待人工确认，见 Phase 1 报告 H-26）：
菜单项渲染在 .site-navigation 内，而 .site-navigation 在 DOM 中先于 .site-tools，
因此 Desktop 上 Create Now 落在两个图标「左侧」而非冻结稿的「右侧」。
要完全对齐需把按钮移出主菜单（PHP hook 或 display:contents 改造），
前者违反「Create Now → WordPress Menus」的 Owner 约定，
后者会破坏 Shop 下拉子菜单的定位上下文。Phase 1 不做，保留原生结构。
Mobile 无此问题：CTA 与图标是可重排的 flex 兄弟节点，已还原为冻结顺序。
-------------------------------------------------------------------------- */
/* 品牌字标 */
#masthead .site-title a {
color: var(--dk-brand);
font-weight: 800;
letter-spacing: -0.02em;
}
/* Create Now CTA 按钮化（Header 内 + 汉堡抽屉内同款） */
#masthead .primary-navigation > li.dk-header-cta > a,
.sidebar-menu .primary-navigation > li.dk-header-cta > a {
display: inline-flex;
align-items: center;
padding: 10px 18px;
background-color: var(--dk-brand);
color: var(--dk-brand-contrast);
border-radius: var(--dk-radius);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
#masthead .primary-navigation > li.dk-header-cta > a:hover,
#masthead .primary-navigation > li.dk-header-cta > a:focus,
.sidebar-menu .primary-navigation > li.dk-header-cta > a:hover,
.sidebar-menu .primary-navigation > li.dk-header-cta > a:focus {
background-color: var(--dk-brand-hover);
color: var(--dk-brand-contrast);
}
/* 菜单项文字继承按钮色，避免被主题菜单色规则拉回 */
#masthead .primary-navigation > li.dk-header-cta > a .menu-item-text,
.sidebar-menu .primary-navigation > li.dk-header-cta > a .menu-item-text {
color: inherit;
}
/* --- Mobile Header（< header_menu_breakpoint 992px）-------------------------
下列三条都在覆盖 Woostify 动态 CSS 的既有移动端规则。
注意：Woostify 用 wp_add_inline_style 把动态 CSS 挂在 'woostify-style' 句柄
（= 本文件）之后，源码顺序上永远晚于本文件，因此这里靠「更高优先级选择器」
取胜，而不是 !important：
Woostify .site-header-inner .site-navigation (0,2,0)
本文件 #masthead .site-navigation (1,1,0) ← 胜出
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
/* (1) Woostify 隐藏整个 .site-navigation。
但冻结稿与 H-25 要求 Mobile 普通内页 Header 保留 Create Now。
这里只放出 CTA 一项，其余菜单项仍然只存在于汉堡抽屉中。 */
#masthead .site-navigation { display: block; }
#masthead .primary-navigation > li:not(.dk-header-cta) { display: none; }
#masthead .main-navigation { padding: 0; }
/* 只剩 1 个 时，浏览器默认 ul { list-style:disc } 会在其左侧露出一个
圆点符号（因为原生 CSS 没有对该 显式 display:非 list-item）。
Desktop 五个菜单项本身以 flex 排列不受影响，只有 Mobile 精简到 1 项时才会暴露。 */
#masthead .primary-navigation { list-style: none; padding-left: 0; }
/* (2) Woostify 在移动端隐藏账户图标（.site-tools .my-account）。
冻结稿 Mobile Header 有账户图标，恢复显示。 */
#masthead .site-tools .my-account { display: block; }
/* (3) 两组布局：PODDISP 固定左，账户/购物袋/CTA/汉堡作为一个整体固定右，
中间留白由一个 auto margin 自动撑开 —— 不再用 justify-content:space-between
去在 4 个兄弟节点之间平均分配空间（那样中间空白被拆成 3 段，只能靠
不断微调各自的 margin/gap 去凑，越调越挤）。
这四个仍是同层 flex 兄弟节点，不改 DOM，只改 order + 一个 margin-left:auto。 */
#masthead .site-header-inner .woostify-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
}
#masthead .site-branding { order: 1; }
#masthead .site-tools { order: 2; }
#masthead .site-navigation { order: 3; }
#masthead .wrap-toggle-sidebar-menu { order: 4; }
/* 右侧功能组的第一个成员（site-tools）吃掉全部剩余空间作为左侧留白，
把自己和它后面的 site-navigation / 汉堡一起推到最右，三者之间只留
下面 (5) 的小固定 gap，不参与整行的平均分布。
三者都不允许被压缩，保证 375px 也不会互相挤形变。 */
#masthead .site-tools {
margin-left: auto;
}
#masthead .site-tools,
#masthead .site-navigation,
#masthead .wrap-toggle-sidebar-menu {
flex-shrink: 0;
}
/* (4) CTA 尺寸按冻结稿实测比例还原：冻结稿按钮高度相对图标高度 ≈ 1.8:1
（按钮是明显更高的胶囊，不是和 24px 图标同级的小字号按钮）。
这是视觉层级问题，靠加大垂直内边距解决；水平内边距/字号控制在
375-390 真实窄屏不挤到 PODDISP 字标换行的范围内。 */
#masthead .primary-navigation > li.dk-header-cta > a {
padding: 10px 14px;
font-size: 14px;
}
/* (5) 右侧四个元素（账户 / 购物袋 / CTA / 汉堡）之间的间距按冻结稿比例放宽，
不是靠压缩 CTA 腾位置。这四个是同层 flex 兄弟节点，用 gap 统一给一个
宽松下限，不改 DOM。 */
#masthead .site-header-inner .woostify-container {
gap: 10px;
}
/* PODDISP 字标在真实 375-390 窄屏 + 放大后的 CTA 同行时不换行 */
#masthead .site-branding {
flex-shrink: 0;
}
#masthead .site-title {
white-space: nowrap;
}
}
/* --------------------------------------------------------------------------
3.2 Footer 待回填链接位（H-24 / Legal）
--------------------------------------------------------------------------
WordPress 原生菜单无法表达「可见但尚无目标页」的链接位。
这些项的 URL 暂为 #，用本类取消点击，避免变成死链或跳到页顶。
Phase 2C 填入真实 permalink 后去掉 class 即可，无需改 CSS。
-------------------------------------------------------------------------- */
/* 冻结稿本身对 pending 与已接线的链接一视同色（Header 主菜单、Footer 栏目里
pending 项与真实链接视觉完全同级），因此这里只保留「行为」层面的取消点击，
不再用 opacity 做「半成品」灰化视觉 —— 那是没有对照冻结稿凭空加的规则。
`dk-link-pending` 是挂在菜单项本身 `_menu_item_classes` 上的原生 WordPress
菜单项 CSS 类（外观 › 菜单 › 该项 › CSS Classes），wp_nav_menu() 原生输出到
，与 Footer 当前 Owner 无关，R1 迁移后无需改动。 */
.dk-link-pending,
.dk-link-pending > a {
pointer-events: none;
cursor: default;
text-decoration: none;
}
/* --------------------------------------------------------------------------
3.0b Footer —— Owner: Woostify Child Theme（R1，2026-08-30）
--------------------------------------------------------------------------
结构：template-parts/pod-footer.php。菜单内容 Owner 仍是 WordPress 菜单后台。
Breakpoint：只用 991/992（Website 唯一断点集），不再有 Elementor 767/1024。
-------------------------------------------------------------------------- */
.pod-footer {
background: var(--dk-surface-subtle);
width: 100%;
}
.pod-footer-top {
max-width: 1400px;
margin-inline: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
gap: 32px 24px;
padding: 56px 5% 32px;
box-sizing: border-box;
}
.pod-footer-brand {
flex: 1 1 200px;
min-width: 180px;
}
.pod-footer-brand-name {
margin: 0 0 10px;
font-family: "Anton", sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: 1px;
color: var(--dk-brand);
}
.pod-footer-tagline {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--dk-text);
}
/* --- Footer Social Icons（R1 补充，2026-08-30）--------------------------
Owner：Icon 视觉 = 本文件 CSS；链接内容/URL = WordPress 菜单（footer-social）。
两处渲染位置（Desktop 品牌栏下方 / Mobile 标题行末端）默认互斥显示，
由下方 §Mobile 覆写块切换，见 pod_footer_social_icons()。 */
.pod-footer-social {
margin: 14px 0 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
}
.pod-footer-social-item {
display: flex;
}
.pod-footer-social-link {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.pod-footer-social-link svg {
width: 16px;
height: 16px;
display: block;
}
/* Desktop：深色圆形徽标 + 白色图形（冻结稿 pc/dongjie1.png 品牌栏下方实测）。 */
.pod-footer-social-desktop .pod-footer-social-link {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--dk-social);
color: var(--dk-brand-contrast);
}
/* Mobile：线性图标，无底色，深藏青图形本身（冻结稿 mobile/新首页.png
标题行末端实测），默认隐藏，由 §Mobile 断点显示，见下方覆写块。 */
.pod-footer-social-mobile {
display: none;
}
.pod-footer-social-mobile .pod-footer-social-link {
color: var(--dk-social);
}
.pod-footer-social-mobile .pod-footer-social-link svg {
width: 19px;
height: 19px;
}
/* Mobile 冻结稿（mobile/新首页.png）实测只有 Instagram / Pinterest / TikTok
三枚，无 Facebook —— 与 Desktop 四枚（多 Facebook）是两端 IA 本身不同
（已用冻结图核对），来源仍是同一个 footer-social 菜单，只在 Mobile 渲染时
多隐藏这一项，不建第二个菜单。 */
.pod-footer-social-mobile li:has(.pod-footer-social-facebook) {
display: none;
}
.pod-footer-col {
flex: 1 1 120px;
min-width: 110px;
}
.pod-footer-col-heading {
margin: 0 0 10px;
font-family: "Anton", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.25;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--dk-heading);
}
.pod-footer-nav {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 3px;
}
.pod-footer-nav a {
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 300;
letter-spacing: -0.45px;
line-height: 1.6;
color: #000000;
text-decoration: none;
}
.pod-footer-nav a:hover {
color: #626060;
}
/* How It Works：只在 Mobile 有独立标题（与冻结稿 Desktop 无此列一致），
Desktop 隐藏整列，不产生空白栏。 */
.pod-footer-col-how-mobile {
display: none;
}
.pod-footer-bottom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 8px;
padding: 18px 20px;
background: var(--dk-surface-subtle);
}
.pod-footer-copyright {
margin: 0;
font-size: 14px;
color: #6B6B6B;
}
.pod-footer-legal-nav {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
}
.pod-footer-legal-nav a {
font-family: "Roboto", sans-serif;
font-size: 13px;
font-weight: 300;
color: #000000;
text-decoration: none;
}
/* --- Mobile（<992px，Website 唯一断点集）------------------------------
冻结稿（mobile/新首页.png）：品牌栏独占一行，随后 Shop / Inspiration /
How It Works / Help 四个标题横排（不带子菜单），Company 栏不出现。 */
@media (max-width: 991px) {
.pod-footer-top {
padding: 40px 5% 20px;
gap: 20px 6px;
}
.pod-footer-brand {
flex: 1 1 100%;
}
.pod-footer-col-shop,
.pod-footer-col-inspiration,
.pod-footer-col-how-mobile,
.pod-footer-col-help {
flex: 1 1 0;
min-width: 0;
}
.pod-footer-col-how-mobile {
display: block;
}
.pod-footer-col-company {
display: none;
}
.pod-footer-col-shop .pod-footer-nav,
.pod-footer-col-inspiration .pod-footer-nav,
.pod-footer-col-help .pod-footer-nav {
display: none;
}
.pod-footer-col-heading {
font-family: inherit;
font-weight: 600;
font-size: 15px;
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
color: var(--dk-brand);
}
/* Social 图标切换到 Mobile 位置：紧跟标题行末端（冻结稿 mobile/新首页.png），
不参与 flex 拉伸，自然宽度靠右，行内空间不足时随 flex-wrap 自然换行。 */
.pod-footer-social-desktop {
display: none;
}
.pod-footer-social-mobile {
display: flex;
flex: 0 0 auto;
align-self: center;
}
}
/* 真实窄屏（≤767px）四栏标题需要更小字号才能各自单行、不挤成两行
（沿用 Gate B 收尾时对 Footer 263 做过的同一实测结论）。 */
@media (max-width: 767px) {
.pod-footer-col-heading {
font-size: 13px;
}
}
/* --------------------------------------------------------------------------
3.3 Mobile Sticky Footer Bar
--------------------------------------------------------------------------
Owner：Woostify › 自定义 › Sticky Footer Bar（启用、四项、显示范围、色值）。
本文件只补原生设置无法表达的两项：
(1) iOS 底部安全区 —— Customizer padding 不能写 env()
(2) 页面底部留白，避免内容被 fixed 底栏挡住 —— 主题无对应设置
底栏未输出时（Product Single 隐藏、Desktop ≥992px 隐藏、Designer 不走主题 footer）
:has() 不成立，不会误加留白。
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.woostify-sticky-footer-bar.woostify-sticky-on-mobile {
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
body:has(.woostify-sticky-footer-bar.woostify-sticky-on-mobile) {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
}
/* Inspiration 项（H-23）：Phase 3 前该目标页尚未建成。
冻结稿要求四项视觉齐平（同级图标 + 文字，无灰态区分），因此原生设置里保持可见
（不删除、不隐藏）。本条只禁用点击避免落到 "#" 造成空跳转，
刻意不降低 opacity —— 冻结稿本身四项视觉一致，不是 pending 就要灰化。 */
.woostify-sticky-footer-bar .woostify-item-list__item:has(.icon-heart) > a {
pointer-events: none;
cursor: default;
}
/* --------------------------------------------------------------------------
3.3b Home 隐藏 Mobile Sticky Footer Bar（R1 补充，2026-08-30）
--------------------------------------------------------------------------
冻结决定：真实 Home（page_on_front = 19）必须隐藏 Mobile Sticky Footer Bar，
其它页面（Cart / Checkout / Account / Category / Product 等）继续按 §3.3
的 Woostify 原生设置显示，不做全局关闭。
Owner / 原生结构：沿用 §3.3 已验证的同一对抗选择器
（.woostify-sticky-footer-bar.woostify-sticky-on-mobile + body:has(...)
padding-bottom），只是把 scope 从 Home V2 测试页（body.pod-home-v2-page）
换成真实 Home（body.pod-home-page，见 functions.php is_front_page() 判定）。
不修改 Woostify Customizer 的 Sticky Footer Bar 全局开关/四项/显示范围，
因此 Desktop（≥992px 本身已用原生设置隐藏该栏）与其它页面零影响。
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
body.pod-home-page .woostify-sticky-footer-bar.woostify-sticky-on-mobile,
body.pod-home-official-page .woostify-sticky-footer-bar.woostify-sticky-on-mobile {
display: none;
}
body.pod-home-page:has(.woostify-sticky-footer-bar.woostify-sticky-on-mobile),
body.pod-home-official-page:has(.woostify-sticky-footer-bar.woostify-sticky-on-mobile) {
padding-bottom: 0;
}
}
/* --------------------------------------------------------------------------
3.4 Order Inquiry（Page 217）—— Woo 原生 tracking 表单视觉
--------------------------------------------------------------------------
2026-08-30：Page 217 退出 `elementor_header_footer`，改走 WordPress 默认
page 模板 + `post_content` 里的 `[woocommerce_order_tracking]`。
本文件只补默认页壳里原生表单需要的宽度、间距、移动端堆叠。
按钮底色 / 文字色 / 圆角继续走 Woostify Customizer，不在此覆盖。
不复制 Woo 模板、不重写 tracking 业务。
-------------------------------------------------------------------------- */
.page-id-217 .woocommerce-form-track-order {
max-width: 640px;
margin-inline: auto;
}
.page-id-217 .woocommerce-form-track-order > p:not(.form-row) {
margin: 0 0 1.25em;
line-height: 1.6;
color: var(--dk-text);
}
.page-id-217 .woocommerce-form-track-order .form-row label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--dk-heading);
}
.page-id-217 .woocommerce-form-track-order .input-text {
border: 1px solid var(--dk-border);
border-radius: var(--dk-radius);
}
.page-id-217 .woocommerce-form-track-order button.button {
min-width: 140px;
margin-top: 8px;
}
@media (max-width: 991px) {
.page-id-217 .woocommerce-form-track-order .form-row-first,
.page-id-217 .woocommerce-form-track-order .form-row-last {
float: none;
width: 100%;
}
}
/* --------------------------------------------------------------------------
3.5 Contact Us（Page 228）—— 最小非 Elementor 页面壳
--------------------------------------------------------------------------
2026-08-30：Page 228 退出 `elementor_header_footer`，改走 WordPress 默认
page 模板 + 可后台维护的 `post_content`。
本文件只补默认页壳宽度、间距、待接入提示。不承载表单业务、不引入插件、
不写死未批准的邮箱 / 地址 / 营业时间。Breakpoint 仅 991/992。
-------------------------------------------------------------------------- */
.page-id-228 .site-content > .woostify-container {
max-width: 720px;
}
.page-id-228 .pod-contact {
padding: 2.5rem 0 3rem;
}
.page-id-228 .pod-contact h1 {
margin: 0 0 0.75em;
color: var(--dk-heading);
font-size: 2rem;
line-height: 1.2;
}
.page-id-228 .pod-contact p {
margin: 0 0 1.25em;
color: var(--dk-text);
line-height: 1.65;
}
.page-id-228 .pod-contact-cta {
display: inline-block;
margin: 0 0 1.5em;
padding: 0.7em 1.25em;
border-radius: var(--dk-radius);
background: var(--dk-brand);
color: var(--dk-brand-contrast);
text-decoration: none;
font-weight: 600;
}
.page-id-228 .pod-contact-cta:hover,
.page-id-228 .pod-contact-cta:focus {
background: var(--dk-brand-hover);
color: var(--dk-brand-contrast);
}
.page-id-228 .pod-contact-pending {
padding: 1.1em 1.2em;
border: 1px dashed var(--dk-border);
border-radius: var(--dk-radius-lg);
background: var(--dk-surface-subtle);
}
.page-id-228 .pod-contact-pending p {
margin: 0;
color: var(--dk-text-muted);
}
@media (max-width: 991px) {
.page-id-228 .pod-contact {
padding: 1.75rem 0 2.25rem;
}
.page-id-228 .pod-contact h1 {
font-size: 1.65rem;
}
}
/* ==========================================================================
HOME V2 TEST
==========================================================================
Owner：A 层 woostify-child/style.css（Presentation）
依据：Implementation Sequence §8 Website Styling Implementation Contract
冻结图：
Mobile 4.7/web/mobile/新首页.png
（Frozen Page Design Reference 登记名为 首页修复版.png，
该文件已不在目录中；当前有效 Mobile 首页冻结文件为 新首页.png）
Desktop 4.7/web/pc/dongjie1.png
Scope：.pod-home-v2（内容）+ body.pod-home-v2-page（Chrome 例外：隐藏 Sticky）
禁止：设备宽度 patch（375/390/414/430）、Elementor hash、裸元素选择器、
污染 Page 19 / Product / Cart / Checkout / Account / Designer。
Elementor 只提供 Semantic Skeleton + 内容。
本文件承担 Layout / Flex / Grid / Gap / Spacing / Typography / Radius。
Breakpoint 只用已登记集的反转：767 / 991 / 1024。
-------------------------------------------------------------------------- */
/* --- Home V2：Mobile Sticky Footer Bar 隐藏（仅本测试页） -----------------
用户决定：Home 不显示 Mobile Sticky Footer Bar。
只 scope 到 body.pod-home-v2-page，不改 Woostify 全局 Sticky 设置，
因此 Cart / Checkout / Category / Account / Product Single 不受影响。
对抗选择器：.woostify-sticky-footer-bar.woostify-sticky-on-mobile
以及 §3.3 的 body:has(...) padding-bottom。
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
body.pod-home-v2-page .woostify-sticky-footer-bar.woostify-sticky-on-mobile {
display: none;
}
body.pod-home-v2-page:has(.woostify-sticky-footer-bar.woostify-sticky-on-mobile) {
padding-bottom: 0;
}
}
/* --- Home V2：对抗 Elementor 容器变量（frontend.css + post-216095.css） --
被对抗：
.e-con { --flex-wrap-mobile: wrap } 以及 @media mobile { --flex-wrap: var(--flex-wrap-mobile) }
.elementor-216095 .elementor-element.elementor-element- { --container-widget-width:100% }
不用 Elementor hash。选择器靠 body.pod-home-v2-page + semantic class，
特异度高于 post CSS 的三层 class，无需 !important。
-------------------------------------------------------------------------- */
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-inner,
body.pod-home-v2-page .pod-home-v2 .pod-home-trust-inner,
body.pod-home-v2-page .pod-home-v2 .pod-home-product-grid,
body.pod-home-v2-page .pod-home-v2 .pod-home-steps,
body.pod-home-v2-page .pod-home-v2 .pod-home-inspiration-grid,
body.pod-home-v2-page .pod-home-v2 .pod-home-section-heading,
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-proof,
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-actions {
--flex-wrap-mobile: nowrap;
--flex-wrap: nowrap;
flex-wrap: nowrap;
}
body.pod-home-v2-page .pod-home-v2 .pod-home-trust-cell,
body.pod-home-v2-page .pod-home-v2 .pod-home-product-card,
body.pod-home-v2-page .pod-home-v2 .pod-home-step-item,
body.pod-home-v2-page .pod-home-v2 .pod-home-inspiration-card {
--width: 0;
--container-widget-width: auto;
width: 0;
max-width: none;
min-width: 0;
flex: 1 1 0%;
}
/* Reviews：Mobile 冻结稿是纵向卡片，不是三列挤压。 */
body.pod-home-v2-page .pod-home-v2 .pod-home-reviews-grid {
--flex-wrap-mobile: nowrap;
--flex-wrap: nowrap;
flex-direction: column;
flex-wrap: nowrap;
}
body.pod-home-v2-page .pod-home-v2 .pod-home-review-card {
--width: 100%;
--container-widget-width: auto;
width: auto;
max-width: none;
min-width: 0;
flex: 0 0 auto;
}
body.pod-home-v2-page .pod-home-v2 .pod-home-product-card .elementor-widget-image,
body.pod-home-v2-page .pod-home-v2 .pod-home-product-card img,
body.pod-home-v2-page .pod-home-v2 .pod-home-inspiration-card .elementor-widget-image,
body.pod-home-v2-page .pod-home-v2 .pod-home-inspiration-card img {
width: 100%;
}
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-copy,
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-visual {
--width: auto;
--container-widget-width: auto;
width: auto;
max-width: none;
min-width: 0;
}
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-copy {
flex: 1 1 47%;
}
body.pod-home-v2-page .pod-home-v2 .pod-home-hero-visual {
flex: 1 1 53%;
}
/* --- Home V2：Elementor 默认外壳中和（仅本页内容树） -------------------- */
.pod-home-v2 {
--pod-navy: #111a49;
--pod-muted: #707994;
--pod-line: #e8eaf3;
--pod-serif: Georgia, "Times New Roman", serif;
color: var(--pod-navy);
overflow-x: clip;
}
.pod-home-v2 .elementor-widget-container {
margin: 0;
padding: 0;
}
.pod-home-v2 .elementor-heading-title {
margin: 0;
color: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.pod-home-v2 .elementor-widget-image img {
display: block;
width: 100%;
height: auto;
border: 0;
}
.pod-home-v2 .elementor-button-wrapper {
display: block;
}
.pod-home-v2 .elementor-text-editor,
.pod-home-v2 .elementor-text-editor p {
margin: 0;
}
.pod-home-v2 .pod-home-section-inner {
width: min(72rem, 100%);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 1.5rem);
min-width: 0;
}
.pod-home-v2 .pod-home-hero,
.pod-home-v2 .pod-home-trust,
.pod-home-v2 .pod-home-product-types,
.pod-home-v2 .pod-home-how-it-works,
.pod-home-v2 .pod-home-inspiration,
.pod-home-v2 .pod-home-reviews {
width: 100%;
}
/* --- Hero ---------------------------------------------------------------- */
.pod-home-v2 .pod-home-hero {
padding-top: 0.75rem;
padding-bottom: 0.25rem;
}
.pod-home-v2 .pod-home-hero-inner {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0;
}
.pod-home-v2 .pod-home-hero-copy {
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1 1 47%;
min-width: 0;
position: relative;
z-index: 2;
padding-top: 0.25rem;
padding-right: 0.3rem;
}
.pod-home-v2 .pod-home-hero-visual {
flex: 1 1 53%;
min-width: 0;
overflow: hidden;
}
.pod-home-v2 .pod-home-hero-title .elementor-heading-title {
font-family: var(--pod-serif);
font-size: clamp(1.35rem, 5.8vw, 1.6rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
color: var(--pod-navy);
}
.pod-home-v2 .pod-home-hero-accent {
display: inline-block;
margin-top: 0.1em;
color: var(--dk-brand);
font-style: italic;
font-weight: 700;
}
.pod-home-v2 .pod-home-hero-badge {
display: none; /* Elementor hide_mobile 之外的流式兜底：Mobile 冻结稿无 badge */
}
.pod-home-v2 .pod-home-hero-lead {
display: none; /* Mobile 冻结稿无 Hero 解释段 */
}
.pod-home-v2 .pod-home-hero-features {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.pod-home-v2 .pod-home-feature {
display: grid;
grid-template-columns: 1.9rem 1fr;
gap: 0.5rem;
align-items: center;
min-width: 0;
}
.pod-home-v2 .pod-home-feature-icon {
width: 1.9rem;
height: 1.9rem;
display: grid;
place-items: center;
border: 1px solid #ded9ff;
border-radius: var(--dk-radius);
color: var(--dk-brand);
background: var(--dk-surface);
font-family: var(--pod-serif);
font-size: 1.05rem;
font-weight: 800;
}
.pod-home-v2 .pod-icon-spark::before {
content: "✦";
font-size: 0.95rem;
line-height: 1;
}
.pod-home-v2 .pod-icon-grid {
background-image:
linear-gradient(var(--dk-brand), var(--dk-brand)),
linear-gradient(var(--dk-brand), var(--dk-brand)),
linear-gradient(var(--dk-brand), var(--dk-brand)),
linear-gradient(var(--dk-brand), var(--dk-brand));
background-size: 5px 5px;
background-repeat: no-repeat;
background-position: 6px 6px, 13px 6px, 6px 13px, 13px 13px;
}
.pod-home-v2 .pod-icon-type {
font-family: var(--pod-serif);
font-size: 1.15rem;
font-weight: 800;
line-height: 1;
}
.pod-home-v2 .pod-home-feature-copy {
min-width: 0;
}
.pod-home-v2 .pod-home-feature-copy strong {
display: block;
color: var(--pod-navy);
font-size: clamp(0.7rem, 2.9vw, 0.78rem);
line-height: 1.18;
}
.pod-home-v2 .pod-home-feature-copy span {
display: block;
margin-top: 0.15rem;
color: var(--pod-muted);
font-size: clamp(0.62rem, 2.6vw, 0.68rem);
line-height: 1.26;
}
.pod-home-v2 .pod-home-hero-proof {
margin-top: 1.15rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.pod-home-v2 .pod-home-hero-avatars {
flex: 0 0 auto;
width: 3.4rem;
}
.pod-home-v2 .pod-home-hero-avatars img {
width: 3.4rem;
height: 1.95rem;
object-fit: cover;
object-position: left center;
border-radius: 999px;
}
.pod-home-v2 .pod-home-hero-proof-copy strong {
display: block;
color: #273254;
font-size: clamp(0.64rem, 2.7vw, 0.7rem);
line-height: 1.1;
}
.pod-home-v2 .pod-home-hero-stars {
display: flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.2rem;
color: #f4a900;
font-size: 0.65rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.pod-home-v2 .pod-home-hero-stars b {
color: #273254;
font-weight: 700;
font-size: 0.62rem;
}
.pod-home-v2 .pod-home-hero-actions {
margin-top: 0.85rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
.pod-home-v2 .pod-home-cta-primary {
width: 100%;
}
.pod-home-v2 .pod-home-cta-primary .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.6rem;
padding: 0.55rem 1.1rem;
background-color: var(--dk-brand);
color: var(--dk-brand-contrast);
border: 0;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.pod-home-v2 .pod-home-cta-primary .elementor-button:hover,
.pod-home-v2 .pod-home-cta-primary .elementor-button:focus {
background-color: var(--dk-brand-hover);
color: var(--dk-brand-contrast);
}
.pod-home-v2 .pod-home-cta-secondary {
display: none; /* Mobile / Tablet 冻结表面只有一个 Hero CTA；Desktop 由 min-width:1025 放出 */
}
.pod-home-v2 .pod-home-hero-image img {
width: 122%;
max-width: none;
height: 20rem;
object-fit: cover;
object-position: 51% 47%;
transform: translateX(-4%);
}
/* --- Trust --------------------------------------------------------------- */
.pod-home-v2 .pod-home-trust {
padding-top: 0.35rem;
padding-bottom: 0.4rem;
}
.pod-home-v2 .pod-home-trust-inner {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
min-width: 0;
border: 1px solid var(--pod-line);
border-radius: 13px;
background: var(--dk-surface);
overflow: hidden;
}
.pod-home-v2 .pod-home-trust-cell {
flex: 1 1 0;
min-width: 0;
}
.pod-home-v2 .pod-home-trust-cell + .pod-home-trust-cell {
border-left: 1px solid var(--pod-line);
}
.pod-home-v2 .pod-home-trust-item {
display: grid;
grid-template-columns: 1.45rem 1fr;
gap: 0.2rem;
align-items: center;
padding: 0.5rem 0.3rem;
min-width: 0;
}
.pod-home-v2 .pod-home-trust-icon {
width: 1.4rem;
height: 1.4rem;
color: var(--dk-brand);
display: grid;
place-items: center;
font-size: 0.95rem;
line-height: 1;
}
.pod-home-v2 .pod-icon-dpi::before { content: "▣"; }
.pod-home-v2 .pod-icon-truck::before { content: "⛟"; }
.pod-home-v2 .pod-icon-shield::before { content: "⛨"; }
.pod-home-v2 .pod-icon-medal::before { content: "★"; }
.pod-home-v2 .pod-home-trust-copy strong {
display: block;
color: var(--pod-navy);
font-size: clamp(0.55rem, 2.4vw, 0.62rem);
line-height: 1.12;
}
.pod-home-v2 .pod-home-trust-copy span {
display: block;
margin-top: 0.1rem;
color: var(--pod-muted);
font-size: clamp(0.48rem, 2.2vw, 0.55rem);
line-height: 1.12;
}
/* --- Shared section heading ---------------------------------------------- */
.pod-home-v2 .pod-home-product-types,
.pod-home-v2 .pod-home-how-it-works,
.pod-home-v2 .pod-home-inspiration,
.pod-home-v2 .pod-home-reviews {
padding-top: 1.05rem;
}
.pod-home-v2 .pod-home-section-heading {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.5rem;
min-width: 0;
}
.pod-home-v2 .pod-home-section-title .elementor-heading-title {
font-family: var(--pod-serif);
font-size: clamp(1.1rem, 4.6vw, 1.2rem);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--pod-navy);
}
.pod-home-v2 .pod-home-viewall .elementor-heading-title {
color: var(--dk-brand);
font-size: clamp(0.62rem, 2.6vw, 0.7rem);
font-weight: 800;
white-space: nowrap;
}
.pod-home-v2 .pod-home-link-pending .elementor-heading-title {
pointer-events: none;
cursor: default;
}
/* --- Product Types ------------------------------------------------------- */
.pod-home-v2 .pod-home-product-grid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.45rem;
min-width: 0;
}
.pod-home-v2 .pod-home-product-card {
flex: 1 1 0;
min-width: 0;
overflow: hidden;
border: 1px solid var(--pod-line);
border-radius: 11px;
background: var(--dk-surface);
}
.pod-home-v2 .pod-home-product-image img {
aspect-ratio: 1 / 0.9;
object-fit: cover;
object-position: center;
}
.pod-home-v2 .pod-home-product-title .elementor-heading-title {
display: block;
padding: 0.45rem 0.2rem 0.5rem;
text-align: center;
color: var(--pod-navy);
font-size: clamp(0.62rem, 2.7vw, 0.7rem);
font-weight: 700;
line-height: 1.1;
}
.pod-home-v2 .pod-home-product-sub {
display: none; /* Mobile 冻结稿卡片只有品类名；Desktop 放出副标题 */
}
.pod-home-v2 .pod-home-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
height: 1.25rem;
margin-top: 0.15rem;
}
.pod-home-v2 .pod-home-dots i {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #e0e2ec;
}
.pod-home-v2 .pod-home-dots i.is-active {
width: 13px;
border-radius: 6px;
background: var(--dk-brand);
}
/* --- How It Works -------------------------------------------------------- */
.pod-home-v2 .pod-home-how-it-works {
border-top: 1px solid var(--pod-line);
}
.pod-home-v2 .pod-home-how-it-works .pod-home-section-title {
margin-bottom: 0.55rem;
}
.pod-home-v2 .pod-home-steps {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
gap: 0.35rem;
min-width: 0;
}
.pod-home-v2 .pod-home-step-item {
flex: 1 1 0;
min-width: 0;
position: relative;
}
.pod-home-v2 .pod-home-step {
display: grid;
grid-template-columns: 2.15rem 1fr;
grid-template-rows: auto auto;
column-gap: 0.3rem;
min-width: 0;
}
.pod-home-v2 .pod-home-step-badge {
grid-column: 1;
grid-row: 1;
position: relative;
z-index: 2;
width: 1.05rem;
height: 1.05rem;
margin-left: -0.1rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--dk-brand);
color: #fff;
font-size: 0.54rem;
font-weight: 800;
}
.pod-home-v2 .pod-home-step-icon {
grid-column: 1;
grid-row: 1;
width: 2.15rem;
height: 2.15rem;
margin-top: 0.35rem;
display: grid;
place-items: center;
border-radius: 50%;
background: #f6f2ff;
color: var(--dk-brand);
font-size: 1rem;
}
.pod-home-v2 .pod-icon-upload::before { content: "↑"; font-weight: 700; }
.pod-home-v2 .pod-icon-shirt::before { content: "▣"; }
.pod-home-v2 .pod-icon-box::before { content: "▢"; }
.pod-home-v2 .pod-home-step-copy {
grid-column: 2;
grid-row: 1 / span 2;
min-width: 0;
padding-top: 0.15rem;
}
.pod-home-v2 .pod-home-step-copy strong {
display: block;
color: var(--pod-navy);
font-size: clamp(0.55rem, 2.4vw, 0.62rem);
line-height: 1.15;
}
.pod-home-v2 .pod-home-step-copy span {
display: block;
margin-top: 0.2rem;
color: var(--pod-muted);
font-size: clamp(0.48rem, 2.2vw, 0.55rem);
line-height: 1.22;
}
/* --- Inspiration --------------------------------------------------------- */
.pod-home-v2 .pod-home-inspiration-grid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.45rem;
min-width: 0;
}
.pod-home-v2 .pod-home-inspiration-card {
flex: 1 1 0;
min-width: 0;
position: relative;
}
.pod-home-v2 .pod-home-inspiration-image img {
aspect-ratio: 1.2 / 0.83;
object-fit: cover;
border-radius: 9px;
}
.pod-home-v2 .pod-home-inspiration-label {
position: absolute;
top: 0.28rem;
left: 0.28rem;
z-index: 1;
}
.pod-home-v2 .pod-home-inspiration-label .elementor-heading-title {
display: inline-block;
padding: 0.12rem 0.35rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--pod-navy);
font-size: clamp(0.42rem, 1.9vw, 0.5rem);
font-weight: 800;
line-height: 1.2;
}
/* --- Reviews ------------------------------------------------------------- */
.pod-home-v2 .pod-home-reviews {
padding-bottom: 1.1rem;
}
.pod-home-v2 .pod-home-reviews-grid {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0.7rem;
min-width: 0;
margin-top: 0.5rem;
}
.pod-home-v2 .pod-home-review-card {
flex: 1 1 0;
min-width: 0;
position: relative;
padding: 0.55rem 0.5rem 0.5rem;
border: 1px solid var(--pod-line);
border-radius: 11px;
background: var(--dk-surface);
}
.pod-home-v2 .pod-home-review-person {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.pod-home-v2 .pod-home-review-avatar {
flex: 0 0 auto;
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
background: #ece7ff;
}
.pod-home-v2 .pod-home-review-who strong {
display: block;
font-size: clamp(0.58rem, 2.4vw, 0.68rem);
color: var(--pod-navy);
line-height: 1.15;
}
.pod-home-v2 .pod-home-review-verified {
display: block;
color: #2f9e5f;
font-size: clamp(0.48rem, 2vw, 0.55rem);
font-weight: 600;
}
.pod-home-v2 .pod-home-review-stars {
margin-top: 0.35rem;
color: #f4a900;
font-size: 0.58rem;
letter-spacing: 0.04em;
}
.pod-home-v2 .pod-home-review-quote {
margin-top: 0.25rem;
padding-right: 2.4rem;
color: var(--pod-navy);
font-size: clamp(0.78rem, 3.2vw, 0.88rem);
line-height: 1.45;
}
.pod-home-v2 .pod-home-review-thumb {
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
width: 2.15rem;
}
.pod-home-v2 .pod-home-review-thumb img {
width: 2.15rem;
height: 2.15rem;
object-fit: cover;
border-radius: 6px;
}
/* --- Tablet / 内容已过 Elementor mobile（min-width:768 = 767 的反转） ---- */
@media (min-width: 768px) {
.pod-home-v2 .pod-home-section-inner {
padding-inline: clamp(1.25rem, 3vw, 2rem);
}
.pod-home-v2 .pod-home-hero-title .elementor-heading-title {
font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.pod-home-v2 .pod-home-hero-copy {
flex: 1 1 44%;
padding-right: 1rem;
}
.pod-home-v2 .pod-home-hero-visual {
flex: 1 1 56%;
}
.pod-home-v2 .pod-home-hero-image img {
width: 100%;
height: auto;
max-height: 28rem;
transform: none;
object-fit: contain;
object-position: center;
}
.pod-home-v2 .pod-home-hero-features {
margin-top: 1.25rem;
gap: 0.95rem;
}
.pod-home-v2 .pod-home-feature-copy strong {
font-size: 0.92rem;
}
.pod-home-v2 .pod-home-feature-copy span {
font-size: 0.8rem;
}
.pod-home-v2 .pod-home-hero-actions {
width: auto;
margin-top: 1.1rem;
}
.pod-home-v2 .pod-home-cta-primary {
width: auto;
}
.pod-home-v2 .pod-home-cta-primary .elementor-button {
width: auto;
min-width: 10rem;
border-radius: var(--dk-radius);
padding: 0.7rem 1.35rem;
}
.pod-home-v2 .pod-home-hero-proof {
margin-top: 1.1rem;
}
.pod-home-v2 .pod-home-trust-item {
padding: 0.85rem 0.7rem;
grid-template-columns: 1.8rem 1fr;
gap: 0.55rem;
}
.pod-home-v2 .pod-home-trust-copy strong {
font-size: 0.85rem;
}
.pod-home-v2 .pod-home-trust-copy span {
font-size: 0.72rem;
}
.pod-home-v2 .pod-home-section-title .elementor-heading-title {
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}
.pod-home-v2 .pod-home-section-heading {
margin-bottom: 0.9rem;
}
.pod-home-v2 .pod-home-how-it-works .pod-home-section-title {
text-align: left;
}
.pod-home-v2 .pod-home-product-grid {
gap: 1rem;
}
.pod-home-v2 .pod-home-product-card {
border: 0;
border-radius: 16px;
box-shadow: 0 8px 28px rgba(28, 34, 73, 0.08);
}
.pod-home-v2 .pod-home-product-title .elementor-heading-title {
padding: 0.7rem 0.9rem 0.5rem;
font-size: 1rem;
}
.pod-home-v2 .pod-home-steps {
gap: 1.2rem;
}
.pod-home-v2 .pod-home-step-copy strong {
font-size: 0.95rem;
}
.pod-home-v2 .pod-home-step-copy span {
font-size: 0.8rem;
}
.pod-home-v2 .pod-home-inspiration-grid {
gap: 0.85rem;
}
.pod-home-v2 .pod-home-inspiration-image img {
aspect-ratio: 3 / 4;
border-radius: 14px;
}
.pod-home-v2 .pod-home-reviews-grid {
gap: 0.85rem;
}
.pod-home-v2 .pod-home-review-quote {
font-size: 0.78rem;
}
}
/* --- Desktop（min-width:1025 = Elementor tablet 1024 的反转） ------------
Desktop-only IA 节点只在这里放出，避免 768–1024 出现半 Desktop / 半 Mobile。
-------------------------------------------------------------------------- */
@media (min-width: 1025px) {
.pod-home-v2 .pod-home-hero {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.pod-home-v2 .pod-home-hero-title .elementor-heading-title {
font-size: clamp(2.1rem, 2.6vw, 2.75rem);
}
.pod-home-v2 .pod-home-hero-copy {
flex: 1 1 40%;
padding-top: 0.5rem;
}
.pod-home-v2 .pod-home-hero-badge {
display: inline-flex;
align-items: center;
margin-bottom: 0.7rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: #efeaff;
color: var(--dk-brand);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.pod-home-v2 .pod-home-hero-badge .elementor-heading-title {
color: var(--dk-brand);
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
.pod-home-v2 .pod-home-hero-lead {
display: block;
margin-top: 0.85rem;
max-width: 36rem;
color: var(--pod-muted);
font-size: 0.92rem;
line-height: 1.5;
}
.pod-home-v2 .pod-home-hero-actions {
order: 2;
}
.pod-home-v2 .pod-home-hero-proof {
order: 3;
}
.pod-home-v2 .pod-home-cta-secondary {
display: block;
}
.pod-home-v2 .pod-home-cta-secondary .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.6rem;
padding: 0.7rem 1.2rem;
background: transparent;
color: var(--dk-brand);
border: 1px solid var(--dk-brand);
border-radius: var(--dk-radius);
font-size: 0.9rem;
font-weight: 700;
}
.pod-home-v2 .pod-home-section-inner {
padding-inline: 2rem;
}
.pod-home-v2 .pod-home-section-heading {
justify-content: center;
}
.pod-home-v2 .pod-home-viewall,
.pod-home-v2 .pod-home-product-dots {
display: none; /* Desktop 冻结稿无 View all / 分页点 */
}
.pod-home-v2 .pod-home-how-it-works .pod-home-section-title {
text-align: center;
}
.pod-home-v2 .pod-home-product-title .elementor-heading-title {
padding: 0.7rem 0.9rem 0.15rem;
text-align: left;
}
.pod-home-v2 .pod-home-product-sub {
display: block;
padding: 0 0.9rem 0.9rem;
}
.pod-home-v2 .pod-home-product-sub .elementor-heading-title {
color: var(--pod-muted);
font-size: 0.78rem;
font-weight: 400;
text-align: left;
}
.pod-home-v2 .pod-home-inspiration-label {
display: none; /* Desktop 冻结稿无分类 pill */
}
.pod-home-v2 .pod-home-reviews {
display: none; /* 与 Elementor hide_desktop 同口径；Desktop 冻结稿无 Reviews */
}
.pod-home-v2 .pod-home-product-types,
.pod-home-v2 .pod-home-how-it-works,
.pod-home-v2 .pod-home-inspiration,
.pod-home-v2 .pod-home-reviews {
padding-top: 2rem;
}
.pod-home-v2 .pod-home-trust-inner {
border-radius: 16px;
}
}
/* ==========================================================================
HOME V3 TEST — Figma Visual Pilot（2026-09-02）
==========================================================================
Owner：A 层 woostify-child/style.css（Presentation）
测试页：/home-v3/（template-home-v3.php）
Figma：Desktop 7:3 + Mobile 7:158
Scope：body.pod-home-v3-page + .pod-home-v3 （禁止无页面作用域选择器）
本段 Header/Footer 仅为页面内视觉模拟，不注册全站 Chrome，不改 Owner。
CTA：Product-first（Woo Shop）。Breakpoint：仅 991 / 992。流式布局。
本段 scoped 变量仅挂在 .pod-home-v3，不改 --dk-*，不新增全局 token。
-------------------------------------------------------------------------- */
/* --- Home V3：接上现有 Woostify 内容壳；仅本页隐藏正式 Chrome ------------- */
body.pod-home-v3-page .site-content {
margin: 0;
padding-top: 0;
}
body.pod-home-v3-page .page-header,
body.pod-home-v3-page .entry-header {
display: none;
}
body.pod-home-v3-page .site-content > .woostify-container {
max-width: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.pod-home-v3-page #masthead,
body.pod-home-v3-page #colophon.pod-footer {
display: none;
}
@media (max-width: 991px) {
body.pod-home-v3-page .woostify-sticky-footer-bar.woostify-sticky-on-mobile {
display: none;
}
body.pod-home-v3-page:has(.woostify-sticky-footer-bar.woostify-sticky-on-mobile) {
padding-bottom: 0;
}
}
.pod-home-v3 {
--pod-navy: #10184a;
--pod-muted: #747d96;
--pod-lead: #3f4a68;
--pod-line: #e7e9f2;
--pod-v3-brand: #6437f2;
--pod-v3-brand-2: #5325e7;
--pod-v3-grad: linear-gradient(135deg, #6437f2 0%, #5325e7 100%);
--pod-serif: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
--pod-space-1: 0.5rem;
--pod-space-2: 1rem;
--pod-space-3: 1.5rem;
--pod-space-4: 2rem;
--pod-space-5: 3rem;
--pod-radius-card: 12px;
--pod-shadow: 0 1px 2px rgba(16, 24, 74, 0.06);
--pod-shadow-hover: 0 10px 28px rgba(16, 24, 74, 0.12);
color: var(--pod-navy);
overflow-x: clip;
background: #fff;
font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
.pod-home-v3 a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.pod-home-v3 a:focus-visible {
outline: 2px solid var(--pod-v3-brand);
outline-offset: 3px;
}
.pod-home-v3 ul,
.pod-home-v3 ol,
.pod-home-v3 figure {
margin: 0;
padding: 0;
list-style: none;
}
.pod-home-v3 svg {
display: block;
width: 100%;
height: 100%;
}
.pod-home-v3 .pod-home-shell {
width: min(82.5rem, 100%);
margin-inline: auto;
padding-inline: clamp(1rem, 4.2vw, 1.5rem);
min-width: 0;
}
/* --- Visual Header（仅 .pod-home-v3 内） --------------------------------- */
.pod-home-v3 .pod-home-v3-chrome {
border-bottom: 1px solid #eef0f5;
background: #fff;
}
.pod-home-v3 .pod-home-v3-chrome-inner {
display: flex;
align-items: center;
min-height: 3.625rem;
gap: 0.75rem;
}
.pod-home-v3 .pod-home-v3-logo {
flex: 0 0 auto;
margin: 0;
color: var(--pod-v3-brand);
font-size: clamp(1.3rem, 4vw, 1.8rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
.pod-home-v3 .pod-home-v3-nav {
display: none;
align-items: center;
justify-content: center;
flex: 1 1 auto;
gap: clamp(1.25rem, 2.4vw, 2.1rem);
color: var(--pod-navy);
font-size: 0.875rem;
font-weight: 700;
}
.pod-home-v3 .pod-home-v3-nav span {
font-weight: 500;
}
.pod-home-v3 .pod-home-v3-chrome-tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.55rem;
margin-left: auto;
}
.pod-home-v3 .pod-home-v3-tool {
width: 1.3rem;
height: 1.3rem;
color: var(--pod-navy);
}
.pod-home-v3 .pod-home-v3-chrome-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.375rem;
padding: 0.45rem 0.9rem;
border-radius: 10px;
background-image: var(--pod-v3-grad);
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
white-space: nowrap;
}
.pod-home-v3 .pod-home-v3-chrome-cta:hover,
.pod-home-v3 .pod-home-v3-chrome-cta:focus {
color: #fff;
}
.pod-home-v3 .pod-home-v3-burger {
width: 1.55rem;
height: 1.55rem;
color: var(--pod-navy);
}
/* --- Hero ---------------------------------------------------------------- */
.pod-home-v3 .pod-home-hero {
padding-top: 0.85rem;
}
.pod-home-v3 .pod-home-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
column-gap: 0;
min-width: 0;
}
.pod-home-v3 .pod-home-hero-copy {
position: relative;
z-index: 2;
padding-top: 0.2rem;
padding-right: 0.3rem;
min-width: 0;
}
.pod-home-v3 .pod-home-hero-badge,
.pod-home-v3 .pod-home-hero-lead,
.pod-home-v3 .pod-home-hero-actions,
.pod-home-v3 .pod-home-product-sub,
.pod-home-v3 .pod-home-v3-card-arrow {
display: none;
}
.pod-home-v3 .pod-home-hero-title span.pod-home-v3-title-desktop,
.pod-home-v3 .pod-home-feature-copy span.pod-home-v3-feature-desktop {
display: none;
}
.pod-home-v3 .pod-home-hero-title span.pod-home-v3-title-mobile,
.pod-home-v3 .pod-home-feature-copy span.pod-home-v3-feature-mobile {
display: block;
}
.pod-home-v3 .pod-home-hero-title {
margin: 0;
color: var(--pod-navy);
font-family: inherit;
font-size: clamp(1.3rem, 5.6vw, 1.85rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.03em;
text-wrap: balance;
max-inline-size: 18ch;
}
.pod-home-v3 .pod-home-hero-title span {
display: block;
}
.pod-home-v3 .pod-home-hero-accent {
margin-top: 0.08em;
color: var(--pod-v3-brand);
font-style: italic;
}
.pod-home-v3 .pod-home-features {
margin-top: 1.15rem;
display: grid;
gap: 0.85rem;
}
.pod-home-v3 .pod-home-feature {
display: grid;
grid-template-columns: 1.9rem minmax(0, 1fr);
align-items: center;
gap: 0.7rem;
min-width: 0;
}
.pod-home-v3 .pod-home-feature-icon {
width: 1.9rem;
height: 1.9rem;
display: grid;
place-items: center;
padding: 0.28rem;
border: 1px solid #ded9ff;
border-radius: 8px;
color: var(--pod-muted);
background: #fff;
box-sizing: border-box;
}
.pod-home-v3 .pod-home-feature-icon svg {
width: 0.95rem;
height: 0.95rem;
}
.pod-home-v3 .pod-home-feature-icon-stroke svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linejoin: round;
}
.pod-home-v3 .pod-home-feature-copy strong,
.pod-home-v3 .pod-home-feature-copy span {
display: block;
}
.pod-home-v3 .pod-home-feature-copy strong {
color: var(--pod-navy);
font-size: clamp(0.75rem, 2.4vw, 0.875rem);
line-height: 1.25;
}
.pod-home-v3 .pod-home-feature-copy span {
margin-top: 0.1rem;
color: var(--pod-muted);
font-size: clamp(0.66rem, 2.1vw, 0.78rem);
line-height: 1.4;
}
.pod-home-v3 .pod-home-proof {
margin-top: 1.15rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.65rem;
min-width: 0;
}
.pod-home-v3 .pod-home-proof-avatars {
flex: 0 0 auto;
width: 3.4rem;
height: 1.95rem;
object-fit: cover;
object-position: left center;
border-radius: 999px;
}
.pod-home-v3 .pod-home-proof-copy {
min-width: 0;
}
.pod-home-v3 .pod-home-proof-copy strong {
display: block;
color: var(--pod-navy);
font-size: clamp(0.67rem, 2.1vw, 0.875rem);
line-height: 1.3;
}
.pod-home-v3 .pod-home-proof-rating {
display: flex;
align-items: center;
gap: 0.32rem;
margin-top: 0.12rem;
white-space: nowrap;
}
.pod-home-v3 .pod-home-stars {
color: #f5a900;
font-size: 0.7rem;
letter-spacing: 0.04em;
}
.pod-home-v3 .pod-home-proof-rating b {
color: var(--pod-navy);
font-size: 0.7rem;
font-weight: 700;
}
.pod-home-v3 .pod-home-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: auto;
min-height: 2.875rem;
margin: 0;
padding: 0.7rem 1.15rem;
background: var(--pod-v3-brand);
background-image: var(--pod-v3-grad);
color: #fff;
border-radius: 10px;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
box-sizing: border-box;
box-shadow: none;
}
.pod-home-v3 .pod-home-cta:hover,
.pod-home-v3 .pod-home-cta:focus {
background: var(--pod-v3-brand-2);
background-image: var(--pod-v3-grad);
color: #fff;
}
.pod-home-v3 .pod-home-cta-secondary {
display: none;
align-items: center;
justify-content: center;
min-height: 2.875rem;
padding: 0.7rem 1.15rem;
border: 1.5px solid var(--pod-v3-brand);
border-radius: 10px;
background: #fff;
color: var(--pod-v3-brand);
font-size: 1rem;
font-weight: 700;
}
.pod-home-v3 .pod-home-cta-secondary:hover,
.pod-home-v3 .pod-home-cta-secondary:focus {
color: var(--pod-v3-brand);
}
.pod-home-v3 .pod-home-hero-visual {
min-width: 0;
height: clamp(16rem, 70vw, 21rem);
overflow: hidden;
border-radius: 0 14px 14px 0;
}
.pod-home-v3 .pod-home-hero-visual img {
display: block;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
object-fit: cover;
object-position: 52% 46%;
}
/* --- Trust --------------------------------------------------------------- */
.pod-home-v3 .pod-home-trust {
padding-top: 0.85rem;
}
.pod-home-v3 .pod-home-trust-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
min-width: 0;
overflow: hidden;
border: 1px solid var(--pod-line);
border-radius: 13px;
background: #fff;
box-shadow: none;
}
.pod-home-v3 .pod-home-trust-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
justify-items: start;
text-align: left;
align-items: center;
gap: 0.35rem;
min-width: 0;
padding: 0.7rem 0.4rem;
}
.pod-home-v3 .pod-home-trust-item + .pod-home-trust-item {
border-left: 1px solid var(--pod-line);
}
.pod-home-v3 .pod-home-trust-icon {
width: 0.9rem;
height: 0.9rem;
color: var(--pod-muted);
}
.pod-home-v3 .pod-home-trust-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.pod-home-v3 .pod-home-trust-copy strong,
.pod-home-v3 .pod-home-trust-copy span {
display: block;
}
.pod-home-v3 .pod-home-trust-copy strong {
color: var(--pod-navy);
font-size: clamp(0.6rem, 2.1vw, 0.75rem);
line-height: 1.2;
}
.pod-home-v3 .pod-home-trust-copy span {
margin-top: 0.08rem;
color: var(--pod-muted);
font-size: clamp(0.52rem, 1.9vw, 0.66rem);
line-height: 1.3;
}
/* --- Product Types ------------------------------------------------------- */
.pod-home-v3 .pod-home-product-types,
.pod-home-v3 .pod-home-how-it-works,
.pod-home-v3 .pod-home-inspiration,
.pod-home-v3 .pod-home-reviews {
padding-top: 1.35rem;
}
.pod-home-v3 .pod-home-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
min-width: 0;
margin-bottom: 0.7rem;
}
.pod-home-v3 h2 {
margin: 0;
color: var(--pod-navy);
font-family: inherit;
font-size: clamp(1.02rem, 4vw, 1.35rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
text-wrap: balance;
}
.pod-home-v3 .pod-home-viewall {
display: inline-flex;
align-items: center;
gap: 0.15rem;
flex: 0 0 auto;
min-height: 0;
color: var(--pod-v3-brand);
font-size: 0.66rem;
font-weight: 800;
white-space: nowrap;
}
.pod-home-v3 .pod-home-viewall svg {
width: 0.7rem;
height: 0.7rem;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pod-home-v3 .pod-home-product-grid,
.pod-home-v3 .pod-home-inspiration-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.55rem;
min-width: 0;
}
.pod-home-v3 .pod-home-product-card {
position: relative;
min-width: 0;
overflow: hidden;
border: 1px solid var(--pod-line);
border-radius: 11px;
background: #fff;
box-shadow: none;
}
.pod-home-v3 .pod-home-product-card:hover {
border-color: #d4d0f0;
box-shadow: var(--pod-shadow-hover);
}
.pod-home-v3 .pod-home-product-card img {
display: block;
width: 100%;
aspect-ratio: 1 / 0.9;
object-fit: cover;
object-position: center;
transition: transform 220ms ease;
}
.pod-home-v3 .pod-home-product-card:hover img {
transform: scale(1.03);
}
.pod-home-v3 .pod-home-product-card strong {
display: block;
padding: 0.45rem 0.3rem 0.55rem;
text-align: center;
color: var(--pod-navy);
font-size: clamp(0.67rem, 2.2vw, 0.85rem);
font-weight: 800;
line-height: 1.3;
}
.pod-home-v3 .pod-home-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
height: 1.25rem;
margin-top: 0.35rem;
}
.pod-home-v3 .pod-home-dots i {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #e0e2ec;
}
.pod-home-v3 .pod-home-dots i.is-current {
width: 13px;
border-radius: 6px;
background: var(--pod-v3-brand);
}
/* --- How It Works -------------------------------------------------------- */
.pod-home-v3 .pod-home-how-it-works {
padding-bottom: 0.4rem;
border-top: 0;
margin-top: 0.4rem;
}
.pod-home-v3 .pod-home-how-it-works h2 {
margin-bottom: 0.85rem;
text-align: left;
}
.pod-home-v3 .pod-home-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.45rem;
align-items: start;
min-width: 0;
}
.pod-home-v3 .pod-home-step {
display: grid;
grid-template-columns: 2.15rem minmax(0, 1fr);
column-gap: 0.3rem;
min-width: 0;
position: relative;
}
.pod-home-v3 .pod-home-step + .pod-home-step::before {
content: "··›";
position: absolute;
left: -0.7rem;
top: 0.7rem;
color: var(--pod-navy);
font-size: 0.7rem;
letter-spacing: -0.08em;
}
.pod-home-v3 .pod-home-step + .pod-home-step::after {
content: none;
}
.pod-home-v3 .pod-home-step-icon-wrap {
position: relative;
width: 2.15rem;
}
.pod-home-v3 .pod-home-step-num {
position: absolute;
z-index: 2;
top: -0.15rem;
left: -0.1rem;
width: 1.05rem;
height: 1.05rem;
display: grid;
place-items: center;
border-radius: 50%;
background: #f7f4ff;
color: var(--pod-muted);
font-size: 0.54rem;
font-weight: 800;
}
.pod-home-v3 .pod-home-step-icon {
width: 2.15rem;
height: 2.15rem;
margin-top: 0.35rem;
display: grid;
place-items: center;
padding: 0.38rem;
box-sizing: border-box;
border-radius: 50%;
background: #f7f4ff;
color: var(--pod-v3-brand);
}
.pod-home-v3 .pod-home-step-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.pod-home-v3 .pod-home-step-copy {
min-width: 0;
padding-top: 0.1rem;
}
.pod-home-v3 .pod-home-step-copy strong,
.pod-home-v3 .pod-home-step-copy span {
display: block;
}
.pod-home-v3 .pod-home-step-copy strong {
color: var(--pod-navy);
font-size: clamp(0.64rem, 2.2vw, 0.8rem);
line-height: 1.25;
padding-top: 0;
}
.pod-home-v3 .pod-home-step-copy span {
margin-top: 0.2rem;
color: var(--pod-muted);
font-size: clamp(0.55rem, 2vw, 0.7rem);
line-height: 1.4;
}
/* --- Inspiration --------------------------------------------------------- */
.pod-home-v3 .pod-home-inspiration-card {
position: relative;
min-width: 0;
overflow: hidden;
border-radius: 10px;
}
.pod-home-v3 .pod-home-inspiration-card img {
display: block;
width: 100%;
aspect-ratio: 1.2 / 1;
object-fit: cover;
border-radius: 10px;
}
.pod-home-v3 .pod-home-inspiration-label {
/* 现网 2026/08 素材图已含分类胶囊，再叠 figcaption 会双标签。保留 DOM 供读屏。 */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- Reviews ------------------------------------------------------------- */
.pod-home-v3 .pod-home-reviews {
display: block;
padding-bottom: 1.5rem;
}
.pod-home-v3 .pod-home-reviews h2 {
margin-bottom: 0.7rem;
}
.pod-home-v3 .pod-home-reviews-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
}
.pod-home-v3 .pod-home-review-card {
position: relative;
min-width: 0;
padding: 0.55rem 0.5rem 0.5rem;
border: 1px solid var(--pod-line);
border-radius: 12px;
background: #fff;
}
.pod-home-v3 .pod-home-review-person {
display: flex;
align-items: center;
gap: 0.35rem;
margin: 0;
}
.pod-home-v3 .pod-home-review-avatar {
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
flex: 0 0 auto;
border-radius: 50%;
background: #f0edff;
color: var(--pod-v3-brand);
font-size: 0.55rem;
font-weight: 800;
}
.pod-home-v3 .pod-home-review-who strong,
.pod-home-v3 .pod-home-review-verified {
display: block;
}
.pod-home-v3 .pod-home-review-who strong {
font-size: clamp(0.54rem, 1.8vw, 0.78rem);
}
.pod-home-v3 .pod-home-review-verified {
color: #28a66c;
font-size: clamp(0.45rem, 1.5vw, 0.62rem);
font-weight: 600;
}
.pod-home-v3 .pod-home-review-stars {
margin: 0.28rem 0 0;
color: #f5a900;
font-size: clamp(0.5rem, 1.7vw, 0.75rem);
}
.pod-home-v3 .pod-home-review-quote {
margin: 0.25rem 2.4rem 0 0;
color: var(--pod-lead);
font-size: clamp(0.48rem, 1.7vw, 0.75rem);
line-height: 1.4;
}
.pod-home-v3 .pod-home-review-thumb {
position: absolute;
right: 0.4rem;
bottom: 0.4rem;
width: 2.15rem;
}
.pod-home-v3 .pod-home-review-thumb img {
width: 2.15rem;
height: 2.15rem;
object-fit: cover;
border-radius: 6px;
}
/* --- Visual Footer（仅 .pod-home-v3 内） --------------------------------- */
.pod-home-v3 .pod-home-v3-foot {
border-top: 1px solid var(--pod-line);
padding: 1.1rem 0 1.25rem;
background: #fff;
}
.pod-home-v3 .pod-home-v3-foot-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"brand nav"
"brand social";
align-items: start;
column-gap: 0.75rem;
row-gap: 0.45rem;
}
.pod-home-v3 .pod-home-v3-foot-brand {
grid-area: brand;
}
.pod-home-v3 .pod-home-v3-foot-tagline {
margin: 0.35rem 0 0;
color: var(--pod-muted);
font-size: clamp(0.56rem, 1.9vw, 0.75rem);
}
.pod-home-v3 .pod-home-v3-foot-nav {
grid-area: nav;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.55rem 0.7rem;
color: var(--pod-navy);
font-size: clamp(0.53rem, 1.8vw, 0.75rem);
font-weight: 700;
}
.pod-home-v3 .pod-home-v3-foot-social {
grid-area: social;
display: flex;
justify-content: flex-end;
gap: 0.45rem;
color: var(--pod-navy);
font-size: 0.9rem;
}
.pod-home-v3 .pod-home-v3-foot-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.4rem 1rem;
margin-top: 0.85rem;
padding-top: 0.65rem;
border-top: 1px solid var(--pod-line);
color: var(--pod-muted);
font-size: clamp(0.48rem, 1.7vw, 0.7rem);
}
.pod-home-v3 .pod-home-v3-foot-bottom p {
margin: 0;
}
.pod-home-v3 .pod-home-v3-foot-legal {
display: flex;
gap: 0.85rem;
}
@media (min-width: 992px) {
.pod-home-v3 .pod-home-shell {
max-width: 82.5rem;
padding-inline: 3.75rem;
}
.pod-home-v3 .pod-home-v3-chrome-inner {
min-height: 5.75rem;
}
.pod-home-v3 .pod-home-v3-nav {
display: flex;
}
.pod-home-v3 .pod-home-v3-burger {
display: none;
}
.pod-home-v3 .pod-home-v3-tool {
width: 1.5rem;
height: 1.5rem;
}
.pod-home-v3 .pod-home-v3-chrome-cta {
min-height: 3rem;
padding: 0.7rem 1.35rem;
font-size: 1rem;
}
.pod-home-v3 .pod-home-hero {
padding-top: 2.75rem;
}
.pod-home-v3 .pod-home-hero-grid {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
column-gap: 1.5rem;
align-items: start;
}
.pod-home-v3 .pod-home-hero-badge {
display: inline-flex;
align-items: center;
margin: 0 0 1rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
background: #f3efff;
color: var(--pod-v3-brand);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pod-home-v3 .pod-home-hero-title span.pod-home-v3-title-mobile,
.pod-home-v3 .pod-home-feature-copy span.pod-home-v3-feature-mobile {
display: none;
}
.pod-home-v3 .pod-home-hero-title span.pod-home-v3-title-desktop,
.pod-home-v3 .pod-home-feature-copy span.pod-home-v3-feature-desktop {
display: block;
}
.pod-home-v3 .pod-home-hero-title {
font-size: clamp(2.1rem, 3.2vw, 2.6rem);
max-inline-size: 14ch;
line-height: 1.22;
letter-spacing: -0.04em;
}
.pod-home-v3 .pod-home-hero-lead {
display: block;
margin: 1rem 0 0;
max-width: 32rem;
color: var(--pod-lead);
font-size: 0.9375rem;
line-height: 1.6;
font-weight: 400;
}
.pod-home-v3 .pod-home-features {
margin-top: 1.5rem;
gap: 1rem;
}
.pod-home-v3 .pod-home-feature {
grid-template-columns: 2.125rem minmax(0, 1fr);
}
.pod-home-v3 .pod-home-feature-icon {
width: 2.125rem;
height: 2.125rem;
border-radius: 9px;
}
.pod-home-v3 .pod-home-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.6rem;
}
.pod-home-v3 .pod-home-cta {
min-width: 8.5rem;
}
.pod-home-v3 .pod-home-cta-secondary {
display: inline-flex;
}
.pod-home-v3 .pod-home-proof {
margin-top: 1.5rem;
}
.pod-home-v3 .pod-home-proof-copy strong,
.pod-home-v3 .pod-home-stars,
.pod-home-v3 .pod-home-proof-rating b {
font-size: 1rem;
}
.pod-home-v3 .pod-home-hero-visual {
height: 40rem;
border-radius: 24px;
}
.pod-home-v3 .pod-home-trust {
padding-top: 1.75rem;
}
.pod-home-v3 .pod-home-trust-item {
padding: 1.5rem 1.4rem;
gap: 0.7rem;
}
.pod-home-v3 .pod-home-trust-icon {
width: 1.15rem;
height: 1.15rem;
}
.pod-home-v3 .pod-home-trust-copy strong {
font-size: 0.875rem;
}
.pod-home-v3 .pod-home-trust-copy span {
font-size: 0.75rem;
}
.pod-home-v3 .pod-home-product-types,
.pod-home-v3 .pod-home-how-it-works,
.pod-home-v3 .pod-home-inspiration,
.pod-home-v3 .pod-home-reviews {
padding-top: 2.4rem;
}
.pod-home-v3 .pod-home-product-types .pod-home-section-heading,
.pod-home-v3 .pod-home-inspiration .pod-home-section-heading {
justify-content: center;
}
.pod-home-v3 .pod-home-product-types .pod-home-viewall,
.pod-home-v3 .pod-home-inspiration .pod-home-viewall,
.pod-home-v3 .pod-home-dots {
display: none;
}
.pod-home-v3 h2 {
font-size: 1.55rem;
}
.pod-home-v3 .pod-home-product-grid {
gap: 0.9rem;
}
.pod-home-v3 .pod-home-product-card {
border-radius: 16px;
}
.pod-home-v3 .pod-home-product-card img {
aspect-ratio: 1 / 0.78;
}
.pod-home-v3 .pod-home-product-card strong {
text-align: left;
padding: 0.85rem 1.1rem 0.1rem;
font-size: 0.95rem;
}
.pod-home-v3 .pod-home-product-sub {
display: block;
text-align: left;
padding: 0 1.1rem 1rem;
color: var(--pod-muted);
font-size: 0.7rem;
}
.pod-home-v3 .pod-home-v3-card-arrow {
display: block;
position: absolute;
right: 1rem;
bottom: 1.15rem;
color: var(--pod-navy);
font-size: 1.25rem;
line-height: 1;
}
.pod-home-v3 .pod-home-how-it-works h2 {
text-align: center;
margin-bottom: 1.4rem;
}
.pod-home-v3 .pod-home-steps {
gap: 1.5rem;
}
.pod-home-v3 .pod-home-step + .pod-home-step::before {
left: -1.1rem;
font-size: 1rem;
letter-spacing: 0.2em;
content: "·····";
}
.pod-home-v3 .pod-home-step-copy strong {
font-size: 0.875rem;
}
.pod-home-v3 .pod-home-step-copy span {
font-size: 0.75rem;
}
.pod-home-v3 .pod-home-inspiration-grid {
gap: 0.9rem;
}
.pod-home-v3 .pod-home-inspiration-card img {
aspect-ratio: 208 / 181;
border-radius: 14px;
}
.pod-home-v3 .pod-home-reviews {
display: block;
padding-bottom: 2.5rem;
}
.pod-home-v3 .pod-home-reviews-grid {
gap: 1.1rem;
}
.pod-home-v3 .pod-home-review-card {
min-height: 10rem;
padding: 1.1rem 1.1rem 0.9rem;
border-radius: 16px;
}
.pod-home-v3 .pod-home-review-avatar {
width: 2.125rem;
height: 2.125rem;
font-size: 1rem;
}
.pod-home-v3 .pod-home-review-who strong {
font-size: 0.8125rem;
}
.pod-home-v3 .pod-home-review-verified {
font-size: 0.625rem;
}
.pod-home-v3 .pod-home-review-stars {
font-size: 0.8125rem;
}
.pod-home-v3 .pod-home-review-quote {
margin-right: 6.5rem;
font-size: 0.75rem;
line-height: 1.5;
}
.pod-home-v3 .pod-home-review-thumb {
width: 6rem;
right: 1.1rem;
bottom: auto;
top: 3.35rem;
}
.pod-home-v3 .pod-home-review-thumb img {
width: 6rem;
height: 5.375rem;
border-radius: 10px;
}
.pod-home-v3 .pod-home-v3-foot {
padding: 1.6rem 0 1.5rem;
}
.pod-home-v3 .pod-home-v3-foot-top {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "brand nav social";
align-items: center;
}
.pod-home-v3 .pod-home-v3-foot-nav {
gap: 1.6rem;
font-size: 0.75rem;
}
.pod-home-v3 .pod-home-v3-foot-social {
font-size: 1.125rem;
gap: 0.7rem;
}
.pod-home-v3 .pod-home-v3-foot-bottom {
font-size: 0.6875rem;
}
}
@media (prefers-reduced-motion: reduce) {
.pod-home-v3 .pod-home-cta,
.pod-home-v3 .pod-home-product-card,
.pod-home-v3 .pod-home-product-card img {
transition: none;
}
.pod-home-v3 .pod-home-product-card:hover img {
transform: none;
}
}
/* ==========================================================================
OFFICIAL HOME — Child Theme PHP Template（2026-08-30）
==========================================================================
Owner：template-home.php + template-parts/pod-home.php + 本段 CSS
冻结图：pc/dongjie1.png（Desktop）+ mobile/新首页.png（Mobile）
Scope：.pod-home + body.pod-home-official-page / body.pod-home-page
CTA：一律 Woo Shop（Product-first），禁止 /design-editor/
Breakpoint：只用 Website 991/992。Desktop / Mobile 冻结差异用同一 DOM + CSS 切换。
-------------------------------------------------------------------------- */
body.pod-home-official-page .site-content,
body.home.pod-home-page.pod-home-official-page .site-content {
margin: 0;
}
body.pod-home-official-page .page-header,
body.pod-home-official-page .entry-header {
display: none;
}
body.pod-home-official-page .site-content > .woostify-container {
max-width: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.pod-home {
--pod-navy: #111a49;
--pod-muted: #707994;
--pod-line: #e8eaf3;
--pod-serif: Georgia, "Times New Roman", serif;
color: var(--pod-navy);
overflow-x: clip;
background: var(--dk-surface);
}
.pod-home a {
color: inherit;
text-decoration: none;
}
.pod-home ul,
.pod-home ol,
.pod-home figure {
margin: 0;
padding: 0;
list-style: none;
}
.pod-home svg {
display: block;
width: 100%;
height: 100%;
}
.pod-home .pod-home-shell {
width: min(72rem, 100%);
margin-inline: auto;
padding-inline: clamp(0.8rem, 4.2vw, 1.5rem);
min-width: 0;
}
.pod-home-hero {
padding-top: 0.85rem;
}
.pod-home-hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
min-width: 0;
}
.pod-home-hero-badge {
display: none;
margin: 0 0 0.55rem;
color: var(--dk-brand);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pod-home-hero-title {
margin: 0;
color: var(--pod-navy);
font-family: var(--pod-serif);
font-size: clamp(1.35rem, 6vw, 2rem);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.04em;
}
.pod-home-hero-title span {
display: block;
}
.pod-home-hero-accent {
margin-top: 0.08em;
color: var(--dk-brand);
font-style: italic;
}
.pod-home-hero-lead {
display: none;
margin: 0.85rem 0 0;
max-width: 34rem;
color: var(--pod-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.pod-home-features {
margin-top: 1rem;
display: grid;
gap: 0.8rem;
}
.pod-home-feature {
display: grid;
grid-template-columns: 1.9rem minmax(0, 1fr);
align-items: center;
gap: 0.5rem;
}
.pod-home-feature-icon {
width: 1.9rem;
height: 1.9rem;
display: grid;
place-items: center;
padding: 0.28rem;
border: 1px solid #ded9ff;
border-radius: var(--dk-radius);
color: var(--dk-brand);
background: var(--dk-surface);
box-sizing: border-box;
}
.pod-home-feature-icon svg {
width: 1.05rem;
height: 1.05rem;
}
.pod-home-feature-icon-stroke svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linejoin: round;
}
.pod-home-feature-copy strong,
.pod-home-feature-copy span {
display: block;
}
.pod-home-feature-copy strong {
font-size: clamp(0.72rem, 3vw, 0.9rem);
line-height: 1.2;
}
.pod-home-feature-copy span {
margin-top: 0.12rem;
color: var(--pod-muted);
font-size: clamp(0.62rem, 2.6vw, 0.78rem);
}
.pod-home-proof {
margin-top: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.pod-home-proof-avatars {
width: 3.4rem;
height: 1.95rem;
object-fit: cover;
object-position: left center;
border-radius: 999px;
}
.pod-home-proof-copy strong {
display: block;
font-size: 0.78rem;
line-height: 1.1;
}
.pod-home-proof-rating {
display: flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.15rem;
}
.pod-home-stars {
display: flex;
gap: 0.08rem;
color: #f4a900;
}
.pod-home-stars svg {
width: 0.72rem;
height: 0.72rem;
fill: currentColor;
}
.pod-home-proof-rating b {
font-size: 0.72rem;
}
.pod-home-hero-actions {
margin-top: 1.15rem;
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.pod-home-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2.7rem;
padding: 0.65rem 1.15rem;
border-radius: var(--dk-radius);
background: var(--dk-brand);
color: var(--dk-brand-contrast);
font-weight: 700;
width: 100%;
}
.pod-home-cta svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pod-home-cta-secondary {
display: none;
align-items: center;
justify-content: center;
min-height: 2.7rem;
padding: 0.65rem 1.15rem;
border: 1.5px solid var(--dk-brand);
border-radius: var(--dk-radius);
color: var(--dk-brand);
font-weight: 700;
}
.pod-home-hero-visual img {
display: block;
width: 100%;
height: auto;
max-height: 22rem;
object-fit: contain;
object-position: center;
}
.pod-home-trust {
padding: 0.85rem 0 0.35rem;
}
.pod-home-trust-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.35rem;
}
.pod-home-trust-item {
display: grid;
justify-items: center;
text-align: center;
gap: 0.25rem;
}
.pod-home-trust-icon {
width: 1.45rem;
height: 1.45rem;
color: var(--dk-brand);
}
.pod-home-trust-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linejoin: round;
}
.pod-home-trust-copy strong,
.pod-home-trust-copy span {
display: block;
}
.pod-home-trust-copy strong {
font-size: clamp(0.55rem, 2.4vw, 0.72rem);
}
.pod-home-trust-copy span {
color: var(--pod-muted);
font-size: clamp(0.48rem, 2.1vw, 0.62rem);
}
.pod-home-product-types,
.pod-home-how-it-works,
.pod-home-inspiration,
.pod-home-reviews {
padding-top: 1.15rem;
}
.pod-home-section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.55rem;
}
.pod-home h2 {
margin: 0;
font-family: var(--pod-serif);
font-size: clamp(1.1rem, 4.6vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.02em;
}
.pod-home-viewall {
display: inline-flex;
align-items: center;
gap: 0.12rem;
color: var(--dk-brand);
font-size: 0.72rem;
font-weight: 800;
white-space: nowrap;
}
.pod-home-viewall svg {
width: 0.7rem;
height: 0.7rem;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
}
.pod-home-product-grid,
.pod-home-inspiration-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.45rem;
}
.pod-home-product-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--pod-line);
border-radius: 11px;
background: var(--dk-surface);
}
.pod-home-product-card img {
display: block;
width: 100%;
aspect-ratio: 1 / 0.9;
object-fit: cover;
}
.pod-home-product-card strong {
display: block;
padding: 0.45rem 0.25rem 0.2rem;
text-align: center;
font-size: clamp(0.62rem, 2.65vw, 0.78rem);
}
.pod-home-product-sub {
display: none;
padding: 0 0.35rem 0.55rem;
text-align: center;
color: var(--pod-muted);
font-size: 0.72rem;
}
.pod-home-dots {
display: flex;
justify-content: center;
gap: 0.3rem;
height: 1.25rem;
margin-top: 0.25rem;
}
.pod-home-dots i {
width: 5px;
height: 5px;
border-radius: 50%;
background: #e0e2ec;
}
.pod-home-dots i.is-current {
width: 13px;
border-radius: 6px;
background: var(--dk-brand);
}
.pod-home-how-it-works {
padding-bottom: 0.4rem;
}
.pod-home-how-it-works h2 {
margin-bottom: 0.65rem;
}
.pod-home-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem;
}
.pod-home-step {
display: grid;
grid-template-columns: 2.15rem minmax(0, 1fr);
column-gap: 0.3rem;
position: relative;
}
.pod-home-step-num {
position: absolute;
z-index: 2;
top: -0.15rem;
left: -0.1rem;
width: 1.05rem;
height: 1.05rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--dk-brand);
color: #fff;
font-size: 0.54rem;
font-weight: 800;
}
.pod-home-step-icon {
width: 2.15rem;
height: 2.15rem;
margin-top: 0.35rem;
display: grid;
place-items: center;
padding: 0.38rem;
box-sizing: border-box;
border-radius: 50%;
background: #f6f2ff;
color: var(--dk-brand);
}
.pod-home-step-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.pod-home-step-copy strong,
.pod-home-step-copy span {
display: block;
}
.pod-home-step-copy strong {
padding-top: 0.2rem;
font-size: clamp(0.55rem, 2.4vw, 0.78rem);
}
.pod-home-step-copy span {
margin-top: 0.18rem;
color: var(--pod-muted);
font-size: clamp(0.48rem, 2.1vw, 0.68rem);
}
.pod-home-inspiration-card {
position: relative;
min-width: 0;
}
.pod-home-inspiration-card img {
display: block;
width: 100%;
aspect-ratio: 1.2 / 0.83;
object-fit: cover;
border-radius: 9px;
}
.pod-home-inspiration-label {
position: absolute;
top: 0.28rem;
left: 0.28rem;
padding: 0.12rem 0.35rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
font-size: clamp(0.45rem, 2vw, 0.58rem);
font-weight: 800;
}
.pod-home-reviews {
padding-bottom: 1.4rem;
}
.pod-home-reviews h2 {
margin-bottom: 0.6rem;
}
.pod-home-reviews-grid {
display: grid;
gap: 0.7rem;
}
.pod-home-review-card {
position: relative;
padding: 0.7rem 0.65rem 0.6rem;
border: 1px solid var(--pod-line);
border-radius: 11px;
}
.pod-home-review-person {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
}
.pod-home-review-avatar {
width: 1.45rem;
height: 1.45rem;
border-radius: 50%;
background: #ece7ff;
}
.pod-home-review-who strong,
.pod-home-review-verified {
display: block;
}
.pod-home-review-who strong {
font-size: 0.78rem;
}
.pod-home-review-verified {
color: #2f9e5f;
font-size: 0.58rem;
font-weight: 600;
}
.pod-home-review-stars {
margin: 0.35rem 0 0;
color: #f4a900;
font-size: 0.62rem;
}
.pod-home-review-quote {
margin: 0.25rem 2.5rem 0 0;
font-size: 0.88rem;
line-height: 1.45;
}
.pod-home-review-thumb {
position: absolute;
right: 0.45rem;
bottom: 0.45rem;
width: 2.15rem;
}
.pod-home-review-thumb img {
width: 2.15rem;
height: 2.15rem;
object-fit: cover;
border-radius: 6px;
}
@media (min-width: 992px) {
.pod-home-hero {
padding-top: 1.6rem;
}
.pod-home-hero-grid {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
column-gap: 1.5rem;
}
.pod-home-hero-badge,
.pod-home-hero-lead,
.pod-home-cta-secondary,
.pod-home-product-sub {
display: block;
}
.pod-home-cta {
width: auto;
}
.pod-home-cta-secondary {
display: inline-flex;
}
.pod-home-hero-title {
font-size: clamp(2rem, 3.2vw, 3rem);
}
.pod-home-hero-visual img {
max-height: 34rem;
}
.pod-home-trust-row {
gap: 1rem;
padding: 0.6rem 0 0.2rem;
}
.pod-home-trust-copy strong {
font-size: 0.95rem;
}
.pod-home-trust-copy span {
font-size: 0.78rem;
}
.pod-home-section-heading .pod-home-viewall,
.pod-home-dots,
.pod-home-inspiration-label,
.pod-home-reviews {
display: none;
}
.pod-home-product-card strong {
text-align: left;
padding: 0.7rem 0.9rem 0.15rem;
font-size: 1rem;
}
.pod-home-product-sub {
text-align: left;
padding: 0 0.9rem 0.9rem;
}
.pod-home-how-it-works h2 {
text-align: center;
}
.pod-home-step-copy strong {
font-size: 0.95rem;
}
.pod-home-step-copy span {
font-size: 0.78rem;
}
.pod-home-product-types,
.pod-home-how-it-works,
.pod-home-inspiration {
padding-top: 2rem;
}
.pod-home-inspiration {
padding-bottom: 2.4rem;
}
}