/* ==========================================================================
   STRUGGLE ROACH — 单品 DTC 落地页样式
   作用于首页自定义 section（sr_*）。全部选择器以 .sr-root / .sr- 前缀限定，
   不覆盖主题原有 class，不影响商品页 / 购物车 / 结账页。
   色板：Black / Warm White / Warm Gold。无渐变、无蓝绿紫。
   ========================================================================== */

.sr-root {
  --sr-ink: #0B0B0B;
  --sr-ink-2: #141414;
  --sr-ink-3: #1B1A18;
  --sr-cream: #F7F4EF;
  --sr-cream-2: #EFEAE1;
  --sr-white: #FFFFFF;
  --sr-gold: #C6A15B;
  --sr-gold-deep: #9E7F3F;
  --sr-text: #151412;
  --sr-mute: #6D665B;
  --sr-on-dark: #F5F2EC;
  --sr-on-dark-mute: rgba(245, 242, 236, .62);
  --sr-line: rgba(21, 20, 18, .13);
  --sr-line-dark: rgba(245, 242, 236, .15);
  --sr-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sr-serif: Georgia, 'Times New Roman', serif;
  --sr-maxw: 1280px;
  --sr-pad: clamp(20px, 5vw, 64px);
  --sr-header-h: 64px;

  font-family: var(--sr-sans);
  color: var(--sr-text);
  background: var(--sr-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sr-root *, .sr-root *::before, .sr-root *::after { box-sizing: border-box; }
/* 重置规则用 :where() 降到 0 特异性，避免覆盖组件自身颜色 */
:where(.sr-root) img { display: block; max-width: 100%; height: auto; }
:where(.sr-root) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.sr-root) a { color: inherit; text-decoration: none; }
:where(.sr-root) ul, :where(.sr-root) ol { margin: 0; padding: 0; list-style: none; }
:where(.sr-root) h1, :where(.sr-root) h2, :where(.sr-root) h3, :where(.sr-root) p { margin: 0; }

.sr-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--sr-ink); color: var(--sr-cream); padding: 12px 18px; }
.sr-skip:focus { left: 12px; top: 12px; }
.sr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   排版
   -------------------------------------------------------------------------- */
.sr-eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--sr-gold); margin: 0 0 18px; }
.sr-h1 { font-size: clamp(36px, 5.4vw, 74px); line-height: 1; letter-spacing: -.022em; font-weight: 500; margin: 0 0 20px; text-transform: uppercase; }
.sr-h2 { font-size: clamp(27px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -.018em; font-weight: 500; margin: 0 0 16px; text-transform: uppercase; }
.sr-h3 { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; margin: 0 0 12px; text-transform: uppercase; }
.sr-serif { font-family: var(--sr-serif); font-weight: 400; letter-spacing: 0; text-transform: none; }
.sr-lead { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.72; color: var(--sr-mute); margin: 0 0 26px; max-width: 56ch; }
.sr-body { font-size: 15px; line-height: 1.75; color: var(--sr-mute); }
.sr-on-dark .sr-h1, .sr-on-dark .sr-h2, .sr-on-dark .sr-h3 { color: var(--sr-on-dark); }
.sr-on-dark .sr-lead, .sr-on-dark .sr-body { color: var(--sr-on-dark-mute); }

/* --------------------------------------------------------------------------
   布局
   -------------------------------------------------------------------------- */
.sr-wrap { max-width: var(--sr-maxw); margin: 0 auto; padding: 0 var(--sr-pad); width: 100%; }
.sr-sec { padding: clamp(64px, 8.5vw, 132px) 0; }
.sr-dark { background: var(--sr-ink); color: var(--sr-on-dark); }
.sr-cream { background: var(--sr-cream); }
.sr-white { background: var(--sr-white); }
.sr-center { text-align: center; }
.sr-center .sr-lead { margin-left: auto; margin-right: auto; }
/* Grid 子项默认 min-width:auto，长英文串会撑宽导致横向溢出 */
.sr-hero-grid > *, .sr-split > *, .sr-packs > *, .sr-benefits > *, .sr-steps > * { min-width: 0; }

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.sr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 34px;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  border: 1px solid transparent; border-radius: 1px;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}
.sr-btn--gold { background: var(--sr-gold); color: #141210; border-color: var(--sr-gold); }
.sr-btn--gold:hover { background: #D4B274; border-color: #D4B274; transform: translateY(-1px); }
.sr-btn--ink { background: var(--sr-ink); color: var(--sr-on-dark); border-color: var(--sr-ink); }
.sr-btn--ink:hover { background: var(--sr-ink-3); border-color: var(--sr-ink-3); transform: translateY(-1px); }
.sr-btn--ghost { background: transparent; color: var(--sr-on-dark); border-color: var(--sr-line-dark); }
.sr-btn--ghost:hover { border-color: var(--sr-gold); color: var(--sr-gold); }
.sr-btn--ghost-dark { background: transparent; color: var(--sr-text); border-color: var(--sr-line); }
.sr-btn--ghost-dark:hover { border-color: var(--sr-text); }
.sr-btn--block { width: 100%; }
.sr-btn--lg { min-height: 58px; padding: 0 40px; }
.sr-root a:focus-visible, .sr-root button:focus-visible { outline: 2px solid var(--sr-gold); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   S1 Hero
   -------------------------------------------------------------------------- */
.sr-hero { background: var(--sr-ink); color: var(--sr-on-dark); overflow: hidden; }
.sr-hero-grid { display: grid; grid-template-columns: 1fr; }
.sr-hero-media { position: relative; background: #0E0E0E; order: 1; }
.sr-hero-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; }
.sr-hero__media-pc { display: none; }
.sr-hero__media-mb { display: block; }
/* 移动端容器比例必须贴合素材「有效内容」区域，否则会把素材自带的黑边露出来。
   本项目移动版素材 720x870，有效内容仅到 y=466，下方 404px 为纯黑 —— 故取 720/466。
   可用 section 设置 hero_mb_ratio 覆盖。 */
.sr-hero-media { aspect-ratio: var(--sr-hero-mb-ratio, 720 / 466); }
.sr-hero-text { order: 2; background: var(--sr-ink); padding: 28px var(--sr-pad) 42px; }
.sr-hero-features {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sr-on-dark-mute); margin: 0 0 24px;
}
.sr-hero-features i { width: 3px; height: 3px; background: var(--sr-gold); border-radius: 50%; display: block; }
.sr-hero-price { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-on-dark-mute); margin: 20px 0 0; }
.sr-hero-price b { color: var(--sr-on-dark); font-weight: 500; }
.sr-hero-price span { color: var(--sr-gold); margin: 0 10px; }
@media (max-width: 899px) {
  .sr-hero-text .sr-h1 { margin-bottom: 14px; }
  .sr-hero-text .sr-lead { margin-bottom: 20px; }
}
@media (min-width: 900px) {
  /* 桌面端：图片接近全宽铺满，文字叠在左侧留白区（不使用渐变遮罩，
     靠一张半透明实色面板保证任何素材下的可读性） */
  .sr-hero-grid { position: relative; display: block; min-height: min(90vh, 860px); }
  .sr-hero-media { position: absolute; inset: 0; aspect-ratio: auto; min-height: 0; }
  .sr-hero-media img { -o-object-position: center right; object-position: center right; }
  .sr-hero__media-pc { display: block; }
  .sr-hero__media-mb { display: none; }
  .sr-hero-text {
    position: relative; z-index: 2; order: 0;
    display: flex; flex-direction: column; justify-content: center;
    min-height: min(90vh, 860px);
    max-width: min(700px, 54%);
    padding: 96px 0 96px var(--sr-pad);
    background: rgba(11, 11, 11, .5);
  }
  .sr-hero-text .sr-h1 { max-width: 15ch; }
  .sr-hero-text .sr-lead { max-width: 34ch; }
}

/* --------------------------------------------------------------------------
   两栏通用
   -------------------------------------------------------------------------- */
.sr-split { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
/* 网格子项必须允许收缩，否则 aspect-ratio + min-height 会把宽度顶出列宽 */
.sr-split > * { min-width: 0; }
.sr-split-media { position: relative; overflow: hidden; background: var(--sr-cream-2); width: 100%; max-width: 100%; }
.sr-split-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.sr-split-media { aspect-ratio: 4 / 3; }
.sr-split-text { padding: 44px var(--sr-pad) 0; }
.sr-split-media .sr-media-pc { display: none; }
/* 移动端：容器比例须贴合素材有效内容区，否则露出素材自带黑边。
   sr-experience-mobile-d469853781.jpg 为 720x870，有效内容仅 y=0..616 —— 故取 720/616。 */
@media (max-width: 899px) {
  .sr-split-media--exp { aspect-ratio: 720 / 616; }
  .sr-split-media--exp img { -o-object-position: center top; object-position: center top; }
}

@media (min-width: 900px) {
  .sr-split { grid-template-columns: minmax(0, 44%) minmax(0, 56%); align-items: center; }
  .sr-split--flip { grid-template-columns: minmax(0, 56%) minmax(0, 44%); }
  .sr-split--flip .sr-split-media { order: 2; }
  .sr-split--flip .sr-split-text { order: 1; }
  .sr-split-media { aspect-ratio: 2 / 3; min-height: 620px; }
  /* 近方形素材用 1:1 容器；必须清掉继承来的 min-height，否则 1:1 会把宽度反推成 620px 顶出列宽 */
  .sr-split-media--square { aspect-ratio: 1 / 1; min-height: 0; }
  .sr-split-media--square img { height: auto; aspect-ratio: 1 / 1; }
  .sr-split-text { padding: 0 64px; }
  .sr-split--flip .sr-split-text { padding: 0 var(--sr-pad) 0 64px; }
  .sr-split-media .sr-media-pc { display: block; }
  .sr-split-media .sr-media-mb { display: none; }
}

/* --------------------------------------------------------------------------
   S2 三个卖点
   -------------------------------------------------------------------------- */
.sr-benefits { display: grid; grid-template-columns: 1fr; gap: 44px; margin-top: 56px; }
.sr-benefit { border-top: 1px solid var(--sr-line); padding-top: 26px; }
.sr-benefit svg { color: var(--sr-gold); margin-bottom: 18px; }
.sr-benefit h3 { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; margin: 0 0 10px; }
.sr-benefit p { font-size: 14.5px; line-height: 1.7; color: var(--sr-mute); }
@media (min-width: 820px) { .sr-benefits { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* --------------------------------------------------------------------------
   S4 质地区
   -------------------------------------------------------------------------- */
.sr-texture-list { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 40px; border-top: 1px solid var(--sr-line); }
.sr-texture-list li {
  display: flex; align-items: baseline; gap: 16px; padding: 18px 0;
  border-bottom: 1px solid var(--sr-line);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sr-text);
}
.sr-texture-list span { color: var(--sr-gold-deep); font-size: 11px; min-width: 22px; }
@media (min-width: 640px) {
  .sr-texture-list { grid-template-columns: 1fr 1fr; -moz-column-gap: 44px; column-gap: 44px; }
  .sr-texture-list li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   S5 How to Use
   -------------------------------------------------------------------------- */
.sr-steps { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 56px; border-top: 1px solid var(--sr-line-dark); }
.sr-step { padding: 34px 0; border-bottom: 1px solid var(--sr-line-dark); }
.sr-step-no { font-size: 11px; letter-spacing: .22em; color: var(--sr-gold); margin: 0 0 14px; }
.sr-step h3 { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 10px; color: var(--sr-on-dark); }
.sr-step p { font-size: 14.5px; line-height: 1.7; color: var(--sr-on-dark-mute); }
.sr-note { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--sr-line-dark); font-size: 12.5px; line-height: 1.7; color: var(--sr-on-dark-mute); max-width: 60ch; }
@media (min-width: 860px) {
  .sr-steps { grid-template-columns: repeat(3, 1fr); gap: 48px; border-top: 0; }
  .sr-step { border-top: 1px solid var(--sr-line-dark); border-bottom: 0; padding: 34px 0 0; }
}

/* --------------------------------------------------------------------------
   S6 Choose Your Pack（转化核心）
   -------------------------------------------------------------------------- */
.sr-packs { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 52px; }
.sr-pack {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--sr-white); border: 1px solid var(--sr-line); padding: 34px 28px 30px; border-radius: 2px;
  transition: border-color .28s ease, transform .28s ease, background-color .28s ease;
}
.sr-pack:hover { border-color: rgba(21, 20, 18, .32); }
.sr-pack.is-active { border-color: var(--sr-text); }
.sr-pack-badge {
  position: absolute; top: -11px; left: 28px; background: var(--sr-gold); color: #141210;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  padding: 5px 12px; border-radius: 1px;
}
.sr-pack-qty { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--sr-mute); margin: 0 0 12px; }
.sr-pack-price { font-size: clamp(30px, 3.4vw, 38px); line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; }
.sr-pack-desc { font-size: 14px; line-height: 1.65; color: var(--sr-mute); margin: 0 0 22px; }
.sr-pack-pick { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.sr-pack-dot { width: 16px; height: 16px; border: 1px solid rgba(21, 20, 18, .34); border-radius: 50%; display: grid; place-items: center; flex: none; transition: border-color .25s ease; }
.sr-pack-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sr-gold); transform: scale(0); transition: transform .25s ease; }
.sr-pack.is-active .sr-pack-dot { border-color: var(--sr-gold); }
.sr-pack.is-active .sr-pack-dot::after { transform: scale(1); }
.sr-pack--best { background: var(--sr-ink); border-color: var(--sr-gold); }
.sr-pack--best:hover { border-color: #D4B274; }
.sr-pack--best .sr-pack-qty { color: var(--sr-on-dark-mute); }
.sr-pack--best .sr-pack-price { color: var(--sr-on-dark); }
.sr-pack--best .sr-pack-desc { color: var(--sr-on-dark-mute); }
.sr-pack--best .sr-pack-pick { color: var(--sr-on-dark); }
.sr-pack--best .sr-pack-dot { border-color: rgba(245, 242, 236, .4); }
.sr-pack-save { display: inline-block; margin: 0 0 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sr-gold); }
.sr-pack-list li { font-size: 13.5px; line-height: 1.9; color: var(--sr-on-dark-mute); padding-left: 16px; position: relative; }
.sr-pack-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--sr-gold); }
.sr-pack-list { margin: 0 0 22px; }
.sr-buy { margin: 32px auto 0; max-width: 520px; }
/* 主题的商品表单自定义元素默认是 inline，显式声明为块级，避免按钮排版错位 */
.sr-root spz-product-form { display: block; }
.sr-root spz-product-form form { display: block; }
.sr-buy-hint { font-size: 12.5px; line-height: 1.7; color: var(--sr-mute); margin: 16px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sr-buy-hint svg { flex: none; color: var(--sr-gold); }
.sr-pack-unset { font-size: 12px; line-height: 1.7; color: var(--sr-gold-deep); margin: 14px 0 0; }
@media (min-width: 820px) {
  .sr-packs { grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
  .sr-pack { padding: 42px 36px 36px; }
  .sr-pack--best { transform: translateY(-8px); }
}

/* --------------------------------------------------------------------------
   S7 品牌态度
   -------------------------------------------------------------------------- */
.sr-brand { position: relative; overflow: hidden; background: var(--sr-ink); }
.sr-brand-media { position: absolute; inset: 0; }
.sr-brand-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: .5; -o-object-position: center 30%; object-position: center 30%; }
.sr-brand-in { position: relative; z-index: 2; padding: clamp(84px, 12vw, 150px) 0; }
.sr-brand-quote { font-family: var(--sr-serif); font-size: clamp(24px, 3.2vw, 40px); line-height: 1.24; color: var(--sr-on-dark); margin: 0 0 26px; max-width: 20ch; }
.sr-brand-sign { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--sr-line-dark); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sr-gold); }

/* --------------------------------------------------------------------------
   S8 FAQ
   -------------------------------------------------------------------------- */
.sr-faq { margin-top: 46px; border-top: 1px solid var(--sr-line); max-width: 900px; }
.sr-faq-item { border-bottom: 1px solid var(--sr-line); }
.sr-faq-q {
  width: 100%; display: flex; align-items: flex-start; gap: 20px; justify-content: space-between;
  padding: 26px 0; text-align: left; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.4; font-weight: 500;
  transition: color .25s ease;
}
.sr-faq-q:hover { color: var(--sr-gold-deep); }
.sr-faq-sign { flex: none; width: 22px; height: 22px; position: relative; margin-top: 2px; color: var(--sr-gold); }
.sr-faq-sign::before, .sr-faq-sign::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform .32s ease; }
.sr-faq-sign::before { width: 13px; height: 1px; }
.sr-faq-sign::after { width: 1px; height: 13px; }
.sr-faq-item.is-open .sr-faq-sign::after { transform: translate(-50%, -50%) scaleY(0); }
.sr-faq-a { overflow: hidden; height: 0; transition: height .36s cubic-bezier(.4, 0, .2, 1); }
.sr-faq-a p { padding: 0 0 28px; max-width: 70ch; font-size: 14.5px; line-height: 1.75; color: var(--sr-mute); }

/* --------------------------------------------------------------------------
   S9 Final CTA
   -------------------------------------------------------------------------- */
.sr-final { position: relative; overflow: hidden; background: var(--sr-ink); text-align: center; }
.sr-final-media { position: absolute; inset: 0; }
.sr-final-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: .42; }
.sr-final-in { position: relative; z-index: 2; padding: clamp(80px, 11vw, 140px) 0; }
.sr-final-prices { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 34px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sr-on-dark-mute); }
.sr-final-prices b { color: var(--sr-on-dark); font-weight: 500; }

/* --------------------------------------------------------------------------
   Sticky Add to Cart —— 滚过首屏后出现，移动端优先
   底部留白固定写在 footer 之外，避免滚到底错位遮挡
   -------------------------------------------------------------------------- */
.sr-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(11, 11, 11, .96); border-top: 1px solid var(--sr-line-dark);
  transform: translateY(102%); transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sr-sticky.is-show { transform: translateY(0); }
.sr-sticky-in { max-width: var(--sr-maxw); margin: 0 auto; padding: 10px var(--sr-pad); display: flex; align-items: center; gap: 14px; min-height: 62px; }
.sr-sticky-meta { min-width: 0; flex: 1; }
.sr-sticky-name { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sr-on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sticky-sub { font-size: 11px; letter-spacing: .1em; color: var(--sr-on-dark-mute); margin-top: 3px; }
.sr-sticky-sub b { color: var(--sr-gold); font-weight: 500; }
.sr-sticky .sr-btn { min-height: 44px; padding: 0 22px; font-size: 11px; letter-spacing: .16em; flex: none; }
@media (max-width: 520px) {
  .sr-sticky-sub { display: none; }
  .sr-sticky-in { gap: 10px; min-height: 58px; }
  .sr-sticky .sr-btn { flex: 1; max-width: 190px; }
}
/* Sticky 条所在的 section 只作定位用，不产生背景与留白 */
.sr-root.sr-sticky-wrap { background: transparent; padding: 0; }

/* --------------------------------------------------------------------------
   入场动效 —— 150–700ms，可降级
   -------------------------------------------------------------------------- */
.sr-reveal { opacity: 0; transform: translateY(18px); transition: opacity .62s ease, transform .62s cubic-bezier(.22, .61, .36, 1); }
.sr-reveal.is-in { opacity: 1; transform: none; }
.sr-reveal--d1 { transition-delay: .08s; }
.sr-reveal--d2 { transition-delay: .16s; }
.sr-reveal--d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .sr-root * { animation: none !important; transition-duration: .01ms !important; }
  .sr-reveal { opacity: 1; transform: none; }
  .sr-sticky { transition: none; }
  [data-sr-parallax] { transform: none !important; }
}

/* 主题自带 header 保持在最上层，不遮挡首屏内容 */
body.template-index .sr-hero { padding-top: 0; }