/* pophie-bridge.css — 让 Shopify Horizon 4.1.1 匹配 Pophie 设计规范 v1.2
   只新增此文件 + theme.liquid 引入，绝不改 Horizon 核心文件。
   ⚠️ 仓库正本。经 CDN 托管：postbuild 复制进 dist/_shell/，deploy.sh site 上传到
      data.pophie.com/{shell|shell-test}/pophie-bridge.css。改这里 → deploy 即生效，
      不再在 Shopify 后台手改。Horizon theme.liquid 用 <link> 引 CDN URL（一次性配置）。 */
:root{
  /* Pophie 设计 token（真值源 site-pophie/src/styles/tokens.css） */
  --pp-primary:#ff6d99; --pp-primary-hover:#e8557f;
  --pp-dark:#45403c; --pp-grey:#6b645d; --pp-border:#e5e5e5;
  --pp-white:#ffffff; --pp-sand:#f4f3f2; --pp-cream:#fdf3e3;
  --pp-dark-bg:#1a1a1c; --pp-black:#000000;
  --pp-shadow-sm:0 4px 20px -6px rgba(60,45,40,.10);
  --pp-shadow-md:0 22px 48px -28px rgba(60,45,40,.20);
  --pp-shadow-btn:0 10px 24px -8px rgba(255,109,153,.42);
  --pp-shadow-btn-hover:0 14px 30px -10px rgba(255,109,153,.5);
  --pp-ease:cubic-bezier(.2,.8,.2,1);
  --pp-font:"Onest","Noto Sans SC","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* 1) 字体 → Onest（Horizon 4 个字体槽全覆盖，注意双横线） */
  --font-body--family:var(--pp-font);
  --font-heading--family:var(--pp-font);
  --font-subheading--family:var(--pp-font);
  --font-accent--family:var(--pp-font);
  --font-heading--weight:800;

  /* 2) 颜色（全局 palette；hex + 配套 rgb 三元组二者都要） */
  --color-background:var(--pp-white); --color-background-rgb:255,255,255;
  --color-foreground:var(--pp-dark); --color-foreground-rgb:69,64,60;
  --color-border:var(--pp-border); --color-border-rgb:229,229,229;
  --color-primary-button-background:var(--pp-primary);
  --color-primary-button-text:var(--pp-white);
  --color-primary-button-border:var(--pp-primary);
  --color-primary-button-hover-background:var(--pp-primary-hover);
  --color-primary-button-hover-text:var(--pp-white);
  --color-primary-button-hover-border:var(--pp-primary-hover);
  --color-secondary-button-background:var(--pp-white);
  --color-secondary-button-text:var(--pp-primary);
  --color-secondary-button-border:var(--pp-primary);
  --color-secondary-button-hover-background:var(--pp-white);
  --color-secondary-button-hover-text:var(--pp-primary-hover);
  --color-secondary-button-hover-border:var(--pp-primary-hover);
  --color-input-background:var(--pp-white);
  --color-input-text:var(--pp-dark);
  --color-input-border:var(--pp-border);

  /* 3) 圆角 */
  --style-border-radius-buttons-primary:100px;
  --style-border-radius-buttons-secondary:100px;
  --style-border-radius-pills:100px;
  --style-border-radius-inputs:12px;
  --style-border-radius-popover:24px;

  /* 4) 页宽 → 1280px（三档全锁住） */
  --narrow-page-width:1280px; --normal-page-width:1280px; --wide-page-width:1280px;

  /* 5) 阴影 */
  --shadow-button:var(--pp-shadow-btn);
}

/* 6a) 商品卡 .product-card → 对齐主站 DS .card（2026-07-01 重做，实测于线上）
   旧版把阴影加在 radius:0 的外层、只给内层加圆角 → 阴影直角、内容圆角、无白底内距，
   读作"带浮动阴影的照片"。现把 bg+圆角+overflow+阴影统一到 .product-card 一个元素：
   图片满血铺（由卡片 overflow 裁圆角）、正文加内距、DS 字体、hover 抬起+图片缩放。 */
.product-card{
  /* 纯白卡、无描边：集合页纯白底，靠更明显的柔影把卡片从白底上托起来
     (灰底发脏、描边难看，都已否掉)。双层阴影=大范围环境影+近处定位影。 */
  background:var(--pp-white);
  border-radius:24px; overflow:hidden;
  box-shadow:0 10px 30px -6px rgba(60,45,40,.20), 0 2px 8px -2px rgba(60,45,40,.10);
  transition:box-shadow .4s var(--pp-ease), transform .4s var(--pp-ease);
}
.product-card:hover{ box-shadow:0 18px 44px -8px rgba(60,45,40,.26), 0 3px 10px -2px rgba(60,45,40,.12); transform:translateY(-5px); }
/* 媒体满血铺、无内圆角/外边距（含 .card-gallery，否则图片下沿会出现圆弧）。
   card-gallery 下边距控制图片↔标题间距（+ Horizon 的 4px content gap = 目标 20px）。 */
.product-card .card-gallery,
.product-card .product-media-container,
.product-card .product-media{ border-radius:0 !important; margin:0 !important; }
.product-card .card-gallery{ margin-bottom:16px !important; }
.product-card .product-media__image{ transition:transform .6s var(--pp-ease); }
.product-card:hover .product-media__image{ transform:scale(1.05); }
/* 正文：只加左右内距（价格也在一个 .text-block 里，故此处统一对齐；不要再单独给
   .price__regular 加左右内距，否则会双重缩进）。去掉 Horizon 默认的 text-block 顶内距
   让标题贴近图片；底部留白放在 __content 上。 */
.product-card .text-block{ padding-top:0 !important; padding-left:20px !important; padding-right:20px !important; font-weight:600 !important; color:var(--pp-dark) !important; }
.product-card__content{ padding-bottom:20px !important; }
.product-card .price__regular,
.product-card .price__sale{ padding-left:0 !important; padding-right:0 !important; }
.product-card .price,
.product-card .price-item,
.product-card .price-item--regular{ color:var(--pp-primary) !important; font-weight:700 !important; }

/* 6b) 其它卡片（集合/资源/搜索结果）：沿用逐 block 内联圆角变量兜底（未逐一实测，
   若某类也出现"阴影不贴圆角"，按 6a 同法统一到外层再改）。
   注意：.card-gallery 是商品卡的媒体容器，不在此列（否则会给商品图加 24px 圆角）。 */
.collection-card, .resource-card, .predictive-search-results__card{
  --resource-card-corner-radius:24px !important;
  --card-corner-radius:24px !important;
  --product-corner-radius:24px !important;
  --border-radius:24px !important;
  box-shadow:var(--pp-shadow-sm);
  transition:box-shadow .4s var(--pp-ease), transform .4s var(--pp-ease);
}
.collection-card:hover, .resource-card:hover{
  box-shadow:var(--pp-shadow-md); transform:translateY(-5px);
}

/* 7) 标题字重微调（h3=700）  8) 按钮 hover 托起 */
h3, .h3{ font-weight:700; }
.button:hover{ transform:translateY(-2px); }