/**

 * ===========================================================================

 * SavingCat Affiliate Plugin - Frontend Styles (带详细备注版本)

 * ===========================================================================

 * 

 * 文件信息

 * ─────────────────────────────────────────────────────────────────────────────

 * 文件名    : frontend-v2.v112.css

 * 版本      : 1.1.2

 * 插件      : AffiliatePaw (AffiliatePaw Product Display Plugin)

 * 主题兼容  : SavingCat Magazine Theme

 * 创建日期  : 2024

 * 最后更新  : 2026-04-29

 * 

 * 文件用途

 * ─────────────────────────────────────────────────────────────────────────────

 * 本文件定义AffiliatePaw插件前端样式，包括：

 *   - Hero大图区块（首页/文章页顶部横幅）

 *   - 产品卡片网格与列表

 *   - Newsletter订阅表单

 *   - 按钮组件

 *   - 免责声明

 * 

 * CSS架构

 * ─────────────────────────────────────────────────────────────────────────────

 * 01. 基础变量 (:root)

 * 02. Hero区块 (.sc-hero)

 * 03. 按钮组件 (.sc-btn-*)

 * 04. 产品网格 (.sc-products-*)

 * 05. Newsletter订阅 (.sc-newsletter)

 * 06. 免责声明 (.savingcat-*)

 * 07. 响应式断点 (@media)

 * 08. 动态样式 (覆盖内联样式)

 * 

 * 修改说明

 * ─────────────────────────────────────────────────────────────────────────────

 * - 所有颜色使用CSS变量，便于全局主题切换

 * - 响应式断点: 768px(平板) / 480px(手机)

 * - 产品网格: PC 4列 / 平板 2列 / 手机 1列

 * 

 * ===========================================================================

 */

/* ===========================================================================

   01. 基础变量 (CSS Custom Properties)

   ===========================================================================

   

   说明: 所有设计token集中在此处，使用CSS变量便于全局主题切换

   命名规范: --sc- 前缀表示SavingCat

   

   ---------------------------------------------------------------------------

   目录:

   1.1 颜色变量

   1.2 背景色变量

   1.3 标签颜色变量

   1.4 布局变量

   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────

   1.1 颜色变量

   ───────────────────────────────────────────────────────────────────────────── */

:root {

  /* 主品牌色 - 蓝色

     用于: 按钮背景、链接文字、强调元素

     主题对应: style.css 中的 --sc-teal */

  --sc-blue: #4a9eed;

  /* 深色 - 主要文字颜色

     用于: 正文、标题 */

  --sc-dark: #1e1e1e;

  /* 白色

     用于: 卡片背景、按钮文字 */

  --sc-white: #ffffff;

  /* 灰色色阶 - 由浅到深排列

     用于: 边框、背景、次要文字、主要文字 */

  --sc-gray-100: #f5f5f5;   /* 最浅灰 - 区块背景 */

  --sc-gray-200: #e0e0e0;   /* 浅灰 - 边框线 */

  --sc-gray-400: #9e9e9e;   /* 中灰 - 辅助文字 */

  --sc-gray-600: #757575;   /* 深灰 - 次要文字 */

  --sc-gray-800: #1e1e1e;   /* 最深灰 - 主要文字(等同于--sc-dark) */

  /* ─────────────────────────────────────────────────────────────────────────

     1.2 背景色变量

     

     用于区分不同类型的内容区块

     ───────────────────────────────────────────────────────────────────────── */

  /* 狗狗内容区块背景 - 浅绿色

     营造与宠物类型相关的视觉联想 */

  --sc-dogs-bg: #e8f5e9;

  /* 猫咪内容区块背景 - 浅粉色

     与--sc-dogs-bg形成对比，区分内容类型 */

  --sc-cats-bg: #fce4ec;

  /* 产品展示区块背景 - 淡黄色

     温暖的背景色，突出产品区域 */

  --sc-products-bg: #fff8e1;

  /* Newsletter订阅区块背景 - 浅蓝色

     清新专业，与其他区块区分 */

  --sc-newsletter-bg: #dbeafe;

  /* ─────────────────────────────────────────────────────────────────────────

     1.3 标签颜色变量

     

     用于内容标签/徽章的背景色

     ───────────────────────────────────────────────────────────────────────── */

  --sc-tag-dogs: #8b5cf6;      /* 狗狗标签 - 紫色 */

  --sc-tag-cats: #ec4899;      /* 猫咪标签 - 粉色 */

  --sc-tag-product: #f59e0b;   /* 产品标签 - 琥珀色 */

  --sc-tag-best: #22c55e;      /* 最佳/BEST标签 - 绿色 */

  --sc-tag-premium: #ef4444;   /* 高端/PREMIUM标签 - 红色 */

  /* ─────────────────────────────────────────────────────────────────────────

     1.4 布局变量

     ───────────────────────────────────────────────────────────────────────── */

  /* 卡片圆角 - 统一所有卡片的圆角值

     使用12px作为标准圆角，简洁现代 */

  --sc-card-radius: 12px;

  /* 字体栈

     --sc-font-body: 正文/UI字体 - 系统字体优先

     --sc-font-heading: 标题字体 - 衬线字体营造杂志感 */

  --sc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  --sc-font-heading: Georgia, 'Times New Roman', serif;

}

/* ===========================================================================

   02. Hero区块 (.sc-hero)

   ===========================================================================

   

   功能: 首页/文章页顶部的大图横幅

   

   结构:

   ┌─────────────────────────────────────────────────────────────┐

   │  [渐变遮罩层]                                               │

   │                                                             │

   │  ┌───────────────────────┐                                 │

   │  │  标题文字             │  ← 绝对定位在图片上方            │

   │  │  描述文字             │    底部对齐                     │

   │  │  [按钮] [按钮]        │                                 │

   │  └───────────────────────┘                                 │

   │                                                             │

   └─────────────────────────────────────────────────────────────┘

   

   ---------------------------------------------------------------------------

   02.1 Hero容器 (.sc-hero)

   02.2 Hero图片 (.sc-hero-img)

   02.3 Hero遮罩层 (.sc-hero-overlay)

   02.4 Hero内容区 (.sc-hero-content)

   02.5 Hero文字元素 (.sc-hero-title, .sc-hero-desc, .sc-hero-meta)

   02.6 Hero按钮组 (.sc-hero-actions)

   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────

   02.1 Hero容器 (.sc-hero)

   

   作用: Hero区块的最外层容器，设定固定高度和基础样式

   特点: 固定高度360px，相对定位(作为内部绝对定位元素的参考)

   ───────────────────────────────────────────────────────────────────────────── */

.sc-hero {

  position: relative;    /* 相对定位 - 作为.sc-hero-overlay和.sc-hero-content的定位参考 */

  height: 430px;        /* 改动说明(2026-05-27): 桌面端 Hero 高度由 360px 增至 430px，增强首屏视觉张力。 */

  overflow: hidden;     /* 溢出隐藏 - 超出容器的图片部分被裁剪 */

  background: #fdf8f3;  /* 备用背景色 - 图片加载失败时显示 */

  border-radius: 0;     /* 无圆角 - Hero通常全宽无圆角 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   02.2 Hero图片 (.sc-hero-img)

   

   作用: Hero区域的背景图片，填充整个容器

   特点: object-fit: cover 确保图片覆盖且不变形

   ───────────────────────────────────────────────────────────────────────────── */

.sc-hero-img {

  width: 100%;           /* 宽度100% - 填充容器宽度 */

  height: 100%;         /* 高度100% - 填充容器高度 */

  object-fit: cover;     /* 覆盖填充 - 保持比例，覆盖整个容器

                            注意: 与产品图片的contain相反，Hero用cover */

  object-position: center top; /* 图片上方固定，下面自适应裁剪 */

  display: block;        /* 块级元素 - 消除图片底部默认的空白间隙 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   02.3 Hero遮罩层 (.sc-hero-overlay)

   

   作用: 渐变遮罩，从左到右由深变浅

   效果: 左侧文字清晰可读，右侧图片保持明亮

   

   渐变分解:

   - 0%   → rgba(0,0,0,0.65)  左侧65%透明度黑色

   - 60%  → rgba(0,0,0,0.2)   中间20%透明度黑色  

   - 100% → transparent        右侧完全透明

   ───────────────────────────────────────────────────────────────────────────── */

.sc-hero-overlay {

  position: absolute;              /* 绝对定位 - 覆盖整个Hero容器 */

  top: 0;                        /* 顶部对齐 */

  left: 0;                       /* 左侧对齐 */

  right: 0;                      /* 右侧对齐 */

  bottom: 0;                     /* 底部对齐 - 四边填满 */

  background: linear-gradient(

    to right,                        /* 渐变方向: 从左到右 */

    rgba(0,0,0,0.65) 0%,          /* 起始: 深黑65%透明度 */

    rgba(0,0,0,0.2) 60%,           /* 中间: 浅黑20%透明度 */

    transparent 100%                /* 结束: 完全透明 */

  );

}

/* ─────────────────────────────────────────────────────────────────────────────

   02.4 Hero内容区 (.sc-hero-content)

   

   作用: 包含标题、描述、按钮的内容容器

   定位: 绝对定位在Hero底部，内容从下往上排列

   

   注意: 移动端(≤768px)会覆盖此样式，见下方@media查询

   ───────────────────────────────────────────────────────────────────────────── */

.sc-hero-content {

  position: absolute;            /* 绝对定位 */

  top: 50%;                      /* 改动说明(2026-05-27): 内容组上下居中，不再固定贴底。 */

  left: 0;                      /* 左侧0 */

  right: 0;                     /* 右侧0 */

  padding: 0 40px;              /* 左右40px */

  box-sizing: border-box;        /* 边框盒模型 */

  background: transparent;      /* 透明背景 */

  display: flex;                /* Flex布局 */

  flex-direction: column;      /* 垂直排列 */

  justify-content: center;       /* 改动说明(2026-05-27): 组内元素也按中心节奏排列。 */

  align-items: center;          /* 水平居中 */

  text-align: center;            /* 文字居中 */

  max-width: 680px;               /* 限制宽度，文字自然换行 */

  margin: 0 auto;                  /* 居中 */

  transform: translateY(-50%);      /* 改动说明(2026-05-27): 配合 top:50% 实现整组垂直居中。 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   02.5 Hero文字元素

   ───────────────────────────────────────────────────────────────────────────── */

/* Hero精选标签：改为杂志编辑精选样式，克制醒目且不按钮化 */

.sc-hero-tag {

  display: inline-flex;             /* 改动说明(2026-05-27): 使用小型编辑标签布局，不再做按钮/丝带造型。 */

  align-items: center;

  justify-content: center;

  gap: 8px;

  position: relative;

  width: fit-content;

  padding: 7px 14px;                /* 改动说明(2026-05-27): 缩小为内容标签比例，避免像CTA按钮。 */

  margin-bottom: 16px;

  border: 1px solid rgba(180, 131, 46, 0.42) !important;

  border-radius: 10px;              /* 改动说明(2026-05-27): 改为轻圆角矩形，不用胶囊/斜切。 */

  background: rgba(255, 248, 235, 0.88) !important; /* 改动说明(2026-05-27): 用浅金玻璃底，融入Hero背景但仍有层次。 */

  color: #17345c !important;

  font-size: 12px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 1.8px;

  text-transform: uppercase;

  text-align: center;

  text-shadow: none;

  box-shadow: 0 8px 18px rgba(120, 83, 28, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72); /* 改动说明(2026-05-27): 只保留轻微浮层阴影，不做按钮发光。 */

  transform: none;

  overflow: hidden;

}

.sc-hero-tag::before {

  content: "★";                    /* 改动说明(2026-05-27): 小金色奖章点，强化精选但保持克制。 */

  display: inline-grid;

  place-items: center;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: linear-gradient(135deg, #f7c85f 0%, #d99b24 100%);

  color: #ffffff;

  font-size: 10px;

  letter-spacing: 0;

  box-shadow: 0 2px 6px rgba(180, 131, 46, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45);

  transform: none;

}

.sc-hero-tag::after {

  content: "";                     /* 改动说明(2026-05-27): 底部细金线增加精致感，不再使用怪异旗尾。 */

  position: absolute;

  left: 12px;

  right: 12px;

  bottom: 3px;

  height: 1px;

  background: linear-gradient(90deg, transparent 0%, rgba(217, 155, 36, 0.55) 50%, transparent 100%);

  opacity: 0.9;

}

@media (max-width: 768px) {

  .sc-hero-tag {

    padding: 6px 13px;              /* 改动说明(2026-05-27): 平板端保持编辑标签比例。 */

    margin-bottom: 14px;

    font-size: 11px;

  }

}

@media (max-width: 480px) {

  .sc-hero-tag {

    padding: 6px 12px;              /* 改动说明(2026-05-27): 手机端更轻巧，不压标题。 */

    margin-bottom: 12px;

    font-size: 10px;

    letter-spacing: 1.4px;

  }

  .sc-hero-tag::before {

    width: 16px;

    height: 16px;

    font-size: 9px;

  }

}

/* Hero主标题 */

.sc-hero-title {

  position: relative;             /* 相对定位(可能被动态样式覆盖) */

  font-family: var(--sc-font-heading);  /* 衬线字体 - Georgia */

  font-size: 30px;               /* 30px - 桌面端标准标题大小 */

  /* color removed - let backend control */

  line-height: 1.3;              /* 行高1.3 - 标题行间距 */

  margin-bottom: 12px;           /* 下边距12px - 与描述的间距 */

  display: block;                 /* 块级元素 - 独占一行 */

  word-break: break-word;            /* 允许任意位置断行 */

}

/* Hero描述文字 */

.sc-hero-desc {

  color: #e0e0e0;               /* 浅灰 - 比白色标题暗，避免喧宾夺主 */

  font-size: 15px;              /* 15px - 描述文字标准大小 */

  line-height: 1.6;             /* 行高1.6 - 舒适阅读间距 */

  margin-bottom: 20px;          /* 下边距20px - 与按钮组的间距 */

  word-break: break-word;            /* 允许任意位置断行 */

}

/* Hero元信息(发布日期等) */

.sc-hero-meta {

  color: #bbb;                   /* 更浅的灰 - 元信息不应太显眼 */

  font-size: 13px;              /* 13px - 小字号 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   02.6 Hero按钮组 (.sc-hero-actions)

   

   作用: 水平排列多个CTA按钮

   布局: flex横向排列，按钮间距20px

   ───────────────────────────────────────────────────────────────────────────── */

.sc-hero-actions {

  display: flex;                 /* Flex横向布局 */

  align-items: center;           /* 垂直居中 */

  justify-content: center;       /* 水平居中 */

  gap: 20px;                     /* 间距20px */

}

/* ===========================================================================

   03. 按钮组件

   ===========================================================================

   

   目录:

   03.1 主要按钮 (.sc-btn-primary)

   03.2 价格检查按钮 (.sc-btn-check-price)

   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────

   03.1 主要按钮 (.sc-btn-primary)

   

   用途: 通用的主要行动号召按钮

   样式: 蓝色背景、白色文字、药丸形圆角(20px)

   

   ┌─────────────────────┐

   │    主要按钮文字      │

   └─────────────────────┘

   ───────────────────────────────────────────────────────────────────────────── */

.sc-btn-primary {

  display: inline-block;           /* 行内块 - 既能设宽高，又能与文字同行 */

  background: linear-gradient(135deg, #f97316 0%, #fb8c24 48%, #f5a23a 100%);      /* 改动说明(2026-05-27): Hero CTA 改为橙色渐变，与首屏按钮视觉一致。 */

  color: white;                     /* 白色文字 */

  font-size: 16px;                 /* 改动说明(2026-05-27): 按黄总要求增大 Hero 主按钮文字，从 14px 提升到 16px。 */

  font-weight: 800;                /* 改动说明(2026-05-27): 稍增字重，提升 CTA 点击感。 */

  padding: 14px 34px;              /* 改动说明(2026-05-27): 按黄总要求增大 Hero 主按钮，从 11px 28px 提升到 14px 34px。 */

  border-radius: 999px;            /* 改动说明(2026-05-27): 统一为胶囊按钮。 */

  border: 1px solid rgba(255, 255, 255, 0.28);                     /* 改动说明(2026-05-27): 增加轻微高光边，增强精致感。 */

  cursor: pointer;                  /* 手型光标 - 提示可点击 */

  box-shadow: 0 14px 28px rgba(234, 88, 12, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.28);      /* 改动说明(2026-05-27): 按更大按钮尺寸同步增强软阴影，保持立体感。 */

  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, background 0.22s ease;      /* 改动说明(2026-05-27): hover 动画更顺滑。 */

  text-decoration: none;            /* 链接无下划线 */

}

.sc-btn-primary:hover {

  background: linear-gradient(135deg, #fb7a1f 0%, #ff9a2f 45%, #ffc061 100%);              /* 改动说明(2026-05-27): 悬停时渐变提亮，增强可点击感。 */

  color: white;                     /* 保持白色文字 */

  transform: translateY(-2px);       /* 改动说明(2026-05-27): hover 轻微上浮，提升互动感。 */

  box-shadow: 0 18px 34px rgba(234, 88, 12, 0.34), 0 4px 10px rgba(120, 53, 15, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.34); /* 改动说明(2026-05-27): hover 阴影增强，但不过度夸张。 */

  filter: saturate(1.06);            /* 改动说明(2026-05-27): hover 时色彩略提升。 */

}

.sc-btn-primary:focus-visible {

  outline: 3px solid rgba(249, 115, 22, 0.28); /* 改动说明(2026-05-27): 键盘访问时保留清晰 focus 状态。 */

  outline-offset: 4px;

}

@media (prefers-reduced-motion: reduce) {

  .sc-btn-primary {

    transition: none;              /* 改动说明(2026-05-27): 尊重系统减少动画设置。 */

  }

  .sc-btn-primary:hover {

    transform: none;

  }

}

/* ─────────────────────────────────────────────────────────────────────────────

   03.2 价格检查按钮 (.sc-btn-check-price)

   

   用途: 产品卡片内的"Check Price"按钮，比主要按钮更紧凑

   样式: 稍小的内边距，适合在产品卡片内使用

   

   ┌──────────────┐

   │ Check Price  │

   └──────────────┘

   ───────────────────────────────────────────────────────────────────────────── */

.sc-btn-check-price {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--sc-blue);

  color: white;

  font-size: 13px;

  font-weight: 700;

  padding: 10px 16px;

  border-radius: 999px;

  border: none;

  cursor: pointer;

  text-align: center;

  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;

  box-shadow: 0 4px 14px rgba(74,158,237,0.22);

  text-decoration: none;

}

.sc-btn-check-price:hover {

  background: #3a8ee5;

  color: white;

  transform: translateY(-1px);

  box-shadow: 0 6px 18px rgba(74,158,237,0.28);

}

/* ===========================================================================

   04. 产品网格 (.sc-products-*)

   ===========================================================================

   

   功能: 联盟产品展示区域，支持网格和列表两种布局

   

   网格布局 (PC 4列):

   ┌────────┬────────┬────────┬────────┐

   │ 产品1  │ 产品2  │ 产品3  │ 产品4  │

   ├────────┼────────┼────────┼────────┤

   │ 产品5  │ 产品6  │ 产品7  │ 产品8  │

   └────────┴────────┴────────┴────────┘

   

   ---------------------------------------------------------------------------

   04.1 产品区块容器 (.sc-products-section)

   04.2 产品网格 (.sc-products-grid)

   04.3 产品列表 (.sc-products-list)

   04.4 产品卡片 (.sc-product-card)

   04.5 产品图片 (.sc-product-img-wrap, .sc-product-img)

   04.6 产品徽章 (.sc-product-badge)

   04.7 产品内容区 (.sc-product-body)

   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────

   04.1 产品区块容器 (.sc-products-section)

   

   作用: 包含整个产品展示区域的包装器

   ───────────────────────────────────────────────────────────────────────────── */

.sc-products-section {

  padding: 20px 0;                 /* 上下20px内边距 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   04.2 产品网格 (.sc-products-grid)

   

   作用: CSS Grid布局，PC端4列等宽

   响应式: 见下方@media查询

   ───────────────────────────────────────────────────────────────────────────── */

.sc-products-grid {

  display: grid;                                      /* Grid布局 */

  grid-template-columns: repeat(4, 1fr);             /* 4列等宽 */

  gap: 20px;                                         /* 网格间距20px */

  padding: 0 40px;                                   /* 左右40px内边距 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   04.3 产品列表 (.sc-products-list)

   

   作用: 垂直列表布局，用于侧边栏或紧凑展示

   特点: 与网格布局二选一使用

   ───────────────────────────────────────────────────────────────────────────── */

.sc-products-list {

  display: flex;                       /* Flex布局 */

  flex-direction: column;              /* 垂直排列 */

  gap: 12px;                           /* 列表项间距12px */

  padding: 0 40px;                    /* 左右40px内边距 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   04.4 产品卡片 (.sc-product-card)

   

   作用: 单个产品的卡片容器，包含图片和内容

   悬停效果: 上浮3px + 阴影加深

   

   ┌─────────────────────────────┐

   │  ┌─────────────────────┐  │

   │  │                     │  │

   │  │      产品图片       │  │

   │  │                     │  │

   │  └─────────────────────┘  │

   │  产品标题                  │

   │  $XX.XX        [按钮]    │

   └─────────────────────────────┘

   ───────────────────────────────────────────────────────────────────────────── */

.sc-product-card {

  background: white;                                    /* 白色背景 */

  border-radius: var(--sc-card-radius);                /* 12px圆角 */

  overflow: hidden;                                    /* 溢出隐藏(图片圆角) */

  border: 1px solid var(--sc-gray-200);               /* 1px灰色边框 */

  transition: transform 0.2s, box-shadow 0.2s;        /* 过渡动画 */

}

.sc-product-card:hover {

  transform: translateY(-3px);                         /* 悬停上浮3px */

  box-shadow: 0 8px 24px rgba(0,0,0,0.1);            /* 悬停阴影加深 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   04.5 产品图片 (.sc-product-img-wrap, .sc-product-img)

   

   .sc-product-img-wrap: 图片容器，设定固定高度和相对定位

   .sc-product-img: 实际图片，使用contain保持产品图完整显示

   

   注意: Hero用cover(裁剪填充)，产品用contain(完整显示)

   ───────────────────────────────────────────────────────────────────────────── */

.sc-product-img-wrap {

  position: relative;               /* 相对定位 - 作为徽章的定位参考 */

  height: 180px;                    /* 固定高度180px */

  overflow: hidden;                /* 溢出隐藏 */

  background: #eceff1;              /* 蓝灰占位背景 - 图片加载前显示 */

}

.sc-product-img {

  width: 100%;                      /* 宽度100% */

  height: 100%;                     /* 高度100% */

  object-fit: contain;               /* 包含填充 - 完整显示图片，不裁剪

                                        与Hero的cover相反 */

  padding: 10px;                    /* 10px内边距 - 避免产品图贴边 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   04.6 产品徽章 (.sc-product-badge)

   

   作用: 显示"BEST"、"NEW"等产品标签

   定位: 绝对定位在图片左上角

   

   ┌──┐

   │NEW│  ← 左上角绝对定位

   └──┘

   ───────────────────────────────────────────────────────────────────────────── */

.sc-product-badge {

  position: absolute;               /* 绝对定位 */

  top: 12px;                        /* 距顶部12px */

  left: 16px;                       /* 距左侧16px */

  font-size: 11px;                   /* 11px小字号 */

  font-weight: bold;                  /* 加粗 */

  color: white;                       /* 白色文字 */

  padding: 3px 10px;                /* 上下3px，左右10px */

  border-radius: 20px;               /* 药丸形圆角 */

  text-transform: uppercase;           /* 全大写 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   04.7 产品内容区 (.sc-product-body)

   

   包含: 标题、价格行

   ───────────────────────────────────────────────────────────────────────────── */

.sc-product-body {

  padding: 14px;                     /* 14px内边距 */

}

/* 产品标题 - 限制2行显示，超出省略 */

.sc-product-title {

  font-family: var(--sc-font-heading);   /* 衬线字体 */

  font-size: 15px;                       /* 15px */

  color: var(--sc-dark);                 /* 深色文字 */

  line-height: 1.4;                     /* 行高1.4 */

  margin-bottom: 12px;                  /* 下边距12px */

  display: -webkit-box;                  /* 弹性盒(用于line-clamp) */

  -webkit-line-clamp: 2;                /* 最多显示2行 */

  -webkit-box-orient: vertical;          /* 垂直方向 */

  overflow: hidden;                      /* 超出隐藏 */

  min-height: 42px;                     /* 最小高度 - 保证多产品对齐 */

}

/* 价格行 - flex布局，按钮靠右 */

.sc-product-price-row {

  display: flex;                     /* Flex布局 */

  align-items: center;               /* 垂直居中 */

  gap: 10px;                         /* 间距10px */

}

/* 价格数字 */

.sc-product-price {

  font-size: 20px;                   /* 20px大字号 */

  font-weight: bold;                  /* 加粗 */

  color: var(--sc-dark);             /* 深色文字 */

}

/* 价格行内的按钮 - margin-left:auto推按钮到右边 */

.sc-product-price-row .sc-btn-check-price {

  margin-left: auto;                  /* 左侧margin:auto = 靠右对齐 */

}

/* ===========================================================================

   05. Newsletter订阅区块 (.sc-newsletter)

   ===========================================================================

   

   功能: 邮件订阅表单，吸引用户订阅获取更新

   

   布局:

   ┌──────────────────────────────────────────────────────────────┐

   │  📧 标题文字                              [邮箱输入][订阅]   │

   │     描述文字                                                │

   └──────────────────────────────────────────────────────────────┘

   

   移动端(≤768px): 垂直堆叠

   ┌────────────────────────────────┐

   │  📧 标题文字                    │

   │     描述文字                    │

   │  ┌────────────────────────┐    │

   │  │  邮箱输入框            │    │

   │  └────────────────────────┘    │

   │  ┌────────────────────────┐    │

   │  │       订阅按钮         │    │

   │  └────────────────────────┘    │

   └────────────────────────────────┘

   =========================================================================== */

.sc-newsletter {

  background: var(--sc-newsletter-bg);       /* 浅蓝背景 */

  border: 2px solid var(--sc-blue);           /* 2px蓝色边框 */

  margin: 0 40px 30px;                       /* 左右40px，上下30px */

  border-radius: var(--sc-card-radius);       /* 12px圆角 */

  padding: 30px 40px;                        /* 内边距30px */

  display: flex;                              /* Flex布局 */

  align-items: center;                        /* 垂直居中 */

  gap: 40px;                                 /* 间距40px */

}

.sc-newsletter-title {

  font-family: var(--sc-font-heading);       /* 衬线字体 */

  font-size: 22px;                           /* 22px */

  color: var(--sc-dark);                     /* 深色文字 */

  margin-bottom: 8px;                        /* 下边距8px */

}

.sc-newsletter-desc {

  color: var(--sc-gray-600);                 /* 灰色文字 */

  font-size: 14px;                           /* 14px */

  line-height: 1.5;                          /* 行高1.5 */

}

/* 表单容器 - margin-left:auto推表单到右边 */

.sc-newsletter-form {

  display: flex;                             /* Flex布局 */

  margin-left: auto;                          /* 靠右对齐 */

  flex-shrink: 0;                             /* 不被压缩 */

}

/* 邮箱输入框 */

.sc-newsletter-email {

  background: white;                          /* 白色背景 */

  border: 1px solid var(--sc-blue);           /* 蓝色边框 */

  border-right: none;                         /* 右边框取消 - 连接按钮 */

  border-radius: 20px 0 0 20px;              /* 左边20px圆角，右边0 */

  padding: 10px 20px;                         /* 内边距 */

  font-size: 14px;                            /* 14px */

  color: #333;                                /* 深灰文字 */

  width: 260px;                              /* 固定宽度260px */

  outline: none;                              /* 聚焦时无轮廓线 */

}

/* 输入框占位符文字颜色 */

.sc-newsletter-email::placeholder {

  color: #aaa;                                /* 浅灰占位符 */

}

/* 订阅提交按钮 */

.sc-newsletter-submit {

  background: var(--sc-blue);                 /* 蓝色背景 */

  color: white;                               /* 白色文字 */

  border: none;                               /* 无边框 */

  border-radius: 0 20px 20px 0;               /* 右边20px圆角，左边0 */

  padding: 10px 24px;                         /* 内边距 */

  font-size: 15px;                             /* 15px */

  font-weight: bold;                           /* 加粗 */

  cursor: pointer;                             /* 手型光标 */

  white-space: nowrap;                         /* 不换行 */

  transition: background 0.2s;                /* 过渡效果 */

}

.sc-newsletter-submit:hover {

  background: #3a8ee5;                         /* 悬停变深蓝 */

}

/* ===========================================================================

   06. 免责声明 (.savingcat-*)

   ===========================================================================

   

   功能: 联盟营销免责声明，符合FTC规定

   样式: 居中显示、小字号、灰色文字

   =========================================================================== */

/* 联盟免责声明 */

.savingcat-disclosure {

  font-size: 12px;                            /* 12px小字号 */

  color: #757575;                             /* 灰色文字 */

  line-height: 1.6;                          /* 行高1.6 */

  max-width: 800px;                           /* 最大宽度800px */

  margin: 20px auto;                         /* 水平居中 */

  text-align: center;                         /* 文字居中 */

  padding: 0 20px;                            /* 左右20px内边距 */

}

/* 空状态提示 - 无内容时显示 */

.savingcat-empty {

  color: #999;                                /* 浅灰文字 */

  font-size: 14px;                            /* 14px */

  padding: 20px;                              /* 内边距 */

  text-align: center;                         /* 居中对齐 */

}

/* ===========================================================================

   07. 响应式断点 (@media)

   ===========================================================================

   

   断点定义:

   ├── ≤768px  平板竖屏 / 大手机

   └── ≤480px  手机竖屏

   

   ---------------------------------------------------------------------------

   07.1 平板竖屏 (≤768px)

   07.2 手机竖屏 (≤480px)

   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────

   07.1 平板竖屏 (≤768px)

   

   调整内容:

   - Hero: 减小高度，按钮往下靠

   - 产品网格: 4列 → 2列

   - Newsletter: 水平布局 → 垂直堆叠

   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  

  /* 产品网格: 4列 → 2列 */

  .sc-products-grid {

    grid-template-columns: repeat(2, 1fr);    /* 2列等宽 */

    padding: 0 16px;                          /* 左右边距减小 */

    gap: 12px;                                 /* 间距减小 */

  }

  /* Newsletter: 垂直堆叠 */

  .sc-newsletter {

    flex-direction: column;                    /* 垂直排列 */

    gap: 20px;                                /* 间距减小 */

    padding: 24px 20px;                       /* 内边距调整 */

    margin: 0 16px 20px;                      /* 外边距调整 */

  }

  /* Newsletter表单: 居中，不再靠右 */

  .sc-newsletter-form {

    margin-left: 0;                            /* 取消靠右 */

    width: 100%;                              /* 全宽 */

  }

  /* 邮箱输入框: 全宽 */

  .sc-newsletter-email {

    width: 100%;                              /* 全宽 */

  }

  /* Hero: 减小高度 */

  .sc-hero {

    height: 360px;               /* 改动说明(2026-05-27): 平板端 Hero 高度由 300px 增至 360px，与桌面端视觉节奏对齐。 */

  }

  /* Hero内容区: 上下左右居中 */

  .sc-hero-content {

    position: absolute;          /* 绝对定位 */

    top: 50%;                    /* 改动说明(2026-05-27): 平板端同步垂直居中。 */

    bottom: auto;                /* 改动说明(2026-05-27): 取消原底部对齐覆盖。 */

    left: 15px;                  /* 左侧15px */

    right: 15px;                 /* 右侧15px */

    transform: translateY(-50%);  /* 改动说明(2026-05-27): 整组内容垂直居中。 */

    align-items: center;         /* 水平居中 */

  }

  /* Hero标题: 减小字号 */

  .sc-hero-title {

    font-size: 20px;             /* 标题20px */

    text-align: center;          /* 居中 */

  }

  /* Hero描述: 缩小 */

  .sc-hero-desc {

    font-size: 13px;            /* 描述13px */

    text-align: center;          /* 居中 */

  }

  /* Hero按钮: 平板端按比例放大 */

  .sc-btn-primary {

    font-size: 15px;            /* 改动说明(2026-05-27): 平板端按钮由13px放大到15px，与桌面按钮保持比例层级。 */

    padding: 11px 22px;         /* 改动说明(2026-05-27): 平板端按钮内边距同步放大，避免只放大文字导致按钮比例失衡。 */

  }

/* ─────────────────────────────────────────────────────────────────────────────

   07.2 手机竖屏 (≤480px)

   

   调整内容:

   - 产品网格: 2列 → 1列

   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  

  /* 产品网格: 2列 → 1列 */

  .sc-products-grid {

    grid-template-columns: 1fr;

  }

  /* Hero容器: 降低高度 */

  .sc-hero {

    height: 250px;

  }

  /* Hero内容区: 手机端保持居中且紧凑 */

  .sc-hero-content {

    top: 50%;                    /* 改动说明(2026-05-27): 手机端也与整体 Hero 内容对齐保持一致。 */

    bottom: auto;

    left: 0;                     /* 改动说明(2026-05-27): 与 width:100% 同时使用时不能再保留 10px 偏移，避免横向中心偏右。 */

    right: 0;

    transform: translateY(-50%);

    align-items: center;

    width: 100%;

    padding: 0 10px;

  }

  /* Hero标题: 由后台控制，移动端小8px */

  .sc-hero-title {

    font-size: calc(var(--sc-hero-title-size, 30px) - 8px) !important;

    text-align: center;

  }

  /* Hero描述: 保留显示 */

  .sc-hero-desc {

    display: block;

  }

  /* Hero按钮组: 允许换行 */

  .sc-hero-actions {

    width: 100%;

    text-align: center;

    flex-wrap: wrap;

    gap: 6px;

  }

  /* Hero按钮: 手机端按比例放大 */

  .sc-btn-primary {

    font-size: 14px !important;      /* 改动说明(2026-05-27): 手机端按钮由12px放大到14px，保持移动端可点击性。 */

    padding: 9px 18px !important;    /* 改动说明(2026-05-27): 手机端按钮内边距同步放大，视觉比例跟随文字增长。 */

  }

}

}

   08.1 Hero相关动态样式

   08.2 Trust Bar相关动态样式

   08.3 产品相关动态样式

   =========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────

   08.1 Hero相关动态样式

   ───────────────────────────────────────────────────────────────────────────── */

/* Hero CTA按钮 - 使用主题色变量覆盖 */

.sc-hero-cta {

  background: var(--sc-teal) !important;      /* 使用主题的青色变量 */

}

/* Hero标题动态样式 - 后台设置的颜色/字号会应用到这里 */

.sc-hero-title-dynamic {

  /* color removed - let backend control */

  font-size: 48px;                           /* 48px大标题 */

  word-break: break-word;                        /* 允许任意位置断行 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   08.2 Trust Bar相关动态样式

   ───────────────────────────────────────────────────────────────────────────── */

/* 星级评分填充宽度 - 动态设置4.5星显示 */

.sc-stars-filled-dynamic {

  width: 90%;                                 /* 90% = 4.5星 */

}

/* ─────────────────────────────────────────────────────────────────────────────

   08.3 产品相关动态样式

   ───────────────────────────────────────────────────────────────────────────── */

/* 插件免责声明 - 替代内联样式 */

.apaw-disclosure {

  font-size: 12px;                            /* 12px小字号 */

  color: #757575;                             /* 灰色 */

  line-height: 1.6;                          /* 行高1.6 */

  max-width: 800px;                           /* 最大宽度800px */

  margin: 20px auto;                          /* 居中 */

  text-align: center;                         /* 文字居中 */

}

/* 短代码中的产品描述 - 替代内联样式 */

.sc-product-desc {

  font-size: 12px;                            /* 12px小字号 */

  color: #757575;                             /* 灰色 */

  margin-bottom: 8px;                          /* 下边距8px */

}



/* 第二阶段视觉专业化覆盖：产品CTA与主题CTA统一 */

.sc-btn-check-price {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

  font-weight: 700;

  padding: 10px 16px;

  border-radius: 999px;

  box-shadow: 0 4px 14px rgba(74,158,237,0.22);

  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;

}

.sc-btn-check-price:hover {

  transform: translateY(-1px);

  box-shadow: 0 6px 18px rgba(74,158,237,0.28);

}



   文件结束

   ===========================================================================

   

   最后更新: 2026-04-29

   更新内容: 添加详细备注说明

   

   快捷修改参考:

   ─────────────────────────────────────────────────────────────────────────────

   修改Hero移动端按钮位置 → 第307行 bottom: 100px

   修改产品卡片高度      → 第195行 height: 180px

   修改产品网格列数      → 第171行 repeat(4, 1fr)

   修改主题主色调       → 第21行 --sc-blue: #4a9eed

   =========================================================================== */