/* ==========================================================================
   STRUGGLE ROACH · 首页设计系统 v4
   --------------------------------------------------------------------------
   配色来源：逐像素采样客户设计稿（img_v3_02169_66f4d59f…jpg，419×1920）
     顶部促销条  薄荷绿  #499F92
     Header      纯黑    #000000（白字）
     Hero 按钮   琥珀    #DEAB5A（深棕字）
     页面米底    米色    #ECD9CA
     深棕        #552D0A（ADD TO CART 按钮、深色文字）
     浅米（Hero） #D0B19C → #ECD8CD 渐变
     纯白区块    #FFFFFF（Why / FAQ）
     底部        近黑    #0B0B0B
   尺寸来源：飞书规格稿
     Hero 1920×1080 ｜ Scenarios 800×1024 ｜ Products 1024×1024
     Why 600×800 ｜ 合照 1920×1080 ｜ FinalCTA 520×520 ｜ 图标 55×65
   字体：Gotham（商用授权）。把 gotham.woff2 放进 assets/ 即自动启用。
   ========================================================================== */

@font-face {
  font-family: 'Gotham';
  src: url('gotham.woff2') format('woff2'), url('gotham.woff') format('woff');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- 取色（设计稿实测）---- */
  --sr-mint:      #499F92;   /* 顶部促销条 */
  --sr-black:     #000000;   /* Header */
  --sr-ink:       #0B0B0B;   /* 底部 */
  --sr-brown:     #552D0A;   /* 深棕：文字 / ADD TO CART */
  --sr-brown-2:   #6B3A14;
  --sr-cream:     #ECD9CA;   /* 页面米底 */
  --sr-cream-2:   #F6EBDD;
  --sr-cream-3:   #E2CBB6;
  --sr-white:     #FFFFFF;
  --sr-amber:     #DEAB5A;   /* 琥珀：Hero 按钮 / 标语条 */
  --sr-amber-2:   #C9903F;
  --sr-hero-a:    #D0B19C;   /* Hero 左文渐变起 */
  --sr-hero-b:    #ECD8CD;   /* Hero 左文渐变止 */
  --sr-line:      rgba(85,45,10,.14);

  --sr-font: 'Gotham', 'Gotham SSm', 'Montserrat', 'Poppins',
             -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --sr-fs-hero: 55px;
  --sr-fs-h2:   34px;
  --sr-fs-h3:   21px;
  --sr-fs-body: 17px;
  --sr-fs-sm:   14px;
  --sr-fs-xs:   12px;

  --sr-pad:     clamp(20px, 4.4vw, 64px);
  --sr-section: clamp(52px, 8vw, 120px);
  --sr-maxw:    1400px;
}

/* ===================== 基础 ===================== */
.sr2 {
  font-family: var(--sr-font);
  color: var(--sr-brown);
  background: var(--sr-cream);
  -webkit-font-smoothing: antialiased;
}
.sr2-wrap { max-width: var(--sr-maxw); margin: 0 auto; padding: 0 var(--sr-pad); }
.sr2-sec  { padding: var(--sr-section) 0; }

.sr2-eyebrow { font-size: var(--sr-fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--sr-brown); margin: 0 0 14px; font-weight: 600; }
.sr2-h2 { font-size: var(--sr-fs-h2); line-height: 1.16; letter-spacing: -.015em; margin: 0 0 18px; font-weight: 700; color: var(--sr-brown); }
.sr2-lead { font-size: var(--sr-fs-body); line-height: 1.75; color: rgba(85,45,10,.8); margin: 0; max-width: 62ch; }
.sr2-center { text-align: center; }
.sr2-center .sr2-lead { margin-left: auto; margin-right: auto; }

/* ---- 按钮：设计稿两套 ---- */
/* 浅底上：琥珀底 + 深棕字（Hero） */
.sr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 38px; border: 0; border-radius: 0;
  font-family: var(--sr-font);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: filter .2s ease;
}
.sr-btn:hover { filter: brightness(.93); }
.sr-btn--amber { background: var(--sr-amber); color: var(--sr-brown); }
.sr-btn--brown { background: var(--sr-brown); color: #fff; }
.sr-btn--ghost { background: transparent; color: var(--sr-brown); border: 1px solid rgba(85,45,10,.36); }
.sr-btn--soon { background: transparent; color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.28); cursor: default; }
.sr2-products-dark .sr-btn--soon { color: rgba(85,45,10,.55); border-color: rgba(85,45,10,.3); }
.sr-btn--sm { min-height: 44px; padding: 0 28px; font-size: 11px; }

/* ===================== 1. 顶部促销条（薄荷绿） ===================== */
.sr2-topbar { background: var(--sr-mint); color: #fff; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.sr2-topbar-in {
  max-width: var(--sr-maxw); margin: 0 auto; padding: 9px var(--sr-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.sr2-topbar-links { display: flex; align-items: center; gap: 22px; }
.sr2-topbar-links a { color: inherit; text-decoration: none; opacity: .94; white-space: nowrap; }
.sr2-topbar-links a:hover { opacity: 1; }
.sr2-topbar-links .is-accent { background: var(--sr-brown); color: #fff; opacity: 1; font-weight: 700; padding: 6px 16px; }
@media (max-width: 899px) {
  .sr2-topbar-in { justify-content: center; flex-wrap: wrap; gap: 8px 14px; padding-top: 8px; padding-bottom: 8px; }
  .sr2-topbar-links { flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
  .sr2-topbar-links:last-child { display: none; }
  /* 促销长文案在窄屏必须允许换行，否则撑破视口造成横向滚动 */
  .sr2-topbar-links a { white-space: normal; text-align: center; line-height: 1.5; }
}

/* ===================== 2. Hero（左文右图） ===================== */
.sr2-hero { background: var(--sr-cream); overflow: hidden; }
.sr2-hero-grid { display: grid; grid-template-columns: 1fr; }
.sr2-hero-text {
  order: 2; padding: 46px var(--sr-pad) 50px;
  max-width: var(--sr-maxw); margin: 0 auto; width: 100%;
  background: linear-gradient(120deg, var(--sr-hero-a) 0%, var(--sr-hero-b) 100%);
}
.sr2-hero-media { order: 1; position: relative; overflow: hidden; background: var(--sr-cream-3); aspect-ratio: var(--sr-mb-ratio, 4 / 3); }
.sr2-hero-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; display: block; }
.sr2-hero-h1 {
  font-size: clamp(32px, 4vw, var(--sr-fs-hero)); line-height: 1.06; letter-spacing: -.02em; font-weight: 700;
  margin: 0 0 18px; color: var(--sr-brown); max-width: 14ch;
}
.sr2-hero-text .sr2-lead { margin-bottom: 28px; max-width: 44ch; }
@media (min-width: 900px) {
  .sr2-hero-grid { grid-template-columns: 42% 58%; align-items: stretch; min-height: 620px; }
  .sr2-hero-text { order: 1; display: flex; flex-direction: column; justify-content: center; padding: 72px 56px 72px var(--sr-pad); max-width: none; margin: 0; }
  .sr2-hero-media { order: 2; aspect-ratio: auto; }
}

/* ===================== 3. 四卖点条（米底深棕字） ===================== */
.sr2-features { background: var(--sr-amber); color: var(--sr-brown); }
.sr2-feature h3 { color: var(--sr-brown); }
.sr2-feature p { color: rgba(85,45,10,.78); }
.sr2-feature { border-color: rgba(85,45,10,.18); }
.sr2-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: var(--sr-maxw); margin: 0 auto; padding: 0 var(--sr-pad); }
.sr2-feature { padding: 32px 18px; text-align: center; border-right: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line); }
.sr2-feature:nth-child(2n) { border-right: 0; }
.sr2-feature-icon { width: 28px; height: 33px; margin: 0 auto 12px; display: block; -o-object-fit: contain; object-fit: contain; }
.sr2-feature h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 6px; font-weight: 700; color: var(--sr-brown); }
.sr2-feature p { font-size: 12.5px; line-height: 1.6; color: rgba(85,45,10,.72); margin: 0; }
@media (min-width: 900px) {
  .sr2-features-grid { grid-template-columns: repeat(4, 1fr); padding: 0; }
  .sr2-feature { border-bottom: 0; padding: 30px 22px; }
  .sr2-feature:nth-child(2n) { border-right: 1px solid var(--sr-line); }
  .sr2-feature:last-child { border-right: 0; }
}

/* ===================== 4. 产品卡 ===================== */
.sr2-cards { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 760px) { .sr2-cards { grid-template-columns: repeat(3, 1fr); } }
.sr2-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .sr2-cards--2 { grid-template-columns: repeat(2, 1fr); gap: 30px; } }
.sr2-cards__head { text-align: center; max-width: var(--sr-maxw); margin: 0 auto; padding: 0 var(--sr-pad); margin-bottom: var(--sr-section); }
.sr2-cards__head h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin: 0 0 10px; font-weight: 700; color: var(--sr-brown); }
.sr2-cards__head p { font-size: var(--sr-fs-sm); margin: 0; color: rgba(85,45,10,.72); }

.sr2-card { display: flex; flex-direction: column; }
.sr2-card-media { position: relative; overflow: hidden; background: var(--sr-cream-3); }
.sr2-card-media img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; display: block; background: var(--sr-brown); }

.sr2-card--sm .sr2-card-media { aspect-ratio: 800 / 1024; }
.sr2-card--lg .sr2-card-media { aspect-ratio: 1024 / 1024; }
.sr2-card-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--sr-amber); color: var(--sr-brown); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: 6px 12px; }
.sr2-card-body { padding: 26px 4px 4px; display: flex; flex-direction: column; flex: 1; text-align: center; }
.sr2-card-title { font-size: 18px; line-height: 1.35; letter-spacing: .01em; font-weight: 700; margin: 0 0 12px; color: var(--sr-brown); }
.sr2-card-desc { font-size: 13.5px; line-height: 1.7; color: rgba(85,45,10,.75); margin: 0 0 22px; }
.sr2-card-price { font-size: 20px; font-weight: 700; color: var(--sr-brown); margin: auto 0 18px; }
.sr2-card .sr-btn { margin: 0 auto; }
.sr2-card-feats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 5px; text-align: left; }
.sr2-card-feats li { font-size: 11.5px; line-height: 1.5; color: rgba(85,45,10,.75); display: flex; gap: 6px; }
.sr2-card-feats li::before { content: "•"; color: var(--sr-amber-2); font-weight: 700; flex: none; }

/* ===================== 5. 三个理由（纯白底） ===================== */
.sr2-why { background: var(--sr-cream); padding-bottom: 54px; }
/* Why 区标题：不要顶格，标题整体下移留出空隙 */
.sr2-why__head { padding-top: 72px; margin-bottom: 44px; }
/* 场景三卡区：上方间隙收紧，标题文字下移留出空隙 */
.sr2-scenarios { padding-top: 46px; }
.sr2-scenarios .sr2-cards__head { padding-top: 30px; margin-bottom: 40px; }
.sr2-why-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .sr2-why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.sr2-why-card { position: relative; overflow: hidden; background: var(--sr-cream-3); aspect-ratio: 600 / 800; }
.sr2-why-card img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform .5s ease; }
.sr2-why-body { position: absolute; inset: auto 0 0 0; padding: 22px 18px; background: linear-gradient(to top, rgba(11,11,11,.86), rgba(11,11,11,0)); }
.sr2-why-no { font-size: 26px; font-weight: 700; color: var(--sr-amber); margin: 0 0 4px; line-height: 1; letter-spacing: -.02em; }
.sr2-why-card h3 { font-size: 13px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; margin: 0; font-weight: 700; color: #fff; }

/* ===================== 6. 合照 + 数据 ===================== */
.sr2-stats-photo { overflow: hidden; background: var(--sr-cream-3); }
.sr2-stats-photo img { width: 100%; display: block; }
.sr2-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: var(--sr-maxw); margin: 0 auto; }
.sr2-stat { padding: 30px 18px; text-align: center; border-right: 1px solid var(--sr-line); border-top: 1px solid var(--sr-line); }
.sr2-stat:nth-child(2n) { border-right: 0; }
.sr2-stat b { display: block; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; font-weight: 700; color: var(--sr-brown); margin-bottom: 8px; }
.sr2-stat span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(85,45,10,.72); }
@media (min-width: 900px) {
  .sr2-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .sr2-stat { padding: 30px 22px; }
  .sr2-stat:nth-child(2n) { border-right: 1px solid var(--sr-line); }
  .sr2-stat:last-child { border-right: 0; }
}


/* ---- 深棕底区块（Products / Trusted By） ---- */
.sr2-products-dark { background: var(--sr-brown); padding-top: 54px; padding-bottom: 54px; }
.sr2-products-dark .sr2-cards__head h2,
.sr2-products-dark .sr2-cards__head p { color: #fff; }
.sr2-products-dark .sr2-card-title { color: #fff; }
.sr2-products-dark .sr2-card-desc { color: rgba(255,255,255,.82); }
.sr2-products-dark .sr2-card-feats li { color: rgba(255,255,255,.82); }
.sr2-products-dark .sr2-card-price { color: var(--sr-amber); }
.sr2-products-dark .sr2-card-media { background: rgba(255,255,255,.06); }

.sr2-stats-dark { background: var(--sr-brown); }
.sr2-stats-title { font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.2;
  text-align: center; margin: 0; padding: 34px var(--sr-pad) 30px; color: #fff; }
.sr2-stats-dark .sr2-h2,
.sr2-stats-dark .sr2-lead { color: #fff; }
.sr2-stats-dark .sr2-stat { border-color: rgba(255,255,255,.16); }
.sr2-stats-dark .sr2-stat b { color: var(--sr-amber); }
.sr2-stats-dark .sr2-stat span { color: rgba(255,255,255,.78); }
.sr2-stats-dark .sr2-stats-photo { background: rgba(255,255,255,.06); }

/* ===================== 7. 口碑评价（米底 + 深棕） ===================== */
.sr2-reviews { background: var(--sr-cream); }
.sr2-reviews { padding-top: 52px; background: var(--sr-cream); }
.sr2-reviews__head { text-align: center; max-width: var(--sr-maxw); margin: 0 auto; padding: 0 var(--sr-pad); margin-bottom: 36px; }
.sr2-reviews__head h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; margin: 0 0 10px; font-weight: 700; color: var(--sr-brown); }
.sr2-reviews__head p { font-size: var(--sr-fs-sm); margin: 0; color: rgba(85,45,10,.72); }
.sr2-reviews-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .sr2-reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.sr2-review { background: var(--sr-brown); color: #fff; padding: 26px 24px; }
.sr2-stars { color: var(--sr-amber); font-size: 14px; letter-spacing: 3px; margin: 0 0 12px; }
.sr2-review p { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.9); margin: 0 0 16px; }
.sr2-review-by { display: flex; align-items: center; gap: 10px; }
.sr2-review-by img { width: 40px; height: 40px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; flex: none; }
.sr2-review-by b { display: block; font-size: 13px; color: #fff; }
.sr2-review-by span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sr2-trust { margin-top: 40px; text-align: center; padding: 24px 20px; background: var(--sr-amber); }
.sr2-trust b { display: block; font-size: clamp(17px, 2vw, 24px); font-weight: 700; color: var(--sr-brown); margin-bottom: 6px; }
.sr2-trust span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(85,45,10,.8); }

.sr2-reviews__img { background: var(--sr-cream-2); overflow: hidden; }
.sr2-reviews__img img { width: 100%; height: auto; display: block; }

/* ===================== 8. FAQ（纯白底纯文字） ===================== */
.sr2-faq-sec { background: var(--sr-cream); }
.sr2-faq__head { text-align: center; max-width: var(--sr-maxw); margin: 0 auto; padding: 40px var(--sr-pad) 34px; }
.sr2-faq__head h2 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; margin: 0; font-weight: 700; }
.sr2-faq { max-width: 900px; margin: 0 auto; }
.sr2-faq-item { border-bottom: 1px solid var(--sr-line); }
.sr2-faq-item > summary {
  list-style: none; cursor: pointer; padding: 18px 0; display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--sr-brown);
}
.sr2-faq-item > summary::-webkit-details-marker { display: none; }
.sr2-faq-item > summary .n { color: var(--sr-amber-2); }
.sr2-faq-a { padding: 0 0 20px; }
.sr2-faq-a p { font-size: var(--sr-fs-sm); line-height: 1.8; color: rgba(85,45,10,.78); margin: 0; max-width: 78ch; }

/* ===================== 9. 底部（近黑 + 琥珀标语条） ===================== */
.sr2-bottom { background: var(--sr-ink); color: #fff; }
.sr2-bottom-grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: var(--sr-maxw); margin: 0 auto; padding: var(--sr-section) var(--sr-pad) 0; }
@media (min-width: 900px) { .sr2-bottom-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
.sr2-bottom-item img { width: 100%; display: block; height: auto; }
.sr2-bottom-txt { padding: 18px 0 0; text-align: center; }
.sr2-bottom-item h3 { font-size: 18px; letter-spacing: .03em; margin: 0 0 6px; font-weight: 700; color: #fff; }
.sr2-bottom-item p { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 0 0 14px; }
.sr2-bottom-nav { border-top: 1px solid rgba(255,255,255,.12); }
.sr2-bottom-nav-in { max-width: var(--sr-maxw); margin: 0 auto; padding: 26px var(--sr-pad); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 54px; }
.sr2-bottom-nav a { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-decoration: none; }
.sr2-bottom-nav a:hover { color: var(--sr-amber); }
.sr2-tagline { background: var(--sr-amber); text-align: center; padding: 16px var(--sr-pad); }
.sr2-tagline p { margin: 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--sr-brown); }

/* Reveal visibility is fail-open; Motion System 2.0 owns its one-shot entrance. */
.sr2-reveal { opacity: 1; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .sr2-why-card:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .sr2-why-card img, .sr2-why-card:hover img { transition: none; transform: none; }
}

/* ==========================================================================
   stats 区：客户要求去掉文字，只保留卡片底色
   （放在 sr-dtc2-d97bf5da8e.css —— 才会随首页一起加载）
   ========================================================================== */
.sr2-stat b, .sr2-stat span { display: none !important; }
.sr2-stats-grid .sr2-stat { min-height: 0 !important; }
.sr2-stats-grid .sr2-stat[class*="reveal"] { opacity: 1 !important; transform: none !important; }

/* 产品卡整体缩小 20%：卡片容器与媒体同步收窄 */



/* ==========================================================================
   2026-10-10 追加
   · reviews 区内容限 990 居中（不铺满）
   · 促销下方按钮文案全站去除（含首页）
   · 促销图满宽、保持原比例，不截取
   ========================================================================== */

/* reviews 内容限 990 居中 */
.sr2-reviews__head, .sr2-reviews-grid { max-width: 990px; margin-left: auto; margin-right: auto; }
.sr2-reviews { max-width: 990px; margin: 0 auto; }

/* 促销图下方的按钮与文案：全站隐藏（图片自带 SHOP NOW） */
.sr2-bottom-txt { display: none !important; }

/* 促销图：满宽 + 保持原比例，不截取、不拉伸 */
.sr2-bottom-item img {
  width: 100% !important; height: auto !important;
  -o-object-fit: contain !important;
     object-fit: contain !important; -o-object-position: center !important; object-position: center !important;
  max-height: none !important; display: block;
}
.sr2-bottom-item { text-align: center; }
.sr2-bottom-grid { align-items: start; }




/* ==========================================================================
   2026-10-10 下午（客户 7 项）
   ========================================================================== */
/* ① 首页 Why 卡：只保留图片内部的序号与文案，隐藏我叠加的那层 */
.sr2-why-body { display: none !important; }

/* ② reviews 区底色改白 */
.sr2-reviews, .sr2-reviews__head, .sr2-reviews-grid { background: #fff !important; }
.sr2-reviews * { background-color: transparent; }
.sr2-reviews { background: #fff !important; }

/* ④ 底部促销卡：图片与卡片一起等比缩小到红框范围（约 52%），居中 */
.sr2-bottom-grid { justify-items: center; }
.sr2-bottom-item { width: 100%; margin-inline: auto; }
.sr2-bottom-item img { width: 100% !important; height: auto !important; -o-object-fit: contain !important; object-fit: contain !important; }



/* ==========================================================================
   2026-10-10 客户：首页促销卡贴底，要上下居中留空隙（与子页一致）
   原 padding: var(--sr-section) var(--sr-pad) 0  →  下内边距为 0，卡片贴着页尾导航
   ========================================================================== */
.sr2-bottom-grid { padding: 100px 18px 100px !important; align-items: center; }
@media (max-width:899px){ .sr2-bottom-grid { padding: 40px 18px 40px !important; } }


/* ==========================================================================
   2026-10-10 客户（4 项）
   ========================================================================== */
/* ① 促销卡整块可点击 */
.sr2-bottom-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.sr2-bottom-link:hover img { opacity: .92; }
.sr2-bottom-link img { transition: opacity .25s ease; }

/* ④ 促销两卡作为一组居中（参考红框：两卡相邻、整体居中、约占屏 55%） */
.sr2-bottom-grid { max-width: 1060px !important; margin-inline: auto !important; }
@media (max-width:899px){ .sr2-bottom-grid { max-width: 100% !important; } }

/* 卡片填满网格列（网格 1060 居中 → 每卡约 513，两张合计占屏 55%，与客户红框一致） */
.sr2-bottom-item { width: 100% !important; margin-inline: auto !important; }

/* 「油膏」卡（原 Coming soon）：价格行与其它卡一致 */
.sr2-card-price { white-space: nowrap; }

/* 2 卡区：图片可点击跳商品 */
.sr2-card-media-link { display:block; width:100%; }
.sr2-card-media-link img { transition: opacity .25s ease; }
.sr2-card-media-link:hover img { opacity: .92; }

/* ==========================================================================
   2026-10-13 移动端修复（客户反馈「移动端还有很大问题」）
   ========================================================================== */

/* ① 恢复底部促销区的文字块（此前被 display:none 隐藏，导致移动端
      看不到商品标题/价格，SHOP NOW 按钮也点不到）
      改为：仅图片足够大时隐藏重复文案的规则取消，全端显示 */
.sr2-bottom-txt { display: none !important; }
.sr2-bottom-txt h3 {
  font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
  margin: 16px 0 8px; color: #fff;
}
.sr2-bottom-txt p { font-size: 14px; color: rgba(255,255,255,.82); margin: 0 0 16px; }
.sr2-bottom-txt .sr-btn { min-height: 46px; padding: 0 30px; }

/* ② 底部导航链接：加大点击区域到 ≥44px（原仅 20px 高，手指点不准） */
.sr2-bottom-nav a {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 13px;
}

/* ③ 抽屉菜单项：已是 54px 高，补一下横向内边距与触控反馈 */
.sr-nav-drawer a, .header__menu-item a { min-height: 48px; }

@media (max-width: 899px) {
  /* ④ 页头图标按钮：扩大可点区域到 44×44（原 26~28px） */
  .header__search-btn, .header__cart, .header__drawer_icon, .header__icons a, .header__icons i {
    min-width: 44px !important; min-height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  /* ⑤ 底部促销卡：移动端单列，图片下方文字紧凑排布 */
  .sr2-bottom-grid { gap: 26px !important; padding: 30px 16px 26px !important; }
  .sr2-bottom-item { border-radius: 6px; overflow: hidden; }
  .sr2-bottom-txt { padding: 14px 14px 20px !important; }
  .sr2-bottom-txt h3 { font-size: 15px; margin: 0 0 6px; }
  .sr2-bottom-txt p { font-size: 13px; margin: 0 0 14px; }
  .sr2-bottom-txt .sr-btn { width: 100%; min-height: 48px; }
}

/* ⑥ 商品页面包屑：加大点击区域 */
nav[class*=breadcrumb] a, [class*=breadcrumb] a { display: inline-block; padding: 6px 2px; min-height: 32px; }

/* 2026-10-13 修正：底部促销区标题/价格被挤在同一行（主题把 h3/p 设成了 inline） */
.sr2-bottom-txt h3 { display: block !important; }
.sr2-bottom-txt p  { display: block !important; }
.sr2-bottom-item { display: flex !important; flex-direction: column; align-items: stretch; }
.sr2-bottom-item > img { width: 100% !important; }

/* 2026-10-13 修复：底部促销卡「图 + 文字」上下堆叠（文字块不再是网格直接子元素） */
.sr2-bottom-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.sr2-bottom-item > img { width: 100% !important; display: block; }
.sr2-bottom-txt { display: none !important; }
.sr2-bottom-txt .sr-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
