/* ==========================================================================
   宜宇优选 · 商品广场页样式（.sp-*）
   --------------------------------------------------------------------------
   原为 pages/tpl/t_shop.php 的内联 <style>，2026-09-20 抽出成独立文件。

   【为什么抽出来】/shop 迁移到 Nuxt 后，Vue 组件拿不到 PHP 模板里的内联样式。
   若把样式复制进 SFC，就会出现「同一套 .sp-* 两份真源」，改一处漏一处。
   现在 PHP（layout.php 的 $v['css'] 机制）与 Nuxt（layouts/default.vue 的
   ZONE_SKIN）**引用同一个 URL** —— 一份文件，两端同款。

   颜色全部走变量（--sp-* 定义在 .sp 上，品牌态走 html[data-zone=shop] 的
   --brand-* / --grad-brand，由 mall.css 提供），换肤不需要改这里。
   ========================================================================== */
/* ============ 宜宇商品广场 · 得物风 ============
   【2026-09-19】本页不再自带顶栏 —— 模块 chrome（ym-hd 顶栏 + ym-tb 底栏）
   由 layout.php 的 zone=shop 统一输出，此前模块顶栏与页内搜索头叠着是 bug。
   这里只保留页面内容自身的样式。（注释里勿写旧类名字面量，会污染残留检查） */
.sp{--sp-mint:#0d7a5f;--sp-mint2:#12a37c;--sp-rose:#0d7a5f;--sp-ink:#0f1720;--sp-t2:#5a6b78;--sp-t3:#93a2ad;--sp-line:#e8eef0;--sp-bg:#f5f7f8;background:var(--sp-bg);min-height:100vh}

/* 频道切换（商品广场 IP 的两个频道 + 全部） */
.sp-ch{display:flex;gap:8px;align-items:center;background:#fff;padding:10px 14px 9px;border-bottom:1px solid var(--sp-line);overflow-x:auto;scrollbar-width:none}
.sp-ch::-webkit-scrollbar{display:none}
.sp-ch a{flex:none;text-decoration:none;font-size:13px;color:var(--sp-t2);padding:7px 15px;border-radius:999px;background:#f2f5f6;border:1px solid transparent}
.sp-ch a.on{color:#fff;background:linear-gradient(135deg,#0d7a5f,#12a37c);font-weight:700}
.sp-ch__sp{flex:1}
.sp-ch__hint{flex:none;font-size:10.5px;color:var(--sp-t3)}

/* 分类胶囊 */
.sp-cats{background:#fff;padding:10px 0 8px;border-bottom:1px solid var(--sp-line)}
.sp-cats__w{display:flex;gap:8px;overflow-x:auto;padding:0 14px;scrollbar-width:none}
.sp-cats__w::-webkit-scrollbar{display:none}
.sp-cat{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;min-width:52px}
.sp-cat__i{width:42px;height:42px;border-radius:13px;background:linear-gradient(140deg,#f0faf6,#e2f5ee);display:grid;place-items:center;border:1px solid #e4f2ec}
.sp-cat__i svg{width:20px;height:20px;stroke:var(--sp-mint2)}
.sp-cat__t{font-size:11px;color:var(--sp-t2);white-space:nowrap}
.sp-cat.on .sp-cat__i{background:linear-gradient(140deg,#0d7a5f,#12a37c);border-color:#0d7a5f}
.sp-cat.on .sp-cat__i svg{stroke:#fff}
.sp-cat.on .sp-cat__t{color:var(--sp-mint);font-weight:600}

/* 积分横幅 */
.sp-bal{margin:10px 14px 0;border-radius:15px;background:linear-gradient(120deg,#0b6a52,#12a37c 58%,#1fb98c);padding:14px 15px;display:flex;align-items:center;justify-content:space-between;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(13,122,95,.2)}
.sp-bal::after{content:"";position:absolute;right:-28px;top:-38px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.09)}
.sp-bal__l{position:relative;z-index:1}
.sp-bal__k{font-size:11px;opacity:.86;letter-spacing:.4px}
.sp-bal__v{font-size:25px;font-weight:800;letter-spacing:.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.sp-bal__v em{font-size:12px;font-style:normal;font-weight:500;opacity:.86;margin-left:4px}
.sp-bal__b{position:relative;z-index:1;display:flex;gap:7px}
.sp-bal__b a{text-decoration:none;font-size:11.5px;font-weight:600;color:#0b6a52;background:#fff;padding:7px 13px;border-radius:999px}

/* 限时特卖 */
.sp-fl{margin:12px 14px 0;background:#fff;border-radius:15px;overflow:hidden;border:1px solid #d8eee7}
.sp-fl__h{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:linear-gradient(100deg,#f0faf6,#ffffff);border-bottom:1px solid #e2f5ee}
.sp-fl__t{display:flex;align-items:center;gap:7px}
.sp-fl__t b{font-size:14px;color:#0b6a52;font-weight:800;letter-spacing:.3px}
.sp-fl__tag{font-size:10px;font-weight:700;color:#fff;background:var(--sp-rose);padding:2px 7px;border-radius:5px}
.sp-fl__cd{display:flex;align-items:center;gap:3px;font-size:11px;color:#0b6a52;font-weight:700}
.sp-fl__cd i{font-style:normal;background:#0b6a52;color:#fff;padding:2px 5px;border-radius:4px;font-variant-numeric:tabular-nums}
.sp-fl__w{display:flex;gap:10px;overflow-x:auto;padding:11px 13px;scrollbar-width:none}
.sp-fl__w::-webkit-scrollbar{display:none}
.sp-fl__c{flex:none;width:104px;text-decoration:none;color:inherit}
.sp-fl__p{width:104px;height:104px;border-radius:11px;background:#f2f5f6 center/cover no-repeat;position:relative;overflow:hidden}
.sp-fl__off{position:absolute;left:0;top:0;background:var(--sp-rose);color:#fff;font-size:9.5px;font-weight:700;padding:2px 6px;border-bottom-right-radius:8px}
.sp-fl__n{font-size:11.5px;color:var(--sp-ink);margin-top:6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-fl__pr{display:flex;align-items:baseline;gap:5px;margin-top:4px}
.sp-fl__pr b{color:var(--sp-rose);font-size:14px;font-weight:800}
.sp-fl__pr s{color:var(--sp-t3);font-size:10.5px}

/* 品牌云 */
.sp-br{display:flex;gap:7px;flex-wrap:wrap;padding:12px 14px 2px}
.sp-br a{text-decoration:none;font-size:11.5px;color:var(--sp-t2);background:#fff;border:1px solid var(--sp-line);padding:5px 11px;border-radius:999px}
.sp-br a.on,.sp-br a:active{color:var(--sp-mint);border-color:#bfe6d8;background:#f2fbf8}

/* ============ Hero 主视觉（得物式大图） ============ */
.sp-hero{margin:12px 14px 0;border-radius:18px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#0a5c47,#0d7a5f 45%,#12a37c);box-shadow:0 10px 26px rgba(11,106,82,.26)}
.sp-hero__tag{position:absolute;left:14px;top:13px;z-index:3;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.4px;padding:4px 10px;border-radius:999px}
.sp-hero__tag svg{width:11px;height:11px;stroke:#fff;fill:none}
/* 主图 + 右侧两小图 */
.sp-hero__w{display:flex;gap:2px;min-height:214px}
.sp-hero__m{flex:1.6;position:relative;background:#0b6a52 center/cover no-repeat;min-width:0}
.sp-hero__m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,38,29,.06) 0%,rgba(4,38,29,.32) 46%,rgba(4,38,29,.86) 100%)}
.sp-hero__mb{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 15px 15px;color:#fff}
.sp-hero__cat{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:2px 8px;border-radius:5px;margin-bottom:7px}
.sp-hero__t{font-size:18px;font-weight:800;line-height:1.3;letter-spacing:.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 10px rgba(0,0,0,.35)}
.sp-hero__d{font-size:11px;opacity:.86;margin-top:5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sp-hero__pr{display:flex;align-items:baseline;gap:8px;margin-top:9px}
.sp-hero__pr b{font-size:23px;font-weight:900;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.sp-hero__pr b i{font-size:13px;font-style:normal;font-weight:700;margin-right:1px}
.sp-hero__pr s{font-size:11.5px;opacity:.6}
.sp-hero__go{position:absolute;right:13px;bottom:14px;z-index:3;
  background:#fff;color:#0b6a52;font-size:11.5px;font-weight:800;
  padding:7px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
/* 右侧小图 */
.sp-hero__s{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-hero__sc{flex:1;position:relative;background:#12685a center/cover no-repeat;display:block}
.sp-hero__sc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,38,29,.8) 100%)}
.sp-hero__sb{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 10px 9px;color:#fff}
.sp-hero__sn{font-size:11px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-hero__sp{font-size:12px;font-weight:800;margin-top:3px}
.sp-hero__sp i{font-size:10px;font-style:normal;font-weight:600;margin-right:1px}
/* 底部快讯条 */
.sp-hero__tick{display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:rgba(0,0,0,.22);color:#eafff7;font-size:11px;overflow:hidden}
.sp-hero__tick svg{width:12px;height:12px;stroke:#8ff0d0;fill:none;flex:none}
.sp-hero__tick a{color:#eafff7;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.sp-hero__tick em{font-style:normal;color:#8ff0d0;font-weight:700}

/* 区块标题 */
.sp-sec{margin-top:14px;padding:0 14px}.sp-sec__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.sp-sec__t{display:flex;align-items:center;gap:7px}
.sp-sec__t b{font-size:15.5px;color:var(--sp-ink);font-weight:800;letter-spacing:.2px}
.sp-sec__t i{width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,#12a37c,#0d7a5f);display:block}
.sp-sec__m{font-size:11.5px;color:var(--sp-t3);text-decoration:none;display:flex;align-items:center;gap:2px}
.sp-sec__m svg{width:12px;height:12px;stroke:var(--sp-t3)}

/* 商品网格（双列，得物式） */
.sp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.sp-c{background:#fff;border-radius:13px;overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:0 1px 3px rgba(15,23,32,.05)}
.sp-c__p{position:relative;aspect-ratio:1/1;background:#f2f5f6 center/cover no-repeat}
.sp-c__bg{position:absolute;left:6px;top:6px;display:flex;gap:4px}
.sp-c__t{font-size:9.5px;font-weight:700;color:#fff;padding:2px 6px;border-radius:5px;line-height:1.5}
.sp-c__t--new{background:#0d7a5f}
.sp-c__t--hot{background:#e5484d}
.sp-c__t--rec{background:#f59e0b}
.sp-c__fav{position:absolute;right:6px;bottom:6px;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.sp-c__fav svg{width:14px;height:14px;stroke:var(--sp-t3);fill:none}
.sp-c__fav.on svg{stroke:var(--sp-rose);fill:var(--sp-rose)}
.sp-c__b{padding:8px 9px 10px}
.sp-c__n{font-size:12.5px;color:var(--sp-ink);line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.sp-c__tg{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap}
.sp-c__tg span{font-size:9.5px;color:#0d7a5f;background:#eefaf5;padding:1px 5px;border-radius:4px}
.sp-c__pr{display:flex;align-items:baseline;gap:4px;margin-top:6px}
.sp-c__pr b{color:var(--sp-rose);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.sp-c__pr b i{font-size:10.5px;font-style:normal;font-weight:700}
.sp-c__pr s{color:var(--sp-t3);font-size:10.5px}
.sp-c__sc{font-size:12.5px;font-weight:700;color:var(--sp-mint)}
.sp-c__sc i{font-size:10px;font-style:normal;font-weight:600;margin-left:2px}
.sp-c__ft{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.sp-c__sl{font-size:10px;color:var(--sp-t3)}
.sp-c__gz{font-size:9.5px;font-weight:600;color:#0d7a5f;background:#eefaf5;border:1px solid #d5f0e5;padding:2px 5px;border-radius:4px}
.sp-c__bar{height:3px;border-radius:2px;background:#f0f3f4;margin-top:5px;overflow:hidden}
.sp-c__bar i{display:block;height:100%;background:linear-gradient(90deg,#12a37c,#e5484d);border-radius:2px}

/* 排序栏 */
.sp-sorts{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--sp-line);display:flex;align-items:center;gap:2px;padding:0 6px;overflow-x:auto;scrollbar-width:none}
.sp-sorts::-webkit-scrollbar{display:none}
.sp-sorts a{flex:none;text-decoration:none;font-size:12.5px;color:var(--sp-t2);padding:11px 12px;position:relative;white-space:nowrap}
.sp-sorts a.on{color:var(--sp-mint);font-weight:700}
.sp-sorts a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:2.5px;border-radius:2px;background:var(--sp-mint)}

/* 空态 */
.sp-empty{padding:60px 20px;text-align:center;color:var(--sp-t3);font-size:13px}
.sp-empty svg{width:52px;height:52px;stroke:#cfd9de;margin-bottom:12px}

/* 数据条 */
.sp-stat{display:flex;gap:8px;padding:12px 14px 0}
.sp-stat__i{flex:1;background:#fff;border-radius:12px;padding:10px 8px;text-align:center;border:1px solid var(--sp-line)}
.sp-stat__v{font-size:16px;font-weight:800;color:var(--sp-mint);font-variant-numeric:tabular-nums}
.sp-stat__k{font-size:10.5px;color:var(--sp-t3);margin-top:2px}

/* 保障条 */
.sp-trust{display:flex;justify-content:space-around;padding:16px 14px 6px;margin-top:12px;background:#fff;border-top:1px solid var(--sp-line)}
.sp-trust__i{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--sp-t2)}
.sp-trust__i svg{width:19px;height:19px;stroke:var(--sp-mint2)}

/* 分页 */
.sp-pg{display:flex;justify-content:center;gap:7px;padding:18px 14px}
.sp-pg a,.sp-pg span{min-width:34px;height:34px;padding:0 10px;border-radius:9px;background:#fff;border:1px solid var(--sp-line);display:grid;place-items:center;font-size:12.5px;color:var(--sp-t2);text-decoration:none}
.sp-pg a.on{background:var(--sp-mint);border-color:var(--sp-mint);color:#fff;font-weight:700}

/* 悬浮购物车已移除 —— 模块底栏 ym-tb 的中央隆起购物车就是主 CTA，
   页面里再浮一个购物车是重复入口（双头 bug 的兄弟问题）。 */

.sp-bn{margin:12px 14px 0;display:grid;gap:10px}
    .sp-bn__c{position:relative;display:block;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--sp-line);text-decoration:none}
    .sp-bn__c img{width:100%;display:block;aspect-ratio:3/1;object-fit:cover}
    .sp-bn__t{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 8px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(15,23,32,.58))}